feat: Change data table component dynamically

- Ubah komponen DataTable agar bisa render menyesuaikan jumlah kolom dan baris pada data

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

@@ -1,11 +1,24 @@
 import { FC, ReactElement, useState } from 'react';
-import { FilterOutlined, SearchOutlined } from '@ant-design/icons';
+import {
+  FilterOutlined,
+  SearchOutlined,
+  EditOutlined,
+} from '@ant-design/icons';
 import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
 import { Pagination } from '@imphnen-frontend-service/ui/molecules';
 import { DataTable } from '@imphnen-frontend-service/ui/organisms';
 
+// Define account interface
+interface Account {
+  id: number;
+  name: string;
+  email: string;
+  phone: string;
+  address: string;
+}
+
 // Mock data for demonstration
-const mockData = Array.from({ length: 20 }, (_, i) => ({
+const mockData: Account[] = Array.from({ length: 20 }, (_, i) => ({
   id: i + 1,
   name: i === 0 ? 'Ahmad Wijuana' : 'Nama Lengkap',
   email: 'Fullname23@gmail.com',
@@ -79,7 +92,35 @@ export const Components: FC = (): ReactElement => {
         </div>
 
         {/* Table */}
-        <DataTable data={currentItems} onEdit={handleEdit} />
+        <DataTable
+          data={currentItems}
+          headers={[
+            {
+              label: 'No.',
+              render: (_, index) => index + 1 + indexOfFirstItem,
+            },
+            { label: 'Nama Lengkap', key: 'name' },
+            { label: 'Email', key: 'email' },
+            { label: 'Nomor Telp', key: 'phone' },
+            { label: 'Alamat Pengiriman', key: 'address' },
+            {
+              label: 'Action',
+              render: (item: Account) => (
+                <Button
+                  variant="primary"
+                  size="sm"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleEdit(item.id);
+                  }}
+                  className="flex items-center gap-2"
+                >
+                  <EditOutlined /> Edit
+                </Button>
+              ),
+            },
+          ]}
+        />
 
         {/* Pagination */}
         <Pagination

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

@@ -1,16 +1,34 @@
 import { FC, ReactElement, useState } from 'react';
-import { FilterOutlined, SearchOutlined } from '@ant-design/icons';
+import {
+  FilterOutlined,
+  SearchOutlined,
+  FileTextOutlined,
+} from '@ant-design/icons';
 import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
 import { Pagination } from '@imphnen-frontend-service/ui/molecules';
 import { DataTable } from '@imphnen-frontend-service/ui/organisms';
 
-// Mock data for demonstration
+// Define status type for better type safety
-const mockData = Array.from({ length: 20 }, (_, i) => ({
+type TransactionStatus = 'valid' | 'invalid' | 'unchecked';
+
+// Define transaction interface
+interface Transaction {
+  id: number;
+  name: string;
+  transactionNumber: string;
+  status: TransactionStatus;
+}
+
+// Mock data for transactions
+const mockTransactions: Transaction[] = Array.from({ length: 20 }, (_, i) => ({
   id: i + 1,
   name: i === 0 ? 'Ahmad Wijuana' : 'Nama Lengkap',
-  email: 'Fullname23@gmail.com',
+  transactionNumber: '25D2133Y9AFYBD',
-  phone: '081904423804',
+  status: (i % 3 === 0
-  address: 'Jl. Pantai Cibaduyut Indonesia',
+    ? 'invalid'
+    : i % 5 === 0
+    ? 'unchecked'
+    : 'valid') as TransactionStatus,
 }));
 
 export const Components: FC = (): ReactElement => {
@@ -19,10 +37,10 @@ export const Components: FC = (): ReactElement => {
   const itemsPerPage = 9;
 
   // Filter data based on search query
-  const filteredData = mockData.filter(
+  const filteredData = mockTransactions.filter(
     (item) =>
       item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      item.email.toLowerCase().includes(searchQuery.toLowerCase())
+      item.transactionNumber.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
   // Paginate data
@@ -30,9 +48,9 @@ export const Components: FC = (): ReactElement => {
   const indexOfFirstItem = indexOfLastItem - itemsPerPage;
   const currentItems = filteredData.slice(indexOfFirstItem, indexOfLastItem);
 
-  const handleEdit = (id: number) => {
+  const handleValidate = (id: number) => {
-    console.log(`Edit item with id: ${id}`);
+    console.log(`Validate transaction with id: ${id}`);
-    // Implement edit functionality
+    // Implement validation functionality
   };
 
   const handlePageChange = (pageNumber: number) => {
@@ -78,7 +96,57 @@ export const Components: FC = (): ReactElement => {
         </div>
 
         {/* Table */}
-        <DataTable data={currentItems} onEdit={handleEdit} />
+        <DataTable
+          data={currentItems}
+          headers={[
+            {
+              label: 'No.',
+              render: (_, index) => index + 1 + indexOfFirstItem,
+            },
+            { label: 'Nama Lengkap', key: 'name' },
+            { label: 'Nomor Transaksi', key: 'transactionNumber' },
+            {
+              label: 'Order Valid?',
+              render: (item: Transaction) => {
+                const statusColors: Record<TransactionStatus, string> = {
+                  valid: 'bg-success-500 text-white',
+                  invalid: 'bg-danger-500 text-white',
+                  unchecked: 'bg-yellow-400 text-black',
+                };
+                const statusText: Record<TransactionStatus, string> = {
+                  valid: 'Valid',
+                  invalid: 'Invalid',
+                  unchecked: 'Unchecked',
+                };
+                return (
+                  <div
+                    className={`py-1 px-3 rounded-md text-center ${
+                      statusColors[item.status]
+                    }`}
+                  >
+                    {statusText[item.status]}
+                  </div>
+                );
+              },
+            },
+            {
+              label: 'Action',
+              render: (item: Transaction) => (
+                <Button
+                  variant="primary"
+                  size="sm"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleValidate(item.id);
+                  }}
+                  className="flex items-center gap-2"
+                >
+                  <FileTextOutlined /> Validate
+                </Button>
+              ),
+            },
+          ]}
+        />
 
         {/* Pagination */}
         <Pagination

libs/ui/src/organisms/datatable/datatable.tsx

@@ -1,66 +1,80 @@
-import { FC, ReactElement } from 'react';
+import { FC, ReactElement, ReactNode } from 'react';
-import { EditOutlined } from '@ant-design/icons';
-import { Button } from '../../atoms'; // Use relative import for Button
 
-interface DataTableProps {
+interface DataTableProps<T> {
-  data: Array<{
+  data: T[];
-    id: number;
+  headers: {
-    name: string;
+    label: string;
-    email: string;
+    key?: keyof T;
-    phone: string;
+    render?: (item: T, index: number) => ReactNode;
-    address: string;
+    className?: string;
-  }>;
+  }[];
-  onEdit: (id: number) => void;
+  showCheckbox?: boolean;
+  onRowClick?: (item: T) => void;
 }
 
-export const DataTable: FC<DataTableProps> = ({
+export const DataTable = <T extends Record<string, any>>({
   data,
-  onEdit,
+  headers,
-}): ReactElement => {
+  showCheckbox = true,
+  onRowClick,
+}: DataTableProps<T>): ReactElement => {
   return (
     <div className="w-full overflow-x-auto">
       <table className="w-full min-w-full text-base">
         <thead className="bg-primary-50 mb-3">
           <tr>
-            <th className="py-3 px-5 text-left font-normal rounded-l-lg">
+            {showCheckbox && (
-              <input type="checkbox" className="rounded" />
+              <th className="py-3 px-5 text-left font-normal rounded-l-lg">
-            </th>
+                <input type="checkbox" className="rounded" />
-            <th className="py-3 px-5 text-left font-normal">No.</th>
+              </th>
-            <th className="py-3 px-5 text-left font-normal">Nama Lengkap</th>
+            )}
-            <th className="py-3 px-5 text-left font-normal">Email</th>
+            {headers.map((header, index) => {
-            <th className="py-3 px-5 text-left font-normal">Nomor Telp</th>
+              const isFirst = index === 0 && !showCheckbox;
-            <th className="py-3 px-5 text-left font-normal">
+              const isLast = index === headers.length - 1;
-              Alamat Pengiriman
+              return (
-            </th>
+                <th
-            <th className="py-3 px-5 text-left font-normal rounded-r-lg">
+                  key={index}
-              Action
+                  className={`py-3 px-5 text-left font-normal ${
-            </th>
+                    isFirst ? 'rounded-l-lg' : ''
+                  } ${isLast ? 'rounded-r-lg' : ''} ${header.className || ''}`}
+                >
+                  {header.label}
+                </th>
+              );
+            })}
           </tr>
         </thead>
         <tbody className="mt-3">
-          {data.map((item, index) => (
+          {data.map((item, rowIndex) => (
             <tr
-              key={item.id}
+              key={rowIndex}
-              className={index % 2 === 0 ? 'bg-white' : 'bg-primary-100'}
+              className={rowIndex % 2 === 0 ? 'bg-white' : 'bg-primary-100'}
+              onClick={() => onRowClick && onRowClick(item)}
             >
-              <td className="py-3 px-5 rounded-l-lg">
+              {showCheckbox && (
-                <input type="checkbox" className="rounded" />
+                <td className="py-3 px-5 rounded-l-lg">
-              </td>
+                  <input type="checkbox" className="rounded" />
-              <td className="py-3 px-5">{index + 1}</td>
+                </td>
-              <td className="py-3 px-5">{item.name}</td>
+              )}
-              <td className="py-3 px-5 truncate">{item.email}</td>
+              {headers.map((header, colIndex) => {
-              <td className="py-3 px-5">{item.phone}</td>
+                const isFirst = colIndex === 0 && !showCheckbox;
-              <td className="py-3 px-5 truncate">{item.address}</td>
+                const isLast = colIndex === headers.length - 1;
-              <td className="py-3 px-5 rounded-r-lg">
+
-                <Button
+                return (
-                  variant="primary"
+                  <td
-                  size="sm"
+                    key={colIndex}
-                  onClick={() => onEdit(item.id)}
+                    className={`py-3 px-5 ${isFirst ? 'rounded-l-lg' : ''} ${
-                  className="flex items-center gap-2"
+                      isLast ? 'rounded-r-lg' : ''
-                >
+                    }`}
-                  <EditOutlined /> Edit
+                  >
-                </Button>
+                    {header.render
-              </td>
+                      ? header.render(item, rowIndex)
+                      : header.key
+                      ? item[header.key]
+                      : null}
+                  </td>
+                );
+              })}
             </tr>
           ))}
         </tbody>