fix: adjust remaining chicken UI layout

src/components/pages/production/transfer-to-laying/TransferToLayingDetailModal.tsx

@@ -40,6 +40,9 @@ const TransferToLayingDetailModal = () => {
     ? transferToLayingResponse.data
     : undefined;
 
+  const isTransferToLayingApproved =
+    transferToLaying?.approval.step_number === 2;
+
   const { data: transferToLayingApprovalResponse } = useSWR(
     transferToLayingId
       ? ['approval-transfer-to-laying', transferToLayingId]
@@ -55,9 +58,9 @@ const TransferToLayingDetailModal = () => {
 
   const detailModal = useModal();
 
-  const totalEnteredChickenForTransfer =
+  const maxSourceQuantity =
     transferToLaying?.sources.reduce(
-      (acc, item) => acc + Number(item.qty),
+      (acc, item) => acc + Number(item.product_warehouse.quantity),
       0
     ) ?? 0;
 
@@ -67,8 +70,9 @@ const TransferToLayingDetailModal = () => {
       0
     ) ?? 0;
 
+  // Sisa transfer = Max available dari kandang asal - Total yang sudah diisi di kandang tujuan
   const totalAvailableChickenForTransfer =
-    totalEnteredChickenForTransfer - totalTransferedChicken;
+    maxSourceQuantity - totalTransferedChicken;
 
   const closeModalHandler = (shouldPushToRoute: boolean = true) => {
     if (shouldPushToRoute) {
@@ -161,13 +165,36 @@ const TransferToLayingDetailModal = () => {
 
               {/* Source Kandang */}
               <div className='flex flex-col'>
-                <span className='w-full py-2 text-xs font-semibold'>
+                <span className='w-fit py-2 text-xs font-semibold flex flex-row items-center gap-3'>
+                  <span className='text-nowrap'>
                     Kandang Asal{' '}
                     <span className='tooltip tooltip-error' data-tip='required'>
                       <span className='text-error'> *</span>
                     </span>
                   </span>
 
+                  {!isTransferToLayingApproved && (
+                    <>
+                      <div className='w-px h-5 bg-base-content/10' />
+
+                      <StatusBadge
+                        color={
+                          totalAvailableChickenForTransfer < 0
+                            ? 'error'
+                            : 'neutral'
+                        }
+                        text={`Sisa ayam: ${formatNumber(
+                          totalAvailableChickenForTransfer,
+                          'en-US'
+                        )} ekor`}
+                        className={{
+                          badge: 'text-nowrap',
+                        }}
+                      />
+                    </>
+                  )}
+                </span>
+
                 {transferToLaying?.sources.length === 0 && (
                   <span className='text-sm text-base-content/50 italic'>
                     Belum ada kandang asal yang dipilih
@@ -225,21 +252,6 @@ const TransferToLayingDetailModal = () => {
                       <span className='text-error'> *</span>
                     </span>
                   </span>
-
-                  <div className='w-px h-5 bg-base-content/10' />
-
-                  <StatusBadge
-                    color={
-                      totalAvailableChickenForTransfer < 0 ? 'error' : 'neutral'
-                    }
-                    text={`Sisa transfer: ${formatNumber(
-                      totalAvailableChickenForTransfer,
-                      'en-US'
-                    )} ekor`}
-                    className={{
-                      badge: 'text-nowrap',
-                    }}
-                  />
                 </span>
 
                 {transferToLaying?.targets.length === 0 && (
@@ -304,7 +316,7 @@ const TransferToLayingDetailModal = () => {
                 readOnly
                 errorMessage={
                   totalAvailableChickenForTransfer < 0
-                    ? `Jumlah transfer melebihi ketersediaan (${formatNumber(totalEnteredChickenForTransfer, 'en-US')} ayam)`
+                    ? `Jumlah transfer melebihi ketersediaan (${formatNumber(maxSourceQuantity, 'en-US')} ayam)`
                     : ''
                 }
               />

src/components/pages/production/transfer-to-laying/TransferToLayingFormModal.tsx

@@ -822,13 +822,35 @@ const TransferToLayingFormModal = () => {
 
                 {/* Source Kandang */}
                 <div className='flex flex-col'>
-                  <span className='w-full py-2 text-xs font-semibold'>
+                  <span className='w-fit py-2 text-xs font-semibold flex flex-row items-center gap-3'>
+                    <span className='text-nowrap'>
                       Kandang Asal{' '}
-                    <span className='tooltip tooltip-error' data-tip='required'>
+                      <span
+                        className='tooltip tooltip-error'
+                        data-tip='required'
+                      >
                         <span className='text-error'> *</span>
                       </span>
                     </span>
 
+                    <div className='w-px h-5 bg-base-content/10' />
+
+                    <StatusBadge
+                      color={
+                        totalAvailableChickenForTransfer < 0
+                          ? 'error'
+                          : 'neutral'
+                      }
+                      text={`Sisa ayam: ${formatNumber(
+                        totalAvailableChickenForTransfer,
+                        'en-US'
+                      )} ekor`}
+                      className={{
+                        badge: 'text-nowrap',
+                      }}
+                    />
+                  </span>
+
                   {formik.values.flockSourceKandangs.length === 0 && (
                     <span className='text-sm text-base-content/50 italic'>
                       Belum ada kandang asal yang dipilih
@@ -906,23 +928,6 @@ const TransferToLayingFormModal = () => {
                         <span className='text-error'> *</span>
                       </span>
                     </span>
-
-                    <div className='w-px h-5 bg-base-content/10' />
-
-                    <StatusBadge
-                      color={
-                        totalAvailableChickenForTransfer < 0
-                          ? 'error'
-                          : 'neutral'
-                      }
-                      text={`Sisa transfer: ${formatNumber(
-                        totalAvailableChickenForTransfer,
-                        'en-US'
-                      )} ekor`}
-                      className={{
-                        badge: 'text-nowrap',
-                      }}
-                    />
                   </span>
 
                   {formik.values.flockDestinationKandangs.length === 0 && (