icons list and create group icon

src/config/Pages.ts

@@ -122,4 +122,8 @@ export const Pages = {
     errors: "/access-logs/errors",
     permissions: "/access-logs/permissions",
   },
+  icons: {
+    list: "/icons/list",
+    groupList: "/icons/group/list",
+  },
 };

src/langs/fa.json

@@ -842,5 +842,10 @@
     "status": "وضعیت",
     "full_name": "نام و نام خانوادگی",
     "users": "کاربران"
-  }
+  },
+  "icon": {
+    "group_list": "لیست گروه های آیکون",
+    "add_new_group": "افزودن گروه آیکون"
+  },
+  "cancel": "لغو"
 }

src/pages/icon/GroupList.tsx

@@ -0,0 +1,40 @@
+import { type FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '../../components/Button'
+import { Add } from 'iconsax-react'
+import CreateGroupIcon from './components/CreateGroupIcon'
+
+const GroupIconList: FC = () => {
+
+    const { t } = useTranslation('global')
+    const [showModal, setShowModal] = useState<boolean>(false)
+
+    return (
+        <div className='mt-4'>
+            <div className='flex justify-between items-center'>
+                <div>
+                    {t('icon.group_list')}
+                </div>
+
+                <Button
+                    className='w-[172px]'
+                    onClick={() => setShowModal(true)}
+                >
+                    <div className='flex gap-2 items-center'>
+                        <Add size={20} color='white' />
+                        <div>
+                            {t('icon.add_new_group')}
+                        </div>
+                    </div>
+                </Button>
+            </div>
+
+            <CreateGroupIcon
+                open={showModal}
+                close={() => setShowModal(false)}
+            />
+        </div>
+    )
+}
+
+export default GroupIconList

src/pages/icon/List.tsx

@@ -0,0 +1,13 @@
+import { type FC } from 'react'
+import { useGetIcons } from './hooks/useIconData'
+
+const IconsList: FC = () => {
+
+    const { data: icons, isLoading, refetch } = useGetIcons()
+
+    return (
+        <div>IconsList</div>
+    )
+}
+
+export default IconsList

src/pages/icon/components/CreateGroupIcon.tsx

@@ -0,0 +1,99 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '../../../components/Button'
+import DefaulModal from '../../../components/DefaulModal'
+import Input from '../../../components/Input'
+import { useFormik } from 'formik'
+import * as Yup from 'yup'
+import { toast } from 'react-toastify'
+import { TickCircle } from 'iconsax-react'
+import { useCreateGroupIcon } from '../hooks/useIconData'
+import { CreateGroupIconType } from '../types/Types'
+import { ErrorType } from '../../../helpers/types'
+
+interface CreateGroupIconProps {
+    open: boolean
+    close: () => void
+    onSuccess?: () => void
+}
+
+const CreateGroupIcon: FC<CreateGroupIconProps> = ({ open, close, onSuccess }) => {
+    const { t } = useTranslation('global')
+    const createGroupIcon = useCreateGroupIcon()
+
+    const formik = useFormik<CreateGroupIconType>({
+        initialValues: {
+            name: ''
+        },
+        validationSchema: Yup.object({
+            name: Yup.string()
+                .required(t('errors.required'))
+        }),
+        onSubmit: (values) => {
+            createGroupIcon.mutate(values, {
+                onSuccess: () => {
+                    formik.resetForm()
+                    close()
+                    toast.success(t('success'))
+                    onSuccess?.()
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(error.response?.data?.error?.message[0])
+                }
+            })
+        }
+    })
+
+    const handleClose = () => {
+        formik.resetForm()
+        close()
+    }
+
+    return (
+        <DefaulModal
+            open={open}
+            close={handleClose}
+            title_header={t('icon.add_new_group')}
+            isHeader
+        >
+            <div className='mt-6'>
+                <Input
+                    label={t('title')}
+                    className='bg-white bg-opacity-30'
+                    name='name'
+                    value={formik.values.name}
+                    onChange={formik.handleChange}
+                    error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
+                />
+
+                <div className='mt-12 border-t border-border pt-5 flex justify-end'>
+                    <div className='flex gap-5 items-center'>
+                        <Button
+                            className='w-[150px] bg-white bg-opacity-15 text-description'
+                            label={t('cancel')}
+                            onClick={handleClose}
+                        />
+
+                        <Button
+                            onClick={() => formik.handleSubmit()}
+                            isLoading={createGroupIcon.isPending}
+                        >
+                            <div className='flex gap-2'>
+                                <TickCircle
+                                    size={20}
+                                    color='white'
+                                />
+                                <div>
+                                    {t('submit')}
+                                </div>
+                            </div>
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </DefaulModal>
+    )
+}
+
+export default CreateGroupIcon
+

src/pages/icon/hooks/useIconData.ts

@@ -0,0 +1,15 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import * as api from "../service/IconService";
+
+export const useGetIcons = () => {
+  return useQuery({
+    queryKey: ["icons"],
+    queryFn: api.getIcons,
+  });
+};
+
+export const useCreateGroupIcon = () => {
+  return useMutation({
+    mutationFn: api.createGroupIcon,
+  });
+};

src/pages/icon/service/IconService.ts

@@ -0,0 +1,12 @@
+import axios from "../../../config/axios";
+import { CreateGroupIconType } from "../types/Types";
+
+export const getIcons = async () => {
+  const { data } = await axios.get("/admin/icons");
+  return data;
+};
+
+export const createGroupIcon = async (params: CreateGroupIconType) => {
+  const { data } = await axios.post("/admin/icons/groups", params);
+  return data;
+};

src/pages/icon/types/Types.ts

@@ -0,0 +1,3 @@
+export type CreateGroupIconType = {
+  name: string;
+};

src/router/Main.tsx

@@ -77,6 +77,8 @@ import AccessLogsList from '../pages/accessLogs/AccessLogsList'
 import AccessLogsStats from '../pages/accessLogs/AccessLogsStats'
 import ErrorLogs from '../pages/accessLogs/ErrorLogs'
 import PermissionLogs from '../pages/accessLogs/PermissionLogs'
+import IconsList from '../pages/icon/List.tsx'
+import GroupIconList from '../pages/icon/GroupList'
 const MainRouter: FC = () => {
 
     const { hasSubMenu } = useSharedStore()
@@ -165,6 +167,9 @@ const MainRouter: FC = () => {
                             <Route path={Pages.accessLogs.stats} element={<AccessLogsStats />} />
                             <Route path={Pages.accessLogs.errors} element={<ErrorLogs />} />
                             <Route path={Pages.accessLogs.permissions} element={<PermissionLogs />} />
+
+                            <Route path={Pages.icons.list} element={<IconsList />} />
+                            <Route path={Pages.icons.groupList} element={<GroupIconList />} />
                         </Routes>
                     </div>
                 </div>

src/shared/SideBar.tsx

@@ -2,7 +2,7 @@ import { FC, useEffect } from 'react'
 import LogoImage from '../assets/images/logo.svg'
 import LogoSmall from '../assets/images/logo-small.svg'
 import { useTranslation } from 'react-i18next'
-import { Card, Code, CodeCircle, DocumentLike, DocumentText, Element3, Gallery, Headphone, Home2, Logout, Message, Messages3, Money3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare, Activity } from 'iconsax-react'
+import { Card, Code, CodeCircle, DocumentLike, DocumentText, Element3, Gallery, Headphone, Home2, Logout, Message, Messages3, Money3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare, Activity, Icon } from 'iconsax-react'
 import SideBarItem from './SideBarItem'
 import { useLocation } from 'react-router-dom'
 import { Pages } from '../config/Pages'
@@ -295,6 +295,15 @@ const SideBar: FC = () => {
 
 
                     <div className='flex-1 flex flex-col justify-end mt-14'>
+                        <div className='text-xs text-[#8C90A3]'>
+                            <SideBarItem
+                                icon={<Icon variant={isActive('icons') ? 'Bold' : 'Outline'} color={isActive('icons') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                title={t('sidebar.icons')}
+                                isActive={isActive('icons')}
+                                link={Pages.icons.list}
+                                activeName='icons'
+                            />
+                        </div>
                         <div className='text-xs text-[#8C90A3]'>
                             <SideBarItem
                                 icon={<Card variant={isActive('card') ? 'Bold' : 'Outline'} color={isActive('card') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}