From 8e8835589499a81ae4c5b48701bb87bb5f9ead0c Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 31 Dec 2025 09:43:05 +0700
Subject: [PATCH] refactor(FE-441): Refactor RecordingForm layout and labels

---
 .../recording/form/RecordingForm.tsx          | 100 +++++++-----------
 1 file changed, 38 insertions(+), 62 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 127af83d..3a6f8071 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -1599,18 +1599,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             : '-'}
                         </td>
                       </tr>
-                      <tr>
-                        <td className='py-3 font-medium'>Cum. Intake (KG)</td>
-                        <td className='text-center py-3'>
-                          <span className='font-semibold'>
-                            {initialValues.cum_intake &&
-                            initialValues.cum_intake > 0
-                              ? formatNumber(initialValues.cum_intake)
-                              : '-'}
-                          </span>
-                        </td>
-                        <td className='text-center py-3 text-gray-600'>-</td>
-                      </tr>
                     </tbody>
                   </table>
                 </div>
@@ -1627,12 +1615,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   <table className='w-full text-sm'>
                     <thead>
                       <tr className='border-b border-gray-200'>
-                        <th
-                          colSpan={2}
-                          className='text-center py-2 font-semibold text-gray-600 border-r border-gray-200'
-                        >
-                          DEPLESI HARIAN
-                        </th>
                         <th
                           colSpan={2}
                           className='text-center py-2 font-semibold text-gray-600'
@@ -1641,12 +1623,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         </th>
                       </tr>
                       <tr className='border-b border-gray-200'>
-                        <th className='text-center py-2 font-semibold text-xs text-gray-500'>
-                          Total
-                        </th>
-                        <th className='text-center py-2 font-semibold text-xs text-gray-500 border-r border-gray-200'>
-                          (%)
-                        </th>
                         <th className='text-center py-2 font-semibold text-xs text-gray-500'>
                           Total
                         </th>
@@ -1657,20 +1633,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     </thead>
                     <tbody>
                       <tr>
-                        <td className='text-center py-3 border-r border-gray-100'>
-                          <span className='font-semibold'>
-                            {initialValues.hand_day &&
-                            initialValues.hand_day > 0
-                              ? formatNumber(initialValues.hand_day)
-                              : '-'}
-                          </span>
-                        </td>
-                        <td className='text-center py-3 border-r border-gray-200 text-gray-600'>
-                          {initialValues.hand_day_std !== undefined &&
-                          initialValues.hand_day_std > 0
-                            ? `${initialValues.hand_day_std}%`
-                            : '-'}
-                        </td>
                         <td className='text-center py-3 border-r border-gray-100'>
                           <span className='font-semibold'>
                             {initialValues.total_depletion_qty &&
@@ -1686,28 +1648,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             : '-'}
                         </td>
                       </tr>
-                      <tr className='border-b border-gray-200'>
-                        <td className='text-center py-3 border-r border-gray-100'>
-                          <span className='font-semibold'>
-                            {initialValues.hand_house &&
-                            initialValues.hand_house > 0
-                              ? formatNumber(initialValues.hand_house)
-                              : '-'}
-                          </span>
-                        </td>
-                        <td className='text-center py-3 border-r border-gray-200 text-gray-600'>
-                          {initialValues.hand_house_std !== undefined &&
-                          initialValues.hand_house_std > 0
-                            ? `${initialValues.hand_house_std}%`
-                            : '-'}
-                        </td>
-                        <td
-                          colSpan={2}
-                          className='text-center py-3 text-gray-600'
-                        >
-                          -
-                        </td>
-                      </tr>
                       <tr>
                         <td
                           colSpan={2}
@@ -1715,6 +1655,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         >
                           Total Ayam
                         </td>
+                      </tr>
+                      <tr>
                         <td
                           colSpan={2}
                           className='text-center py-3 font-semibold'
@@ -1737,7 +1679,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   <div className='border border-gray-200 rounded-lg bg-white'>
                     <div className='px-4 py-3 border-b border-gray-200'>
                       <span className='card-title font-bold text-xl'>
-                        Produksi Telur
+                        Produksi
                       </span>
                     </div>
                     <div className='p-4'>
@@ -1755,7 +1697,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         </thead>
                         <tbody>
                           <tr>
-                            <td className='py-3 font-medium'>Egg Mesh</td>
+                            <td className='py-3 font-medium'>Egg Mass</td>
                             <td className='text-center py-3'>
                               <span className='font-semibold'>
                                 {initialValues.egg_mesh &&
@@ -1790,6 +1732,40 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 : '-'}
                             </td>
                           </tr>
+                          <tr>
+                            <td className='py-3 font-medium'>Hen Day</td>
+                            <td className='text-center py-3'>
+                              <span className='font-semibold'>
+                                {initialValues.hand_day &&
+                                initialValues.hand_day > 0
+                                  ? formatNumber(initialValues.hand_day)
+                                  : '-'}
+                              </span>
+                            </td>
+                            <td className='text-center py-3 text-gray-600'>
+                              {initialValues.hand_day_std !== undefined &&
+                              initialValues.hand_day_std > 0
+                                ? `${initialValues.hand_day_std}%`
+                                : '-'}
+                            </td>
+                          </tr>
+                          <tr>
+                            <td className='py-3 font-medium'>Hen House</td>
+                            <td className='text-center py-3'>
+                              <span className='font-semibold'>
+                                {initialValues.hand_house &&
+                                initialValues.hand_house > 0
+                                  ? formatNumber(initialValues.hand_house)
+                                  : '-'}
+                              </span>
+                            </td>
+                            <td className='text-center py-3 text-gray-600'>
+                              {initialValues.hand_house_std !== undefined &&
+                              initialValues.hand_house_std > 0
+                                ? `${initialValues.hand_house_std}%`
+                                : '-'}
+                            </td>
+                          </tr>
                         </tbody>
                       </table>
                     </div>