create admin

src/config/Pages.ts

@@ -58,6 +58,7 @@ export const Pages = {
   },
   admins: {
     list: "/admins/list",
+    add: "/admins/add",
     update: "/admins/update/",
   },
 };

src/pages/admin/Create.tsx

@@ -0,0 +1,119 @@
+import { type FC } from 'react'
+import { useFormik } from 'formik'
+import * as Yup from 'yup'
+import { TickCircle } from 'iconsax-react'
+import { toast } from 'react-toastify'
+import { useNavigate } from 'react-router-dom'
+import Button from '@/components/Button'
+import Input from '@/components/Input'
+import Select from '@/components/Select'
+import { useCreateAdmin } from './hooks/useAdminData'
+import { useGetRoles } from '@/pages/roles/hooks/useRolesData'
+import type { CreateAdminType } from './types/Types'
+import { Pages } from '@/config/Pages'
+import type { ErrorType } from '@/helpers/types'
+import { extractErrorMessage } from '@/config/func'
+
+const CreateAdmin: FC = () => {
+    const navigate = useNavigate()
+    const { mutate: createAdmin, isPending } = useCreateAdmin()
+    const { data: rolesData } = useGetRoles()
+
+    const roles = rolesData?.data?.map(role => ({
+        label: role.name,
+        value: role.id
+    })) || []
+
+    const formik = useFormik<CreateAdminType>({
+        initialValues: {
+            phone: '',
+            firstName: '',
+            lastName: '',
+            roleId: '',
+        },
+        validationSchema: Yup.object().shape({
+            phone: Yup.string().required('شماره تلفن الزامی است'),
+            firstName: Yup.string().required('نام الزامی است'),
+            lastName: Yup.string().required('نام خانوادگی الزامی است'),
+            roleId: Yup.string().required('نقش الزامی است'),
+        }),
+        onSubmit: (values) => {
+            createAdmin(values, {
+                onSuccess: () => {
+                    toast.success('مدیر با موفقیت ایجاد شد')
+                    navigate(Pages.admins.list)
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(extractErrorMessage(error))
+                },
+            })
+        },
+    })
+
+    return (
+        <div className='mt-5'>
+            <div className='flex w-full justify-between items-center'>
+                <div className='text-lg font-light'>
+                    مدیر جدید
+                </div>
+                <div>
+                    <Button
+                        className='px-5'
+                        onClick={() => formik.handleSubmit()}
+                        isloading={isPending}
+                    >
+                        <div className='flex gap-2 items-center'>
+                            <TickCircle className='size-5' color='white' />
+                            <div>ثبت مدیر</div>
+                        </div>
+                    </Button>
+                </div>
+            </div>
+
+            <div className='mt-6'>
+                <div className='bg-white rounded-3xl p-6'>
+                    <div className='mb-4'>
+                        <Input
+                            label='نام'
+                            name='firstName'
+                            value={formik.values.firstName}
+                            onChange={formik.handleChange}
+                            error_text={formik.touched.firstName && formik.errors.firstName ? formik.errors.firstName : ''}
+                        />
+                    </div>
+                    <div className='mt-6'>
+                        <Input
+                            label='نام خانوادگی'
+                            name='lastName'
+                            value={formik.values.lastName}
+                            onChange={formik.handleChange}
+                            error_text={formik.touched.lastName && formik.errors.lastName ? formik.errors.lastName : ''}
+                        />
+                    </div>
+                    <div className='mt-6'>
+                        <Input
+                            label='شماره تلفن'
+                            name='phone'
+                            value={formik.values.phone}
+                            onChange={formik.handleChange}
+                            error_text={formik.touched.phone && formik.errors.phone ? formik.errors.phone : ''}
+                        />
+                    </div>
+                    <div className='mt-6'>
+                        <Select
+                            label='نقش'
+                            name='roleId'
+                            value={formik.values.roleId}
+                            onChange={formik.handleChange}
+                            items={roles}
+                            placeholder='نقش را انتخاب کنید'
+                            error_text={formik.touched.roleId && formik.errors.roleId ? formik.errors.roleId : ''}
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default CreateAdmin

src/pages/admin/List.tsx

@@ -5,6 +5,10 @@ import { useGetAdmins, useDeleteAdmin } from './hooks/useAdminData'
 import { useAdminFilters } from './hooks/useAdminFilters'
 import { getAdminTableColumns } from './components/AdminTableColumns'
 import { useAdminFiltersFields } from './components/AdminFiltersFields'
+import { Add } from 'iconsax-react'
+import { Link } from 'react-router-dom'
+import { Pages } from '@/config/Pages'
+import Button from '@/components/Button'
 
 const AdminList: FC = () => {
     const {
@@ -32,6 +36,16 @@ const AdminList: FC = () => {
         <div className='mt-5'>
             <div className='flex justify-between items-center'>
                 <h1 className='text-lg font-light'>لیست مدیران</h1>
+                <Link
+                    to={Pages.admins.add}
+                >
+                    <Button className='w-fit px-6'>
+                        <div className='flex gap-2 items-center'>
+                            <Add color='#fff' size={20} />
+                            <span>افزودن مدیر</span>
+                        </div>
+                    </Button>
+                </Link>
             </div>
 
             <div className='mt-8'>

src/pages/admin/hooks/useAdminData.ts

@@ -1,6 +1,6 @@
 import * as api from "../service/AdminService";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import type { GetAdminsParams } from "../types/Types";
+import type { GetAdminsParams, CreateAdminType } from "../types/Types";
 
 export const useGetAdmins = (params?: GetAdminsParams) => {
   return useQuery({
@@ -20,3 +20,31 @@ export const useDeleteAdmin = () => {
     },
   });
 };
+
+export const useCreateAdmin = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: api.createAdmin,
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["admins"],
+      });
+    },
+  });
+};
+
+export const useUpdateAdmin = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, params }: { id: string; params: CreateAdminType }) =>
+      api.updateAdmin(id, params),
+    onSuccess: (_, { id }) => {
+      queryClient.invalidateQueries({
+        queryKey: ["admins"],
+      });
+      queryClient.invalidateQueries({
+        queryKey: ["admins", id],
+      });
+    },
+  });
+};

src/pages/admin/service/AdminService.ts

@@ -1,5 +1,9 @@
 import axios from "@/config/axios";
-import type { GetAdminsResponse, GetAdminsParams } from "../types/Types";
+import type {
+  GetAdminsResponse,
+  GetAdminsParams,
+  CreateAdminType,
+} from "../types/Types";
 
 export const getAdmins = async (
   params?: GetAdminsParams
@@ -14,3 +18,13 @@ export const deleteAdmin = async (id: string) => {
   const { data } = await axios.delete(`/admin/admins/${id}`);
   return data;
 };
+
+export const createAdmin = async (params: CreateAdminType) => {
+  const { data } = await axios.post("/admin", params);
+  return data;
+};
+
+export const updateAdmin = async (id: string, params: CreateAdminType) => {
+  const { data } = await axios.patch(`/admin/admins/${id}`, params);
+  return data;
+};

src/pages/admin/types/Types.ts

@@ -31,10 +31,16 @@ export type Admin = {
 };
 
 export type GetAdminsParams = {
-    page?: number
+  page?: number;
-    limit?: number
+  limit?: number;
-    search?: string
+  search?: string;
-}
+};
 
 export type GetAdminsResponse = IResponse<Admin[]>;
 
+export type CreateAdminType = {
+  phone: string;
+  firstName: string;
+  lastName: string;
+  roleId: string;
+};

src/router/Main.tsx

@@ -28,6 +28,7 @@ import PaymentMethodsList from '@/pages/paymentMethods/List'
 import CreatePaymentMethod from '@/pages/paymentMethods/Create'
 import UpdatePaymentMethod from '@/pages/paymentMethods/Update'
 import AdminList from '@/pages/admin/List'
+import CreateAdmin from '@/pages/admin/Create'
 const MainRouter: FC = () => {
 
     const { hasSubMenu } = useSharedStore()
@@ -69,6 +70,7 @@ const MainRouter: FC = () => {
                             <Route path={Pages.payment_methods.update + ':id'} element={<UpdatePaymentMethod />} />
 
                             <Route path={Pages.admins.list} element={<AdminList />} />
+                            <Route path={Pages.admins.add} element={<CreateAdmin />} />
                         </Routes>
                     </div>
                 </div>