continue in my own

frontend/edu-connect/src/app/(admin)/admin/course/_partials/CourseTable.tsx

@@ -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

frontend/edu-connect/src/app/(admin)/admin/course/page.tsx

@@ -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
+