parent
716e5cffb4
commit
3741dbc38a
@ -0,0 +1,137 @@ |
||||
import DataTable from "@/components/(dashboard)/common/DataTable/DataTable" |
||||
import { Button } from "@/components/(dashboard)/ui/button" |
||||
import { Avatar, AvatarImage } from "@/components/ui/avatar" |
||||
import { Badge } from "@/components/ui/badge" |
||||
import { routes } from "@/lib/routes" |
||||
import { ColumnDef } from "@tanstack/react-table" |
||||
import { ArrowUpDown } from "lucide-react" |
||||
import Link from "next/link" |
||||
|
||||
const CourseTable :React.FC<{ |
||||
mutate : () => void |
||||
Data : Array<any> |
||||
isLoading : boolean |
||||
}> = ({ |
||||
mutate , |
||||
Data , |
||||
isLoading |
||||
}) => { |
||||
|
||||
const columns: ColumnDef<any>[] = [ |
||||
{ |
||||
accessorKey: "sn", |
||||
header: "SN", |
||||
cell: ({ row }) => ( |
||||
<div className="capitalize">{row.index + 1}</div> |
||||
), |
||||
}, |
||||
{ |
||||
id: 'name', |
||||
accessorFn: (row: any) => row.original?.data, |
||||
header: ({ column }) => ( |
||||
<Button |
||||
variant="ghost" |
||||
className="!px-0" |
||||
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")} |
||||
> |
||||
Name |
||||
<ArrowUpDown className="ml-2 h-4 w-4" /> |
||||
</Button> |
||||
), |
||||
cell: ({ row }) => ( |
||||
<div className="capitalize flex gap-2"> |
||||
<Avatar className="h-8 w-8"> |
||||
<AvatarImage |
||||
src={row.original?.profilePicture ?? 'no image path'} |
||||
alt={row.original?.firstName} |
||||
/> |
||||
</Avatar> |
||||
<p>{row?.original?.firstName}</p> |
||||
</div> |
||||
), |
||||
}, |
||||
{ |
||||
id: 'email', |
||||
accessorFn: (row: any) => row.original?.email, |
||||
header: ({ column }) => ( |
||||
<Button |
||||
variant="ghost" |
||||
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")} |
||||
className="!px-0" |
||||
> |
||||
Email |
||||
<ArrowUpDown className="ml-2 h-4 w-4" /> |
||||
</Button> |
||||
), |
||||
cell: ({ row }) => ( |
||||
<div>{row.original?.email}</div> |
||||
), |
||||
}, |
||||
{ |
||||
id: 'dateOfBirth', |
||||
accessorFn: (row: any) => row.original?.dateOfBirth, |
||||
header: ({ column }) => ( |
||||
<Button |
||||
variant="ghost" |
||||
className="!px-0" |
||||
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")} |
||||
> |
||||
DateOfBirth |
||||
<ArrowUpDown className="ml-2 h-4 w-4" /> |
||||
</Button> |
||||
), |
||||
cell: ({ row }) => ( |
||||
<div className="capitalize">{row.original?.dateOfBirth}</div> |
||||
), |
||||
}, |
||||
{ |
||||
id: 'isActivated', |
||||
accessorFn: (row: any) => row.original?.isActivated, |
||||
header: ({ column }) => ( |
||||
<Button |
||||
variant="ghost" |
||||
className="!px-0" |
||||
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")} |
||||
> |
||||
IsActive |
||||
<ArrowUpDown className="ml-2 h-4 w-4" /> |
||||
</Button> |
||||
), |
||||
cell: ({ row }) => ( |
||||
<div>{row.original?.isActivated ? <Badge variant={'success'}>Active</Badge> : <Badge variant={'destructive'}>Deactive</Badge>}</div> |
||||
), |
||||
}, |
||||
{ |
||||
id: 'last_online_at', |
||||
accessorFn: (row: any) => row.original?.lastOnline, |
||||
header: ({ column }) => ( |
||||
<Button |
||||
variant="ghost" |
||||
className="!px-0" |
||||
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")} |
||||
> |
||||
lastOnline |
||||
<ArrowUpDown className="ml-2 h-4 w-4" /> |
||||
</Button> |
||||
), |
||||
cell: ({ row }) => ( |
||||
<div> |
||||
{row.original?.lastOnline ?? '-'} |
||||
</div> |
||||
), |
||||
}, |
||||
] |
||||
return( |
||||
<> |
||||
<DataTable |
||||
data={Data} |
||||
columns={columns} |
||||
mutate={mutate} |
||||
searchKey="username" |
||||
isLoading={isLoading} |
||||
/> |
||||
</> |
||||
) |
||||
} |
||||
|
||||
export default UserTable |
@ -0,0 +1,56 @@ |
||||
'use client' |
||||
import UserTabContent from "@/app/user/profile/_partials/UserTabContent" |
||||
import BreadCrumbNav from "@/components/(dashboard)/common/BreadCumbNav/BreadCrumbNav" |
||||
import DataTable from "@/components/(dashboard)/common/DataTable/DataTable" |
||||
import ContentContainer from "@/components/(dashboard)/elements/ContentContainer" |
||||
import { PageHeading } from "@/components/(dashboard)/ui/title" |
||||
import CommonContainer from "@/components/elements/CommonContainer" |
||||
import AppContextProvider from "@/helpers/context/AppContextProvider" |
||||
import { defaultFetcher } from "@/helpers/fetch.helper" |
||||
import { routes } from "@/lib/routes" |
||||
import { APP_BASE_URL } from "@/utils/constants" |
||||
import AdminView from "@/views/AdminView" |
||||
import useSWR from "swr" |
||||
import UserTable from "./_partials/UserTable" |
||||
|
||||
const UsersIndexPage = () => { |
||||
const UserListURL = `${APP_BASE_URL}/api/admin/stats/userDetail` |
||||
const { data : UsersList , mutate , isLoading} = useSWR(UserListURL , defaultFetcher); |
||||
|
||||
|
||||
console.log(UsersList) |
||||
|
||||
return( |
||||
<> |
||||
<AppContextProvider> |
||||
<AdminView> |
||||
<CommonContainer> |
||||
<PageHeading>Users</PageHeading> |
||||
<BreadCrumbNav breadCrumbItems={[ |
||||
{ |
||||
title : 'Dashboard', |
||||
href : routes.DASHBOARD_ROUTE |
||||
}, |
||||
{ |
||||
title : 'Course', |
||||
href : routes.COURSE_INDEX_PAGE |
||||
}, |
||||
]}/> |
||||
<ContentContainer> |
||||
<div> |
||||
<UserTable |
||||
userData={CourseList?.course} |
||||
mutate={mutate} |
||||
isLoading={isLoading} |
||||
/> |
||||
</div> |
||||
</ContentContainer> |
||||
</CommonContainer> |
||||
</AdminView> |
||||
</AppContextProvider> |
||||
</> |
||||
) |
||||
} |
||||
|
||||
export default UsersIndexPage |
||||
|
Loading…
Reference in new issue