order detail

src/pages/user/Create.tsx

@@ -1,12 +1,14 @@
 import { useFormik } from "formik";
-import { type FC } from "react";
+import { useState, type FC } from "react";
 import * as Yup from "yup";
 import Button from "@/components/Button";
 import { TickCircle } from "iconsax-react";
 import Input from "@/components/Input";
 import Textarea from "@/components/Textarea";
 import SwitchComponent from "@/components/Switch";
+import UploadBox from "@/components/UploadBox";
 import { useCreateUser } from "./hooks/useUserData";
+import { useSingleUpload } from "@/pages/uploader/hooks/useUploader";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
 import { extractErrorMessage } from "@/config/func";
@@ -20,6 +22,7 @@ const initialValues: CreateUserType = {
   address: "",
   gender: true,
   maxCredit: 0,
+  avatarUrl: undefined,
 };
 
 const validationSchema = Yup.object({
@@ -35,18 +38,34 @@ const validationSchema = Yup.object({
 const CreateUser: FC = () => {
   const navigate = useNavigate();
   const { mutate: createUser, isPending } = useCreateUser();
+  const { mutate: upload, isPending: isUploading } = useSingleUpload();
+  const [file, setFile] = useState<File>();
+
+  const handleSave = (values: CreateUserType) => {
+    createUser(values, {
+      onSuccess: () => {
+        toast.success("مشتری با موفقیت ایجاد شد");
+        navigate(Paths.users.list);
+      },
+      onError: (error) => toast.error(extractErrorMessage(error)),
+    });
+  };
 
   const formik = useFormik<CreateUserType>({
     initialValues,
     validationSchema,
     onSubmit: (values) => {
-      createUser(values, {
-        onSuccess: () => {
-          toast.success("مشتری با موفقیت ایجاد شد");
-          navigate(Paths.users.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);
+      }
     },
   });
 
@@ -57,7 +76,7 @@ const CreateUser: FC = () => {
         <Button
           className="w-fit px-6"
           onClick={() => formik.handleSubmit()}
-          isLoading={isPending}
+          isLoading={isPending || isUploading}
         >
           <div className="flex gap-1.5">
             <TickCircle size={18} color="black" />
@@ -67,7 +86,14 @@ const CreateUser: 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/user/List.tsx

@@ -2,6 +2,7 @@ import { useState, type FC } from 'react'
 import { Link } from 'react-router-dom'
 import { useGetUsers } from './hooks/useUserData'
 import Table from '@/components/Table'
+import PresignedImage from '@/components/PresignedImage'
 import moment from 'moment-jalaali'
 import Button from '@/components/Button'
 import { AddSquare, Edit } from 'iconsax-react'
@@ -27,6 +28,13 @@ const UsersList: 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/user/Update.tsx

@@ -1,15 +1,18 @@
 import { useFormik } from "formik";
-import { type FC, useEffect } from "react";
+import { type FC, useEffect, useState } from "react";
 import * as Yup from "yup";
 import Button from "@/components/Button";
 import { TickCircle } from "iconsax-react";
 import Input from "@/components/Input";
 import Textarea from "@/components/Textarea";
 import SwitchComponent from "@/components/Switch";
+import UploadBox from "@/components/UploadBox";
+import PresignedImage from "@/components/PresignedImage";
 import {
   useGetUserById,
   useUpdateUser,
 } from "./hooks/useUserData";
+import { useSingleUpload } from "@/pages/uploader/hooks/useUploader";
 import { useNavigate, useParams } from "react-router-dom";
 import { toast } from "react-toastify";
 import { extractErrorMessage } from "@/config/func";
@@ -23,6 +26,7 @@ const initialValues: CreateUserType = {
   address: "",
   gender: true,
   maxCredit: 0,
+  avatarUrl: undefined,
 };
 
 const validationSchema = Yup.object({
@@ -42,22 +46,38 @@ const UpdateUser: FC = () => {
     !!userId
   );
   const { mutate: updateUser, isPending } = useUpdateUser();
+  const { mutate: upload, isPending: isUploading } = useSingleUpload();
+  const [file, setFile] = useState<File>();
+
+  const handleSave = (values: CreateUserType) => {
+    if (!userId) return;
+    updateUser(
+      { userId, params: values },
+      {
+        onSuccess: () => {
+          toast.success("مشتری با موفقیت ویرایش شد");
+          navigate(Paths.users.list);
+        },
+        onError: (error) => toast.error(extractErrorMessage(error)),
+      }
+    );
+  };
 
   const formik = useFormik<CreateUserType>({
     initialValues,
     validationSchema,
     onSubmit: (values) => {
-      if (!userId) return;
-      updateUser(
-        { userId, params: values },
-        {
-          onSuccess: () => {
-            toast.success("مشتری با موفقیت ویرایش شد");
-            navigate(Paths.users.list);
+      if (file) {
+        upload(file, {
+          onSuccess: (data) => {
+            values.avatarUrl = data?.data?.key;
+            handleSave(values);
           },
           onError: (error) => toast.error(extractErrorMessage(error)),
-        }
-      );
+        });
+      } else {
+        handleSave(values);
+      }
     },
   });
 
@@ -71,6 +91,7 @@ const UpdateUser: FC = () => {
         address: u.addresse ?? "",
         gender: u.gender ?? true,
         maxCredit: u.maxCredit ?? 0,
+        avatarUrl: u.avatarUrl ?? undefined,
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -103,7 +124,7 @@ const UpdateUser: FC = () => {
         <Button
           className="w-fit px-6"
           onClick={() => formik.handleSubmit()}
-          isLoading={isPending}
+          isLoading={isPending || isUploading}
         >
           <div className="flex gap-1.5">
             <TickCircle size={18} color="black" />
@@ -113,7 +134,24 @@ const UpdateUser: 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/user/types/Types.ts

@@ -10,6 +10,7 @@ export interface UserType extends RowDataType {
   addresse: string | null;
   maxCredit: number;
   isActive: boolean;
+  avatarUrl: string | null;
   createdAt: string;
   deletedAt: string | null;
 }
@@ -23,6 +24,7 @@ export interface CreateUserType {
   address: string;
   gender: boolean;
   maxCredit: number;
+  avatarUrl?: string;
 }
 
 export type UserDetailResponseType = BaseResponse<UserType>;