icons list and create group icon

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;
+};