From 1a938b4218915c257c07b65da4f1fcf1d7af7e0c Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 3 Feb 2026 10:31:16 +0700
Subject: [PATCH 1/9] refactor(FE): Use StatusBadge instead of PillBadge

---
 .../pages/expense/ExpenseStatusBadge.tsx      | 35 +++++++++----------
 .../pages/expense/RealizationStatusBadge.tsx  | 25 +++++++------
 2 files changed, 28 insertions(+), 32 deletions(-)

diff --git a/src/components/pages/expense/ExpenseStatusBadge.tsx b/src/components/pages/expense/ExpenseStatusBadge.tsx
index a7fcb3e9..eee84224 100644
--- a/src/components/pages/expense/ExpenseStatusBadge.tsx
+++ b/src/components/pages/expense/ExpenseStatusBadge.tsx
@@ -1,6 +1,7 @@
-import PillBadge from '@/components/PillBadge';
+import StatusBadge from '@/components/helper/StatusBadge';
 
 import { BaseApproval } from '@/types/api/api-general';
+import { Color } from '@/types/theme';
 
 interface ExpenseStatusBadgeProps {
   approval?: BaseApproval;
@@ -11,49 +12,45 @@ const ExpenseStatusBadge = ({ approval }: ExpenseStatusBadgeProps) => {
 
   const latestApprovalStepNumber = approval?.step_number;
 
-  let expenseStatusPillBadgeColor:
-    | 'yellow'
-    | 'green'
-    | 'gray'
-    | 'red'
-    | 'purple'
-    | 'blue' = 'gray';
+  let expenseStatusBadgeColor: Color = 'neutral';
 
   switch (latestApprovalStepNumber) {
     case 1:
-      expenseStatusPillBadgeColor = 'gray';
+      expenseStatusBadgeColor = 'neutral';
       break;
 
     case 2:
-      expenseStatusPillBadgeColor = 'purple';
+      expenseStatusBadgeColor = 'info';
       break;
 
     case 3:
-      expenseStatusPillBadgeColor = 'blue';
+      expenseStatusBadgeColor = 'warning';
       break;
 
     case 4:
-      expenseStatusPillBadgeColor = 'yellow';
+      expenseStatusBadgeColor = 'error';
       break;
 
     case 5:
-      expenseStatusPillBadgeColor = 'green';
+      expenseStatusBadgeColor = 'success';
       break;
 
     case 6:
-      expenseStatusPillBadgeColor = 'green';
+      expenseStatusBadgeColor = 'success';
       break;
   }
 
   if (isLatestApprovalRejected) {
-    expenseStatusPillBadgeColor = 'red';
+    expenseStatusBadgeColor = 'error';
   }
 
   return (
-    <PillBadge
-      content={isLatestApprovalRejected ? 'Ditolak' : approval?.step_name}
-      color={expenseStatusPillBadgeColor}
-      className='text-xs'
+    <StatusBadge
+      color={expenseStatusBadgeColor}
+      text={isLatestApprovalRejected ? 'Ditolak' : (approval?.step_name ?? '')}
+      className={{
+        badge: 'w-fit',
+      }}
     />
   );
 };
diff --git a/src/components/pages/expense/RealizationStatusBadge.tsx b/src/components/pages/expense/RealizationStatusBadge.tsx
index 720c1d03..d04d35c3 100644
--- a/src/components/pages/expense/RealizationStatusBadge.tsx
+++ b/src/components/pages/expense/RealizationStatusBadge.tsx
@@ -1,6 +1,7 @@
-import PillBadge from '@/components/PillBadge';
+import StatusBadge from '@/components/helper/StatusBadge';
 
 import { BaseApproval } from '@/types/api/api-general';
+import { Color } from '@/types/theme';
 
 interface RealizationStatusBadgeProps {
   approval?: BaseApproval;
@@ -15,23 +16,21 @@ const RealizationStatusBadge = ({ approval }: RealizationStatusBadgeProps) => {
     ? 'Sudah Realisasi'
     : 'Belum Realisasi';
 
-  let realizationStatusPillBadgeColor:
-    | 'yellow'
-    | 'green'
-    | 'gray'
-    | 'red'
-    | 'purple'
-    | 'blue' = isExpenseRealized ? 'green' : 'yellow';
+  let realizationStatusBadgeColor: Color = isExpenseRealized
+    ? 'success'
+    : 'warning';
 
   if (isLatestApprovalRejected) {
-    realizationStatusPillBadgeColor = 'red';
+    realizationStatusBadgeColor = 'error';
   }
 
   return (
-    <PillBadge
-      content={isLatestApprovalRejected ? 'Ditolak' : realizationStatus}
-      color={realizationStatusPillBadgeColor}
-      className='text-xs'
+    <StatusBadge
+      color={realizationStatusBadgeColor}
+      text={isLatestApprovalRejected ? 'Ditolak' : realizationStatus}
+      className={{
+        badge: 'w-fit',
+      }}
     />
   );
 };

From 758a0cd9a77b0c0cfc2dc6eed6a5e712011fd711 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 3 Feb 2026 10:46:58 +0700
Subject: [PATCH 2/9] refactor(FE): Update Add button styles and labels

---
 .../pages/production/recording/RecordingTable.tsx          | 7 +++----
 src/components/pages/purchase/PurchaseTable.tsx            | 7 +++----
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/pages/production/recording/RecordingTable.tsx b/src/components/pages/production/recording/RecordingTable.tsx
index 36a4e69a..a67f44f9 100644
--- a/src/components/pages/production/recording/RecordingTable.tsx
+++ b/src/components/pages/production/recording/RecordingTable.tsx
@@ -380,12 +380,11 @@ const RecordingTable = () => {
             <RequirePermission permissions='lti.production.recording.create'>
               <Button
                 href='/production/recording/add'
-                variant='outline'
                 color='primary'
-                className='w-full sm:w-fit'
+                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
               >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
+                <Icon icon='heroicons:plus' width={20} height={20} />
+                Add Recording
               </Button>
             </RequirePermission>
 
diff --git a/src/components/pages/purchase/PurchaseTable.tsx b/src/components/pages/purchase/PurchaseTable.tsx
index d0c72dac..11543eca 100644
--- a/src/components/pages/purchase/PurchaseTable.tsx
+++ b/src/components/pages/purchase/PurchaseTable.tsx
@@ -319,12 +319,11 @@ const PurchaseTable = () => {
               <RequirePermission permissions='lti.purchase.create'>
                 <Button
                   href='/purchase/add'
-                  variant='outline'
                   color='primary'
-                  className='w-full sm:w-fit'
+                  className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
                 >
-                  <Icon icon='ic:round-plus' width={24} height={24} />
-                  Tambah
+                  <Icon icon='heroicons:plus' width={20} height={20} />
+                  Add Purchase
                 </Button>
               </RequirePermission>
             </div>

From bb83acbe81ff2873022cb80964463583a336e691 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 3 Feb 2026 11:11:28 +0700
Subject: [PATCH 3/9] refactor(FE): Render previews for multiple uniformities

---
 .../production/uniformity/UniformityTable.tsx | 52 ++++++++++---------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/components/pages/production/uniformity/UniformityTable.tsx b/src/components/pages/production/uniformity/UniformityTable.tsx
index a3530032..9bb79fa9 100644
--- a/src/components/pages/production/uniformity/UniformityTable.tsx
+++ b/src/components/pages/production/uniformity/UniformityTable.tsx
@@ -1129,15 +1129,12 @@ const UniformityTable = () => {
         }}
       >
         <div className='flex flex-col gap-4'>
-          {selectedRowIds.length === 1 ? (
+          {selectedUniformities.map((uniformity) => (
             <UniformityConfirmationPreview
-              uniformity={selectedUniformities[0]}
+              key={uniformity.id}
+              uniformity={uniformity}
             />
-          ) : (
-            <div className='text-center text-gray-500'>
-              {selectedRowIds.length} data dipilih
-            </div>
-          )}
+          ))}
         </div>
       </ConfirmationModal>
 
@@ -1146,7 +1143,11 @@ const UniformityTable = () => {
         type='success'
         iconPosition='left'
         text={`Approve This Submission?`}
-        subtitleText={`Are you sure you want to approve this submission? (${selectedRowIds.length} data)`}
+        subtitleText={
+          selectedRowIds.length === 1
+            ? 'Are you sure you want to approve this submission?'
+            : `Are you sure you want to approve these submissions? (${selectedRowIds.length} data)`
+        }
         secondaryButton={{
           text: 'Cancel',
         }}
@@ -1161,7 +1162,12 @@ const UniformityTable = () => {
         }}
       >
         <div className='flex flex-col gap-4'>
-          <UniformityConfirmationPreview uniformity={selectedUniformity} />
+          {selectedUniformities.map((uniformity) => (
+            <UniformityConfirmationPreview
+              key={uniformity.id}
+              uniformity={uniformity}
+            />
+          ))}
         </div>
       </ConfirmationModal>
 
@@ -1185,15 +1191,12 @@ const UniformityTable = () => {
         }}
       >
         <div className='flex flex-col gap-4'>
-          {selectedRowIds.length === 1 ? (
+          {selectedUniformities.map((uniformity) => (
             <UniformityConfirmationPreview
-              uniformity={selectedUniformities[0]}
+              key={uniformity.id}
+              uniformity={uniformity}
             />
-          ) : (
-            <div className='text-center text-gray-500'>
-              {selectedRowIds.length} data dipilih
-            </div>
-          )}
+          ))}
         </div>
       </ConfirmationModal>
 
@@ -1202,7 +1205,11 @@ const UniformityTable = () => {
         type='error'
         iconPosition='left'
         text={`Reject This Submission?`}
-        subtitleText={`Are you sure you want to reject this submission? (${selectedRowIds.length} data)`}
+        subtitleText={
+          selectedRowIds.length === 1
+            ? 'Are you sure you want to reject this submission?'
+            : `Are you sure you want to reject these submissions? (${selectedRowIds.length} data)`
+        }
         secondaryButton={{
           text: 'Cancel',
         }}
@@ -1217,15 +1224,12 @@ const UniformityTable = () => {
         }}
       >
         <div className='flex flex-col gap-4'>
-          {selectedRowIds.length === 1 ? (
+          {selectedUniformities.map((uniformity) => (
             <UniformityConfirmationPreview
-              uniformity={selectedUniformities[0]}
+              key={uniformity.id}
+              uniformity={uniformity}
             />
-          ) : (
-            <div className='text-center text-gray-500'>
-              {selectedRowIds.length} data dipilih
-            </div>
-          )}
+          ))}
         </div>
       </ConfirmationModal>
 

From e5d6be446a099e7e648f1f0e3bd118a0e05a17ff Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 3 Feb 2026 11:23:07 +0700
Subject: [PATCH 4/9] refactor(FE): Enable closing modals on backdrop click

---
 .../pages/production/uniformity/UniformityTable.tsx        | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/pages/production/uniformity/UniformityTable.tsx b/src/components/pages/production/uniformity/UniformityTable.tsx
index 9bb79fa9..39112b47 100644
--- a/src/components/pages/production/uniformity/UniformityTable.tsx
+++ b/src/components/pages/production/uniformity/UniformityTable.tsx
@@ -1058,7 +1058,7 @@ const UniformityTable = () => {
         iconPosition='left'
         text='Data Berhasil Ditambahkan'
         subtitleText='Data uniformity telah berhasil disimpan.'
-        closeOnBackdrop={false}
+        closeOnBackdrop={true}
         primaryButton={{
           text: 'Ok',
           color: 'primary',
@@ -1089,6 +1089,7 @@ const UniformityTable = () => {
         ref={singleDeleteModal.ref}
         type='error'
         iconPosition='left'
+        closeOnBackdrop={true}
         text={`Delete This Data?`}
         subtitleText='Are you sure you want to delete this data?'
         secondaryButton={{
@@ -1113,6 +1114,7 @@ const UniformityTable = () => {
         ref={singleApproveModal.ref}
         type='success'
         iconPosition='left'
+        closeOnBackdrop={true}
         text='Approve This Submission?'
         subtitleText='Are you sure you want to approve this submission?'
         secondaryButton={{
@@ -1142,6 +1144,7 @@ const UniformityTable = () => {
         ref={bulkApproveModal.ref}
         type='success'
         iconPosition='left'
+        closeOnBackdrop={true}
         text={`Approve This Submission?`}
         subtitleText={
           selectedRowIds.length === 1
@@ -1175,6 +1178,7 @@ const UniformityTable = () => {
         ref={singleRejectModal.ref}
         type='error'
         iconPosition='left'
+        closeOnBackdrop={true}
         text='Reject This Submission?'
         subtitleText='Are you sure you want to reject this submission?'
         secondaryButton={{
@@ -1204,6 +1208,7 @@ const UniformityTable = () => {
         ref={bulkRejectModal.ref}
         type='error'
         iconPosition='left'
+        closeOnBackdrop={true}
         text={`Reject This Submission?`}
         subtitleText={
           selectedRowIds.length === 1

From 12c7e566048e03aacd03ec1e7e9a9fee4a327dcb Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Tue, 3 Feb 2026 11:45:33 +0700
Subject: [PATCH 5/9] fix(FE): fixing line chart dashboard

---
 src/components/pages/dashboard/chart/DashboardLineChart.tsx     | 2 +-
 src/components/pages/dashboard/export/DashboardExportCharts.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/dashboard/chart/DashboardLineChart.tsx b/src/components/pages/dashboard/chart/DashboardLineChart.tsx
index 58749cf2..7b8d35a1 100644
--- a/src/components/pages/dashboard/chart/DashboardLineChart.tsx
+++ b/src/components/pages/dashboard/chart/DashboardLineChart.tsx
@@ -67,7 +67,7 @@ const lineColors: Record<string, string> = {
   act_fcr: '#10B981',
   std_fcr: '#10B981',
   act_fcr_cum: '#F52419',
-  std_fcr_cum: '#10B981',
+  std_fcr_cum: '#F52419',
   normal: '#10B981',
   abnormal: '#F52419',
   act_deplesi: '#10B981',
diff --git a/src/components/pages/dashboard/export/DashboardExportCharts.tsx b/src/components/pages/dashboard/export/DashboardExportCharts.tsx
index ba0b2fe2..3281dbf8 100644
--- a/src/components/pages/dashboard/export/DashboardExportCharts.tsx
+++ b/src/components/pages/dashboard/export/DashboardExportCharts.tsx
@@ -66,7 +66,7 @@ const lineColors: Record<string, string> = {
   act_fcr: '#10B981',
   std_fcr: '#10B981',
   act_fcr_cum: '#F52419',
-  std_fcr_cum: '#10B981',
+  std_fcr_cum: '#F52419',
   normal: '#10B981',
   abnormal: '#F52419',
   act_deplesi: '#10B981',

From 489e8a31f39b68b77a5947031f9bc02393cad0fc Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 3 Feb 2026 11:46:45 +0700
Subject: [PATCH 6/9] refactor(FE): Make ConfirmationModal body scrollable and
 sticky

---
 src/components/modal/ConfirmationModal.tsx | 129 +++++++++++----------
 1 file changed, 70 insertions(+), 59 deletions(-)

diff --git a/src/components/modal/ConfirmationModal.tsx b/src/components/modal/ConfirmationModal.tsx
index 89b8fbd9..6c9255e0 100644
--- a/src/components/modal/ConfirmationModal.tsx
+++ b/src/components/modal/ConfirmationModal.tsx
@@ -122,10 +122,18 @@ const ConfirmationModal = ({
       closeOnBackdrop={closeOnBackdrop}
       className={{
         ...className,
-        modalBox: cn('rounded-xl p-4', className?.modalBox),
+        modalBox: cn(
+          'rounded-xl p-4 flex flex-col gap-4 max-h-[90vh]',
+          className?.modalBox
+        ),
       }}
     >
-      <div className='w-full flex flex-col gap-4'>
+      <div
+        className={cn(
+          'flex flex-col gap-4',
+          children && 'sticky top-0 bg-inherit z-10'
+        )}
+      >
         {iconPosition === 'center' ? (
           <>
             <div className='w-fit mx-auto'>
@@ -164,71 +172,74 @@ const ConfirmationModal = ({
             </div>
           </div>
         )}
+      </div>
 
-        {children && <div className='w-full'>{children}</div>}
+      {children && (
+        <div className='w-full flex-1 overflow-y-auto'>{children}</div>
+      )}
 
-        {(secondaryButton || primaryButton) && (
-          <div
-            className={cn('w-full grid gap-3', {
+      {(secondaryButton || primaryButton) && (
+        <div
+          className={cn(
+            'w-full grid gap-3',
+            children && 'sticky bottom-0 bg-inherit z-10',
+            {
               'grid-cols-2': secondaryButton && primaryButton,
               'grid-cols-1':
                 (secondaryButton && !primaryButton) ||
                 (!secondaryButton && primaryButton),
-            })}
-          >
-            {secondaryButton && secondaryButton.text && (
-              <Button
-                {...secondaryButton}
-                variant='outline'
-                color={secondaryButton?.color}
-                isLoading={secondaryButton?.isLoading}
-                disabled={
-                  secondaryButton?.isLoading !== undefined
-                    ? secondaryButton?.isLoading
-                    : isPrimaryButtonLoading
+            }
+          )}
+        >
+          {secondaryButton && secondaryButton.text && (
+            <Button
+              {...secondaryButton}
+              variant='outline'
+              color={secondaryButton?.color}
+              isLoading={secondaryButton?.isLoading}
+              disabled={
+                secondaryButton?.isLoading !== undefined
+                  ? secondaryButton?.isLoading
+                  : isPrimaryButtonLoading
+              }
+              onClick={(e) => {
+                if (secondaryButton?.onClick) {
+                  secondaryButton.onClick(e);
+                } else {
+                  closeModalHandler();
                 }
-                onClick={(e) => {
-                  if (secondaryButton?.onClick) {
-                    secondaryButton.onClick(e);
-                  } else {
-                    closeModalHandler();
-                  }
-                }}
-                className={cn(
-                  'p-2 rounded-xl text-sm',
-                  secondaryButton?.className
-                )}
-              >
-                {secondaryButton?.text ?? 'Tidak'}
-              </Button>
-            )}
+              }}
+              className={cn(
+                'p-2 rounded-xl text-sm',
+                secondaryButton?.className
+              )}
+            >
+              {secondaryButton?.text ?? 'Tidak'}
+            </Button>
+          )}
 
-            {primaryButton && primaryButton.text && (
-              <Button
-                {...primaryButton}
-                color={primaryButton?.color ?? 'info'}
-                onClick={primaryButtonClickHandler}
-                isLoading={
-                  primaryButton?.isLoading !== undefined
-                    ? primaryButton?.isLoading
-                    : isPrimaryButtonLoading
-                }
-                disabled={
-                  primaryButton?.isLoading !== undefined
-                    ? primaryButton?.isLoading
-                    : isPrimaryButtonLoading
-                }
-                className={cn(
-                  'p-2 rounded-xl text-sm',
-                  primaryButton?.className
-                )}
-              >
-                {primaryButton?.text ?? 'Ya'}
-              </Button>
-            )}
-          </div>
-        )}
-      </div>
+          {primaryButton && primaryButton.text && (
+            <Button
+              {...primaryButton}
+              color={primaryButton?.color ?? 'info'}
+              onClick={primaryButtonClickHandler}
+              isLoading={
+                primaryButton?.isLoading !== undefined
+                  ? primaryButton?.isLoading
+                  : isPrimaryButtonLoading
+              }
+              disabled={
+                primaryButton?.isLoading !== undefined
+                  ? primaryButton?.isLoading
+                  : isPrimaryButtonLoading
+              }
+              className={cn('p-2 rounded-xl text-sm', primaryButton?.className)}
+            >
+              {primaryButton?.text ?? 'Ya'}
+            </Button>
+          )}
+        </div>
+      )}
     </Modal>
   );
 };

From 43afd35e54b9ce8ad60205f45b90d1f482e378a0 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 3 Feb 2026 11:56:25 +0700
Subject: [PATCH 7/9] refactor(FE): Update add buttons styling and labels

---
 src/components/pages/expense/ExpensesTable.tsx            | 7 +++----
 src/components/pages/inventory/movement/MovementTable.tsx | 7 +++----
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/pages/expense/ExpensesTable.tsx b/src/components/pages/expense/ExpensesTable.tsx
index d2d4754c..6d992e30 100644
--- a/src/components/pages/expense/ExpensesTable.tsx
+++ b/src/components/pages/expense/ExpensesTable.tsx
@@ -596,12 +596,11 @@ const ExpensesTable = () => {
                 <RequirePermission permissions='lti.expense.create'>
                   <Button
                     href='/expense/add'
-                    variant='outline'
                     color='primary'
-                    className='w-full sm:w-fit'
+                    className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
                   >
-                    <Icon icon='ic:round-plus' width={24} height={24} />
-                    Tambah
+                    <Icon icon='heroicons:plus' width={20} height={20} />
+                    Add Expense
                   </Button>
                 </RequirePermission>
 
diff --git a/src/components/pages/inventory/movement/MovementTable.tsx b/src/components/pages/inventory/movement/MovementTable.tsx
index 4a155c1c..c0d51a50 100644
--- a/src/components/pages/inventory/movement/MovementTable.tsx
+++ b/src/components/pages/inventory/movement/MovementTable.tsx
@@ -151,12 +151,11 @@ const MovementTable = () => {
               <RequirePermission permissions='lti.inventory.transfer.create'>
                 <Button
                   href='/inventory/movement/add'
-                  variant='outline'
                   color='primary'
-                  className='w-full sm:w-fit'
+                  className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
                 >
-                  <Icon icon='ic:round-plus' width={24} height={24} />
-                  Tambah
+                  <Icon icon='heroicons:plus' width={20} height={20} />
+                  Add Movement
                 </Button>
               </RequirePermission>
             </div>

From 0febc9d8f31b30529c6f19f77a686778eaa3a466 Mon Sep 17 00:00:00 2001
From: randy-ar <randyabdulrahman87@gmail.com>
Date: Tue, 3 Feb 2026 12:41:22 +0700
Subject: [PATCH 8/9] fix(FE): fixing line chart dashboard comparison

---
 .../dashboard/chart/DashboardLineChart.tsx    | 80 ++++++++++---------
 1 file changed, 43 insertions(+), 37 deletions(-)

diff --git a/src/components/pages/dashboard/chart/DashboardLineChart.tsx b/src/components/pages/dashboard/chart/DashboardLineChart.tsx
index 7b8d35a1..bfb13d9a 100644
--- a/src/components/pages/dashboard/chart/DashboardLineChart.tsx
+++ b/src/components/pages/dashboard/chart/DashboardLineChart.tsx
@@ -659,44 +659,50 @@ const DashboardLineChart = ({
                 seriesData = comparisonChart?.series || [];
               }
 
-              return seriesData
-                .filter((series) => visibleSeries.has(series.id))
-                .map((series, index) => {
-                  const isStandard = series.id
-                    .toString()
-                    .toLowerCase()
-                    .includes('std');
-                  // Use series.id directly as dataKey to match dataset fields
-                  const dataKey = series.id.toString();
+              return seriesData.map((series, originalIndex) => {
+                // Skip rendering if series is not visible
+                if (!visibleSeries.has(series.id)) {
+                  return null;
+                }
 
-                  return (
-                    <Line
-                      key={`${series.id}--${index}`}
-                      type='monotone'
-                      dataKey={dataKey}
-                      name={series.label}
-                      stroke={getLineColor(series.id, index, analysisMode)}
-                      opacity={isStandard ? 0.5 : 1}
-                      strokeWidth={2}
-                      strokeDasharray={isStandard ? '5 5' : undefined}
-                      dot={
-                        isStandard
-                          ? false
-                          : {
-                              r: 3,
-                              fill: '#fff',
-                              stroke: getLineColor(
-                                series.id,
-                                index,
-                                analysisMode
-                              ),
-                              strokeWidth: 2,
-                            }
-                      }
-                      activeDot={isStandard ? undefined : { r: 5 }}
-                    />
-                  );
-                });
+                const isStandard = series.id
+                  .toString()
+                  .toLowerCase()
+                  .includes('std');
+                const dataKey = series.id.toString();
+
+                return (
+                  <Line
+                    key={`${series.id}--${originalIndex}`}
+                    type='monotone'
+                    dataKey={dataKey}
+                    name={series.label}
+                    stroke={getLineColor(
+                      series.id,
+                      originalIndex,
+                      analysisMode
+                    )}
+                    opacity={isStandard ? 0.5 : 1}
+                    strokeWidth={2}
+                    strokeDasharray={isStandard ? '5 5' : undefined}
+                    dot={
+                      isStandard
+                        ? false
+                        : {
+                            r: 3,
+                            fill: '#fff',
+                            stroke: getLineColor(
+                              series.id,
+                              originalIndex,
+                              analysisMode
+                            ),
+                            strokeWidth: 2,
+                          }
+                    }
+                    activeDot={isStandard ? undefined : { r: 5 }}
+                  />
+                );
+              });
             })()}
           </LineChart>
         </ResponsiveContainer>

From f31eb8db59f0b47b2dc7c358a3cb46fc50246f0b Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Tue, 3 Feb 2026 14:20:32 +0700
Subject: [PATCH 9/9] refactor(FE): Show pending stock usage and depletions in
 detail

---
 .../recording/form/RecordingForm.tsx          | 794 ++++++++++--------
 1 file changed, 421 insertions(+), 373 deletions(-)

diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 94f078c1..b8b6b1fc 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -48,6 +48,7 @@ import {
   UpdateLayingRecordingPayload,
   Recording,
   NextDayRecording,
+  RecordingStock,
 } from '@/types/api/production/recording';
 import { type BaseApiResponse } from '@/types/api/api-general';
 import {
@@ -1103,14 +1104,51 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     [formik.values.stocks, type]
   );
 
+  const getStockPendingInfo = useCallback(
+    (productWarehouseId: number) => {
+      if ((type === 'edit' || type === 'detail') && initialValues?.stocks) {
+        const existingStock = initialValues.stocks.find(
+          (s) => s.product_warehouse_id === productWarehouseId
+        ) as RecordingStock | undefined;
+        if (existingStock) {
+          return {
+            usageAmount: existingStock.usage_amount ?? 0,
+            pendingQty: existingStock.pending_qty ?? 0,
+          };
+        }
+      }
+      return {
+        usageAmount: 0,
+        pendingQty: 0,
+      };
+    },
+    [initialValues, type]
+  );
+
   const getStockUsageAdornment = useCallback(
     (stockIdx: number) => {
-      if ((type as 'add' | 'edit' | 'detail') === 'detail') return null;
       const stock = formik.values.stocks?.[stockIdx];
       if (!stock || !stock.product_warehouse_id) return null;
+
+      const isDetail = (type as 'add' | 'edit' | 'detail') === 'detail';
       const availableStock = getAvailableStock(stock.product_warehouse_id);
       const requestedUsage = Number(stock.qty) || 0;
       const remainingStock = availableStock - requestedUsage;
+      const { pendingQty } = getStockPendingInfo(stock.product_warehouse_id);
+
+      if (isDetail) {
+        if (pendingQty > 0) {
+          return (
+            <span className='text-sm text-gray-600 whitespace-nowrap'>
+              (tersedia: {formatNumber(requestedUsage)} | pending:{' '}
+              <span className='text-error'>{formatNumber(pendingQty)}</span> |
+              pakai: {formatNumber(requestedUsage + pendingQty)})
+            </span>
+          );
+        }
+        return null;
+      }
+
       if (requestedUsage > 0) {
         return (
           <span className='text-sm text-gray-600 whitespace-nowrap'>
@@ -1127,7 +1165,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
         </span>
       );
     },
-    [formik.values.stocks, getAvailableStock, type]
+    [formik.values.stocks, getAvailableStock, getStockPendingInfo, type]
   );
 
   const getProjectFlockBadgeAdornment = useCallback(() => {
@@ -2550,8 +2588,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 : null
                             }
                           />
-                          {(type as 'add' | 'edit' | 'detail') !== 'detail' &&
-                            getStockUsageAdornment(idx)}
+                          {getStockUsageAdornment(idx)}
                         </div>
                       </td>
                       {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
@@ -2604,209 +2641,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
           </Card>
 
           {/* Depletions Table */}
-          <Card
-            title='Deplesi'
-            className={{
-              wrapper: 'w-full mb-4 shadow',
-              title: 'mb-4',
-            }}
-          >
-            <div className='overflow-x-auto'>
-              <table className='table'>
-                <thead>
-                  <tr>
-                    {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
-                      <th>
-                        <CheckboxInput
-                          name='select-all-depletions'
-                          checked={
-                            formik.values.depletions?.length ===
-                              selectedDepletions.length &&
-                            formik.values.depletions?.length > 0
-                          }
-                          onChange={(
-                            e: React.ChangeEvent<HTMLInputElement>
-                          ) => {
-                            if (e.target.checked) {
-                              setSelectedDepletions(
-                                formik.values.depletions?.map(
-                                  (_, idx) => idx
-                                ) ?? []
-                              );
-                            } else {
-                              setSelectedDepletions([]);
-                            }
-                          }}
-                          classNames={{
-                            wrapper: 'flex justify-center',
-                            checkbox: 'checkbox checkbox-sm',
-                          }}
-                        />
-                      </th>
-                    )}
-                    <th>Kondisi</th>
-                    <th>Jumlah</th>
-                    {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
-                      <th>Action</th>
-                    )}
-                  </tr>
-                </thead>
-                <tbody>
-                  {formik.values.depletions?.map((depletion, idx) => (
-                    <tr key={`depletion-${idx}`}>
-                      {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
-                        <td className='align-middle!'>
-                          <CheckboxInput
-                            name={`depletion-${idx}`}
-                            checked={selectedDepletions.includes(idx)}
-                            onChange={(
-                              e: React.ChangeEvent<HTMLInputElement>
-                            ) => {
-                              if (e.target.checked) {
-                                setSelectedDepletions([
-                                  ...selectedDepletions,
-                                  idx,
-                                ]);
-                              } else {
-                                setSelectedDepletions(
-                                  selectedDepletions.filter((i) => i !== idx)
-                                );
-                              }
-                            }}
-                            classNames={{
-                              wrapper: 'flex justify-center',
-                              checkbox: 'checkbox checkbox-sm',
-                            }}
-                          />
-                        </td>
-                      )}
-                      <td>
-                        <SelectInput
-                          value={
-                            depletionProducts.find(
-                              (product) =>
-                                product.value === depletion.product_warehouse_id
-                            ) || null
-                          }
-                          onChange={(selectedOption) => {
-                            const option = selectedOption as OptionType | null;
-                            formik.setFieldValue(
-                              `depletions.${idx}.product_warehouse_id`,
-                              option?.value || 0
-                            );
-                          }}
-                          options={getAvailableDepletionProductOptions(idx)}
-                          placeholder='Pilih Kondisi'
-                          isLoading={isLoadingDepletionProducts}
-                          onMenuScrollToBottom={loadMoreDepletionProducts}
-                          isError={
-                            isRepeaterInputError(
-                              'depletions',
-                              'product_warehouse_id',
-                              idx
-                            ).isError
-                          }
-                          errorMessage={
-                            isRepeaterInputError(
-                              'depletions',
-                              'product_warehouse_id',
-                              idx
-                            ).errorMessage
-                          }
-                          isDisabled={type === 'detail'}
-                          className={{
-                            wrapper: 'w-full min-w-48',
-                          }}
-                          isSearchable
-                          isClearable={type !== 'detail'}
-                        />
-                      </td>
-                      <td>
-                        <NumberInput
-                          name={`depletions.${idx}.qty`}
-                          value={depletion.qty ?? ''}
-                          onChange={handleDepletionQtyChangeWrapper(idx)}
-                          onBlur={formik.handleBlur}
-                          decimalScale={0}
-                          allowNegative={false}
-                          thousandSeparator=','
-                          decimalSeparator='.'
-                          isError={
-                            isRepeaterInputError('depletions', 'qty', idx)
-                              .isError
-                          }
-                          errorMessage={
-                            isRepeaterInputError('depletions', 'qty', idx)
-                              .errorMessage
-                          }
-                          readOnly={type === 'detail'}
-                          className={{
-                            wrapper: 'w-full min-w-24',
-                          }}
-                          placeholder='Masukkan jumlah deplesi'
-                          inputSuffix={
-                            depletion.product_warehouse_id
-                              ? getProductUomSuffix(
-                                  depletion.product_warehouse_id,
-                                  'depletion'
-                                )
-                              : null
-                          }
-                        />
-                      </td>
-                      {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
-                        <td>
-                          <div className='flex items-center'>
-                            <Button
-                              type='button'
-                              color='error'
-                              onClick={() => removeDepletion(idx)}
-                            >
-                              <Icon
-                                icon='mdi:trash-can'
-                                width={24}
-                                height={24}
-                              />
-                            </Button>
-                          </div>
-                        </td>
-                      )}
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-            {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
-              <div className='flex justify-center items-center mt-4 gap-4'>
-                {selectedDepletions.length > 0 && (
-                  <Button
-                    type='button'
-                    color='error'
-                    onClick={removeSelectedDepletions}
-                    disabled={selectedDepletions.length === 0}
-                    className='w-fit'
-                  >
-                    <Icon icon='mdi:trash-can' width={24} height={24} />
-                    Hapus Terpilih ({selectedDepletions.length})
-                  </Button>
-                )}
-                <Button
-                  type='button'
-                  color='success'
-                  onClick={addDepletion}
-                  className='w-fit'
-                >
-                  <Icon icon='ic:round-plus' width={24} height={24} />
-                  Tambah Depletion
-                </Button>
-              </div>
-            )}
-          </Card>
-
-          {/* Eggs Table - Only for LAYING Category */}
-          {isLayingCategory && (
+          {((type as 'add' | 'edit' | 'detail') !== 'detail' ||
+            (formik.values.depletions?.length ?? 0) > 0) && (
             <Card
-              title='Telur'
+              title='Deplesi'
               className={{
                 wrapper: 'w-full mb-4 shadow',
                 title: 'mb-4',
@@ -2819,24 +2657,23 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
                         <th>
                           <CheckboxInput
-                            name='select-all-eggs'
+                            name='select-all-depletions'
                             checked={
-                              ((formik.values as RecordingLayingFormValues).eggs
-                                ?.length ?? 0) === selectedEggs.length &&
-                              ((formik.values as RecordingLayingFormValues).eggs
-                                ?.length ?? 0) > 0
+                              formik.values.depletions?.length ===
+                                selectedDepletions.length &&
+                              formik.values.depletions?.length > 0
                             }
                             onChange={(
                               e: React.ChangeEvent<HTMLInputElement>
                             ) => {
                               if (e.target.checked) {
-                                setSelectedEggs(
-                                  (
-                                    formik.values as RecordingLayingFormValues
-                                  ).eggs?.map((_, idx) => idx) ?? []
+                                setSelectedDepletions(
+                                  formik.values.depletions?.map(
+                                    (_, idx) => idx
+                                  ) ?? []
                                 );
                               } else {
-                                setSelectedEggs([]);
+                                setSelectedDepletions([]);
                               }
                             }}
                             classNames={{
@@ -2846,201 +2683,412 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           />
                         </th>
                       )}
-                      <th>Kondisi Telur</th>
+                      <th>Kondisi</th>
                       <th>Jumlah</th>
-                      <th className='flex items-center gap-1'>
-                        Total Berat (Kilogram)
-                        <Tooltip
-                          className={{
-                            wrapper: 'cursor-pointer',
-                          }}
-                          position='bottom'
-                          content='Untuk menggunakan koma bisa menekan tombol titik (.) pada keyboard, Misal 0.123'
-                        >
-                          <Icon
-                            icon='heroicons:information-circle'
-                            width={20}
-                            height={20}
-                            className='text-gray-400 hover:text-gray-600 shrink-0'
-                          />
-                        </Tooltip>
-                      </th>
                       {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
                         <th>Action</th>
                       )}
                     </tr>
                   </thead>
                   <tbody>
-                    {(formik.values as RecordingLayingFormValues).eggs?.map(
-                      (egg, idx) => (
-                        <tr key={`egg-${idx}`}>
-                          {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
-                            <td className='align-middle!'>
-                              <CheckboxInput
-                                name={`egg-${idx}`}
-                                checked={selectedEggs.includes(idx)}
-                                onChange={(
-                                  e: React.ChangeEvent<HTMLInputElement>
-                                ) => {
-                                  if (e.target.checked) {
-                                    setSelectedEggs([...selectedEggs, idx]);
-                                  } else {
-                                    setSelectedEggs(
-                                      selectedEggs.filter((i) => i !== idx)
-                                    );
-                                  }
-                                }}
-                                classNames={{
-                                  wrapper: 'flex justify-center',
-                                  checkbox: 'checkbox checkbox-sm',
-                                }}
-                              />
-                            </td>
-                          )}
-                          <td>
-                            <SelectInput
-                              value={
-                                eggProducts.find(
-                                  (product) =>
-                                    product.value === egg.product_warehouse_id
-                                ) || null
-                              }
-                              onChange={(selectedOption) => {
-                                const option =
-                                  selectedOption as OptionType | null;
-                                formik.setFieldValue(
-                                  `eggs.${idx}.product_warehouse_id`,
-                                  option?.value || 0
-                                );
+                    {formik.values.depletions?.map((depletion, idx) => (
+                      <tr key={`depletion-${idx}`}>
+                        {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
+                          <td className='align-middle!'>
+                            <CheckboxInput
+                              name={`depletion-${idx}`}
+                              checked={selectedDepletions.includes(idx)}
+                              onChange={(
+                                e: React.ChangeEvent<HTMLInputElement>
+                              ) => {
+                                if (e.target.checked) {
+                                  setSelectedDepletions([
+                                    ...selectedDepletions,
+                                    idx,
+                                  ]);
+                                } else {
+                                  setSelectedDepletions(
+                                    selectedDepletions.filter((i) => i !== idx)
+                                  );
+                                }
                               }}
-                              options={getAvailableEggProductOptions(idx)}
-                              placeholder='Pilih Kondisi Telur'
-                              isLoading={isLoadingEggProducts}
-                              onMenuScrollToBottom={loadMoreEggProducts}
-                              isError={
-                                isRepeaterInputError(
-                                  'eggs',
-                                  'product_warehouse_id',
-                                  idx
-                                ).isError
-                              }
-                              errorMessage={
-                                isRepeaterInputError(
-                                  'eggs',
-                                  'product_warehouse_id',
-                                  idx
-                                ).errorMessage
-                              }
-                              isDisabled={type === 'detail'}
-                              className={{
-                                wrapper: 'w-full min-w-48',
+                              classNames={{
+                                wrapper: 'flex justify-center',
+                                checkbox: 'checkbox checkbox-sm',
                               }}
-                              isSearchable
-                              isClearable={type !== 'detail'}
                             />
                           </td>
+                        )}
+                        <td>
+                          <SelectInput
+                            value={
+                              depletionProducts.find(
+                                (product) =>
+                                  product.value ===
+                                  depletion.product_warehouse_id
+                              ) || null
+                            }
+                            onChange={(selectedOption) => {
+                              const option =
+                                selectedOption as OptionType | null;
+                              formik.setFieldValue(
+                                `depletions.${idx}.product_warehouse_id`,
+                                option?.value || 0
+                              );
+                            }}
+                            options={getAvailableDepletionProductOptions(idx)}
+                            placeholder='Pilih Kondisi'
+                            isLoading={isLoadingDepletionProducts}
+                            onMenuScrollToBottom={loadMoreDepletionProducts}
+                            isError={
+                              isRepeaterInputError(
+                                'depletions',
+                                'product_warehouse_id',
+                                idx
+                              ).isError
+                            }
+                            errorMessage={
+                              isRepeaterInputError(
+                                'depletions',
+                                'product_warehouse_id',
+                                idx
+                              ).errorMessage
+                            }
+                            isDisabled={type === 'detail'}
+                            className={{
+                              wrapper: 'w-full min-w-48',
+                            }}
+                            isSearchable
+                            isClearable={type !== 'detail'}
+                          />
+                        </td>
+                        <td>
+                          <NumberInput
+                            name={`depletions.${idx}.qty`}
+                            value={depletion.qty ?? ''}
+                            onChange={handleDepletionQtyChangeWrapper(idx)}
+                            onBlur={formik.handleBlur}
+                            decimalScale={0}
+                            allowNegative={false}
+                            thousandSeparator=','
+                            decimalSeparator='.'
+                            isError={
+                              isRepeaterInputError('depletions', 'qty', idx)
+                                .isError
+                            }
+                            errorMessage={
+                              isRepeaterInputError('depletions', 'qty', idx)
+                                .errorMessage
+                            }
+                            readOnly={type === 'detail'}
+                            className={{
+                              wrapper: 'w-full min-w-24',
+                            }}
+                            placeholder='Masukkan jumlah deplesi'
+                            inputSuffix={
+                              depletion.product_warehouse_id
+                                ? getProductUomSuffix(
+                                    depletion.product_warehouse_id,
+                                    'depletion'
+                                  )
+                                : null
+                            }
+                          />
+                        </td>
+                        {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
                           <td>
-                            <NumberInput
-                              name={`eggs.${idx}.qty`}
-                              value={egg.qty ?? ''}
-                              onChange={handleEggQtyChangeWrapper(idx)}
-                              onBlur={formik.handleBlur}
-                              decimalScale={0}
-                              allowNegative={false}
-                              thousandSeparator=','
-                              decimalSeparator='.'
-                              isError={
-                                isRepeaterInputError('eggs', 'qty', idx).isError
-                              }
-                              errorMessage={
-                                isRepeaterInputError('eggs', 'qty', idx)
-                                  .errorMessage
-                              }
-                              readOnly={type === 'detail'}
-                              className={{
-                                wrapper: 'w-full min-w-24',
-                              }}
-                              placeholder='Masukkan jumlah telur'
-                              inputSuffix={'Butir'}
-                            />
+                            <div className='flex items-center'>
+                              <Button
+                                type='button'
+                                color='error'
+                                onClick={() => removeDepletion(idx)}
+                              >
+                                <Icon
+                                  icon='mdi:trash-can'
+                                  width={24}
+                                  height={24}
+                                />
+                              </Button>
+                            </div>
                           </td>
-                          <td>
-                            <NumberInput
-                              name={`eggs.${idx}.weight`}
-                              value={egg.weight ?? ''}
-                              onChange={handleEggWeightChangeWrapper(idx)}
-                              onBlur={formik.handleBlur}
-                              decimalScale={3}
-                              allowNegative={false}
-                              thousandSeparator=','
-                              decimalSeparator='.'
-                              isError={
-                                isRepeaterInputError('eggs', 'weight', idx)
-                                  .isError
-                              }
-                              errorMessage={
-                                isRepeaterInputError('eggs', 'weight', idx)
-                                  .errorMessage
-                              }
-                              readOnly={type === 'detail'}
-                              className={{
-                                wrapper: 'w-full min-w-24',
-                              }}
-                              placeholder='Masukkan total berat telur (Kilogram)...'
-                              inputSuffix='Kilogram'
-                            />
-                          </td>
-                          {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
-                            <td>
-                              <div className='flex items-center'>
-                                <Button
-                                  type='button'
-                                  color='error'
-                                  onClick={() => removeEgg(idx)}
-                                >
-                                  <Icon
-                                    icon='mdi:trash-can'
-                                    width={24}
-                                    height={24}
-                                  />
-                                </Button>
-                              </div>
-                            </td>
-                          )}
-                        </tr>
-                      )
-                    )}
+                        )}
+                      </tr>
+                    ))}
                   </tbody>
                 </table>
               </div>
               {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
                 <div className='flex justify-center items-center mt-4 gap-4'>
-                  {selectedEggs.length > 0 && (
+                  {selectedDepletions.length > 0 && (
                     <Button
                       type='button'
                       color='error'
-                      onClick={removeSelectedEggs}
-                      disabled={selectedEggs.length === 0}
+                      onClick={removeSelectedDepletions}
+                      disabled={selectedDepletions.length === 0}
                       className='w-fit'
                     >
                       <Icon icon='mdi:trash-can' width={24} height={24} />
-                      Hapus Terpilih ({selectedEggs.length})
+                      Hapus Terpilih ({selectedDepletions.length})
                     </Button>
                   )}
                   <Button
                     type='button'
                     color='success'
-                    onClick={addEgg}
+                    onClick={addDepletion}
                     className='w-fit'
                   >
                     <Icon icon='ic:round-plus' width={24} height={24} />
-                    Tambah Telur
+                    Tambah Depletion
                   </Button>
                 </div>
               )}
             </Card>
           )}
 
+          {/* Eggs Table - Only for LAYING Category */}
+          {isLayingCategory &&
+            ((type as 'add' | 'edit' | 'detail') !== 'detail' ||
+              ((formik.values as RecordingLayingFormValues).eggs?.length ?? 0) >
+                0) && (
+              <Card
+                title='Telur'
+                className={{
+                  wrapper: 'w-full mb-4 shadow',
+                  title: 'mb-4',
+                }}
+              >
+                <div className='overflow-x-auto'>
+                  <table className='table'>
+                    <thead>
+                      <tr>
+                        {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
+                          <th>
+                            <CheckboxInput
+                              name='select-all-eggs'
+                              checked={
+                                ((formik.values as RecordingLayingFormValues)
+                                  .eggs?.length ?? 0) === selectedEggs.length &&
+                                ((formik.values as RecordingLayingFormValues)
+                                  .eggs?.length ?? 0) > 0
+                              }
+                              onChange={(
+                                e: React.ChangeEvent<HTMLInputElement>
+                              ) => {
+                                if (e.target.checked) {
+                                  setSelectedEggs(
+                                    (
+                                      formik.values as RecordingLayingFormValues
+                                    ).eggs?.map((_, idx) => idx) ?? []
+                                  );
+                                } else {
+                                  setSelectedEggs([]);
+                                }
+                              }}
+                              classNames={{
+                                wrapper: 'flex justify-center',
+                                checkbox: 'checkbox checkbox-sm',
+                              }}
+                            />
+                          </th>
+                        )}
+                        <th>Kondisi Telur</th>
+                        <th>Jumlah</th>
+                        <th className='flex items-center gap-1'>
+                          Total Berat (Kilogram)
+                          <Tooltip
+                            className={{
+                              wrapper: 'cursor-pointer',
+                            }}
+                            position='bottom'
+                            content='Untuk menggunakan koma bisa menekan tombol titik (.) pada keyboard, Misal 0.123'
+                          >
+                            <Icon
+                              icon='heroicons:information-circle'
+                              width={20}
+                              height={20}
+                              className='text-gray-400 hover:text-gray-600 shrink-0'
+                            />
+                          </Tooltip>
+                        </th>
+                        {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
+                          <th>Action</th>
+                        )}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {(formik.values as RecordingLayingFormValues).eggs?.map(
+                        (egg, idx) => (
+                          <tr key={`egg-${idx}`}>
+                            {(type as 'add' | 'edit' | 'detail') !==
+                              'detail' && (
+                              <td className='align-middle!'>
+                                <CheckboxInput
+                                  name={`egg-${idx}`}
+                                  checked={selectedEggs.includes(idx)}
+                                  onChange={(
+                                    e: React.ChangeEvent<HTMLInputElement>
+                                  ) => {
+                                    if (e.target.checked) {
+                                      setSelectedEggs([...selectedEggs, idx]);
+                                    } else {
+                                      setSelectedEggs(
+                                        selectedEggs.filter((i) => i !== idx)
+                                      );
+                                    }
+                                  }}
+                                  classNames={{
+                                    wrapper: 'flex justify-center',
+                                    checkbox: 'checkbox checkbox-sm',
+                                  }}
+                                />
+                              </td>
+                            )}
+                            <td>
+                              <SelectInput
+                                value={
+                                  eggProducts.find(
+                                    (product) =>
+                                      product.value === egg.product_warehouse_id
+                                  ) || null
+                                }
+                                onChange={(selectedOption) => {
+                                  const option =
+                                    selectedOption as OptionType | null;
+                                  formik.setFieldValue(
+                                    `eggs.${idx}.product_warehouse_id`,
+                                    option?.value || 0
+                                  );
+                                }}
+                                options={getAvailableEggProductOptions(idx)}
+                                placeholder='Pilih Kondisi Telur'
+                                isLoading={isLoadingEggProducts}
+                                onMenuScrollToBottom={loadMoreEggProducts}
+                                isError={
+                                  isRepeaterInputError(
+                                    'eggs',
+                                    'product_warehouse_id',
+                                    idx
+                                  ).isError
+                                }
+                                errorMessage={
+                                  isRepeaterInputError(
+                                    'eggs',
+                                    'product_warehouse_id',
+                                    idx
+                                  ).errorMessage
+                                }
+                                isDisabled={type === 'detail'}
+                                className={{
+                                  wrapper: 'w-full min-w-48',
+                                }}
+                                isSearchable
+                                isClearable={type !== 'detail'}
+                              />
+                            </td>
+                            <td>
+                              <NumberInput
+                                name={`eggs.${idx}.qty`}
+                                value={egg.qty ?? ''}
+                                onChange={handleEggQtyChangeWrapper(idx)}
+                                onBlur={formik.handleBlur}
+                                decimalScale={0}
+                                allowNegative={false}
+                                thousandSeparator=','
+                                decimalSeparator='.'
+                                isError={
+                                  isRepeaterInputError('eggs', 'qty', idx)
+                                    .isError
+                                }
+                                errorMessage={
+                                  isRepeaterInputError('eggs', 'qty', idx)
+                                    .errorMessage
+                                }
+                                readOnly={type === 'detail'}
+                                className={{
+                                  wrapper: 'w-full min-w-24',
+                                }}
+                                placeholder='Masukkan jumlah telur'
+                                inputSuffix={'Butir'}
+                              />
+                            </td>
+                            <td>
+                              <NumberInput
+                                name={`eggs.${idx}.weight`}
+                                value={egg.weight ?? ''}
+                                onChange={handleEggWeightChangeWrapper(idx)}
+                                onBlur={formik.handleBlur}
+                                decimalScale={3}
+                                allowNegative={false}
+                                thousandSeparator=','
+                                decimalSeparator='.'
+                                isError={
+                                  isRepeaterInputError('eggs', 'weight', idx)
+                                    .isError
+                                }
+                                errorMessage={
+                                  isRepeaterInputError('eggs', 'weight', idx)
+                                    .errorMessage
+                                }
+                                readOnly={type === 'detail'}
+                                className={{
+                                  wrapper: 'w-full min-w-24',
+                                }}
+                                placeholder='Masukkan total berat telur (Kilogram)...'
+                                inputSuffix='Kilogram'
+                              />
+                            </td>
+                            {(type as 'add' | 'edit' | 'detail') !==
+                              'detail' && (
+                              <td>
+                                <div className='flex items-center'>
+                                  <Button
+                                    type='button'
+                                    color='error'
+                                    onClick={() => removeEgg(idx)}
+                                  >
+                                    <Icon
+                                      icon='mdi:trash-can'
+                                      width={24}
+                                      height={24}
+                                    />
+                                  </Button>
+                                </div>
+                              </td>
+                            )}
+                          </tr>
+                        )
+                      )}
+                    </tbody>
+                  </table>
+                </div>
+                {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
+                  <div className='flex justify-center items-center mt-4 gap-4'>
+                    {selectedEggs.length > 0 && (
+                      <Button
+                        type='button'
+                        color='error'
+                        onClick={removeSelectedEggs}
+                        disabled={selectedEggs.length === 0}
+                        className='w-fit'
+                      >
+                        <Icon icon='mdi:trash-can' width={24} height={24} />
+                        Hapus Terpilih ({selectedEggs.length})
+                      </Button>
+                    )}
+                    <Button
+                      type='button'
+                      color='success'
+                      onClick={addEgg}
+                      className='w-fit'
+                    >
+                      <Icon icon='ic:round-plus' width={24} height={24} />
+                      Tambah Telur
+                    </Button>
+                  </div>
+                )}
+              </Card>
+            )}
+
           <div className='w-full'>
             {recordingFormErrorMessage && (
               <div role='alert' className='alert alert-error'>