feat: ManageAccount and ManageMembers

src/pages/account/manage/account/ManageAccount.tsx

@@ -1,5 +1,5 @@
 import { apiConfig } from '@/config/api.config';
-import { Account, columns } from './account/Columns';
+import { Account, columns } from './Columns';
 import { DataTable } from '@/components/ui/DataTable';
 import axios from 'axios';
 import { useEffect, useState } from 'react';

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

@@ -0,0 +1,119 @@
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu';
+import { ColumnDef } from '@tanstack/react-table';
+import { ArrowUpDown, MoreHorizontal } from 'lucide-react';
+
+export type Members = {
+  id: number;
+  username: number;
+  name: string;
+  group: string;
+  email: string;
+  createdDate: Date;
+};
+
+export const columns: ColumnDef<Members>[] = [
+  {
+    accessorKey: 'id',
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          ID
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    }
+  },
+  {
+    accessorKey: 'username',
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          Username
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    }
+  },
+  {
+    accessorKey: 'name',
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          Name
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    }
+  },
+  {
+    accessorKey: 'email',
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          Email
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    }
+  },
+  {
+    accessorKey: 'createdDate',
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+        >
+          Created Date
+          <ArrowUpDown className="ml-2 h-4 w-4" />
+        </Button>
+      );
+    },
+    cell: ({ row }) => new Date(row.original.createdDate).toLocaleDateString()
+  },
+  {
+    id: 'actions',
+    cell: ({ row }) => {
+      const dataMembers = 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(dataMembers.id.toString())}
+            >
+              Copy account ID
+            </DropdownMenuItem>
+            {/* <DropdownMenuSeparator /> */}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      );
+    }
+  }
+];

src/pages/account/manage/members/ManageMembers.tsx

@@ -0,0 +1,42 @@
+import { DataTable } from '@/components/ui/DataTable';
+import { columns, Members } from './Columns';
+
+const dataMembers: Members[] = [
+  {
+    id: 37026,
+    username: 67076807158,
+    name: 'Jumentino Carlos Luis da Costa',
+    group: 'REGULER',
+    email: 'Jumentinocldacoata@gmail.com',
+    createdDate: new Date('2025-02-21')
+  },
+  {
+    id: 37027,
+    username: 67071827345,
+    name: 'Diego Costa',
+    group: 'REGULER',
+    email: 'DiegoCosta@gmail.com',
+    createdDate: new Date('2025-02-21')
+  },
+  {
+    id: 37028,
+    username: 56123764212,
+    name: 'Luis Da Vista',
+    group: 'SUPERVISOR',
+    email: 'LuisdaVista@gmail.com',
+    createdDate: new Date('2024-01-21')
+  }
+];
+
+const ManageMembers = () => {
+  return (
+    <div>
+      <div className="container mx-auto p-5">
+        <h1 className="text-xl font-medium leading-none text-gray-900">Manage Members</h1>
+        <DataTable data={dataMembers} columns={columns} />
+      </div>
+    </div>
+  );
+};
+
+export default ManageMembers;

src/routing/AppRoutingSetup.tsx

@@ -11,8 +11,9 @@ import ManageUserPage from '@/pages/settings/user/manage-user/ManageUserPage';
 
 import LogActivityPage from '@/pages/settings/user/log-activity/LogActivityPage';
 import ManagePositionPage from '@/pages/settings/user/manage-position/ManagePositionPage';
-import ManageAccount from '@/pages/account/manage/ManageAccount';
+import ManageAccount from '@/pages/account/manage/account/ManageAccount';
 import ManageGroups from '@/pages/groups/ManageGroups';
+import ManageMembers from '@/pages/account/manage/members/ManageMembers';
 
 const AppRoutingSetup = (): ReactElement => {
   return (
@@ -22,6 +23,8 @@ const AppRoutingSetup = (): ReactElement => {
           <Route path="/" element={<DashboardHomePage />} />
           <Route path="/groups/group-management" element={<ManageGroups />} />
 
+          <Route path="/members/member-management" element={<ManageMembers />} />
+
           <Route path="/account/home/user-profile" element={<AccountUserProfilePage />} />
 
           <Route path="/settings/user-management/manage-user" element={<ManageUserPage />} />