commit
db1c835920
@ -0,0 +1,9 @@ |
||||
const CategoryTable = () => { |
||||
return( |
||||
<> |
||||
|
||||
</> |
||||
) |
||||
} |
||||
|
||||
export default Categ |
||||
@ -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 |
||||
@ -0,0 +1,172 @@ |
||||
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 { ColumnDef } from "@tanstack/react-table" |
||||
import { ArrowUpDown } from "lucide-react" |
||||
|
||||
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?.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 CourseTable |
||||
@ -0,0 +1,48 @@ |
||||
'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 CourseTable from "./_partials/CourseTable" |
||||
|
||||
const CourseIndexPage = () => { |
||||
const CourseListURL = `${APP_BASE_URL}/api/course/listall` |
||||
const { data, mutate, isLoading } = useSWR(CourseListURL, defaultFetcher); |
||||
|
||||
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 CourseIndexPage |
||||
Loading…
Reference in new issue