diff --git a/src/pages/account/manage/ManageAccount.tsx b/src/pages/account/manage/account/ManageAccount.tsx similarity index 97% rename from src/pages/account/manage/ManageAccount.tsx rename to src/pages/account/manage/account/ManageAccount.tsx index 402e5ca..b2a5f31 100644 --- a/src/pages/account/manage/ManageAccount.tsx +++ b/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'; diff --git a/src/pages/account/manage/members/Columns.tsx b/src/pages/account/manage/members/Columns.tsx new file mode 100644 index 0000000..c217e7f --- /dev/null +++ b/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[] = [ + { + accessorKey: 'id', + header: ({ column }) => { + return ( + + ); + } + }, + { + accessorKey: 'username', + header: ({ column }) => { + return ( + + ); + } + }, + { + accessorKey: 'name', + header: ({ column }) => { + return ( + + ); + } + }, + { + accessorKey: 'email', + header: ({ column }) => { + return ( + + ); + } + }, + { + accessorKey: 'createdDate', + header: ({ column }) => { + return ( + + ); + }, + cell: ({ row }) => new Date(row.original.createdDate).toLocaleDateString() + }, + { + id: 'actions', + cell: ({ row }) => { + const dataMembers = row.original; + + return ( + + + + + + Actions + navigator.clipboard.writeText(dataMembers.id.toString())} + > + Copy account ID + + {/* */} + + + ); + } + } +]; diff --git a/src/pages/account/manage/members/ManageMembers.tsx b/src/pages/account/manage/members/ManageMembers.tsx new file mode 100644 index 0000000..3a099a3 --- /dev/null +++ b/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 ( +
+
+

Manage Members

+ +
+
+ ); +}; + +export default ManageMembers; diff --git a/src/routing/AppRoutingSetup.tsx b/src/routing/AppRoutingSetup.tsx index 0ff7067..021c776 100644 --- a/src/routing/AppRoutingSetup.tsx +++ b/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 => { } /> } /> + } /> + } /> } />