From 3741dbc38a4c15ec7d0e51cc75862d820c7834c2 Mon Sep 17 00:00:00 2001
From: Kushal Dotel <kushal.dotel@study.lbef.edu.np>
Date: Mon, 13 Jan 2025 03:10:26 +0545
Subject: [PATCH 1/3] continue in my own

---
 .../admin/course/_partials/CourseTable.tsx    | 137 ++++++++++++++++++
 .../src/app/(admin)/admin/course/page.tsx     |  56 +++++++
 2 files changed, 193 insertions(+)
 create mode 100644 frontend/edu-connect/src/app/(admin)/admin/course/_partials/CourseTable.tsx
 create mode 100644 frontend/edu-connect/src/app/(admin)/admin/course/page.tsx

diff --git a/frontend/edu-connect/src/app/(admin)/admin/course/_partials/CourseTable.tsx b/frontend/edu-connect/src/app/(admin)/admin/course/_partials/CourseTable.tsx
new file mode 100644
index 0000000..6d5e990
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/frontend/edu-connect/src/app/(admin)/admin/course/page.tsx b/frontend/edu-connect/src/app/(admin)/admin/course/page.tsx
new file mode 100644
index 0000000..77c56fa
--- /dev/null
+++ b/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
+

From 5db8102fecb02288aa73cfd01bcf2ac4baeae7c6 Mon Sep 17 00:00:00 2001
From: I-am-Stone <dilipchaulagain86@gmail.com>
Date: Mon, 13 Jan 2025 04:40:20 +0545
Subject: [PATCH 2/3] admin category, course

---
 .../src/app/(admin)/admin/category/page.tsx   |  49 +++
 .../admin/course/_partials/CourseTable.tsx    | 287 ++++++++++--------
 .../src/app/(admin)/admin/course/page.tsx     |  74 ++---
 frontend/edu-connect/src/lib/routes.ts        |   4 +-
 4 files changed, 246 insertions(+), 168 deletions(-)
 create mode 100644 frontend/edu-connect/src/app/(admin)/admin/category/page.tsx

diff --git a/frontend/edu-connect/src/app/(admin)/admin/category/page.tsx b/frontend/edu-connect/src/app/(admin)/admin/category/page.tsx
new file mode 100644
index 0000000..7d2df1a
--- /dev/null
+++ b/frontend/edu-connect/src/app/(admin)/admin/category/page.tsx
@@ -0,0 +1,49 @@
+'use client'
+import BreadCrumbNav from "@/components/(dashboard)/common/BreadCumbNav/BreadCrumbNav"
+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 CategoryTable from "./_partials/CategoryTable"
+
+
+const CategoryIndexPage = () => {
+    const CategoryListURL = `${APP_BASE_URL}/api/courses/getCategories`
+    const { data, mutate, isLoading } = useSWR(CategoryListURL, defaultFetcher);
+
+    return(
+        <AppContextProvider>
+            <AdminView>
+                <CommonContainer>
+                    <PageHeading>Categories</PageHeading>
+                    <BreadCrumbNav breadCrumbItems={[
+                        {
+                            title: 'Dashboard',
+                            href: routes.DASHBOARD_ROUTE
+                        },
+                        {
+                            title: 'Categories',
+                            href: routes.CATEGORY_INDEX_PAGE
+                        },
+                    ]}/>
+                    <ContentContainer>
+                        <div>
+                            <CategoryTable
+                                mutate={mutate}
+                                isLoading={isLoading}
+                                Data={data || []}
+                            />
+                        </div>
+                    </ContentContainer>
+                </CommonContainer>
+            </AdminView>
+        </AppContextProvider>
+    )
+}
+
+export default CategoryIndexPage
\ No newline at end of file
diff --git a/frontend/edu-connect/src/app/(admin)/admin/course/_partials/CourseTable.tsx b/frontend/edu-connect/src/app/(admin)/admin/course/_partials/CourseTable.tsx
index 6d5e990..2f4e1eb 100644
--- a/frontend/edu-connect/src/app/(admin)/admin/course/_partials/CourseTable.tsx
+++ b/frontend/edu-connect/src/app/(admin)/admin/course/_partials/CourseTable.tsx
@@ -2,136 +2,171 @@ 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
+const CourseTable: React.FC<{
+    mutate: () => void
+    Data: Array<any>
+    isLoading: boolean
 }> = ({
-  mutate ,
-  Data ,
-  isLoading
-}) => {
+          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}
-      />
-    </>
-  )
+    const columns: ColumnDef<any>[] = [
+        {
+            accessorKey: "sn",
+            header: "SN",
+            cell: ({ row }) => (
+                <div className="capitalize">{row.index + 1}</div>
+            ),
+        },
+        {
+            id: 'name',
+            accessorFn: (row: any) => row.original?.name,
+            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?.coverImage ?? 'no image path'}
+                            alt={row.original?.name}
+                        />
+                    </Avatar>
+                    <p>{row.original?.name}</p>
+                </div>
+            ),
+        },
+        {
+            id: 'description',
+            accessorFn: (row: any) => row.original?.description,
+            header: ({ column }) => (
+                <Button
+                    variant="ghost"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                    className="!px-0"
+                >
+                    Description
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            ),
+            cell: ({ row }) => (
+                <div className="max-w-[300px] truncate">{row.original?.description ?? '-'}</div>
+            ),
+        },
+        {
+            id: 'author',
+            accessorFn: (row: any) => row.original?.author?.firstName,
+            header: ({ column }) => (
+                <Button
+                    variant="ghost"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                    className="!px-0"
+                >
+                    Author
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            ),
+            cell: ({ row }) => (
+                <div>{row.original?.author?.firstName} {row.original?.author?.lastName}</div>
+            ),
+        },
+        {
+            id: 'category',
+            accessorFn: (row: any) => row.original?.category?.name,
+            header: ({ column }) => (
+                <Button
+                    variant="ghost"
+                    className="!px-0"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Category
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            ),
+            cell: ({ row }) => (
+                <div className="capitalize">{row.original?.category?.name}</div>
+            ),
+        },
+        {
+            id: 'creationDate',
+            accessorFn: (row: any) => row.original?.creationDate,
+            header: ({ column }) => (
+                <Button
+                    variant="ghost"
+                    className="!px-0"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Published Date
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            ),
+            cell: ({ row }) => (
+                <div className="whitespace-nowrap">
+                    {row.original?.creationDate ? new Date(row.original.creationDate).toLocaleDateString() : '-'}
+                </div>
+            ),
+        },
+        {
+            id: 'isActive',
+            accessorFn: (row: any) => row.original?.isActive,
+            header: ({ column }) => (
+                <Button
+                    variant="ghost"
+                    className="!px-0"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Status
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            ),
+            cell: ({ row }) => (
+                <div>{row.original?.isActive ? <Badge variant={'success'}>Active</Badge> : <Badge variant={'destructive'}>Deactive</Badge>}</div>
+            ),
+        },
+        {
+            id: 'totalEnrolled',
+            accessorFn: (row: any) => row.original?.totalEnrolled,
+            header: ({ column }) => (
+                <Button
+                    variant="ghost"
+                    className="!px-0"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Students
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            ),
+            cell: ({ row }) => (
+                <div>
+                    {row.original?.totalEnrolled ?? '-'}
+                </div>
+            ),
+        },
+    ]
+
+    return(
+        <>
+            <DataTable
+                data={Data}
+                columns={columns}
+                mutate={mutate}
+                searchKey="name"
+                isLoading={isLoading}
+            />
+        </>
+    )
 }
 
-export default UserTable
\ No newline at end of file
+export default CourseTable
\ No newline at end of file
diff --git a/frontend/edu-connect/src/app/(admin)/admin/course/page.tsx b/frontend/edu-connect/src/app/(admin)/admin/course/page.tsx
index 77c56fa..3f840e6 100644
--- a/frontend/edu-connect/src/app/(admin)/admin/course/page.tsx
+++ b/frontend/edu-connect/src/app/(admin)/admin/course/page.tsx
@@ -1,7 +1,5 @@
 '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"
@@ -11,46 +9,40 @@ 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"
+import CourseTable from "./_partials/CourseTable"
 
-const UsersIndexPage = () => {
-  const UserListURL = `${APP_BASE_URL}/api/admin/stats/userDetail`
-  const { data : UsersList , mutate , isLoading} = useSWR(UserListURL , defaultFetcher);
+const CourseIndexPage = () => {
+    const CourseListURL = `${APP_BASE_URL}/api/course/listall`
+    const { data, mutate, isLoading } = useSWR(CourseListURL, 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>
-    </>
-  )
+    return (
+        <AppContextProvider>
+            <AdminView>
+                <CommonContainer>
+                    <PageHeading>Courses</PageHeading>
+                    <BreadCrumbNav breadCrumbItems={[
+                        {
+                            title: 'Dashboard',
+                            href: routes.DASHBOARD_ROUTE
+                        },
+                        {
+                            title: 'Courses',
+                            href: routes.COURSE_INDEX_PAGE
+                        },
+                    ]}/>
+                    <ContentContainer>
+                        <div>
+                            <CourseTable
+                                mutate={mutate}
+                                isLoading={isLoading}
+                                Data={data?.data || []}
+                            />
+                        </div>
+                    </ContentContainer>
+                </CommonContainer>
+            </AdminView>
+        </AppContextProvider>
+    )
 }
 
-export default UsersIndexPage
-
+export default CourseIndexPage
\ No newline at end of file
diff --git a/frontend/edu-connect/src/lib/routes.ts b/frontend/edu-connect/src/lib/routes.ts
index 011951d..d13a759 100644
--- a/frontend/edu-connect/src/lib/routes.ts
+++ b/frontend/edu-connect/src/lib/routes.ts
@@ -5,7 +5,9 @@ export const routes = {
   DASHBOARD_ROUTE : '/admin/dashboard',
   PROFILE_ROUTE : '/user/profile',
   MY_COURSES_INDEX : '/my-courses',
-  USER_INDEX_PAGE : '/admin/users'
+  USER_INDEX_PAGE : '/admin/users',
+  COURSE_INDEX_PAGE: '/admin/course',
+  CATEGORY_INDEX_PAGE: '/admin/category'
 }
 
 export const privateRoutes = ['/user/profile']

From e4877a54e3894b661300b10d865766f3fa414471 Mon Sep 17 00:00:00 2001
From: I-am-Stone <dilipchaulagain86@gmail.com>
Date: Mon, 13 Jan 2025 06:26:19 +0545
Subject: [PATCH 3/3] categorytable

---
 .../category/_partials/CategoryTable.tsx      | 113 ++++++++++++++++++
 1 file changed, 113 insertions(+)
 create mode 100644 frontend/edu-connect/src/app/(admin)/admin/category/_partials/CategoryTable.tsx

diff --git a/frontend/edu-connect/src/app/(admin)/admin/category/_partials/CategoryTable.tsx b/frontend/edu-connect/src/app/(admin)/admin/category/_partials/CategoryTable.tsx
new file mode 100644
index 0000000..6a25b7d
--- /dev/null
+++ b/frontend/edu-connect/src/app/(admin)/admin/category/_partials/CategoryTable.tsx
@@ -0,0 +1,113 @@
+import DataTable from "@/components/(dashboard)/common/DataTable/DataTable"
+import { Button } from "@/components/(dashboard)/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { routes } from "@/lib/routes"
+import { ColumnDef } from "@tanstack/react-table"
+import { ArrowUpDown } from "lucide-react"
+
+const CategoryTable: 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?.name,
+            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">
+                    <p>{row.original?.name}</p>
+                </div>
+            ),
+        },
+        {
+            id: 'description',
+            accessorFn: (row: any) => row.original?.description,
+            header: ({ column }) => (
+                <Button
+                    variant="ghost"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                    className="!px-0"
+                >
+                    Description
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            ),
+            cell: ({ row }) => (
+                <div className="max-w-[300px] truncate">{row.original?.description ?? '-'}</div>
+            ),
+        },
+        {
+            id: 'creationDate',
+            accessorFn: (row: any) => row.original?.creationDate,
+            header: ({ column }) => (
+                <Button
+                    variant="ghost"
+                    className="!px-0"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Created Date
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            ),
+            cell: ({ row }) => (
+                <div className="whitespace-nowrap">
+                    {row.original?.creationDate ? new Date(row.original.creationDate).toLocaleDateString() : '-'}
+                </div>
+            ),
+        },
+        {
+            id: 'isActive',
+            accessorFn: (row: any) => row.original?.isActive,
+            header: ({ column }) => (
+                <Button
+                    variant="ghost"
+                    className="!px-0"
+                    onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+                >
+                    Status
+                    <ArrowUpDown className="ml-2 h-4 w-4" />
+                </Button>
+            ),
+            cell: ({ row }) => (
+                <div>{row.original?.isActive ? <Badge variant={'success'}>Active</Badge> : <Badge variant={'destructive'}>Deactive</Badge>}</div>
+            ),
+        },
+    ]
+
+    return(
+        <>
+            <DataTable
+                data={Data}
+                columns={columns}
+                mutate={mutate}
+                searchKey="name"
+                isLoading={isLoading}
+            />
+        </>
+    )
+}
+
+export default CategoryTable
\ No newline at end of file