fix bug design datepcker

src/components/DatePicker.tsx

@@ -5,6 +5,7 @@ import persian_fa from 'react-date-object/locales/persian_fa';
 import DateObject from 'react-date-object';
 import { clx } from '../helpers/utils';
 import { Calendar } from 'iconsax-react';
+import Error from './Error';
 
 type Props = {
     onChange: (date: string) => void;
@@ -88,26 +89,22 @@ const DatePickerComponent: FC<Props> = (props: Props) => {
                 <div className='text-xs'>
                     {props.label}
                 </div>}
-            <div className={clx(
+            <div className={clx(props.label && 'mt-1.5')}>
-                'relative ',
+                <div className="relative">
-                props.label && 'mt-1.5'
+                    <DatePicker
-            )}>
+                        placeholder={props.placeholder}
-                <DatePicker
+                        value={value}
-                    placeholder={props.placeholder}
+                        onChange={(date) => setValue(date as DateObject)}
-                    value={value}
+                        calendar={persian}
-                    onChange={(date) => setValue(date as DateObject)}
+                        locale={persian_fa}
-                    calendar={persian}
+                        calendarPosition="bottom-right"
-                    locale={persian_fa}
+                        className={`rmdp-mobile ${props.className}`}
-                    calendarPosition="bottom-right"
+                    />
-                    className={`rmdp-mobile ${props.className}`}
+                    <Calendar size={18} color='black' className='pointer-events-none absolute top-0 bottom-0 left-2 my-auto' />
-                />
+                </div>
                 {props.error_text && props.error_text !== '' && (
-                    <div className="text-xs text-right text-red-600 mt-2 mr-2 font-medium">
+                    <Error errorText={props.error_text} />
-                        {props.error_text}
-                    </div>
                 )}
-
-                <Calendar size={18} color='black' className='absolute top-0 bottom-0 my-auto left-2' />
             </div>
         </div>
     );

src/pages/designer/Request.tsx

@@ -1,205 +1,157 @@
-import { usePageTitle } from '@/hooks/usePageTitle'
+import Button from "@/components/Button";
-import { type FC } from 'react'
+import DatePicker from "@/components/DatePicker";
-import { Form, Formik, type FormikProps } from 'formik'
+import Error from "@/components/Error";
-import * as Yup from 'yup'
+import Input from "@/components/Input";
-import Button from '@/components/Button'
+import Select from "@/components/Select";
-import DatePicker from '@/components/DatePicker'
+import Textarea from "@/components/Textarea";
-import Input from '@/components/Input'
+import UploadBoxDraggble from "@/components/UploadBoxDraggble";
-import Select from '@/components/Select'
+import { usePageTitle } from "@/hooks/usePageTitle";
-import Textarea from '@/components/Textarea'
+import { useSingleUpload } from "@/pages/uploader/hooks/useUploaderData";
-import UploadBoxDraggble from '@/components/UploadBoxDraggble'
+import { Form, Formik, type FormikProps } from "formik";
-import Error from '@/components/Error'
+import { type FC } from "react";
-import { useSingleUpload } from '@/pages/uploader/hooks/useUploaderData'
+import * as Yup from "yup";
 
-const PRICE_PER_PAGE = 1000
+const PRICE_PER_PAGE = 1000;
 
 const pageCountOptions = Array.from({ length: 20 }, (_, index) => {
-    const value = index + 1
+  const value = index + 1;
-    return {
+  return {
-        value: String(value),
+    value: String(value),
-        label: String(value),
+    label: String(value),
-    }
+  };
-})
+});
 
 export type DesignerRequestFormValues = {
-    title: string
+  title: string;
-    count: number
+  count: number;
-    desc: string
+  desc: string;
-    expectedDate: string
+  expectedDate: string;
-    attachments: string[]
+  attachments: string[];
-}
+};
 
 const initialValues: DesignerRequestFormValues = {
-    title: '',
+  title: "",
-    count: 1,
+  count: 1,
-    desc: '',
+  desc: "",
-    expectedDate: '',
+  expectedDate: "",
-    attachments: [],
+  attachments: [],
-}
+};
 
 const validationSchema = Yup.object({
-    title: Yup.string().trim().required('عنوان کاتالوگ الزامی است'),
+  title: Yup.string().trim().required("عنوان کاتالوگ الزامی است"),
-    count: Yup.number()
+  count: Yup.number().min(1, "حداقل تعداد صفحات ۱ است").max(20, "حداکثر تعداد صفحات ۲۰ است").required("تعداد صفحات الزامی است"),
-        .min(1, 'حداقل تعداد صفحات ۱ است')
+  desc: Yup.string().trim(),
-        .max(20, 'حداکثر تعداد صفحات ۲۰ است')
+  expectedDate: Yup.string().required("زمان تحویل الزامی است"),
-        .required('تعداد صفحات الزامی است'),
+  attachments: Yup.array().of(Yup.string()),
-    desc: Yup.string().trim(),
+});
-    expectedDate: Yup.string().required('زمان تحویل الزامی است'),
-    attachments: Yup.array().of(Yup.string()),
-})
 
 type DesignerRequestFormFieldsProps = FormikProps<DesignerRequestFormValues> & {
-    uploadFile: ReturnType<typeof useSingleUpload>['mutateAsync']
+  uploadFile: ReturnType<typeof useSingleUpload>["mutateAsync"];
-    isUploading: boolean
+  isUploading: boolean;
-}
+};
 
 const DesignerRequestFormFields: FC<DesignerRequestFormFieldsProps> = ({
-    values,
+  values,
-    errors,
+  errors,
-    touched,
+  touched,
-    isSubmitting,
+  isSubmitting,
-    setFieldValue,
+  setFieldValue,
-    setFieldTouched,
+  setFieldTouched,
-    handleChange,
+  handleChange,
-    handleBlur,
+  handleBlur,
-    uploadFile,
+  uploadFile,
-    isUploading,
+  isUploading,
 }) => {
-    const totalPrice = values.count * PRICE_PER_PAGE
+  const totalPrice = values.count * PRICE_PER_PAGE;
 
-    const handleAttachmentChange = async (files: File[]) => {
+  const handleAttachmentChange = async (files: File[]) => {
-        if (files.length === 0) {
+    if (files.length === 0) {
-            await setFieldValue('attachments', [])
+      await setFieldValue("attachments", []);
-            setFieldTouched('attachments', true)
+      setFieldTouched("attachments", true);
-            return
+      return;
-        }
-
-        try {
-            const response = await uploadFile(files[0])
-            await setFieldValue('attachments', [response.data.url])
-        } catch {
-            await setFieldValue('attachments', [])
-        } finally {
-            setFieldTouched('attachments', true)
-        }
     }
 
-    return (
+    try {
-        <Form className='mt-6 space-y-5'>
+      const response = await uploadFile(files[0]);
-            <Input
+      await setFieldValue("attachments", [response.data.url]);
-                label='عنوان کاتالوگ'
+    } catch {
-                name='title'
+      await setFieldValue("attachments", []);
-                value={values.title}
+    } finally {
-                onChange={handleChange}
+      setFieldTouched("attachments", true);
-                onBlur={handleBlur}
+    }
-                error_text={touched.title ? errors.title : undefined}
+  };
-            />
 
-            <div className='grid grid-cols-1 gap-4 lg:grid-cols-2'>
+  return (
-                <DatePicker
+    <Form className="mt-6 space-y-5">
-                    label='زمان تحویل موردنظر'
+      <Input label="عنوان کاتالوگ" name="title" value={values.title} onChange={handleChange} onBlur={handleBlur} error_text={touched.title ? errors.title : undefined} />
-                    placeholder='تاریخ را انتخاب کنید'
-                    defaulValue={values.expectedDate}
-                    onChange={(date) => {
-                        setFieldValue('expectedDate', date)
-                        setFieldTouched('expectedDate', true)
-                    }}
-                    error_text={touched.expectedDate ? errors.expectedDate : undefined}
-                />
-                <Select
-                    label='تعداد صفحات'
-                    name='count'
-                    value={String(values.count)}
-                    items={pageCountOptions}
-                    onChange={(event) => setFieldValue('count', Number(event.target.value))}
-                    onBlur={handleBlur}
-                    error_text={touched.count ? errors.count : undefined}
-                />
-            </div>
 
-            <Textarea
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
-                label='توضیحات'
+        <DatePicker
-                name='desc'
+          label="زمان تحویل موردنظر"
-                value={values.desc}
+          placeholder="تاریخ را انتخاب کنید"
-                onChange={handleChange}
+          defaulValue={values.expectedDate}
-                onBlur={handleBlur}
+          onChange={(date) => {
-                className='min-h-[96px]'
+            setFieldValue("expectedDate", date);
-                error_text={touched.desc ? errors.desc : undefined}
+            setFieldTouched("expectedDate", true);
-            />
+          }}
+          error_text={touched.expectedDate ? errors.expectedDate : undefined}
+        />
+        <Select
+          label="تعداد صفحات"
+          name="count"
+          value={String(values.count)}
+          items={pageCountOptions}
+          onChange={(event) => setFieldValue("count", Number(event.target.value))}
+          onBlur={handleBlur}
+          error_text={touched.count ? errors.count : undefined}
+        />
+      </div>
 
-            <div>
+      <Textarea label="توضیحات" name="desc" value={values.desc} onChange={handleChange} onBlur={handleBlur} className="min-h-[96px]" error_text={touched.desc ? errors.desc : undefined} />
-                <div className='mb-2 text-sm'>فایل های ضمیمه</div>
-                <UploadBoxDraggble
-                    label='فایل مورد نظر را آپلود کنید'
-                    onChange={handleAttachmentChange}
-                    isMultiple={false}
-                    isFile
-                    isLoading={isUploading}
-                />
-                {touched.attachments && errors.attachments ? (
-                    <Error errorText={String(errors.attachments)} />
-                ) : null}
-            </div>
 
-            <div className='flex'>
+      <div>
-                <div className='flex-1'></div>
+        <div className="mb-2 text-sm">فایل های ضمیمه</div>
-                <div className='flex-1 flex gap-4'>
+        <UploadBoxDraggble label="فایل مورد نظر را آپلود کنید" onChange={handleAttachmentChange} isMultiple={false} isFile isLoading={isUploading} />
-                    <div className='w-[250px]'>
+        {touched.attachments && errors.attachments ? <Error errorText={String(errors.attachments)} /> : null}
-                        <Input
+      </div>
-                            label='قیمت به ازای هر صفحه'
-                            value={`${PRICE_PER_PAGE.toLocaleString('fa-IR')} تومان`}
-                            readOnly
-                        />
-                    </div>
-                    <Input
-                        label='مبلغ قابل پرداخت برای شما'
-                        value={`${totalPrice.toLocaleString('fa-IR')} تومان`}
-                        readOnly
-                    />
-                </div>
-            </div>
 
-            <div className='flex justify-end mt-5'>
+      <div className="flex">
-                <Button
+        <div className="flex-1"></div>
-                    type='submit'
+        <div className="flex-1 flex gap-4">
-                    className='w-fit px-6'
+          <div className="w-[250px]">
-                    disabled={isSubmitting || isUploading}
+            <Input label="قیمت به ازای هر صفحه" value={`${PRICE_PER_PAGE.toLocaleString("fa-IR")} تومان`} readOnly />
-                >
+          </div>
-                    ثبت درخواست
+          <Input label="مبلغ قابل پرداخت برای شما" value={`${totalPrice.toLocaleString("fa-IR")} تومان`} readOnly />
-                </Button>
+        </div>
-            </div>
+      </div>
-        </Form>
+
-    )
+      <div className="flex justify-end mt-5">
-}
+        <Button type="submit" className="w-fit px-6" disabled={isSubmitting || isUploading}>
+          ثبت درخواست
+        </Button>
+      </div>
+    </Form>
+  );
+};
 
 const DesignerRequest: FC = () => {
-    usePageTitle('درخواست طراحی')
+  usePageTitle("درخواست طراحی");
-    const { mutateAsync: uploadFile, isPending: isUploading } = useSingleUpload()
+  const { mutateAsync: uploadFile, isPending: isUploading } = useSingleUpload();
 
-    const handleSubmit = (values: DesignerRequestFormValues) => {
+  const handleSubmit = (values: DesignerRequestFormValues) => {
-        console.log(values)
+    console.log(values);
-    }
+  };
 
-    return (
+  return (
-        <div className='mt-4 w-full'>
+    <div className="mt-4 w-full">
-            <h1 className=''>درخواست طراحی کاتالوگ</h1>
+      <h1 className="">درخواست طراحی کاتالوگ</h1>
-            <div className='rounded-[32px] bg-white p-4 md:p-6 lg:p-8 mt-6'>
+      <div className="rounded-[32px] bg-white p-4 md:p-6 lg:p-8 mt-6">
-                <Formik
+        <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
-                    initialValues={initialValues}
+          {(formikProps) => <DesignerRequestFormFields {...formikProps} uploadFile={uploadFile} isUploading={isUploading} />}
-                    validationSchema={validationSchema}
+        </Formik>
-                    onSubmit={handleSubmit}
+      </div>
-                >
+    </div>
-                    {(formikProps) => (
+  );
-                        <DesignerRequestFormFields
+};
-                            {...formikProps}
-                            uploadFile={uploadFile}
-                            isUploading={isUploading}
-                        />
-                    )}
-                </Formik>
-            </div>
-        </div>
-    )
-}
 
-export default DesignerRequest
+export default DesignerRequest;

src/shared/SideBar.tsx

@@ -12,14 +12,7 @@ import { useSharedStore } from "./store/sharedStore";
 
 const SideBar: FC = () => {
   const { t } = useTranslation("global");
-  const {
+  const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore();
-    openSidebar,
-    setOpenSidebar,
-    hasSubMenu,
-    setSubMenuName,
-    setSubtMenu,
-    subMenuName,
-  } = useSharedStore();
   const location = useLocation();
 
   const isActive = (path: string) => {
@@ -44,12 +37,7 @@ const SideBar: FC = () => {
 
   return (
     <>
-      {openSidebar && (
+      {openSidebar && <div className="fixed top-0 left-0 right-0 bottom-0 bg-black/50 bg-opacity-50 z-10" onClick={() => setOpenSidebar(false)} />}
-        <div
-          className="fixed top-0 left-0 right-0 bottom-0 bg-black/50 bg-opacity-50 z-10"
-          onClick={() => setOpenSidebar(false)}
-        />
-      )}
       <div
         className={clx(
           "fixed xl:flex translate-x-[400px] xl:translate-x-0 transition-all ease-in-out opacity-0 invisible xl:visible xl:opacity-100  xl:right-4 right-0 xl:top-4 top-0 xl:bottom-4 bottom-0 xl:rounded-[32px] w-[250px] bg-white flex-col py-12",
@@ -57,33 +45,14 @@ const SideBar: FC = () => {
           hasSubMenu && "w-24 rounded-tl-none! rounded-bl-none!",
         )}
       >
-        <div className="flex justify-center">
+        <div className="flex justify-center">{!hasSubMenu ? <img src={LogoImage} className="w-[140px]" /> : <img src={LogoSmall} className="w-7" />}</div>
-          {!hasSubMenu ? (
-            <img src={LogoImage} className="w-[140px]" />
-          ) : (
-            <img src={LogoSmall} className="w-7" />
-          )}
-        </div>
 
         <div className="flex-1 flex flex-col h-full overflow-y-auto no-scrollbar">
-          <div
+          <div className={clx("mt-10 px-12 text-header text-sm font-normal", hasSubMenu && "px-2 text-center")}>{t("sidebar.menu")}</div>
-            className={clx(
-              "mt-10 px-12 text-header text-sm font-normal",
-              hasSubMenu && "px-2 text-center",
-            )}
-          >
-            {t("sidebar.menu")}
-          </div>
 
           <div className="text-xs text-[#8C90A3]">
             <SideBarItem
-              icon={
+              icon={<Home2 variant={isActive(Paths.home) ? "Bold" : "Outline"} color={isActive(Paths.home) ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
-                <Home2
-                  variant={isActive(Paths.home) ? "Bold" : "Outline"}
-                  color={isActive(Paths.home) ? "black" : "#8C90A3"}
-                  size={iconSizeSideBar}
-                />
-              }
               title={t("sidebar.home_page")}
               isActive={isActive(Paths.home)}
               link={Paths.home}
@@ -91,13 +60,7 @@ const SideBar: FC = () => {
             />
 
             <SideBarItem
-              icon={
+              icon={<DocumentText variant={isActive(Paths.catalog.list) ? "Bold" : "Outline"} color={isActive(Paths.catalog.list) ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
-                <DocumentText
-                  variant={isActive(Paths.catalog.list) ? "Bold" : "Outline"}
-                  color={isActive(Paths.catalog.list) ? "black" : "#8C90A3"}
-                  size={iconSizeSideBar}
-                />
-              }
               title={t("sidebar.catalog")}
               isActive={isActive(Paths.catalog.list)}
               link={Paths.catalog.list}
@@ -105,15 +68,7 @@ const SideBar: FC = () => {
             />
 
             <SideBarItem
-              icon={
+              icon={<Brush2 variant={isActive(Paths.designer.request) ? "Bold" : "Outline"} color={isActive(Paths.designer.request) ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
-                <Brush2
-                  variant={
-                    isActive(Paths.designer.request) ? "Bold" : "Outline"
-                  }
-                  color={isActive(Paths.designer.request) ? "black" : "#8C90A3"}
-                  size={iconSizeSideBar}
-                />
-              }
               title={t("sidebar.request_design")}
               isActive={isActive(Paths.designer.request)}
               link={Paths.designer.request}
@@ -125,13 +80,7 @@ const SideBar: FC = () => {
             <BuyCatalog />
             <div className="text-xs text-[#8C90A3] mt-5">
               <SideBarItem
-                icon={
+                icon={<Logout variant={isActive("logout") ? "Bold" : "Outline"} color={isActive("logout") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
-                  <Logout
-                    variant={isActive("logout") ? "Bold" : "Outline"}
-                    color={isActive("logout") ? "black" : "#8C90A3"}
-                    size={iconSizeSideBar}
-                  />
-                }
                 title="خروج"
                 isActive={isActive("logout")}
                 link={`#`}