refactor(FE-62): optimize product and ekspedisi removal logic in MovementForm

src/components/pages/inventory/movement/form/MovementForm.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useFormik } from 'formik';
 import useSWR from 'swr';
 
@@ -105,12 +105,20 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     formik.setFieldValue('product', newProducts);
   };
 
-  const removeProduct = (index: number) => {
+  const removeProduct = useCallback(
-    const newProducts = formik.values.product?.filter(
+    (i: number) => {
-      (_, idx) => idx !== index
+      const updatedProducts =
-    );
+        formik.values.product?.reduce((acc: ProductSchema[], item, index) => {
-    formik.setFieldValue('product', newProducts);
+          if (index !== i) {
-  };
+            acc.push(item);
+          }
+          return acc;
+        }, []) ?? [];
+
+      formik.setFieldValue('product', updatedProducts);
+    },
+    [formik]
+  );
 
   const addEkspedisi = () => {
     const newEkspedisi = [
@@ -131,12 +139,23 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     formik.setFieldValue('ekspedisi', newEkspedisi);
   };
 
-  const removeEkspedisi = (index: number) => {
+  const removeEkspedisi = useCallback(
-    const newEkspedisi = formik.values.ekspedisi?.filter(
+    (i: number) => {
-      (_, idx) => idx !== index
+      const updatedEkspedisi =
-    );
+        formik.values.ekspedisi?.reduce(
-    formik.setFieldValue('ekspedisi', newEkspedisi);
+          (acc: EkspedisiSchema[], item, index) => {
-  };
+            if (index !== i) {
+              acc.push(item);
+            }
+            return acc;
+          },
+          []
+        ) ?? [];
+
+      formik.setFieldValue('ekspedisi', updatedEkspedisi);
+    },
+    [formik]
+  );
 
   const isRepeaterInputError = <T extends 'product' | 'ekspedisi'>(
     arrayName: T,
@@ -201,7 +220,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
 
   return (
     <>
-      <section className='w-full max-w-xl'>
+      <section className='w-full max-w-5xl'>
         <FormHeader
           type={type}
           title='Movement'
@@ -321,7 +340,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   </thead>
                   <tbody>
                     {formik.values.product?.map((product, idx) => (
-                      <tr key={idx}>
+                      <tr key={`product-row-${idx}-${product.product_id}`}>
                         <td>
                           <SelectInput
                             required
@@ -422,7 +441,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                   </thead>
                   <tbody>
                     {formik.values.ekspedisi?.map((ekspedisi, idx) => (
-                      <tr key={idx}>
+                      <tr
+                        key={`ekspedisi-row-${idx}-${ekspedisi.product_id}-${ekspedisi.supplier_id}`}
+                      >
                         <td>
                           <SelectInput
                             required