update admin

src/pages/admin/List.tsx

@@ -5,7 +5,7 @@ import moment from "moment-jalaali";
 import { Link } from "react-router-dom";
 import { Paths } from "@/config/Paths";
 import Button from "@/components/Button";
-import { AddSquare } from "iconsax-react";
+import { AddSquare, Edit } from "iconsax-react";
 
 const AdminList: FC = () => {
   const [page, setPage] = useState<number>(1);
@@ -54,6 +54,21 @@ const AdminList: FC = () => {
               );
             },
           },
+          {
+            key: "actions",
+            title: "عملیات",
+            render: (item) => {
+              return (
+                <div className="flex gap-2">
+                  <Link to={`${Paths.admin.update}${item.id}`}>
+                    <Button className="!w-8 !h-8 !p-0 !bg-blue-500">
+                      <Edit size={16} color="white" />
+                    </Button>
+                  </Link>
+                </div>
+              );
+            },
+          },
         ]}
         data={data?.data}
         pagination={{

src/pages/admin/Update.tsx

@@ -0,0 +1,169 @@
+import { useFormik } from 'formik';
+import { type FC, useEffect } from 'react';
+import type { CreateAdminType } from './types/Types';
+import * as Yup from 'yup';
+import Button from '@/components/Button';
+import { Edit } from 'iconsax-react';
+import Input from '@/components/Input';
+import Select from '@/components/Select';
+import { useGetAdminById, useGetRoles, useUpdateAdmin } from './hooks/useAdminData';
+import { useNavigate, useParams } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { extractErrorMessage } from '@/config/func';
+import { Paths } from '@/config/Paths';
+
+const UpdateAdmin: FC = () => {
+    const navigate = useNavigate();
+    const { id: adminId } = useParams<{ id: string }>();
+    const { mutate: update, isPending: isUpdating } = useUpdateAdmin();
+    const { data: rolesData } = useGetRoles();
+    const { data: adminData, isLoading: isLoadingAdmin } = useGetAdminById(adminId!);
+
+    const formik = useFormik<CreateAdminType>({
+        initialValues: {
+            firstName: '',
+            lastName: '',
+            phone: '',
+            roleId: '',
+            notificationPrefrences: ['test']
+        },
+        validationSchema: Yup.object({
+            firstName: Yup.string()
+                .required('نام اجباری می باشد')
+                .min(2, 'نام باید حداقل 2 کاراکتر باشد'),
+            lastName: Yup.string()
+                .required('نام خانوادگی اجباری می باشد')
+                .min(2, 'نام خانوادگی باید حداقل 2 کاراکتر باشد'),
+            phone: Yup.string()
+                .required('شماره موبایل اجباری می باشد')
+                .matches(/^09[0-9]{9}$/, 'شماره موبایل معتبر نمی باشد'),
+            roleId: Yup.string().required('نقش اجباری می باشد'),
+        }),
+        onSubmit: (values) => {
+            if (!adminId) return;
+
+            update({ adminId: adminId, params: values }, {
+                onSuccess: () => {
+                    toast.success('ادمین با موفقیت ویرایش شد');
+                    navigate(Paths.admin.list);
+                },
+                onError: (error) => {
+                    toast.error(extractErrorMessage(error));
+                },
+            });
+        },
+    });
+
+    // Update form values when admin data is loaded
+    useEffect(() => {
+        if (adminData) {
+            formik.setValues({
+                firstName: adminData?.data.firstName || '',
+                lastName: adminData?.data.lastName || '',
+                phone: '0' + adminData?.data.phone || '',
+                roleId: adminData?.data.role?.id || '',
+                notificationPrefrences: ['test']
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [adminData]);
+
+    const roleOptions =
+        rolesData?.data?.map((role) => ({
+            label: role.title || role.name,
+            value: role.id,
+        })) || [];
+
+    if (isLoadingAdmin) {
+        return (
+            <div className='mt-5'>
+                <div className='flex justify-center items-center h-64'>
+                    <div className='text-lg'>در حال بارگذاری...</div>
+                </div>
+            </div>
+        );
+    }
+
+    if (!adminData) {
+        return (
+            <div className='mt-5'>
+                <div className='flex justify-center items-center h-64'>
+                    <div className='text-lg text-red-500'>ادمین یافت نشد</div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className='mt-5'>
+            <div className='flex justify-between items-center'>
+                <h1 className='text-lg font-light'>ویرایش ادمین</h1>
+                <Button
+                    className='w-fit px-6'
+                    onClick={() => formik.handleSubmit()}
+                    isLoading={isUpdating}
+                >
+                    <div className='flex gap-1.5'>
+                        <Edit size={18} color='black' />
+                        <div className='text-[13px] font-light'>ویرایش ادمین</div>
+                    </div>
+                </Button>
+            </div>
+
+            <div className='mt-8 bg-white p-6 rounded-3xl flex-1'>
+                <div className='rowTwoInput'>
+                    <Input
+                        label='نام'
+                        placeholder='نام را وارد کنید'
+                        {...formik.getFieldProps('firstName')}
+                        error_text={
+                            formik.touched.firstName && formik.errors.firstName
+                                ? formik.errors.firstName
+                                : ''
+                        }
+                    />
+
+                    <Input
+                        label='نام خانوادگی'
+                        placeholder='نام خانوادگی را وارد کنید'
+                        {...formik.getFieldProps('lastName')}
+                        error_text={
+                            formik.touched.lastName && formik.errors.lastName
+                                ? formik.errors.lastName
+                                : ''
+                        }
+                    />
+                </div>
+
+                <div className='mt-6'>
+                    <Input
+                        label='شماره موبایل'
+                        placeholder='شماره موبایل را وارد کنید'
+                        {...formik.getFieldProps('phone')}
+                        error_text={
+                            formik.touched.phone && formik.errors.phone
+                                ? formik.errors.phone
+                                : ''
+                        }
+                    />
+                </div>
+
+                <div className='mt-6'>
+                    <Select
+                        label='نقش'
+                        placeholder='نقش را انتخاب کنید'
+                        items={roleOptions}
+                        {...formik.getFieldProps('roleId')}
+                        error_text={
+                            formik.touched.roleId && formik.errors.roleId
+                                ? formik.errors.roleId
+                                : ''
+                        }
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default UpdateAdmin;

src/pages/admin/hooks/useAdminData.ts

@@ -1,5 +1,6 @@
 import * as api from "../service/AdminService";
 import { useMutation, useQuery } from "@tanstack/react-query";
+import type { CreateAdminType } from "../types/Types";
 
 export const useGetAdmins = (page: number) => {
   return useQuery({
@@ -8,12 +9,32 @@ export const useGetAdmins = (page: number) => {
   });
 };
 
+export const useGetAdminById = (adminId: string) => {
+  return useQuery({
+    queryKey: ["admin", adminId],
+    queryFn: () => api.getAdminById(adminId),
+    enabled: !!adminId,
+  });
+};
+
 export const useCreateAdmin = () => {
   return useMutation({
     mutationFn: api.createAdmin,
   });
 };
 
+export const useUpdateAdmin = () => {
+  return useMutation({
+    mutationFn: ({
+      adminId,
+      params,
+    }: {
+      adminId: string;
+      params: CreateAdminType;
+    }) => api.updateAdmin(adminId, params),
+  });
+};
+
 export const useGetRoles = () => {
   return useQuery({
     queryKey: ["roles"],

src/pages/admin/service/AdminService.ts

@@ -3,6 +3,7 @@ import type {
   AdminsType,
   CreateAdminType,
   RolesResponseType,
+  AdminDetailResponseType,
 } from "../types/Types";
 
 export const getAdmins = async (page: number) => {
@@ -21,3 +22,15 @@ export const getRoles = async () => {
   const { data } = await axios.get<RolesResponseType>("/admin/roles");
   return data;
 };
+
+export const getAdminById = async (adminId: string) => {
+  const { data } = await axios.get<AdminDetailResponseType>(
+    `/admin/admins/${adminId}`,
+  );
+  return data;
+};
+
+export const updateAdmin = async (adminId: string, params: CreateAdminType) => {
+  const { data } = await axios.patch(`/admin/admins/${adminId}`, params);
+  return data;
+};

src/pages/admin/types/Types.ts

@@ -47,3 +47,4 @@ export type RoleItemType = {
 };
 
 export type RolesResponseType = BaseResponse<RoleItemType[]>;
+export type AdminDetailResponseType = BaseResponse<AdminItemType>;