From a9f0696b38cd4013f1fb6aa8cb6a86e2e9145c75 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Fri, 24 Oct 2025 09:50:12 +0700
Subject: [PATCH] refactor(FE-114): auto-populate notes with product name and
 enhance tooltip visibility in RecordingForm

---
 .../recording/form/RecordingForm.tsx          | 47 ++++++++++++-------
 1 file changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 3b98ae3a..15f7fcdf 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -815,8 +815,14 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         <span className='text-error'>*</span>
                       </span>
                   </th>
-                  <th>Jumlah Pakai</th>
-                  <th>Catatan</th>
+                  <th>Jumlah Pakai
+                    <span
+                      className="tooltip tooltip-error tooltip-bottom z-[9999]"
+                      data-tip="required"
+                    >
+                        <span className="text-error">*</span>
+                      </span>
+                  </th>
                   {type !== 'detail' && <th>Action</th>}
                 </tr>
                 </thead>
@@ -859,6 +865,18 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             `stocks.${idx}.product_warehouse_id`,
                             option?.value || 0
                           );
+                          // Auto-populate notes with product name by finding it in stockProducts data
+                          if (option?.value && isResponseSuccess(stockProducts)) {
+                            const selectedProduct = stockProducts.data.find(
+                              (product) => product.id === option.value
+                            );
+                            if (selectedProduct) {
+                              formik.setFieldValue(
+                                `stocks.${idx}.notes`,
+                                selectedProduct.product.name
+                              );
+                            }
+                          }
                         }}
                         options={unifiedStockProducts}
                         placeholder='Pilih Produk'
@@ -909,20 +927,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         placeholder='Jumlah Pakai'
                       />
                     </td>
-                    <td>
-                      <TextInput
-                        name={`stocks.${idx}.notes`}
-                        value={stock.notes || ''}
-                        onChange={formik.handleChange}
-                        onBlur={formik.handleBlur}
-                        placeholder='Catatan...'
-                        readOnly={type === 'detail'}
-                        className={{
-                          wrapper: 'w-full min-w-32',
-                        }}
-                      />
-                    </td>
-                    {type !== 'detail' && (
+                      {type !== 'detail' && (
                       <td>
                         <div className='flex justify-center'>
                           <Button
@@ -1008,12 +1013,18 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   )}
                   <th>
                     Kondisi
+                    <span
+                      className="tooltip tooltip-error tooltip-bottom z-[9999]"
+                      data-tip="required"
+                    >
+                        <span className="text-error">*</span>
+                      </span>
                   </th>
                   <th>
                     Total
                     <span
-                      className='tooltip tooltip-error tooltip-bottom z-[9999]'
-                      data-tip='required'
+                      className="tooltip tooltip-error tooltip-bottom z-[9999]"
+                      data-tip="required"
                     >
                         <span className='text-error'>*</span>
                     </span>