Merge branch 'development' into 'staging'

Development

See merge request mbugroup/lti-web-client!268

src/app/expense/page.tsx

@@ -2,7 +2,7 @@ import ExpensesTable from '@/components/pages/expense/ExpensesTable';
 
 const Expense = () => {
   return (
-    <section className='w-full p-4'>
+    <section className='w-full p-4 sm:p-0'>
       <ExpensesTable />
     </section>
   );

src/app/globals.css

@@ -30,14 +30,14 @@
   --color-base-100: oklch(100% 0 0); /* #ffffff */
   --color-base-200: oklch(97.2% 0 0); /* #f2f2f2 */
   --color-base-300: oklch(93.1% 0.002 249.7); /* #e5e6e6 */
-  --color-base-content: oklch(18.6% 0.024 257.7); /* #1f2937 */
+  --color-base-content: #18181b;
 
   /* Status/Utility Colors */
   --color-info: oklch(67.4% 0.176 238.9);
   --color-info-content: oklch(0% 0 0); /* #000000 */
   --color-success: #00d390;
   --color-success-content: oklch(100% 0 0); /* #ffffff */
-  --color-warning: oklch(82.2% 0.165 91.9);
+  --color-warning: #fcb700;
   --color-warning-content: oklch(0% 0 0); /* #000000 */
   --color-error: #ff3a3a;
   --color-error-content: oklch(100% 0 0); /* #fffffff */

src/app/inventory/movement/page.tsx

@@ -2,7 +2,7 @@ import MovementTable from '@/components/pages/inventory/movement/MovementTable';
 
 const Movement = () => {
   return (
-    <section className='w-full p-4'>
+    <section className='w-full p-4 sm:p-0'>
       <MovementTable />
     </section>
   );

src/app/production/recording/page.tsx

@@ -2,7 +2,7 @@ import RecordingTable from '@/components/pages/production/recording/RecordingTab
 
 const Recording = () => {
   return (
-    <section className='w-full p-4'>
+    <section className='w-full p-4 sm:p-0'>
       <RecordingTable />
     </section>
   );

src/app/production/transfer-to-laying/add/page.tsx

@@ -1,11 +0,0 @@
-import TransferToLayingForm from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm';
-
-const AddTransferToLaying = () => {
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      <TransferToLayingForm />
-    </div>
-  );
-};
-
-export default AddTransferToLaying;

src/app/production/transfer-to-laying/detail/edit/page.tsx

@@ -1,63 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-
-import TransferToLayingForm from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm';
-
-import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-
-const TransferToLayingEdit = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const transferToLayingId = searchParams.get('transferToLayingId');
-
-  const { data: transferToLaying, isLoading: isLoadingTransferToLaying } =
-    useSWR(transferToLayingId, (id: number) =>
-      TransferToLayingApi.getSingle(id)
-    );
-
-  if (!transferToLayingId) {
-    router.back();
-
-    return (
-      <div className='w-full flex flex-row justify-center items-center p-4'>
-        <span className='loading loading-spinner loading-xl' />
-      </div>
-    );
-  }
-
-  if (
-    !isLoadingTransferToLaying &&
-    (!transferToLaying || isResponseError(transferToLaying))
-  ) {
-    router.replace('/404');
-    return;
-  }
-
-  if (
-    isResponseSuccess(transferToLaying) &&
-    transferToLaying.data.approval.step_number === 2
-  ) {
-    router.replace('/production/transfer-to-laying');
-    return;
-  }
-
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingTransferToLaying && (
-        <span className='loading loading-spinner loading-xl' />
-      )}
-      {!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
-        <TransferToLayingForm
-          type='edit'
-          initialValues={transferToLaying.data}
-        />
-      )}
-    </div>
-  );
-};
-
-export default TransferToLayingEdit;

src/app/production/transfer-to-laying/detail/layout.tsx

@@ -1,11 +0,0 @@
-import SuspenseHelper from '@/components/helper/SuspenseHelper';
-
-const Layout = ({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) => {
-  return <SuspenseHelper>{children}</SuspenseHelper>;
-};
-
-export default Layout;

src/app/production/transfer-to-laying/detail/page.tsx

@@ -1,56 +0,0 @@
-'use client';
-
-import { useRouter, useSearchParams } from 'next/navigation';
-import useSWR from 'swr';
-
-import TransferToLayingForm from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm';
-
-import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-
-const TransferToLayingDetail = () => {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const transferToLayingId = searchParams.get('transferToLayingId');
-
-  const { data: transferToLaying, isLoading: isLoadingTransferToLaying } =
-    useSWR(transferToLayingId, (id: number) =>
-      TransferToLayingApi.getSingle(id)
-    );
-
-  if (!transferToLayingId) {
-    router.back();
-
-    return (
-      <div className='w-full flex flex-row justify-center items-center p-4'>
-        <span className='loading loading-spinner loading-xl' />
-      </div>
-    );
-  }
-
-  if (
-    !isLoadingTransferToLaying &&
-    (!transferToLaying || isResponseError(transferToLaying))
-  ) {
-    router.replace('/404');
-    return;
-  }
-
-  return (
-    <div className='w-full p-4 flex flex-row justify-center'>
-      {isLoadingTransferToLaying && (
-        <span className='loading loading-spinner loading-xl' />
-      )}
-
-      {!isLoadingTransferToLaying && isResponseSuccess(transferToLaying) && (
-        <TransferToLayingForm
-          type='detail'
-          initialValues={transferToLaying.data}
-        />
-      )}
-    </div>
-  );
-};
-
-export default TransferToLayingDetail;

src/app/production/transfer-to-laying/page.tsx

@@ -1,5 +1,6 @@
 import TransferToLayingsTable from '@/components/pages/production/transfer-to-laying/TransferToLayingsTable';
 import TransferToLayingFormModal from '@/components/pages/production/transfer-to-laying/TransferToLayingFormModal';
+import TransferToLayingDetailModal from '@/components/pages/production/transfer-to-laying/TransferToLayingDetailModal';
 
 const TransferToLaying = () => {
   return (
@@ -7,6 +8,8 @@ const TransferToLaying = () => {
       <TransferToLayingsTable />
 
       <TransferToLayingFormModal />
+
+      <TransferToLayingDetailModal />
     </section>
   );
 };

src/app/purchase/page.tsx

@@ -2,7 +2,7 @@ import PurchaseTable from '@/components/pages/purchase/PurchaseTable';
 
 const Purchase = () => {
   return (
-    <section className='w-full p-4'>
+    <section className='w-full p-4 sm:p-0'>
       <PurchaseTable />
     </section>
   );

src/components/helper/ApprovalStepsV2.tsx

@@ -0,0 +1,203 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+
+import { Icon } from '@iconify/react';
+import { BaseApproval } from '@/types/api/api-general';
+import Button from '@/components/Button';
+
+import { cn, formatDate } from '@/lib/helper';
+
+interface ApprovalStepsV2Props {
+  approvals?: BaseApproval[];
+  steps: {
+    step_number: number;
+    step_name: string;
+  }[];
+  maxVisibleSteps?: number;
+  className?: {
+    wrapper?: string;
+    stepsWrapper?: string;
+    stepsContainer?: string;
+  };
+}
+
+const ApprovalStepsV2 = ({
+  approvals,
+  steps,
+  maxVisibleSteps = 2,
+  className,
+}: ApprovalStepsV2Props) => {
+  const [isSeeAll, setIsSeeAll] = useState(false);
+  const [formattedApprovals, setFormattedApprovals] = useState<
+    (BaseApproval & { isActive: boolean })[]
+  >([]);
+
+  const latestApprovalStepNumber =
+    approvals?.[approvals.length - 1].step_number ?? 0;
+
+  const lastStepNumber = steps[steps.length - 1].step_number;
+
+  const isLatestApprovalStepNumberLessThanLastStepNumber =
+    latestApprovalStepNumber < lastStepNumber;
+
+  const slicedFormattedApprovals = useMemo(() => {
+    return formattedApprovals.slice(0, isSeeAll ? undefined : maxVisibleSteps);
+  }, [formattedApprovals, isSeeAll]);
+
+  const seeMoreClickHandler = () => {
+    setIsSeeAll((prevVal) => !prevVal);
+  };
+
+  useEffect(() => {
+    if (approvals) {
+      const tempFormattedApprovals: (BaseApproval & { isActive: boolean })[] =
+        [];
+
+      approvals.forEach((approval) => {
+        tempFormattedApprovals.push({
+          ...approval,
+          isActive: true,
+        });
+      });
+
+      if (isLatestApprovalStepNumberLessThanLastStepNumber) {
+        const latestApprovalStepNumberIndexInSteps = steps.findIndex(
+          (step) => step.step_number === latestApprovalStepNumber
+        );
+
+        const slicedSteps = steps.slice(
+          latestApprovalStepNumberIndexInSteps + 1
+        );
+
+        slicedSteps.forEach((step) => {
+          tempFormattedApprovals.push({
+            action: 'APPROVED',
+            action_at: new Date().toISOString(),
+            action_by: {
+              id: 0,
+              id_user: 0,
+              email: '',
+              name: '',
+            },
+            step_name: step.step_name,
+            step_number: step.step_number,
+            isActive: false,
+          });
+        });
+      }
+
+      setFormattedApprovals(tempFormattedApprovals);
+    }
+  }, [approvals]);
+
+  return (
+    <div
+      className={cn(
+        'w-full p-4 flex flex-col border-b border-base-content/10',
+        className?.wrapper
+      )}
+    >
+      <h4 className='text-base font-medium text-base-content/50 font-roboto'>
+        Progress Details
+      </h4>
+
+      <div
+        className={cn(
+          'mt-6 mb-8 flex flex-col gap-10',
+          className?.stepsWrapper
+        )}
+      >
+        {slicedFormattedApprovals.map((approval, idx) => {
+          const isApprovalActionCreated = approval.action === 'CREATED';
+          const isApprovalActionUpdated = approval.action === 'UPDATED';
+          const isApprovalActionRejected = approval.action === 'REJECTED';
+          const isApprovalActionApproved = approval.action === 'APPROVED';
+
+          const approvalIcon =
+            isApprovalActionCreated || isApprovalActionUpdated
+              ? 'heroicons:clock-solid'
+              : isApprovalActionRejected
+                ? 'heroicons:x-circle-solid'
+                : isApprovalActionApproved
+                  ? 'heroicons:check-badge-solid'
+                  : 'heroicons:check-badge-solid';
+
+          return (
+            <div key={idx} className='w-full flex flex-row items-stretch gap-3'>
+              <div className='w-fit self-stretch relative'>
+                <div className='w-fit h-fit flex flex-col items-start'>
+                  <Icon
+                    icon={approvalIcon}
+                    width={24}
+                    height={24}
+                    className={cn({
+                      'text-warning':
+                        isApprovalActionCreated || isApprovalActionUpdated,
+                      'text-error': isApprovalActionRejected,
+                      'text-success': isApprovalActionApproved,
+                      'text-base-content/20': !approval.isActive,
+                    })}
+                  />
+
+                  {idx < formattedApprovals.length - 1 && (
+                    <div className='absolute top-6 left-1/2 -translate-x-1/2 w-0 min-h-full h-[calc(100%)] mx-auto my-2 border border-dashed border-base-content/10' />
+                  )}
+                </div>
+              </div>
+
+              <div
+                className={cn('w-full flex flex-col gap-1 text-base-content', {
+                  'text-base-content/20': !approval.isActive,
+                })}
+              >
+                <div className='flex flex-col'>
+                  <span className='text-xs'>{approval.step_name}</span>
+                  <span className='text-sm font-semibold'>
+                    {(isApprovalActionCreated || isApprovalActionUpdated) &&
+                      'Diajukan oleh '}
+                    {isApprovalActionRejected && 'Ditolak oleh '}
+                    {isApprovalActionApproved && 'Disetujui oleh '}
+                    {approval.isActive ? approval.action_by.name : '...'}
+                  </span>
+                </div>
+
+                {approval.isActive && (
+                  <p className='w-full max-w-60 p-3 bg-base-content/5 rounded-xl text-xs text-base-content/50'>
+                    Created at :{' '}
+                    {formatDate(approval.action_at, 'DD-MM-YYYY, HH:mm')}
+                    <br />
+                    Notes : {approval.notes ?? '-'}
+                  </p>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {formattedApprovals.length > maxVisibleSteps && (
+        <Button
+          variant='outline'
+          color='none'
+          onClick={seeMoreClickHandler}
+          className={cn(
+            'px-3 py-2 gap-2.5 text-sm text-base-content/50 border border-base-content/10 rounded-lg transition-all'
+          )}
+        >
+          <Icon
+            icon='heroicons-outline:chevron-double-down'
+            width={20}
+            height={20}
+            className={cn('transition-all duration-300', {
+              '-rotate-180': isSeeAll,
+            })}
+          />
+          See {isSeeAll ? 'Less' : 'More'}
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default ApprovalStepsV2;

src/components/input/DateInput.tsx

@@ -226,7 +226,7 @@ const DateInput = ({
 
       <div
         className={cn(
-          'input h-12 bg-inherit px-3 py-2.5 text-base font-normal leading-6 w-full rounded-lg transition-all duration-200 flex items-center border border-base-content/10',
+          'input h-fit bg-inherit px-3 py-2.5 text-base font-normal leading-6 w-full rounded-lg transition-all duration-200 flex items-center border border-base-content/10',
           {
             'border-error': finalIsError,
             'border-success': externalValid && !finalIsError,
@@ -245,7 +245,10 @@ const DateInput = ({
           disabled={disabled}
           readOnly // ✅ tidak bisa diketik manual
           className={cn(
-            'grow bg-transparent cursor-pointer focus:outline-none',
+            'grow bg-transparent cursor-pointer focus:outline-none text-sm leading-tight',
+            {
+              'cursor-not-allowed': readOnly,
+            },
             className?.input
           )}
         />
@@ -257,8 +260,8 @@ const DateInput = ({
         )}
         <Icon
           icon='heroicons:calendar-date-range'
-          width={14}
+          width={15}
-          height={14}
+          height={15}
           className='cursor-pointer text-base-content/20'
           onClick={(e) =>
             handleClick(e as unknown as React.MouseEvent<HTMLInputElement>)

src/components/input/SelectInput.tsx

@@ -42,6 +42,7 @@ interface SelectInputBaseProps<T = OptionType> {
   optionComponent?: OptionComponent<T>;
   components?: Partial<typeof ReactSelectComponents>;
   isDisabled?: boolean;
+  readOnly?: boolean;
   isLoading?: boolean;
   isClearable?: boolean;
   isRtl?: boolean;
@@ -156,6 +157,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
     closeMenuOnSelect,
     hideSelectedOptions,
     onMenuScrollToBottom,
+    readOnly,
   } = props;
 
   const [internalInputValue, setInternalInputValue] = useState('');
@@ -235,7 +237,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         onInputChange={internalInputChangeHandler}
         onMenuClose={() => setInternalInputValue('')}
         isMulti={isMulti}
-        isDisabled={isDisabled}
+        isDisabled={isDisabled || readOnly}
         isLoading={isLoading}
         isClearable={isClearable}
         isRtl={isRtl}
@@ -247,30 +249,37 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         classNames={{
           ...(!startAdornment && {
             control: ({ isFocused, isDisabled }) =>
-              cn(
+              cn('w-full rounded-lg! border bg-white transition-shadow', {
-                'w-full min-h-12! rounded-lg! border bg-white transition-shadow cursor-pointer!',
+                'cursor-pointer!': !readOnly && !isDisabled,
-                {
+                'border-red-500! ring-2 ring-red-200': isError,
-                  'border-red-500! ring-2 ring-red-200': isError,
+                'border-indigo-500 ring-2 ring-indigo-200': isFocused,
-                  'border-indigo-500 ring-2 ring-indigo-200': isFocused,
+                'border-base-content/10!': !isError && !isFocused,
-                  'border-base-content/10!': !isError && !isFocused,
+                'bg-gray-100 text-gray-400 cursor-not-allowed':
-                  'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
+                  isDisabled && !readOnly,
-                }
+                'bg-transparent! cursor-not-allowed!': readOnly,
-              ),
+              }),
-            valueContainer: () => cn('flex-1 p-3! py-2! gap-1'),
+            valueContainer: () => cn('flex-1 px-3! pr-2! py-2.5! gap-1'),
           }),
           placeholder: () =>
-            cn({ 'text-gray-400': !isError, 'text-red-300!': isError }),
+            cn({
+              'text-gray-400 text-sm leading-tight': !isError,
+              'text-red-300!': isError,
+            }),
           singleValue: () =>
-            cn({ 'text-gray-900': !isError, 'text-error!': isError }),
+            cn({
-          input: () => cn('text-gray-900 m-0! p-0!'),
+              'm-0! text-gray-900 text-sm leading-tight': !isError,
-          indicatorsContainer: () => cn('flex items-center gap-1 pr-2'),
+              'text-error!': isError,
+              'text-gray-900!': readOnly,
+            }),
+          input: () => cn('text-gray-900 m-0! p-0! text-sm leading-tight'),
+          indicatorsContainer: () => cn('flex items-center gap-1 pr-3 py-2'),
           dropdownIndicator: ({ isFocused }) =>
-            cn('p-1! rounded hover:bg-gray-100', {
+            cn('p-0! rounded hover:bg-gray-100', {
               'text-gray-900': isFocused,
               'text-gray-500': !isFocused,
               'text-error!': isError,
             }),
-          clearIndicator: () => cn('p-1! rounded hover:bg-gray-100'),
+          clearIndicator: () => cn('p-0! rounded hover:bg-gray-100'),
           menu: () =>
             cn(
               'border border-base-content/5 rounded-xl! bg-base-100 shadow-lg! my-1.5!'

src/components/input/TextArea.tsx

@@ -83,7 +83,7 @@ const TextArea = ({
 
       <textarea
         className={cn(
-          'textarea h-auto px-3 py-2.5 text-base font-normal leading-6 w-full rounded-lg outline-none! transition-all bg-white border-base-content/10',
+          'textarea h-auto px-3 py-2.5 text-sm text-base-content font-normal leading-6 w-full rounded-lg outline-none! transition-all bg-white border-base-content/10',
           {
             'border-error': isError,
             'border-success!': isValid,

src/components/input/TextInput.tsx

@@ -104,8 +104,8 @@ const TextInput = ({
               className={cn(
                 'inline-flex items-center px-3 py-2.5 border border-r-0 border-base-content/10 rounded-l-lg transition-all duration-200',
                 {
-                  'bg-gray-100 border-gray-300': !disabled,
+                  'bg-gray-100 border-base-content/10': !disabled,
-                  'bg-gray-50 border-gray-200': disabled,
+                  'bg-gray-50 border-base-content/10': disabled,
                   'border-error': isError,
                   'border-success!': isValid,
                 },
@@ -118,7 +118,7 @@ const TextInput = ({
 
           <div
             className={cn(
-              'input h-12 px-3 py-2.5 text-sm font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white border-base-content/10',
+              'input h-fit px-3 py-2.5 gap-1.5 text-sm font-normal leading-6 flex-1 rounded-lg! outline-none! transition-all duration-200 flex items-center bg-white border-base-content/10',
               {
                 'border-error': isError,
                 'border-success!': isValid,
@@ -182,7 +182,7 @@ const TextInput = ({
       ) : (
         <div
           className={cn(
-            'input h-12 px-3 py-2.5 text-sm font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white border-base-content/10',
+            'input h-fit px-3 py-2.5 gap-1.5 text-sm font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white border-base-content/10',
             {
               'border-error': isError,
               'border-success!': isValid,

src/components/pages/inventory/movement/form/MovementForm.schema.ts

@@ -37,7 +37,7 @@ type MovementFormSchemaType = {
       value: number;
       label: string;
     } | null;
-    supplier_id: number;
+    supplier_id?: number | null;
     products: {
       product?: {
         value: number;
@@ -69,7 +69,7 @@ export type DeliverySchema = {
     value: number;
     label: string;
   } | null;
-  supplier_id: number;
+  supplier_id?: number | null;
   products: {
     product?: {
       value: number;
@@ -151,9 +151,9 @@ const DeliveryObjectSchema: Yup.ObjectSchema<DeliverySchema> = Yup.object({
     label: Yup.string().required(),
   }).nullable(),
   supplier_id: Yup.number()
-    .required('Supplier wajib diisi!')
+    .optional()
-    .min(1, 'Supplier wajib diisi!')
+    .nullable()
-    .typeError('Supplier wajib diisi!'),
+    .typeError('Supplier harus berupa angka!'),
   products: Yup.array()
     .of(DeliveryProductObjectSchema)
     .min(1, 'Minimal harus ada 1 produk!')

src/components/pages/inventory/movement/form/MovementForm.tsx

@@ -1494,7 +1494,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 </thead>
                 <tbody>
                   {formik.values.products?.map((product, idx) => (
-                    <tr key={`product-row-${idx}-${product.product_id}`}>
+                    <tr key={`product-row-${idx}`}>
                       {type !== 'detail' && (
                         <td className='align-middle!'>
                           <CheckboxInput
@@ -1665,15 +1665,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                         <span className='text-error'>*</span>
                       </span>
                     </th>
-                    <th>
+                    <th>Supplier</th>
-                      Supplier
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom z-9999'
-                        data-tip='required'
-                      >
-                        <span className='text-error'>*</span>
-                      </span>
-                    </th>
                     <th>
                       Plat Nomor
                       <span
@@ -1716,9 +1708,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 </thead>
                 <tbody>
                   {formik.values.deliveries?.map((delivery, idx) => (
-                    <tr
+                    <tr key={`delivery-row-${idx}`}>
-                      key={`delivery-row-${idx}-${delivery.supplier_id}-${delivery.vehicle_plate}`}
-                    >
                       {type !== 'detail' && (
                         <td className='align-middle!'>
                           <CheckboxInput
@@ -1787,7 +1777,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                       </td>
                       <td>
                         <SelectInput
-                          required
                           placeholder='Pilih supplier...'
                           value={delivery.supplier}
                           onChange={(val) =>

src/components/pages/master-data/product-category/ProductCategoryTable.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ChangeEventHandler, useEffect, useState } from 'react';
+import { ChangeEventHandler, useEffect, useRef, useState } from 'react';
 import useSWR from 'swr';
 import { CellContext, ColumnDef, SortingState } from '@tanstack/react-table';
 import toast from 'react-hot-toast';
@@ -22,6 +22,7 @@ import { ProductCategoryApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { useUiStore } from '@/stores/ui/ui.store';
 import { ROWS_OPTIONS } from '@/config/constant';
 
 const RowOptionsMenu = ({
@@ -80,6 +81,9 @@ const RowOptionsMenu = ({
 };
 
 const ProductCategoryTable = () => {
+  const { searchValue, setSearchValue, resetSearchValue } = useUiStore();
+  const previousPathRef = useRef<string | null>(null);
+
   const {
     state: tableFilterState,
     updateFilter,
@@ -87,7 +91,7 @@ const ProductCategoryTable = () => {
     setPageSize,
     toQueryString: getTableFilterQueryString,
   } = useTableFilter({
-    initial: { search: '', nameSort: '' },
+    initial: { search: searchValue, nameSort: '' },
     paramMap: { page: 'page', pageSize: 'limit', nameSort: 'sort_name' },
   });
 
@@ -188,6 +192,7 @@ const ProductCategoryTable = () => {
   };
 
   const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    setSearchValue(e.target.value);
     updateFilter('search', e.target.value);
   };
 
@@ -196,6 +201,28 @@ const ProductCategoryTable = () => {
     setPageSize(newVal.value as number);
   };
 
+  useEffect(() => {
+    // Store current path on mount
+    previousPathRef.current = window.location.pathname;
+
+    return () => {
+      const currentPath = window.location.pathname;
+
+      // if both paths are within /master-data/product-category module
+      const isCurrentPathProductCategory = currentPath.includes(
+        '/master-data/product-category'
+      );
+      const isPreviousPathProductCategory = previousPathRef.current?.includes(
+        '/master-data/product-category'
+      );
+
+      // reset if we outside product category module entirely
+      if (isPreviousPathProductCategory && !isCurrentPathProductCategory) {
+        resetSearchValue();
+      }
+    };
+  }, [resetSearchValue]);
+
   useEffect(() => {
     const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
     if (!isNameSorted) {

src/components/pages/production/recording/form/RecordingForm.tsx

@@ -1395,8 +1395,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
           if (hasSameDayRecording) {
             toast.error(
-              `Recording untuk hari ${nextDayRecording.next_day} sudah ada.
+              `Recording untuk hari ke-${nextDayRecording.next_day} sudah ada datanya.
-              Tidak bisa membuat recording duplikat, mohon perbarui recording yang sudah ada terlebih dahulu.`
+              Tidak bisa membuat recording di hari yang sama dengan project flock yang sama, mohon perbarui recording yang sudah ada terlebih dahulu.`
             );
             return;
           }

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

@@ -175,6 +175,10 @@ const TransferToLayingConfirmationModalTable = ({
     <Table<TransferToLayingConfirmationTableDataType>
       columns={confirmationTableColumns}
       data={confirmationTableData}
+      isLoading={
+        isLoadingTransferToLaying ||
+        (!transferToLayingId && !transferToLayingForm)
+      }
       withPagination={false}
       pageSize={10000}
       expanded={true}

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

@@ -0,0 +1,338 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import { Icon } from '@iconify/react';
+import Modal, { useModal } from '@/components/Modal';
+import Button from '@/components/Button';
+import DateInput from '@/components/input/DateInput';
+import SelectInputRadio from '@/components/input/SelectInputRadio';
+import NumberInput from '@/components/input/NumberInput';
+import TextArea from '@/components/input/TextArea';
+import ApprovalStepsV2 from '@/components/helper/ApprovalStepsV2';
+import StatusBadge from '@/components/helper/StatusBadge';
+
+import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { formatNumber } from '@/lib/helper';
+import { APPROVAL_WORKFLOWS } from '@/config/constant';
+
+const TransferToLayingDetailModal = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const modalAction = searchParams.get('action');
+  const transferToLayingId = searchParams.get('id');
+
+  const {
+    data: transferToLayingResponse,
+    isLoading: isLoadingTransferToLaying,
+  } = useSWR(
+    transferToLayingId
+      ? ['detail-transfer-to-laying', transferToLayingId]
+      : undefined,
+    ([, id]) => TransferToLayingApi.getSingle(Number(id))
+  );
+
+  const transferToLaying = isResponseSuccess(transferToLayingResponse)
+    ? transferToLayingResponse.data
+    : undefined;
+
+  const {
+    data: transferToLayingApprovalResponse,
+    isLoading: isLoadingTransferToLayingApproval,
+  } = useSWR(
+    transferToLayingId
+      ? ['approval-transfer-to-laying', transferToLayingId]
+      : undefined,
+    ([, id]) => TransferToLayingApi.getApprovalLineHistory(Number(id))
+  );
+
+  const transferToLayingApproval = isResponseSuccess(
+    transferToLayingApprovalResponse
+  )
+    ? transferToLayingApprovalResponse.data
+    : undefined;
+
+  const detailModal = useModal();
+
+  const totalEnteredChickenForTransfer =
+    transferToLaying?.sources.reduce(
+      (acc, item) => acc + Number(item.qty),
+      0
+    ) ?? 0;
+
+  const totalTransferedChicken =
+    transferToLaying?.targets.reduce(
+      (acc, item) => acc + Number(item.qty),
+      0
+    ) ?? 0;
+
+  const totalAvailableChickenForTransfer =
+    totalEnteredChickenForTransfer - totalTransferedChicken;
+
+  const closeModalHandler = (shouldPushToRoute: boolean = true) => {
+    if (shouldPushToRoute) {
+      router.push('/production/transfer-to-laying');
+    }
+
+    detailModal.closeModal();
+  };
+
+  useEffect(() => {
+    if (modalAction === 'detail') {
+      detailModal.openModal();
+    }
+  }, [modalAction]);
+
+  return (
+    <Modal
+      ref={detailModal.ref}
+      position='end'
+      className={{
+        modalBox: 'w-full sm:w-fit p-3 rounded-xl bg-transparent shadow-none',
+      }}
+    >
+      <div className='w-full sm:w-[446px] min-h-full flex flex-col items-stretch bg-base-100 rounded-xl overflow-y-auto'>
+        <div className='w-full p-4 flex flex-row items-stretch gap-3 border-b border-base-content/10'>
+          <Button
+            type='button'
+            variant='ghost'
+            color='none'
+            onClick={() => closeModalHandler()}
+            className='p-0 text-black hover:text-base-content'
+          >
+            <Icon icon='heroicons:chevron-left' width={20} height={20} />
+          </Button>
+
+          <div className='w-px border-none bg-base-content/10' />
+
+          <h4 className='text-sm font-medium text-base-content/50'>
+            Confirmation
+          </h4>
+        </div>
+
+        {!isLoadingTransferToLaying && transferToLaying && (
+          <>
+            <ApprovalStepsV2
+              approvals={transferToLayingApproval}
+              steps={APPROVAL_WORKFLOWS.TRANSFER_TO_LAYINGS}
+            />
+
+            <div className='w-full p-4 flex flex-col border-b border-base-content/10'>
+              <h4 className='text-base font-medium text-base-content/50 font-roboto'>
+                Informasi Umum
+              </h4>
+
+              <DateInput
+                name='transfer_date'
+                label='Tanggal'
+                placeholder='Tanggal'
+                value={transferToLaying?.transfer_date ?? ''}
+                readOnly
+              />
+
+              <SelectInputRadio
+                label='Flock Asal'
+                placeholder='Pilih Flock Asal'
+                value={{
+                  label: transferToLaying?.from_project_flock?.flock_name ?? '',
+                  value: transferToLaying?.from_project_flock.id ?? '',
+                }}
+                options={[]}
+                readOnly
+              />
+
+              <SelectInputRadio
+                label='Flock Tujuan'
+                placeholder='Pilih Flock Tujuan'
+                value={{
+                  label: transferToLaying?.to_project_flock?.flock_name ?? '',
+                  value: transferToLaying?.to_project_flock.id ?? '',
+                }}
+                options={[]}
+                readOnly
+              />
+            </div>
+
+            <div className='w-full p-4 flex flex-col border-b border-base-content/10'>
+              <h4 className='text-base font-medium text-base-content/50 font-roboto'>
+                Informasi Kandang
+              </h4>
+
+              {/* Source Kandang */}
+              <div className='flex flex-col'>
+                <span className='w-full py-2 text-xs font-semibold'>
+                  Kandang Asal{' '}
+                  <span className='tooltip tooltip-error' data-tip='required'>
+                    <span className='text-error'> *</span>
+                  </span>
+                </span>
+
+                {transferToLaying?.sources.length === 0 && (
+                  <span className='text-sm text-base-content/50 italic'>
+                    Belum ada kandang asal yang dipilih
+                  </span>
+                )}
+
+                {transferToLaying?.sources &&
+                  transferToLaying?.sources.length > 0 && (
+                    <div className='flex flex-col gap-3'>
+                      {transferToLaying?.sources.map((item, index) => {
+                        return (
+                          <NumberInput
+                            key={`flockSourceKandangs-${item.source_project_flock_kandang.id}-${index}`}
+                            name={`flockSourceKandangs.${index}.quantity`}
+                            placeholder='Masukkan Kuantitas'
+                            value={item.qty}
+                            readOnly
+                            inputPrefix={
+                              <div className='w-full h-full py-1 flex flex-row items-stretch justify-between gap-5'>
+                                <span
+                                  title={
+                                    item.source_project_flock_kandang.kandang
+                                      .name
+                                  }
+                                  className='text-sm text-base-content self-center text-nowrap truncate'
+                                >
+                                  {
+                                    item.source_project_flock_kandang.kandang
+                                      .name
+                                  }
+                                </span>
+
+                                <div className='w-px bg-base-content/10' />
+                              </div>
+                            }
+                            className={{
+                              inputPrefix:
+                                'py-0 px-0 pl-3 text-base-content/50 bg-transparent border-r-0',
+                              inputPrefixSuffixWrapper: 'grid grid-cols-2',
+                              inputWrapper: 'border-l-0 pl-5',
+                            }}
+                          />
+                        );
+                      })}
+                    </div>
+                  )}
+              </div>
+
+              {/* Destination Kandang */}
+              <div className='mt-3 flex flex-col'>
+                <span className='w-fit py-2 text-xs font-semibold flex flex-row items-center gap-3'>
+                  <span className='text-nowrap'>
+                    Kandang Tujuan{' '}
+                    <span className='tooltip tooltip-error' data-tip='required'>
+                      <span className='text-error'> *</span>
+                    </span>
+                  </span>
+
+                  <div className='w-px h-5 bg-base-content/10' />
+
+                  <StatusBadge
+                    color={
+                      totalAvailableChickenForTransfer < 0 ? 'error' : 'neutral'
+                    }
+                    text={`Sisa transfer: ${formatNumber(
+                      totalAvailableChickenForTransfer,
+                      'en-US'
+                    )} ekor`}
+                    className={{
+                      badge: 'text-nowrap',
+                    }}
+                  />
+                </span>
+
+                {transferToLaying?.targets.length === 0 && (
+                  <span className='text-sm text-base-content/50 italic'>
+                    Belum ada kandang tujuan yang dipilih
+                  </span>
+                )}
+
+                {transferToLaying?.targets &&
+                  transferToLaying?.targets.length > 0 && (
+                    <div className='flex flex-col gap-3'>
+                      {transferToLaying?.targets.map((item, index) => {
+                        return (
+                          <NumberInput
+                            key={`flockDestinationKandangs-${item.target_project_flock_kandang.id}-${index}`}
+                            name={`flockDestinationKandangs.${index}.quantity`}
+                            placeholder='Masukkan Kuantitas'
+                            value={item.qty}
+                            readOnly
+                            inputPrefix={
+                              <div className='w-full h-full py-1 flex flex-row items-stretch justify-between gap-5'>
+                                <span
+                                  title={
+                                    item.target_project_flock_kandang.kandang
+                                      .name
+                                  }
+                                  className='text-sm text-base-content self-center text-nowrap truncate'
+                                >
+                                  {
+                                    item.target_project_flock_kandang.kandang
+                                      .name
+                                  }
+                                </span>
+
+                                <div className='w-px bg-base-content/10' />
+                              </div>
+                            }
+                            className={{
+                              inputPrefix:
+                                'py-0 px-0 pl-3 text-base-content/50 bg-transparent border-r-0',
+                              inputPrefixSuffixWrapper: 'grid grid-cols-2',
+                              inputWrapper: 'border-l-0 pl-5',
+                            }}
+                          />
+                        );
+                      })}
+                    </div>
+                  )}
+              </div>
+            </div>
+
+            <div className='w-full p-4 flex flex-col border-y border-base-content/10'>
+              <h4 className='text-base font-medium text-base-content/50 font-roboto'>
+                Informasi Umum
+              </h4>
+
+              <NumberInput
+                name='totalQuantity'
+                label='Jumlah Transfer'
+                placeholder='Total Kuantitas Transfer'
+                value={totalTransferedChicken}
+                readOnly
+                errorMessage={
+                  totalAvailableChickenForTransfer < 0
+                    ? `Jumlah transfer melebihi ketersediaan (${formatNumber(totalEnteredChickenForTransfer, 'en-US')} ayam)`
+                    : ''
+                }
+              />
+
+              <TextArea
+                required
+                name='reason'
+                label='Catatan'
+                placeholder='Alasan Transfer'
+                rows={4}
+                value={transferToLaying?.notes}
+                readOnly
+              />
+            </div>
+          </>
+        )}
+
+        {isLoadingTransferToLaying && (
+          <div className='w-full flex-1 flex flex-col items-center justify-center'>
+            <span className='loading loading-spinner loading-lg' />
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+};
+
+export default TransferToLayingDetailModal;

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

@@ -288,6 +288,48 @@ const TransferToLayingFormModal = () => {
     return { available: countAvailable, unavailable: countUnavailable };
   }, [mappedFlockSourceKandangsAvailability]);
 
+  const {
+    data: flockDestinationKandangsMaxTargetQty,
+    isLoading: isLoadingFlockDestinationKandangsMaxTargetQty,
+  } = useSWR(
+    formik.values.flockDestination
+      ? [
+          'transfer-to-laying',
+          'max-target-qty',
+          String(formik.values.flockDestination.value),
+        ]
+      : undefined,
+    ([, , id]: string[]) =>
+      TransferToLayingApi.getMappedFlockKandangsMaxTargetQty(Number(id))
+  );
+
+  const mappedFlockDestinationKandangsMaxTargetQty: {
+    kandang_name: string;
+    max_target_qty: number;
+    project_flock_kandang_id: number;
+  }[] = useMemo(() => {
+    if (
+      !flockDestinationKandangsMaxTargetQty ||
+      !selectedFlockDestinationRawData
+    )
+      return [];
+
+    return selectedFlockDestinationRawData
+      ? selectedFlockDestinationRawData.kandangs.map((kandang) => {
+          const maxQty =
+            flockDestinationKandangsMaxTargetQty[
+              kandang.project_flock_kandang_id
+            ]?.max_target_qty;
+
+          return {
+            kandang_name: kandang.name,
+            max_target_qty: maxQty,
+            project_flock_kandang_id: kandang.project_flock_kandang_id,
+          };
+        })
+      : [];
+  }, [flockDestinationKandangsMaxTargetQty, selectedFlockDestinationRawData]);
+
   const mappedFlockDestinationKandangsAvailabilityInfo: {
     available: number;
     unavailable: number;
@@ -298,9 +340,8 @@ const TransferToLayingFormModal = () => {
     let countAvailable = 0;
     let countUnavailable = 0;
 
-    selectedFlockDestinationRawData?.kandangs.forEach((item) => {
+    mappedFlockDestinationKandangsMaxTargetQty.forEach((item) => {
-      // TODO: change this to real available quota later
+      if (item.max_target_qty > 0) {
-      if (item.capacity > 0) {
         countAvailable += 1;
       } else {
         countUnavailable += 1;
@@ -308,7 +349,7 @@ const TransferToLayingFormModal = () => {
     });
 
     return { available: countAvailable, unavailable: countUnavailable };
-  }, [selectedFlockDestinationRawData]);
+  }, [mappedFlockDestinationKandangsMaxTargetQty]);
 
   const totalEnteredChickenForTransfer =
     formik.values.flockSourceKandangs.reduce(
@@ -424,7 +465,7 @@ const TransferToLayingFormModal = () => {
   useEffect(() => {
     formik.setFieldValue('totalQuantity', totalTransferedChicken);
     formik.setFieldValue('maxTotalQuantity', totalTransferedChicken);
-  }, [totalTransferedChicken]);
+  }, [totalTransferedChicken, formik.values.flockDestinationKandangs]);
 
   return (
     <>
@@ -465,6 +506,7 @@ const TransferToLayingFormModal = () => {
               </h4>
 
               <DateInput
+                required
                 name='transfer_date'
                 label='Tanggal'
                 placeholder='Tanggal'
@@ -480,6 +522,7 @@ const TransferToLayingFormModal = () => {
               />
 
               <SelectInputRadio
+                required
                 label='Flock Asal'
                 placeholder='Pilih Flock Asal'
                 value={formik.values.flockSource}
@@ -492,6 +535,7 @@ const TransferToLayingFormModal = () => {
               />
 
               <SelectInputRadio
+                required
                 label='Flock Tujuan'
                 placeholder='Pilih Flock Tujuan'
                 value={formik.values.flockDestination}
@@ -645,10 +689,9 @@ const TransferToLayingFormModal = () => {
                   </div>
 
                   <div className='w-full rounded-xl border border-base-content/10'>
-                    {selectedFlockDestinationRawData?.kandangs.map(
+                    {mappedFlockDestinationKandangsMaxTargetQty.map(
                       (item, itemIdx) => {
-                        // TODO: change this to real available quota later
+                        const isAvailable = item.max_target_qty > 0;
-                        const isAvailable = item.capacity > 0;
                         const isChecked =
                           formik.values.flockDestinationKandangs.some(
                             (k) =>
@@ -666,11 +709,10 @@ const TransferToLayingFormModal = () => {
                               {
                                 kandang: {
                                   value: item.project_flock_kandang_id,
-                                  label: item.name,
+                                  label: item.kandang_name,
                                 },
                                 quantity: '',
-                                // TODO: change this to real available quota later
+                                maxQuantity: item.max_target_qty,
-                                maxQuantity: item.capacity,
                               },
                             ]);
                           } else {
@@ -715,9 +757,8 @@ const TransferToLayingFormModal = () => {
                                   'cursor-not-allowed': !isAvailable,
                                 })}
                               >
-                                {item.name}{' '}
+                                {item.kandang_name}{' '}
-                                {/* TODO: change this to real available quota later */}
+                                <span className='text-base-content/20'>{`(Max: ${item.max_target_qty})`}</span>
-                                <span className='text-base-content/20'>{`(Max: ${item.capacity})`}</span>
                               </label>
                             </div>
 
@@ -776,7 +817,10 @@ const TransferToLayingFormModal = () => {
                 {/* Source Kandang */}
                 <div className='flex flex-col'>
                   <span className='w-full py-2 text-xs font-semibold'>
-                    Kandang Asal
+                    Kandang Asal{' '}
+                    <span className='tooltip tooltip-error' data-tip='required'>
+                      <span className='text-error'> *</span>
+                    </span>
                   </span>
 
                   {formik.values.flockSourceKandangs.length === 0 && (
@@ -845,7 +889,15 @@ const TransferToLayingFormModal = () => {
                 {/* Destination Kandang */}
                 <div className='mt-3 flex flex-col'>
                   <span className='w-fit py-2 text-xs font-semibold flex flex-row items-center gap-3'>
-                    <span className='text-nowrap'>Kandang Tujuan</span>
+                    <span className='text-nowrap'>
+                      Kandang Tujuan{' '}
+                      <span
+                        className='tooltip tooltip-error'
+                        data-tip='required'
+                      >
+                        <span className='text-error'> *</span>
+                      </span>
+                    </span>
 
                     <div className='w-px h-5 bg-base-content/10' />
 
@@ -946,13 +998,14 @@ const TransferToLayingFormModal = () => {
                   isError={totalAvailableChickenForTransfer < 0}
                   errorMessage={
                     totalAvailableChickenForTransfer < 0
-                      ? 'Jumlah transfer melebihi ketersediaan'
+                      ? `Jumlah transfer melebihi ketersediaan (${formatNumber(totalEnteredChickenForTransfer, 'en-US')} ayam)`
                       : ''
                   }
                   disabled
                 />
 
                 <TextArea
+                  required
                   name='reason'
                   label='Catatan'
                   placeholder='Alasan Transfer'

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
+import { ChangeEventHandler, useEffect, useMemo, useState } from 'react';
 import useSWR from 'swr';
 import {
   CellContext,
@@ -33,6 +33,7 @@ import { cn, formatDate, formatNumber } from '@/lib/helper';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Color } from '@/types/theme';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 
 const RowOptionsMenu = ({
   props,
@@ -74,7 +75,7 @@ const RowOptionsMenu = ({
         <div className='flex flex-col bg-base-100 rounded-xl'>
           <RequirePermission permissions='lti.production.transfer_to_laying.detail'>
             <Button
-              href={`/production/transfer-to-laying/detail/?transferToLayingId=${props.row.original.id}`}
+              href={`/production/transfer-to-laying/?action=detail&id=${props.row.original.id}`}
               variant='ghost'
               color='none'
               className='p-3 justify-start text-sm font-semibold w-full'
@@ -182,6 +183,9 @@ const TransferToLayingsTable = () => {
 
   const isFilterActive = filterCount > 0;
 
+  const [isLoadingExportingToExcel, setIsLoadingExportingToExcel] =
+    useState(false);
+
   // Modal hooks
   const filterModal = useModal();
   const deleteModal = useModal();
@@ -240,6 +244,10 @@ const TransferToLayingsTable = () => {
       header: 'Tanggal Transfer',
       cell: (props) => formatDate(props.getValue() as string, 'DD MMM YYYY'),
     },
+    {
+      accessorKey: 'transfer_number',
+      header: 'No. Transfer',
+    },
     {
       accessorKey: 'flock_source',
       header: 'Flock Asal',
@@ -266,6 +274,13 @@ const TransferToLayingsTable = () => {
       accessorKey: 'notes',
       header: 'Alasan Transfer',
       enableSorting: false,
+      cell: (props) => {
+        return (
+          <span title={props.row.original.notes} className='line-clamp-1'>
+            {props.row.original.notes}
+          </span>
+        );
+      },
     },
     {
       header: 'Status',
@@ -421,6 +436,10 @@ const TransferToLayingsTable = () => {
     setIsRejectLoading(false);
   };
 
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
   const filterSubmitHandler = (values: TransferToLayingFilter) => {
     updateFilter('startDate', values.startDate);
     updateFilter('endDate', values.endDate);
@@ -437,9 +456,12 @@ const TransferToLayingsTable = () => {
     updateFilter('status', '');
   };
 
-  // TODO: add export to excel functionality
+  const exportToExcelHandler = async () => {
-  const exportToExcelHandler = () => {
+    setIsLoadingExportingToExcel(true);
-    toast.error('Not implemented yet');
+
+    await TransferToLayingApi.exportToExcel(getTableFilterQueryString());
+
+    setIsLoadingExportingToExcel(false);
   };
 
   useEffect(() => {
@@ -516,7 +538,27 @@ const TransferToLayingsTable = () => {
             )}
           </div>
 
-          <div className='flex flex-row justify-center items-center gap-3'>
+          <div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
+            <DebouncedTextInput
+              name='search'
+              placeholder='Search'
+              value={tableFilterState.search ?? ''}
+              onChange={searchChangeHandler}
+              startAdornment={
+                <Icon
+                  icon='heroicons:magnifying-glass'
+                  width={20}
+                  height={20}
+                />
+              }
+              className={{
+                wrapper: 'w-full min-w-24 max-w-3xs',
+                inputWrapper: 'rounded-xl! shadow-button-soft',
+                input:
+                  'placeholder:font-semibold placeholder:text-base-content/50',
+              }}
+            />
+
             <Button
               variant='outline'
               color='none'
@@ -579,6 +621,7 @@ const TransferToLayingsTable = () => {
                 variant='ghost'
                 color='none'
                 onClick={exportToExcelHandler}
+                isLoading={isLoadingExportingToExcel}
                 className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
               >
                 <Icon icon='heroicons:table-cells' width={20} height={20} />

src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema.ts

@@ -59,7 +59,8 @@ export const TransferToLayingFormSchema: Yup.ObjectSchema<TransferToLayingFormSc
       .min(0, 'Jumlah transfer minimal 0')
       .max(
         Yup.ref('maxTotalQuantity'),
-        ({ max }) => `Kuantitas maksimal ${formatNumber(max)}!`
+        ({ max }) =>
+          `Kuantitas melebihi kapasitas kandang tujuan. Kuantitas maksimal ${formatNumber(max, 'en-US')}!`
       )
       .required('Jumlah transfer wajib diisi!'),
 
@@ -79,7 +80,7 @@ export const TransferToLayingFormSchema: Yup.ObjectSchema<TransferToLayingFormSc
             .min(0, 'Kuantitas minimal 0!')
             .max(
               Yup.ref('maxQuantity'),
-              ({ max }) => `Kuantitas maksimal ${formatNumber(max)}!`
+              ({ max }) => `Kuantitas maksimal ${formatNumber(max, 'en-US')}!`
             )
             .required('Kuantitas wajib diisi!'),
 
@@ -101,7 +102,8 @@ export const TransferToLayingFormSchema: Yup.ObjectSchema<TransferToLayingFormSc
             .min(0, 'Kuantitas minimal 0!')
             .max(
               Yup.ref('maxQuantity'),
-              ({ max }) => `Kuantitas maksimal ${formatNumber(max)}!`
+              ({ max }) =>
+                `Kuantitas melebihi kapasitas kandang tujuan. Maks: ${formatNumber(max, 'en-US')}!`
             )
             .required('Kuantitas wajib diisi!'),
 
@@ -174,6 +176,11 @@ export const getFilledTransferToLayingFormInitialValues = async (
       initialValues?.from_project_flock.id as number
     );
 
+  const mappedFlockDestinationKandangsMaxTargetQty =
+    await TransferToLayingApi.getMappedFlockKandangsMaxTargetQty(
+      initialValues?.to_project_flock.id as number
+    );
+
   const formattedFlockSourceKandangs = initialValues?.sources
     ? initialValues.sources.map((sourceKandang) => ({
         kandang: {
@@ -195,20 +202,8 @@ export const getFilledTransferToLayingFormInitialValues = async (
     maxTotalQuantity += item.quantity;
   });
 
-  const flockDestination = await ProjectFlockApi.getSingle(
-    initialValues?.to_project_flock.id as number
-  );
-
   const formattedFlockDestinationKandangs = initialValues?.targets
     ? initialValues.targets.map((targetKandang) => {
-        const kandang = isResponseSuccess(flockDestination)
-          ? flockDestination?.data?.kandangs.find(
-              (kandang) =>
-                String(kandang.project_flock_kandang_id) ===
-                String(targetKandang.target_project_flock_kandang.id)
-            )
-          : undefined;
-
         return {
           kandang: {
             value: targetKandang.target_project_flock_kandang.id,
@@ -216,7 +211,12 @@ export const getFilledTransferToLayingFormInitialValues = async (
           },
           quantity: targetKandang.qty,
 
-          maxQuantity: kandang?.capacity ?? 0,
+          maxQuantity:
+            (mappedFlockDestinationKandangsMaxTargetQty &&
+              mappedFlockDestinationKandangsMaxTargetQty[
+                targetKandang.target_project_flock_kandang.id
+              ].max_target_qty) ??
+            0,
         };
       })
     : [];

src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx

@@ -1,932 +0,0 @@
-'use client';
-
-import { useCallback, useEffect, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { useFormik } from 'formik';
-import { toast } from 'react-hot-toast';
-import useSWR from 'swr';
-
-import { Icon } from '@iconify/react';
-import Button from '@/components/Button';
-import RequirePermission from '@/components/helper/RequirePermission';
-import SelectInput, {
-  OptionType,
-  useSelect,
-} from '@/components/input/SelectInput';
-import TextArea from '@/components/input/TextArea';
-import { useModal } from '@/components/Modal';
-import ConfirmationModal from '@/components/modal/ConfirmationModal';
-import DateInput from '@/components/input/DateInput';
-import NumberInput from '@/components/input/NumberInput';
-import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
-import ApprovalSteps, {
-  formatGroupedApprovalsToApprovalSteps,
-} from '@/components/pages/ApprovalSteps';
-
-import {
-  getFilledTransferToLayingFormInitialValues,
-  getTransferToLayingFormInitialValues,
-  TransferToLayingFormSchema,
-  TransferToLayingFormValues,
-  UpdateTransferToLayingFormSchema,
-} from '@/components/pages/production/transfer-to-laying/form/TransferToLayingForm.schema';
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import {
-  TransferToLaying,
-  CreateTransferToLayingPayload,
-  UpdateTransferToLayingPayload,
-} from '@/types/api/production/transfer-to-laying';
-import { cn } from '@/lib/helper';
-
-import { TransferToLayingApi } from '@/services/api/production/transfer-to-laying';
-import { ProjectFlock } from '@/types/api/production/project-flock';
-import { TRANSFER_TO_LAYING_APPROVAL_LINE } from '@/config/approval-line';
-import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
-import AlertErrorList from '@/components/helper/form/FormErrors';
-
-interface TransferToLayingFormProps {
-  type?: 'add' | 'edit' | 'detail';
-  initialValues?: TransferToLaying;
-}
-
-const TransferToLayingForm = ({
-  type = 'add',
-  initialValues,
-}: TransferToLayingFormProps) => {
-  const router = useRouter();
-
-  // Modal hooks
-  const deleteModal = useModal();
-  const approveModal = useModal();
-  const rejectModal = useModal();
-
-  const [formErrorMessage, setFormErrorMessage] = useState('');
-
-  // Modal loading state
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-  const [isApproveLoading, setIsApproveLoading] = useState(false);
-  const [isRejectLoading, setIsRejectLoading] = useState(false);
-
-  const { data: approvalHistory, isLoading: isLoadingApprovalHistory } = useSWR(
-    type === 'detail' && initialValues ? [String(initialValues.id)] : null,
-    ([id]: string[]) => TransferToLayingApi.getApprovalHistory(Number(id))
-  );
-
-  const createTransferToLayingHandler = useCallback(
-    async (payload: CreateTransferToLayingPayload) => {
-      const createTransferToLayingRes =
-        await TransferToLayingApi.create(payload);
-
-      if (isResponseError(createTransferToLayingRes)) {
-        setFormErrorMessage(createTransferToLayingRes.message);
-        return;
-      }
-
-      toast.success(createTransferToLayingRes?.message as string);
-      router.push('/production/transfer-to-laying');
-    },
-    [router]
-  );
-
-  const updateTransferToLayingHandler = useCallback(
-    async (
-      transferToLayingId: number,
-      payload: UpdateTransferToLayingPayload
-    ) => {
-      const updateKandangRes = await TransferToLayingApi.update(
-        transferToLayingId,
-        payload
-      );
-
-      if (updateKandangRes?.status === 'error') {
-        setFormErrorMessage(updateKandangRes.message);
-        return;
-      }
-
-      toast.success(updateKandangRes?.message as string);
-      router.refresh();
-      router.push('/production/transfer-to-laying');
-    },
-    [router]
-  );
-
-  // const formikInitialValues = useMemo<TransferToLayingFormValues>(() => {
-  //   return getTransferToLayingFormInitialValues(initialValues);
-  // }, [initialValues]);
-
-  const [formikInitialValues, setFormikInitialValues] = useState(
-    getTransferToLayingFormInitialValues()
-  );
-
-  const formik = useFormik<TransferToLayingFormValues>({
-    initialValues: formikInitialValues,
-    validationSchema:
-      type === 'edit'
-        ? UpdateTransferToLayingFormSchema
-        : TransferToLayingFormSchema,
-    onSubmit: async (values) => {
-      setFormErrorMessage('');
-
-      const transferToLayingPayload: CreateTransferToLayingPayload = {
-        transfer_date: values.transfer_date as string,
-        source_project_flock_id: values.flockSource?.value as number,
-        target_project_flock_id: values.flockDestination?.value as number,
-        totalQuantity: values.totalQuantity as number,
-
-        source_kandangs: values.flockSourceKandangs?.map((kandang) => ({
-          project_flock_kandang_id: kandang.kandang.value,
-          quantity: parseFloat(kandang.quantity as string),
-        })) as CreateTransferToLayingPayload['source_kandangs'],
-
-        target_kandangs: values.flockDestinationKandangs?.map((kandang) => ({
-          project_flock_kandang_id: kandang.kandang.value,
-          quantity: parseFloat(kandang.quantity as string),
-        })) as CreateTransferToLayingPayload['target_kandangs'],
-
-        reason: values.reason as string,
-      };
-
-      switch (type) {
-        case 'add':
-          await createTransferToLayingHandler(transferToLayingPayload);
-          break;
-
-        case 'edit':
-          await updateTransferToLayingHandler(
-            initialValues?.id as number,
-            transferToLayingPayload
-          );
-          break;
-      }
-    },
-  });
-
-  const { setValues: formikSetValues, values: formikValues } = formik;
-  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
-  const {
-    flockSourceKandangs: flockSourceKandangsValue,
-    flockDestinationKandangs: flockDestinationKandangsValue,
-    totalQuantity,
-  } = formikValues;
-
-  const deleteTransferToLayingClickHandler = () => {
-    deleteModal.openModal();
-  };
-
-  const approveClickHandler = () => {
-    approveModal.openModal();
-  };
-
-  const rejectClickHandler = () => {
-    rejectModal.openModal();
-  };
-
-  // Modal confirm click handler
-  const confirmationModalDeleteClickHandler = async () => {
-    setIsDeleteLoading(true);
-
-    try {
-      await TransferToLayingApi.delete(initialValues?.id as number);
-
-      toast.success('Berhasil menghapus data transfer ke laying!');
-      router.push('/production/transfer-to-laying');
-    } catch (error) {
-      toast.success('Gagal menghapus data transfer ke laying!');
-    } finally {
-      deleteModal.closeModal();
-      setIsDeleteLoading(false);
-    }
-  };
-
-  const confirmationModalApproveClickHandler = async (notes: string) => {
-    setIsApproveLoading(true);
-
-    const approveResponse = await TransferToLayingApi.approve(
-      initialValues?.id as number,
-      notes
-    );
-
-    if (isResponseSuccess(approveResponse)) {
-      approveModal.closeModal();
-
-      toast.success('Berhasil approve data transfer ke laying!');
-      router.push('/production/transfer-to-laying');
-    } else {
-      approveModal.closeModal();
-
-      toast.error('Gagal approve data transfer ke laying!');
-    }
-
-    setIsApproveLoading(false);
-  };
-
-  const confirmationModalRejectClickHandler = async (notes: string) => {
-    setIsRejectLoading(true);
-
-    const rejectResponse = await TransferToLayingApi.reject(
-      initialValues?.id as number,
-      notes
-    );
-
-    if (isResponseSuccess(rejectResponse)) {
-      rejectModal.closeModal();
-
-      toast.success('Berhasil reject data transfer ke laying!');
-      router.push('/production/transfer-to-laying');
-    } else {
-      rejectModal.closeModal();
-
-      toast.error('Gagal reject data transfer ke laying!');
-    }
-
-    setIsRejectLoading(false);
-  };
-
-  // flock source
-  const isFlockSourceKandangsRepeaterInputError = (
-    column: keyof TransferToLayingFormValues['flockSourceKandangs'][0],
-    idx: number
-  ) => {
-    return (
-      formik.touched.flockSourceKandangs?.[idx]?.[column] &&
-      Boolean(
-        formik.errors.flockSourceKandangs?.[idx] instanceof Object &&
-          formik.errors.flockSourceKandangs?.[idx]?.[column]
-      )
-    );
-  };
-
-  const flockSourceKandangsRepeaterInputErrorMessage = (
-    column: keyof TransferToLayingFormValues['flockSourceKandangs'][0],
-    idx: number
-  ) => {
-    return (
-      formik.errors.flockSourceKandangs?.[idx] as Record<string, string>
-    )?.[column];
-  };
-
-  const {
-    setInputValue: setFlockSourceInputValue,
-    options: flockSourceOptions,
-    isLoadingOptions: isLoadingFlockSourceOptions,
-    rawData: flockSources,
-    loadMore: loadMoreFlockSource,
-    hasMore: hasMoreFlockSource,
-  } = useSelect<ProjectFlock>(
-    '/production/project-flocks',
-    'id',
-    'flock_name',
-    'search',
-    {
-      category: 'GROWING',
-    }
-  );
-
-  const flockSourceChangeHandler = async (
-    val: OptionType | OptionType[] | null
-  ) => {
-    // Get flock source data for total quantity and kandang
-    const flockSource =
-      isResponseSuccess(flockSources) && val !== null
-        ? flockSources.data.find(
-            (item) => item.id === (val as OptionType).value
-          )
-        : undefined;
-
-    // Set total quantity and kandangs
-    if (flockSource) {
-      const mappedFlockKandangsAvailableQty =
-        await TransferToLayingApi.getMappedFlockKandangsAvailability(
-          flockSource.id
-        );
-
-      const formattedKandangs = flockSource.kandangs.map((item) => ({
-        kandang: {
-          value: item.project_flock_kandang_id,
-          label: item.name,
-        },
-        quantity: '',
-        maxQuantity:
-          (mappedFlockKandangsAvailableQty &&
-            mappedFlockKandangsAvailableQty[item.project_flock_kandang_id]
-              .available_qty) ??
-          0,
-      }));
-
-      let maxTotalQuantity = 0;
-      // flockSource.kandangs.forEach((item) => {
-      //   maxTotalQuantity += item.capacity;
-      // });
-      formattedKandangs.forEach((item) => {
-        maxTotalQuantity += item.maxQuantity;
-      });
-
-      formik.setFieldValue('totalQuantity', '');
-      formik.setFieldValue('maxTotalQuantity', maxTotalQuantity);
-      formik.setFieldValue('flockSourceKandangs', formattedKandangs);
-    } else {
-      formik.setFieldValue('totalQuantity', undefined);
-      formik.setFieldValue('flockSourceKandangs', undefined);
-      formik.setFieldValue('reason', '');
-    }
-
-    formik.setFieldTouched('flockSource', true);
-    formik.setFieldValue('flockSource', val);
-  };
-
-  // flock destination
-  const isFlockDestinationKandangsRepeaterInputError = (
-    column: keyof TransferToLayingFormValues['flockDestinationKandangs'][0],
-    idx: number
-  ) => {
-    return (
-      formik.touched.flockDestinationKandangs?.[idx]?.[column] &&
-      Boolean(
-        formik.errors.flockDestinationKandangs?.[idx] instanceof Object &&
-          formik.errors.flockDestinationKandangs?.[idx]?.[column]
-      )
-    );
-  };
-
-  const flockDestinationKandangsRepeaterInputErrorMessage = (
-    column: keyof TransferToLayingFormValues['flockDestinationKandangs'][0],
-    idx: number
-  ) => {
-    return (
-      formik.errors.flockDestinationKandangs?.[idx] as Record<string, string>
-    )?.[column];
-  };
-
-  const {
-    setInputValue: setFlockDestinationInputValue,
-    options: flockDestinationOptions,
-    isLoadingOptions: isLoadingFlockDestinationOptions,
-    rawData: flockDestinations,
-    loadMore: loadMoreFlockDestination,
-    hasMore: hasMoreFlockDestination,
-  } = useSelect<ProjectFlock>(
-    '/production/project-flocks',
-    'id',
-    'flock_name',
-    'search',
-    {
-      category: 'LAYING',
-    }
-  );
-
-  const flockDestinationChangeHandler = (
-    val: OptionType | OptionType[] | null
-  ) => {
-    // Get flock destination data for total quantity and kandang
-    const flockDestination =
-      isResponseSuccess(flockDestinations) && val !== null
-        ? flockDestinations.data.find(
-            (item) => item.id === (val as OptionType).value
-          )
-        : undefined;
-
-    // Set total quantity and kandangs
-    if (flockDestination) {
-      const formattedKandangs = flockDestination.kandangs.map((item) => ({
-        kandang: {
-          value: item.project_flock_kandang_id,
-          label: item.name,
-        },
-        quantity: '',
-
-        // TODO: integrate this later to real kandang capacity API
-        // maxQuantity: item.capacity ?? 0,
-        maxQuantity: item.capacity ?? Infinity,
-      }));
-
-      formik.setFieldValue('flockDestinationKandangs', formattedKandangs);
-    }
-
-    formik.setFieldTouched('flockDestination', true);
-    formik.setFieldValue('flockDestination', val);
-  };
-
-  const isShowApproveRejectButton =
-    initialValues &&
-    initialValues?.approval?.step_number === 1 &&
-    initialValues?.approval.action !== 'REJECTED';
-
-  const isShowDeleteButton =
-    initialValues &&
-    initialValues?.approval.action !== 'REJECTED' &&
-    initialValues?.approval.action !== 'APPROVED';
-
-  const isShowEditButton = isShowDeleteButton;
-
-  useEffect(() => {
-    const getFilledInitialValues = async () => {
-      if (initialValues) {
-        const filledInitialValues =
-          await getFilledTransferToLayingFormInitialValues(initialValues);
-
-        setFormikInitialValues(filledInitialValues);
-      }
-    };
-
-    getFilledInitialValues();
-  }, [initialValues, setFormikInitialValues]);
-
-  useEffect(() => {
-    formikSetValues(formikInitialValues);
-  }, [formikSetValues, formikInitialValues]);
-
-  useEffect(() => {
-    // calculate total quantity if kandangs quantity change
-    if (flockSourceKandangsValue && flockSourceKandangsValue.length > 0) {
-      let newTotalQuantity = 0;
-
-      flockSourceKandangsValue.forEach((item) => {
-        newTotalQuantity += parseFloat(item.quantity as string);
-      });
-
-      formik.setFieldValue('totalQuantity', newTotalQuantity);
-      formik.validateField('totalQuantity');
-    }
-  }, [formikSetValues, flockSourceKandangsValue]);
-
-  useEffect(() => {
-    // calculate total quantity if kandangs quantity change
-    if (
-      flockDestinationKandangsValue &&
-      flockDestinationKandangsValue.length > 0
-    ) {
-      let destinationKandangsTotalQuantity = 0;
-
-      flockDestinationKandangsValue.forEach((item) => {
-        destinationKandangsTotalQuantity += parseFloat(item.quantity as string);
-      });
-
-      if (
-        destinationKandangsTotalQuantity > parseFloat(String(totalQuantity))
-      ) {
-      }
-    }
-  }, [formikSetValues, flockDestinationKandangsValue]);
-
-  return (
-    <>
-      <section className='w-full max-w-3xl'>
-        <header className='flex flex-col gap-4'>
-          <Button
-            href='/production/transfer-to-laying'
-            variant='link'
-            className='w-fit p-0 text-primary'
-          >
-            <Icon icon='uil:arrow-left' width={24} height={24} />
-            Kembali
-          </Button>
-
-          <h1 className='text-2xl font-bold text-center'>
-            {type === 'add' && 'Tambah Transfer ke Laying'}
-            {type === 'edit' && 'Edit Transfer ke Laying'}
-            {type === 'detail' && 'Detail Transfer ke Laying'}
-          </h1>
-        </header>
-
-        {type === 'detail' &&
-          initialValues &&
-          !isLoadingApprovalHistory &&
-          isResponseSuccess(approvalHistory) && (
-            <div className='w-full my-4'>
-              <ApprovalSteps
-                approvals={formatGroupedApprovalsToApprovalSteps(
-                  TRANSFER_TO_LAYING_APPROVAL_LINE,
-                  approvalHistory.data,
-                  initialValues.approval
-                )}
-              />
-            </div>
-          )}
-
-        <div className='w-full my-4 flex flex-row justify-between gap-2'>
-          {type === 'detail' && (
-            <>
-              {isShowApproveRejectButton && (
-                <div className='w-full flex flex-row justify-end gap-2'>
-                  <RequirePermission permissions='lti.production.transfer_to_laying.approve'>
-                    <Button
-                      variant='outline'
-                      color='success'
-                      onClick={approveClickHandler}
-                      className='w-full sm:w-fit'
-                    >
-                      <Icon
-                        icon='material-symbols:check'
-                        width={24}
-                        height={24}
-                      />
-                      Approve
-                    </Button>
-                  </RequirePermission>
-
-                  <RequirePermission permissions='lti.production.transfer_to_laying.approve'>
-                    <Button
-                      variant='outline'
-                      color='error'
-                      onClick={rejectClickHandler}
-                      className='w-full sm:w-fit'
-                    >
-                      <Icon
-                        icon='material-symbols:close'
-                        width={24}
-                        height={24}
-                      />
-                      Reject
-                    </Button>
-                  </RequirePermission>
-                </div>
-              )}
-            </>
-          )}
-        </div>
-
-        <form
-          onSubmit={handleFormSubmit}
-          onReset={formik.handleReset}
-          className='w-full flex flex-col gap-6'
-        >
-          <div className='flex flex-col gap-4'>
-            <DateInput
-              required
-              label='Tanggal Transfer'
-              name='transfer_date'
-              placeholder='Masukkan tanggal transfer'
-              value={formik.values.transfer_date ?? ''}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              isError={
-                formik.touched.transfer_date &&
-                Boolean(formik.errors.transfer_date)
-              }
-              errorMessage={formik.errors.transfer_date}
-              readOnly={type === 'detail'}
-            />
-
-            <div className='flex flex-col sm:flex-row gap-4'>
-              <SelectInput
-                required
-                label='Flock Asal'
-                placeholder='Flock asal'
-                value={formik.values.flockSource as OptionType}
-                options={flockSourceOptions}
-                onChange={flockSourceChangeHandler}
-                isLoading={isLoadingFlockSourceOptions}
-                onInputChange={setFlockSourceInputValue}
-                onMenuScrollToBottom={loadMoreFlockSource}
-                isError={
-                  formik.touched.flockSource &&
-                  Boolean(typeof formik.errors.flockSource === 'string')
-                }
-                errorMessage={formik.errors.flockSource as string}
-                isDisabled={type === 'detail'}
-                isClearable
-              />
-
-              <SelectInput
-                required
-                label='Flock Tujuan'
-                placeholder='Flock tujuan'
-                value={formik.values.flockDestination as OptionType}
-                options={flockDestinationOptions}
-                onChange={flockDestinationChangeHandler}
-                isLoading={isLoadingFlockDestinationOptions}
-                onInputChange={setFlockDestinationInputValue}
-                onMenuScrollToBottom={loadMoreFlockDestination}
-                isError={
-                  formik.touched.flockDestination &&
-                  Boolean(typeof formik.errors.flockDestination === 'string')
-                }
-                errorMessage={formik.errors.flockDestination as string}
-                isDisabled={type === 'detail'}
-                isClearable
-              />
-            </div>
-
-            <NumberInput
-              required
-              name='totalQuantity'
-              label='Jumlah Transfer'
-              bottomLabel={
-                formikValues.maxTotalQuantity
-                  ? `Max: ${formikValues.maxTotalQuantity}`
-                  : undefined
-              }
-              placeholder='Masukkan jumlah transfer'
-              value={
-                formik.values.totalQuantity ? formik.values.totalQuantity : ''
-              }
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              isError={
-                formik.touched.totalQuantity &&
-                Boolean(formik.errors.totalQuantity)
-              }
-              errorMessage={formik.errors.totalQuantity}
-              disabled
-            />
-
-            <div className='flex flex-col gap-4'>
-              <div className='overflow-x-auto'>
-                <table className='table'>
-                  <thead>
-                    <tr>
-                      <th>Kandang Flock Asal</th>
-                      <th>Kuantitas</th>
-                    </tr>
-                  </thead>
-
-                  <tbody>
-                    {(!formik.values.flockSourceKandangs ||
-                      formik.values.flockSourceKandangs.length === 0) && (
-                      <tr>
-                        <td colSpan={2}>
-                          <p className='w-full text-center text-gray-400'>
-                            Pilih flock asal terlebih dahulu!
-                          </p>
-                        </td>
-                      </tr>
-                    )}
-
-                    {formik.values.flockSourceKandangs &&
-                      formik.values.flockSourceKandangs.map((kandang, idx) => (
-                        <tr key={idx}>
-                          <td>
-                            <SelectInput
-                              value={kandang.kandang}
-                              options={[]}
-                              isDisabled
-                              className={{
-                                wrapper: 'min-w-52',
-                              }}
-                            />
-                          </td>
-
-                          <td>
-                            <NumberInput
-                              required
-                              name={`flockSourceKandangs[${idx}].quantity`}
-                              bottomLabel={
-                                kandang.maxQuantity
-                                  ? `Max: ${kandang.maxQuantity}`
-                                  : undefined
-                              }
-                              placeholder='Masukkan kuantitas'
-                              value={kandang.quantity}
-                              onChange={formik.handleChange}
-                              onBlur={formik.handleBlur}
-                              isError={isFlockSourceKandangsRepeaterInputError(
-                                'quantity',
-                                idx
-                              )}
-                              errorMessage={flockSourceKandangsRepeaterInputErrorMessage(
-                                'quantity',
-                                idx
-                              )}
-                              readOnly={type === 'detail'}
-                              className={{
-                                wrapper: 'min-w-52',
-                              }}
-                            />
-                          </td>
-                        </tr>
-                      ))}
-                  </tbody>
-                </table>
-              </div>
-
-              <div className='overflow-x-auto'>
-                <table className='table'>
-                  <thead>
-                    <tr>
-                      <th>Kandang Flock Tujuan</th>
-                      <th>Kuantitas</th>
-                    </tr>
-                  </thead>
-
-                  <tbody>
-                    {(!formik.values.flockDestinationKandangs ||
-                      formik.values.flockDestinationKandangs.length === 0) && (
-                      <tr>
-                        <td colSpan={2}>
-                          <p className='w-full text-center text-gray-400'>
-                            Pilih flock tujuan terlebih dahulu!
-                          </p>
-                        </td>
-                      </tr>
-                    )}
-
-                    {formik.values.flockDestinationKandangs &&
-                      formik.values.flockDestinationKandangs.map(
-                        (kandang, idx) => (
-                          <tr key={idx}>
-                            <td>
-                              <SelectInput
-                                value={kandang.kandang}
-                                options={[]}
-                                isDisabled
-                                className={{
-                                  wrapper: 'min-w-52',
-                                }}
-                              />
-                            </td>
-
-                            <td>
-                              <NumberInput
-                                required
-                                name={`flockDestinationKandangs[${idx}].quantity`}
-                                bottomLabel={
-                                  kandang.maxQuantity
-                                    ? `Max: ${kandang.maxQuantity}`
-                                    : undefined
-                                }
-                                placeholder='Masukkan kuantitas'
-                                value={kandang.quantity}
-                                onChange={formik.handleChange}
-                                onBlur={formik.handleBlur}
-                                isError={isFlockDestinationKandangsRepeaterInputError(
-                                  'quantity',
-                                  idx
-                                )}
-                                errorMessage={flockDestinationKandangsRepeaterInputErrorMessage(
-                                  'quantity',
-                                  idx
-                                )}
-                                readOnly={type === 'detail'}
-                                className={{
-                                  wrapper: 'min-w-52',
-                                }}
-                              />
-                            </td>
-                          </tr>
-                        )
-                      )}
-                  </tbody>
-                </table>
-              </div>
-            </div>
-
-            <TextArea
-              required
-              rows={5}
-              name='reason'
-              label='Alasan Transfer'
-              placeholder='Alasan transfer'
-              value={formik.values.reason}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              isError={formik.touched.reason && Boolean(formik.errors.reason)}
-              errorMessage={formik.errors.reason}
-              readOnly={type === 'detail'}
-              disabled={Boolean(formik.errors.flockSource)}
-            />
-          </div>
-
-          <AlertErrorList formErrorList={formErrorList} onClose={close} />
-
-          {formErrorMessage && (
-            <div role='alert' className='alert alert-error w-full'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{formErrorMessage}</span>
-            </div>
-          )}
-
-          <div className='flex flex-row justify-between gap-2 flex-wrap'>
-            {type !== 'add' && (
-              <div className='flex flex-row justify-start gap-2'>
-                {isShowDeleteButton && (
-                  <RequirePermission permissions='lti.production.transfer_to_laying.delete'>
-                    <Button
-                      type='button'
-                      color='error'
-                      onClick={deleteTransferToLayingClickHandler}
-                      className='px-4'
-                    >
-                      <Icon
-                        icon='material-symbols:delete-outline-rounded'
-                        width={24}
-                        height={24}
-                        className='justify-start text-sm'
-                      />
-                      Delete
-                    </Button>
-                  </RequirePermission>
-                )}
-
-                {type !== 'edit' && isShowEditButton && (
-                  <RequirePermission permissions='lti.production.transfer_to_laying.update'>
-                    <Button
-                      type='button'
-                      color='warning'
-                      href={`/production/transfer-to-laying/detail/edit/?transferToLayingId=${initialValues?.id}`}
-                      className='px-4'
-                    >
-                      <Icon
-                        icon='material-symbols:edit-outline'
-                        width={24}
-                        height={24}
-                        className='justify-start text-sm'
-                      />
-                      Edit
-                    </Button>
-                  </RequirePermission>
-                )}
-              </div>
-            )}
-
-            {type !== 'detail' && (
-              <div
-                className={cn('flex flex-row justify-end gap-2', {
-                  'w-full': type === 'add',
-                })}
-              >
-                <Button type='reset' color='warning' className='px-4'>
-                  Reset
-                </Button>
-
-                <RequirePermission
-                  permissions={
-                    type === 'add'
-                      ? 'lti.production.transfer_to_laying.create'
-                      : 'lti.production.transfer_to_laying.update'
-                  }
-                >
-                  <Button
-                    type='submit'
-                    color='primary'
-                    isLoading={formik.isSubmitting}
-                    disabled={formik.isSubmitting}
-                    className='px-4'
-                  >
-                    Submit
-                  </Button>
-                </RequirePermission>
-              </div>
-            )}
-          </div>
-        </form>
-      </section>
-
-      {type !== 'add' && (
-        <ConfirmationModal
-          ref={deleteModal.ref}
-          type='error'
-          text='Apakah anda yakin ingin menghapus data transfer ke laying ini?'
-          secondaryButton={{
-            text: 'Tidak',
-          }}
-          primaryButton={{
-            text: 'Ya',
-            color: 'error',
-            isLoading: isDeleteLoading,
-            onClick: confirmationModalDeleteClickHandler,
-          }}
-        />
-      )}
-
-      {type === 'detail' && (
-        <>
-          <ConfirmationModalWithNotes
-            ref={approveModal.ref}
-            type='success'
-            text='Apakah anda yakin ingin approve data transfer ke laying ini?'
-            secondaryButton={{
-              text: 'Tidak',
-            }}
-            primaryButton={{
-              text: 'Ya',
-              color: 'success',
-              isLoading: isApproveLoading,
-              onClick: confirmationModalApproveClickHandler,
-            }}
-          />
-
-          <ConfirmationModalWithNotes
-            ref={rejectModal.ref}
-            type='error'
-            text='Apakah anda yakin ingin reject data transfer ke laying ini?'
-            secondaryButton={{
-              text: 'Tidak',
-            }}
-            primaryButton={{
-              text: 'Ya',
-              color: 'error',
-              isLoading: isRejectLoading,
-              onClick: confirmationModalRejectClickHandler,
-            }}
-          />
-        </>
-      )}
-    </>
-  );
-};
-
-export default TransferToLayingForm;

src/components/pages/purchase/PurchaseTable.tsx

@@ -16,6 +16,7 @@ import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import RequirePermission from '@/components/helper/RequirePermission';
+import Badge from '@/components/Badge';
 
 import { cn, formatDate } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
@@ -153,6 +154,57 @@ const PurchaseTable = () => {
         return `${diffDays} hari`;
       },
     },
+    {
+      header: 'Status Approval',
+      cell: (props) => {
+        const approval = props.row.original.latest_approval;
+        if (!approval) return '-';
+
+        const isRejected = approval.action === 'REJECTED';
+
+        let statusColor:
+          | 'warning'
+          | 'success'
+          | 'neutral'
+          | 'error'
+          | 'primary'
+          | 'info' = 'neutral';
+
+        switch (approval.step_number) {
+          case 1:
+            statusColor = 'neutral';
+            break;
+          case 2:
+            statusColor = 'primary';
+            break;
+          case 3:
+            statusColor = 'info';
+            break;
+          case 4:
+            statusColor = 'warning';
+            break;
+          case 5:
+            statusColor = 'success';
+            break;
+        }
+
+        if (isRejected) {
+          statusColor = 'error';
+        }
+
+        return (
+          <Badge
+            variant='soft'
+            color={statusColor}
+            className={{
+              badge: 'whitespace-nowrap',
+            }}
+          >
+            {isRejected ? 'Ditolak' : approval.step_name}
+          </Badge>
+        );
+      },
+    },
     {
       header: 'Aksi',
       cell: (props) => {

src/components/pages/purchase/order/PurchaseOrderDetail.tsx

@@ -605,7 +605,7 @@ const PurchaseOrderDetail = ({
   return (
     <section className='w-full'>
       {/* Approval and Action Buttons */}
-      <div className='flex justify-between items-center w-full my-6'>
+      <div className='flex flex-col sm:flex-row sm:justify-between sm:items-center w-full mb-6 gap-4 sm:gap-0'>
         <Button
           href='/purchase'
           variant='link'
@@ -630,7 +630,7 @@ const PurchaseOrderDetail = ({
                 onClick={handleApprovalClick}
                 variant='outline'
                 color='success'
-                className='w-full sm:w-fit'
+                className='flex-1 sm:w-fit'
               >
                 <Icon icon='material-symbols:check' width={24} height={24} />
                 Approve
@@ -649,7 +649,7 @@ const PurchaseOrderDetail = ({
               <Button
                 variant='outline'
                 color='error'
-                className='w-full sm:w-fit'
+                className='flex-1 sm:w-fit'
                 onClick={handleRejectionClick}
               >
                 <Icon icon='material-symbols:close' width={24} height={24} />

src/config/constant.ts

@@ -408,34 +408,39 @@ export const FINANCE_INITIAL_BALANCE_STATUS = ['SALDO_AWAL'];
 
 export const FINANCE_INJECTION_STATUS = ['INJECTION'];
 
-export const APPROVAL_WORKFLOWS = [
+export const APPROVAL_WORKFLOWS = {
-  {
+  PROJECT_FLOCKS: [
-    key: 'PROJECT_FLOCKS',
+    {
-    steps: [
+      step_number: 1,
-      {
+      step_name: 'Pengajuan',
-        step_number: 1,
+    },
-        step_name: 'Pengajuan',
+    {
-      },
+      step_number: 2,
-      {
+      step_name: 'Aktif',
-        step_number: 2,
+    },
-        step_name: 'Aktif',
+  ],
-      },
+  RECORDINGS: [
-    ],
+    {
-  },
+      step_number: 1,
-  {
+      step_name: 'Pengajuan',
-    key: 'RECORDINGS',
+    },
-    steps: [
+    {
-      {
+      step_number: 2,
-        step_number: 1,
+      step_name: 'Disetujui',
-        step_name: 'Pengajuan',
+    },
-      },
+  ],
-      {
+
-        step_number: 2,
+  TRANSFER_TO_LAYINGS: [
-        step_name: 'Disetujui',
+    {
-      },
+      step_number: 1,
-    ],
+      step_name: 'Pengajuan',
-  },
+    },
-];
+    {
+      step_number: 2,
+      step_name: 'Disetujui',
+    },
+  ],
+};
 
 export const ACCEPTED_FILE_TYPE = {
   PDF: {

src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx

@@ -486,21 +486,19 @@ export function DailyChecklistContent() {
 
     try {
       // Insert new phase links
-      if (tempSelectedPhaseIds.length > 0) {
+      const setDailyChecklistPhaseRes =
-        const setDailyChecklistPhaseRes =
+        await DailyChecklistApi.setDailyChecklistPhase(
-          await DailyChecklistApi.setDailyChecklistPhase(
+          dailyChecklistId,
-            dailyChecklistId,
+          tempSelectedPhaseIds
-            tempSelectedPhaseIds
+        );
-          );
 
-        if (isResponseError(setDailyChecklistPhaseRes)) {
+      if (isResponseError(setDailyChecklistPhaseRes)) {
-          console.error(
+        console.error(
-            'Error saving phases:',
+          'Error saving phases:',
-            setDailyChecklistPhaseRes.message
+          setDailyChecklistPhaseRes.message
-          );
+        );
-          toast.error('Gagal menyimpan fase');
+        toast.error('Gagal menyimpan fase');
-          return;
+        return;
-        }
       }
 
       setSelectedPhaseIds([...tempSelectedPhaseIds]);

src/services/api/production/transfer-to-laying.ts

@@ -1,15 +1,25 @@
+import * as XLSX from 'xlsx';
 import axios from 'axios';
 import { BaseApiService } from '@/services/api/base';
-import { BaseApiResponse, GroupedApprovals } from '@/types/api/api-general';
+import {
+  Approvals,
+  BaseApiResponse,
+  GroupedApprovals,
+} from '@/types/api/api-general';
 
 import {
   CreateTransferToLayingPayload,
   TransferToLaying,
   UpdateTransferToLayingPayload,
 } from '@/types/api/production/transfer-to-laying';
-import { httpClient } from '@/services/http/client';
+import { httpClient, httpClientFetcher } from '@/services/http/client';
-import { ProjectFlockAvailableQuantity } from '@/types/api/production/project-flock';
+import {
-import { isResponseSuccess } from '@/lib/api-helper';
+  ProjectFlockAvailableQuantity,
+  ProjectFlockMaxQuantity,
+} from '@/types/api/production/project-flock';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import toast from 'react-hot-toast';
+import { formatDate } from '@/lib/helper';
 
 export class TransferToLayingService extends BaseApiService<
   TransferToLaying,
@@ -128,7 +138,7 @@ export class TransferToLayingService extends BaseApiService<
     }
   }
 
-  async getAvailabelQty(projectFlockId: number) {
+  async getAvailableQty(projectFlockId: number) {
     try {
       const availableQtyRes = await httpClient<
         BaseApiResponse<ProjectFlockAvailableQuantity>
@@ -150,7 +160,7 @@ export class TransferToLayingService extends BaseApiService<
 
   async getMappedFlockKandangsAvailability(projectFlockId: number) {
     try {
-      const flockAvailableQty = await this.getAvailabelQty(projectFlockId);
+      const flockAvailableQty = await this.getAvailableQty(projectFlockId);
 
       const flockKandangsAvailableQty = isResponseSuccess(flockAvailableQty)
         ? flockAvailableQty.data.kandangs
@@ -173,6 +183,101 @@ export class TransferToLayingService extends BaseApiService<
     }
   }
 
+  async getMaxTargetQty(projectFlockId: number) {
+    try {
+      const availableQtyRes = await httpClient<
+        BaseApiResponse<ProjectFlockMaxQuantity>
+      >(`${this.basePath}/project-flocks/${projectFlockId}/max-target-qty`);
+
+      return availableQtyRes;
+    } catch (error) {
+      if (axios.isAxiosError<BaseApiResponse<ProjectFlockMaxQuantity>>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
+
+  async getMappedFlockKandangsMaxTargetQty(projectFlockId: number) {
+    try {
+      const flockMaxTargetQty = await this.getMaxTargetQty(projectFlockId);
+
+      const flockKandangsMaxTargetQty = isResponseSuccess(flockMaxTargetQty)
+        ? flockMaxTargetQty.data.project_flock_kandangs
+        : [];
+
+      const mappedFlockKandangsMaxTargetQty: Record<
+        number,
+        (typeof flockKandangsMaxTargetQty)[0]
+      > = {};
+
+      flockKandangsMaxTargetQty.forEach((item) => {
+        if (!mappedFlockKandangsMaxTargetQty[item.project_flock_kandang_id]) {
+          mappedFlockKandangsMaxTargetQty[item.project_flock_kandang_id] = item;
+        }
+      });
+
+      return mappedFlockKandangsMaxTargetQty;
+    } catch (error) {
+      return undefined;
+    }
+  }
+
+  async exportToExcel(initialQueryString: string) {
+    const params = new URLSearchParams(initialQueryString);
+
+    params.set('limit', '9999999');
+
+    const queryString = `?${params.toString()}`;
+
+    try {
+      const transferToLayings = await httpClientFetcher<
+        BaseApiResponse<TransferToLaying[]>
+      >(`${this.basePath}${queryString}`);
+
+      if (isResponseError(transferToLayings)) {
+        toast.error('Gagal melakukan export transfer to laying! Coba lagi.');
+        return;
+      }
+
+      const rows = transferToLayings.data;
+
+      const formattedRows = [];
+
+      for (let i = 0; i < rows.length; i++) {
+        formattedRows.push({
+          id: rows[i].id,
+          transfer_number: rows[i].transfer_number,
+          transfer_date: formatDate(rows[i].transfer_date, 'DD-MM-YYYY'),
+          project_flock_source: rows[i].from_project_flock.flock_name,
+          project_flock_target: rows[i].to_project_flock.flock_name,
+          pending_usage_qty: rows[i].pending_usage_qty,
+          usage_qty: rows[i].usage_qty,
+          project_flock_source_kandang: rows[i].sources
+            .map((item) => item.source_project_flock_kandang.kandang.name)
+            .join(', '),
+          project_flock_target_kandang: rows[i].targets
+            .map((item) => item.target_project_flock_kandang.kandang.name)
+            .join(', '),
+          created_user: rows[i].created_user.name,
+          created_at: formatDate(rows[i].created_at, 'DD-MM-YYYY'),
+          updated_at: formatDate(rows[i].updated_at, 'DD-MM-YYYY'),
+          notes: rows[i].notes,
+        });
+      }
+
+      const ws = XLSX.utils.json_to_sheet(formattedRows);
+      const wb = XLSX.utils.book_new();
+      XLSX.utils.book_append_sheet(wb, ws, 'transfer-ke-laying');
+
+      // triggers download in browser
+      XLSX.writeFile(wb, 'transfer-ke-laying.xlsx');
+    } catch (error) {
+      toast.error('Gagal melakukan export transfer to laying! Coba lagi.');
+    }
+  }
+
   async getApprovalHistory(
     transferToLayingId: number,
     group: boolean = true,
@@ -202,6 +307,33 @@ export class TransferToLayingService extends BaseApiService<
       return undefined;
     }
   }
+
+  async getApprovalLineHistory(
+    transferToLayingId: number,
+    page: number = 1,
+    limit: number = 100
+  ) {
+    try {
+      const approvalHistoryRes = await httpClient<Approvals>('/approvals', {
+        query: {
+          module_name: 'TRANSFER_TO_LAYINGS',
+          module_id: transferToLayingId,
+          group_step_number: 'false',
+          page,
+          limit,
+          order_by_date: 'ASC',
+        },
+      });
+
+      return approvalHistoryRes;
+    } catch (error) {
+      if (axios.isAxiosError<Approvals>(error)) {
+        return error.response?.data;
+      }
+
+      return undefined;
+    }
+  }
 }
 
 export const TransferToLayingApi = new TransferToLayingService(

src/types/api/api-general.d.ts

@@ -113,7 +113,7 @@ export type BaseGroupedApproval = {
   approvals: BaseApproval[];
 };
 
-export type Approvals = BaseApiResponse<BaseApproval>;
+export type Approvals = BaseApiResponse<BaseApproval[]>;
 
 export type GroupedApprovals = BaseApiResponse<BaseGroupedApproval[]>;
 

src/types/api/inventory/movement.d.ts

@@ -73,7 +73,7 @@ export type CreateMovementPayloadData = {
     document_index?: number;
     driver_name: string;
     vehicle_plate: string;
-    supplier_id: number;
+    supplier_id?: number | null;
     products: {
       product_id: number;
       product_qty: number;

src/types/api/production/project-flock.d.ts

@@ -89,6 +89,14 @@ export type ProjectFlockAvailableQuantity = {
   }[];
 };
 
+export type ProjectFlockMaxQuantity = {
+  project_flock_id: number;
+  project_flock_kandangs: {
+    project_flock_kandang_id: number;
+    max_target_qty: number;
+  }[];
+};
+
 export type ProjectFlockPeriods = {
   id: number;
   name: string;