feat: add table component on manage account and manage groups

src/pages/account/manage/ManageAccount.tsx

@@ -0,0 +1,81 @@
+import { apiConfig } from '@/config/api.config';
+import { Account, columns } from './account/Columns';
+import { DataTable } from '@/components/ui/DataTable';
+import axios from 'axios';
+import { useEffect, useState } from 'react';
+import { getData } from '@/utils';
+import { useCallApi } from '@/hooks';
+
+const API_URL = apiConfig.service_dashboard;
+
+const dataAccount: Account[] = [
+  {
+    id: 1,
+    name: 'eMoney Account',
+    description: 'Rekening Member eMoney',
+    systemAccount: false,
+    createdDate: new Date('2019-12-05'),
+    creditLimit: null,
+    currency: null
+  },
+  {
+    id: 2,
+    name: 'Merchant Account',
+    description: 'Rekening Merchant',
+    systemAccount: false,
+    createdDate: new Date(),
+    creditLimit: null,
+    currency: null
+  }
+];
+
+const ManageAccount = () => {
+  const [accounts, setAccounts] = useState<Account[]>([]);
+  const { GetData } = useCallApi();
+  // console.log(accounts);
+
+  useEffect(() => {
+    const fetchAccount = async () => {
+      try {
+        const response = await fetch(`${API_URL}/user/list`);
+        const data: Account[] = await response.json();
+        setAccounts(data);
+      } catch (error) {
+        console.error('Error fetching data', error);
+      }
+    };
+
+    fetchAccount();
+  }, []);
+
+  // const fetchAccount = async (page: number, limit: number, sorting: any, filter: any) => {
+  //   try {
+  //     const response = await GetData(`${API_URL}/user/list`, {
+  //       limit: limit,
+  //       page: page + 1,
+  //       with_deleted: true,
+  //       order_field: sorting[0].id,
+  //       order_direction: sorting[0].desc == false ? 'ASC' : 'DESC',
+  //       filter: JSON.stringify(filter)
+  //     });
+
+  //     setAccounts(response?.data.list);
+
+  //     return {
+  //       data: response?.data.list,
+  //       totalCount: response?.data.total_count
+  //     };
+  //   } catch (error) {
+  //     console.log(error);
+  //   }
+  // };
+
+  return (
+    <div className="container mx-auto p-5">
+      <h1 className="text-xl font-medium leading-none text-gray-900 p-5">Manage Account</h1>
+      <DataTable columns={columns} data={dataAccount} />
+    </div>
+  );
+};
+
+export default ManageAccount;

src/pages/account/manage/account/Columns.tsx

@@ -0,0 +1,71 @@
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu';
+import { ColumnDef } from '@tanstack/react-table';
+import { MoreHorizontal } from 'lucide-react';
+
+export type Account = {
+  createdDate: Date;
+  creditLimit: number | null;
+  currency: string | null;
+  description: string;
+  id: number;
+  name: string;
+  systemAccount: boolean;
+};
+
+export const columns: ColumnDef<Account>[] = [
+  {
+    accessorKey: 'id',
+    header: 'ID'
+  },
+  {
+    accessorKey: 'name',
+    header: 'Name'
+  },
+  {
+    accessorKey: 'description',
+    header: 'Description'
+  },
+  {
+    accessorKey: 'systemAccount',
+    header: 'System Account'
+  },
+  {
+    accessorKey: 'createdDate',
+    header: 'Created Date',
+    cell: ({ row }) => new Date(row.original.createdDate).toLocaleDateString()
+  },
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      const dataAccount = row.original;
+
+      return (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="h-8 w-8 p-0">
+              <span className="sr-only">Open menu</span>
+              <MoreHorizontal className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>Actions</DropdownMenuLabel>
+            <DropdownMenuItem
+              onClick={() => navigator.clipboard.writeText(dataAccount.id.toString())}
+            >
+              Copy account ID
+            </DropdownMenuItem>
+            {/* <DropdownMenuSeparator /> */}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    }
+  }
+];

src/pages/groups/Column.tsx

@@ -0,0 +1,30 @@
+import { ColumnDef } from '@tanstack/react-table';
+
+export type Group = {
+  id: number;
+  createdDate: Date;
+  name: string;
+  description: string;
+};
+
+export const columns: ColumnDef<Group>[] = [
+  {
+    accessorKey: 'id',
+    header: 'ID'
+  },
+  {
+    accessorKey: 'createdDate',
+    header: 'Created Date'
+  },
+  {
+    accessorKey: 'name',
+    header: 'Name'
+  },
+  {
+    accessorKey: 'description',
+    header: 'Description'
+  },
+  {
+    id: 'actions'
+  }
+];

src/pages/groups/ManageGroups.tsx

@@ -0,0 +1,36 @@
+import { DataTable } from '@/components/ui/DataTable';
+import { columns, Group } from './Column';
+
+const dataGroup: Group[] = [
+  {
+    id: 1,
+    createdDate: new Date('2018-11-23'),
+    name: 'ADMIN',
+    description: 'Admin Web'
+  },
+  {
+    id: 2,
+    createdDate: new Date('2019-02-08'),
+    name: 'BANK',
+    description: 'Bank/Switching Group'
+  },
+  {
+    id: 3,
+    createdDate: new Date('2018-11-27'),
+    name: 'REGULER',
+    description: 'Reguler Member'
+  }
+];
+
+const ManageGroups = () => {
+  return (
+    <div>
+      <div className="container mx-auto pt-2">
+        <h1 className="text-xl font-medium leading-none text-gray-900 p-5">Groups</h1>
+        <DataTable data={dataGroup} columns={columns} />
+      </div>
+    </div>
+  );
+};
+
+export default ManageGroups;