order detail

src/pages/admin/Create.tsx

@@ -1,12 +1,14 @@
 import { useFormik } from 'formik';
-import { type FC } from 'react';
+import { useState, type FC } from 'react';
 import type { CreateAdminType } from './types/Types';
 import * as Yup from 'yup';
 import Button from '@/components/Button';
 import { AddSquare } from 'iconsax-react';
 import Input from '@/components/Input';
 import Select from '@/components/Select';
+import UploadBox from '@/components/UploadBox';
 import { useCreateAdmin, useGetRoles } from './hooks/useAdminData';
+import { useSingleUpload } from '@/pages/uploader/hooks/useUploader';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { extractErrorMessage } from '@/config/func';
@@ -16,6 +18,20 @@ const CreateAdmin: FC = () => {
     const navigate = useNavigate();
     const { mutate: createAdmin, isPending } = useCreateAdmin();
     const { data: rolesData } = useGetRoles();
+    const { mutate: upload, isPending: isUploading } = useSingleUpload();
+    const [file, setFile] = useState<File>();
+
+    const handleSave = (values: CreateAdminType) => {
+        createAdmin(values, {
+            onSuccess: () => {
+                toast.success('ادمین با موفقیت ایجاد شد');
+                navigate(Paths.admin.list);
+            },
+            onError: (error) => {
+                toast.error(extractErrorMessage(error));
+            },
+        });
+    };
 
     const formik = useFormik<CreateAdminType>({
         initialValues: {
@@ -23,6 +39,7 @@ const CreateAdmin: FC = () => {
             lastName: '',
             phone: '',
             roleId: '',
+            avatarUrl: undefined,
             notificationPrefrences: ['test']
         },
         validationSchema: Yup.object({
@@ -38,15 +55,17 @@ const CreateAdmin: FC = () => {
             roleId: Yup.string().required('نقش اجباری می باشد'),
         }),
         onSubmit: (values) => {
-            createAdmin(values, {
-                onSuccess: () => {
-                    toast.success('ادمین با موفقیت ایجاد شد');
-                    navigate(Paths.admin.list);
-                },
-                onError: (error) => {
-                    toast.error(extractErrorMessage(error));
-                },
-            });
+            if (file) {
+                upload(file, {
+                    onSuccess: (data) => {
+                        values.avatarUrl = data?.data?.key;
+                        handleSave(values);
+                    },
+                    onError: (error) => toast.error(extractErrorMessage(error)),
+                });
+            } else {
+                handleSave(values);
+            }
         },
     });
 
@@ -63,7 +82,7 @@ const CreateAdmin: FC = () => {
                 <Button
                     className='w-fit px-6'
                     onClick={() => formik.handleSubmit()}
-                    isLoading={isPending}
+                    isLoading={isPending || isUploading}
                 >
                     <div className='flex gap-1.5'>
                         <AddSquare size={18} color='black' />
@@ -73,7 +92,14 @@ const CreateAdmin: FC = () => {
             </div>
 
             <div className='mt-8 bg-white p-6 rounded-3xl flex-1'>
-                <div className='rowTwoInput'>
+                <div>
+                    <UploadBox
+                        label='آواتار (اختیاری)'
+                        onChange={(files) => setFile(files[0])}
+                    />
+                </div>
+
+                <div className='rowTwoInput mt-6'>
                     <Input
                         label='نام'
                         placeholder='نام را وارد کنید'

src/pages/admin/List.tsx

@@ -1,6 +1,7 @@
 import { useState, type FC } from "react";
 import { useGetAdmins, useDeleteAdmin } from "./hooks/useAdminData";
 import Table from "@/components/Table";
+import PresignedImage from "@/components/PresignedImage";
 import moment from "moment-jalaali";
 import { Link } from "react-router-dom";
 import { Paths } from "@/config/Paths";
@@ -29,6 +30,20 @@ const AdminList: FC = () => {
 
       <Table
         columns={[
+          {
+            key: "avatarUrl",
+            title: "آواتار",
+            render: (item) =>
+              item.avatarUrl ? (
+                <PresignedImage
+                  src={item.avatarUrl}
+                  className="w-10 h-10 rounded-full object-cover"
+                  alt=""
+                />
+              ) : (
+                "-"
+              ),
+          },
           {
             key: "fullName",
             title: "نام و نام خانوادگی",

src/pages/admin/Update.tsx

@@ -1,12 +1,15 @@
 import { useFormik } from 'formik';
-import { type FC, useEffect } from 'react';
+import { type FC, useEffect, useState } 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 UploadBox from '@/components/UploadBox';
+import PresignedImage from '@/components/PresignedImage';
 import { useGetAdminById, useGetRoles, useUpdateAdmin } from './hooks/useAdminData';
+import { useSingleUpload } from '@/pages/uploader/hooks/useUploader';
 import { useNavigate, useParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { extractErrorMessage } from '@/config/func';
@@ -18,6 +21,22 @@ const UpdateAdmin: FC = () => {
     const { mutate: update, isPending: isUpdating } = useUpdateAdmin();
     const { data: rolesData } = useGetRoles();
     const { data: adminData, isLoading: isLoadingAdmin } = useGetAdminById(adminId!);
+    const { mutate: upload, isPending: isUploading } = useSingleUpload();
+    const [file, setFile] = useState<File>();
+
+    const handleSave = (values: CreateAdminType) => {
+        if (!adminId) return;
+
+        update({ adminId: adminId, params: values }, {
+            onSuccess: () => {
+                toast.success('ادمین با موفقیت ویرایش شد');
+                navigate(Paths.admin.list);
+            },
+            onError: (error) => {
+                toast.error(extractErrorMessage(error));
+            },
+        });
+    };
 
     const formik = useFormik<CreateAdminType>({
         initialValues: {
@@ -25,6 +44,7 @@ const UpdateAdmin: FC = () => {
             lastName: '',
             phone: '',
             roleId: '',
+            avatarUrl: undefined,
             notificationPrefrences: ['test']
         },
         validationSchema: Yup.object({
@@ -40,17 +60,17 @@ const UpdateAdmin: FC = () => {
             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));
-                },
-            });
+            if (file) {
+                upload(file, {
+                    onSuccess: (data) => {
+                        values.avatarUrl = data?.data?.key;
+                        handleSave(values);
+                    },
+                    onError: (error) => toast.error(extractErrorMessage(error)),
+                });
+            } else {
+                handleSave(values);
+            }
         },
     });
 
@@ -62,6 +82,7 @@ const UpdateAdmin: FC = () => {
                 lastName: adminData?.data.lastName || '',
                 phone: '0' + adminData?.data.phone || '',
                 roleId: adminData?.data.role?.id || '',
+                avatarUrl: adminData?.data.avatarUrl || undefined,
                 notificationPrefrences: ['test']
             });
         }
@@ -101,7 +122,7 @@ const UpdateAdmin: FC = () => {
                 <Button
                     className='w-fit px-6'
                     onClick={() => formik.handleSubmit()}
-                    isLoading={isUpdating}
+                    isLoading={isUpdating || isUploading}
                 >
                     <div className='flex gap-1.5'>
                         <Edit size={18} color='black' />
@@ -111,7 +132,24 @@ const UpdateAdmin: FC = () => {
             </div>
 
             <div className='mt-8 bg-white p-6 rounded-3xl flex-1'>
-                <div className='rowTwoInput'>
+                {formik.values.avatarUrl && !file && (
+                    <div className='mb-4'>
+                        <PresignedImage
+                            src={formik.values.avatarUrl}
+                            className='w-20 h-20 rounded-full object-cover'
+                            alt='آواتار'
+                        />
+                    </div>
+                )}
+
+                <div>
+                    <UploadBox
+                        label='آواتار (اختیاری)'
+                        onChange={(files) => setFile(files[0])}
+                    />
+                </div>
+
+                <div className='rowTwoInput mt-6'>
                     <Input
                         label='نام'
                         placeholder='نام را وارد کنید'

src/pages/admin/types/Types.ts

@@ -16,6 +16,7 @@ export interface AdminItemType extends RowDataType {
     isSystem: boolean;
   };
   phone: string;
+  avatarUrl?: string | null;
 }
 
 export type AdminsType = BaseResponse<AdminItemType[]>;
@@ -25,6 +26,7 @@ export type CreateAdminType = {
   firstName: string;
   lastName: string;
   roleId: string;
+  avatarUrl?: string;
   notificationPrefrences?: string[];
 };