create customer

src/components/DatePicker.tsx

@@ -14,7 +14,8 @@ type Props = {
     reset?: boolean;
     isDateTime?: boolean;
     className?: string;
-    label?: string
+    label?: string;
+    isNotRequired?: boolean;
 };
 
 const DatePickerComponent: FC<Props> = (props: Props) => {
@@ -85,8 +86,11 @@ const DatePickerComponent: FC<Props> = (props: Props) => {
     return (
         <div className="w-full">
             {props.label &&
-                <div className='text-sm'>
-                    {props.label}
+                <div className='flex items-center gap-1 text-sm'>
+                    <div>{props.label}</div>
+                    {props.isNotRequired && (
+                        <span className='text-xs text-description'>(اختیاری)</span>
+                    )}
                 </div>}
             <div className={clx(
                 'relative ',

src/components/Select.tsx

@@ -13,6 +13,7 @@ type Props = {
     error_text?: string,
     placeholder?: string,
     label?: string,
+    isNotRequired?: boolean,
 } & SelectHTMLAttributes<HTMLSelectElement>
 
 const Select: FC<Props> = (props: Props) => {
@@ -20,9 +21,14 @@ const Select: FC<Props> = (props: Props) => {
         <div className='w-full relative'>
             {
                 props.label &&
-                <label className='text-sm'>
-                    {props.label}
-                </label>
+                <div className='flex items-center gap-1'>
+                    <label className='text-sm'>
+                        {props.label}
+                    </label>
+                    {props.isNotRequired && (
+                        <span className='text-xs text-description'>(اختیاری)</span>
+                    )}
+                </div>
             }
             <select {...props} className={clx(
                 'w-full text-black block border appearance-none border-border !bg-white px-2.5 h-10 text-sm rounded-[10px] bg-gray',

src/components/UploadBox.tsx

@@ -9,6 +9,7 @@ type Props = {
     isMultiple?: boolean,
     onChange?: (file: File[]) => void;
     isReset?: boolean;
+    isNotRequired?: boolean;
 }
 
 const UploadBox: FC<Props> = (props: Props) => {
@@ -55,7 +56,12 @@ const UploadBox: FC<Props> = (props: Props) => {
 
     return (
         <div>
-            <div className='text-sm'>{props.label}</div>
+            <div className='flex items-center gap-1 text-sm'>
+                <div>{props.label}</div>
+                {props.isNotRequired && (
+                    <span className='text-xs text-description'>(اختیاری)</span>
+                )}
+            </div>
             <div className='w-full h-10 mt-1 border border-border rounded-xl items-center px-2 flex gap-2.5'>
                 <button {...getRootProps()} className=' w-fit h-7 rounded-lg text-xs px-6 bg-secondary'>
                     <input {...getInputProps()} />