category learning

src/config/Pages.ts

@@ -34,7 +34,12 @@ export const Pages = {
     list: "/criticisms/list",
     detail: "/ccriticisms/detail/",
   },
-  learning: "/learning",
+  learning: {
+    list: "/learning/list",
+    detail: "/learning/detail/",
+    create: "/learning/create",
+    category: "/learning/category",
+  },
   setting: "/setting",
   wallet: "/wallet",
   profile: "/profile",

src/config/SideBarSubMenu.ts

@@ -4,4 +4,5 @@ export const SideBarItemHasSubMenu = [
   "receipts",
   "users",
   "tickets",
+  "learning",
 ];

src/langs/fa.json

@@ -425,7 +425,10 @@
   "no_select_file": "هیچ فایلی انتخاب نشده است",
   "attachment": "فایل های ضمیمه",
   "learning": {
-    "learning": "آموزش"
+    "learning": "آموزش",
+    "learnings": "آموزش ها",
+    "new_learning": "افزودن آموزش",
+    "category_learning": "دسته بندی آموزش"
   },
   "setting": {
     "setting": "تنظیمات",

src/pages/learning/Category.tsx

@@ -0,0 +1,74 @@
+import { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Td from '../../components/Td'
+import PageLoading from '../../components/PageLoading'
+import Pagination from '../../components/Pagination'
+import { useGetCategory } from './hooks/useLearningData'
+import { CategoryLearningType } from './types/LearningTypes'
+import CreateCategory from './components/CreateCategory'
+
+
+const LearningCategory: FC = () => {
+
+    const { t } = useTranslation('global')
+    const [page, setPage] = useState<number>(1)
+    const getCategory = useGetCategory()
+
+    return (
+        <div className='mt-4'>
+            <div>
+                {t('service.cateory_services')}
+            </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'>
+                                    <PageLoading />
+                                </div>
+                                :
+                                <div className='relative overflow-x-auto rounded-3xl w-full'>
+                                    <table className='w-full text-sm '>
+                                        <thead className='thead'>
+                                            <tr>
+                                                <Td text={t('service.title')} />
+                                                <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

src/pages/learning/components/CreateCategory.tsx

@@ -0,0 +1,81 @@
+import { 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'
+import { CreateCategoryLearningType } from '../types/LearningTypes'
+import { useCreateCategory, useGetCategory } from '../hooks/useLearningData'
+
+const CreateCategory: FC = () => {
+
+    const { t } = useTranslation('global')
+    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(t('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>
+                {t('service.add_category')}
+            </div>
+
+
+            <div className='mt-8'>
+                <Input
+                    label={t('service.title_category')}
+                    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>{t('save')}</div>
+                    </div>
+                </Button>
+            </div>
+        </div>
+    )
+}
+
+export default CreateCategory

src/pages/learning/hooks/useLearningData.ts

@@ -0,0 +1,17 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import * as api from "../service/LearningService";
+import { CreateCategoryLearningType } from "../types/LearningTypes";
+
+export const useGetCategory = () => {
+  return useQuery({
+    queryKey: ["learning-category"],
+    queryFn: api.getCategory,
+  });
+};
+
+export const useCreateCategory = () => {
+  return useMutation({
+    mutationFn: (variables: CreateCategoryLearningType) =>
+      api.createCategory(variables),
+  });
+};

src/pages/learning/service/LearningService.ts

@@ -0,0 +1,12 @@
+import axios from "../../../config/axios";
+import { CreateCategoryLearningType } 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;
+};

src/pages/learning/types/LearningTypes.ts

@@ -0,0 +1,8 @@
+export type CreateCategoryLearningType = {
+  name: string;
+};
+
+export type CategoryLearningType = {
+  id: number;
+  name: string;
+};

src/router/Main.tsx

@@ -49,6 +49,7 @@ import CreateBankCard from '../pages/cardBank/Create'
 import CardBankList from '../pages/cardBank/List'
 import EditBankCard from '../pages/cardBank/Edit'
 import PaymentList from '../pages/payment/List'
+import LearningCategory from '../pages/learning/Category'
 
 const MainRouter: FC = () => {
 
@@ -94,7 +95,8 @@ const MainRouter: FC = () => {
                             <Route path={Pages.announcement.create} element={<Create />} />
                             <Route path={Pages.criticisms.list} element={<CriticismsList />} />
                             <Route path={Pages.criticisms.detail + ':id'} element={<CriticismsDetail />} />
-                            <Route path={Pages.learning} element={<LearningList />} />
+                            <Route path={Pages.learning.list} element={<LearningList />} />
+                            <Route path={Pages.learning.category} element={<LearningCategory />} />
                             <Route path={Pages.setting} element={<Setting />} />
                             <Route path={Pages.wallet} element={<Wallet />} />
                             <Route path={Pages.profile} element={<Profile />} />

src/shared/SideBar.tsx

@@ -14,6 +14,7 @@ import ReceiptSubMenu from './components/ReceiptSubMenu'
 import CustomerSubMenu from './components/CustomerSubMenu'
 import TicketSubMenu from './components/TicketSubMenu'
 import UsersSubMenu from './components/UsersSubMenu'
+import LearningSubMenu from './components/LearningSubMenu'
 
 const SideBar: FC = () => {
 
@@ -213,7 +214,7 @@ const SideBar: FC = () => {
                             icon={<Teacher variant={isActive('learning') ? 'Bold' : 'Outline'} color={isActive('learning') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.learning')}
                             isActive={isActive('learning')}
-                            link={Pages.learning}
+                            link={Pages.learning.list}
                         />
                     </div>
 
@@ -272,7 +273,9 @@ const SideBar: FC = () => {
                                         <TicketSubMenu />
                                         : subMenuName === 'users' ?
                                             <UsersSubMenu />
-                                            : null
+                                            : subMenuName === 'learning' ?
+                                                <LearningSubMenu />
+                                                : null
                     }
                 </div>
             }

src/shared/components/LearningSubMenu.tsx

@@ -0,0 +1,52 @@
+import { Teacher } from 'iconsax-react'
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import SubMenuItem from './SubMenuItem'
+import { useLocation } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
+
+const LearningSubMenu: FC = () => {
+
+    const { t } = useTranslation('global')
+    const location = useLocation()
+
+    const isActive = (name: string) => {
+        return location.pathname.includes(name)
+    }
+
+    return (
+        <div className='py-12'>
+            <div className='flex gap-3 items-center border-b pb-10 px-6'>
+                <Teacher
+                    size={24}
+                    color='#000'
+                    variant='Bold'
+                />
+                <div className='text-xs'>
+                    {t('sidebar.learning')}
+                </div>
+            </div>
+
+            <div className='flex flex-col mt-10 gap-4'>
+                <SubMenuItem
+                    title={t('learning.learnings')}
+                    isActive={isActive('list')}
+                    link={Pages.learning.list}
+                />
+                <SubMenuItem
+                    title={t('learning.new_learning')}
+                    isActive={isActive('create')}
+                    link={Pages.learning.create}
+                />
+                <SubMenuItem
+                    title={t('learning.category_learning')}
+                    isActive={isActive('category')}
+                    link={Pages.learning.category}
+                />
+            </div>
+
+        </div>
+    )
+}
+
+export default LearningSubMenu