refactor(FE): Show pending stock usage and depletions in detail

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,6 +2641,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
           </Card>
 
           {/* Depletions Table */}
+          {((type as 'add' | 'edit' | 'detail') !== 'detail' ||
+            (formik.values.depletions?.length ?? 0) > 0) && (
             <Card
               title='Deplesi'
               className={{
@@ -2685,11 +2724,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             value={
                               depletionProducts.find(
                                 (product) =>
-                                product.value === depletion.product_warehouse_id
+                                  product.value ===
+                                  depletion.product_warehouse_id
                               ) || null
                             }
                             onChange={(selectedOption) => {
-                            const option = selectedOption as OptionType | null;
+                              const option =
+                                selectedOption as OptionType | null;
                               formik.setFieldValue(
                                 `depletions.${idx}.product_warehouse_id`,
                                 option?.value || 0
@@ -2802,9 +2843,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                 </div>
               )}
             </Card>
+          )}
 
           {/* Eggs Table - Only for LAYING Category */}
-          {isLayingCategory && (
+          {isLayingCategory &&
+            ((type as 'add' | 'edit' | 'detail') !== 'detail' ||
+              ((formik.values as RecordingLayingFormValues).eggs?.length ?? 0) >
+                0) && (
               <Card
                 title='Telur'
                 className={{
@@ -2821,10 +2866,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             <CheckboxInput
                               name='select-all-eggs'
                               checked={
-                              ((formik.values as RecordingLayingFormValues).eggs
+                                ((formik.values as RecordingLayingFormValues)
-                                ?.length ?? 0) === selectedEggs.length &&
+                                  .eggs?.length ?? 0) === selectedEggs.length &&
-                              ((formik.values as RecordingLayingFormValues).eggs
+                                ((formik.values as RecordingLayingFormValues)
-                                ?.length ?? 0) > 0
+                                  .eggs?.length ?? 0) > 0
                               }
                               onChange={(
                                 e: React.ChangeEvent<HTMLInputElement>
@@ -2874,7 +2919,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       {(formik.values as RecordingLayingFormValues).eggs?.map(
                         (egg, idx) => (
                           <tr key={`egg-${idx}`}>
-                          {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
+                            {(type as 'add' | 'edit' | 'detail') !==
+                              'detail' && (
                               <td className='align-middle!'>
                                 <CheckboxInput
                                   name={`egg-${idx}`}
@@ -2950,7 +2996,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 thousandSeparator=','
                                 decimalSeparator='.'
                                 isError={
-                                isRepeaterInputError('eggs', 'qty', idx).isError
+                                  isRepeaterInputError('eggs', 'qty', idx)
+                                    .isError
                                 }
                                 errorMessage={
                                   isRepeaterInputError('eggs', 'qty', idx)
@@ -2990,7 +3037,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                                 inputSuffix='Kilogram'
                               />
                             </td>
-                          {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
+                            {(type as 'add' | 'edit' | 'detail') !==
+                              'detail' && (
                               <td>
                                 <div className='flex items-center'>
                                   <Button