From f8054e220264219b90e6d1cdb8ac6204086487a2 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sun, 23 Feb 2025 17:58:51 +0330
Subject: [PATCH] part1

---
 src/components/Input.tsx      | 43 ++++++++++++++++++++++++++++++++---
 src/langs/fa.json             |  2 +-
 src/pages/receipts/Create.tsx | 12 +++++++---
 3 files changed, 50 insertions(+), 7 deletions(-)

diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 149ff22..4b130c3 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -18,8 +18,18 @@ type Props = {
     onChangeSearchFinal?: (value: string) => void;
 } & InputHTMLAttributes<HTMLInputElement>
 
+const formatNumber = (value: string | number): string => {
+    if (!value) return '';
+    const inputValue = String(value).replace(/,/g, '');
+    return inputValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+};
+
 const Input: FC<Props> = (props: Props) => {
 
+    const [formattedValue, setFormattedValue] = useState<string>(
+        props.value ? formatNumber(props.value as string) : ''
+    );
+
     const [showPassword, setShowPassword] = useState<boolean>(false)
     const [search, setSearch] = useState<string>('')
 
@@ -30,6 +40,33 @@ const Input: FC<Props> = (props: Props) => {
         props.className
     );
 
+    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (props.seprator) {
+            const inputValue = event.target.value.replace(/,/g, ''); // حذف کاماها
+            const formatted = formatNumber(inputValue);
+
+            // به‌روزرسانی مقدار قالب‌بندی‌شده
+            setFormattedValue(formatted);
+
+            // ارسال مقدار خام به `onChange` والد
+            props.onChange?.({
+                ...event,
+                target: {
+                    ...event.target,
+                    value: inputValue,
+                },
+            });
+        } else {
+            props.onChange?.(event);
+        }
+    };
+
+    useEffect(() => {
+        if (props.value) {
+            setFormattedValue(formatNumber(props.value as string));
+        }
+    }, [props.value])
+
     useEffect(() => {
         if (props.variant === 'search' && props.onChangeSearchFinal) {
             const timeout = setTimeout(() => {
@@ -47,10 +84,10 @@ const Input: FC<Props> = (props: Props) => {
             </label>
 
             <div className='w-full relative mt-1'>
-                <input onChange={(e) => {
+                <input {...props} onChange={(e) => {
                     setSearch(e.target.value)
-                    props.onChange?.(e)
-                }} {...props} type={props.type === 'password' && showPassword ? 'text' : props.type === 'password' ? 'password' : undefined} className={inputClass} />
+                    handleInputChange(e)
+                }} value={props.seprator ? formattedValue : props.value} type={props.type === 'password' && showPassword ? 'text' : props.type === 'password' ? 'password' : undefined} className={inputClass} />
 
                 {
                     props.type === 'password' &&
diff --git a/src/langs/fa.json b/src/langs/fa.json
index 4f20470..c7f2f4a 100644
--- a/src/langs/fa.json
+++ b/src/langs/fa.json
@@ -388,7 +388,7 @@
     "unit_amount": "مبلغ واحد",
     "discount": "تخفیف(٪)",
     "total_amount": "مبلغ کل(ریال)",
-    "tax": "مالیات بر ارزش افزوده (۰.۹ درصد)",
+    "tax": "مالیات بر ارزش افزوده (۱۰ درصد)",
     "total": "جمع",
     "error_empty": "همه فیلد ها را پر کنید",
     "date_receipt": "تاریخ صورتحساب",
diff --git a/src/pages/receipts/Create.tsx b/src/pages/receipts/Create.tsx
index c9afd79..3eb7bb0 100644
--- a/src/pages/receipts/Create.tsx
+++ b/src/pages/receipts/Create.tsx
@@ -73,6 +73,9 @@ const CreateReceipt: FC = () => {
         }
     }
 
+    console.log('as', formik.values);
+
+
 
     return (
         <div className='mt-4'>
@@ -221,7 +224,8 @@ const CreateReceipt: FC = () => {
                                             className='text-center'
                                             name='unitPrice'
                                             value={formik.values.unitPrice}
-                                            onChange={formik.handleChange}
+                                            onChange={(e) => formik.setFieldValue('unitPrice', e.target.value)}
+                                            seprator
                                         />
                                     </div>
 
@@ -308,6 +312,7 @@ const CreateReceipt: FC = () => {
                                                         name='unitPrice'
                                                         readOnly
                                                         value={item.unitPrice}
+                                                        seprator
                                                     />
                                                 </div>
 
@@ -332,6 +337,7 @@ const CreateReceipt: FC = () => {
                                                         className='text-center bg-[#EBEDF5]'
                                                         readOnly
                                                         value={((Number(item.unitPrice) || 0) * (Number(item.count) || 0) - (Number(item.unitPrice) || 0) * (Number(item.count) || 0) * (Number(item.discount) / 100 || 0)).toFixed(1)}
+                                                        seprator
                                                     />
                                                 </div>
 
@@ -357,7 +363,7 @@ const CreateReceipt: FC = () => {
                                             {t('receip.tax')}
                                         </div>
                                         <div className='text-black'>
-                                            {((items.reduce((acc, item) => acc + (Number(item.unitPrice) || 0) * (Number(item.count) || 0) - (Number(item.unitPrice) || 0) * (Number(item.count) || 0) * (Number(item.discount) / 100 || 0), 0)) * 0.09).toFixed(1)}
+                                            {((items.reduce((acc, item) => acc + (Number(item.unitPrice) || 0) * (Number(item.count) || 0) - (Number(item.unitPrice) || 0) * (Number(item.count) || 0) * (Number(item.discount) / 100 || 0), 0)) * 0.10).toFixed(1)}
                                         </div>
                                     </div>
                                     <div className='xl:w-1/2 h-12 w-full rounded-xl flex px-4 bg-[#EBEDF5] text-sm text-description justify-between items-center'>
@@ -366,7 +372,7 @@ const CreateReceipt: FC = () => {
                                         </div>
                                         <div className='text-black'>
                                             {(
-                                                items.reduce((acc, item) => acc + (Number(item.unitPrice) || 0) * (Number(item.count) || 0) - (Number(item.unitPrice) || 0) * (Number(item.count) || 0) * (Number(item.discount) / 100 || 0), 0) * 1.09
+                                                items.reduce((acc, item) => acc + (Number(item.unitPrice) || 0) * (Number(item.count) || 0) - (Number(item.unitPrice) || 0) * (Number(item.count) || 0) * (Number(item.discount) / 100 || 0), 0) * 1.10
                                             ).toFixed(1)}
                                         </div>
                                     </div>