learning

2025-11-01 11:55:02 +03:30
parent edadb01702
commit 5acfad3e2e
12 changed files with 947 additions and 2 deletions
@@ -0,0 +1,156 @@
+import { CloseCircle, DocumentUpload, Gallery } from 'iconsax-react'
+import { type FC, useCallback, useEffect, useState } from 'react'
+import { useDropzone } from 'react-dropzone';
+import { clx } from '../helpers/utils';
+
+type Props = {
+    label: string;
+    onChange: (file: File[]) => void;
+    isMultiple?: boolean;
+    isFile?: boolean,
+    preview?: string[],
+    onChangePreview?: (preview: string[]) => void,
+    getCover?: (url: string) => void,
+    coverUrl?: string,
+    accept?: string
+}
+
+const UploadBoxDraggble: FC<Props> = (props: Props) => {
+
+    const [files, setFiles] = useState<File[]>([])
+    const [perviews, setPerviews] = useState<string[]>(props.preview ? props.preview : [])
+    const [isFill, setIsFill] = useState<boolean>(false)
+    const [cover, setCover] = useState<string>(props.coverUrl ? props.coverUrl : '')
+
+    const onDrop = useCallback((acceptedFiles: File[]) => {
+        if (props.isMultiple) {
+            const array = [...files]
+            array.push(acceptedFiles[0])
+            setFiles(array)
+            props.onChange(array)
+        } else {
+            setFiles([acceptedFiles[0]])
+            props.onChange([acceptedFiles[0]])
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [files])
+    const { getRootProps, getInputProps } = useDropzone({
+        onDrop,
+        accept: props.accept ? { [props.accept]: [] } : undefined
+    })
+
+    const handleDelete = (index: number) => {
+        const array = [...files]
+        array.splice(index, 1)
+        setFiles(array)
+        props.onChange(array)
+    }
+
+    const handleDeletePreview = (index: number) => {
+        const array = [...perviews];
+        array.splice(index, 1);
+        setPerviews(array);
+        if (props.onChangePreview) {
+            props.onChangePreview(array);
+        }
+    }
+
+    useEffect(() => {
+
+        if (props.preview && props.preview.length > 0 && !isFill) {
+            setPerviews(props.preview)
+            console.log('preview', props.preview);
+
+            setIsFill(true)
+        }
+
+    }, [props.preview, isFill])
+
+    useEffect(() => {
+        setCover(props.coverUrl ? props.coverUrl : '')
+    }, [props.coverUrl])
+
+
+    return (
+        <div>
+            <div {...getRootProps()} className='w-full py-8 border border-dashed border-description flex flex-col justify-center items-center gap-4 rounded-2xl'>
+                <input {...getInputProps()} />
+                <Gallery
+                    className='size-8'
+                    color='#8C90A3'
+                />
+                <div className='text-description text-xs'>
+                    {props.label}
+                </div>
+
+                <div className='flex items-center gap-2'>
+                    <DocumentUpload
+                        className='size-4'
+                        color='black'
+                    />
+                    <div className='text-xs'>آپلود</div>
+                </div>
+            </div>
+
+            {
+                files.length > 0 || perviews ? (
+                    <div className='mt-4 flex gap-4 items-center'>
+                        {
+                            perviews && perviews.map((item, index) => {
+                                return (
+                                    <div key={index} className='flex items-center gap-2'>
+                                        <div key={index} className='flex relative items-center gap-2'>
+                                            <img onClick={() => {
+                                                if (props.getCover) {
+                                                    setCover(item)
+                                                    props.getCover(item)
+                                                }
+                                            }} src={item}
+                                                className={clx(
+                                                    'size-10 rounded-full object-cover',
+                                                    cover === item ? 'border-2 border-red-400' : ''
+                                                )} />
+                                            <div onClick={() => handleDeletePreview(index)} className='absolute -left-2 -top-2 shadow-md bg-white size-5 rounded-full flex justify-center items-center'>
+                                                <CloseCircle className='size-4 ' color='red' />
+                                            </div>
+                                        </div>
+                                    </div>
+                                )
+                            })
+                        }
+                        {
+                            files.map((file, index) => {
+                                if (props.isFile) {
+                                    return (
+                                        <div key={index} className='flex border p-2 rounded-lg items-center gap-2'>
+                                            <div className='flex relative items-center gap-2'>
+                                                <div className='text-xs'>{file.name}</div>
+                                                <div className='absolute -left-4 -top-4 shadow-md bg-white size-5 rounded-full flex justify-center items-center'>
+                                                    <CloseCircle onClick={() => handleDelete(index)} className='size-4 ' color='red' />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    )
+                                }
+                                else
+                                    return (
+                                        <div key={index} className='flex items-center gap-2'>
+                                            <div key={index} className='flex relative items-center gap-2'>
+                                                <img src={URL.createObjectURL(file)} alt={file.name} className='size-10 rounded-full object-cover' />
+                                                <div className='absolute -left-2 -top-2 shadow-md bg-white size-5 rounded-full flex justify-center items-center'>
+                                                    <CloseCircle onClick={() => handleDelete(index)} className='size-4 ' color='red' />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    )
+                            })
+                        }
+                    </div>
+                ) : null
+            }
+
+        </div>
+    )
+}
+
+export default UploadBoxDraggble
@@ -27,7 +27,6 @@ export const Paths = {
    tickets: {
        list: '/tickets',
    },
-    learning: '/learning',
    auth: {
        login: '/auth/login',
    },
@@ -46,4 +45,10 @@ export const Paths = {
        list: "/criticisms",
        detail: "/criticisms/detail/",
    },
+    learning: {
+        list: "/learning/list",
+        detail: "/learning/detail/",
+        create: "/learning/create",
+        category: "/learning/category",
+    },
 }
@@ -0,0 +1,75 @@
+import { type FC, useState } from 'react'
+// import { useTranslation } from 'react-i18next'
+import Td from '../../components/Td'
+import DefaultTableSkeleton from '../../components/DefaultTableSkeleton'
+import Pagination from '../../components/Pagination'
+import { useGetCategory } from './hooks/useLearningData'
+import { type CategoryLearningType } from './hooks/useLearningData'
+import CreateCategory from './components/CreateCategory'
+
+
+const LearningCategory: FC = () => {
+
+    // const { t } = useTranslation('global')
+    const t = (key: string) => key; // Mock translation function
+    const [page, setPage] = useState<number>(1)
+    const getCategory = useGetCategory()
+
+    return (
+        <div className='mt-4'>
+            <div>
+                دسته‌بندی آموزش‌ها
+            </div>
+
+            <div className='flex gap-6 mt-8'>
+                <div className='flex-1'>
+
+                    <div className='flex-1 bg-white py-2 xl:px-10 px-5 rounded-3xl'>
+                        {
+                            getCategory.isPending ?
+                                <div className='mt-4'>
+                                    <DefaultTableSkeleton tdCount={2} />
+                                </div>
+                                :
+                                <div className='relative overflow-x-auto rounded-3xl w-full'>
+                                    <table className='w-full text-sm '>
+                                        <thead className='thead'>
+                                            <tr>
+                                                <Td text='عنوان' />
+                                                <Td text={''} />
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            {
+                                                getCategory.data?.data?.categories?.map((item: CategoryLearningType) => {
+                                                    return (
+                                                        <tr key={item.id} className='tr'>
+                                                            <Td text={item.name} />
+                                                            <Td text={''} />
+                                                        </tr>
+                                                    )
+                                                })
+                                            }
+                                        </tbody>
+                                    </table>
+                                    <div className='flex justify-end pb-3'>
+                                        <Pagination
+                                            currentPage={page}
+                                            totalPages={getCategory.data?.data?.pager?.totalPages}
+                                            onPageChange={setPage}
+                                        />
+                                    </div>
+                                </div>
+                        }
+
+
+                    </div>
+                </div>
+
+                <CreateCategory />
+            </div>
+        </div>
+    )
+}
+
+export default LearningCategory
@@ -0,0 +1,193 @@
+import { type FC, useState } from 'react'
+// import { useTranslation } from 'react-i18next'
+import Button from '../../components/Button'
+import { useFormik } from 'formik'
+import { type CategoryLearningType, type CreateLearningType } from './hooks/useLearningData'
+import * as Yup from 'yup'
+import { useCreateLearning, useGetCategory } from './hooks/useLearningData'
+// import { useSingleUpload } from '../service/hooks/useServiceData'
+import { TickCircle } from 'iconsax-react'
+import Input from '../../components/Input'
+import Select from '../../components/Select'
+import Textarea from '../../components/Textarea'
+import DefaultTableSkeleton from '../../components/DefaultTableSkeleton'
+import CreateLearningSidebar from './components/CreateLearningSidebar'
+// import { ErrorType } from '../../helpers/types'
+// Define ErrorType inline since we're using static data
+type ErrorType = {
+    response?: {
+        data?: {
+            error: {
+                message: string[];
+            };
+        };
+    };
+};
+import { toast } from 'react-toastify'
+import { useNavigate } from 'react-router-dom'
+import { Paths } from '../../config/Paths'
+
+const CreateLearning: FC = () => {
+
+    const navigate = useNavigate()
+    // const { t } = useTranslation('global')
+    const t = (key: string) => key; // Mock translation function
+    // const singleUpload = useSingleUpload()
+
+    // Mock upload hook
+    const singleUpload = {
+        mutateAsync: (formData: FormData) => {
+            return Promise.resolve({
+                data: {
+                    url: "/src/assets/images/new_order.png" // Mock URL
+                }
+            });
+        },
+        isPending: false
+    };
+
+    const createLearning = useCreateLearning()
+    const getCategory = useGetCategory()
+    const [videoFile, setVideoFile] = useState<File>()
+    const [coverFile, setCoverFile] = useState<File>()
+
+    const formik = useFormik<CreateLearningType>({
+        initialValues: {
+            title: '',
+            description: '',
+            coverUrl: '',
+            videoUrl: '',
+            videoDuration: '',
+            categoryId: ''
+        },
+        validationSchema: Yup.object().shape({
+            title: Yup.string().required(t('errors.required')),
+            description: Yup.string().required(t('errors.required')),
+            videoDuration: Yup.string().required(t('errors.required')),
+            categoryId: Yup.string().required(t('errors.required'))
+        }),
+        onSubmit: async (values) => {
+            return /*
+            if (videoFile && coverFile) {
+
+                const formData = new FormData()
+                formData.append('file', videoFile)
+                await singleUpload.mutateAsync(formData, {
+                    onSuccess: (data) => {
+                        values.videoUrl = data?.data?.url
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(error.response?.data?.error?.message[0])
+                    }
+                })
+
+                const formDataCover = new FormData()
+                formDataCover.append('file', coverFile)
+                await singleUpload.mutateAsync(formDataCover, {
+                    onSuccess: (data) => {
+                        values.coverUrl = data?.data?.url
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(error.response?.data?.error?.message[0])
+                    }
+                })
+
+                createLearning.mutate(values, {
+                    onSuccess: () => {
+                        toast.success('با موفقیت ثبت شد')
+                        navigate(Paths.learning.list)
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(error.response?.data?.error?.message[0])
+                    }
+                })
+            } else {
+                toast.error('لطفا ویدیو و کاور را انتخاب کنید')
+            }
+                */
+        }
+    })
+
+    return (
+        <div className='w-full mt-4'>
+            <div className='flex w-full justify-between items-center'>
+                <div>
+                    آموزش جدید
+                </div>
+                <div>
+                    <Button
+                        className='px-5'
+                        onClick={() => formik.handleSubmit()}
+                        isLoading={createLearning.isPending || singleUpload.isPending}
+                    >
+                        <div className='flex gap-2'>
+                            <TickCircle
+                                className='size-5'
+                                color='black'
+                            />
+                            <div>ثبت آموزش</div>
+                        </div>
+                    </Button>
+                </div>
+            </div>
+
+            {
+                getCategory.isPending ?
+                    <DefaultTableSkeleton tdCount={2} />
+                    :
+                    <div className='flex gap-6'>
+                        <div className='flex-1'>
+                            <div className='flex-1 mt-10 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
+
+                                <Input
+                                    label='عنوان'
+                                    name='title'
+                                    onChange={formik.handleChange}
+                                    error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
+                                />
+
+                                <div className='rowTwoInput mt-5'>
+                                    <Select
+                                        items={getCategory.data?.data?.categories?.map((item: CategoryLearningType) => ({ label: item.name, value: item.id.toString() }))}
+                                        label='دسته‌بندی'
+                                        placeholder='انتخاب کنید'
+                                        name='categoryId'
+                                        onChange={formik.handleChange}
+                                        error_text={formik.touched.categoryId && formik.errors.categoryId ? formik.errors.categoryId : ''}
+                                    />
+
+                                    <Input
+                                        name='videoDuration'
+                                        label='مدت زمان ویدیو'
+                                        onChange={formik.handleChange}
+                                        error_text={formik.touched.videoDuration && formik.errors.videoDuration ? formik.errors.videoDuration : ''}
+                                    />
+                                </div>
+
+                                <div className='mt-5'>
+                                    <div>توضیحات</div>
+                                    <div>
+                                        <Textarea
+                                            name='description'
+                                            placeholder='توضیحات'
+                                            onChange={formik.handleChange}
+                                            error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
+
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <CreateLearningSidebar
+                            onChangeCoverFile={setCoverFile}
+                            onChangeVideoFile={setVideoFile}
+                        />
+                    </div>
+            }
+
+        </div>
+    )
+}
+
+export default CreateLearning
@@ -0,0 +1,89 @@
+import { type FC, useState } from 'react'
+// import { useTranslation } from 'react-i18next'
+import { Link } from 'react-router-dom'
+import { Paths } from '../../config/Paths'
+import Button from '../../components/Button'
+import { Add } from 'iconsax-react'
+import { useGetLearning } from './hooks/useLearningData'
+import { type LearningItemType } from './hooks/useLearningData'
+import Table from '../../components/Table'
+import { type ColumnType } from '../../components/types/TableTypes'
+const LearningList: FC = () => {
+
+    // const { t } = useTranslation('global')
+    // const t = (key: string) => key; // Mock translation function - not needed anymore
+    const [page, setPage] = useState<number>(1)
+    const getLearning = useGetLearning(page)
+
+    // تعریف ستون‌های جدول
+    const columns: ColumnType<LearningItemType>[] = [
+        {
+            title: '',
+            key: 'coverUrl',
+            width: '100px',
+            render: (item: LearningItemType) => (
+                <img src={item.coverUrl} className='w-20 h-12 object-cover rounded' alt={item.title} />
+            )
+        },
+        {
+            title: 'عنوان',
+            key: 'title',
+            render: (item: LearningItemType) => (
+                <span className='font-medium'>{item.title}</span>
+            )
+        },
+        {
+            title: 'دسته‌بندی',
+            key: 'category',
+            render: (item: LearningItemType) => (
+                <span>{item.category?.name}</span>
+            )
+        },
+        {
+            title: 'مدت زمان ویدیو',
+            key: 'videoDuration',
+            render: (item: LearningItemType) => (
+                <span className='text-gray-600'>{item.videoDuration}</span>
+            )
+        }
+    ]
+
+    return (
+        <div className='mt-4'>
+            <div className='flex w-full justify-between items-center'>
+                <div>
+                    لیست آموزش‌ها
+                </div>
+                <div>
+                    <Link to={Paths.learning.create}>
+                        <Button
+                            className='px-5'
+                        >
+                            <div className='flex gap-2'>
+                                <Add
+                                    className='size-5'
+                                    color='black'
+                                />
+                                <div>ثبت آموزش</div>
+                            </div>
+                        </Button>
+                    </Link>
+                </div>
+            </div>
+
+            <Table<LearningItemType>
+                columns={columns}
+                data={getLearning.data?.data?.learnings}
+                isLoading={getLearning.isPending}
+                pagination={{
+                    currentPage: page,
+                    totalPages: getLearning.data?.data?.pager?.totalPages || 1,
+                    onPageChange: setPage
+                }}
+                noDataMessage="هیچ آموزشی یافت نشد"
+            />
+        </div>
+    )
+}
+
+export default LearningList
@@ -0,0 +1,92 @@
+import { type FC } from 'react'
+// import { useTranslation } from 'react-i18next'
+import Input from '../../../components/Input'
+import Button from '../../../components/Button'
+import { TickCircle } from 'iconsax-react'
+import * as Yup from 'yup'
+import { useFormik } from 'formik'
+import { toast } from 'react-toastify'
+// import { ErrorType } from '../../../helpers/types'
+// Define ErrorType inline since we're using static data
+type ErrorType = {
+    response?: {
+        data?: {
+            error: {
+                message: string[];
+            };
+        };
+    };
+};
+import { type CreateCategoryLearningType } from '../hooks/useLearningData'
+import { useCreateCategory, useGetCategory } from '../hooks/useLearningData'
+
+const CreateCategory: FC = () => {
+
+    // const { t } = useTranslation('global')
+    const t = (key: string) => key; // Mock translation function
+    const createCategory = useCreateCategory()
+    const getCategory = useGetCategory()
+
+    const formik = useFormik<CreateCategoryLearningType>({
+        initialValues: {
+            name: ''
+        },
+        validationSchema: Yup.object({
+            name: Yup.string().required(t('errors.required')),
+        }),
+        onSubmit: (values) => {
+
+            createCategory.mutate(values, {
+                onSuccess: () => {
+                    formik.resetForm()
+                    getCategory.refetch()
+                    toast.success('با موفقیت ثبت شد')
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(error?.response?.data?.error?.message[0])
+                }
+            })
+        }
+    })
+
+    return (
+        <div className='bg-white p-8 w-sidebar hidden xl:block rounded-3xl overflow-hidden relative'>
+            <div>
+                افزودن دسته‌بندی
+            </div>
+
+
+            <div className='mt-8'>
+                <Input
+                    label='عنوان دسته‌بندی'
+                    value={formik.values.name}
+                    name='name'
+                    onChange={formik.handleChange}
+                    error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
+                />
+            </div>
+
+
+
+
+
+            <div className='flex flex-1 justify-end items-end mt-8'>
+                <Button
+                    className='w-fit px-5'
+                    onClick={() => formik.handleSubmit()}
+                    isLoading={createCategory.isPending}
+                >
+                    <div className='flex items-center gap-2'>
+                        <TickCircle
+                            className='size-5'
+                            color='white'
+                        />
+                        <div>ذخیره</div>
+                    </div>
+                </Button>
+            </div>
+        </div>
+    )
+}
+
+export default CreateCategory
@@ -0,0 +1,40 @@
+import { type FC } from 'react'
+// import { useTranslation } from 'react-i18next'
+import UploadBox from '../../../components/UploadBox'
+
+type Props = {
+    onChangeVideoFile: (file: File) => void,
+    onChangeCoverFile: (file: File) => void
+}
+
+const CreateLearningSidebar: FC<Props> = (props: Props) => {
+
+    // const { t } = useTranslation('global')
+    const t = (key: string) => key; // Mock translation function
+
+    return (
+        <div className='bg-white mt-10 w-sidebar text-xs hidden 2xl:block h-fit px-5 py-7 rounded-3xl'>
+
+            <div className='mt-8'>
+                <div>کاور آموزش</div>
+                <div className='mt-2'>
+                    <UploadBox
+                        label='آپلود کاور'
+                        onChange={(file: File[]) => props.onChangeCoverFile(file[0])}
+                    />
+                </div>
+            </div>
+            <div className='mt-8'>
+                <div>ویدیو</div>
+                <div className='mt-2'>
+                    <UploadBox
+                        label='آپلود ویدیو'
+                        onChange={(file: File[]) => props.onChangeVideoFile(file[0])}
+                    />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default CreateLearningSidebar
@@ -0,0 +1,229 @@
+// import { useMutation, useQuery } from "@tanstack/react-query";
+// import * as api from "../service/LearningService";
+
+// Define types inline to avoid import issues
+export type CreateCategoryLearningType = {
+  name: string;
+};
+
+export type CreateLearningType = {
+  title: string;
+  description: string;
+  coverUrl: string;
+  videoUrl: string;
+  videoDuration: string;
+  categoryId: string;
+};
+
+export type CategoryLearningType = {
+  id: number;
+  name: string;
+};
+
+export type LearningItemType = {
+  id: string;
+  title: string;
+  description: string;
+  coverUrl: string;
+  videoUrl: string;
+  videoDuration: string;
+  category: {
+    id: string;
+    createdAt: string;
+    updatedAt: string;
+    name: string;
+  };
+  createdAt: string;
+  updatedAt: string;
+};
+
+// Static data for categories
+const staticCategories: CategoryLearningType[] = [
+  { id: 1, name: "برنامه‌نویسی" },
+  { id: 2, name: "طراحی UI/UX" },
+  { id: 3, name: "مدیریت پروژه" },
+  { id: 4, name: "بازاریابی دیجیتال" },
+  { id: 5, name: "هوش مصنوعی" },
+];
+
+// Static data for learnings
+const staticLearnings: LearningItemType[] = [
+  {
+    id: "1",
+    title: "آموزش React برای مبتدیان",
+    description: "یادگیری مبانی React و ساخت اولین اپلیکیشن",
+    coverUrl: "/src/assets/images/new_order.png",
+    videoUrl: "",
+    videoDuration: "45:30",
+    category: {
+      id: "1",
+      name: "برنامه‌نویسی",
+      createdAt: "2024-01-01",
+      updatedAt: "2024-01-01",
+    },
+    createdAt: "2024-01-01",
+    updatedAt: "2024-01-01",
+  },
+  {
+    id: "2",
+    title: "طراحی رابط کاربری مدرن",
+    description: "اصول طراحی UI و ساخت رابط‌های کاربری زیبا",
+    coverUrl: "/src/assets/images/support1.png",
+    videoUrl: "",
+    videoDuration: "32:15",
+    category: {
+      id: "2",
+      name: "طراحی UI/UX",
+      createdAt: "2024-01-02",
+      updatedAt: "2024-01-02",
+    },
+    createdAt: "2024-01-02",
+    updatedAt: "2024-01-02",
+  },
+  {
+    id: "3",
+    title: "مدیریت پروژه با Agile",
+    description: "روش‌های مدیریت پروژه چابک و اسکرام",
+    coverUrl: "/src/assets/images/new_order.png",
+    videoUrl: "",
+    videoDuration: "28:45",
+    category: {
+      id: "3",
+      name: "مدیریت پروژه",
+      createdAt: "2024-01-03",
+      updatedAt: "2024-01-03",
+    },
+    createdAt: "2024-01-03",
+    updatedAt: "2024-01-03",
+  },
+  {
+    id: "4",
+    title: "بازاریابی در شبکه‌های اجتماعی",
+    description: "استراتژی‌های موثر بازاریابی دیجیتال",
+    coverUrl: "/src/assets/images/support1.png",
+    videoUrl: "",
+    videoDuration: "41:20",
+    category: {
+      id: "4",
+      name: "بازاریابی دیجیتال",
+      createdAt: "2024-01-04",
+      updatedAt: "2024-01-04",
+    },
+    createdAt: "2024-01-04",
+    updatedAt: "2024-01-04",
+  },
+  {
+    id: "5",
+    title: "مقدمه‌ای بر یادگیری ماشین",
+    description: "مبانی هوش مصنوعی و یادگیری ماشین",
+    coverUrl: "/src/assets/images/new_order.png",
+    videoUrl: "",
+    videoDuration: "55:10",
+    category: {
+      id: "5",
+      name: "هوش مصنوعی",
+      createdAt: "2024-01-05",
+      updatedAt: "2024-01-05",
+    },
+    createdAt: "2024-01-05",
+    updatedAt: "2024-01-05",
+  },
+];
+
+export const useGetCategory = () => {
+  // Commented out API call
+  // return useQuery({
+  //   queryKey: ["learning-category"],
+  //   queryFn: api.getCategory,
+  // });
+
+  // Return static data with same structure as API response
+  return {
+    data: {
+      data: {
+        categories: staticCategories,
+        pager: {
+          totalPages: 1,
+          currentPage: 1,
+          totalItems: staticCategories.length,
+        },
+      },
+    },
+    isPending: false,
+    isLoading: false,
+    refetch: () => Promise.resolve(),
+  };
+};
+
+export const useCreateCategory = () => {
+  // Commented out API call
+  // return useMutation({
+  //   mutationFn: (variables: CreateCategoryLearningType) =>
+  //     api.createCategory(variables),
+  // });
+
+  // Return mock mutation
+  return {
+    mutate: (variables: CreateCategoryLearningType, options?: any) => {
+      // Simulate success
+      setTimeout(() => {
+        if (options?.onSuccess) {
+          options.onSuccess();
+        }
+      }, 500);
+    },
+    isPending: false,
+    isLoading: false,
+  };
+};
+
+export const useCreateLearning = () => {
+  // Commented out API call
+  // return useMutation({
+  //   mutationFn: (variables: CreateLearningType) =>
+  //     api.CreateLearning(variables),
+  // });
+
+  // Return mock mutation
+  return {
+    mutate: (variables: CreateLearningType, options?: any) => {
+      // Simulate success
+      setTimeout(() => {
+        if (options?.onSuccess) {
+          options.onSuccess();
+        }
+      }, 500);
+    },
+    isPending: false,
+    isLoading: false,
+  };
+};
+
+export const useGetLearning = (page: number) => {
+  // Commented out API call
+  // return useQuery({
+  //   queryKey: ["learnings", page],
+  //   queryFn: () => api.getLearnings(page),
+  // });
+
+  // Return static data with pagination
+  const itemsPerPage = 10;
+  const startIndex = (page - 1) * itemsPerPage;
+  const endIndex = startIndex + itemsPerPage;
+  const paginatedLearnings = staticLearnings.slice(startIndex, endIndex);
+
+  return {
+    data: {
+      data: {
+        learnings: paginatedLearnings,
+        pager: {
+          totalPages: Math.ceil(staticLearnings.length / itemsPerPage),
+          currentPage: page,
+          totalItems: staticLearnings.length,
+        },
+      },
+    },
+    isPending: false,
+    isLoading: false,
+  };
+};
@@ -0,0 +1,25 @@
+import axios from "../../../config/axios";
+import {
+  CreateCategoryLearningType,
+  CreateLearningType,
+} from "../types/LearningTypes";
+
+export const getCategory = async () => {
+  const { data } = await axios.get(`/learnings/category`);
+  return data;
+};
+
+export const createCategory = async (params: CreateCategoryLearningType) => {
+  const { data } = await axios.post(`/learnings/category`, params);
+  return data;
+};
+
+export const CreateLearning = async (params: CreateLearningType) => {
+  const { data } = await axios.post(`/learnings`, params);
+  return data;
+};
+
+export const getLearnings = async (page: number) => {
+  const { data } = await axios.get(`/learnings?page=${page}`);
+  return data;
+};
@@ -0,0 +1,34 @@
+export type CreateCategoryLearningType = {
+  name: string;
+};
+
+export type CategoryLearningType = {
+  id: number;
+  name: string;
+};
+
+export type CreateLearningType = {
+  title: string;
+  description: string;
+  coverUrl: string;
+  videoUrl: string;
+  videoDuration: string;
+  categoryId: string;
+};
+
+export type LearningItemType = {
+  id: string;
+  title: string;
+  description: string;
+  coverUrl: string;
+  videoUrl: string;
+  videoDuration: string;
+  category: {
+    id: string;
+    createdAt: string;
+    updatedAt: string;
+    name: string;
+  };
+  createdAt: string;
+  updatedAt: string;
+};
@@ -22,6 +22,9 @@ import AnnouncementUpdate from '@/pages/annoncement/Update'
 import AnnouncementCreate from '@/pages/annoncement/Create'
 import CriticismsList from '@/pages/criticisms/List'
 import CriticismsDetail from '@/pages/criticisms/Detail'
+import LearningList from '@/pages/learning/List'
+import LearningCreate from '@/pages/learning/Create'
+import LearningCategory from '@/pages/learning/Category'
 const MainRouter: FC = () => {
    return (
        <div className='p-4 overflow-hidden'>
@@ -55,6 +58,10 @@ const MainRouter: FC = () => {

                            <Route path={Paths.criticisms.list} element={<CriticismsList />} />
                            <Route path={Paths.criticisms.detail + ':id'} element={<CriticismsDetail />} />
+
+                            <Route path={Paths.learning.list} element={<LearningList />} />
+                            <Route path={Paths.learning.create} element={<LearningCreate />} />
+                            <Route path={Paths.learning.category} element={<LearningCategory />} />
                        </Routes>
                    </div>
                </div>
@@ -125,7 +125,7 @@ const SideBar: FC = () => {
                            icon={<Teacher size={iconSizeSideBar} color='#4F5260' />}
                            title={t('sidebar.learning')}
                            isActive={isActive('/learning')}
-                            link={Paths.learning}
+                            link={Paths.learning.list}
                        />
                    </div>