From 8481b77c90d38b061440a9a602e519b7d1d35fd3 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 13 Jan 2026 16:21:41 +0700
Subject: [PATCH] refactor(FE): Adjust cumulative depletion table layout

---
 .../recording/form/RecordingForm.tsx          | 56 ++++++-------------
 1 file changed, 17 insertions(+), 39 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 5097fe27..c279bde7 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -1663,54 +1663,31 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                 </div>
                 <div className='p-4'>
                   <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'
-                        >
-                          DEPLESI KUMULATIF
-                        </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'>
-                          (%)
-                        </th>
-                      </tr>
-                    </thead>
                     <tbody>
                       <tr>
-                        <td className='text-center py-3 border-r border-gray-100'>
+                        <td className='py-2 font-medium'>Deplesi Kumulatif</td>
+                        <td className='text-right py-2'>
                           <span className='font-semibold'>
-                            {initialValues.total_depletion_qty &&
-                            initialValues.total_depletion_qty > 0
-                              ? formatNumber(initialValues.total_depletion_qty)
+                            {initialValues.cum_depletion_rate &&
+                            initialValues.cum_depletion_rate > 0
+                              ? `${initialValues.cum_depletion_rate.toFixed(2)}%`
                               : '-'}
                           </span>
                         </td>
-                        <td className='text-center py-3 text-gray-600'>
-                          {initialValues.cum_depletion_rate &&
-                          initialValues.cum_depletion_rate > 0
-                            ? initialValues.cum_depletion_rate.toFixed(2)
+                      </tr>
+                      <tr>
+                        <td className='py-2 font-medium'>Total Depletion</td>
+                        <td className='text-right py-2 font-semibold'>
+                          {initialValues.total_depletion_qty &&
+                          initialValues.total_depletion_qty > 0
+                            ? formatNumber(initialValues.total_depletion_qty)
                             : '-'}
                         </td>
+                        <td></td>
                       </tr>
-                      <tr>
-                        <td
-                          colSpan={2}
-                          className='text-center py-3 border-r border-gray-200 text-gray-600'
-                        >
-                          Total Ayam
-                        </td>
-                      </tr>
-                      <tr>
-                        <td
-                          colSpan={2}
-                          className='text-center py-3 font-semibold'
-                        >
+                      <tr className='border-t border-gray-200'>
+                        <td className='py-2 text-gray-600'>Total Ayam</td>
+                        <td className='text-right py-2 font-semibold'>
                           {initialValues.project_flock?.total_chick_qty &&
                           initialValues.project_flock?.total_chick_qty > 0
                             ? formatNumber(
@@ -1718,6 +1695,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                               )
                             : '-'}
                         </td>
+                        <td></td>
                       </tr>
                     </tbody>
                   </table>