feat(FE-114,137): enhance RecordingForm to handle stock usage and depletion total changes with improved input handling

src/components/pages/production/recording/form/RecordingForm.tsx

@@ -440,6 +440,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   }, [stockProducts, getProjectFlockLocation()]);
 
 
+  // Handle stock usage amount change
+  const handleStockUsageAmountChangeWrapper = useCallback(
+    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseInt(e.target.value.replace(/[^\d.-]/g, '')) || 0;
+      formik.setFieldValue(`stocks.${idx}.usage_amount`, value);
+    },
+    [formik]
+  );
+
   // Unified Stock remove handlers
   const removeStock = (idx: number) => {
     const updatedStocks = formik.values.stocks?.filter((_, i) => i !== idx);
@@ -466,6 +475,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     formik.setFieldValue('depletions', newDepletions);
   };
 
+  // Handle depletion total change
+  const handleDepletionTotalChangeWrapper = useCallback(
+    (idx: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = parseInt(e.target.value.replace(/[^\d.-]/g, '')) || 0;
+      formik.setFieldValue(`depletions.${idx}.total`, value);
+    },
+    [formik]
+  );
+
   const removeDepletion = (idx: number) => {
     const updatedDepletions = formik.values.depletions?.filter(
       (_, i) => i !== idx
@@ -942,14 +960,14 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       <NumberInput
                         required
                         name={`stocks.${idx}.usage_amount`}
-                        value={stock.usage_amount || 0}
+                        value={stock.usage_amount}
-                        onChange={formik.handleChange}
+                        onChange={handleStockUsageAmountChangeWrapper(idx)}
                         onBlur={formik.handleBlur}
                         maskType='number'
                         decimals={0}
                         min={0}
                         thousandSeparator=','
-                        decimalSeparator='.'
+                        decimalSeparator=''
                         isError={
                           isRepeaterInputError('stocks', 'usage_amount', idx)
                             .isError
@@ -1127,17 +1145,17 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       />
                     </td>
                     <td>
-                      <TextInput
+                      <NumberInput
                         required
                         name={`depletions.${idx}.total`}
-                        type='number'
+                        value={depletion.total}
-                        value={
+                        onChange={handleDepletionTotalChangeWrapper(idx)}
-                          typeof depletion.total === 'number'
-                            ? depletion.total.toString()
-                            : depletion.total
-                        }
-                        onChange={formik.handleChange}
                         onBlur={formik.handleBlur}
+                        maskType='number'
+                        decimals={0}
+                        min={0}
+                        thousandSeparator=','
+                        decimalSeparator=''
                         isError={
                           isRepeaterInputError('depletions', 'total', idx)
                             .isError