Merge branch 'development' into fix/project-flock

src/components/helper/StatusBadge.tsx

@@ -28,6 +28,7 @@ const StatusBadge = ({
             'bg-error/20': color === 'error',
             'bg-primary/20': color === 'info',
             'bg-[#FF9A20]/12': color === 'warning',
+            'bg-[#1166EF]/12': color === 'primary',
           },
           className?.badge
         ),
@@ -45,6 +46,7 @@ const StatusBadge = ({
           'text-error': color === 'error',
           'text-primary': color === 'info',
           'text-[#FF9A20]': color === 'warning',
+          'text-[#1166EF]': color === 'primary',
         })}
       >
         <circle r='6' cx='6' cy='6' fill='currentColor' />

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,17 +172,24 @@ 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', {
+          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
@@ -218,17 +233,13 @@ const ConfirmationModal = ({
                   ? primaryButton?.isLoading
                   : isPrimaryButtonLoading
               }
-                className={cn(
+              className={cn('p-2 rounded-xl text-sm', primaryButton?.className)}
-                  'p-2 rounded-xl text-sm',
-                  primaryButton?.className
-                )}
             >
               {primaryButton?.text ?? 'Ya'}
             </Button>
           )}
         </div>
       )}
-      </div>
     </Modal>
   );
 };

src/components/pages/closing/ClosingIncomingSapronaksTable.tsx

@@ -48,10 +48,7 @@ const ClosingIncomingSapronaksTable = ({
   const { data: incomingSapronaks, isLoading: isLoadingIncomingSapronaks } =
     useSWR(
       `${ClosingApi.basePath}/${projectFlockId}/sapronak${getTableFilterQueryString()}&type=incoming&kandang_id=${kandangId ? `${kandangId}` : ''}`,
-      ClosingApi.getAllIncomingSapronakFetcher,
+      ClosingApi.getAllIncomingSapronakFetcher
-      {
-        keepPreviousData: true,
-      }
     );
 
   const [open, setOpen] = useState(true);

src/components/pages/closing/ClosingOutgoingSapronaksTable.tsx

@@ -48,10 +48,7 @@ const ClosingOutgoingSapronaksTable = ({
   const { data: outgoingSapronaks, isLoading: isLoadingOutgoingSapronaks } =
     useSWR(
       `${ClosingApi.basePath}/${projectFlockId}/sapronak${getTableFilterQueryString()}&type=outgoing&kandang_id=${kandangId ? `${kandangId}` : ''}`,
-      ClosingApi.getAllOutgoingSapronakFetcher,
+      ClosingApi.getAllOutgoingSapronakFetcher
-      {
-        keepPreviousData: true,
-      }
     );
 
   const [open, setOpen] = useState(true);

src/components/pages/closing/ClosingOverheadTable.tsx

@@ -250,29 +250,29 @@ const ClosingOverheadTable = ({
               body: 'p-4 shadow-button-soft border border-base-content/10 rounded-lg',
             }}
           >
-            <div className='flex flex-row gap-4 w-full justify-center items-stretch'>
+            <div className='flex flex-row gap-3 w-full justify-center items-stretch'>
               <div className='flex flex-row items-center justify-between'>
                 <h2 className='text-base font-bold'>Pembelian Kandang </h2>
               </div>
               <div className='flex flex-col items-center justify-center'>
                 <Icon icon='heroicons:equals' className='inline' />
               </div>
-              <div className='flex flex-col flex-1'>
+              <div className='flex flex-col flex-1 gap-1.5'>
-                <div className='flex flex-row items-center justify-center font-medium'>
+                <div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
                   Populasi Akhir KANDANG{' '}
                   <Icon icon='heroicons:x-mark' className='inline' /> Pemakaian
                   Di FARM
                 </div>
-                <hr className='w-full h-1' />
+                <hr className='w-full h-fit m-0 p-0 text-base-content/65' />
-                <div className='flex flex-row items-center justify-center font-medium'>
+                <div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
                   Populasi Akhir Proyek
                 </div>
               </div>
               <div className='flex flex-col items-center justify-center'>
                 <Icon icon='heroicons:equals' className='inline' />
               </div>
-              <div className='flex flex-col flex-1'>
+              <div className='flex flex-col flex-1 gap-1.5'>
-                <div className='flex flex-row items-center justify-center font-medium'>
+                <div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
                   {formatNumber(chickinPopulation ?? 0)}
                   <Icon icon='heroicons:x-mark' className='inline' />
                   {formatCurrency(
@@ -281,8 +281,8 @@ const ClosingOverheadTable = ({
                       : 0
                   )}
                 </div>
-                <hr className='w-full h-1' />
+                <hr className='w-full h-fit m-0 p-0 text-base-content/65' />
-                <div className='flex flex-row items-center justify-center font-medium'>
+                <div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
                   {formatNumber(generalInformation?.population ?? 0)}
                 </div>
               </div>

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',
@@ -659,23 +659,29 @@ const DashboardLineChart = ({
                 seriesData = comparisonChart?.series || [];
               }
 
-              return seriesData
+              return seriesData.map((series, originalIndex) => {
-                .filter((series) => visibleSeries.has(series.id))
+                // Skip rendering if series is not visible
-                .map((series, index) => {
+                if (!visibleSeries.has(series.id)) {
+                  return null;
+                }
+
                 const isStandard = series.id
                   .toString()
                   .toLowerCase()
                   .includes('std');
-                  // Use series.id directly as dataKey to match dataset fields
                 const dataKey = series.id.toString();
 
                 return (
                   <Line
-                      key={`${series.id}--${index}`}
+                    key={`${series.id}--${originalIndex}`}
                     type='monotone'
                     dataKey={dataKey}
                     name={series.label}
-                      stroke={getLineColor(series.id, index, analysisMode)}
+                    stroke={getLineColor(
+                      series.id,
+                      originalIndex,
+                      analysisMode
+                    )}
                     opacity={isStandard ? 0.5 : 1}
                     strokeWidth={2}
                     strokeDasharray={isStandard ? '5 5' : undefined}
@@ -687,7 +693,7 @@ const DashboardLineChart = ({
                             fill: '#fff',
                             stroke: getLineColor(
                               series.id,
-                                index,
+                              originalIndex,
                               analysisMode
                             ),
                             strokeWidth: 2,

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',

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:
+  let expenseStatusBadgeColor: Color = 'neutral';
-    | 'yellow'
-    | 'green'
-    | 'gray'
-    | 'red'
-    | 'purple'
-    | 'blue' = 'gray';
 
   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
+    <StatusBadge
-      content={isLatestApprovalRejected ? 'Ditolak' : approval?.step_name}
+      color={expenseStatusBadgeColor}
-      color={expenseStatusPillBadgeColor}
+      text={isLatestApprovalRejected ? 'Ditolak' : (approval?.step_name ?? '')}
-      className='text-xs'
+      className={{
+        badge: 'w-fit',
+      }}
     />
   );
 };

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} />
+                    <Icon icon='heroicons:plus' width={20} height={20} />
-                    Tambah
+                    Add Expense
                   </Button>
                 </RequirePermission>
 

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:
+  let realizationStatusBadgeColor: Color = isExpenseRealized
-    | 'yellow'
+    ? 'success'
-    | 'green'
+    : 'warning';
-    | 'gray'
-    | 'red'
-    | 'purple'
-    | 'blue' = isExpenseRealized ? 'green' : 'yellow';
 
   if (isLatestApprovalRejected) {
-    realizationStatusPillBadgeColor = 'red';
+    realizationStatusBadgeColor = 'error';
   }
 
   return (
-    <PillBadge
+    <StatusBadge
-      content={isLatestApprovalRejected ? 'Ditolak' : realizationStatus}
+      color={realizationStatusBadgeColor}
-      color={realizationStatusPillBadgeColor}
+      text={isLatestApprovalRejected ? 'Ditolak' : realizationStatus}
-      className='text-xs'
+      className={{
+        badge: 'w-fit',
+      }}
     />
   );
 };

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} />
+                  <Icon icon='heroicons:plus' width={20} height={20} />
-                  Tambah
+                  Add Movement
                 </Button>
               </RequirePermission>
             </div>

src/components/pages/master-data/production-standard/form/ProductionStandardForm.schema.ts

@@ -32,7 +32,7 @@ const GrowingRepeaterFormSchema = Yup.object({
     target_hen_house_production: Yup.number().optional(),
     target_egg_weight: Yup.number().optional(),
     target_egg_mass: Yup.number().optional(),
-    standard_fcr: Yup.number().optional(),
+    standard_fcr: Yup.number().required('Wajib diisi!'),
   }).optional(),
 });
 

src/components/pages/master-data/production-standard/form/ProductionStandardForm.tsx

@@ -386,14 +386,6 @@ const ProductionStandardForm = ({
                 `${row.original.production_standard_details?.target_egg_mass} kg`,
               enableSorting: false,
             },
-            {
-              header: 'FCR',
-              accessorFn: (row) =>
-                row.production_standard_details?.standard_fcr,
-              cell: ({ row }) =>
-                `${row.original.production_standard_details?.standard_fcr} g`,
-              enableSorting: false,
-            },
           ]
         : [];
 
@@ -468,6 +460,13 @@ const ProductionStandardForm = ({
     return [
       ...baseColumns,
       ...productionColumns,
+      {
+        header: 'FCR',
+        accessorFn: (row) => row.production_standard_details?.standard_fcr,
+        cell: ({ row }) =>
+          `${row.original.production_standard_details?.standard_fcr} g`,
+        enableSorting: false,
+      },
       ...uniformityColumns,
       ...(formType !== 'detail' ? [actionColumn] : []),
     ];
@@ -753,24 +752,46 @@ const ProductionStandardForm = ({
         e.preventDefault();
 
         // For GROWING category, clear production_standard_details errors and set default values
+        // but preserve standard_fcr since it's used for both LAYING and GROWING
         if (formik.values.project_category === 'GROWING') {
-          // Set default values for production_standard_details
+          // Set default values for production_standard_details, preserving standard_fcr
           formik.values.details?.forEach((detail) => {
             detail.production_standard_details = {
               target_hen_day_production: 0,
               target_hen_house_production: 0,
               target_egg_weight: 0,
               target_egg_mass: 0,
-              standard_fcr: 0,
+              standard_fcr:
+                detail.production_standard_details?.standard_fcr || 0,
             };
           });
 
-          // Clear any errors related to production_standard_details
+          // Clear errors only for LAYING-specific fields in production_standard_details
+          // Preserve standard_fcr error since it's required for both categories
           const currentErrors = { ...formik.errors };
           if (currentErrors.details && Array.isArray(currentErrors.details)) {
             const cleanedDetails = currentErrors.details
               .map((detailError) => {
                 if (detailError && typeof detailError === 'object') {
+                  const prodDetails = (
+                    detailError as {
+                      production_standard_details?: ProductionDetailsErrors;
+                    }
+                  ).production_standard_details;
+
+                  // If there's standard_fcr error, preserve it
+                  if (prodDetails && prodDetails.standard_fcr) {
+                    const { production_standard_details, ...rest } =
+                      detailError;
+                    return {
+                      ...rest,
+                      production_standard_details: {
+                        standard_fcr: prodDetails.standard_fcr,
+                      },
+                    };
+                  }
+
+                  // Otherwise, remove entire production_standard_details errors
                   const { production_standard_details, ...rest } = detailError;
                   return Object.keys(rest).length > 0 ? rest : undefined;
                 }
@@ -896,7 +917,7 @@ const ProductionStandardForm = ({
                           gridTemplateColumns:
                             formik.values.project_category === 'LAYING'
                               ? 'repeat(10, minmax(auto, 1fr)) minmax(auto, auto)'
-                              : 'repeat(4, minmax(auto, 1fr)) minmax(auto, auto)',
+                              : 'repeat(5, minmax(auto, 1fr)) minmax(auto, auto)',
                         }}
                       >
                         <NumberInput
@@ -1042,20 +1063,21 @@ const ProductionStandardForm = ({
                                 )
                               }
                             />
+                          </>
+                        )}
                         <NumberInput
                           name='production_standard_details.standard_fcr'
                           label='FCR'
                           placeholder='1'
                           value={
-                                repeaterFormik.values
+                            repeaterFormik.values.production_standard_details
-                                  .production_standard_details?.standard_fcr
+                              ?.standard_fcr
                           }
                           onChange={repeaterFormik.handleChange}
                           onBlur={repeaterFormik.handleBlur}
                           bottomLabel='Gram (g)'
                           errorMessage={getProductionDetailsError(
-                                repeaterFormik.errors
+                            repeaterFormik.errors.production_standard_details,
-                                  .production_standard_details,
                             'standard_fcr'
                           )}
                           isError={
@@ -1073,8 +1095,6 @@ const ProductionStandardForm = ({
                             )
                           }
                         />
-                          </>
-                        )}
                         <NumberInput
                           name='production_standard_uniformity_details.target_mean_bw'
                           label='Mean BW'

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} />
+                <Icon icon='heroicons:plus' width={20} height={20} />
-                Tambah
+                Add Recording
               </Button>
             </RequirePermission>
 

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

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

@@ -99,6 +99,7 @@ const TransferToLayingFormModal = () => {
     {
       category: 'GROWING',
       transfer_context: 'transfer_to_laying',
+      is_approved: 'true',
     }
   );
 
@@ -116,6 +117,7 @@ const TransferToLayingFormModal = () => {
     'search',
     {
       category: 'LAYING',
+      is_approved: 'true',
     }
   );
 

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={{
@@ -1129,15 +1131,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>
 
@@ -1145,8 +1144,13 @@ const UniformityTable = () => {
         ref={bulkApproveModal.ref}
         type='success'
         iconPosition='left'
+        closeOnBackdrop={true}
         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 +1165,12 @@ const UniformityTable = () => {
         }}
       >
         <div className='flex flex-col gap-4'>
-          <UniformityConfirmationPreview uniformity={selectedUniformity} />
+          {selectedUniformities.map((uniformity) => (
+            <UniformityConfirmationPreview
+              key={uniformity.id}
+              uniformity={uniformity}
+            />
+          ))}
         </div>
       </ConfirmationModal>
 
@@ -1169,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={{
@@ -1185,15 +1195,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>
 
@@ -1201,8 +1208,13 @@ const UniformityTable = () => {
         ref={bulkRejectModal.ref}
         type='error'
         iconPosition='left'
+        closeOnBackdrop={true}
         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 +1229,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>
 

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} />
+                  <Icon icon='heroicons:plus' width={20} height={20} />
-                  Tambah
+                  Add Purchase
                 </Button>
               </RequirePermission>
             </div>

src/components/pages/report/finance/tab/DebtSupplierTab.tsx

@@ -36,7 +36,6 @@ import SelectInputRadio from '@/components/input/SelectInputRadio';
 import { useFinanceTabStore } from '@/stores/finance-tab/finance-tab.store';
 import StatusBadge from '@/components/helper/StatusBadge';
 import DebtSupplierSkeleton from '@/components/pages/report/finance/skeleton/DebtSupplierSkeleton';
-import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
 
 const dueStatus: Record<string, Color> = {
   'Sudah Jatuh Tempo': 'error',
@@ -60,7 +59,15 @@ const getPillBadge = (
       ? dueStatus[statusText] || 'neutral'
       : paymentStatus[statusText] || 'neutral';
 
-  return <StatusBadge color={color as Color} text={statusText} />;
+  return (
+    <StatusBadge
+      color={color as Color}
+      text={statusText}
+      className={{
+        badge: 'w-fit',
+      }}
+    />
+  );
 };
 
 interface DebtSupplierTabProps {
@@ -466,7 +473,9 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
       footer: () => {
         const value = supplier?.total.total_price;
         return (
-          <div className={`text-right ${value || 0 < 0 ? 'text-red-500' : ''}`}>
+          <div
+            className={`text-right ${value && value < 0 ? 'text-red-500' : ''}`}
+          >
             {formatCurrency(value || 0)}
           </div>
         );
@@ -488,7 +497,9 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
       footer: () => {
         const value = supplier?.total.payment_price;
         return (
-          <div className={`text-right ${value || 0 < 0 ? 'text-red-500' : ''}`}>
+          <div
+            className={`text-right ${value && value < 0 ? 'text-red-500' : ''}`}
+          >
             {formatCurrency(value || 0)}
           </div>
         );
@@ -510,7 +521,9 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
       footer: () => {
         const value = supplier?.total.debt_price;
         return (
-          <div className={`text-right ${value || 0 < 0 ? 'text-red-500' : ''}`}>
+          <div
+            className={`text-right ${value && value < 0 ? 'text-red-500' : ''}`}
+          >
             {formatCurrency(value || 0)}
           </div>
         );

src/components/pages/report/production-result/ProductionResultContent.tsx

@@ -242,9 +242,6 @@ const ProductionResultContent = () => {
       console.error(error);
       toast.error('Gagal melakukan export laporan hasil produksi! Coba lagi.');
     }
-    // await ProductionResultReportApi.exportProductionResultToPdf(
-    //   projectFlockKandangs
-    // );
 
     setIsLoadingExportingToPdf(false);
   };
@@ -268,7 +265,12 @@ const ProductionResultContent = () => {
         }
 
         setProjectFlockKandangs([projectFlockKandangResponse.data]);
-        setProjectFlockKandangMetadata(projectFlockKandangResponse.meta);
+        setProjectFlockKandangMetadata({
+          page: 1,
+          limit: 10,
+          total_pages: 1,
+          total_results: 1,
+        });
         setIsLoadingSearch(false);
         return;
       }