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

src/router/MainRouter.tsx

@@ -1,99 +1,156 @@
-import { type FC } from 'react'
+import { type FC } from "react";
-import { Route, Routes } from 'react-router-dom'
+import { Route, Routes } from "react-router-dom";
-import Home from '../pages/home/Home'
+import Home from "../pages/home/Home";
-import SideBar from '../shared/Sidebar'
+import SideBar from "../shared/Sidebar";
-import Header from '../shared/Header'
+import Header from "../shared/Header";
-import { Paths } from '@/config/Paths'
+import { Paths } from "@/config/Paths";
-import ProformaInvoice from '@/pages/invoice/ProformaInvoice'
+import ProformaInvoice from "@/pages/invoice/ProformaInvoice";
-import RequestList from '@/pages/requests/RequestList'
+import RequestList from "@/pages/requests/RequestList";
-import ProductList from '@/pages/product/List'
+import ProductList from "@/pages/product/List";
-import OrdersList from '@/pages/order/List'
+import OrdersList from "@/pages/order/List";
-import FeaturesList from '@/pages/Features/List'
+import FeaturesList from "@/pages/Features/List";
-import CreateProduct from '@/pages/product/Create'
+import CreateProduct from "@/pages/product/Create";
-import CreateFeature from '@/pages/Features/Create'
+import CreateFeature from "@/pages/Features/Create";
-import PrintService from '@/pages/service/PrintService'
+import PrintService from "@/pages/service/PrintService";
-import DetailPerfomaInvoice from '@/pages/invoice/DetailPerfomaInvoice'
+import DetailPerfomaInvoice from "@/pages/invoice/DetailPerfomaInvoice";
-import TicketList from '@/pages/ticket/TicketList'
+import TicketList from "@/pages/ticket/TicketList";
-import CreateTicket from '@/pages/ticket/CreateTicket'
+import CreateTicket from "@/pages/ticket/CreateTicket";
-import TicketDetail from '@/pages/ticket/Detail'
+import TicketDetail from "@/pages/ticket/Detail";
-import TicketCategory from '@/pages/ticket/Category'
+import TicketCategory from "@/pages/ticket/Category";
-import AnnouncementList from '@/pages/annoncement/List'
+import AnnouncementList from "@/pages/annoncement/List";
-import AnnouncementUpdate from '@/pages/annoncement/Update'
+import AnnouncementUpdate from "@/pages/annoncement/Update";
-import AnnouncementCreate from '@/pages/annoncement/Create'
+import AnnouncementCreate from "@/pages/annoncement/Create";
-import CriticismsList from '@/pages/criticisms/List'
+import CriticismsList from "@/pages/criticisms/List";
-import CriticismsDetail from '@/pages/criticisms/Detail'
+import CriticismsDetail from "@/pages/criticisms/Detail";
-import LearningList from '@/pages/learning/List'
+import LearningList from "@/pages/learning/List";
-import LearningCreate from '@/pages/learning/Create'
+import LearningCreate from "@/pages/learning/Create";
-import LearningCategory from '@/pages/learning/Category'
+import LearningCategory from "@/pages/learning/Category";
-import CategoryList from '@/pages/product/category/List'
+import CategoryList from "@/pages/product/category/List";
-import CreateCategory from '@/pages/product/category/Create'
+import CreateCategory from "@/pages/product/category/Create";
-import UpdateCategory from '@/pages/product/category/Update'
+import UpdateCategory from "@/pages/product/category/Update";
-import UpdateProduct from '@/pages/product/Update'
+import UpdateProduct from "@/pages/product/Update";
-import CreateAttribute from '@/pages/product/attribute/Create'
+import CreateAttribute from "@/pages/product/attribute/Create";
-import AttributeList from '@/pages/product/attribute/List'
+import AttributeList from "@/pages/product/attribute/List";
-import UpdateAttribute from '@/pages/product/attribute/Update'
+import UpdateAttribute from "@/pages/product/attribute/Update";
-import AttributeValues from '@/pages/product/attribute/AttributeValues'
+import AttributeValues from "@/pages/product/attribute/AttributeValues";
-import FormBuilderList from '@/pages/formBuilder/List'
+import FormBuilderList from "@/pages/formBuilder/List";
-import FormBuilderCreate from '@/pages/formBuilder/Create'
+import FormBuilderCreate from "@/pages/formBuilder/Create";
-import FormBuilderUpdate from '@/pages/formBuilder/Update'
+import FormBuilderUpdate from "@/pages/formBuilder/Update";
-import FormBuilderValues from '@/pages/formBuilder/AttributeValues'
+import FormBuilderValues from "@/pages/formBuilder/AttributeValues";
-import OrderDetail from '@/pages/order/OrderDetail'
+import OrderDetail from "@/pages/order/OrderDetail";
-import NewOrder from '@/pages/order/NewOrder'
+import NewOrder from "@/pages/order/NewOrder";
-import EditOrder from '@/pages/order/EditOrder'
+import EditOrder from "@/pages/order/EditOrder";
-import SectionList from '@/pages/print/List'
+import SectionList from "@/pages/print/List";
-import CreateSection from '@/pages/print/Create'
+import CreateSection from "@/pages/print/Create";
-import UpdateSection from '@/pages/print/Update'
+import UpdateSection from "@/pages/print/Update";
-import PrintForm from '@/pages/print/Form'
+import PrintForm from "@/pages/print/Form";
-import UsersList from '@/pages/user/List'
+import UsersList from "@/pages/user/List";
-import AdminList from '@/pages/admin/List'
+import AdminList from "@/pages/admin/List";
-import CreateAdmin from '@/pages/admin/Create'
+import CreateAdmin from "@/pages/admin/Create";
+import EditAdmin from "@/pages/admin/Update";
 
 const MainRouter: FC = () => {
     return (
-        <div className='p-4 overflow-hidden'>
+        <div className="p-4 overflow-hidden">
             <Header />
             <SideBar />
-            <div className='flex-1 xl:ms-[269px] mt-[68px] xl:mt-[81px]'>
+            <div className="flex-1 xl:ms-[269px] mt-[68px] xl:mt-[81px]">
-                <div className={`overflow-auto w-[${window.innerWidth}] max-h-[calc(100vh-113px)]`}>
+                <div
-                    <div className='xl:pb-20 pb-32'>
+                    className={`overflow-auto w-[${window.innerWidth}] max-h-[calc(100vh-113px)]`}
-
+                >
+                    <div className="xl:pb-20 pb-32">
                         <Routes>
                             <Route path="/" element={<Home />} />
                             <Route path={Paths.home} element={<Home />} />
-                            <Route path={Paths.perfomaInvoice.list} element={<ProformaInvoice />} />
+                            <Route
-                            <Route path={Paths.perfomaInvoice.detail + ':id'} element={<DetailPerfomaInvoice />} />
+                                path={Paths.perfomaInvoice.list}
+                                element={<ProformaInvoice />}
+                            />
+                            <Route
+                                path={Paths.perfomaInvoice.detail + ":id"}
+                                element={<DetailPerfomaInvoice />}
+                            />
                             <Route path={Paths.requests.list} element={<RequestList />} />
 
                             <Route path={Paths.product.list} element={<ProductList />} />
                             <Route path={Paths.product.create} element={<CreateProduct />} />
-                            <Route path={Paths.product.update + ':id'} element={<UpdateProduct />} />
+                            <Route
-                            <Route path={Paths.product.attribute.create + ':id'} element={<CreateAttribute />} />
+                                path={Paths.product.update + ":id"}
-                            <Route path={Paths.product.attribute.list + ':id'} element={<AttributeList />} />
+                                element={<UpdateProduct />}
-                            <Route path={Paths.product.attribute.update + ':id'} element={<UpdateAttribute />} />
+                            />
-                            <Route path={Paths.product.attributeValue.list + ':id'} element={<AttributeValues />} />
+                            <Route
-                            <Route path={Paths.product.category.list} element={<CategoryList />} />
+                                path={Paths.product.attribute.create + ":id"}
-                            <Route path={Paths.product.category.create} element={<CreateCategory />} />
+                                element={<CreateAttribute />}
-                            <Route path={Paths.product.category.update + ':id'} element={<UpdateCategory />} />
+                            />
+                            <Route
+                                path={Paths.product.attribute.list + ":id"}
+                                element={<AttributeList />}
+                            />
+                            <Route
+                                path={Paths.product.attribute.update + ":id"}
+                                element={<UpdateAttribute />}
+                            />
+                            <Route
+                                path={Paths.product.attributeValue.list + ":id"}
+                                element={<AttributeValues />}
+                            />
+                            <Route
+                                path={Paths.product.category.list}
+                                element={<CategoryList />}
+                            />
+                            <Route
+                                path={Paths.product.category.create}
+                                element={<CreateCategory />}
+                            />
+                            <Route
+                                path={Paths.product.category.update + ":id"}
+                                element={<UpdateCategory />}
+                            />
 
-                            <Route path={Paths.formBuilder.list + ':id/:type'} element={<FormBuilderList />} />
+                            <Route
-                            <Route path={Paths.formBuilder.create + ':id/:type'} element={<FormBuilderCreate />} />
+                                path={Paths.formBuilder.list + ":id/:type"}
-                            <Route path={Paths.formBuilder.update + ':id'} element={<FormBuilderUpdate />} />
+                                element={<FormBuilderList />}
-                            <Route path={Paths.formBuilder.values + ':id'} element={<FormBuilderValues />} />
+                            />
+                            <Route
+                                path={Paths.formBuilder.create + ":id/:type"}
+                                element={<FormBuilderCreate />}
+                            />
+                            <Route
+                                path={Paths.formBuilder.update + ":id"}
+                                element={<FormBuilderUpdate />}
+                            />
+                            <Route
+                                path={Paths.formBuilder.values + ":id"}
+                                element={<FormBuilderValues />}
+                            />
 
                             <Route path={Paths.order.list} element={<OrdersList />} />
-                            <Route path={Paths.order.details + ':id'} element={<OrderDetail />} />
+                            <Route
+                                path={Paths.order.details + ":id"}
+                                element={<OrderDetail />}
+                            />
                             <Route path={Paths.order.create} element={<NewOrder />} />
-                            <Route path={Paths.order.edit + ':id'} element={<EditOrder />} />
+                            <Route path={Paths.order.edit + ":id"} element={<EditOrder />} />
 
                             <Route path={Paths.print.list} element={<SectionList />} />
                             <Route path={Paths.print.create} element={<CreateSection />} />
-                            <Route path={Paths.print.update + ':id'} element={<UpdateSection />} />
+                            <Route
-                            <Route path={Paths.print.form + ':itemId/:orderId'} element={<PrintForm />} />
+                                path={Paths.print.update + ":id"}
+                                element={<UpdateSection />}
+                            />
+                            <Route
+                                path={Paths.print.form + ":itemId/:orderId"}
+                                element={<PrintForm />}
+                            />
 
                             <Route path={Paths.users.list} element={<UsersList />} />
 
                             <Route path={Paths.admin.list} element={<AdminList />} />
                             <Route path={Paths.admin.create} element={<CreateAdmin />} />
+                            <Route
+                                path={Paths.admin.update + ":id"}
+                                element={<EditAdmin />}
+                            />
 
                             <Route path={Paths.features.list} element={<FeaturesList />} />
                             <Route path={Paths.features.create} element={<CreateFeature />} />
@@ -101,25 +158,52 @@ const MainRouter: FC = () => {
 
                             <Route path={Paths.ticket.list} element={<TicketList />} />
                             <Route path={Paths.ticket.create} element={<CreateTicket />} />
-                            <Route path={Paths.ticket.detail + ':id'} element={<TicketDetail />} />
+                            <Route
-                            <Route path={Paths.ticket.category} element={<TicketCategory />} />
+                                path={Paths.ticket.detail + ":id"}
+                                element={<TicketDetail />}
+                            />
+                            <Route
+                                path={Paths.ticket.category}
+                                element={<TicketCategory />}
+                            />
 
-                            <Route path={Paths.announcement.list} element={<AnnouncementList />} />
+                            <Route
-                            <Route path={Paths.announcement.detail + ':id'} element={<AnnouncementUpdate />} />
+                                path={Paths.announcement.list}
-                            <Route path={Paths.announcement.create} element={<AnnouncementCreate />} />
+                                element={<AnnouncementList />}
+                            />
+                            <Route
+                                path={Paths.announcement.detail + ":id"}
+                                element={<AnnouncementUpdate />}
+                            />
+                            <Route
+                                path={Paths.announcement.create}
+                                element={<AnnouncementCreate />}
+                            />
 
-                            <Route path={Paths.criticisms.list} element={<CriticismsList />} />
+                            <Route
-                            <Route path={Paths.criticisms.detail + ':id'} element={<CriticismsDetail />} />
+                                path={Paths.criticisms.list}
+                                element={<CriticismsList />}
+                            />
+                            <Route
+                                path={Paths.criticisms.detail + ":id"}
+                                element={<CriticismsDetail />}
+                            />
 
                             <Route path={Paths.learning.list} element={<LearningList />} />
-                            <Route path={Paths.learning.create} element={<LearningCreate />} />
+                            <Route
-                            <Route path={Paths.learning.category} element={<LearningCategory />} />
+                                path={Paths.learning.create}
+                                element={<LearningCreate />}
+                            />
+                            <Route
+                                path={Paths.learning.category}
+                                element={<LearningCategory />}
+                            />
                         </Routes>
                     </div>
                 </div>
             </div>
         </div>
-    )
+    );
-}
+};
 
-export default MainRouter
+export default MainRouter;