feat: add table component on manage account and manage groups

src/components/ui/DataTable.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  useReactTable
+} from '@tanstack/react-table';
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@/components/ui/table';
+import { useState } from 'react';
+import { Input } from './input';
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+}
+
+export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    getFilteredRowModel: getFilteredRowModel(),
+    state: {
+      columnFilters
+    }
+  });
+
+  return (
+    <div>
+      <div className="flex items-center py-4">
+        <Input
+          placeholder="Search"
+          value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+          onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+          className="max-w-sm"
+        />
+      </div>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(header.column.columnDef.header, header.getContext())}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}

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;