From 1674aeed8559b44a08df58d146d52ccf612e0f9c Mon Sep 17 00:00:00 2001
From: Wikzyy <alwi.erdi4@gmail.com>
Date: Fri, 11 Apr 2025 16:33:19 +0700
Subject: [PATCH] fix update form field Product - set default value number to
 null - use Numeric Format

---
 .../master/products/blocks/EditDialog.tsx     | 109 ++++++++++++------
 1 file changed, 71 insertions(+), 38 deletions(-)

diff --git a/src/pages/master/products/blocks/EditDialog.tsx b/src/pages/master/products/blocks/EditDialog.tsx
index f669b9e..493489d 100644
--- a/src/pages/master/products/blocks/EditDialog.tsx
+++ b/src/pages/master/products/blocks/EditDialog.tsx
@@ -23,6 +23,7 @@ import {
   SelectValue
 } from '@/components/ui/select';
 import { doSaveLogActivity } from '@/actions/GlobalActions';
+import { NumericFormat } from 'react-number-format';
 
 interface ProviderProps {
   provider_id: string;
@@ -41,15 +42,29 @@ const EditDialog = () => {
     show: false,
     message: ''
   });
-  const initialState = {
+  const initialState: {
+    name: string;
+    code: string;
+    type: string;
+    description: string;
+    price_point: string | number | null;
+    price_cash: string | number | null;
+    cashback_point: string | number | null;
+    cashback_cash: string | number | null;
+    status: string;
+    provider: string;
+    process_on_third_party: string;
+    updated_by: string;
+    updated_at: string;
+  } = {
     name: '',
     code: '',
     type: '',
     description: '',
-    price_point: 0,
-    price_cash: 0,
-    cashback_point: 0,
-    cashback_cash: 0,
+    price_point: null,
+    price_cash: null,
+    cashback_point: null,
+    cashback_cash: null,
     status: '',
     provider: '',
     process_on_third_party: '',
@@ -139,7 +154,13 @@ const EditDialog = () => {
       formField.type.trim() === '' ||
       formField.code.trim() === '' ||
       formField.description.trim() === '' ||
-      formField.status === '' ||
+      formField.price_point === null ||
+      formField.price_cash === null ||
+      formField.cashback_point === null ||
+      formField.cashback_cash === null ||
+      formField.status.trim() === '' ||
+      formField.provider.trim() === '' ||
+      formField.process_on_third_party.trim() === '' ||
       formField.updated_by.trim() === '' ||
       formField.updated_at.trim() === ''
     ) {
@@ -256,16 +277,19 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Price Point<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
-                      min={0}
-                      step={0.01}
-                      value={formField.price_point}
-                      onChange={(e) => {
-                        const value = parseFloat(e.target.value);
-                        setFormField({ ...formField, price_point: isNaN(value) ? 0 : value });
+                      value={formField.price_point ?? ''}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          price_point: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
                       }}
+                      placeholder="Enter Price Point"
                     />
                   </div>
                 </div>
@@ -275,16 +299,19 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Price Cash<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
-                      min={0}
-                      step={0.01}
-                      value={formField.price_cash}
-                      onChange={(e) => {
-                        const value = parseFloat(e.target.value);
-                        setFormField({ ...formField, price_cash: isNaN(value) ? 0 : value });
+                      value={formField.price_cash ?? ''}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          price_cash: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
                       }}
+                      placeholder="Enter Price Cash"
                     />
                   </div>
                 </div>
@@ -294,16 +321,19 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Cashback Point<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
-                      min={0}
-                      step={0.01}
-                      value={formField.cashback_point}
-                      onChange={(e) => {
-                        const value = parseFloat(e.target.value);
-                        setFormField({ ...formField, cashback_point: isNaN(value) ? 0 : value });
+                      value={formField.cashback_point ?? ''}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          cashback_point: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
                       }}
+                      placeholder="Enter Cashback Point"
                     />
                   </div>
                 </div>
@@ -313,16 +343,19 @@ const EditDialog = () => {
                     <label className="form-label flex items-center gap-1 max-w-56">
                       Cashback Cash<span className="text-red-500">*</span>
                     </label>
-                    <Input
+                    <NumericFormat
                       className="input"
-                      type="number"
-                      min={0}
-                      step={0.01}
-                      value={formField.cashback_cash}
-                      onChange={(e) => {
-                        const value = parseFloat(e.target.value);
-                        setFormField({ ...formField, cashback_cash: isNaN(value) ? 0 : value });
+                      value={formField.cashback_cash ?? ''}
+                      thousandSeparator="."
+                      decimalSeparator=","
+                      allowNegative={false}
+                      onValueChange={(values) => {
+                        setFormField((prev) => ({
+                          ...prev,
+                          cashback_cash: values.floatValue !== undefined ? values.floatValue : ''
+                        }));
                       }}
+                      placeholder="Enter Cashback Cash"
                     />
                   </div>
                 </div>