refactor(FE): Disable invoice download feature

[FIX/FE] Transfer to Laying

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

src/app/marketing/page.tsx

@@ -1,9 +1,14 @@
+import DeliveryOrderFormModal from '@/components/pages/marketing/DeliveryOrderFormModal';
 import MarketingTable from '@/components/pages/marketing/MarketingTable';
+import SalesOrderFormModal from '@/components/pages/marketing/SalesOrderFormModal';
 
 const Marketing = () => {
   return (
-    <div className='w-full p-4'>
+    <div className='w-full'>
       <MarketingTable />
+
+      <SalesOrderFormModal />
+      <DeliveryOrderFormModal />
     </div>
   );
 };

src/app/not-found.tsx

@@ -0,0 +1,5 @@
+import PageNotFound from '@/components/helper/NotFoundPage';
+
+export default function NotFound() {
+  return <PageNotFound />;
+}

src/app/production/project-flock/detail/page.tsx

@@ -50,5 +50,3 @@ const ProjectFlockDetailPage = () => {
 };
 
 export default ProjectFlockDetailPage;
-ProjectFlockDetail;
-ProjectFlockDetail;

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

@@ -1,15 +1,25 @@
 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';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 const TransferToLaying = () => {
   return (
     <section className='w-full'>
       <TransferToLayingsTable />
 
-      <TransferToLayingFormModal />
+      <RequirePermission
+        permissions={[
+          'lti.production.transfer_to_laying.create',
+          'lti.production.transfer_to_laying.update',
+        ]}
+      >
+        <TransferToLayingFormModal />
+      </RequirePermission>
 
-      <TransferToLayingDetailModal />
+      <RequirePermission permissions='lti.production.transfer_to_laying.detail'>
+        <TransferToLayingDetailModal />
+      </RequirePermission>
     </section>
   );
 };

src/components/Drawer.tsx

@@ -16,7 +16,6 @@ interface DrawerProps {
   onBackdropClick?: () => void;
   closeOnBackdropClick?: boolean;
   expandedContent?: ReactNode;
-  expandedWidth?: string;
 }
 
 type DrawerClassName = {
@@ -25,6 +24,7 @@ type DrawerClassName = {
   drawerSide?: string;
   drawerOverlay?: string;
   drawerSidebarContent?: string;
+  drawerExpandedContent?: string;
 };
 
 const Drawer = ({
@@ -39,7 +39,6 @@ const Drawer = ({
   onBackdropClick,
   closeOnBackdropClick = true,
   expandedContent,
-  expandedWidth = 'w-[400px]',
 }: DrawerProps) => {
   const getDrawerClassNames = (): DrawerClassName => {
     const baseClassNames = {
@@ -56,6 +55,9 @@ const Drawer = ({
           ? 'w-full lg:min-w-[600px] lg:max-w-[600px]'
           : 'w-full max-w-[300px] lg:w-[300px]';
       }
+      if (className?.drawerSidebarContent) {
+        return '';
+      }
       return 'w-full sm:min-w-120 sm:w-fit';
     };
 
@@ -174,7 +176,7 @@ const Drawer = ({
             <div
               className={cn(
                 'border-l border-gray-200 bg-white flex flex-col h-full',
-                expandedWidth
+                className?.drawerExpandedContent
               )}
             >
               <div className='overflow-y-auto flex-1 h-full'>

src/components/MainDrawer.tsx

@@ -74,6 +74,8 @@ const MainDrawer = ({
 
   const formattedPathname = pathname.endsWith('/') ? pathname : `${pathname}/`;
 
+  const isPathnameNotFoundPage = formattedPathname === '/404/';
+
   const isPermitted = ROUTE_PERMISSIONS[formattedPathname]?.some((permission) =>
     permissionCheck(permission)
   );
@@ -82,10 +84,14 @@ const MainDrawer = ({
     setMainDrawerOpen(!mainDrawerOpen);
   };
 
-  if (!isPermitted) {
+  if (!isPermitted && !isPathnameNotFoundPage) {
     return <PermissionNotFound />;
   }
 
+  if (isPathnameNotFoundPage) {
+    return children;
+  }
+
   return (
     <Drawer
       open={mainDrawerOpen}

src/components/helper/NotFoundPage.tsx

@@ -0,0 +1,17 @@
+import Button from '@/components/Button';
+
+const PageNotFound = () => {
+  return (
+    <div className='w-full h-full flex-1 flex flex-col justify-center items-center gap-4'>
+      <h2 className='text-2xl font-bold text-error'>Halaman Tidak Ditemukan</h2>
+      <p className='text-gray-600 text-center'>
+        Halaman atau data yang anda cari tidak ditemukan.
+      </p>
+      <Button href='/dashboard' className='text-base-100'>
+        Kembali ke Dashboard
+      </Button>
+    </div>
+  );
+};
+
+export default PageNotFound;

src/components/helper/PermissionNotFound.tsx

@@ -1,10 +1,17 @@
+import Button from '@/components/Button';
+
 const PermissionNotFound = () => {
   return (
     <div className='w-full h-screen flex flex-col justify-center items-center gap-4'>
-      <h2 className='text-2xl font-bold text-error'>Permission Not Found</h2>
+      <h2 className='text-2xl font-bold text-error'>
+        Hak Akses Tidak Ditemukan
+      </h2>
       <p className='text-gray-600 text-center'>
-        You do not have permission to access this page.
+        Anda tidak memiliki hak akses untuk mengakses halaman ini.
       </p>
+      <Button href='/dashboard' className='text-base-100'>
+        Kembali ke Dashboard
+      </Button>
     </div>
   );
 };

src/components/helper/StatusBadge.tsx

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

src/components/helper/form/FormErrors.tsx

@@ -1,5 +1,6 @@
 import Alert from '@/components/Alert';
 import Button from '@/components/Button';
+import { cn } from '@/lib/helper';
 import { Icon } from '@iconify/react';
 import { useState } from 'react';
 
@@ -10,34 +11,68 @@ import { useState } from 'react';
  */
 const AlertErrorList = ({
   formErrorList,
+  className,
   onClose,
+  title,
 }: {
   formErrorList: string[];
+  className?: {
+    alert?: string;
+    button?: string;
+    headerWrapper?: string;
+    headerIcon?: string;
+    headerText?: string;
+    titleWrapper?: string;
+    ul?: string;
+    li?: string;
+  };
   onClose: () => void;
+  title?: string;
 }) => {
   if (formErrorList.length === 0) return null;
 
   return (
-    <Alert color='error' className='w-full flex flex-col gap-2 px-4'>
-      <div className='flex justify-between items-center gap-2 w-full'>
-        <div className='flex items-center gap-2'>
-          <Icon icon='material-symbols:error-outline' width={24} height={24} />
-          <span className='font-semibold'>
-            Terdapat {formErrorList.length} error pada form:
+    <Alert
+      color='error'
+      className={cn(
+        'w-full flex flex-col gap-2 px-3 rounded-lg',
+        className?.alert
+      )}
+    >
+      <div
+        className={cn(
+          'flex justify-between items-center gap-2 w-full',
+          className?.headerWrapper
+        )}
+      >
+        <div className={cn('flex items-center gap-2', className?.titleWrapper)}>
+          <Icon
+            icon='material-symbols:error-outline'
+            className={cn(className?.headerIcon)}
+            width={20}
+            height={20}
+          />
+          <span className={cn('font-semibold text-sm', className?.headerText)}>
+            {title || `Terdapat ${formErrorList.length} error pada form:`}
           </span>
         </div>
         <Button
           onClick={onClose}
           variant='link'
-          className='ml-auto p-0 w-fit text-white'
+          className={cn('ml-auto p-0 w-fit text-white', className?.button)}
           color='none'
         >
-          <Icon icon='material-symbols:close' width={24} height={24} />
+          <Icon icon='material-symbols:close' width={20} height={20} />
         </Button>
       </div>
-      <ul className='list-disc list-inside pl-8 space-y-1 w-full'>
+      <ul
+        className={cn(
+          'list-disc list-inside pl-4 space-y-1.5 w-full',
+          className?.ul
+        )}
+      >
         {formErrorList.map((error, index) => (
-          <li key={index} className='text-sm'>
+          <li key={index} className={cn('text-sm', className?.li)}>
             {error}
           </li>
         ))}

src/components/input/DebouncedTextArea.tsx

@@ -7,6 +7,7 @@ import TextArea, { TextAreaProps } from '@/components/input/TextArea';
 
 interface DebouncedTextAreaProps extends TextAreaProps {
   delay?: number;
+  ref?: React.RefObject<HTMLTextAreaElement | null>;
 }
 
 const DebouncedTextArea = (props: DebouncedTextAreaProps) => {
@@ -19,6 +20,11 @@ const DebouncedTextArea = (props: DebouncedTextAreaProps) => {
   const [debouncedChangeEvent] = useDebounce(internalChangeEvent, delay ?? 300);
   const [debouncedValue] = useDebounce(internalValue, delay ?? 300);
 
+  // Sync internal value with external props.value when it changes (e.g., form reset)
+  useEffect(() => {
+    setInternalValue(props.value);
+  }, [props.value]);
+
   const internalChangeHandler: ChangeEventHandler<HTMLTextAreaElement> = (
     e
   ) => {
@@ -35,6 +41,7 @@ const DebouncedTextArea = (props: DebouncedTextAreaProps) => {
   return (
     <TextArea
       {...props}
+      ref={props.ref}
       value={internalValue}
       onChange={internalChangeHandler}
     />

src/components/input/TextArea.tsx

@@ -28,6 +28,7 @@ export interface TextAreaProps {
   onChange?: ChangeEventHandler<HTMLTextAreaElement>;
   onBlur?: FocusEventHandler<HTMLTextAreaElement>;
   rows?: number;
+  ref?: React.RefObject<HTMLTextAreaElement | null>;
 }
 
 const TextArea = ({
@@ -49,6 +50,7 @@ const TextArea = ({
   readOnly = false,
   isLoading = false,
   rows = 3,
+  ref,
 }: TextAreaProps) => {
   return (
     <div
@@ -99,6 +101,7 @@ const TextArea = ({
         onBlur={onBlur}
         disabled={disabled}
         readOnly={readOnly}
+        ref={ref}
       />
 
       {(isLoading || endAdornment) && (

src/components/modal/ConfirmationModal.tsx

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

src/components/modal/ConfirmationModalWithNotes.tsx

@@ -13,6 +13,7 @@ interface ConfirmationModalWithNotesProps
   extends Omit<ConfirmationModalProps, 'children' | 'primaryButton'> {
   rows?: number;
   placeholder?: string;
+  onClose?: () => void;
 
   primaryButton?: {
     text?: string;
@@ -32,6 +33,7 @@ const ConfirmationModalWithNotes: React.FC<ConfirmationModalWithNotesProps> = ({
   className,
   rows = 3,
   placeholder = 'Catatan...',
+  onClose,
   ...props
 }) => {
   const randomId = useId();
@@ -41,6 +43,11 @@ const ConfirmationModalWithNotes: React.FC<ConfirmationModalWithNotesProps> = ({
     setNotes(e.target.value);
   };
 
+  const closeModalHandler = () => {
+    onClose?.();
+    ref.current?.close();
+  };
+
   return (
     <ConfirmationModal
       ref={ref}
@@ -49,12 +56,32 @@ const ConfirmationModalWithNotes: React.FC<ConfirmationModalWithNotesProps> = ({
       closeOnBackdrop={closeOnBackdrop}
       primaryButton={{
         ...primaryButton,
-        onClick: () => {
-          primaryButton?.onClick?.(notes);
+        onClick: (e) => {
+          if (primaryButton && primaryButton?.onClick) {
+            primaryButton?.onClick?.(notes);
+          } else {
+            closeModalHandler();
+          }
+
           setNotes('');
         },
       }}
-      secondaryButton={secondaryButton}
+      secondaryButton={
+        secondaryButton
+          ? {
+              text: secondaryButton?.text ?? 'Tidak',
+              onClick: (e) => {
+                if (secondaryButton && secondaryButton?.onClick) {
+                  secondaryButton.onClick?.(e);
+                } else {
+                  closeModalHandler();
+                }
+
+                setNotes('');
+              },
+            }
+          : undefined
+      }
       className={className}
       {...props}
     >

src/components/pages/ApprovalSteps.tsx

@@ -309,9 +309,10 @@ const useApprovalSteps = ({
   moduleId: string;
   params?: {
     page?: number;
-    limit: number | string;
+    limit?: number | string;
     search?: string;
     group_step_number?: boolean;
+    order_by_date?: 'ASC' | 'DESC';
   };
 }) => {
   // Membuat URL Parameters
@@ -319,6 +320,8 @@ const useApprovalSteps = ({
     page: params?.page?.toString() || '',
     limit: params?.limit?.toString() || '',
     search: params?.search || '',
+    group_step_number: params?.group_step_number?.toString() || '',
+    order_by_date: params?.order_by_date || '',
   }).toString();
 
   // fetching data approvals

src/components/pages/closing/ClosingDetail.tsx

@@ -66,7 +66,13 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
       {
         id: 'overhead',
         label: 'Overhead',
-        content: <ClosingOverheadTabContent projectFlockId={id} />,
+        content: (
+          <ClosingOverheadTabContent
+            projectFlockId={id}
+            generalInformation={initialValue}
+            kandangData={kandangData}
+          />
+        ),
       },
       {
         id: 'hppEkspedisi',

src/components/pages/closing/ClosingGeneralInformationTable.tsx

@@ -1,3 +1,4 @@
+import { formatNumber } from '@/lib/helper';
 import { ClosingGeneralInformation } from '@/types/api/closing';
 import { ProjectFlock } from '@/types/api/production/project-flock';
 import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
@@ -56,8 +57,8 @@ const ClosingGeneralInformationTable = ({
                   <td>:</td>
                   <td>
                     {!kandangData
-                      ? (initialValue?.population ?? 0)
-                      : (chickinPopulation ?? 0)}{' '}
+                      ? formatNumber(initialValue?.population || 0)
+                      : formatNumber(chickinPopulation || 0)}{' '}
                     Ekor
                   </td>
                 </tr>

src/components/pages/closing/ClosingIncomingSapronaksTable.tsx

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

src/components/pages/closing/ClosingOutgoingSapronaksTable.tsx

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

src/components/pages/closing/ClosingOverheadTabContent.tsx

@@ -1,16 +1,26 @@
 import ClosingOverheadTable from '@/components/pages/closing/ClosingOverheadTable';
+import { ClosingGeneralInformation } from '@/types/api/closing';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 
 interface ClosingOverheadTabContentProps {
   projectFlockId: number;
+  generalInformation?: ClosingGeneralInformation;
+  kandangData?: ProjectFlockKandang;
 }
 
 const ClosingOverheadTabContent = ({
   projectFlockId,
+  generalInformation,
+  kandangData,
 }: ClosingOverheadTabContentProps) => {
   return (
     <div className='flex flex-col gap-4'>
       {projectFlockId && (
-        <ClosingOverheadTable projectFlockId={projectFlockId} />
+        <ClosingOverheadTable
+          projectFlockId={projectFlockId}
+          generalInformation={generalInformation}
+          kandangData={kandangData}
+        />
       )}
     </div>
   );

src/components/pages/closing/ClosingOverheadTable.tsx

@@ -3,7 +3,13 @@ import Table, { TABLE_DEFAULT_STYLING } from '@/components/Table';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { cn, formatCurrency, formatDate, formatNumber } from '@/lib/helper';
 import { ClosingApi } from '@/services/api/closing';
-import { Overhead, OverheadTotal } from '@/types/api/closing';
+import {
+  ClosingGeneralInformation,
+  Overhead,
+  OverheadTotal,
+} from '@/types/api/closing';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
+import { Icon } from '@iconify/react';
 import { ColumnDef } from '@tanstack/react-table';
 import { useSearchParams } from 'next/navigation';
 import { useMemo } from 'react';
@@ -11,16 +17,30 @@ import useSWR from 'swr';
 
 interface ClosingOverheadTableProps {
   projectFlockId: number;
+  generalInformation?: ClosingGeneralInformation;
+  kandangData?: ProjectFlockKandang;
 }
 
 const ClosingOverheadTable = ({
   projectFlockId,
+  generalInformation,
+  kandangData,
 }: ClosingOverheadTableProps) => {
   const searchParams = useSearchParams();
   const kandangId = searchParams.get('kandangId');
 
   const { data: overhead, isLoading: isLoadingOverhead } = useSWR(
-    `${ClosingApi.basePath}/${projectFlockId}${kandangId ? `/${kandangId}` : ''}/overhead`,
+    `${ClosingApi.basePath}/${projectFlockId}/overhead`,
+    () => ClosingApi.getOverhead(projectFlockId),
+    {
+      keepPreviousData: true,
+    }
+  );
+
+  const { data: overheadKandang, isLoading: isLoadingOverheadKandang } = useSWR(
+    kandangId
+      ? `${ClosingApi.basePath}/${projectFlockId}/${kandangId}/overhead`
+      : undefined,
     () =>
       ClosingApi.getOverhead(
         projectFlockId,
@@ -31,6 +51,26 @@ const ClosingOverheadTable = ({
     }
   );
 
+  const chickinPopulation = useMemo(() => {
+    if (kandangData) {
+      return kandangData?.chickins?.reduce(
+        (acc, chickin) => acc + chickin.usage_qty,
+        0
+      );
+    }
+    return 0;
+  }, [kandangData]);
+
+  const kandangTotal = useMemo(() => {
+    if (!isResponseSuccess(overhead)) {
+      return 0;
+    }
+    const total =
+      ((chickinPopulation ?? 0) * overhead.data.total.actual_total_amount) /
+      (generalInformation?.population ?? 0);
+    return total;
+  }, [overhead, chickinPopulation, generalInformation]);
+
   // Helper function to create columns with footer support
   const createColumns = (
     total?: OverheadTotal,
@@ -44,29 +84,22 @@ const ClosingOverheadTable = ({
           {
             id: 'budget_quantity',
             header: 'Jumlah',
-            accessorFn: (props) =>
-              props.budget_quantity ? formatNumber(props.budget_quantity) : '-',
+            accessorFn: (props) => formatNumber(props.budget_quantity),
             footer: total ? () => formatNumber(total.budget_quantity) : '',
           },
           {
             id: 'budget_unit_price',
             header: 'Harga Satuan',
-            accessorFn: (props) =>
-              props.budget_unit_price
-                ? formatCurrency(props.budget_unit_price)
-                : '-',
+            accessorFn: (props) => formatCurrency(props.budget_unit_price),
             footer: '',
           },
           {
             id: 'budget_total_amount',
             header: 'Total',
-            accessorFn: (props) =>
-              props.budget_total_amount
-                ? formatCurrency(props.budget_total_amount)
-                : '-',
+            accessorFn: (props) => formatCurrency(props.budget_total_amount),
             footer: total
               ? () => formatCurrency(total.budget_total_amount)
-              : '',
+              : '0',
           },
         ],
       },
@@ -78,37 +111,28 @@ const ClosingOverheadTable = ({
             id: 'actual_date',
             header: 'Tanggal',
             accessorFn: (props) =>
-              props.actual_date
-                ? formatDate(props.actual_date, 'DD MMM, YYYY')
-                : '-',
+              formatDate(props.actual_date, 'DD MMM, YYYY'),
             footer: '',
           },
           {
             id: 'actual_quantity',
             header: 'Jumlah',
-            accessorFn: (props) =>
-              props.actual_quantity ? formatNumber(props.actual_quantity) : '-',
-            footer: total ? () => formatNumber(total.actual_quantity) : '',
+            accessorFn: (props) => formatNumber(props.actual_quantity),
+            footer: total ? () => formatNumber(total.actual_quantity) : '0',
           },
           {
             id: 'actual_unit_price',
             header: 'Harga Satuan',
-            accessorFn: (props) =>
-              props.actual_unit_price
-                ? formatCurrency(props.actual_unit_price)
-                : '-',
+            accessorFn: (props) => formatCurrency(props.actual_unit_price),
             footer: '',
           },
           {
             id: 'actual_total_amount',
             header: 'Total',
-            accessorFn: (props) =>
-              props.actual_total_amount
-                ? formatCurrency(props.actual_total_amount)
-                : '-',
+            accessorFn: (props) => formatCurrency(props.actual_total_amount),
             footer: total
               ? () => formatCurrency(total.actual_total_amount)
-              : '',
+              : '0',
           },
         ],
       },
@@ -118,35 +142,25 @@ const ClosingOverheadTable = ({
       {
         id: 'actual_date',
         header: 'Tanggal',
-        accessorFn: (props) =>
-          props.actual_date
-            ? formatDate(props.actual_date, 'DD MMM, YYYY')
-            : '-',
+        accessorFn: (props) => formatDate(props.actual_date, 'DD MMM, YYYY'),
         footer: '',
       },
       {
         id: 'actual_quantity',
         header: 'Jumlah',
-        accessorFn: (props) =>
-          props.actual_quantity ? formatNumber(props.actual_quantity) : '-',
+        accessorFn: (props) => formatNumber(props.actual_quantity),
         footer: total ? () => formatNumber(total.actual_quantity) : '',
       },
       {
         id: 'actual_unit_price',
         header: 'Harga Satuan',
-        accessorFn: (props) =>
-          props.actual_unit_price
-            ? formatCurrency(props.actual_unit_price)
-            : '-',
+        accessorFn: (props) => formatCurrency(props.actual_unit_price),
         footer: '',
       },
       {
         id: 'actual_total_amount',
         header: 'Total',
-        accessorFn: (props) =>
-          props.actual_total_amount
-            ? formatCurrency(props.actual_total_amount)
-            : '-',
+        accessorFn: (props) => formatCurrency(props.actual_total_amount),
         footer: total ? () => formatCurrency(total.actual_total_amount) : '',
       },
     ];
@@ -171,8 +185,7 @@ const ClosingOverheadTable = ({
       {
         id: 'cost_per_bird',
         header: 'Rp/Ekor',
-        accessorFn: (props) =>
-          props.cost_per_bird ? formatCurrency(props.cost_per_bird) : '-',
+        accessorFn: (props) => formatCurrency(props.cost_per_bird),
         footer: total ? () => formatCurrency(total.cost_per_bird) : '',
       },
     ];
@@ -183,11 +196,15 @@ const ClosingOverheadTable = ({
     () =>
       isResponseSuccess(overhead)
         ? createColumns(
-            overhead.data?.total,
+            kandangId
+              ? isResponseSuccess(overheadKandang)
+                ? overheadKandang.data?.total
+                : undefined
+              : overhead.data?.total,
             kandangId ? Number(kandangId) : undefined
           )
         : createColumns(),
-    [overhead]
+    [overhead, kandangId, overheadKandang]
   );
 
   return (
@@ -203,7 +220,13 @@ const ClosingOverheadTable = ({
       >
         <Table<Overhead>
           data={
-            isResponseSuccess(overhead) ? (overhead.data?.overheads ?? []) : []
+            kandangId
+              ? isResponseSuccess(overheadKandang)
+                ? (overheadKandang.data?.overheads ?? [])
+                : []
+              : isResponseSuccess(overhead)
+                ? (overhead.data?.overheads ?? [])
+                : []
           }
           columns={columns}
           className={{
@@ -220,6 +243,60 @@ const ClosingOverheadTable = ({
               : false
           }
         />
+        {kandangId && (
+          <Card
+            className={{
+              wrapper: 'w-full',
+              body: 'p-4 shadow-button-soft border border-base-content/10 rounded-lg',
+            }}
+          >
+            <div className='flex flex-row gap-3 w-full justify-center items-stretch'>
+              <div className='flex flex-row items-center justify-between'>
+                <h2 className='text-base font-bold'>Pembelian Kandang </h2>
+              </div>
+              <div className='flex flex-col items-center justify-center'>
+                <Icon icon='heroicons:equals' className='inline' />
+              </div>
+              <div className='flex flex-col flex-1 gap-1.5'>
+                <div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
+                  Populasi Akhir KANDANG{' '}
+                  <Icon icon='heroicons:x-mark' className='inline' /> Pemakaian
+                  Di FARM
+                </div>
+                <hr className='w-full h-fit m-0 p-0 text-base-content/65' />
+                <div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
+                  Populasi Akhir Proyek
+                </div>
+              </div>
+              <div className='flex flex-col items-center justify-center'>
+                <Icon icon='heroicons:equals' className='inline' />
+              </div>
+              <div className='flex flex-col flex-1 gap-1.5'>
+                <div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
+                  {formatNumber(chickinPopulation ?? 0)}
+                  <Icon icon='heroicons:x-mark' className='inline' />
+                  {formatCurrency(
+                    isResponseSuccess(overhead)
+                      ? overhead.data?.total.actual_total_amount
+                      : 0
+                  )}
+                </div>
+                <hr className='w-full h-fit m-0 p-0 text-base-content/65' />
+                <div className='flex flex-row gap-1.5 text-center items-center justify-center font-medium'>
+                  {formatNumber(generalInformation?.population ?? 0)}
+                </div>
+              </div>
+              <div className='flex flex-col items-center justify-center'>
+                <Icon icon='heroicons:equals' className='inline' />
+              </div>
+              <div className='flex flex-row items-center justify-between'>
+                <h2 className='text-base font-bold'>
+                  {formatNumber(kandangTotal || 0)}
+                </h2>
+              </div>
+            </div>
+          </Card>
+        )}
       </Card>
     </>
   );

src/components/pages/dashboard/chart/DashboardLineChart.tsx

@@ -67,7 +67,7 @@ const lineColors: Record<string, string> = {
   act_fcr: '#10B981',
   std_fcr: '#10B981',
   act_fcr_cum: '#F52419',
-  std_fcr_cum: '#10B981',
+  std_fcr_cum: '#F52419',
   normal: '#10B981',
   abnormal: '#F52419',
   act_deplesi: '#10B981',
@@ -659,44 +659,50 @@ const DashboardLineChart = ({
                 seriesData = comparisonChart?.series || [];
               }
 
-              return seriesData
-                .filter((series) => visibleSeries.has(series.id))
-                .map((series, index) => {
-                  const isStandard = series.id
-                    .toString()
-                    .toLowerCase()
-                    .includes('std');
-                  // Use series.id directly as dataKey to match dataset fields
-                  const dataKey = series.id.toString();
+              return seriesData.map((series, originalIndex) => {
+                // Skip rendering if series is not visible
+                if (!visibleSeries.has(series.id)) {
+                  return null;
+                }
 
-                  return (
-                    <Line
-                      key={`${series.id}--${index}`}
-                      type='monotone'
-                      dataKey={dataKey}
-                      name={series.label}
-                      stroke={getLineColor(series.id, index, analysisMode)}
-                      opacity={isStandard ? 0.5 : 1}
-                      strokeWidth={2}
-                      strokeDasharray={isStandard ? '5 5' : undefined}
-                      dot={
-                        isStandard
-                          ? false
-                          : {
-                              r: 3,
-                              fill: '#fff',
-                              stroke: getLineColor(
-                                series.id,
-                                index,
-                                analysisMode
-                              ),
-                              strokeWidth: 2,
-                            }
-                      }
-                      activeDot={isStandard ? undefined : { r: 5 }}
-                    />
-                  );
-                });
+                const isStandard = series.id
+                  .toString()
+                  .toLowerCase()
+                  .includes('std');
+                const dataKey = series.id.toString();
+
+                return (
+                  <Line
+                    key={`${series.id}--${originalIndex}`}
+                    type='monotone'
+                    dataKey={dataKey}
+                    name={series.label}
+                    stroke={getLineColor(
+                      series.id,
+                      originalIndex,
+                      analysisMode
+                    )}
+                    opacity={isStandard ? 0.5 : 1}
+                    strokeWidth={2}
+                    strokeDasharray={isStandard ? '5 5' : undefined}
+                    dot={
+                      isStandard
+                        ? false
+                        : {
+                            r: 3,
+                            fill: '#fff',
+                            stroke: getLineColor(
+                              series.id,
+                              originalIndex,
+                              analysisMode
+                            ),
+                            strokeWidth: 2,
+                          }
+                    }
+                    activeDot={isStandard ? undefined : { r: 5 }}
+                  />
+                );
+              });
             })()}
           </LineChart>
         </ResponsiveContainer>

src/components/pages/dashboard/export/DashboardExportCharts.tsx

@@ -66,7 +66,7 @@ const lineColors: Record<string, string> = {
   act_fcr: '#10B981',
   std_fcr: '#10B981',
   act_fcr_cum: '#F52419',
-  std_fcr_cum: '#10B981',
+  std_fcr_cum: '#F52419',
   normal: '#10B981',
   abnormal: '#F52419',
   act_deplesi: '#10B981',

src/components/pages/expense/ExpenseRequestContent.tsx

@@ -100,6 +100,7 @@ const ExpenseRequestContent = ({
   const [isCompleteLoading, setIsCompleteLoading] = useState(false);
   const [isApproveLoading, setIsApproveLoading] = useState(false);
   const [isRejectLoading, setIsRejectLoading] = useState(false);
+  const [, setApprovalNotes] = useState('');
 
   const formik = useFormik<UploadRequestDocumentsFormValues>({
     initialValues: {
@@ -130,10 +131,12 @@ const ExpenseRequestContent = ({
   };
 
   const approveClickHandler = () => {
+    setApprovalNotes('');
     approveModal.openModal();
   };
 
   const rejectClickHandler = () => {
+    setApprovalNotes('');
     rejectModal.openModal();
   };
 
@@ -200,6 +203,7 @@ const ExpenseRequestContent = ({
       approveModal.closeModal();
 
       toast.success(approveResponse?.message);
+      setApprovalNotes('');
       router.push('/expense');
     } else {
       approveModal.closeModal();
@@ -234,6 +238,7 @@ const ExpenseRequestContent = ({
       rejectModal.closeModal();
 
       toast.success(rejectResponse.message);
+      setApprovalNotes('');
       router.push('/expense');
     } else {
       rejectModal.closeModal();
@@ -710,6 +715,10 @@ const ExpenseRequestContent = ({
         text='Apakah anda yakin ingin approve data biaya operasional ini?'
         secondaryButton={{
           text: 'Tidak',
+          onClick: () => {
+            setApprovalNotes('');
+            approveModal.closeModal();
+          },
         }}
         primaryButton={{
           text: 'Ya',
@@ -725,6 +734,10 @@ const ExpenseRequestContent = ({
         text='Apakah anda yakin ingin reject data biaya operasional ini?'
         secondaryButton={{
           text: 'Tidak',
+          onClick: () => {
+            setApprovalNotes('');
+            rejectModal.closeModal();
+          },
         }}
         primaryButton={{
           text: 'Ya',

src/components/pages/expense/ExpenseStatusBadge.tsx

@@ -1,6 +1,7 @@
-import PillBadge from '@/components/PillBadge';
+import StatusBadge from '@/components/helper/StatusBadge';
 
 import { BaseApproval } from '@/types/api/api-general';
+import { Color } from '@/types/theme';
 
 interface ExpenseStatusBadgeProps {
   approval?: BaseApproval;
@@ -11,49 +12,45 @@ const ExpenseStatusBadge = ({ approval }: ExpenseStatusBadgeProps) => {
 
   const latestApprovalStepNumber = approval?.step_number;
 
-  let expenseStatusPillBadgeColor:
-    | 'yellow'
-    | 'green'
-    | 'gray'
-    | 'red'
-    | 'purple'
-    | 'blue' = 'gray';
+  let expenseStatusBadgeColor: Color = 'neutral';
 
   switch (latestApprovalStepNumber) {
     case 1:
-      expenseStatusPillBadgeColor = 'gray';
+      expenseStatusBadgeColor = 'neutral';
       break;
 
     case 2:
-      expenseStatusPillBadgeColor = 'purple';
+      expenseStatusBadgeColor = 'info';
       break;
 
     case 3:
-      expenseStatusPillBadgeColor = 'blue';
+      expenseStatusBadgeColor = 'warning';
       break;
 
     case 4:
-      expenseStatusPillBadgeColor = 'yellow';
+      expenseStatusBadgeColor = 'error';
       break;
 
     case 5:
-      expenseStatusPillBadgeColor = 'green';
+      expenseStatusBadgeColor = 'success';
       break;
 
     case 6:
-      expenseStatusPillBadgeColor = 'green';
+      expenseStatusBadgeColor = 'success';
       break;
   }
 
   if (isLatestApprovalRejected) {
-    expenseStatusPillBadgeColor = 'red';
+    expenseStatusBadgeColor = 'error';
   }
 
   return (
-    <PillBadge
-      content={isLatestApprovalRejected ? 'Ditolak' : approval?.step_name}
-      color={expenseStatusPillBadgeColor}
-      className='text-xs'
+    <StatusBadge
+      color={expenseStatusBadgeColor}
+      text={isLatestApprovalRejected ? 'Ditolak' : (approval?.step_name ?? '')}
+      className={{
+        badge: 'w-fit',
+      }}
     />
   );
 };

src/components/pages/expense/ExpensesTable.tsx

@@ -185,6 +185,7 @@ const ExpensesTable = () => {
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [isApproveLoading, setIsApproveLoading] = useState(false);
   const [isRejectLoading, setIsRejectLoading] = useState(false);
+  const [, setApprovalNotes] = useState('');
 
   const [sorting, setSorting] = useState<SortingState>([]);
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
@@ -342,6 +343,7 @@ const ExpensesTable = () => {
             [String(props.row.original.id)]: true,
           });
 
+          setApprovalNotes('');
           approveModal.openModal();
         };
 
@@ -353,6 +355,7 @@ const ExpensesTable = () => {
             [String(props.row.original.id)]: true,
           });
 
+          setApprovalNotes('');
           rejectModal.openModal();
         };
 
@@ -412,10 +415,12 @@ const ExpensesTable = () => {
   // };
 
   const bulkApproveClickHandler = () => {
+    setApprovalNotes('');
     approveModal.openModal();
   };
 
   const bulkRejectClickHandler = () => {
+    setApprovalNotes('');
     rejectModal.openModal();
   };
 
@@ -468,6 +473,7 @@ const ExpensesTable = () => {
         `Berhasil approve ${selectedRowIds.length} data biaya operasional!`
       );
 
+      setApprovalNotes('');
       setRowSelection({});
     } else {
       approveModal.closeModal();
@@ -509,6 +515,7 @@ const ExpensesTable = () => {
       toast.success(
         `Berhasil reject ${selectedRowIds.length} data biaya operasional!`
       );
+      setApprovalNotes('');
       setRowSelection({});
     } else {
       rejectModal.closeModal();
@@ -589,12 +596,11 @@ const ExpensesTable = () => {
                 <RequirePermission permissions='lti.expense.create'>
                   <Button
                     href='/expense/add'
-                    variant='outline'
                     color='primary'
-                    className='w-full sm:w-fit'
+                    className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
                   >
-                    <Icon icon='ic:round-plus' width={24} height={24} />
-                    Tambah
+                    <Icon icon='heroicons:plus' width={20} height={20} />
+                    Add Expense
                   </Button>
                 </RequirePermission>
 
@@ -787,6 +793,10 @@ const ExpensesTable = () => {
         text='Apakah anda yakin ingin approve data biaya operasional ini?'
         secondaryButton={{
           text: 'Tidak',
+          onClick: () => {
+            setApprovalNotes('');
+            approveModal.closeModal();
+          },
         }}
         primaryButton={{
           text: 'Ya',
@@ -802,6 +812,10 @@ const ExpensesTable = () => {
         text='Apakah anda yakin ingin reject data biaya operasional ini?'
         secondaryButton={{
           text: 'Tidak',
+          onClick: () => {
+            setApprovalNotes('');
+            rejectModal.closeModal();
+          },
         }}
         primaryButton={{
           text: 'Ya',

src/components/pages/expense/RealizationStatusBadge.tsx

@@ -1,6 +1,7 @@
-import PillBadge from '@/components/PillBadge';
+import StatusBadge from '@/components/helper/StatusBadge';
 
 import { BaseApproval } from '@/types/api/api-general';
+import { Color } from '@/types/theme';
 
 interface RealizationStatusBadgeProps {
   approval?: BaseApproval;
@@ -15,23 +16,21 @@ const RealizationStatusBadge = ({ approval }: RealizationStatusBadgeProps) => {
     ? 'Sudah Realisasi'
     : 'Belum Realisasi';
 
-  let realizationStatusPillBadgeColor:
-    | 'yellow'
-    | 'green'
-    | 'gray'
-    | 'red'
-    | 'purple'
-    | 'blue' = isExpenseRealized ? 'green' : 'yellow';
+  let realizationStatusBadgeColor: Color = isExpenseRealized
+    ? 'success'
+    : 'warning';
 
   if (isLatestApprovalRejected) {
-    realizationStatusPillBadgeColor = 'red';
+    realizationStatusBadgeColor = 'error';
   }
 
   return (
-    <PillBadge
-      content={isLatestApprovalRejected ? 'Ditolak' : realizationStatus}
-      color={realizationStatusPillBadgeColor}
-      className='text-xs'
+    <StatusBadge
+      color={realizationStatusBadgeColor}
+      text={isLatestApprovalRejected ? 'Ditolak' : realizationStatus}
+      className={{
+        badge: 'w-fit',
+      }}
     />
   );
 };

src/components/pages/inventory/movement/MovementTable.tsx

@@ -151,12 +151,11 @@ const MovementTable = () => {
               <RequirePermission permissions='lti.inventory.transfer.create'>
                 <Button
                   href='/inventory/movement/add'
-                  variant='outline'
                   color='primary'
-                  className='w-full sm:w-fit'
+                  className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
                 >
-                  <Icon icon='ic:round-plus' width={24} height={24} />
-                  Tambah
+                  <Icon icon='heroicons:plus' width={20} height={20} />
+                  Add Movement
                 </Button>
               </RequirePermission>
             </div>

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

@@ -86,6 +86,15 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
   }
 
   // ===== USE SELECT HOOKS =====
+  const {
+    setInputValue: setSourceWarehouseSelectInputValue,
+    isLoadingOptions: isLoadingSourceWarehouses,
+    loadMore: loadMoreSourceWarehouses,
+    rawData: sourceWarehouses,
+  } = useSelect<Warehouse>(WarehouseApi.basePath, 'id', 'name', 'search', {
+    transfer_context: 'inventory_transfer',
+  });
+
   const {
     setInputValue: setWarehouseSelectInputValue,
     isLoadingOptions: isLoadingWarehouses,
@@ -136,6 +145,25 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     return stockMap;
   }, [allProductWarehouses]);
 
+  const sourceWarehouseOptions = useMemo(() => {
+    if (!isResponseSuccess(sourceWarehouses)) return [];
+
+    return (
+      sourceWarehouses?.data.map((w) => {
+        warehouseStockMap.get(w.id);
+        return {
+          value: w.id,
+          label: w.name,
+          area: w.area?.name,
+          location:
+            'type' in w && (w.type === 'LOKASI' || w.type === 'KANDANG')
+              ? w.location?.name
+              : undefined,
+        };
+      }) || []
+    );
+  }, [sourceWarehouses, warehouseStockMap]);
+
   const warehouseOptions = useMemo(() => {
     if (!isResponseSuccess(warehouses)) return [];
 
@@ -1354,10 +1382,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 placeholder='Pilih gudang asal...'
                 value={formik.values.source_warehouse}
                 onChange={handleSourceWarehouseChange}
-                options={warehouseOptions}
-                onInputChange={setWarehouseSelectInputValue}
-                onMenuScrollToBottom={loadMoreWarehouses}
-                isLoading={isLoadingWarehouses}
+                options={sourceWarehouseOptions}
+                onInputChange={setSourceWarehouseSelectInputValue}
+                onMenuScrollToBottom={loadMoreSourceWarehouses}
+                isLoading={isLoadingSourceWarehouses}
                 isError={
                   formik.touched.source_warehouse_id &&
                   Boolean(formik.errors.source_warehouse_id)

src/components/pages/marketing/DeliveryOrderFormModal.tsx

@@ -0,0 +1,809 @@
+'use client';
+
+import AlertErrorList from '@/components/helper/form/FormErrors';
+import { useSelect, OptionType } from '@/components/input/SelectInput';
+import Modal, { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import {
+  mergeSOwithDO,
+  SalesProductToFieldValues,
+  DeliveryProductToFieldValues,
+} from '@/components/pages/marketing/form/MarketingForm';
+import { DeliveryOrderProductFormValues } from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema';
+import { SalesOrderProductFormValues } from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
+import { isResponseSuccess, isResponseError } from '@/lib/api-helper';
+import { formatCurrency, formatDate, formatTitleCase } from '@/lib/helper';
+import {
+  DeliveryOrderApi,
+  MarketingApi,
+  SalesOrderApi,
+} from '@/services/api/marketing/marketing';
+import { CustomerApi } from '@/services/api/master-data';
+import { UserApi } from '@/services/api/user';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
+import { BaseApproval, CreatedUser } from '@/types/api/api-general';
+import {
+  CreateDeliveryOrderPayload,
+  Marketing,
+  UpdateDeliveryOrderPayload,
+} from '@/types/api/marketing/marketing';
+import { Customer } from '@/types/api/master-data/customer';
+import { useFormik } from 'formik';
+import { Icon } from '@iconify/react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import toast from 'react-hot-toast';
+import useSWR, { useSWRConfig } from 'swr';
+import Button from '@/components/Button';
+import { memo } from 'react';
+import SalesOrderExport from '@/components/pages/marketing/pdf/SalesOrderExport';
+import ApprovalStepsV2 from '@/components/helper/ApprovalStepsV2';
+import { useApprovalSteps } from '@/components/pages/ApprovalSteps';
+import { MARKETING_APPROVAL_LINE } from '@/config/approval-line';
+import DeliveryOrderProductForm from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct';
+import DeliveryOrderProductTable from '@/components/pages/marketing/form/table-view/DeliveryOrderProductTable';
+import {
+  DeliveryOrderFormValues,
+  DeliveryOrderSchema,
+  getFilledMarketingFormInitialValues,
+  SalesOrderFormValues,
+} from '@/components/pages/marketing/form/MarketingForm.schema';
+import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
+import RequirePermission from '@/components/helper/RequirePermission';
+
+const MemoizedDeliveryOrderProductTable = memo(DeliveryOrderProductTable);
+const MemoizedDeliveryOrderProductForm = memo(DeliveryOrderProductForm);
+
+const DeliveryOrderFormModal = ({
+  initialValues,
+}: {
+  initialValues?: Marketing;
+}) => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const modalAction = searchParams.get('action');
+  const marketingId = searchParams.get('id');
+
+  const isModalActionForForm =
+    modalAction === 'add_delivery' ||
+    modalAction === 'edit_delivery' ||
+    modalAction === 'detail';
+
+  const { mutate } = useSWRConfig();
+
+  const refreshMarketing = () => {
+    mutate(
+      (key) => typeof key === 'string' && key.includes(MarketingApi.basePath)
+    );
+  };
+
+  const { data: marketing, isLoading: isLoadingMarketing } = useSWR(
+    isModalActionForForm && marketingId
+      ? `detail-marketing-${marketingId}`
+      : undefined,
+    () => MarketingApi.getSingle(Number(marketingId))
+  );
+
+  const {
+    approvals,
+    rawDataApprovals,
+    isLoading: isLoadingApproval,
+    refresh: refreshApproval,
+  } = useApprovalSteps({
+    latestApproval: isResponseSuccess(marketing)
+      ? marketing?.data.latest_approval
+      : undefined,
+    approvalLines: MARKETING_APPROVAL_LINE,
+    moduleName: 'MARKETINGS',
+    moduleId: marketingId as string,
+    params: {
+      group_step_number: false,
+      order_by_date: 'ASC',
+    },
+  });
+
+  /**
+   * Step 1: View Details
+   * Step 2: Edit Delivery
+   */
+  const [step, setStep] = useState(1);
+
+  const formModal = useModal();
+  const successModal = useModal();
+  const rejectModal = useModal();
+  const deleteModal = useModal();
+  const formRef = useRef<HTMLFormElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const [grandTotal, setGrandTotal] = useState(
+    isResponseSuccess(marketing) &&
+      marketing?.data.sales_order
+        ?.map((item) => item.total_price)
+        .reduce((a, b) => a + b, 0)
+  );
+
+  const [formErrorMessage, setFormErrorMessage] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedDeliveryProduct, setSelectedDeliveryProduct] =
+    useState<DeliveryOrderProductFormValues | null>(null);
+  const [deliveryOrderValues, setDeliveryOrderValues] = useState<
+    DeliveryOrderProductFormValues[]
+  >(
+    isResponseSuccess(marketing)
+      ? mergeSOwithDO(
+          marketing?.data.sales_order?.map(SalesProductToFieldValues) ?? [],
+          marketing?.data.delivery_order?.flatMap((delivery) =>
+            DeliveryProductToFieldValues(marketing.data.sales_order, delivery)
+          ) ?? [],
+          true
+        )
+      : []
+  );
+
+  // ================== SETUP FORMIK ==================
+  const formikInitialValues = useMemo<
+    SalesOrderFormValues & DeliveryOrderFormValues
+  >(() => {
+    if (!isResponseSuccess(marketing))
+      return {} as SalesOrderFormValues & DeliveryOrderFormValues;
+    const deliveryValues = mergeSOwithDO(
+      marketing?.data.sales_order?.map(SalesProductToFieldValues) ?? [],
+      marketing?.data.delivery_order?.flatMap((delivery) =>
+        DeliveryProductToFieldValues(marketing.data.sales_order, delivery)
+      ) ?? [],
+      true
+    );
+
+    setDeliveryOrderValues(deliveryValues);
+
+    return {
+      so_date: marketing?.data?.so_date || undefined,
+      notes: marketing?.data?.notes || undefined,
+      customer_id: marketing?.data?.customer?.id || undefined,
+      sales_person_id: marketing?.data?.sales_person?.id || undefined,
+      sales_person: marketing?.data?.sales_person
+        ? {
+            value: marketing?.data.sales_person.id,
+            label: marketing?.data.sales_person.name,
+          }
+        : null,
+      customer: marketing?.data?.customer
+        ? {
+            value: marketing?.data.customer.id,
+            label: marketing?.data.customer.name,
+          }
+        : null,
+      sales_order:
+        marketing?.data?.sales_order?.map((product) =>
+          SalesProductToFieldValues(product)
+        ) ?? [],
+      delivery_order: deliveryValues,
+    };
+  }, [marketing]);
+
+  const formik = useFormik<SalesOrderFormValues & DeliveryOrderFormValues>({
+    enableReinitialize: true,
+    initialValues: formikInitialValues,
+    validationSchema: DeliveryOrderSchema,
+    validateOnMount: true,
+    onSubmit: async (values) => {
+      const payload = {
+        marketing_id: Number(marketingId),
+        delivery_products: values.delivery_order
+          .map((product) => {
+            if (Boolean(product.delivery_date)) {
+              return {
+                marketing_product_id: product.marketing_product_id as number,
+                unit_price: parseFloat(product.unit_price as string),
+                total_weight: parseFloat(product.total_weight as string),
+                qty: parseFloat(product.qty as string),
+                avg_weight: parseFloat(product.avg_weight as string),
+                total_price: parseFloat(product.total_price as string),
+                delivery_date: formatDate(
+                  product.delivery_date as string,
+                  'yyyy-MM-DD'
+                ),
+                vehicle_number: product.vehicle_number,
+              };
+            }
+          })
+          .filter((item) => Boolean(item)),
+      } as UpdateDeliveryOrderPayload;
+      switch (modalAction) {
+        case 'add_delivery':
+          await createDeliveryHandler(payload as CreateDeliveryOrderPayload);
+          break;
+        case 'edit_delivery':
+          await updateDeliveryHandler(payload as UpdateDeliveryOrderPayload);
+          break;
+        case 'detail':
+          const dataMarketing = isResponseSuccess(marketing)
+            ? marketing.data
+            : null;
+          if (!dataMarketing) break;
+          if (
+            dataMarketing.delivery_order &&
+            dataMarketing.delivery_order.length > 0
+          ) {
+            await updateDeliveryHandler(payload as UpdateDeliveryOrderPayload);
+            break;
+          } else {
+            await createDeliveryHandler(payload as CreateDeliveryOrderPayload);
+          }
+          break;
+        default:
+          break;
+      }
+    },
+  });
+
+  // ===== Formik Error List =====
+  const { formErrorList, setFormErrorList, close, handleFormSubmit } =
+    useFormikErrorList(formik);
+
+  // ================== FORM HANDLER ==================
+  const createDeliveryHandler = async (values: CreateDeliveryOrderPayload) => {
+    setIsLoading(true);
+    const createDeliveryRes = await DeliveryOrderApi.create(values);
+    if (isResponseSuccess(createDeliveryRes)) {
+      toast.success(createDeliveryRes?.message as string);
+      setDeliveryOrderValues(
+        createDeliveryRes.data?.delivery_order?.flatMap((delivery) =>
+          DeliveryProductToFieldValues(
+            createDeliveryRes.data?.sales_order,
+            delivery
+          )
+        ) ?? []
+      );
+      closeModalHandler(false);
+      successModal.openModal();
+    }
+    if (isResponseError(createDeliveryRes)) {
+      setFormErrorMessage(createDeliveryRes?.message as string);
+    }
+    setIsLoading(false);
+  };
+  const updateDeliveryHandler = async (values: UpdateDeliveryOrderPayload) => {
+    setIsLoading(true);
+    const updateDeliveryRes = await DeliveryOrderApi.update(
+      Number(marketingId),
+      values
+    );
+    if (isResponseSuccess(updateDeliveryRes)) {
+      toast.success(updateDeliveryRes?.message as string);
+      setDeliveryOrderValues(
+        mergeSOwithDO(
+          formik.values.sales_order,
+          updateDeliveryRes.data?.delivery_order?.flatMap((delivery) =>
+            DeliveryProductToFieldValues(
+              updateDeliveryRes.data?.sales_order,
+              delivery
+            )
+          ) ?? []
+        )
+      );
+      closeModalHandler(false);
+      successModal.openModal();
+    }
+    if (isResponseError(updateDeliveryRes)) {
+      setFormErrorMessage(updateDeliveryRes?.message as string);
+    }
+    setIsLoading(false);
+  };
+
+  const memoSalesOrder = formik.values.sales_order;
+
+  // ================== HANDLER ==================
+  const nextButtonHandler = () => {
+    setStep(step + 1);
+  };
+  const prevButtonHandler = () => {
+    setStep(step - 1);
+  };
+  const handleChangeCustomer = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      formik.setFieldValue('customer_id', (val as OptionType)?.value);
+      formik.setFieldValue('customer', val as OptionType);
+    },
+    []
+  );
+  const handleChangeSalesPerson = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      formik.setFieldValue('sales_person_id', (val as OptionType)?.value);
+      formik.setFieldValue('sales_person', val as OptionType);
+    },
+    []
+  );
+  const rejectMarketingHandler = async (notes: string) => {
+    if (!marketingId) {
+      toast.error(`Tidak ada data yang valid untuk di reject.`);
+      rejectModal.closeModal();
+      return;
+    }
+
+    const rejectMarketingRes = await SalesOrderApi.singleApproval(
+      Number(marketingId),
+      'REJECTED',
+      notes
+    );
+
+    if (isResponseSuccess(rejectMarketingRes)) {
+      rejectModal.closeModal();
+      toast.success(rejectMarketingRes?.message as string);
+      closeModalHandler();
+      router.push('/marketing');
+    }
+    if (isResponseError(rejectMarketingRes)) {
+      rejectModal.closeModal();
+      toast.error(rejectMarketingRes?.message as string);
+    }
+    refreshMarketing();
+    refreshApproval();
+  };
+
+  const deleteClickHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    if (!marketingId) {
+      toast.error(`Tidak ada data yang valid untuk di hapus.`);
+      deleteModal.closeModal();
+      return;
+    }
+    setIsLoading(true);
+    const res = await MarketingApi.delete(Number(marketingId));
+    deleteModal.closeModal();
+    toast.success(res?.message as string);
+    setIsLoading(false);
+    router.replace('/marketing');
+  };
+
+  // ================== DELIVERY ORDER HANDLER ==================
+  const handleEditDO = useCallback(
+    (id: number, values?: DeliveryOrderProductFormValues) => {
+      const currentProducts = deliveryOrderValues?.find(
+        (product) => product.id == id
+      );
+      setSelectedDeliveryProduct(values ?? currentProducts ?? null);
+      if (id) {
+        setStep(2);
+      }
+    },
+    [deliveryOrderValues, setSelectedDeliveryProduct, setStep]
+  );
+  const handleAddDOClick = useCallback(() => {
+    setSelectedDeliveryProduct(null);
+  }, []);
+  const handleAddSubmitDO = useCallback(
+    async (values: DeliveryOrderProductFormValues) => {
+      const newValues = {
+        ...values,
+        id: values.id ?? Date.now(),
+      };
+
+      setDeliveryOrderValues((prev) => [...prev, newValues]);
+      setSelectedDeliveryProduct(null);
+      prevButtonHandler();
+    },
+    [prevButtonHandler]
+  );
+  const handleUpdateDO = useCallback(
+    async (id: number, values: DeliveryOrderProductFormValues) => {
+      setDeliveryOrderValues((prev) =>
+        prev.map((product) =>
+          product.id === id ? { ...product, ...values } : product
+        )
+      );
+      setSelectedDeliveryProduct(null);
+      prevButtonHandler();
+    },
+    [prevButtonHandler]
+  );
+  const handleDeleteDO = useCallback(async (id: number) => {
+    setDeliveryOrderValues((prev) =>
+      prev.map((product) =>
+        product.id === id
+          ? {
+              ...product,
+              ...{
+                delivery_date: '',
+              },
+            }
+          : product
+      )
+    );
+    setSelectedDeliveryProduct(null);
+  }, []);
+
+  // ================== MEMOIZED ==================
+  const isNextButtonDisabled = useMemo(() => {
+    if (step === 1) {
+      return Boolean(
+        !formik.values.customer_id ||
+          !formik.values.sales_person_id ||
+          !formik.values.so_date ||
+          !formik.values.notes
+      );
+    }
+
+    return true;
+  }, [step, formik.values]);
+  const deliveryRejected = useMemo(() => {
+    return (
+      isResponseSuccess(marketing) &&
+      ((marketing.data.latest_approval.step_number === 3 &&
+        marketing.data.latest_approval.action === 'REJECTED') ||
+        (marketing.data.latest_approval.step_number === 2 &&
+          marketing.data.latest_approval.action === 'REJECTED'))
+    );
+  }, [marketing]);
+
+  const isPending = useMemo(() => {
+    return (
+      isResponseSuccess(marketing) &&
+      marketing.data.latest_approval.step_number === 1
+    );
+  }, [marketing]);
+
+  // ================== EFFECT ==================
+  useEffect(() => {
+    if (
+      modalAction === 'add_delivery' ||
+      modalAction === 'edit_delivery' ||
+      modalAction === 'detail'
+    ) {
+      formModal.openModal();
+    }
+  }, [modalAction]);
+
+  const closeModalHandler = (shouldPushToRoute: boolean = true) => {
+    refreshMarketing();
+
+    if (shouldPushToRoute) {
+      formik.resetForm();
+      textareaRef.current?.setAttribute('value', '');
+      successModal.closeModal();
+      router.push('/marketing');
+    }
+
+    setStep(1);
+    setFormErrorMessage('');
+    formModal.closeModal();
+  };
+
+  useEffect(() => {
+    const getFilledInitialValues = async () => {
+      if (marketingId && isResponseSuccess(marketing)) {
+        const filledInitialValues = await getFilledMarketingFormInitialValues(
+          marketing.data
+        );
+
+        formik.setValues(filledInitialValues);
+        setStep(1);
+      }
+
+      if (isResponseError(marketing)) {
+        router.push('/marketing');
+        closeModalHandler();
+        toast.error(marketing.message);
+      }
+    };
+
+    getFilledInitialValues();
+  }, [marketingId, marketing]);
+
+  // Reset error message when step changes
+  useEffect(() => {
+    setFormErrorList([]);
+    setFormErrorMessage('');
+  }, [step]);
+
+  // sync delivery order values to formik
+  useEffect(() => {
+    formik.setFieldValue('delivery_order', deliveryOrderValues);
+  }, [deliveryOrderValues]);
+
+  return (
+    <>
+      <Modal
+        ref={formModal.ref}
+        position='end'
+        className={{
+          modalBox: 'w-full sm:w-fit p-3 rounded-xl bg-transparent shadow-none',
+        }}
+      >
+        <div
+          onSubmit={(e) => {
+            e.preventDefault();
+          }}
+          className='w-full min-h-full flex flex-col sm:flex-row items-stretch bg-base-100 rounded-xl overflow-y-auto'
+        >
+          {step <= 2 && isResponseSuccess(marketing) && (
+            <>
+              <div className='w-full sm:w-[446px]'>
+                <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:x-mark' 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'>
+                    View Details
+                  </h4>
+                </div>
+                <form
+                  className='w-full p-4 gap-3 flex flex-col border-b border-base-content/10'
+                  ref={formRef}
+                  onSubmit={handleFormSubmit}
+                >
+                  <h4 className='text-base font-medium text-base-content/50 font-roboto'>
+                    Informasi Penjualan
+                  </h4>
+                  <div className='rounded-lg border border-tools-table-outline border-base-content/5'>
+                    <table
+                      style={{
+                        borderRadius: '0.5rem',
+                      }}
+                      className='border-none w-full'
+                    >
+                      <tbody className='w-full'>
+                        <tr className='border-b border-tools-table-outline border-base-content/5'>
+                          <th className='w-1/3 text-start not-first:font-medium text-base-content/50 text-sm px-4 py-3'>
+                            Label
+                          </th>
+                          <th className='text-start font-medium text-base-content/50 text-sm px-4 py-3'>
+                            <div className='flex w-full flex-row gap-1 items-center justify-between h-full mt-2'>
+                              <div>Value</div>
+                            </div>
+                          </th>
+                        </tr>
+                        <tr>
+                          <td className='text-sm px-4 py-3'>No. Sales Order</td>
+                          <td className='text-sm px-4 py-3'>
+                            {marketing.data.so_number}
+                          </td>
+                        </tr>
+                        <tr>
+                          <td className='text-sm px-4 py-3'>Nama Pelanggan</td>
+                          <td className='text-sm px-4 py-3'>
+                            {marketing.data.customer.name}
+                          </td>
+                        </tr>
+                        <tr>
+                          <td className='text-sm px-4 py-3'>Status</td>
+                          <td className='text-sm px-4 py-3'>
+                            {formatTitleCase(
+                              marketing.data.latest_approval.step_name
+                            )}
+                          </td>
+                        </tr>
+                        <tr>
+                          <td className='text-sm px-4 py-3'>
+                            Tanggal Penjualan
+                          </td>
+                          <td className='text-sm px-4 py-3'>
+                            {formatDate(marketing.data.so_date, 'DD MMM yyyy')}
+                          </td>
+                        </tr>
+                        <tr>
+                          <td className='text-sm px-4 py-3'>Total Penjualan</td>
+                          <td className='text-sm px-4 py-3'>
+                            {formatCurrency(grandTotal || 0)}
+                          </td>
+                        </tr>
+                        <tr>
+                          <td className='text-sm px-4 py-3'>
+                            Dokumen Penjualan
+                          </td>
+                          <td className='text-sm px-4 py-3'>
+                            <SalesOrderExport data={marketing.data} />
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </form>
+              </div>
+              <div className='w-full min-h-full flex flex-col sm:w-[446px] border-l border-base-content/10'>
+                <div className='w-full p-4 flex flex-row items-center justify-between gap-3 border-b border-base-content/10'>
+                  <div className='w-full flex flex-row items-stretch gap-3'>
+                    {step === 2 && (
+                      <>
+                        <Button
+                          type='button'
+                          variant='ghost'
+                          color='none'
+                          onClick={() => {
+                            setStep(1);
+                          }}
+                          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'>
+                      Informasi
+                    </h4>
+                  </div>
+                  {step === 1 && (
+                    <RequirePermission permissions='lti.marketing.sales_order.delete'>
+                      <Button
+                        type='button'
+                        variant='ghost'
+                        color='none'
+                        onClick={() => {
+                          deleteClickHandler();
+                        }}
+                        className='p-0 text-error hover:text-base-content'
+                      >
+                        <Icon icon='heroicons:trash' width={20} height={20} />
+                      </Button>
+                    </RequirePermission>
+                  )}
+                </div>
+                {step === 1 && (
+                  <ApprovalStepsV2
+                    approvals={rawDataApprovals as BaseApproval[]}
+                    steps={MARKETING_APPROVAL_LINE}
+                  />
+                )}
+                <div className='w-full p-4 gap-3 flex flex-col'>
+                  <h4 className='text-base font-medium text-base-content/50 font-roboto'>
+                    {step == 2 && 'Ubah '} Informasi{' '}
+                    {step == 2 ? 'Delivery' : 'Produk'}
+                  </h4>
+                  {step === 1 && (
+                    <MemoizedDeliveryOrderProductTable
+                      marketing={marketing.data}
+                      formType={
+                        deliveryRejected
+                          ? 'rejected'
+                          : isPending
+                            ? 'pending'
+                            : modalAction
+                      }
+                      data={deliveryOrderValues}
+                      onEdit={handleEditDO}
+                      onDelete={handleDeleteDO}
+                      onAddProductClick={handleAddDOClick}
+                    />
+                  )}
+                  {step === 2 && (
+                    <MemoizedDeliveryOrderProductForm
+                      formState={'edit'}
+                      salesOrders={marketing?.data?.sales_order ?? []}
+                      exisitingValues={deliveryOrderValues}
+                      onSubmitForm={handleAddSubmitDO}
+                      initialValues={selectedDeliveryProduct ?? undefined}
+                      onUpdateForm={handleUpdateDO}
+                    />
+                  )}
+                </div>
+                {formErrorMessage && (
+                  <div className='px-4 pb-4'>
+                    <AlertErrorList
+                      className={{
+                        alert: 'w-full',
+                      }}
+                      formErrorList={[formErrorMessage]}
+                      onClose={() => setFormErrorMessage('')}
+                    />
+                  </div>
+                )}
+                {formErrorList && (
+                  <div className='px-4 pb-4 '>
+                    <AlertErrorList
+                      className={{
+                        alert: 'w-full',
+                      }}
+                      formErrorList={formErrorList}
+                      onClose={close}
+                      title={`Terdapat ${formErrorList.length} error pada ${formErrorMessage ? 'server' : 'form'}:`}
+                    />
+                  </div>
+                )}
+                {step === 1 && (
+                  <div className='w-full px-4 py-3 grid grid-cols-2 items-center justify-between gap-3 border-t border-base-content/10'>
+                    <Button
+                      type='button'
+                      variant='outline'
+                      color='none'
+                      onClick={() => rejectModal.openModal()}
+                      disabled={deliveryRejected || isPending}
+                      className='p-3 border-base-content/10 shadow-button-soft rounded-lg text-sm text-base-content/50 font-semibold'
+                    >
+                      Reject
+                    </Button>
+                    <Button
+                      type='button'
+                      color='primary'
+                      onClick={() => {
+                        formRef.current?.requestSubmit();
+                      }}
+                      className='p-3  shadow-button-soft text-base-100 rounded-lg text-sm font-semibold'
+                      disabled={deliveryRejected || isPending}
+                    >
+                      Approve
+                    </Button>
+                  </div>
+                )}
+              </div>
+            </>
+          )}
+        </div>
+      </Modal>
+      <ConfirmationModal
+        ref={successModal.ref}
+        iconPosition='left'
+        type='success'
+        text={`${modalAction === 'add' ? 'Data Berhasil Disimpan' : 'Data Berhasil Diubah'}`}
+        subtitleText={`${modalAction === 'add' ? 'Data delivery order telah berhasil disimpan.' : 'Data delivery order telah berhasil diubah.'}`}
+        primaryButton={{
+          text: 'Oke',
+          color: 'primary',
+          className: 'rounded-lg',
+          onClick: (e) => {
+            closeModalHandler();
+          },
+        }}
+      >
+        <MemoizedDeliveryOrderProductTable
+          marketing={isResponseSuccess(marketing) ? marketing.data : undefined}
+          formType={'success'}
+          data={deliveryOrderValues}
+          onDelete={handleDeleteDO}
+          onEdit={handleEditDO}
+          onAddProductClick={handleAddDOClick}
+        />
+      </ConfirmationModal>
+
+      <ConfirmationModalWithNotes
+        ref={rejectModal.ref}
+        type={'error'}
+        text={`Apakah anda yakin ingin reject data penjualan?`}
+        secondaryButton={{
+          text: 'Tidak',
+          onClick: rejectModal.closeModal,
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          onClick: rejectMarketingHandler,
+        }}
+      />
+
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default DeliveryOrderFormModal;

src/components/pages/marketing/MarketingDetail.tsx

@@ -0,0 +1,572 @@
+'use client';
+
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import { FormHeader } from '@/components/helper/form/FormHeader';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
+import ApprovalSteps, {
+  useApprovalSteps,
+} from '@/components/pages/ApprovalSteps';
+import Table from '@/components/Table';
+import { MARKETING_APPROVAL_LINE } from '@/config/approval-line';
+import {
+  cn,
+  formatCurrency,
+  formatDate,
+  formatNumber,
+  formatTitleCase,
+  formatVechicleNumber,
+} from '@/lib/helper';
+import {
+  MarketingApi,
+  SalesOrderApi,
+} from '@/services/api/marketing/marketing';
+import {
+  BaseDelivery,
+  BaseSalesOrder,
+  Marketing,
+} from '@/types/api/marketing/marketing';
+import { Icon } from '@iconify/react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import SalesOrderExport from '@/components/pages/marketing/pdf/SalesOrderExport';
+import DeliveryOrderExport from '@/components/pages/marketing/pdf/DeliveryOrderExport';
+import RequirePermission from '@/components/helper/RequirePermission';
+import Badge from '@/components/Badge';
+
+const MarketingDetail = ({
+  initialValues,
+  refresh,
+}: {
+  initialValues?: Marketing;
+  refresh?: () => void;
+}) => {
+  const router = useRouter();
+  const [approvalAction, setApprovalAction] = useState<'APPROVED' | 'REJECTED'>(
+    'APPROVED'
+  );
+  const [grandTotal, setGrandTotal] = useState(
+    initialValues?.sales_order
+      ?.map((item) => item.total_price)
+      .reduce((a, b) => a + b, 0)
+  );
+  const [isLoading, setIsLoading] = useState(false);
+
+  const deleteModal = useModal();
+  const confirmationModal = useModal();
+  const deliveryModal = useModal();
+  const {
+    approvals,
+    isLoading: isLoadingApproval,
+    refresh: refreshApproval,
+  } = useApprovalSteps({
+    latestApproval: initialValues?.latest_approval,
+    approvalLines: MARKETING_APPROVAL_LINE,
+    moduleName: 'MARKETINGS',
+    moduleId: initialValues?.id as number as unknown as string,
+  });
+
+  const approveClickHandler = () => {
+    setApprovalAction('APPROVED');
+    confirmationModal.openModal();
+  };
+
+  const rejectClickHandler = () => {
+    setApprovalAction('REJECTED');
+    confirmationModal.openModal();
+  };
+
+  const deleteClickHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsLoading(true);
+    const res = await MarketingApi.delete(initialValues?.id as number);
+    deleteModal.closeModal();
+    router.push('/marketing');
+    toast.success(res?.message as string);
+    setIsLoading(false);
+  };
+
+  const confirmationModalApproveClickHandler = async (notes: string) => {
+    setIsLoading(true);
+    const res = await SalesOrderApi.singleApproval(
+      initialValues?.id as number,
+      approvalAction,
+      notes
+    );
+    setIsLoading(false);
+    confirmationModal.closeModal();
+    toast.success(res?.message as string);
+    refresh?.();
+    refreshApproval?.();
+  };
+
+  const confirmationModalDeliveryClickHandler = async (notes: string) => {
+    setIsLoading(true);
+    const res = await SalesOrderApi.delivery(
+      initialValues?.id as number,
+      notes
+    );
+    setIsLoading(false);
+    deliveryModal.closeModal();
+    toast.success(res?.message as string);
+    refresh?.();
+    refreshApproval?.();
+    router.push(
+      `/marketing/detail/delivery-orders/edit?marketingId=${initialValues?.id}`
+    );
+  };
+
+  const approval = initialValues?.latest_approval;
+  const isRejected = approval?.action == 'REJECTED';
+  const isApproved = approval?.action == 'APPROVED';
+
+  return (
+    <>
+      <div className='flex flex-col w-full gap-4'>
+        <FormHeader
+          title={`Detail ${Number(initialValues?.latest_approval?.step_number) > 2 ? 'Delivery Order' : 'Sales Order'}`}
+          backUrl='/marketing'
+        />
+        {!isLoadingApproval && approvals && (
+          <ApprovalSteps approvals={approvals} />
+        )}
+        <div className='flex-row flex gap-3'>
+          {initialValues?.latest_approval?.step_number == 1 && (
+            <>
+              <RequirePermission permissions='lti.marketing.sales_order.approve'>
+                <Button
+                  color='success'
+                  onClick={approveClickHandler}
+                  disabled={
+                    initialValues?.latest_approval?.step_number == 1 &&
+                    initialValues?.latest_approval?.action == 'REJECTED'
+                  }
+                >
+                  <Icon icon='mdi:check' width={24} height={24} />
+                  Approve
+                </Button>
+              </RequirePermission>
+
+              <RequirePermission permissions='lti.marketing.sales_order.approve'>
+                <Button
+                  color='error'
+                  onClick={rejectClickHandler}
+                  disabled={
+                    initialValues?.latest_approval?.step_number == 1 &&
+                    initialValues?.latest_approval?.action == 'REJECTED'
+                  }
+                >
+                  <Icon icon='mdi:close' width={24} height={24} />
+                  Reject
+                </Button>
+              </RequirePermission>
+            </>
+          )}
+          {initialValues?.latest_approval?.step_number != 1 && (
+            <>
+              <RequirePermission
+                permissions={
+                  initialValues?.latest_approval?.step_number == 3
+                    ? 'lti.marketing.delivery_order.update'
+                    : 'lti.marketing.delivery_order.create'
+                }
+              >
+                <Button
+                  color='success'
+                  href={
+                    initialValues?.latest_approval?.step_number == 3
+                      ? `/marketing/detail/delivery-orders/edit?marketingId=${initialValues?.id}`
+                      : `/marketing/add/delivery-orders?marketingId=${initialValues?.id}`
+                  }
+                >
+                  <Icon icon='mdi:truck' width={24} height={24} />
+                  {initialValues?.latest_approval?.step_number == 3
+                    ? 'Edit '
+                    : 'Tambah '}
+                  Delivery Order
+                </Button>
+              </RequirePermission>
+            </>
+          )}
+        </div>
+
+        <Card
+          title='Informasi Penjualan'
+          className={{
+            wrapper: 'w-full bg-white',
+          }}
+        >
+          <div className='overflow-x-auto rounded-box border border-base-content/5 bg-base-100 mt-3'>
+            <table className='table'>
+              <tbody>
+                <tr>
+                  <td width='45%' className='font-semibold'>
+                    No. Sales Order
+                  </td>
+                  <td>:</td>
+                  <td width='50%' className='font-mono'>
+                    {initialValues?.so_number}
+                  </td>
+                </tr>
+                {Number(initialValues?.latest_approval?.step_number) > 2 && (
+                  <tr>
+                    <td width='45%' className='font-semibold'>
+                      No. Delivery Order
+                    </td>
+                    <td>:</td>
+                    <td width='50%' className='font-mono'>
+                      {initialValues?.delivery_order
+                        ?.map((item) => item.do_number)
+                        .join(', ')}
+                    </td>
+                  </tr>
+                )}
+                <tr>
+                  <td className='font-semibold'>Nama Pelanggan</td>
+                  <td>:</td>
+                  <td>{initialValues?.customer?.name}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Status</td>
+                  <td>:</td>
+                  <td>
+                    <Badge
+                      variant='soft'
+                      className={{
+                        badge:
+                          'rounded-lg px-2 w-fit flex flex-row justify-start whitespace-nowrap',
+                      }}
+                      color={
+                        isRejected
+                          ? 'error'
+                          : isApproved
+                            ? approval?.step_number == 1
+                              ? 'neutral'
+                              : approval?.step_number == 2
+                                ? 'primary'
+                                : approval?.step_number == 3
+                                  ? 'success'
+                                  : 'neutral'
+                            : 'neutral'
+                      }
+                    >
+                      <Icon
+                        icon='mdi:circle'
+                        width={12}
+                        height={12}
+                        color={
+                          approval?.step_number == 1
+                            ? 'neutral'
+                            : approval?.step_number == 2
+                              ? 'primary'
+                              : approval?.step_number == 3
+                                ? 'success'
+                                : 'neutral'
+                        }
+                      />
+                      {isRejected
+                        ? 'Ditolak'
+                        : formatTitleCase(approval?.step_name || '')}
+                    </Badge>
+                  </td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Tanggal Penjualan</td>
+                  <td>:</td>
+                  <td>{formatDate(initialValues?.so_date, 'DD MMM yyyy')}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Total Penjualan</td>
+                  <td>:</td>
+                  <td>{formatCurrency(grandTotal as number)}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Catatan</td>
+                  <td>:</td>
+                  <td>{initialValues?.notes ?? '-'}</td>
+                </tr>
+                <tr>
+                  <td className='font-semibold'>Dokumen Penjualan</td>
+                  <td>:</td>
+                  <td>
+                    <SalesOrderExport data={initialValues} />
+                  </td>
+                </tr>
+                {Number(initialValues?.latest_approval?.step_number) > 2 && (
+                  <tr>
+                    <td className='font-semibold'>Dokumen Pengiriman</td>
+                    <td>:</td>
+                    <td className='flex flex-wrap gap-2'>
+                      {initialValues?.delivery_order?.map((item, index) => (
+                        <DeliveryOrderExport
+                          key={index}
+                          data={initialValues}
+                          deliveryOrder={item}
+                        />
+                      ))}
+                    </td>
+                  </tr>
+                )}
+              </tbody>
+            </table>
+          </div>
+        </Card>
+        {initialValues?.sales_order && (
+          <Card
+            title='Informasi Produk'
+            className={{
+              wrapper: 'w-full bg-white',
+            }}
+          >
+            <Table<BaseSalesOrder>
+              data={initialValues?.sales_order}
+              columns={[
+                {
+                  header: 'Kandang',
+                  accessorFn(row) {
+                    return row.product_warehouse.warehouse.name;
+                  },
+                },
+                {
+                  header: 'Produk',
+                  accessorFn(row) {
+                    return row.product_warehouse.product.name;
+                  },
+                },
+                {
+                  header: 'Harga Satuan (Rp)',
+                  accessorFn(row) {
+                    return formatCurrency(row.unit_price);
+                  },
+                },
+                {
+                  header: 'Total Bobot (Kg)',
+                  accessorFn(row) {
+                    return formatNumber(row.total_weight);
+                  },
+                },
+                {
+                  header: 'Kuantitas',
+                  accessorFn(row) {
+                    return formatNumber(row.qty);
+                  },
+                },
+                {
+                  header: 'Avg. Bobot (Kg)',
+                  accessorFn(row) {
+                    return formatNumber(row.avg_weight);
+                  },
+                },
+                {
+                  header: 'Total Penjualan (Rp)',
+                  accessorFn(row) {
+                    return formatCurrency(row.total_price);
+                  },
+                },
+              ]}
+              className={{
+                containerClassName: cn({
+                  'mb-20':
+                    initialValues?.sales_order &&
+                    initialValues?.sales_order?.length === 0,
+                }),
+                tableWrapperClassName: 'overflow-x-auto min-h-full!',
+                tableClassName: 'font-inter w-full table-auto min-h-full!',
+                headerRowClassName: 'border-b border-b-gray-200',
+                headerColumnClassName:
+                  'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+                bodyRowClassName: 'border-b border-b-gray-200',
+                bodyColumnClassName:
+                  'px-6 py-3 last:flex last:flex-row last:justify-end',
+                paginationClassName: 'hidden',
+              }}
+            />
+          </Card>
+        )}
+        {initialValues?.delivery_order && (
+          <Card
+            title='Informasi Pengiriman'
+            className={{
+              wrapper: 'w-full bg-white',
+            }}
+          >
+            {initialValues?.delivery_order.map((delivery, index) => {
+              return (
+                <div key={index}>
+                  <Card
+                    className={{
+                      wrapper: 'w-full',
+                    }}
+                  >
+                    <div className='flex flex-row gap-3'>
+                      <div className='font-semibold'>
+                        Nomor DO : {delivery.do_number}
+                      </div>
+                    </div>
+                    <Table<BaseDelivery>
+                      data={delivery.deliveries}
+                      columns={[
+                        {
+                          header: 'Tanggal Pengiriman',
+                          accessorFn() {
+                            return formatDate(
+                              delivery.delivery_date,
+                              'DD MMM yyyy'
+                            );
+                          },
+                        },
+                        {
+                          header: 'No. Polisi',
+                          accessorFn(row) {
+                            return formatVechicleNumber(row.vehicle_number);
+                          },
+                        },
+                        {
+                          header: 'Kandang',
+                          accessorFn(row) {
+                            return row.product_warehouse.warehouse.name;
+                          },
+                        },
+                        {
+                          header: 'Produk',
+                          accessorFn(row) {
+                            return row.product_warehouse.product.name;
+                          },
+                        },
+                        {
+                          header: 'Harga Satuan (Rp)',
+                          accessorFn(row) {
+                            return formatCurrency(row.unit_price);
+                          },
+                        },
+                        {
+                          header: 'Total Bobot (Kg)',
+                          accessorFn(row) {
+                            return formatNumber(row.total_weight);
+                          },
+                        },
+                        {
+                          header: 'Kuantitas',
+                          accessorFn(row) {
+                            return formatNumber(row.qty);
+                          },
+                        },
+                        {
+                          header: 'Avg. Bobot (Kg)',
+                          accessorFn(row) {
+                            return formatNumber(row.avg_weight);
+                          },
+                        },
+                        {
+                          header: 'Total Penjualan (Rp)',
+                          accessorFn(row) {
+                            return formatCurrency(row.total_price);
+                          },
+                        },
+                      ]}
+                      className={{
+                        containerClassName: cn({
+                          'mb-20':
+                            initialValues?.sales_order &&
+                            initialValues?.sales_order?.length === 0,
+                        }),
+                        tableWrapperClassName: 'overflow-x-auto min-h-full!',
+                        tableClassName:
+                          'font-inter w-full table-auto min-h-full!',
+                        headerRowClassName: 'border-b border-b-gray-200',
+                        headerColumnClassName:
+                          'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+                        bodyRowClassName: 'border-b border-b-gray-200',
+                        bodyColumnClassName:
+                          'px-6 py-3 last:flex last:flex-row last:justify-end',
+                        paginationClassName: 'hidden',
+                      }}
+                    />
+                  </Card>
+                  <div className='flex flex-row gap-3 my-3'>
+                    <DeliveryOrderExport
+                      data={initialValues}
+                      deliveryOrder={delivery}
+                    />
+                  </div>
+                </div>
+              );
+            })}
+          </Card>
+        )}
+        <div className='flex flex-row gap-3'>
+          {initialValues?.latest_approval?.step_number != 3 && (
+            <>
+              <RequirePermission permissions='lti.marketing.sales_order.update'>
+                <Button
+                  color='warning'
+                  type='button'
+                  href={`/marketing/detail/${initialValues?.latest_approval?.step_number == 3 ? 'delivery-orders' : 'sales-orders'}/edit?marketingId=${initialValues?.id}`}
+                >
+                  <Icon icon='mdi:pencil' width={24} height={24} />
+                  Edit
+                </Button>
+              </RequirePermission>
+            </>
+          )}
+          <RequirePermission permissions='lti.marketing.sales_order.delete'>
+            <Button color='error' onClick={deleteClickHandler}>
+              <Icon icon='mdi:delete' width={24} height={24} />
+              Hapus
+            </Button>
+          </RequirePermission>
+        </div>
+      </div>
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+      <ConfirmationModalWithNotes
+        ref={confirmationModal.ref}
+        type={approvalAction === 'APPROVED' ? 'success' : 'error'}
+        text={`Apakah anda yakin ingin ${approvalAction == 'APPROVED' ? 'approve' : 'reject'} data penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: approvalAction === 'APPROVED' ? 'success' : 'error',
+          isLoading: isLoading,
+          onClick: confirmationModalApproveClickHandler,
+        }}
+      />
+      <ConfirmationModalWithNotes
+        ref={deliveryModal.ref}
+        type={'success'}
+        text={`Apakah anda yakin ingin deliver penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'success',
+          isLoading: isLoading,
+          onClick: confirmationModalDeliveryClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default MarketingDetail;

src/components/pages/marketing/MarketingFilter.tsx

@@ -0,0 +1,186 @@
+'use client';
+
+import { RefObject } from 'react';
+import { useFormik } from 'formik';
+import { Icon } from '@iconify/react';
+import Modal from '@/components/Modal';
+import Button from '@/components/Button';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
+import { CustomerApi, ProductApi } from '@/services/api/master-data';
+import { MARKETING_APPROVAL_LINE } from '@/config/approval-line';
+import { MarketingFilter } from '@/types/api/marketing/marketing';
+import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
+
+interface MarketingFilterModal {
+  ref: RefObject<HTMLDialogElement | null>;
+  onSubmit?: (values: MarketingFilter) => void;
+  onReset?: () => void;
+}
+
+const MarketingFilterModal = ({
+  ref,
+  onSubmit,
+  onReset,
+}: MarketingFilterModal) => {
+  const closeModalHandler = () => {
+    ref.current?.close();
+  };
+
+  // ===== OPTIONS =====
+  const {
+    options: productsOptions,
+    isLoadingOptions: isLoadingProductsOptions,
+    setInputValue: setProductsInputValue,
+    loadMore: loadMoreProducts,
+  } = useSelect(ProductApi.basePath, 'id', 'name', '', {
+    limit: 'limit',
+  });
+  const {
+    options: customersOptions,
+    isLoadingOptions: isLoadingCustomersOptions,
+    setInputValue: setCustomersInputValue,
+    loadMore: loadMoreCustomers,
+  } = useSelect(CustomerApi.basePath, 'id', 'name', '', {
+    limit: 'limit',
+  });
+  const statusOptions = MARKETING_APPROVAL_LINE.map((item) => ({
+    value: item.step_name.split(' ').join('_').toUpperCase(),
+    label: item.step_name,
+  }));
+
+  const formik = useFormik<{
+    product_ids: OptionType[];
+    status: OptionType | null;
+    customer_id: OptionType | null;
+  }>({
+    initialValues: {
+      product_ids: [],
+      status: null,
+      customer_id: null,
+    },
+
+    onSubmit: async (values) => {
+      const formattedValues = {
+        ...values,
+        product_ids: values.product_ids.map((item) => Number(item.value)),
+        status: values.status?.value.toString() || '',
+        customer_id: Number(values.customer_id?.value),
+      };
+
+      onSubmit?.(formattedValues);
+      closeModalHandler();
+    },
+
+    onReset: () => {
+      onReset?.();
+      closeModalHandler();
+    },
+  });
+
+  const productChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldValue('product_ids', val as OptionType[]);
+  };
+
+  const customerChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldValue('customer_id', val as OptionType);
+  };
+
+  const statusChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldValue('status', val as OptionType);
+  };
+
+  return (
+    <Modal
+      ref={ref}
+      className={{
+        modalBox: 'p-0 rounded-xl',
+      }}
+    >
+      <form
+        onSubmit={formik.handleSubmit}
+        onReset={formik.handleReset}
+        className='w-full flex flex-col'
+      >
+        {/* Modal Header */}
+        <div className='p-4 flex items-center justify-between gap-2 border-b border-gray-300'>
+          <div className='flex items-center gap-2 text-primary'>
+            <Icon icon='heroicons:funnel' width={20} height={20} />
+            <h3 className='text-sm font-medium'>Filter Data</h3>
+          </div>
+
+          <Button
+            type='button'
+            variant='ghost'
+            color='none'
+            onClick={closeModalHandler}
+            className='p-0 text-base-content/50 hover:text-base-content'
+          >
+            <Icon icon='heroicons:x-mark' width={20} height={20} />
+          </Button>
+        </div>
+
+        {/* Modal Body */}
+        <div className='p-4 flex flex-col gap-1.5'>
+          {/* select multiple product */}
+          <SelectInputCheckbox
+            label='Product'
+            isClearable
+            placeholder='Pilih product'
+            options={productsOptions}
+            isLoading={isLoadingProductsOptions}
+            value={formik.values.product_ids}
+            onChange={productChangeHandler}
+            onInputChange={setProductsInputValue}
+            onMenuScrollToBottom={loadMoreProducts}
+            isMulti
+          />
+          {/* select status */}
+          <SelectInput
+            label='Status'
+            isClearable
+            placeholder='Pilih status'
+            options={statusOptions}
+            value={formik.values.status}
+            onChange={statusChangeHandler}
+          />
+          {/* select customer */}
+          <SelectInput
+            label='Customer'
+            isClearable
+            placeholder='Pilih customer'
+            options={customersOptions}
+            isLoading={isLoadingCustomersOptions}
+            value={formik.values.customer_id}
+            onChange={customerChangeHandler}
+            onInputChange={setCustomersInputValue}
+            onMenuScrollToBottom={loadMoreCustomers}
+          />
+        </div>
+
+        {/* Modal Footer */}
+        <div className='p-4 flex justify-between gap-4 border-t border-gray-300 bg-gray-100'>
+          <Button
+            type='reset'
+            variant='ghost'
+            color='none'
+            className='p-3 rounded-lg text-base-content/65'
+          >
+            Reset Filter
+          </Button>
+
+          <Button
+            type='submit'
+            className='p-3 rounded-lg w-fit sm:w-full max-w-40 text-base-100 text-sm'
+          >
+            Apply Filter
+          </Button>
+        </div>
+      </form>
+    </Modal>
+  );
+};
+
+export default MarketingFilterModal;

src/components/pages/marketing/SalesOrderFormModal.tsx

@@ -0,0 +1,748 @@
+'use client';
+
+import Button from '@/components/Button';
+import AlertErrorList from '@/components/helper/form/FormErrors';
+import RequirePermission from '@/components/helper/RequirePermission';
+import DateInput from '@/components/input/DateInput';
+import DebouncedTextArea from '@/components/input/DebouncedTextArea';
+import NumberInput from '@/components/input/NumberInput';
+import { OptionType, useSelect } from '@/components/input/SelectInput';
+import SelectInputRadio from '@/components/input/SelectInputRadio';
+import Modal, { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import {
+  DeliveryProductToFieldValues,
+  mergeSOwithDO,
+  SalesProductToFieldValues,
+} from '@/components/pages/marketing/form/MarketingForm';
+import {
+  DeliveryOrderFormValues,
+  DeliveryOrderSchema,
+  getFilledMarketingFormInitialValues,
+  SalesOrderFormValues,
+  SalesOrderSchema,
+} from '@/components/pages/marketing/form/MarketingForm.schema';
+import { DeliveryOrderProductFormValues } from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema';
+import { SalesOrderProductFormValues } from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
+import SalesOrderProductForm from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm';
+import SalesOrderProductTable from '@/components/pages/marketing/form/table-view/SalesOrderProductTable';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { formatDate } from '@/lib/helper';
+import {
+  MarketingApi,
+  SalesOrderApi,
+} from '@/services/api/marketing/marketing';
+import { CustomerApi } from '@/services/api/master-data';
+import { UserApi } from '@/services/api/user';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
+import { CreatedUser } from '@/types/api/api-general';
+import {
+  CreateSalesOrderPayload,
+  CreateSalesOrderProductPayload,
+  Marketing,
+  UpdateDeliveryOrderPayload,
+  UpdateSalesOrderPayload,
+} from '@/types/api/marketing/marketing';
+import { Customer } from '@/types/api/master-data/customer';
+import { Icon } from '@iconify/react';
+import { useFormik } from 'formik';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import toast from 'react-hot-toast';
+import useSWR, { useSWRConfig } from 'swr';
+
+const MemoizedSalesOrderProductTable = memo(SalesOrderProductTable);
+const MemoizedSalesOrderProductForm = memo(SalesOrderProductForm);
+
+const SalesOrderFormModal = ({
+  initialValues,
+}: {
+  initialValues?: Marketing;
+}) => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const modalAction = searchParams.get('action');
+  const marketingId = searchParams.get('id');
+
+  const isModalActionForForm =
+    modalAction === 'add' ||
+    modalAction === 'edit' ||
+    modalAction === 'add_delivery' ||
+    modalAction === 'edit_delivery';
+
+  const { mutate } = useSWRConfig();
+
+  const refreshMarketing = () => {
+    mutate(
+      (key) => typeof key === 'string' && key.includes(MarketingApi.basePath)
+    );
+  };
+
+  const { data: marketing, isLoading: isLoadingMarketing } = useSWR(
+    isModalActionForForm && marketingId
+      ? `detail-marketing-${marketingId}`
+      : undefined,
+    () => MarketingApi.getSingle(Number(marketingId))
+  );
+
+  // ================== FETCH OPTIONS ==================
+  const {
+    options: customerOptions,
+    isLoadingOptions: isLoadingCustomerOptions,
+    setInputValue: setInputCustomerValue,
+    loadMore: loadMoreCustomer,
+  } = useSelect<Customer>(CustomerApi.basePath, 'id', 'name');
+  const {
+    options: salesOptions,
+    isLoadingOptions: isLoadingSalesOptions,
+    setInputValue: setInputSalesValue,
+    loadMore: loadMoreSales,
+  } = useSelect<CreatedUser>(UserApi.basePath, 'id', 'name');
+
+  /**
+   * Step 1: General Information
+   * Step 2: Repeater Add Product
+   * Step 3: Submit
+   */
+  const [step, setStep] = useState(1);
+
+  const formModal = useModal();
+  const successModal = useModal();
+  const deleteModal = useModal();
+  const formRef = useRef<HTMLFormElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const [formikLastValues, setFormikLastValues] = useState<
+    SalesOrderFormValues | undefined
+  >(undefined);
+  const [formErrorMessage, setFormErrorMessage] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedMarketingProduct, setSelectedMarketingProduct] =
+    useState<SalesOrderProductFormValues | null>(null);
+  const [selectedDeliveryProduct, setSelectedDeliveryProduct] =
+    useState<DeliveryOrderProductFormValues | null>(null);
+  const [deliveryFormState, setDeliveryFormState] = useState<'add' | 'edit'>(
+    'add'
+  );
+  const [deliveryOrderValues, setDeliveryOrderValues] = useState<
+    DeliveryOrderProductFormValues[]
+  >(
+    mergeSOwithDO(
+      initialValues?.sales_order?.map(SalesProductToFieldValues) ?? [],
+      initialValues?.delivery_order?.flatMap((delivery) =>
+        DeliveryProductToFieldValues(initialValues.sales_order, delivery)
+      ) ?? []
+    )
+  );
+
+  // ================== SETUP FORMIK ==================
+  const formikInitialValues = useMemo<
+    SalesOrderFormValues & DeliveryOrderFormValues
+  >(() => {
+    return {
+      so_date: initialValues?.so_date || undefined,
+      notes: initialValues?.notes || undefined,
+      customer_id: initialValues?.customer?.id || undefined,
+      sales_person_id: initialValues?.sales_person?.id || undefined,
+      sales_person: initialValues?.sales_person
+        ? {
+            value: initialValues.sales_person.id,
+            label: initialValues.sales_person.name,
+          }
+        : null,
+      customer: initialValues?.customer
+        ? {
+            value: initialValues.customer.id,
+            label: initialValues.customer.name,
+          }
+        : null,
+      sales_order:
+        initialValues?.sales_order?.map((product) =>
+          SalesProductToFieldValues(product)
+        ) ?? [],
+      delivery_order: mergeSOwithDO(
+        initialValues?.sales_order?.map(SalesProductToFieldValues) ?? [],
+        initialValues?.delivery_order?.flatMap((delivery) =>
+          DeliveryProductToFieldValues(initialValues.sales_order, delivery)
+        ) ?? []
+      ),
+    };
+  }, [initialValues]);
+  const formik = useFormik<SalesOrderFormValues & DeliveryOrderFormValues>({
+    enableReinitialize: true,
+    initialValues: formikInitialValues,
+    validationSchema:
+      modalAction == 'add_deliver' || modalAction == 'edit_deliver'
+        ? DeliveryOrderSchema
+        : SalesOrderSchema,
+    validateOnMount: true,
+    onSubmit: async (values) => {
+      const payload =
+        modalAction != 'add_deliver' && modalAction != 'edit_deliver'
+          ? ({
+              customer_id: values.customer_id as number,
+              sales_person_id: values.sales_person_id as number,
+              date: formatDate(values.so_date as string, 'yyyy-MM-DD'),
+              notes: values.notes as string,
+              marketing_products: values.sales_order.map((product) => {
+                return {
+                  vehicle_number: product.vehicle_number as string,
+                  kandang_id: product.kandang_id as number,
+                  product_warehouse_id: product.product_warehouse_id as number,
+                  unit_price: parseFloat(product.unit_price as string),
+                  total_weight: parseFloat(product.total_weight as string),
+                  qty: parseFloat(product.qty as string),
+                  avg_weight: parseFloat(product.avg_weight as string),
+                  total_price: parseFloat(product.total_price as string),
+                } as CreateSalesOrderProductPayload;
+              }),
+            } as CreateSalesOrderPayload)
+          : ({
+              marketing_id: initialValues?.id as number,
+              delivery_products: values.delivery_order
+                .map((product) => {
+                  if (Boolean(product.delivery_date)) {
+                    return {
+                      marketing_product_id:
+                        product.marketing_product_id as number,
+                      unit_price: parseFloat(product.unit_price as string),
+                      total_weight: parseFloat(product.total_weight as string),
+                      qty: parseFloat(product.qty as string),
+                      avg_weight: parseFloat(product.avg_weight as string),
+                      total_price: parseFloat(product.total_price as string),
+                      delivery_date: formatDate(
+                        product.delivery_date as string,
+                        'yyyy-MM-DD'
+                      ),
+                      vehicle_number: product.vehicle_number,
+                    };
+                  }
+                })
+                .filter((item) => Boolean(item)),
+            } as UpdateDeliveryOrderPayload);
+      switch (modalAction) {
+        case 'add':
+          await createMarketingHandler(payload as CreateSalesOrderPayload);
+          break;
+        case 'edit':
+          await updateMarketingHandler(payload as UpdateSalesOrderPayload);
+          break;
+        default:
+          break;
+      }
+    },
+  });
+
+  // ===== Formik Error List =====
+  const { formErrorList, setFormErrorList, close, handleFormSubmit } =
+    useFormikErrorList(formik, {
+      onAfterSubmit: () => {
+        router.push('/marketing');
+      },
+    });
+
+  // ================== FORM REPEATER HANDLER ==================
+  const createMarketingHandler = async (values: CreateSalesOrderPayload) => {
+    setIsLoading(true);
+    const createMarketingRes = await SalesOrderApi.create(values);
+    if (isResponseSuccess(createMarketingRes)) {
+      closeModalHandler(false);
+      successModal.openModal();
+      refreshMarketing();
+    }
+    if (isResponseError(createMarketingRes)) {
+      toast.error(createMarketingRes?.message as string);
+    }
+    setIsLoading(false);
+  };
+  const updateMarketingHandler = async (values: UpdateSalesOrderPayload) => {
+    setIsLoading(true);
+    if (!marketingId) {
+      toast.error('Marketing ID is required');
+      setIsLoading(false);
+      return;
+    }
+    const updateMarketingRes = await SalesOrderApi.update(
+      Number(marketingId),
+      values
+    );
+    if (isResponseSuccess(updateMarketingRes)) {
+      closeModalHandler(false);
+      successModal.openModal();
+      refreshMarketing();
+    }
+    if (isResponseError(updateMarketingRes)) {
+      toast.error(updateMarketingRes?.message as string);
+    }
+    setIsLoading(false);
+  };
+
+  const memoSalesOrder = formik.values.sales_order;
+
+  // ================== HANDLER ==================
+  const nextButtonHandler = () => {
+    setStep(step + 1);
+  };
+  const prevButtonHandler = () => {
+    setStep(step - 1);
+  };
+  const handleChangeCustomer = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      formik.setFieldValue('customer_id', (val as OptionType)?.value);
+      formik.setFieldValue('customer', val as OptionType);
+    },
+    []
+  );
+  const handleChangeSalesPerson = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      formik.setFieldValue('sales_person_id', (val as OptionType)?.value);
+      formik.setFieldValue('sales_person', val as OptionType);
+    },
+    []
+  );
+
+  const deleteClickHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const confirmationModalDeleteClickHandler = async () => {
+    if (!marketingId) {
+      toast.error(`Tidak ada data yang valid untuk di hapus.`);
+      deleteModal.closeModal();
+      return;
+    }
+    setIsLoading(true);
+    const res = await MarketingApi.delete(Number(marketingId));
+    deleteModal.closeModal();
+    toast.success(res?.message as string);
+    setIsLoading(false);
+    refreshMarketing();
+    closeModalHandler();
+    router.replace('/marketing');
+  };
+
+  // ================== SALES ORDER HANDLER ==================
+  const handleDeleteSO = useCallback(
+    (id: number) => {
+      const currentProducts = formik.values.sales_order;
+      formik.setFieldValue(
+        'sales_order',
+        currentProducts.filter((p) => p.id != id)
+      );
+    },
+    [memoSalesOrder]
+  );
+  const handleDeleteAllSO = useCallback(() => {
+    formik.setFieldValue('sales_order', []);
+  }, [memoSalesOrder]);
+  const handleEditSO = useCallback(
+    (id: number) => {
+      const currentProducts = formik.values.sales_order;
+      const selectedProduct = currentProducts.find((p) => p.id == id);
+      setSelectedMarketingProduct(selectedProduct ?? null);
+      setStep(2);
+    },
+    [memoSalesOrder]
+  );
+  const handleAddSOClick = useCallback(() => {
+    setSelectedMarketingProduct(null);
+    if (step === 3) {
+      setStep(2);
+    } else {
+      prevButtonHandler();
+    }
+  }, [step]);
+  const handleAddSubmitSO = useCallback(
+    async (values: SalesOrderProductFormValues, id?: number) => {
+      const currentProducts = formik.values.sales_order;
+
+      const newValues = {
+        ...values,
+        id: values.id ?? Date.now(),
+      };
+
+      let updatedProducts = [];
+
+      if (id) {
+        // Overwrite
+        updatedProducts = currentProducts.map((item) =>
+          item.id === id ? newValues : item
+        );
+      } else {
+        // Add new item
+        updatedProducts = [...currentProducts, newValues];
+      }
+
+      formik.setFieldValue('sales_order', updatedProducts);
+      nextButtonHandler();
+    },
+    [memoSalesOrder, nextButtonHandler]
+  );
+
+  const isNextButtonDisabled = useMemo(() => {
+    if (step === 1) {
+      return Boolean(
+        !formik.values.customer_id ||
+          !formik.values.sales_person_id ||
+          !formik.values.so_date ||
+          !formik.values.notes
+      );
+    }
+
+    return true;
+  }, [step, formik.values]);
+
+  // ================== EFFECT ==================
+  useEffect(() => {
+    if (modalAction === 'add' || modalAction === 'edit') {
+      formModal.openModal();
+    }
+  }, [modalAction]);
+
+  const closeModalHandler = (shouldPushToRoute: boolean = true) => {
+    refreshMarketing();
+    if (shouldPushToRoute) {
+      formik.resetForm();
+      textareaRef.current?.setAttribute('value', '');
+      successModal.closeModal();
+      router.push('/marketing');
+    }
+
+    setStep(1);
+    setFormErrorMessage('');
+    formModal.closeModal();
+  };
+
+  const grandTotal = useMemo(() => {
+    return memoSalesOrder.reduce(
+      (total, product) =>
+        total + parseFloat((product.total_price as string) || '0'),
+      0
+    );
+  }, [memoSalesOrder]);
+
+  useEffect(() => {
+    const getFilledInitialValues = async () => {
+      if (marketingId && isResponseSuccess(marketing)) {
+        const filledInitialValues = await getFilledMarketingFormInitialValues(
+          marketing.data
+        );
+
+        formik.setValues(filledInitialValues);
+        setStep(3);
+      }
+
+      if (isResponseError(marketing)) {
+        router.push('/marketing');
+        closeModalHandler();
+        toast.error(marketing.message);
+      }
+    };
+
+    getFilledInitialValues();
+  }, [marketingId, marketing]);
+
+  // Reset error message when step changes
+  useEffect(() => {
+    setFormErrorList([]);
+    setFormErrorMessage('');
+  }, [step]);
+
+  useEffect(() => {
+    if (memoSalesOrder.length === 0) {
+      setStep(1);
+    }
+  }, [memoSalesOrder]);
+
+  return (
+    <>
+      <Modal
+        ref={formModal.ref}
+        position='end'
+        className={{
+          modalBox: 'w-full sm:w-fit p-3 rounded-xl bg-transparent shadow-none',
+        }}
+      >
+        <div
+          onSubmit={(e) => {
+            e.preventDefault();
+          }}
+          className='w-full min-h-full flex flex-col sm:flex-row items-stretch bg-base-100 rounded-xl overflow-y-auto'
+        >
+          {step <= 3 && (
+            <div className='w-full sm:w-[446px]'>
+              <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:x-mark' 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'>
+                  {modalAction === 'add' ? 'Add' : 'Edit'} Sales Order
+                </h4>
+              </div>
+              <form
+                className='w-full p-4 flex flex-col border-b border-base-content/10'
+                ref={formRef}
+                onSubmit={handleFormSubmit}
+              >
+                <h4 className='text-base font-medium text-base-content/50 font-roboto'>
+                  Informasi Order
+                </h4>
+
+                <SelectInputRadio
+                  required
+                  label='Pelanggan'
+                  options={customerOptions}
+                  isLoading={isLoadingCustomerOptions}
+                  value={formik.values.customer}
+                  onChange={handleChangeCustomer}
+                  onInputChange={setInputCustomerValue}
+                  onMenuScrollToBottom={loadMoreCustomer}
+                  isError={
+                    formik.touched.customer_id &&
+                    Boolean(formik.errors.customer_id)
+                  }
+                  errorMessage={formik.errors.customer_id}
+                  isClearable
+                  placeholder='Pilih Pelanggan'
+                  isDisabled={
+                    modalAction === 'add_deliver' ||
+                    modalAction === 'edit_deliver' ||
+                    modalAction === 'edit'
+                  }
+                />
+                <DateInput
+                  required
+                  name='so_date'
+                  label='Tanggal'
+                  value={formik.values.so_date}
+                  onChange={formik.handleChange}
+                  isError={
+                    formik.touched.so_date && Boolean(formik.errors.so_date)
+                  }
+                  errorMessage={formik.errors.so_date}
+                  placeholder='Pilih Tanggal'
+                  readOnly={
+                    modalAction == 'add_deliver' ||
+                    modalAction == 'edit_deliver'
+                  }
+                />
+                <SelectInputRadio
+                  required
+                  label='Sales'
+                  options={salesOptions}
+                  isLoading={isLoadingSalesOptions}
+                  value={formik.values.sales_person}
+                  onChange={handleChangeSalesPerson}
+                  onInputChange={setInputSalesValue}
+                  onMenuScrollToBottom={loadMoreSales}
+                  isError={
+                    formik.touched.sales_person_id &&
+                    Boolean(formik.errors.sales_person_id)
+                  }
+                  errorMessage={formik.errors.sales_person_id}
+                  isClearable
+                  placeholder='Pilih Sales'
+                  isDisabled={
+                    modalAction === 'add_deliver' ||
+                    modalAction === 'edit_deliver'
+                  }
+                />
+                <DebouncedTextArea
+                  ref={textareaRef}
+                  required
+                  name='notes'
+                  label='Catatan'
+                  rows={3}
+                  placeholder='Masukan catatan penjualan'
+                  value={formik.values.notes || ''}
+                  onChange={formik.handleChange}
+                  isError={formik.touched.notes && Boolean(formik.errors.notes)}
+                  errorMessage={formik.errors.notes}
+                  disabled={
+                    modalAction === 'add_deliver' ||
+                    modalAction === 'edit_deliver'
+                  }
+                />
+                <NumberInput
+                  name='total_price'
+                  label='Total Penjualan'
+                  value={grandTotal}
+                  disabled={
+                    grandTotal === 0 && formik.values.sales_order.length === 0
+                  }
+                  readOnly
+                  startAdornment={
+                    <span className='font-semibold py-1 text-xs'>Rp</span>
+                  }
+                />
+                <AlertErrorList
+                  className={{
+                    alert: 'w-full mt-4',
+                  }}
+                  formErrorList={formErrorList}
+                  onClose={close}
+                />
+              </form>
+
+              <div className='w-full p-4'>
+                {step === 1 && (
+                  <Button
+                    type='button'
+                    onClick={nextButtonHandler}
+                    disabled={isNextButtonDisabled}
+                    className='w-full rounded-lg text-sm text-base-100'
+                  >
+                    Tambah Produk
+                  </Button>
+                )}
+              </div>
+            </div>
+          )}
+          {step === 2 && (
+            <div className='w-full min-h-full flex flex-col sm:w-[446px] border-l border-base-content/10'>
+              <div className='w-full p-4 flex flex-row items-center justify-between gap-3 border-b border-base-content/10'>
+                <div className='w-full flex flex-row items-stretch gap-3'>
+                  {memoSalesOrder.length > 0 && (
+                    <>
+                      <Button
+                        type='button'
+                        variant='ghost'
+                        color='none'
+                        onClick={() => {
+                          setStep(3);
+                        }}
+                        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'>
+                    {selectedMarketingProduct?.id ? 'Ubah' : 'Tambah'} Produk
+                  </h4>
+                </div>
+                <RequirePermission permissions='lti.marketing.sales_order.delete'>
+                  <Button
+                    type='button'
+                    variant='ghost'
+                    color='none'
+                    onClick={deleteClickHandler}
+                    className='p-0 text-error hover:text-base-content'
+                  >
+                    <Icon icon='heroicons:trash' width={20} height={20} />
+                  </Button>
+                </RequirePermission>
+              </div>
+              <div className='flex flex-1 flex-col p-4'>
+                <MemoizedSalesOrderProductForm
+                  onSubmitForm={handleAddSubmitSO}
+                  initialValues={selectedMarketingProduct ?? undefined}
+                  exisitingValues={memoSalesOrder}
+                />
+              </div>
+            </div>
+          )}
+          {step === 3 && (
+            <div className='w-full min-h-full flex flex-col sm:w-[446px] border-l border-base-content/10 relative'>
+              <div className='w-full p-4 flex flex-row items-center justify-between gap-3 border-b border-base-content/10'>
+                <h4 className='text-sm font-medium text-base-content/50'>
+                  Informasi Produk
+                </h4>
+                <RequirePermission permissions='lti.marketing.sales_order.delete'>
+                  <Button
+                    type='button'
+                    variant='ghost'
+                    color='none'
+                    onClick={deleteClickHandler}
+                    className='p-0 text-error hover:text-base-content'
+                  >
+                    <Icon icon='heroicons:trash' width={20} height={20} />
+                  </Button>
+                </RequirePermission>
+              </div>
+              <div className='flex flex-1 flex-col'>
+                {memoSalesOrder.length > 0 && (
+                  <div className='px-4 pt-4'>
+                    <MemoizedSalesOrderProductTable
+                      formType={(modalAction || 'add') as 'add' | 'edit'}
+                      data={memoSalesOrder}
+                      onDelete={handleDeleteSO}
+                      onEdit={handleEditSO}
+                      onAddProductClick={handleAddSOClick}
+                    />
+                  </div>
+                )}
+                <div className='p-4 w-full'>
+                  <Button
+                    type='button'
+                    className='justify-center w-full p-3 rounded-lg text-center text-sm text-base-100'
+                    onClick={() => formRef.current?.requestSubmit()}
+                  >
+                    Submit
+                  </Button>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </Modal>
+      <ConfirmationModal
+        ref={successModal.ref}
+        iconPosition='left'
+        type='success'
+        text={`${modalAction === 'add' ? 'Data Berhasil Ditambahkan' : 'Data Berhasil Diubah'}`}
+        subtitleText={`${modalAction === 'add' ? 'Data sales order telah berhasil disimpan.' : 'Data sales order telah berhasil diubah.'}`}
+        primaryButton={{
+          text: 'Oke',
+          color: 'primary',
+          className: 'rounded-lg',
+          onClick: (e) => {
+            closeModalHandler();
+          },
+        }}
+      >
+        <MemoizedSalesOrderProductTable
+          formType={'success'}
+          data={memoSalesOrder}
+          onDelete={handleDeleteSO}
+          onEdit={handleEditSO}
+          onAddProductClick={handleAddSOClick}
+        />
+      </ConfirmationModal>
+
+      <ConfirmationModal
+        ref={deleteModal.ref}
+        type='error'
+        text={`Apakah anda yakin ingin menghapus data penjualan ini?`}
+        secondaryButton={{
+          text: 'Tidak',
+        }}
+        primaryButton={{
+          text: 'Ya',
+          color: 'error',
+          isLoading: isLoading,
+          onClick: confirmationModalDeleteClickHandler,
+        }}
+      />
+    </>
+  );
+};
+
+export default SalesOrderFormModal;

src/components/pages/marketing/form/MarketingForm.schema.ts

@@ -7,6 +7,12 @@ import {
   DeliveryOrderProductFormValues,
   DeliveryOrderProductSchema,
 } from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema';
+import {
+  BaseDeliveryOrder,
+  BaseSalesOrder,
+  Marketing,
+} from '@/types/api/marketing/marketing';
+import { formatDate } from '@/lib/helper';
 
 type MarketingSchemaType = {
   customer_id: number | undefined;
@@ -64,7 +70,7 @@ export const DeliveryOrderSchema: Yup.ObjectSchema<DeliveryOrderSchemaType> =
       .required('Pengiriman wajib diisi!')
       .test(
         'at-least-one-valid-row',
-        'Minimal ada satu baris pengiriman yang valid!',
+        'Minimal harus  ada satu baris pengiriman yang lengkap diisi!',
         function (items) {
           if (!items || items.length === 0) return false;
 
@@ -86,3 +92,124 @@ export const UpdateSalesOrderSchema = SalesOrderSchema;
 export type SalesOrderFormValues = Yup.InferType<typeof SalesOrderSchema>;
 
 export type DeliveryOrderFormValues = Yup.InferType<typeof DeliveryOrderSchema>;
+
+// ================ Helper Function ================
+const SalesProductToFieldValues = (
+  product: BaseSalesOrder
+): SalesOrderProductFormValues => {
+  return {
+    id: product.id,
+    vehicle_number: product.vehicle_number,
+    kandang_id: product.product_warehouse.warehouse.id,
+    kandang: {
+      value: product.product_warehouse.warehouse.id,
+      label: product.product_warehouse.warehouse.name,
+    },
+    product_warehouse: {
+      value: product.product_warehouse.id,
+      label: product.product_warehouse.product.name,
+    },
+    product_warehouse_id: product.product_warehouse.id,
+    unit_price: product.unit_price,
+    total_weight: product.total_weight,
+    qty: product.qty,
+    avg_weight: product.avg_weight,
+    total_price: product.total_price,
+  };
+};
+const DeliveryProductToFieldValues = (
+  salesOrders: BaseSalesOrder[],
+  delivery: BaseDeliveryOrder
+): DeliveryOrderProductFormValues[] => {
+  const data = delivery.deliveries.map((item) => {
+    const soId = salesOrders.find(
+      (so) => so.product_warehouse.id === item.product_warehouse.id
+    )?.id;
+    return {
+      id: soId,
+      unit_price: item.unit_price,
+      total_weight: item.total_weight,
+      qty: item.qty,
+      avg_weight: item.avg_weight,
+      total_price: item.total_price,
+      vehicle_number: item.vehicle_number,
+      delivery_date: formatDate(delivery.delivery_date, 'yyyy-MM-DD'),
+      do_number: delivery.do_number,
+      marketing_product_id: soId,
+      marketing_product: {
+        id: soId,
+        vehicle_number: item.vehicle_number,
+        kandang_id: item.product_warehouse.warehouse.id,
+        kandang: {
+          value: item.product_warehouse.warehouse.id,
+          label: item.product_warehouse.warehouse.name,
+        },
+        product_warehouse: {
+          value: item.product_warehouse.id,
+          label: item.product_warehouse.product.name,
+        },
+        product_warehouse_id: item.product_warehouse.id,
+        unit_price: item.unit_price,
+        total_weight: item.total_weight,
+        qty: item.qty,
+        avg_weight: item.avg_weight,
+        total_price: item.total_price,
+      },
+    } as DeliveryOrderProductFormValues;
+  });
+  return data;
+};
+export const mergeSOwithDO = (
+  salesOrders: SalesOrderProductFormValues[],
+  deliveryOrders: DeliveryOrderProductFormValues[],
+  autofill?: boolean
+): DeliveryOrderProductFormValues[] => {
+  return salesOrders.map((so) => {
+    const delivery = deliveryOrders.find(
+      (d) => d?.marketing_product_id === so.id
+    );
+
+    return {
+      ...so, // nilai dasar dari sales order
+      marketing_product_id: so.id,
+      delivery_date: delivery?.delivery_date || undefined,
+      do_number: delivery?.do_number || undefined,
+      vehicle_number: delivery?.vehicle_number || so.vehicle_number,
+      unit_price: autofill ? so.unit_price : delivery?.unit_price,
+      total_weight: autofill ? so.total_weight : delivery?.total_weight,
+      qty: autofill ? so.qty : delivery?.qty,
+      avg_weight: autofill ? so.avg_weight : delivery?.avg_weight,
+      total_price: autofill ? so.total_price : delivery?.total_price,
+      marketing_product: so, // jika ada, override
+    } as DeliveryOrderProductFormValues;
+  });
+};
+
+export const getFilledMarketingFormInitialValues = (
+  marketing: Marketing
+): SalesOrderFormValues & DeliveryOrderFormValues => {
+  return {
+    customer_id: marketing.customer.id,
+    sales_person_id: marketing.sales_person.id,
+    sales_person: {
+      value: marketing.sales_person.id,
+      label: marketing.sales_person.name,
+    },
+    customer: {
+      value: marketing.customer.id,
+      label: marketing.customer.name,
+    },
+    so_date: formatDate(marketing.so_date, 'yyyy-MM-DD'),
+    notes: marketing.notes,
+    sales_order: marketing.sales_order.map((so) =>
+      SalesProductToFieldValues(so)
+    ),
+    delivery_order: mergeSOwithDO(
+      marketing.sales_order?.map(SalesProductToFieldValues) ?? [],
+      marketing.delivery_order?.flatMap((delivery) =>
+        DeliveryProductToFieldValues(marketing.sales_order, delivery)
+      ) ?? [],
+      marketing.latest_approval.step_number > 1
+    ),
+  };
+};

src/components/pages/marketing/form/MarketingForm.tsx

@@ -41,7 +41,6 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import toast from 'react-hot-toast';
 import { useRouter } from 'next/navigation';
 import DebouncedTextArea from '@/components/input/DebouncedTextArea';
-import SalesOrderProductTable from '@/components/pages/marketing/form/table-view/SalesOrderProductTable';
 import SalesOrderProductForm from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm';
 import DeliveryOrderProductTable from '@/components/pages/marketing/form/table-view/DeliveryOrderProductTable';
 import DeliveryOrderProductForm from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct';
@@ -53,7 +52,6 @@ import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 import { CreatedUser } from '@/types/api/api-general';
 import { UserApi } from '@/services/api/user';
 
-const MemoizedSalesOrderProductTable = memo(SalesOrderProductTable);
 const MemoizedSalesOrderProductForm = memo(SalesOrderProductForm);
 const MemoizedDeliveryOrderProductTable = memo(DeliveryOrderProductTable);
 const MemoizedDeliveryOrderProductForm = memo(DeliveryOrderProductForm);
@@ -134,7 +132,8 @@ export const DeliveryProductToFieldValues = (
 };
 export const mergeSOwithDO = (
   salesOrders: SalesOrderProductFormValues[],
-  deliveryOrders: DeliveryOrderProductFormValues[]
+  deliveryOrders: DeliveryOrderProductFormValues[],
+  autofill?: boolean
 ): DeliveryOrderProductFormValues[] => {
   return salesOrders.map((so) => {
     const delivery = deliveryOrders.find(
@@ -147,11 +146,11 @@ export const mergeSOwithDO = (
       delivery_date: delivery?.delivery_date || undefined,
       do_number: delivery?.do_number || undefined,
       vehicle_number: delivery?.vehicle_number || so.vehicle_number,
-      unit_price: delivery?.unit_price,
-      total_weight: delivery?.total_weight,
-      qty: delivery?.qty,
-      avg_weight: delivery?.avg_weight,
-      total_price: delivery?.total_price,
+      unit_price: autofill ? so.unit_price : delivery?.unit_price,
+      total_weight: autofill ? so.total_weight : delivery?.total_weight,
+      qty: autofill ? so.qty : delivery?.qty,
+      avg_weight: autofill ? so.avg_weight : delivery?.avg_weight,
+      total_price: autofill ? so.total_price : delivery?.total_price,
       marketing_product: so, // jika ada, override
     } as DeliveryOrderProductFormValues;
   });
@@ -677,7 +676,7 @@ const MarketingForm = ({
           }}
           variant='bordered'
         >
-          <MemoizedSalesOrderProductTable
+          {/* <MemoizedSalesOrderProductTable
             formType={formType}
             data={memoSalesOrder}
             rowSelection={rowSOSelection}
@@ -687,7 +686,7 @@ const MarketingForm = ({
             onEdit={handleEditSO}
             onBulkDelete={handleBulkDeleteSO}
             onAddProductClick={handleAddSOClick}
-          />
+          /> */}
         </Card>
 
         {/* Input Table Repeater Delivery Order */}
@@ -701,6 +700,7 @@ const MarketingForm = ({
               }}
             >
               <MemoizedDeliveryOrderProductTable
+                marketing={initialValues}
                 formType={formType}
                 data={deliveryOrderValues}
                 onEdit={handleEditDO}

src/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.tsx

@@ -10,9 +10,7 @@ import NumberInput from '@/components/input/NumberInput';
 import PatternInput from '@/components/input/PatternInput';
 import { formatVechicleNumber } from '@/lib/helper';
 import DateInput from '@/components/input/DateInput';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import { BaseSalesOrder } from '@/types/api/marketing/marketing';
-import Badge from '@/components/Badge';
 import { SalesProductToFieldValues } from '@/components/pages/marketing/form/MarketingForm';
 import * as Yup from 'yup';
 import { isResponseSuccess } from '@/lib/api-helper';
@@ -20,6 +18,9 @@ import AlertErrorList from '@/components/helper/form/FormErrors';
 import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 import useSWR from 'swr';
 import { ProductApi } from '@/services/api/master-data';
+import StatusBadge from '@/components/helper/StatusBadge';
+import SelectInputRadio from '@/components/input/SelectInputRadio';
+import { OptionType } from '@/components/input/SelectInput';
 
 const roundWeight = (value: number) => Number(value.toFixed(2));
 const roundPrice = (value: number) => Math.round(value);
@@ -247,7 +248,7 @@ const DeliveryOrderProductForm = ({
   return (
     <>
       <form
-        className='size-full'
+        className='size-full flex flex-col relative gap-1.5'
         onSubmit={handleFormSubmit}
         onReset={handleResetForm}
       >
@@ -256,218 +257,214 @@ const DeliveryOrderProductForm = ({
             <Alert color='error'>{formikErrorMessage}</Alert>
           </div>
         )}
+        <DateInput
+          name='delivery_date'
+          label='Tanggal'
+          value={formik.values.delivery_date ?? undefined}
+          onChange={formik.handleChange}
+          onBlur={formik.handleBlur}
+          isError={
+            formik.touched.delivery_date && Boolean(formik.errors.delivery_date)
+          }
+          errorMessage={formik.errors.delivery_date}
+          placeholder='Pilih Tanggal'
+          className={{
+            inputWrapper: 'bg-white',
+          }}
+          required
+        />
+        <SelectInputRadio
+          options={options}
+          label='Produk'
+          placeholder='Pilih Produk'
+          readOnly={formState == 'edit'}
+          value={
+            selectedProduct
+              ? ({
+                  value: selectedProduct?.value,
+                  label: exisitingValues?.find(
+                    (item) => item.id === selectedProduct?.value
+                  )?.marketing_product?.product_warehouse?.label,
+                } as OptionType)
+              : null
+          }
+          onChange={(value) => {
+            const selected = value as OptionType;
+            setSelectedProduct(selected);
 
-        <div className='grid sm:grid-cols-3 gap-4'>
-          <SelectInput
-            options={options}
-            label='Produk'
-            placeholder='Pilih Produk'
-            isDisabled={formState == 'edit'}
-            value={
-              selectedProduct
-                ? ({
-                    value: selectedProduct?.value,
-                    label: exisitingValues?.find(
-                      (item) => item.id === selectedProduct?.value
-                    )?.marketing_product?.product_warehouse?.label,
-                  } as OptionType)
-                : null
-            }
-            onChange={(value) => {
-              const selected = value as OptionType;
-              setSelectedProduct(selected);
-
-              const so = salesOrders?.find(
-                (item) => item.id === selected?.value
-              );
-              if (!so) {
-                formik.setValues({
-                  ...formik.values,
-                  marketing_product_id: undefined,
-                  marketing_product: null,
-                  qty: '',
-                  unit_price: '',
-                  total_price: '',
-                  avg_weight: '',
-                  total_weight: '',
-                  vehicle_number: '',
-                });
-                return;
-              }
-
+            const so = salesOrders?.find((item) => item.id === selected?.value);
+            if (!so) {
               formik.setValues({
                 ...formik.values,
-                marketing_product_id: selected.value as number,
-                marketing_product: SalesProductToFieldValues(so),
-                qty: so.qty,
-                unit_price: so.unit_price,
-                total_price: so.total_price,
-                avg_weight: so.avg_weight,
-                total_weight: so.total_weight,
-                vehicle_number: so.vehicle_number,
+                marketing_product_id: undefined,
+                marketing_product: null,
+                qty: '',
+                unit_price: '',
+                total_price: '',
+                avg_weight: '',
+                total_weight: '',
+                vehicle_number: '',
               });
-            }}
-            startAdornment={
-              selectedProduct && (
-                <Badge
-                  variant='soft'
-                  color='success'
-                  size='sm'
-                  className={{ badge: 'whitespace-nowrap font-semibold' }}
-                >
-                  {
-                    exisitingValues?.find(
-                      (item) => item.id === selectedProduct?.value
-                    )?.marketing_product?.kandang?.label
-                  }
-                </Badge>
-              )
+              return;
             }
-            isClearable
-            isError={Boolean(formik.errors.marketing_product_id)}
-            errorMessage={formik.errors.marketing_product_id}
-            required
-          />
-          <DateInput
-            name='delivery_date'
-            label='Tanggal'
-            value={formik.values.delivery_date ?? undefined}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            isError={
-              formik.touched.delivery_date &&
-              Boolean(formik.errors.delivery_date)
-            }
-            errorMessage={formik.errors.delivery_date}
-            placeholder='Pilih Tanggal'
-            className={{
-              inputWrapper: 'bg-white',
-            }}
-            required
-          />
 
-          <PatternInput
-            name='vehicle_number'
-            label='No. Polisi'
-            format='AA #### AAA'
-            mask='_'
-            inputVehicleNumber
-            required
-            type='text'
-            placeholder='B 1234 CDE'
-            value={formatVechicleNumber(formik.values.vehicle_number ?? '')}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            isError={Boolean(formik.errors.vehicle_number)}
-            errorMessage={formik.errors.vehicle_number}
-          />
-        </div>
-        <div className='divider my-6'></div>
-        <div className='grid sm:grid-cols-3 gap-4'>
-          <NumberInput
-            required
-            label='Kuantitas'
-            name='qty'
-            value={formik.values.qty}
-            onChange={(e) => {
-              formik.handleChange(e);
-              setCurrentInput(e.target.name);
-            }}
-            onBlur={() => handleBlurField('qty')}
-            isError={Boolean(formik.errors.qty)}
-            errorMessage={formik.errors.qty}
-            placeholder='Masukan Kuantitas'
-            endAdornment={
-              <div className='flex items-center gap-2'>
-                <span className='text-sm text-gray-500'>
-                  {isResponseSuccess(productData)
-                    ? productData?.data?.uom.name
-                    : ''}
-                </span>
-              </div>
-            }
-            bottomLabel={
-              formik.values.marketing_product_id
-                ? 'Stok dijual: ' +
-                  salesOrders?.find(
-                    (item) => item.id === formik.values.marketing_product_id
-                  )?.qty +
-                  ' ' +
-                  (isResponseSuccess(productData)
-                    ? productData?.data?.uom.name
-                    : '')
-                : ''
-            }
-          />
-          <NumberInput
-            required
-            label={`Harga / ${isResponseSuccess(productData) ? productData?.data?.uom?.name : 'Produk'} (Rp)`}
-            name='unit_price'
-            value={formik.values.unit_price}
-            onChange={(e) => {
-              formik.handleChange(e);
-              setCurrentInput(e.target.name);
-            }}
-            onBlur={() => handleBlurField('unit_price')}
-            isError={Boolean(formik.errors.unit_price)}
-            errorMessage={formik.errors.unit_price}
-            placeholder='Masukan Harga Satuan'
-          />
-          <NumberInput
-            required
-            label='Avg. Bobot (Kg)'
-            name='avg_weight'
-            value={formik.values.avg_weight}
-            onChange={(e) => {
-              formik.handleChange(e);
-              setCurrentInput(e.target.name);
-            }}
-            onBlur={() => handleBlurField('avg_weight')}
-            isError={Boolean(formik.errors.avg_weight)}
-            errorMessage={formik.errors.avg_weight}
-            placeholder='Masukan Bobot Rata-rata'
-          />
-          <NumberInput
-            required
-            label='Total Bobot (Kg)'
-            name='total_weight'
-            value={formik.values.total_weight}
-            onChange={(e) => {
-              formik.handleChange(e);
-              setCurrentInput(e.target.name);
-            }}
-            onBlur={() => handleBlurField('total_weight')}
-            isError={Boolean(formik.errors.total_weight)}
-            errorMessage={formik.errors.total_weight}
-            placeholder='Masukan Total Bobot'
-          />
+            formik.setValues({
+              ...formik.values,
+              marketing_product_id: selected.value as number,
+              marketing_product: SalesProductToFieldValues(so),
+              qty: so.qty,
+              unit_price: so.unit_price,
+              total_price: so.total_price,
+              avg_weight: so.avg_weight,
+              total_weight: so.total_weight,
+              vehicle_number: so.vehicle_number,
+            });
+          }}
+          startAdornment={
+            selectedProduct && (
+              <StatusBadge
+                text={
+                  exisitingValues?.find(
+                    (item) => item.id === selectedProduct?.value
+                  )?.marketing_product?.kandang?.label ?? ''
+                }
+                color='success'
+                className={{
+                  badge: 'whitespace-nowrap w-fit font-semibold',
+                }}
+              />
+            )
+          }
+          isClearable
+          isError={Boolean(formik.errors.marketing_product_id)}
+          errorMessage={formik.errors.marketing_product_id}
+          required
+        />
 
-          <NumberInput
-            required
-            label='Total Penjualan (Rp)'
-            name='total_price'
-            value={formik.values.total_price}
-            onChange={(e) => {
-              formik.handleChange(e);
-              setCurrentInput(e.target.name);
-            }}
-            onBlur={() => handleBlurField('total_price')}
-            isError={Boolean(formik.errors.total_price)}
-            errorMessage={formik.errors.total_price}
-            placeholder='Masukan Total Penjualan'
-          />
-        </div>
+        <PatternInput
+          name='vehicle_number'
+          label='No. Polisi'
+          format='AA #### AAA'
+          mask='_'
+          inputVehicleNumber
+          required
+          type='text'
+          placeholder='B 1234 CDE'
+          value={formatVechicleNumber(formik.values.vehicle_number ?? '')}
+          onChange={formik.handleChange}
+          onBlur={formik.handleBlur}
+          isError={Boolean(formik.errors.vehicle_number)}
+          errorMessage={formik.errors.vehicle_number}
+        />
+        <NumberInput
+          required
+          label='Kuantitas'
+          name='qty'
+          value={formik.values.qty}
+          onChange={(e) => {
+            formik.handleChange(e);
+            setCurrentInput(e.target.name);
+          }}
+          onBlur={() => handleBlurField('qty')}
+          isError={Boolean(formik.errors.qty)}
+          errorMessage={formik.errors.qty}
+          placeholder='Masukan Kuantitas'
+          endAdornment={
+            <div className='flex items-center gap-2'>
+              <span className='text-sm text-gray-500'>
+                {isResponseSuccess(productData)
+                  ? productData?.data?.uom.name
+                  : ''}
+              </span>
+            </div>
+          }
+          bottomLabel={
+            formik.values.marketing_product_id
+              ? 'Stok dijual: ' +
+                salesOrders?.find(
+                  (item) => item.id === formik.values.marketing_product_id
+                )?.qty +
+                ' ' +
+                (isResponseSuccess(productData)
+                  ? productData?.data?.uom.name
+                  : '')
+              : ''
+          }
+        />
+        <NumberInput
+          required
+          label={`Harga / ${isResponseSuccess(productData) ? productData?.data?.uom?.name : 'Produk'} (Rp)`}
+          name='unit_price'
+          value={formik.values.unit_price}
+          onChange={(e) => {
+            formik.handleChange(e);
+            setCurrentInput(e.target.name);
+          }}
+          onBlur={() => handleBlurField('unit_price')}
+          isError={Boolean(formik.errors.unit_price)}
+          errorMessage={formik.errors.unit_price}
+          placeholder='Masukan Harga Satuan'
+        />
+        <NumberInput
+          required
+          label='Avg. Bobot (Kg)'
+          name='avg_weight'
+          value={formik.values.avg_weight}
+          onChange={(e) => {
+            formik.handleChange(e);
+            setCurrentInput(e.target.name);
+          }}
+          onBlur={() => handleBlurField('avg_weight')}
+          isError={Boolean(formik.errors.avg_weight)}
+          errorMessage={formik.errors.avg_weight}
+          placeholder='Masukan Bobot Rata-rata'
+        />
+        <NumberInput
+          required
+          label='Total Bobot (Kg)'
+          name='total_weight'
+          value={formik.values.total_weight}
+          onChange={(e) => {
+            formik.handleChange(e);
+            setCurrentInput(e.target.name);
+          }}
+          onBlur={() => handleBlurField('total_weight')}
+          isError={Boolean(formik.errors.total_weight)}
+          errorMessage={formik.errors.total_weight}
+          placeholder='Masukan Total Bobot'
+        />
 
-        <AlertErrorList formErrorList={formErrorList} onClose={close} />
+        <NumberInput
+          required
+          label='Total Penjualan (Rp)'
+          name='total_price'
+          value={formik.values.total_price}
+          onChange={(e) => {
+            formik.handleChange(e);
+            setCurrentInput(e.target.name);
+          }}
+          onBlur={() => handleBlurField('total_price')}
+          isError={Boolean(formik.errors.total_price)}
+          errorMessage={formik.errors.total_price}
+          placeholder='Masukan Total Penjualan'
+        />
 
-        <div className='flex flex-row justify-end gap-3 mt-4'>
-          <Button type='reset' color='warning'>
-            Reset
-          </Button>
+        <AlertErrorList
+          className={{
+            alert: 'w-full my-4',
+          }}
+          formErrorList={formErrorList}
+          onClose={close}
+        />
+
+        <div className='h-18' />
+
+        <div className='absolute sm:w-full bottom-0 right-0'>
           <Button
             type='submit'
             isLoading={formik.isSubmitting}
             disabled={formik.isSubmitting}
+            className='w-full p-3 rounded-lg text-base-100 text-sm font-semibold'
           >
             Submit
           </Button>

src/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm.tsx

@@ -6,27 +6,20 @@ import {
   SalesOrderProductSchema,
 } from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
 import { RefObject, useMemo, useState } from 'react';
-import SelectInput, {
-  OptionType,
-  useSelect,
-} from '@/components/input/SelectInput';
+import { OptionType, useSelect } from '@/components/input/SelectInput';
 import { Kandang } from '@/types/api/master-data/kandang';
-import { ProductApi, UomApi, WarehouseApi } from '@/services/api/master-data';
+import { WarehouseApi } from '@/services/api/master-data';
 import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
 import { ProductWarehouseApi } from '@/services/api/inventory';
 import NumberInput from '@/components/input/NumberInput';
 import Button from '@/components/Button';
 import { isResponseSuccess } from '@/lib/api-helper';
-import {
-  formatCurrency,
-  formatNumber,
-  formatVechicleNumber,
-} from '@/lib/helper';
+import { formatNumber, formatVechicleNumber } from '@/lib/helper';
 import PatternInput from '@/components/input/PatternInput';
 import Alert from '@/components/Alert';
 import AlertErrorList from '@/components/helper/form/FormErrors';
 import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
-import useSWR from 'swr';
+import SelectInputRadio from '@/components/input/SelectInputRadio';
 
 const roundWeight = (value: number) => Number(value.toFixed(2));
 const roundPrice = (value: number) => Math.round(value);
@@ -282,7 +275,7 @@ const SalesOrderProductForm = ({
   return (
     <>
       <form
-        className='size-full'
+        className='size-full flex flex-col gap-1.5 relative'
         onSubmit={handleFormSubmit}
         onReset={handleResetForm}
       >
@@ -293,177 +286,172 @@ const SalesOrderProductForm = ({
             </Alert>
           </div>
         )}
-        <div className='grid sm:grid-cols-3 gap-4 z-200'>
-          <PatternInput
-            name='vehicle_number'
-            label='No. Polisi'
-            format='AA #### AAA'
-            mask='_'
-            inputVehicleNumber
-            required
-            type='text'
-            placeholder='B 1234 CDE'
-            value={formatVechicleNumber(formik.values.vehicle_number ?? '')}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            isError={
-              formik.touched.vehicle_number &&
-              Boolean(formik.errors.vehicle_number)
-            }
-            errorMessage={formik.errors.vehicle_number}
-          />
-          <SelectInput
-            required
-            label='Kandang'
-            options={kandangSourceOptions}
-            isLoading={isLoadingKandangSourceOptions}
-            value={formik.values.kandang}
-            onChange={kandangChangeHandler}
-            isClearable
-            onInputChange={setKandangInputValue}
-            onMenuScrollToBottom={loadMoreKandang}
-            isError={
-              formik.touched.kandang_id && Boolean(formik.errors.kandang_id)
-            }
-            errorMessage={formik.errors.kandang_id}
-            placeholder='Pilih Kandang'
-          />
-          <SelectInput
-            required
-            label='Produk'
-            options={productOptionsFiltered}
-            isLoading={isLoadingWarehouseSourceOptions}
-            value={formik.values.product_warehouse}
-            onChange={warehouseChangeHandler}
-            onInputChange={setWarehouseInputValue}
-            onMenuScrollToBottom={loadMoreWarehouse}
-            isClearable
-            placeholder={
-              formik.values.kandang_id
-                ? productOptionsFiltered.length == 0
-                  ? 'Tidak ada produk yang tersedia'
-                  : 'Pilih produk'
-                : 'Pilih Kandang Terlebih Dahulu'
-            }
-            isDisabled={!formik.values.kandang_id}
-            isError={
-              formik.touched.product_warehouse_id &&
-              Boolean(formik.errors.product_warehouse_id)
-            }
-            errorMessage={formik.errors.product_warehouse_id}
-          />
-        </div>
-        <div className='divider my-6'></div>
-        <div className='grid sm:grid-cols-3 gap-4 z-200'>
-          <NumberInput
-            required
-            label='Kuantitas'
-            name='qty'
-            value={formik.values.qty}
-            onChange={(e) => {
-              formik.handleChange(e);
-              setCurrentInput(e.target.name);
-            }}
-            onBlur={() => handleBlurField('qty')}
-            isError={formik.touched.qty && Boolean(formik.errors.qty)}
-            errorMessage={formik.errors.qty}
-            placeholder='Masukan Kuantitas'
-            endAdornment={
-              <div className='flex items-center gap-2'>
-                <span className='text-sm text-gray-500'>
-                  {selectedProductWarehouse?.product?.uom?.name}
-                </span>
-              </div>
-            }
-            bottomLabel={
-              isResponseSuccess(warehouseSourceRawData) &&
-              formik.values.product_warehouse_id
-                ? `Stok tersedia: ${formatNumber(
-                    warehouseSourceRawData?.data?.find(
-                      (item) => item.id === formik.values.product_warehouse_id
-                    )?.quantity ?? 0
-                  )} ${selectedProductWarehouse?.product?.uom?.name}`
-                : ''
-            }
-          />
-          <NumberInput
-            required
-            label={`Harga / ${selectedProductWarehouse?.product?.uom?.name ?? 'Produk'} (Rp)`}
-            name='unit_price'
-            value={formik.values.unit_price}
-            onChange={(e) => {
-              formik.handleChange(e);
-              setCurrentInput(e.target.name);
-            }}
-            onBlur={() => handleBlurField('unit_price')}
-            isError={
-              formik.touched.unit_price && Boolean(formik.errors.unit_price)
-            }
-            errorMessage={formik.errors.unit_price}
-            placeholder='Masukan Harga Satuan'
-          />
-          <NumberInput
-            required
-            label='Avg. Bobot (Kg)'
-            name='avg_weight'
-            value={formik.values.avg_weight}
-            onChange={(e) => {
-              formik.handleChange(e);
-              setCurrentInput(e.target.name);
-            }}
-            onBlur={() => handleBlurField('avg_weight')}
-            isError={
-              formik.touched.avg_weight && Boolean(formik.errors.avg_weight)
-            }
-            errorMessage={formik.errors.avg_weight}
-            placeholder='Masukan Bobot Rata-rata'
-          />
-          <NumberInput
-            required
-            label='Total Bobot (Kg)'
-            name='total_weight'
-            value={formik.values.total_weight}
-            onChange={(e) => {
-              formik.handleChange(e);
-              setCurrentInput(e.target.name);
-            }}
-            onBlur={() => handleBlurField('total_weight')}
-            isError={
-              formik.touched.total_weight && Boolean(formik.errors.total_weight)
-            }
-            errorMessage={formik.errors.total_weight}
-            placeholder='Masukan Total Bobot'
-          />
-          <NumberInput
-            required
-            label='Total Penjualan (Rp)'
-            name='total_price'
-            value={formik.values.total_price}
-            onChange={(e) => {
-              formik.handleChange(e);
-              setCurrentInput(e.target.name);
-            }}
-            onBlur={() => handleBlurField('total_price')}
-            isError={
-              formik.touched.total_price && Boolean(formik.errors.total_price)
-            }
-            errorMessage={formik.errors.total_price}
-            placeholder='Masukan Total Penjualan'
-          />
-        </div>
+        <PatternInput
+          name='vehicle_number'
+          label='No. Polisi'
+          format='AA #### AAA'
+          mask='_'
+          inputVehicleNumber
+          required
+          type='text'
+          placeholder='B 1234 CDE'
+          value={formatVechicleNumber(formik.values.vehicle_number ?? '')}
+          onChange={formik.handleChange}
+          onBlur={formik.handleBlur}
+          isError={
+            formik.touched.vehicle_number &&
+            Boolean(formik.errors.vehicle_number)
+          }
+          errorMessage={formik.errors.vehicle_number}
+        />
+        <SelectInputRadio
+          required
+          label='Kandang'
+          options={kandangSourceOptions}
+          isLoading={isLoadingKandangSourceOptions}
+          value={formik.values.kandang}
+          onChange={kandangChangeHandler}
+          isClearable
+          onInputChange={setKandangInputValue}
+          onMenuScrollToBottom={loadMoreKandang}
+          isError={
+            formik.touched.kandang_id && Boolean(formik.errors.kandang_id)
+          }
+          errorMessage={formik.errors.kandang_id}
+          placeholder='Pilih Kandang'
+        />
+        <SelectInputRadio
+          required
+          label='Produk'
+          options={productOptionsFiltered}
+          isLoading={isLoadingWarehouseSourceOptions}
+          value={formik.values.product_warehouse}
+          onChange={warehouseChangeHandler}
+          onInputChange={setWarehouseInputValue}
+          onMenuScrollToBottom={loadMoreWarehouse}
+          isClearable
+          placeholder={
+            formik.values.kandang_id
+              ? productOptionsFiltered.length == 0
+                ? 'Tidak ada produk yang tersedia'
+                : 'Pilih produk'
+              : 'Pilih Kandang Terlebih Dahulu'
+          }
+          isDisabled={!formik.values.kandang_id}
+          isError={
+            formik.touched.product_warehouse_id &&
+            Boolean(formik.errors.product_warehouse_id)
+          }
+          errorMessage={formik.errors.product_warehouse_id}
+        />
+        <NumberInput
+          required
+          label='Kuantitas'
+          name='qty'
+          value={formik.values.qty}
+          onChange={(e) => {
+            formik.handleChange(e);
+            setCurrentInput(e.target.name);
+          }}
+          onBlur={() => handleBlurField('qty')}
+          isError={formik.touched.qty && Boolean(formik.errors.qty)}
+          errorMessage={formik.errors.qty}
+          placeholder='Masukan Kuantitas'
+          endAdornment={
+            <div className='flex items-center gap-2'>
+              <span className='text-sm text-gray-500'>
+                {selectedProductWarehouse?.product?.uom?.name}
+              </span>
+            </div>
+          }
+          bottomLabel={
+            isResponseSuccess(warehouseSourceRawData) &&
+            formik.values.product_warehouse_id
+              ? `Stok tersedia: ${formatNumber(
+                  warehouseSourceRawData?.data?.find(
+                    (item) => item.id === formik.values.product_warehouse_id
+                  )?.quantity ?? 0
+                )} ${selectedProductWarehouse?.product?.uom?.name}`
+              : ''
+          }
+        />
+        <NumberInput
+          required
+          label={`Harga / ${selectedProductWarehouse?.product?.uom?.name ?? 'Produk'} (Rp)`}
+          name='unit_price'
+          value={formik.values.unit_price}
+          onChange={(e) => {
+            formik.handleChange(e);
+            setCurrentInput(e.target.name);
+          }}
+          onBlur={() => handleBlurField('unit_price')}
+          isError={
+            formik.touched.unit_price && Boolean(formik.errors.unit_price)
+          }
+          errorMessage={formik.errors.unit_price}
+          placeholder='Masukan Harga Satuan'
+        />
+        <NumberInput
+          required
+          label='Avg. Bobot (Kg)'
+          name='avg_weight'
+          value={formik.values.avg_weight}
+          onChange={(e) => {
+            formik.handleChange(e);
+            setCurrentInput(e.target.name);
+          }}
+          onBlur={() => handleBlurField('avg_weight')}
+          isError={
+            formik.touched.avg_weight && Boolean(formik.errors.avg_weight)
+          }
+          errorMessage={formik.errors.avg_weight}
+          placeholder='Masukan Bobot Rata-rata'
+        />
+        <NumberInput
+          required
+          label='Total Bobot (Kg)'
+          name='total_weight'
+          value={formik.values.total_weight}
+          onChange={(e) => {
+            formik.handleChange(e);
+            setCurrentInput(e.target.name);
+          }}
+          onBlur={() => handleBlurField('total_weight')}
+          isError={
+            formik.touched.total_weight && Boolean(formik.errors.total_weight)
+          }
+          errorMessage={formik.errors.total_weight}
+          placeholder='Masukan Total Bobot'
+        />
+        <NumberInput
+          required
+          label='Total Penjualan (Rp)'
+          name='total_price'
+          value={formik.values.total_price}
+          onChange={(e) => {
+            formik.handleChange(e);
+            setCurrentInput(e.target.name);
+          }}
+          onBlur={() => handleBlurField('total_price')}
+          isError={
+            formik.touched.total_price && Boolean(formik.errors.total_price)
+          }
+          errorMessage={formik.errors.total_price}
+          placeholder='Masukan Total Penjualan'
+        />
 
         <div className='mt-4'>
           <AlertErrorList formErrorList={formErrorList} onClose={close} />
         </div>
 
-        <div className='flex flex-row justify-end gap-3 mt-4'>
-          <Button type='reset' color='warning' onClick={handleResetForm}>
-            Reset
-          </Button>
+        <div className='h-18' />
+
+        <div className='absolute w-full bottom-0 right-0'>
           <Button
             type='submit'
             isLoading={formik.isSubmitting}
             disabled={formik.isSubmitting}
+            className='w-full p-3 rounded-lg text-base-100'
           >
             Submit
           </Button>

src/components/pages/marketing/form/table-view/DeliveryOrderProductTable.tsx

@@ -1,21 +1,27 @@
-import Table from '@/components/Table';
 import { DeliveryOrderProductFormValues } from '@/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.schema';
 import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
-import * as TanStack from '@tanstack/react-table';
-import { useMemo, useRef } from 'react';
-import {
-  cn,
-  formatCurrency,
-  formatDate,
-  formatNumber,
-  formatVechicleNumber,
-} from '@/lib/helper';
+import { useRef } from 'react';
+import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
+import DeliveryOrderExport from '@/components/pages/marketing/pdf/DeliveryOrderExport';
+import { Marketing } from '@/types/api/marketing/marketing';
 
 type DeliveryOrderProductTableProps = {
   data: DeliveryOrderProductFormValues[];
-  formType?: 'add' | 'edit' | 'add_deliver' | 'edit_deliver';
-  onEdit: (id: number) => void;
+  formType?:
+    | 'add'
+    | 'edit'
+    | 'add_deliver'
+    | 'edit_deliver'
+    | 'add_delivery'
+    | 'edit_delivery'
+    | 'detail'
+    | 'rejected'
+    | 'pending'
+    | string
+    | null;
+  marketing?: Marketing;
+  onEdit: (id: number, values: DeliveryOrderProductFormValues) => void;
   onDelete: (id: number) => void;
   onAddProductClick: () => void;
 };
@@ -26,201 +32,168 @@ const DeliveryOrderProductTable = ({
   onEdit,
   onDelete,
   onAddProductClick,
+  marketing,
 }: DeliveryOrderProductTableProps) => {
   const onEditRef = useRef(onEdit);
   onEditRef.current = onEdit;
   const onDeleteRef = useRef(onDelete);
   onDeleteRef.current = onDelete;
 
-  const canAddData = data.filter((item) => !Boolean(item.qty));
-
-  const columns = useMemo(() => {
-    const cols = [
-      {
-        accessorFn: (row: DeliveryOrderProductFormValues) => row.do_number,
-        header: 'No. Pengiriman',
-        cell: (
-          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
-        ) => (
-          <>
-            {props.row.original.do_number ? props.row.original.do_number : '-'}
-          </>
-        ),
-      },
-      {
-        accessorFn: (row: DeliveryOrderProductFormValues) => row.vehicle_number,
-        header: 'No. Polisi',
-        cell: (
-          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
-        ) =>
-          props.row.original.vehicle_number
-            ? formatVechicleNumber(props.row.original.vehicle_number as string)
-            : '-',
-      },
-      {
-        accessorFn: (row: DeliveryOrderProductFormValues) =>
-          row.marketing_product?.kandang?.label,
-        header: 'Kandang',
-      },
-      {
-        accessorFn: (row: DeliveryOrderProductFormValues) =>
-          row.marketing_product?.product_warehouse?.label,
-        header: 'Produk',
-      },
-      {
-        accessorFn: (row: DeliveryOrderProductFormValues) =>
-          row.delivery_date
-            ? formatDate(row.delivery_date as string, 'DD MMM YYYY')
-            : '-',
-        header: 'Tanggal Delivery',
-        cell: (
-          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
-        ) =>
-          props.row.original.delivery_date
-            ? formatDate(
-                props.row.original.delivery_date as string,
-                'DD MMM YYYY'
-              )
-            : '-',
-      },
-      {
-        accessorFn: (row: DeliveryOrderProductFormValues) => row.unit_price,
-        header: 'Harga Satuan (Rp)',
-        cell: (
-          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
-        ) =>
-          props.row.original.unit_price
-            ? formatCurrency(
-                parseFloat(props.row.original.unit_price as string)
-              )
-            : '-',
-      },
-      {
-        accessorFn: (row: DeliveryOrderProductFormValues) => row.total_weight,
-        header: 'Total Bobot (Kg)',
-        cell: (
-          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
-        ) =>
-          props.row.original.total_weight
-            ? formatNumber(
-                parseFloat(props.row.original.total_weight as string)
-              )
-            : '-',
-      },
-      {
-        accessorFn: (row: DeliveryOrderProductFormValues) => row.qty,
-        header: 'Kuantitas',
-        cell: (
-          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
-        ) =>
-          props.row.original.qty
-            ? formatNumber(parseFloat(props.row.original.qty as string))
-            : '-',
-      },
-      {
-        accessorFn: (row: DeliveryOrderProductFormValues) => row.avg_weight,
-        header: 'Avg. Bobot (Kg)',
-        cell: (
-          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
-        ) =>
-          props.row.original.avg_weight
-            ? formatNumber(parseFloat(props.row.original.avg_weight as string))
-            : '-',
-      },
-      {
-        accessorFn: (row: DeliveryOrderProductFormValues) => row.total_price,
-        header: 'Total Penjualan (Rp)',
-        cell: (
-          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
-        ) =>
-          props.row.original.total_price
-            ? formatCurrency(
-                parseFloat(props.row.original.total_price as string)
-              )
-            : '-',
-      },
-
-      {
-        header: 'Aksi',
-        cell: (
-          props: TanStack.CellContext<DeliveryOrderProductFormValues, unknown>
-        ) => (
-          <div className='flex flex-row gap-1 items-center justify-end h-full mt-2'>
-            <>
-              {props.row.original.qty && (
-                <>
-                  <Button
-                    color='warning'
-                    className='px-2 py-1 text-sm'
-                    onClick={() =>
-                      onEditRef.current(props.row.original.id as number)
-                    }
-                    type='button'
-                  >
-                    <Icon icon='mdi:edit' width={16} height={16} /> Edit
-                  </Button>
-                  <Button
-                    color='error'
-                    className='px-2 py-1 text-sm'
-                    onClick={() =>
-                      onDeleteRef.current(props.row.original.id as number)
-                    }
-                    type='button'
-                    disabled={!!props.row.original.do_number}
-                  >
-                    <Icon icon='mdi:delete' width={16} height={16} /> Hapus
-                  </Button>
-                </>
-              )}
-              {!props.row.original.qty && '-'}
-            </>
-          </div>
-        ),
-      },
-    ];
-    if (formType == 'add_deliver') {
-      return cols.filter((col) => col.header != 'No. Pengiriman');
-    }
-    return cols;
-  }, [formType, onEditRef]);
-
   return (
     <>
-      <Table<DeliveryOrderProductFormValues>
-        data={data}
-        columns={columns}
-        className={{
-          tableWrapperClassName: 'overflow-x-auto min-h-full!',
-          tableClassName: 'font-inter w-full table-auto min-h-full!',
-          headerRowClassName: 'border-b border-b-gray-200',
-          headerColumnClassName:
-            'px-2 py-2 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end first:flex first:flex-row first:justify-start',
-          bodyRowClassName: 'border-b border-b-gray-200',
-          bodyColumnClassName:
-            'px-2 py-2 last:flex last:flex-row last:justify-end',
-          paginationClassName: 'hidden',
-        }}
-        emptyContent={
-          <div
-            className={cn(
-              'w-full h-16 flex flex-col justify-center items-center gap-2'
-            )}
-          >
-            <span className='text-gray-500'>Belum ada data pengiriman</span>
-          </div>
-        }
-      />
-      <div className='flex flex-row gap-3 mt-3'>
-        <Button
-          type='button'
-          variant='outline'
-          className='justify-start w-fit py-1 text-sm'
-          onClick={onAddProductClick}
-          disabled={!canAddData}
-        >
-          <Icon icon='mdi:plus' width={16} height={16} />
-          Tambah Pengiriman
-        </Button>
+      <div className='size-full flex flex-col relative overflow-x-hidden gap-3'>
+        {data.map((item) => {
+          const doItem = marketing?.delivery_order?.find(
+            (doItem) => doItem.do_number === item.do_number
+          );
+          return (
+            <div
+              className='rounded-lg border border-tools-table-outline border-base-content/5'
+              key={`table-${item.id}`}
+            >
+              <table
+                style={{
+                  borderRadius: '0.5rem',
+                }}
+                className='border-none w-full'
+              >
+                <tbody className='w-full'>
+                  <tr className='border-b border-tools-table-outline border-base-content/5'>
+                    <th className='w-1/3 text-start not-first:font-medium text-base-content/50 text-sm px-4 py-3'>
+                      Label
+                    </th>
+                    <th className='text-start font-medium text-base-content/50 text-sm px-4 py-3'>
+                      <div className='flex w-full flex-row gap-1 items-center justify-between h-full mt-2'>
+                        <div>Value</div>
+                        {(formType === 'add_delivery' ||
+                          formType === 'edit_delivery' ||
+                          formType === 'detail') && (
+                          <div className='flex flex-row gap-1.5 items-center'>
+                            <Button
+                              type='button'
+                              variant='ghost'
+                              color='none'
+                              onClick={() => {
+                                onEditRef.current(item.id as number, item);
+                              }}
+                              className='p-0 hover:text-base-content'
+                            >
+                              <Icon
+                                icon='heroicons:pencil'
+                                width={20}
+                                height={20}
+                              />
+                            </Button>
+                            <Button
+                              type='button'
+                              variant='ghost'
+                              color='none'
+                              onClick={() => {
+                                onDeleteRef.current(item.id as number);
+                              }}
+                              className='p-0 text-error hover:text-base-content'
+                            >
+                              <Icon
+                                icon='heroicons:trash'
+                                width={20}
+                                height={20}
+                              />
+                            </Button>
+                          </div>
+                        )}
+                      </div>
+                    </th>
+                  </tr>
+                  <>
+                    <tr>
+                      <td className='text-sm px-4 py-3'>Tanggal Pengiriman</td>
+                      <td className='text-sm px-4 py-3'>
+                        {item.delivery_date ? (
+                          formatDate(item.delivery_date, 'DD MMM YYYY')
+                        ) : (
+                          <span className='text-error'>Belum diisi</span>
+                        )}
+                      </td>
+                    </tr>
+                    {item.do_number && (
+                      <tr>
+                        <td className='text-sm px-4 py-3'>No. Pengiriman</td>
+                        <td className='text-sm px-4 py-3'>{item.do_number}</td>
+                      </tr>
+                    )}
+                    <tr>
+                      <td className='text-sm px-4 py-3'>No. Polisi</td>
+                      <td className='text-sm px-4 py-3'>
+                        {item.vehicle_number}
+                      </td>
+                    </tr>
+                    <tr>
+                      <td className='text-sm px-4 py-3'>Gudang</td>
+                      <td className='text-sm px-4 py-3'>
+                        {item.marketing_product?.product_warehouse?.label}
+                      </td>
+                    </tr>
+                    <tr>
+                      <td className='text-sm px-4 py-3'>Produk</td>
+                      <td className='text-sm px-4 py-3'>
+                        {item.marketing_product?.product_warehouse?.label}
+                      </td>
+                    </tr>
+                    <tr>
+                      <td className='text-sm px-4 py-3'>Qty</td>
+                      <td className='text-sm px-4 py-3'>
+                        {item.qty
+                          ? `${formatNumber(parseFloat(item.qty as string))} ${item.marketing_product?.uom ?? ''}`
+                          : '-'}
+                      </td>
+                    </tr>
+                    <tr>
+                      <td className='text-sm px-4 py-3'>Avg Bobot</td>
+                      <td className='text-sm px-4 py-3'>
+                        {item.avg_weight
+                          ? formatNumber(
+                              parseFloat(item.avg_weight as string)
+                            ) + ' Kg'
+                          : '-'}
+                      </td>
+                    </tr>
+                    <tr>
+                      <td className='text-sm px-4 py-3'>Total Bobot</td>
+                      <td className='text-sm px-4 py-3'>
+                        {formatNumber(parseFloat(item.total_weight as string))}
+                      </td>
+                    </tr>
+                    <tr>
+                      <td className='text-sm px-4 py-3'>Total Harga Satuan</td>
+                      <td className='text-sm px-4 py-3'>
+                        {formatCurrency(parseFloat(item.unit_price as string))}
+                      </td>
+                    </tr>
+                    <tr>
+                      <td className='text-sm px-4 py-3'>Total Penjualan</td>
+                      <td className='text-sm px-4 py-3'>
+                        {formatCurrency(parseFloat(item.total_price as string))}
+                      </td>
+                    </tr>
+                    {doItem && (
+                      <tr>
+                        <td className='text-sm px-4 py-3'>
+                          Dokumen Pengiriman
+                        </td>
+                        <td className='text-sm px-4 py-3'>
+                          <DeliveryOrderExport
+                            data={marketing}
+                            deliveryOrder={doItem}
+                          />
+                        </td>
+                      </tr>
+                    )}
+                  </>
+                </tbody>
+              </table>
+            </div>
+          );
+        })}
       </div>
     </>
   );

src/components/pages/marketing/form/table-view/SalesOrderProductTable.tsx

@@ -1,42 +1,30 @@
 'use client';
 
 import Button from '@/components/Button';
-import Table from '@/components/Table';
 import { SalesOrderProductFormValues } from '@/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema';
 import {
-  cn,
   formatCurrency,
   formatNumber,
   formatVechicleNumber,
 } from '@/lib/helper';
 import { Icon } from '@iconify/react';
-import { useMemo, useRef, useState } from 'react';
+import { useMemo, useRef } from 'react';
 import * as TanStack from '@tanstack/react-table';
 import CheckboxInput from '@/components/input/CheckboxInput';
 
 type SalesOrderProductTableProps = {
   data: SalesOrderProductFormValues[];
-  formType: 'add' | 'edit' | 'add_deliver' | 'edit_deliver';
-  rowSelection: Record<string, boolean>;
-  setRowSelection: React.Dispatch<
-    React.SetStateAction<Record<string, boolean>>
-  >;
-  selectedRowIds: number[];
+  formType: 'add' | 'edit' | 'add_deliver' | 'edit_deliver' | 'success';
   onDelete: (id: number) => void;
   onEdit: (id: number) => void;
-  onBulkDelete: () => void;
   onAddProductClick: () => void;
 };
 
 const SalesOrderProductTable = ({
   data,
   formType,
-  rowSelection,
-  setRowSelection,
-  selectedRowIds,
   onDelete,
   onEdit,
-  onBulkDelete,
   onAddProductClick,
 }: SalesOrderProductTableProps) => {
   const onDeleteRef = useRef(onDelete);
@@ -156,67 +144,135 @@ const SalesOrderProductTable = ({
 
   return (
     <>
-      <Table<SalesOrderProductFormValues>
-        rowSelection={rowSelection}
-        setRowSelection={setRowSelection}
-        data={data}
-        columns={
-          formType == 'add_deliver' || formType == 'edit_deliver'
-            ? columns.filter(
-                (col) => col.header != 'Aksi' && col.id != 'select'
-              )
-            : columns
-        }
-        className={{
-          tableWrapperClassName: 'overflow-x-auto min-h-full!',
-          tableClassName: 'font-inter w-full table-auto min-h-full!',
-          headerRowClassName: 'border-b border-b-gray-200',
-          headerColumnClassName:
-            'px-2 py-2 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end first:flex first:flex-row first:justify-start',
-          bodyRowClassName: 'border-b border-b-gray-200',
-          bodyColumnClassName:
-            'px-2 py-2 last:flex last:flex-row last:justify-end first:flex first:flex-row first:justify-start',
-          paginationClassName: 'hidden',
-        }}
-        emptyContent={
+      <div className='size-full flex flex-col relative overflow-x-hidden gap-3'>
+        {data.map((item) => (
           <div
-            className={cn(
-              'w-full h-16 flex flex-col justify-center items-center gap-2'
-            )}
+            className='rounded-lg border border-tools-table-outline border-base-content/5'
+            key={`table-${item.id}`}
           >
-            <span className='text-gray-500'>Belum ada data penjualan</span>
+            <table
+              style={{
+                borderRadius: '0.5rem',
+              }}
+              className='border-none w-full'
+            >
+              <tbody className='w-full'>
+                <tr className='border-b border-tools-table-outline border-base-content/5'>
+                  <th className='w-1/3 text-start not-first:font-medium text-base-content/50 text-sm px-4 py-3'>
+                    Label
+                  </th>
+                  <th className='text-start font-medium text-base-content/50 text-sm px-4 py-3'>
+                    <div className='flex w-full flex-row gap-1 items-center justify-between h-full mt-2'>
+                      <div>Value</div>
+                      {formType !== 'success' && (
+                        <div className='flex flex-row gap-1.5 items-center'>
+                          <Button
+                            type='button'
+                            variant='ghost'
+                            color='none'
+                            onClick={() => {
+                              onEditRef.current(item.id as number);
+                            }}
+                            className='p-0 hover:text-base-content'
+                          >
+                            <Icon
+                              icon='heroicons:pencil'
+                              width={20}
+                              height={20}
+                            />
+                          </Button>
+                          <Button
+                            type='button'
+                            variant='ghost'
+                            color='none'
+                            onClick={() => {
+                              onDeleteRef.current(item.id as number);
+                            }}
+                            className='p-0 text-error hover:text-base-content'
+                          >
+                            <Icon
+                              icon='heroicons:trash'
+                              width={20}
+                              height={20}
+                            />
+                          </Button>
+                        </div>
+                      )}
+                    </div>
+                  </th>
+                </tr>
+                <>
+                  <tr>
+                    <td className='text-sm px-4 py-3'>No. Polisi</td>
+                    <td className='text-sm px-4 py-3'>{item.vehicle_number}</td>
+                  </tr>
+                  <tr>
+                    <td className='text-sm px-4 py-3'>Gudang</td>
+                    <td className='text-sm px-4 py-3'>
+                      {item.product_warehouse?.label}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td className='text-sm px-4 py-3'>Produk</td>
+                    <td className='text-sm px-4 py-3'>
+                      {item.product_warehouse?.label}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td className='text-sm px-4 py-3'>Total Bobot</td>
+                    <td className='text-sm px-4 py-3'>
+                      {item.total_weight
+                        ? formatNumber(
+                            parseFloat(item.total_weight as string)
+                          ) + ' Kg'
+                        : '-'}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td className='text-sm px-4 py-3'>Avg Bobot</td>
+                    <td className='text-sm px-4 py-3'>
+                      {item.avg_weight
+                        ? formatNumber(parseFloat(item.avg_weight as string)) +
+                          ' Kg'
+                        : '-'}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td className='text-sm px-4 py-3'>Qty</td>
+                    <td className='text-sm px-4 py-3'>
+                      {`${formatNumber(parseFloat(item.qty as string))} ${item.uom || ''}`}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td className='text-sm px-4 py-3'>Total Harga Satuan</td>
+                    <td className='text-sm px-4 py-3'>
+                      {formatCurrency(parseFloat(item.unit_price as string))}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td className='text-sm px-4 py-3'>Total Penjualan</td>
+                    <td className='text-sm px-4 py-3'>
+                      {formatCurrency(parseFloat(item.total_price as string))}
+                    </td>
+                  </tr>
+                </>
+              </tbody>
+            </table>
           </div>
-        }
-      />
-      {formType != 'add_deliver' && formType != 'edit_deliver' && (
-        <div className='flex flex-row gap-3 mt-3'>
-          <Button
-            type='button'
-            variant='outline'
-            className='justify-start w-fit py-1 text-sm'
-            onClick={onAddProductClick}
-          >
-            <Icon icon='mdi:plus' width={16} height={16} />
-            Tambah Produk
-          </Button>
-          {selectedRowIds.length > 0 && (
+        ))}
+        {formType != 'add_deliver' &&
+          formType != 'edit_deliver' &&
+          formType != 'success' && (
             <Button
               type='button'
               variant='outline'
-              color='error'
-              className='justify-start w-fit py-1 text-sm'
-              onClick={onBulkDelete}
+              className='justify-center p-3 w-full rounded-lg text-center text-sm mt-3'
+              onClick={onAddProductClick}
             >
-              <Icon icon='mdi:trash' width={16} height={16} />
-              Hapus
-              {selectedRowIds.length > 0
-                ? ` (${selectedRowIds.length})`
-                : ''}{' '}
-              Produk
+              Tambah Produk
             </Button>
           )}
-        </div>
-      )}
+      </div>
     </>
   );
 };

src/components/pages/marketing/pdf/DeliveryOrderExport.tsx

@@ -4,10 +4,9 @@ import { Icon } from '@iconify/react';
 import { Document, Image, Page, pdf, Text, View } from '@react-pdf/renderer';
 import { useMemo, useState } from 'react';
 import { formatDate, formatNumber, formatVechicleNumber } from '@/lib/helper';
-import { format } from 'path';
-import { date } from 'yup';
 import pdfStyles from '@/components/pages/marketing/pdf/styles/MarketingPDFStyles';
 import toast from 'react-hot-toast';
+import { useSearchParams } from 'next/navigation';
 
 interface DeliveryOrderExportProps {
   data?: Marketing;
@@ -21,6 +20,9 @@ const DeliveryOrderExport = ({
 }: DeliveryOrderExportProps) => {
   const [isGeneratingPDF, setIsGeneratingPDF] = useState(false);
   const salesData = data;
+  const searchParams = useSearchParams();
+  const action = searchParams.get('action');
+  const id = searchParams.get('id');
 
   const handleDownloadPDF = async () => {
     if (!salesData) {
@@ -32,37 +34,47 @@ const DeliveryOrderExport = ({
       const blob = await pdf(
         <PDFDocument data={salesData} deliveryOrder={deliveryOrder} />
       ).toBlob();
-      const url = URL.createObjectURL(blob);
+      const url = window.URL.createObjectURL(blob);
       const link = document.createElement('a');
+      link.style.display = 'none';
       link.href = url;
       link.download = `${deliveryOrder?.do_number || 'delivery-order'}.pdf`;
+      link.setAttribute('target', '_blank');
+      link.setAttribute('rel', 'noopener noreferrer');
       document.body.appendChild(link);
       link.click();
-      document.body.removeChild(link);
-      URL.revokeObjectURL(url);
+
+      // Delay cleanup to ensure download starts
+      setTimeout(() => {
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+      }, 150);
     } catch (error) {
       toast.error('Failed to generate PDF. Please try again.');
     } finally {
       setIsGeneratingPDF(false);
+      window.location.href = `/marketing?action=${action}&id=${id}`;
     }
   };
 
   if (!salesData) {
     return (
-      <div className='flex items-center justify-center min-h-screen'>
+      <div className='flex items-start justify-start'>
         <div className='text-gray-500'>No sales order data available</div>
       </div>
     );
   }
 
-  return salesData?.so_number && salesData.so_number !== 'Belum dibuat' ? (
+  return deliveryOrder?.do_number ? (
     <Button
-      color='primary'
-      className='w-fit min-w-32 flex items-center justify-start gap-1 px-2 py-1 text-sm font-mono'
+      variant='outline'
+      color='none'
+      className='w-fit text-sm px-3 py-2.5 rounded-lg border-base-content/10 text-base-content/50'
       onClick={handleDownloadPDF}
       isLoading={isGeneratingPDF}
+      type='button'
     >
-      <Icon icon='material-symbols:file-open-outline' width={16} height={16} />
+      <Icon icon='heroicons:document-text' width={20} height={20} />
       {deliveryOrder.do_number}
     </Button>
   ) : null;
@@ -87,11 +99,6 @@ const PDFDocument = ({
       <Page size='A4' style={pdfStyles.page}>
         {/* Header Section */}
         <View style={pdfStyles.header}>
-          <Image
-            src={'https://placehold.co/120x30/png'}
-            style={pdfStyles.logo}
-            id={'mbu-logo'}
-          />
           <Text style={pdfStyles.companyInfo}>PT LUMBUNG TELUR INDONESIA</Text>
           <Text style={pdfStyles.address}>
             SOHO Building Lt.3 (Paris Van Java), Jalan Karang Tinggal, Kel.

src/components/pages/marketing/pdf/SalesOrderExport.tsx

@@ -6,6 +6,7 @@ import { useMemo, useState } from 'react';
 import { formatDate, formatNumber } from '@/lib/helper';
 import pdfStyles from '@/components/pages/marketing/pdf/styles/MarketingPDFStyles';
 import toast from 'react-hot-toast';
+import { useSearchParams } from 'next/navigation';
 
 interface SalesOrderExportProps {
   data?: Marketing;
@@ -15,6 +16,9 @@ interface SalesOrderExportProps {
 const SalesOrderExport = ({ data }: SalesOrderExportProps) => {
   const [isGeneratingPDF, setIsGeneratingPDF] = useState(false);
   const salesData = data;
+  const searchParams = useSearchParams();
+  const action = searchParams.get('action');
+  const id = searchParams.get('id');
 
   const handleDownloadPDF = async () => {
     if (!salesData) {
@@ -24,24 +28,32 @@ const SalesOrderExport = ({ data }: SalesOrderExportProps) => {
     setIsGeneratingPDF(true);
     try {
       const blob = await pdf(<PDFDocument data={salesData} />).toBlob();
-      const url = URL.createObjectURL(blob);
+      const url = window.URL.createObjectURL(blob);
       const link = document.createElement('a');
+      link.style.display = 'none';
       link.href = url;
       link.download = `${salesData?.so_number || 'sales-order'}.pdf`;
+      link.setAttribute('target', '_blank');
+      link.setAttribute('rel', 'noopener noreferrer');
       document.body.appendChild(link);
       link.click();
-      document.body.removeChild(link);
-      URL.revokeObjectURL(url);
+
+      // Delay cleanup to ensure download starts
+      setTimeout(() => {
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+      }, 150);
     } catch (error) {
       toast.error('Failed to generate PDF. Please try again.');
     } finally {
       setIsGeneratingPDF(false);
+      window.location.href = `/marketing?action=${action}&id=${id}`;
     }
   };
 
   if (!salesData) {
     return (
-      <div className='flex items-center justify-center min-h-screen'>
+      <div className='flex items-start justify-start'>
         <div className='text-gray-500'>No sales order data available</div>
       </div>
     );
@@ -49,12 +61,14 @@ const SalesOrderExport = ({ data }: SalesOrderExportProps) => {
 
   return salesData?.so_number && salesData.so_number !== 'Belum dibuat' ? (
     <Button
-      color='primary'
-      className='w-fit min-w-32 flex items-center justify-start gap-1 px-2 py-1 text-sm font-mono'
+      variant='outline'
+      color='none'
+      className='w-fit text-sm px-3 py-2.5 rounded-lg border-base-content/10 text-base-content/50'
       onClick={handleDownloadPDF}
       isLoading={isGeneratingPDF}
+      type='button'
     >
-      <Icon icon='material-symbols:file-open-outline' width={16} height={16} />
+      <Icon icon='heroicons:document-text' width={20} height={20} />
       {salesData.so_number}
     </Button>
   ) : null;
@@ -71,11 +85,6 @@ const PDFDocument = ({ data }: { data: Marketing }) => {
       <Page size='A4' style={pdfStyles.page}>
         {/* Header Section */}
         <View style={pdfStyles.header}>
-          <Image
-            src={'https://placehold.co/120x30/png'}
-            style={pdfStyles.logo}
-            id={'mbu-logo'}
-          />
           <Text style={pdfStyles.companyInfo}>PT LUMBUNG TELUR INDONESIA</Text>
           <Text style={pdfStyles.address}>
             SOHO Building Lt.3 (Paris Van Java), Jalan Karang Tinggal, Kel.

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

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

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

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

src/components/pages/production/recording/RecordingTable.tsx

@@ -7,14 +7,12 @@ import React, {
   useEffect,
   useRef,
 } from 'react';
-import { RefObject } from 'react';
 import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import { SortingState, CellContext } from '@tanstack/react-table';
 import { cn, formatDate, formatNumber } from '@/lib/helper';
 import RequirePermission from '@/components/helper/RequirePermission';
 import { useModal } from '@/components/Modal';
-import Modal from '@/components/Modal';
 import Button from '@/components/Button';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
@@ -28,14 +26,51 @@ import RowCollapseOptions from '@/components/table/RowCollapseOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import { type Recording } from '@/types/api/production/recording';
 import { RecordingApi } from '@/services/api/production';
-import { ApprovalApi } from '@/services/api/approval';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import toast from 'react-hot-toast';
 import Badge from '@/components/Badge';
+import StatusBadge from '@/components/helper/StatusBadge';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import { useUiStore } from '@/stores/ui/ui.store';
-import { BaseApproval, BaseApiResponse } from '@/types/api/api-general';
+import { Color } from '@/types/theme';
+
+// ===== STATUS BADGE UTILITIES =====
+const statusTextMap: Record<string, string> = {
+  APPROVED: 'Disetujui',
+  Disetujui: 'Disetujui',
+  REJECTED: 'Ditolak',
+  Ditolak: 'Ditolak',
+  CREATED: 'Dibuat',
+  UPDATED: 'Diperbarui',
+};
+
+const getStatusText = (status: string): string => {
+  return statusTextMap[status] || status;
+};
+
+const statusBadgeColorMap: Record<string, Color> = {
+  APPROVED: 'success',
+  Disetujui: 'success',
+  approved: 'success',
+  disetujui: 'success',
+  REJECTED: 'error',
+  Ditolak: 'error',
+  rejected: 'error',
+  ditolak: 'error',
+  CREATED: 'neutral',
+  Dibuat: 'neutral',
+  created: 'neutral',
+  dibuat: 'neutral',
+  UPDATED: 'warning',
+  Diperbarui: 'warning',
+  updated: 'warning',
+  diperbarui: 'warning',
+};
+
+const getStatusBadgeColor = (status: string): Color => {
+  return statusBadgeColorMap[status] || 'neutral';
+};
 
 const RowOptionsMenu = ({
   type = 'dropdown',
@@ -135,221 +170,6 @@ const RowOptionsMenu = ({
   );
 };
 
-const ApprovalHistoryModal = ({
-  ref,
-  currentApproval,
-  module_name = 'RECORDINGS',
-  module_id,
-}: {
-  ref: RefObject<HTMLDialogElement | null>;
-  currentApproval?: BaseApproval;
-  module_name?: string;
-  module_id?: number | undefined;
-}) => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
-  const approvalHistoryUrl = useMemo(() => {
-    if (!isModalOpen) return null;
-    const params = new URLSearchParams({
-      module_name: module_name,
-      group_step_number: 'true',
-    });
-
-    if (module_id) {
-      params.append('module_id', module_id.toString());
-    }
-
-    return `${ApprovalApi.basePath}?${params.toString()}`;
-  }, [module_name, module_id, isModalOpen]);
-
-  type GroupedApprovalResponse = {
-    step_number: number;
-    step_name: string;
-    approvals: BaseApproval[];
-  };
-
-  const fetchGroupedApprovals = async (
-    url: string
-  ): Promise<BaseApiResponse<GroupedApprovalResponse[]>> => {
-    return (await ApprovalApi.getAllFetcher(url)) as BaseApiResponse<
-      GroupedApprovalResponse[]
-    >;
-  };
-
-  const { data: approvalHistoryData, isLoading } = useSWR<
-    BaseApiResponse<GroupedApprovalResponse[]>
-  >(approvalHistoryUrl, fetchGroupedApprovals);
-
-  useEffect(() => {
-    const checkModalOpen = () => {
-      const isOpen = ref.current?.open || false;
-      setIsModalOpen(isOpen);
-    };
-
-    checkModalOpen();
-
-    const observer = new MutationObserver(checkModalOpen);
-    if (ref.current) {
-      observer.observe(ref.current, {
-        attributes: true,
-        attributeFilter: ['open'],
-      });
-    }
-
-    return () => observer.disconnect();
-  }, [ref]);
-
-  const approvalHistory = useMemo(() => {
-    if (!approvalHistoryData || approvalHistoryData.status !== 'success')
-      return [];
-
-    const groupedData = approvalHistoryData.data || [];
-    const flattenedApprovals: BaseApproval[] = [];
-
-    groupedData.forEach((group) => {
-      group.approvals.forEach((approval) => {
-        flattenedApprovals.push(approval);
-      });
-    });
-
-    return flattenedApprovals;
-  }, [approvalHistoryData]);
-
-  const closeModalHandler = () => {
-    ref.current?.close();
-  };
-
-  return (
-    <Modal ref={ref} className={{ modalBox: 'max-w-2xl' }}>
-      <div className='w-full flex flex-col gap-6'>
-        {/* Header */}
-        <div className='flex items-center justify-between'>
-          <h2 className='text-xl font-bold'>Riwayat Approval</h2>
-          <Button
-            onClick={closeModalHandler}
-            variant='ghost'
-            className='btn-circle btn-sm p-0'
-          >
-            <Icon icon='mdi:close' width={20} height={20} />
-          </Button>
-        </div>
-
-        {isLoading ? (
-          <div className='flex justify-center py-8'>
-            <span className='loading loading-spinner loading-lg'></span>
-          </div>
-        ) : (
-          <>
-            {/* Current Status */}
-            {currentApproval && (
-              <div className='bg-base-200 rounded-lg p-4'>
-                <h3 className='font-semibold mb-2'>Status Saat Ini</h3>
-                <div className='flex items-center gap-3'>
-                  <Badge
-                    variant='soft'
-                    color={
-                      currentApproval.action === 'APPROVED'
-                        ? 'success'
-                        : currentApproval.action === 'REJECTED'
-                          ? 'error'
-                          : currentApproval.action === 'UPDATED'
-                            ? 'warning'
-                            : 'info'
-                    }
-                  >
-                    {currentApproval.step_name}
-                  </Badge>
-                  <span className='text-sm text-gray-600'>
-                    {currentApproval.action === 'APPROVED' && 'Disetujui'}
-                    {currentApproval.action === 'REJECTED' && 'Ditolak'}
-                    {currentApproval.action === 'CREATED' && 'Dibuat'}
-                    {currentApproval.action === 'UPDATED' && 'Diperbarui'}
-                  </span>
-                </div>
-                {currentApproval.notes && (
-                  <p className='mt-2 text-sm text-gray-600'>
-                    <span className='font-medium'>Catatan:</span>{' '}
-                    {currentApproval.notes}
-                  </p>
-                )}
-                <p className='mt-1 text-xs text-gray-500'>
-                  Oleh: {currentApproval.action_by.name} •{' '}
-                  {formatDate(currentApproval.action_at, 'DD MMMM YYYY HH:mm')}
-                </p>
-              </div>
-            )}
-
-            {/* Full History */}
-            {approvalHistory.length > 0 && (
-              <div className='space-y-4'>
-                <h3 className='font-semibold'>Riwayat Lengkap</h3>
-                <div className='overflow-x-auto'>
-                  <table className='table table-sm'>
-                    <thead>
-                      <tr>
-                        <th>Tahap</th>
-                        <th>Aksi</th>
-                        <th>Catatan</th>
-                        <th>Oleh</th>
-                        <th>Waktu</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {approvalHistory
-                        .sort(
-                          (a: BaseApproval, b: BaseApproval) =>
-                            new Date(b.action_at).getTime() -
-                            new Date(a.action_at).getTime()
-                        )
-                        .map((approval: BaseApproval, index: number) => (
-                          <tr key={index}>
-                            <td>{approval.step_name}</td>
-                            <td>
-                              <Badge
-                                variant='soft'
-                                color={
-                                  approval.action === 'APPROVED'
-                                    ? 'success'
-                                    : approval.action === 'REJECTED'
-                                      ? 'error'
-                                      : approval.action === 'UPDATED'
-                                        ? 'warning'
-                                        : 'info'
-                                }
-                                size='sm'
-                              >
-                                {approval.action === 'APPROVED' && 'Disetujui'}
-                                {approval.action === 'REJECTED' && 'Ditolak'}
-                                {approval.action === 'CREATED' && 'Dibuat'}
-                                {approval.action === 'UPDATED' && 'Diperbarui'}
-                              </Badge>
-                            </td>
-                            <td className='max-w-xs'>
-                              <div className='truncate'>
-                                {approval.notes || '-'}
-                              </div>
-                            </td>
-                            <td>{approval.action_by.name}</td>
-                            <td className='text-xs'>
-                              {formatDate(
-                                approval.action_at,
-                                'DD MMMM YYYY HH:mm'
-                              )}
-                            </td>
-                          </tr>
-                        ))}
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            )}
-          </>
-        )}
-      </div>
-    </Modal>
-  );
-};
-
 const RecordingTable = () => {
   const { searchValue, setSearchValue, resetSearchValue } = useUiStore();
   const previousPathRef = useRef<string | null>(null);
@@ -395,7 +215,6 @@ const RecordingTable = () => {
   const singleDeleteModal = useModal();
   const approveModal = useModal();
   const rejectModal = useModal();
-  const approvalHistoryModal = useModal();
 
   const {
     data: recordings,
@@ -561,12 +380,11 @@ const RecordingTable = () => {
             <RequirePermission permissions='lti.production.recording.create'>
               <Button
                 href='/production/recording/add'
-                variant='outline'
                 color='primary'
-                className='w-full sm:w-fit'
+                className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
               >
-                <Icon icon='ic:round-plus' width={24} height={24} />
-                Tambah
+                <Icon icon='heroicons:plus' width={20} height={20} />
+                Add Recording
               </Button>
             </RequirePermission>
 
@@ -1032,32 +850,19 @@ const RecordingTable = () => {
               const approval = props.row.original.approval;
               if (!approval) return '-';
 
-              const statusColor =
-                approval.action === 'APPROVED'
-                  ? 'success'
-                  : approval.action === 'REJECTED'
-                    ? 'error'
-                    : approval.action === 'UPDATED'
-                      ? 'warning'
-                      : 'info';
+              const status = approval.action;
+              const statusColor = getStatusBadgeColor(status);
 
-              const openApprovalHistory = () => {
-                setSelectedRecording(props.row.original);
-                approvalHistoryModal.openModal();
-              };
+              const statusText = approval.step_name || getStatusText(status);
 
               return (
-                <Badge
-                  variant='soft'
+                <StatusBadge
                   color={statusColor}
+                  text={statusText}
                   className={{
-                    badge:
-                      'cursor-pointer hover:opacity-80 transition-opacity whitespace-nowrap',
+                    badge: 'whitespace-nowrap',
                   }}
-                  onClick={openApprovalHistory}
-                >
-                  {approval.step_name || approval.action}
-                </Badge>
+                />
               );
             },
           },
@@ -1208,7 +1013,10 @@ const RecordingTable = () => {
         text={`Apakah anda yakin ingin approve data recording ini (${eligibleRowIds.length} data dari ${selectedRowIds.length} yang dipilih)?`}
         secondaryButton={{
           text: 'Tidak',
-          onClick: () => setApprovalNotes(''),
+          onClick: () => {
+            setApprovalNotes('');
+            approveModal.closeModal();
+          },
         }}
         primaryButton={{
           text: 'Ya',
@@ -1226,7 +1034,10 @@ const RecordingTable = () => {
         text={`Apakah anda yakin ingin reject data recording ini (${eligibleRowIds.length} data dari ${selectedRowIds.length} yang dipilih)?`}
         secondaryButton={{
           text: 'Tidak',
-          onClick: () => setApprovalNotes(''),
+          onClick: () => {
+            setApprovalNotes('');
+            rejectModal.closeModal();
+          },
         }}
         primaryButton={{
           text: 'Ya',
@@ -1237,13 +1048,6 @@ const RecordingTable = () => {
         placeholder='(Opsional) Tambahkan catatan untuk reject ini...'
         rows={3}
       />
-
-      <ApprovalHistoryModal
-        ref={approvalHistoryModal.ref}
-        currentApproval={selectedRecording?.approval}
-        module_name={'RECORDINGS'}
-        module_id={selectedRecording?.id}
-      />
     </div>
   );
 };

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

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

src/components/pages/production/uniformity/UniformityPageWrapper.tsx

@@ -58,7 +58,10 @@ export default function UniformityPageWrapper({
         zIndex='99999'
         sidebarContent={isOpen ? <div className=''>{children}</div> : null}
         expandedContent={expandedDrawerOpen ? expandedDrawerContent : null}
-        expandedWidth='w-[500px]'
+        className={{
+          drawerSidebarContent: 'w-[446px]',
+          drawerExpandedContent: 'w-[446px]',
+        }}
       />
     </>
   );

src/components/pages/production/uniformity/UniformityTable.tsx

@@ -42,8 +42,6 @@ import {
   ProjectFlock,
 } from '@/types/api/production/project-flock';
 import {
-  getStatusColor,
-  getStatusIndicatorColor,
   getStatusText,
   getStatusBadgeColor,
 } from '@/components/pages/production/uniformity/uniformity-utils';
@@ -112,11 +110,19 @@ const UniformityConfirmationPreview = ({
 
   const columns: ColumnDef<DetailOptionType>[] = [
     {
-      header: 'Label',
+      accessorKey: 'label',
+      enableSorting: false,
+      header: () => (
+        <span className='font-medium text-sm leading-[150%]'>Label</span>
+      ),
       cell: (props) => props.row.original.label,
     },
     {
-      header: 'Value',
+      accessorKey: 'value',
+      enableSorting: false,
+      header: () => (
+        <span className='font-medium text-sm leading-[150%]'>Value</span>
+      ),
       cell: (props) => {
         const id = props.row.original.id;
         const value = props.row.original.value;
@@ -124,16 +130,10 @@ const UniformityConfirmationPreview = ({
         if (id === 'status') {
           return (
             <div className='w-full'>
-              <Badge
-                statusIndicator={true}
-                variant='soft'
-                className={{
-                  badge: `rounded-xl w-full justify-start border border-gray-200 text-black ${getStatusColor(value)}`,
-                  status: getStatusIndicatorColor(value),
-                }}
-              >
-                {getStatusText(value)}
-              </Badge>
+              <StatusBadge
+                color={getStatusBadgeColor(value)}
+                text={getStatusText(value)}
+              />
             </div>
           );
         }
@@ -214,7 +214,6 @@ const UniformityTable = () => {
   const [isBulkActionLoading, setIsBulkActionLoading] = useState(false);
   const [isPdfExportLoading, setIsPdfExportLoading] = useState(false);
   const [isExcelExportLoading, setIsExcelExportLoading] = useState(false);
-  const isAnyExportLoading = isPdfExportLoading || isExcelExportLoading;
 
   const singleDeleteModal = useModal();
   const successModal = useModal();
@@ -238,7 +237,7 @@ const UniformityTable = () => {
   const [filterEndDate, setFilterEndDate] = useState('');
   const [filterProjectFlockLocationId, setFilterProjectFlockLocationId] =
     useState<string>('');
-  const [filterErrors, setFilterErrors] = useState<Record<string, string>>({});
+  const [, setFilterErrors] = useState<Record<string, string>>({});
 
   const {
     setInputValue: setFilterLocationInputValue,
@@ -309,7 +308,6 @@ const UniformityTable = () => {
       ? projectFlockKandangLookupData.data
       : undefined;
 
-  // Update filterProjectFlockKandangId when lookup changes
   useEffect(() => {
     if (projectFlockKandangLookup?.id) {
       setFilterProjectFlockKandangId(projectFlockKandangLookup.id);
@@ -483,12 +481,6 @@ const UniformityTable = () => {
     [filterFormik]
   );
 
-  const handleApplyFilters = useCallback(() => {
-    handleFormSubmit(
-      new Event('submit') as unknown as React.FormEvent<HTMLFormElement>
-    );
-  }, [handleFormSubmit]);
-
   const selectedRowIds = useMemo(() => {
     return Object.keys(rowSelection)
       .filter((key) => rowSelection[key])
@@ -1066,7 +1058,7 @@ const UniformityTable = () => {
         iconPosition='left'
         text='Data Berhasil Ditambahkan'
         subtitleText='Data uniformity telah berhasil disimpan.'
-        closeOnBackdrop={false}
+        closeOnBackdrop={true}
         primaryButton={{
           text: 'Ok',
           color: 'primary',
@@ -1076,7 +1068,7 @@ const UniformityTable = () => {
           modalBox: 'rounded-2xl',
         }}
       >
-        <div className='flex flex-col gap-4 mt-4'>
+        <div className='flex flex-col gap-4'>
           {createdUniformity ? (
             <UniformityConfirmationPreview
               uniformityDetail={createdUniformity}
@@ -1097,6 +1089,7 @@ const UniformityTable = () => {
         ref={singleDeleteModal.ref}
         type='error'
         iconPosition='left'
+        closeOnBackdrop={true}
         text={`Delete This Data?`}
         subtitleText='Are you sure you want to delete this data?'
         secondaryButton={{
@@ -1112,7 +1105,7 @@ const UniformityTable = () => {
           modalBox: 'rounded-2xl',
         }}
       >
-        <div className='flex flex-col gap-4 mt-4'>
+        <div className='flex flex-col gap-4'>
           <UniformityConfirmationPreview uniformity={selectedUniformity} />
         </div>
       </ConfirmationModal>
@@ -1121,6 +1114,7 @@ const UniformityTable = () => {
         ref={singleApproveModal.ref}
         type='success'
         iconPosition='left'
+        closeOnBackdrop={true}
         text='Approve This Submission?'
         subtitleText='Are you sure you want to approve this submission?'
         secondaryButton={{
@@ -1136,16 +1130,13 @@ const UniformityTable = () => {
           modalBox: 'rounded-2xl',
         }}
       >
-        <div className='flex flex-col gap-4 mt-4'>
-          {selectedRowIds.length === 1 ? (
+        <div className='flex flex-col gap-4'>
+          {selectedUniformities.map((uniformity) => (
             <UniformityConfirmationPreview
-              uniformity={selectedUniformities[0]}
+              key={uniformity.id}
+              uniformity={uniformity}
             />
-          ) : (
-            <div className='text-center text-gray-500'>
-              {selectedRowIds.length} data dipilih
-            </div>
-          )}
+          ))}
         </div>
       </ConfirmationModal>
 
@@ -1153,8 +1144,13 @@ const UniformityTable = () => {
         ref={bulkApproveModal.ref}
         type='success'
         iconPosition='left'
+        closeOnBackdrop={true}
         text={`Approve This Submission?`}
-        subtitleText={`Are you sure you want to approve this submission? (${selectedRowIds.length} data)`}
+        subtitleText={
+          selectedRowIds.length === 1
+            ? 'Are you sure you want to approve this submission?'
+            : `Are you sure you want to approve these submissions? (${selectedRowIds.length} data)`
+        }
         secondaryButton={{
           text: 'Cancel',
         }}
@@ -1168,8 +1164,13 @@ const UniformityTable = () => {
           modalBox: 'rounded-2xl',
         }}
       >
-        <div className='flex flex-col gap-4 mt-4'>
-          <UniformityConfirmationPreview uniformity={selectedUniformity} />
+        <div className='flex flex-col gap-4'>
+          {selectedUniformities.map((uniformity) => (
+            <UniformityConfirmationPreview
+              key={uniformity.id}
+              uniformity={uniformity}
+            />
+          ))}
         </div>
       </ConfirmationModal>
 
@@ -1177,6 +1178,7 @@ const UniformityTable = () => {
         ref={singleRejectModal.ref}
         type='error'
         iconPosition='left'
+        closeOnBackdrop={true}
         text='Reject This Submission?'
         subtitleText='Are you sure you want to reject this submission?'
         secondaryButton={{
@@ -1192,16 +1194,13 @@ const UniformityTable = () => {
           modalBox: 'rounded-2xl',
         }}
       >
-        <div className='flex flex-col gap-4 mt-4'>
-          {selectedRowIds.length === 1 ? (
+        <div className='flex flex-col gap-4'>
+          {selectedUniformities.map((uniformity) => (
             <UniformityConfirmationPreview
-              uniformity={selectedUniformities[0]}
+              key={uniformity.id}
+              uniformity={uniformity}
             />
-          ) : (
-            <div className='text-center text-gray-500'>
-              {selectedRowIds.length} data dipilih
-            </div>
-          )}
+          ))}
         </div>
       </ConfirmationModal>
 
@@ -1209,8 +1208,13 @@ const UniformityTable = () => {
         ref={bulkRejectModal.ref}
         type='error'
         iconPosition='left'
+        closeOnBackdrop={true}
         text={`Reject This Submission?`}
-        subtitleText={`Are you sure you want to reject this submission? (${selectedRowIds.length} data)`}
+        subtitleText={
+          selectedRowIds.length === 1
+            ? 'Are you sure you want to reject this submission?'
+            : `Are you sure you want to reject these submissions? (${selectedRowIds.length} data)`
+        }
         secondaryButton={{
           text: 'Cancel',
         }}
@@ -1224,16 +1228,13 @@ const UniformityTable = () => {
           modalBox: 'rounded-2xl',
         }}
       >
-        <div className='flex flex-col gap-4 mt-4'>
-          {selectedRowIds.length === 1 ? (
+        <div className='flex flex-col gap-4'>
+          {selectedUniformities.map((uniformity) => (
             <UniformityConfirmationPreview
-              uniformity={selectedUniformities[0]}
+              key={uniformity.id}
+              uniformity={uniformity}
             />
-          ) : (
-            <div className='text-center text-gray-500'>
-              {selectedRowIds.length} data dipilih
-            </div>
-          )}
+          ))}
         </div>
       </ConfirmationModal>
 

src/components/pages/production/uniformity/chart/UniformityBarChart.tsx

@@ -164,7 +164,7 @@ const UniformityBarChart: React.FC<UniformityBarChartProps> = ({ data }) => {
   const margin = {
     top: 20,
     right: 30,
-    left: 20,
+    left: 0,
     bottom: 5,
   };
 
@@ -172,7 +172,7 @@ const UniformityBarChart: React.FC<UniformityBarChartProps> = ({ data }) => {
     <ResponsiveContainer
       width='100%'
       height='100%'
-      className='min-h-[300px] xl:min-h-[350px]'
+      className='min-h-[270px] xl:min-h-72'
     >
       <BarChart data={data} margin={margin} barGap={20}>
         <defs>

src/components/pages/production/uniformity/chart/UniformityGaugeChart.tsx

@@ -65,12 +65,12 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
               </Pie>
             </PieChart>
           </ResponsiveContainer>
-          <div className='absolute inset-x-0 bottom-8 flex flex-col items-center justify-center'>
-            <span className='2xl:text-3xl text-2xl font-bold text-gray-800 mb-4'>
+          <div className='absolute inset-x-0 bottom-10 flex flex-col items-center justify-center'>
+            <span className='text-2xl font-medium text-base-content mb-4 leading-8'>
               {value}%
             </span>
-            <div className='mt-2 px-4 py-1 bg-base-100 rounded-full shadow-sm border border-gray-200'>
-              <span className='text-sm font-medium text-gray-700 mb-32'>
+            <div className='px-3.5 py-1 bg-base-100 rounded-full shadow-sm border border-base-content/10'>
+              <span className='text-lg font-medium text-base-content leading-6'>
                 {label}
               </span>
             </div>
@@ -81,7 +81,7 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
         <button
           onClick={() => onWeekChange?.('prev')}
           disabled={!hasPrevWeek}
-          className='p-2 rounded-lg border border-gray-200 bg-white hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shadow-sm'
+          className='p-1 rounded-lg border border-base-content/10 bg-white hover:bg-base-content/5 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shadow-sm cursor-pointer'
           aria-label='Previous week'
         >
           <Icon icon='heroicons:chevron-left' width={20} height={20} />
@@ -89,21 +89,24 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
         <Card
           variant='bordered'
           className={{
-            wrapper: 'max-w-xs',
+            wrapper: 'max-w-40 rounded-lg',
+            body: 'p-3',
           }}
         >
           <section className='flex items-center justify-center gap-4'>
             <div className='grid grid-cols-1 min-w-0 text-center'>
-              <div className='flex items-center justify-center space-x-2 text-[#18181B80] text-sm mb-1'>
-                <span className='text-[#0069E0] font-semibold truncate'>
+              <div className='flex items-center justify-center space-x-2 text-base-content/50 text-sm mb-1'>
+                <span className='text-primary font-semibold truncate'>
                   {week}
                 </span>
               </div>
-              <div className='text-xl font-bold text-[#18181B80]'>
-                <span className='text-[#0069E0] break-all'>
+              <div className='text-xl font-bold text-base-content/50'>
+                <span className='text-primary break-all'>
                   {formatNumber(currentValue ?? 0)}
                 </span>
-                <span className='mx-1 text-gray-400 text-base'>From</span>
+                <span className='mx-1 text-base-content/50 text-sm font-semibold leading-5'>
+                  From
+                </span>
                 <span className='break-all'>
                   {formatNumber(totalValue ?? 0)}
                 </span>
@@ -114,7 +117,7 @@ const UniformityGaugeChart: React.FC<UniformityGaugeChartProps> = ({
         <button
           onClick={() => onWeekChange?.('next')}
           disabled={!hasNextWeek}
-          className='p-2 rounded-lg border border-gray-200 bg-white hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shadow-sm'
+          className='p-1 rounded-lg border border-base-content/10 bg-white hover:bg-base-content/5 disabled:opacity-30 disabled:cursor-not-allowed transition-colors shadow-sm cursor-pointer'
           aria-label='Next week'
         >
           <Icon icon='heroicons:chevron-right' width={20} height={20} />

src/components/pages/production/uniformity/detail/UniformityDetail.tsx

@@ -7,7 +7,7 @@ import { ColumnDef } from '@tanstack/react-table';
 import Button from '@/components/Button';
 import DrawerHeader from '@/components/helper/drawer/DrawerHeader';
 import Table from '@/components/Table';
-import Badge from '@/components/Badge';
+import StatusBadge from '@/components/helper/StatusBadge';
 import Tooltip from '@/components/Tooltip';
 import RequirePermission from '@/components/helper/RequirePermission';
 import { UniformityDetail as UniformityDetailType } from '@/types/api/production/uniformity';
@@ -18,8 +18,7 @@ import { UniformityApi } from '@/services/api/uniformity';
 import useSWR from 'swr';
 import { isResponseSuccess } from '@/lib/api-helper';
 import {
-  getStatusColor,
-  getStatusIndicatorColor,
+  getStatusBadgeColor,
   getStatusText,
 } from '@/components/pages/production/uniformity/uniformity-utils';
 import { DetailOptionType } from '@/types/api/production/uniformity';
@@ -150,12 +149,18 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
     () => [
       {
         accessorKey: 'label',
-        header: 'Label',
+        enableSorting: false,
+        header: () => (
+          <span className='font-medium text-sm leading-[150%]'>Label</span>
+        ),
         cell: (props) => props.row.original.label,
       },
       {
         accessorKey: 'value',
-        header: 'Value',
+        enableSorting: false,
+        header: () => (
+          <span className='font-medium text-sm leading-[150%]'>Value</span>
+        ),
         cell: (props) => {
           const id = props.row.original.id;
           const { info_umum, latest_approval } = initialValues!;
@@ -178,16 +183,10 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
             if (status) {
               return (
                 <div className='w-full'>
-                  <Badge
-                    statusIndicator={true}
-                    variant='soft'
-                    className={{
-                      badge: `rounded-xl w-full justify-start border border-gray-200 text-black ${getStatusColor(status)}`,
-                      status: getStatusIndicatorColor(status),
-                    }}
-                  >
-                    {getStatusText(status)}
-                  </Badge>
+                  <StatusBadge
+                    color={getStatusBadgeColor(status)}
+                    text={getStatusText(status)}
+                  />
                 </div>
               );
             }
@@ -258,12 +257,18 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
     () => [
       {
         accessorKey: 'label',
-        header: 'Label',
+        enableSorting: false,
+        header: () => (
+          <span className='font-medium text-sm leading-[150%]'>Label</span>
+        ),
         cell: (props) => props.row.original.label,
       },
       {
         accessorKey: 'value',
-        header: 'Value',
+        enableSorting: false,
+        header: () => (
+          <span className='font-medium text-sm leading-[150%]'>Value</span>
+        ),
         cell: (props) => <span>{props.row.original.value}</span>,
       },
     ],
@@ -301,12 +306,18 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
     () => [
       {
         accessorKey: 'label',
-        header: 'Label',
+        enableSorting: false,
+        header: () => (
+          <span className='font-medium text-sm leading-[150%]'>Label</span>
+        ),
         cell: (props) => props.row.original.label,
       },
       {
         accessorKey: 'value',
-        header: 'Value',
+        enableSorting: false,
+        header: () => (
+          <span className='font-medium text-sm leading-[150%]'>Value</span>
+        ),
         cell: (props) => <span>{props.row.original.value}</span>,
       },
     ],
@@ -326,10 +337,10 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
       {/* Form Section */}
       <section className='w-full p-4'>
         {initialValues ? (
-          <div className='flex flex-col gap-4'>
+          <div className='flex flex-col gap-3'>
             {/* Info Umum */}
             <div className=''>
-              <h2 className='text-base font-medium text-base-content/50 font-roboto mb-5'>
+              <h2 className='text-base font-medium text-base-content/50 font-roboto leading-6 tracking-[0.15px] mb-1.5'>
                 Informasi Umum
               </h2>
               <Table<DetailOptionType>
@@ -346,7 +357,7 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
             {/* Sampling and Range */}
             {initialValues.sampling && (
               <div className=''>
-                <h2 className='text-base font-medium text-base-content/50 font-roboto mb-5'>
+                <h2 className='text-base font-medium text-base-content/50 font-roboto leading-6 tracking-[0.15px] mb-1.5'>
                   Sampling and Range
                 </h2>
                 <Table<DetailOptionType>
@@ -364,7 +375,7 @@ const UniformityDetail: React.FC<UniformityDetailProps> = ({
             {/* Result */}
             {initialValues.result && (
               <div className=''>
-                <h2 className='text-base font-medium text-base-content/50 font-roboto mb-5'>
+                <h2 className='text-base font-medium text-base-content/50 font-roboto leading-6 tracking-[0.15px] mb-1.5'>
                   Result
                 </h2>
                 <Table<DetailOptionType>

src/components/pages/production/uniformity/detail/UniformityDetailsPreview.tsx

@@ -97,10 +97,10 @@ const UniformityDetailsPreview = ({
       {/* Form Section */}
       <section className='w-full p-4'>
         {info_umum ? (
-          <div className='flex flex-col gap-4'>
+          <div className='flex flex-col gap-3'>
             {/* Body Weight Details */}
             {uniformity_details && uniformity_details.length > 0 ? (
-              <div className='mt-4'>
+              <div className=''>
                 <Table<BodyWeightData>
                   data={tableData}
                   columns={columnsUniformity}

src/components/pages/production/uniformity/form/UniformityForm.tsx

@@ -507,11 +507,11 @@ const UniformityForm = ({
         />
 
         <section className='w-full p-4'>
-          <h2 className='text-base font-medium text-base-content/50 font-roboto'>
+          <h2 className='text-base font-medium text-base-content/50 font-roboto mb-1.5'>
             Informasi Umum
           </h2>
 
-          <form onSubmit={handleFormSubmit} className='flex flex-col gap-1.5'>
+          <form onSubmit={handleFormSubmit} className='flex flex-col'>
             <DateInput
               required
               label='Tanggal'
@@ -582,7 +582,7 @@ const UniformityForm = ({
                 <label
                   htmlFor='file-upload-input'
                   className={cn(
-                    "w-full text-sm font-normal leading-5 after:content-['*'] after:ml-0.5 after:text-red-500",
+                    "w-full text-xs font-semibold leading-5 after:content-['*'] after:ml-0.5 after:text-red-500 py-2",
                     formik.touched.document &&
                       formik.errors.document &&
                       'text-red-500'
@@ -598,8 +598,8 @@ const UniformityForm = ({
                   >
                     <Icon
                       icon='heroicons-solid:trash'
-                      width={20}
-                      height={20}
+                      width={15}
+                      height={15}
                       className='text-gray-400 hover:text-gray-600'
                     />
                   </button>
@@ -611,8 +611,8 @@ const UniformityForm = ({
                     >
                       <Icon
                         icon='heroicons:information-circle'
-                        width={20}
-                        height={20}
+                        width={15}
+                        height={15}
                         className='text-gray-400 hover:text-gray-600'
                       />
                     </Tooltip>
@@ -622,7 +622,7 @@ const UniformityForm = ({
 
               <section
                 className={cn(
-                  'h-full w-full border rounded-2xl border-dashed cursor-pointer mt-2',
+                  'h-full w-full border rounded-2xl border-dashed cursor-pointer',
                   formik.touched.document && formik.errors.document
                     ? 'border-red-500'
                     : 'border-gray-300'
@@ -758,12 +758,12 @@ const UniformityForm = ({
 
             {!isNextStep && (
               <>
-                <div className='border-t border-base-content/20 mt-3' />
+                <div className='border-t border-base-content/10 -mx-4 mt-4' />
                 <RequirePermission permissions='lti.production.uniformity.create'>
                   <Button
                     type='submit'
                     color='primary'
-                    className='w-full mt-4'
+                    className='w-full mt-4 px-3 py-2.5 text-sm text-base-100 rounded-lg shadow-sm'
                     disabled={formik.isSubmitting}
                   >
                     {formik.isSubmitting ? (

src/components/pages/production/uniformity/form/UniformityPreviewForm.tsx

@@ -50,12 +50,16 @@ const UniformityPreviewForm = () => {
     () => [
       {
         accessorKey: 'number',
-        header: 'Number',
+        header: () => (
+          <span className='font-medium text-sm leading-[150%]'>Number</span>
+        ),
         cell: (props) => props.row.original.number,
       },
       {
         accessorKey: 'weight',
-        header: 'Weight (g)',
+        header: () => (
+          <span className='font-medium text-sm leading-[150%]'>Weight (g)</span>
+        ),
         cell: (props) => <span>{props.row.original.weight}</span>,
       },
     ],
@@ -89,7 +93,11 @@ const UniformityPreviewForm = () => {
               className={{ containerClassName: 'mb-5' }}
             />
             <RequirePermission permissions='lti.production.uniformity.create'>
-              <Button color='primary' onClick={handleNext} className='mb-10'>
+              <Button
+                color='primary'
+                onClick={handleNext}
+                className='mb-5 px-3 py-2.5 text-sm text-base-100 rounded-lg shadow-sm'
+              >
                 Next
               </Button>
             </RequirePermission>

src/components/pages/production/uniformity/form/UniformityResultForm.tsx

@@ -120,13 +120,19 @@ const UniformityResultForm = () => {
     () => [
       {
         accessorKey: 'label',
-        header: 'Label',
+        header: () => (
+          <span className='font-medium text-sm leading-[150%]'>Label</span>
+        ),
         cell: (props) => props.row.original.label,
+        enableSorting: false,
       },
       {
         accessorKey: 'value',
-        header: 'Value',
+        header: () => (
+          <span className='font-medium text-sm leading-[150%]'>Value</span>
+        ),
         cell: (props) => <span>{props.row.original.value}</span>,
+        enableSorting: false,
       },
     ],
     []
@@ -160,13 +166,19 @@ const UniformityResultForm = () => {
     () => [
       {
         accessorKey: 'label',
-        header: 'Label',
+        header: () => (
+          <span className='font-medium text-sm leading-[150%]'>Label</span>
+        ),
         cell: (props) => props.row.original.label,
+        enableSorting: false,
       },
       {
         accessorKey: 'value',
-        header: 'Value',
+        header: () => (
+          <span className='font-medium text-sm leading-[150%]'>Value</span>
+        ),
         cell: (props) => <span>{props.row.original.value}</span>,
+        enableSorting: false,
       },
     ],
     []
@@ -227,7 +239,7 @@ const UniformityResultForm = () => {
       >
         <Button variant='link' className='p-0 text-error' onClick={handleClose}>
           <Tooltip content='Hapus' position='left'>
-            <Icon icon='heroicons-outline:trash' width={20} height={20} />
+            <Icon icon='heroicons-outline:trash' width={18} height={18} />
           </Tooltip>
         </Button>
       </DrawerHeader>
@@ -235,9 +247,9 @@ const UniformityResultForm = () => {
       {/* Form Section */}
       <section className='w-full p-4'>
         {verifyUniformityResult ? (
-          <div className='flex flex-col gap-4'>
+          <div className='flex flex-col gap-3'>
             <div className=''>
-              <h2 className='text-base font-medium text-base-content/50 font-roboto mb-5'>
+              <h2 className='text-base font-medium text-base-content/50 font-roboto leading-6 tracking-[0.15px] mb-1.5'>
                 Sampling and Range
               </h2>
               <Table<DetailOptionType>
@@ -252,7 +264,7 @@ const UniformityResultForm = () => {
             </div>
 
             <div className=''>
-              <h2 className='text-base font-medium text-base-content/50 font-roboto mb-5'>
+              <h2 className='text-base font-medium text-base-content/50 font-roboto leading-6 tracking-[0.15px] mb-1.5'>
                 Result
               </h2>
               <Table<DetailOptionType>
@@ -265,7 +277,7 @@ const UniformityResultForm = () => {
                 }}
               />
             </div>
-            <div className='mt-4'>
+            <div className=''>
               <Table<BodyWeightData>
                 data={tableData}
                 columns={columnsUniformity}
@@ -280,7 +292,7 @@ const UniformityResultForm = () => {
                 onClick={handleSubmit}
                 isLoading={isSubmitting}
                 disabled={!uniformityFormData}
-                className='mb-10'
+                className='mb-5 px-3 py-2.5 text-sm text-base-100 rounded-lg shadow-sm'
               >
                 Submit
               </Button>

src/components/pages/production/uniformity/uniformity-utils.ts

@@ -1,26 +1,8 @@
-export const weightStatusColorMap: Record<string, string> = {
-  ideal: 'bg-[#00D39033]',
-  outside: 'bg-error/10',
-};
-
-export const weightStatusIndicatorColorMap: Record<string, string> = {
-  ideal: 'bg-[#008000]',
-  outside: 'bg-error',
-};
-
 export const weightStatusTextMap: Record<string, string> = {
   ideal: 'Ideal',
   outside: 'Outside',
 };
 
-export const getWeightStatusColor = (status: string): string => {
-  return weightStatusColorMap[status] || 'bg-info';
-};
-
-export const getWeightStatusIndicatorColor = (status: string): string => {
-  return weightStatusIndicatorColorMap[status] || 'bg-info';
-};
-
 export const getWeightStatusText = (status: string): string => {
   return weightStatusTextMap[status] || status;
 };
@@ -39,24 +21,6 @@ export const getWeightStatusBadgeColor = (
   return weightStatusBadgeColorMap[status] || 'neutral';
 };
 
-export const statusColorMap: Record<string, string> = {
-  APPROVED: 'bg-[#00D39033]',
-  Disetujui: 'bg-[#00D39033]',
-  REJECTED: 'bg-error/10',
-  Ditolak: 'bg-error/10',
-  CREATED: 'bg-[#f3f3f4]',
-  Pengajuan: 'bg-[#f3f3f4]',
-};
-
-export const statusIndicatorColorMap: Record<string, string> = {
-  APPROVED: 'bg-[#008000]',
-  Disetujui: 'bg-[#008000]',
-  REJECTED: 'bg-error',
-  Ditolak: 'bg-error',
-  CREATED: 'bg-[#D9D9D9]',
-  Pengajuan: 'bg-[#D9D9D9]',
-};
-
 export const statusTextMap: Record<string, string> = {
   APPROVED: 'Disetujui',
   Disetujui: 'Disetujui',
@@ -66,14 +30,6 @@ export const statusTextMap: Record<string, string> = {
   Pengajuan: 'Pengajuan',
 };
 
-export const getStatusColor = (status: string): string => {
-  return statusColorMap[status] || 'bg-info';
-};
-
-export const getStatusIndicatorColor = (status: string): string => {
-  return statusIndicatorColorMap[status] || 'bg-info';
-};
-
 export const getStatusText = (status: string): string => {
   return statusTextMap[status] || status;
 };

src/components/pages/purchase/PurchaseTable.tsx

@@ -16,7 +16,8 @@ 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 StatusBadge from '@/components/helper/StatusBadge';
+// import PurchaseOrderInvoice from '@/components/pages/purchase/order/PurchaseOrderInvoice';
 
 import { cn, formatDate } from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
@@ -25,6 +26,44 @@ import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { Purchase } from '@/types/api/purchase/purchase';
 import { PurchaseApi } from '@/services/api/purchase';
+import { Color } from '@/types/theme';
+
+// ===== STATUS BADGE UTILITIES =====
+const statusTextMap: Record<string, string> = {
+  APPROVED: 'Disetujui',
+  Disetujui: 'Disetujui',
+  REJECTED: 'Ditolak',
+  Ditolak: 'Ditolak',
+  CREATED: 'Dibuat',
+  UPDATED: 'Diperbarui',
+};
+
+const getStatusText = (status: string): string => {
+  return statusTextMap[status] || status;
+};
+
+const statusBadgeColorMap: Record<string, Color> = {
+  APPROVED: 'success',
+  Disetujui: 'success',
+  approved: 'success',
+  disetujui: 'success',
+  REJECTED: 'error',
+  Ditolak: 'error',
+  rejected: 'error',
+  ditolak: 'error',
+  CREATED: 'neutral',
+  Dibuat: 'neutral',
+  created: 'neutral',
+  dibuat: 'neutral',
+  UPDATED: 'warning',
+  Diperbarui: 'warning',
+  updated: 'warning',
+  diperbarui: 'warning',
+};
+
+const getStatusBadgeColor = (status: string): Color => {
+  return statusBadgeColorMap[status] || 'neutral';
+};
 
 // ===== INTERFACES =====
 interface RowOptionsMenuProps {
@@ -120,6 +159,27 @@ const PurchaseTable = () => {
     PurchaseApi.getAllFetcher
   );
 
+  // const [isDownloadingInvoice, setIsDownloadingInvoice] = useState(false);
+  // const [invoicePurchaseData, setInvoicePurchaseData] =
+  //   useState<Purchase | null>(null);
+
+  // const handleDownloadInvoice = async (purchaseId: number) => {
+  //   setIsDownloadingInvoice(true);
+  //   try {
+  //     const response = await PurchaseApi.getSingle(purchaseId);
+  //     if (isResponseSuccess(response) && response.data) {
+  //       setInvoicePurchaseData(response.data);
+  //       setTimeout(() => {
+  //         setInvoicePurchaseData(null);
+  //       }, 1000);
+  //     }
+  //   } catch {
+  //     toast.error('Gagal mengambil data purchase order.');
+  //   } finally {
+  //     setIsDownloadingInvoice(false);
+  //   }
+  // };
+
   // ===== TABLE COLUMNS DEFINITION =====
   const purchaseColumns: ColumnDef<Purchase>[] = [
     {
@@ -130,10 +190,40 @@ const PurchaseTable = () => {
       },
     },
     {
-      accessorKey: 'supplier',
+      accessorKey: 'po_expedition',
+      header: 'PO Ekspedisi',
+      cell: (props) => props.row.original.po_expedition || '-',
+    },
+    {
+      accessorKey: 'supplier.name',
       header: 'Vendor',
       cell: (props) => props.row.original.supplier.name,
     },
+    {
+      accessorKey: 'requester_name',
+      header: 'Nama Pengaju',
+      cell: (props) => props.row.original.requester_name || '-',
+    },
+    {
+      accessorKey: 'products.name',
+      header: 'Produk',
+      cell: (props) => {
+        const products = props.row.original.products;
+        if (!products || products.length === 0) return '-';
+        return (
+          <ul className='list-disc pl-4'>
+            {products.map((product, index) => (
+              <li key={index}>{product.name}</li>
+            ))}
+          </ul>
+        );
+      },
+    },
+    {
+      accessorKey: 'location.name',
+      header: 'Lokasi',
+      cell: (props) => props.row.original.location?.name || '-',
+    },
     {
       accessorKey: 'po_date',
       header: 'Tgl. PO',
@@ -142,6 +232,14 @@ const PurchaseTable = () => {
           ? formatDate(props.row.original.po_date, 'DD MMM YYYY')
           : '-',
     },
+    {
+      accessorKey: 'due_date',
+      header: 'Jatuh Tempo',
+      cell: (props) =>
+        props.row.original.due_date
+          ? formatDate(props.row.original.due_date, 'DD MMM YYYY')
+          : '-',
+    },
     {
       header: 'Aging',
       cell: (props) => {
@@ -160,48 +258,42 @@ const PurchaseTable = () => {
         const approval = props.row.original.latest_approval;
         if (!approval) return '-';
 
-        const isRejected = approval.action === 'REJECTED';
+        const status = approval.action;
 
-        let statusColor:
-          | 'warning'
-          | 'success'
-          | 'neutral'
-          | 'error'
-          | 'primary'
-          | 'info' = 'neutral';
+        let statusColor: Color = '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 (status === 'REJECTED') {
+          statusColor = getStatusBadgeColor(status);
+        } else {
+          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';
-        }
+        const statusText = approval.step_name || getStatusText(status);
 
         return (
-          <Badge
-            variant='soft'
+          <StatusBadge
             color={statusColor}
+            text={statusText}
             className={{
-              badge: 'whitespace-nowrap',
+              badge: 'whitespace-nowrap max-w-max w-fit',
             }}
-          >
-            {isRejected ? 'Ditolak' : approval.step_name}
-          </Badge>
+          />
         );
       },
     },
@@ -287,23 +379,32 @@ const PurchaseTable = () => {
               <RequirePermission permissions='lti.purchase.create'>
                 <Button
                   href='/purchase/add'
-                  variant='outline'
                   color='primary'
-                  className='w-full sm:w-fit'
+                  className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
                 >
-                  <Icon icon='ic:round-plus' width={24} height={24} />
-                  Tambah
+                  <Icon icon='heroicons:plus' width={20} height={20} />
+                  Add Purchase
                 </Button>
               </RequirePermission>
             </div>
 
             <DebouncedTextInput
               name='search'
-              placeholder='Cari Pembelian'
+              placeholder='Search'
               value={tableFilterState.search}
               onChange={searchChangeHandler}
+              startAdornment={
+                <Icon
+                  icon='heroicons:magnifying-glass'
+                  width={20}
+                  height={20}
+                />
+              }
               className={{
-                wrapper: 'sm:max-w-3xs',
+                wrapper: 'w-full min-w-24 max-w-3xs',
+                inputWrapper: 'rounded-xl! shadow-button-soft',
+                input:
+                  'placeholder:font-semibold placeholder:text-base-content/50',
               }}
             />
           </div>
@@ -369,6 +470,7 @@ const PurchaseTable = () => {
         text={`Apakah anda yakin ingin menghapus data permintaan pembelian ini?`}
         secondaryButton={{
           text: 'Tidak',
+          onClick: () => deleteModal.closeModal(),
         }}
         primaryButton={{
           text: 'Ya',
@@ -377,6 +479,15 @@ const PurchaseTable = () => {
           onClick: confirmationModalDeleteClickHandler,
         }}
       />
+
+      {/*{invoicePurchaseData && (
+        <div className='hidden'>
+          <PurchaseOrderInvoice
+            data={invoicePurchaseData}
+            triggerDownloadOnMount={true}
+          />
+        </div>
+      )}*/}
     </>
   );
 };

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

@@ -105,6 +105,7 @@ const PurchaseOrderDetail = ({
   const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [selectedItem, setSelectedItem] = useState<PurchaseItem | null>(null);
+  const [, setApprovalNotes] = useState('');
 
   const selectedRowIds = Object.keys(rowSelection).map((item) =>
     parseInt(item)
@@ -207,12 +208,15 @@ const PurchaseOrderDetail = ({
 
     switch (approvalStep) {
       case 1:
+        setApprovalNotes('');
         staffApprovalModal.openModal();
         break;
       case 2:
+        setApprovalNotes('');
         confirmationModalWithNotes.openModal();
         break;
       case 3:
+        setApprovalNotes('');
         acceptApprovalModal.openModal();
         break;
       default:
@@ -225,12 +229,15 @@ const PurchaseOrderDetail = ({
 
     switch (approvalStep) {
       case 1:
+        setApprovalNotes('');
         staffRejectionModal.openModal();
         break;
       case 2:
+        setApprovalNotes('');
         managerRejectionModal.openModal();
         break;
       case 3:
+        setApprovalNotes('');
         acceptRejectionModal.openModal();
         break;
       default:
@@ -406,6 +413,56 @@ const PurchaseOrderDetail = ({
     refetchData,
   ]);
 
+  // ===== APPROVAL/REJECTION HANDLERS =====
+  const managerApprovalHandler = async (notes: string) => {
+    const payload: CreateManagerApprovalRequestPayload = {
+      action: 'APPROVED',
+      notes: notes || null,
+    };
+
+    await createManagerApprovalHandler(payload);
+    await refreshApprovals();
+    await refetchData?.();
+    setApprovalNotes('');
+    confirmationModalWithNotes.closeModal();
+  };
+
+  const staffRejectionHandler = async (notes: string) => {
+    const payload: CreateStaffApprovalRequestPayload = {
+      action: 'REJECTED',
+      notes: notes || null,
+    };
+
+    await createStaffApprovalHandler(payload);
+    await refetchData?.();
+    setApprovalNotes('');
+    staffRejectionModal.closeModal();
+  };
+
+  const acceptRejectionHandler = async (notes: string) => {
+    const payload: CreateAcceptApprovalRequestPayload = {
+      action: 'REJECTED',
+      notes: notes || null,
+    };
+
+    await createAcceptApprovalHandler(payload);
+    await refetchData?.();
+    setApprovalNotes('');
+    acceptRejectionModal.closeModal();
+  };
+
+  const managerRejectionHandler = async (notes: string) => {
+    const payload: CreateManagerApprovalRequestPayload = {
+      action: 'REJECTED',
+      notes: notes || null,
+    };
+
+    await createManagerApprovalHandler(payload);
+    await refetchData?.();
+    setApprovalNotes('');
+    managerRejectionModal.closeModal();
+  };
+
   if (!initialValues) {
     return null;
   }
@@ -969,20 +1026,14 @@ const PurchaseOrderDetail = ({
         primaryButton={{
           text: 'Ya, Lanjutkan',
           color: 'success',
-          onClick: async (notes) => {
-            const payload: CreateManagerApprovalRequestPayload = {
-              action: 'APPROVED',
-              notes: notes || null,
-            };
-
-            await createManagerApprovalHandler(payload);
-            await refreshApprovals();
-            await refetchData?.();
-            confirmationModalWithNotes.closeModal();
-          },
+          onClick: managerApprovalHandler,
         }}
         secondaryButton={{
           text: 'Batal',
+          onClick: () => {
+            setApprovalNotes('');
+            confirmationModalWithNotes.closeModal();
+          },
         }}
       />
 
@@ -1071,19 +1122,14 @@ const PurchaseOrderDetail = ({
         primaryButton={{
           text: 'Ya, Tolak',
           color: 'error',
-          onClick: async (notes) => {
-            const payload: CreateStaffApprovalRequestPayload = {
-              action: 'REJECTED',
-              notes: notes || null,
-            };
-
-            await createStaffApprovalHandler(payload);
-            await refetchData?.();
-            staffRejectionModal.closeModal();
-          },
+          onClick: staffRejectionHandler,
         }}
         secondaryButton={{
           text: 'Batal',
+          onClick: () => {
+            setApprovalNotes('');
+            staffRejectionModal.closeModal();
+          },
         }}
       />
 
@@ -1098,19 +1144,14 @@ const PurchaseOrderDetail = ({
         primaryButton={{
           text: 'Ya, Tolak',
           color: 'error',
-          onClick: async (notes) => {
-            const payload: CreateAcceptApprovalRequestPayload = {
-              action: 'REJECTED',
-              notes: notes || null,
-            };
-
-            await createAcceptApprovalHandler(payload);
-            await refetchData?.();
-            acceptRejectionModal.closeModal();
-          },
+          onClick: acceptRejectionHandler,
         }}
         secondaryButton={{
           text: 'Batal',
+          onClick: () => {
+            setApprovalNotes('');
+            acceptRejectionModal.closeModal();
+          },
         }}
       />
 
@@ -1125,19 +1166,14 @@ const PurchaseOrderDetail = ({
         primaryButton={{
           text: 'Ya, Tolak',
           color: 'error',
-          onClick: async (notes) => {
-            const payload: CreateManagerApprovalRequestPayload = {
-              action: 'REJECTED',
-              notes: notes || null,
-            };
-
-            await createManagerApprovalHandler(payload);
-            await refetchData?.();
-            managerRejectionModal.closeModal();
-          },
+          onClick: managerRejectionHandler,
         }}
         secondaryButton={{
           text: 'Batal',
+          onClick: () => {
+            setApprovalNotes('');
+            managerRejectionModal.closeModal();
+          },
         }}
       />
 

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useMemo, useState } from 'react';
+import { useMemo, useState, useEffect, useCallback, useRef } from 'react';
 import {
   Page,
   Text,
@@ -235,11 +235,16 @@ const pdfStyles = StyleSheet.create({
 interface PurchaseOrderInvoiceProps {
   data?: Purchase;
   className?: string;
+  triggerDownloadOnMount?: boolean;
 }
 
-const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
+const PurchaseOrderInvoice = ({
+  data,
+  triggerDownloadOnMount,
+}: PurchaseOrderInvoiceProps) => {
   const [, setIsGeneratingPDF] = useState(false);
   const purchaseData = data;
+  const hasDownloadedRef = useRef(false);
 
   const grandTotal = useMemo(() => {
     return (
@@ -250,7 +255,7 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
     );
   }, [purchaseData?.items]);
 
-  const handleDownloadPDF = async () => {
+  const handleDownloadPDF = useCallback(async () => {
     if (!purchaseData) {
       toast.error('No purchase order data available');
       return;
@@ -510,7 +515,20 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
     } finally {
       setIsGeneratingPDF(false);
     }
-  };
+  }, [purchaseData]);
+
+  useEffect(() => {
+    if (triggerDownloadOnMount && purchaseData && !hasDownloadedRef.current) {
+      hasDownloadedRef.current = true;
+      handleDownloadPDF();
+    }
+  }, [triggerDownloadOnMount, purchaseData]);
+
+  useEffect(() => {
+    if (!triggerDownloadOnMount) {
+      hasDownloadedRef.current = false;
+    }
+  }, [triggerDownloadOnMount]);
 
   if (!purchaseData) {
     return (
@@ -520,6 +538,10 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
     );
   }
 
+  if (triggerDownloadOnMount) {
+    return null;
+  }
+
   return purchaseData?.po_number &&
     purchaseData.po_number !== 'Belum dibuat' ? (
     <Button

src/components/pages/report/DailyMarketingsTable.tsx

@@ -10,7 +10,13 @@ import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import Card from '@/components/Card';
 import Collapse from '@/components/Collapse';
 
-import { cn, formatCurrency, formatDate, formatNumber } from '@/lib/helper';
+import {
+  cn,
+  formatCurrency,
+  formatDate,
+  formatNumber,
+  formatVechicleNumber,
+} from '@/lib/helper';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { DailyMarketingRow } from '@/types/api/report/marketing';
 import { MarketingReportApi } from '@/services/api/report/marketing-report';
@@ -94,7 +100,9 @@ const DailyMarketingsTable = ({
       accessorKey: 'vehicle_number',
       header: 'No. Polisi',
       cell: (props) => (
-        <span className='text-nowrap'>{props.row.original.vehicle_number}</span>
+        <span className='text-nowrap'>
+          {formatVechicleNumber(props.row.original.vehicle_number)}
+        </span>
       ),
     },
     {
@@ -182,8 +190,6 @@ const DailyMarketingsTable = ({
   ];
 
   useEffect(() => {
-    // console.log({ sorting });
-
     if (sorting.length === 1) {
       onFilterByChange(sorting[0].id);
       onSortByChange(sorting[0].desc ? 'desc' : 'asc');

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

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

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

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

src/config/constant.ts

@@ -5,6 +5,7 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
     text: 'Dashboard',
     link: '/dashboard',
     icon: 'heroicons-outline:chart-bar-square',
+    permission: ['lti.dashboard.list'],
   },
   {
     text: 'Daily Checklist',
@@ -81,6 +82,8 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
     permission: [
       'lti.production.project_flocks.list',
       'lti.production.recording.list',
+      'lti.production.transfer_to_laying.list',
+      'lti.production.uniformity.list',
     ],
     submenu: [
       {
@@ -96,6 +99,7 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
       {
         text: 'Transfer ke Laying',
         link: '/production/transfer-to-laying',
+        permission: ['lti.production.transfer_to_laying.list'],
       },
       {
         text: 'Uniformity',
@@ -114,11 +118,13 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
     text: 'Penjualan',
     link: '/marketing',
     icon: 'heroicons-outline:currency-dollar',
+    permission: ['lti.marketing.delivery_order.list'],
   },
   {
     text: 'Keuangan',
     link: '/finance',
     icon: 'heroicons-outline:banknotes',
+    permission: ['lti.finance.transactions.list'],
   },
   {
     text: 'Biaya',
@@ -136,26 +142,46 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
     text: 'Laporan',
     link: '/report',
     icon: 'mdi:chart-box-outline',
+    permission: [
+      'lti.repport.debtsupplier.list',
+      'lti.repport.customerpayment.list',
+      'lti.repport.purchasesupplier.list',
+      'lti.repport.expense.list',
+      'lti.repport.delivery.list',
+      'lti.repport.gethppperkandang.list',
+      'lti.repport.production_result.list',
+    ],
     submenu: [
       {
         text: 'Keuangan',
         link: '/report/finance',
+        permission: [
+          'lti.repport.debtsupplier.list',
+          'lti.repport.customerpayment.list',
+        ],
       },
       {
         text: 'Logistik & Persediaan',
         link: '/report/logistic-stock',
+        permission: ['lti.repport.purchasesupplier.list'],
       },
       {
         text: 'Biaya Operasional',
         link: '/report/expense',
+        permission: ['lti.repport.expense.list'],
       },
       {
         text: 'Penjualan',
         link: '/report/marketing',
+        permission: [
+          'lti.repport.delivery.list',
+          'lti.repport.gethppperkandang.list',
+        ],
       },
       {
         text: 'Hasil Produksi',
         link: '/report/production-result',
+        permission: ['lti.repport.production_result.list'],
       },
     ],
   },
@@ -204,6 +230,7 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
       'lti.master.suppliers.list',
       'lti.master.uoms.list',
       'lti.master.warehouses.list',
+      'lti.master.production_standards.list',
     ],
     submenu: [
       {
@@ -274,6 +301,7 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
       {
         text: 'Standar Produksi',
         link: '/master-data/production-standard',
+        permission: ['lti.master.production_standards.list'],
       },
     ],
   },

src/config/route-permission.ts

@@ -116,7 +116,10 @@ export const ROUTE_PERMISSIONS: Record<string, string[]> = {
   // Report
   '/report/logistic-stock/': ['lti.repport.purchasesupplier.list'],
   '/report/expense/': ['lti.repport.expense.list'],
-  '/report/marketing/': ['lti.repport.delivery.list'],
+  '/report/marketing/': [
+    'lti.repport.delivery.list',
+    'lti.repport.gethppperkandang.list',
+  ],
   '/report/production-result/': ['lti.repport.production_result.list'],
   '/report/finance/': [
     'lti.repport.finance.list',

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

@@ -127,6 +127,10 @@ export function DailyChecklistContent() {
     { id: number; name: string }[]
   >([]);
 
+  const sortedSelectedEmployees = selectedEmployees.toSorted((a, b) =>
+    a.name.localeCompare(b.name)
+  );
+
   const [dailyChecklistId, setDailyChecklistId] = useState<string | null>(null);
   const [checklistStatus, setChecklistStatus] = useState<string>('DRAFT');
   // const [isEditMode, setIsEditMode] = useState(false);
@@ -486,6 +490,11 @@ export function DailyChecklistContent() {
       return;
     }
 
+    if (!tempSelectedPhaseIds.length) {
+      toast.error('Pilih minimal satu fase');
+      return;
+    }
+
     try {
       // Insert new phase links
       const setDailyChecklistPhaseRes =
@@ -535,14 +544,6 @@ export function DailyChecklistContent() {
     }
   };
 
-  const toggleSelectAllAbk = () => {
-    if (tempSelectedEmployees.length === employees.length) {
-      setTempSelectedEmployees([]);
-    } else {
-      setTempSelectedEmployees([...employees]);
-    }
-  };
-
   const applyAbkSelection = async () => {
     if (!dailyChecklistId) {
       toast.error('Checklist belum tersedia');
@@ -657,16 +658,6 @@ export function DailyChecklistContent() {
   ) => {
     const taskId = taskIdsByPhaseActivityId[activityId];
 
-    // console.log('[CHECKBOX] Click detected:', {
-    //   activityId,
-    //   employeeId,
-    //   checked,
-    //   taskId,
-    //   hasTaskId: !!taskId,
-    //   checklistStatus,
-    //   isChecklistStatusDraft,
-    // });
-
     if (!taskId) {
       console.error('[CHECKBOX] No taskId found for activityId:', activityId);
       console.error('[CHECKBOX] Available taskIds:', taskIdsByPhaseActivityId);
@@ -694,10 +685,7 @@ export function DailyChecklistContent() {
           },
         },
       };
-      // console.log(
-      //   '[CHECKBOX] State updated optimistically:',
-      //   updated[taskId]?.[employeeId]
-      // );
+
       return updated;
     });
 
@@ -709,8 +697,6 @@ export function DailyChecklistContent() {
       note: assignments[taskId]?.[employeeId]?.note || null,
     };
 
-    // console.log('[CHECKBOX] Saving to database:', payload);
-
     const checkOrUncheckAssignmentRes =
       await DailyChecklistApi.checkOrUncheckAssignment(payload);
 
@@ -734,8 +720,6 @@ export function DailyChecklistContent() {
       }));
       return;
     }
-
-    // console.log('[CHECKBOX] Saved successfully');
   };
 
   const handleNoteChange = async (
@@ -853,10 +837,34 @@ export function DailyChecklistContent() {
   );
 
   const isAllAbkSelected =
-    tempSelectedEmployees.length === employees.length && employees.length > 0;
+    tempSelectedEmployees.length === filteredEmployees.length &&
+    filteredEmployees.length > 0 &&
+    tempSelectedEmployees.every((tempSelectedEmployee) => {
+      return (
+        filteredEmployees.findIndex(
+          (filteredEmployee) => filteredEmployee.id === tempSelectedEmployee.id
+        ) >= 0
+      );
+    });
   const isAllPhasesSelected =
-    tempSelectedPhaseIds.length === availablePhases.length &&
-    availablePhases.length > 0;
+    tempSelectedPhaseIds.length === filteredPhases.length &&
+    filteredPhases.length > 0 &&
+    tempSelectedPhaseIds.every((tempSelectedPhaseId) => {
+      return (
+        filteredPhases.findIndex(
+          (filteredPhase) =>
+            String(filteredPhase.id) === String(tempSelectedPhaseId)
+        ) >= 0
+      );
+    });
+
+  const toggleSelectAllAbk = () => {
+    if (isAllAbkSelected) {
+      setTempSelectedEmployees([]);
+    } else {
+      setTempSelectedEmployees([...filteredEmployees]);
+    }
+  };
 
   // Group activities by PHASE → TIME_TYPE → ACTIVITIES
   const groupActivitiesByPhase = () => {
@@ -1130,7 +1138,7 @@ export function DailyChecklistContent() {
                           <th className='text-left py-3 px-4 text-sm font-semibold text-gray-700 border-r border-gray-200 min-w-[200px]'>
                             Aktivitas
                           </th>
-                          {selectedEmployees.map((emp) => (
+                          {sortedSelectedEmployees.map((emp) => (
                             <th
                               key={emp.id}
                               className='text-center py-3 px-4 text-sm font-semibold text-gray-700 border-r border-gray-200 min-w-[100px]'
@@ -1216,6 +1224,12 @@ export function DailyChecklistContent() {
                               }
 
                               // ACTIVITY rows (Child rows with checkboxes)
+                              activities.sort((a, b) =>
+                                a.name.localeCompare(b.name, undefined, {
+                                  sensitivity: 'base',
+                                })
+                              );
+
                               activities.forEach((activity, index) => {
                                 const taskId =
                                   taskIdsByPhaseActivityId[activity.id];
@@ -1244,7 +1258,7 @@ export function DailyChecklistContent() {
                                         </p>
                                       )}
                                     </td>
-                                    {selectedEmployees.map((emp) => (
+                                    {sortedSelectedEmployees.map((emp) => (
                                       <td
                                         key={emp.id}
                                         className='text-center py-3 px-4 border-r border-gray-200'
@@ -1445,6 +1459,8 @@ export function DailyChecklistContent() {
                         inputWrapper: 'flex items-center',
                         label: 'font-semibold text-gray-900',
                       }}
+                      maxSize={5242880} // 5 MB
+                      bottomLabel='Ukuran file maksimal 5MB'
                     />
                   )}
                 </>
@@ -1519,14 +1535,14 @@ export function DailyChecklistContent() {
                       setTempSelectedPhaseIds([]);
                     } else {
                       setTempSelectedPhaseIds(
-                        availablePhases.map((p) => String(p.id))
+                        filteredPhases.map((p) => String(p.id))
                       );
                     }
                   }}
                   className='checkbox-clean'
                 />
                 <span className='text-sm font-medium text-gray-700 group-hover:text-gray-900'>
-                  Pilih Semua ({availablePhases.length} Fase)
+                  Pilih Semua ({filteredPhases.length} Fase)
                 </span>
               </label>
             </div>
@@ -1621,7 +1637,7 @@ export function DailyChecklistContent() {
             />
           </div>
 
-          {employees.length > 0 && (
+          {filteredEmployees.length > 0 && (
             <div className='flex items-center gap-3 px-1 py-2'>
               <label className='flex items-center gap-2 cursor-pointer group'>
                 <input
@@ -1631,7 +1647,7 @@ export function DailyChecklistContent() {
                   className='checkbox-clean'
                 />
                 <span className='text-sm font-medium text-gray-700 group-hover:text-gray-900'>
-                  Pilih Semua ({employees.length} ABK)
+                  Pilih Semua ({filteredEmployees.length} ABK)
                 </span>
               </label>
             </div>

src/figma-make/components/pages/list-daily-checklist/ListDailyChecklistContent.tsx

@@ -36,6 +36,7 @@ import { ColumnDef } from '@tanstack/react-table';
 import { useSelect } from '@/components/input/SelectInput';
 import { KandangApi } from '@/services/api/master-data';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 interface Kandang {
   id: string;
@@ -389,19 +390,21 @@ export function ListDailyChecklistContent() {
           </Button>
 
           {row.original.status === 'DRAFT' && (
-            <Button
-              size='sm'
-              variant='outline'
-              onClick={() => handleEdit(row.original)}
-              className='border-gray-200 text-gray-700 hover:bg-gray-50'
-            >
-              <Edit className='w-4 h-4 mr-1' />
-              Edit
-            </Button>
+            <RequirePermission permissions='lti.daily_checklist.create'>
+              <Button
+                size='sm'
+                variant='outline'
+                onClick={() => handleEdit(row.original)}
+                className='border-gray-200 text-gray-700 hover:bg-gray-50'
+              >
+                <Edit className='w-4 h-4 mr-1' />
+                Edit
+              </Button>
+            </RequirePermission>
           )}
 
           {row.original.status === 'SUBMITTED' && (
-            <>
+            <RequirePermission permissions='lti.daily_checklist.create'>
               <Button
                 size='sm'
                 onClick={() => handleApprove(row.original)}
@@ -419,19 +422,21 @@ export function ListDailyChecklistContent() {
                 <XCircle className='w-4 h-4 mr-1' />
                 Reject
               </Button>
-            </>
+            </RequirePermission>
           )}
 
           {row.original.status === 'DRAFT' && (
-            <Button
-              size='sm'
-              variant='destructive'
-              onClick={() => handleDelete(row.original)}
-              className='bg-red-600 hover:bg-red-700 text-white'
-            >
-              <Trash2 className='w-4 h-4 mr-1' />
-              Hapus
-            </Button>
+            <RequirePermission permissions='lti.daily_checklist.create'>
+              <Button
+                size='sm'
+                variant='destructive'
+                onClick={() => handleDelete(row.original)}
+                className='bg-red-600 hover:bg-red-700 text-white'
+              >
+                <Trash2 className='w-4 h-4 mr-1' />
+                Hapus
+              </Button>
+            </RequirePermission>
           )}
         </div>
       ),

src/figma-make/components/pages/list-daily-checklist/detail/DetailDailyChecklistContent.tsx

@@ -17,12 +17,13 @@ import {
   DialogFooter,
 } from '@/figma-make/components/base/dialog';
 import { toast } from 'sonner';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { notFound, useRouter, useSearchParams } from 'next/navigation';
 import { DailyChecklistApi } from '@/services/api/daily-checklist/daily-checklist';
 import { isResponseError } from '@/lib/api-helper';
 import Link from 'next/link';
 import { Icon } from '@iconify/react';
 import { Document } from '@/types/api/api-general';
+import RequirePermission from '@/components/helper/RequirePermission';
 
 interface ChecklistDetailRow {
   checklist_id: string;
@@ -139,6 +140,8 @@ export function DetailDailyChecklistContent() {
   useEffect(() => {
     if (checklistId) {
       fetchChecklistDetail();
+    } else {
+      router.push('/404');
     }
   }, [checklistId]);
 
@@ -275,6 +278,13 @@ export function DetailDailyChecklistContent() {
           ])
         ).values()
       );
+
+      uniqueEmployees.sort((a, b) =>
+        a.name.localeCompare(b.name, undefined, {
+          sensitivity: 'base',
+        })
+      );
+
       setEmployees(uniqueEmployees);
 
       // Group data by Phase → Time Type → Activity
@@ -586,25 +596,27 @@ export function DetailDailyChecklistContent() {
             </p>
           </div>
           {header.status === 'SUBMITTED' && (
-            <div className='flex gap-2'>
-              <Button
-                onClick={handleApprove}
-                disabled={actionLoading}
-                className='bg-green-600 hover:bg-green-700 text-white'
-              >
-                <CheckCircle className='w-4 h-4 mr-2' />
-                Approve
-              </Button>
-              <Button
-                onClick={handleReject}
-                disabled={actionLoading}
-                variant='destructive'
-                className='bg-red-600 hover:bg-red-700 text-white'
-              >
-                <XCircle className='w-4 h-4 mr-2' />
-                Reject
-              </Button>
-            </div>
+            <RequirePermission permissions='lti.daily_checklist.create'>
+              <div className='flex gap-2'>
+                <Button
+                  onClick={handleApprove}
+                  disabled={actionLoading}
+                  className='bg-green-600 hover:bg-green-700 text-white'
+                >
+                  <CheckCircle className='w-4 h-4 mr-2' />
+                  Approve
+                </Button>
+                <Button
+                  onClick={handleReject}
+                  disabled={actionLoading}
+                  variant='destructive'
+                  className='bg-red-600 hover:bg-red-700 text-white'
+                >
+                  <XCircle className='w-4 h-4 mr-2' />
+                  Reject
+                </Button>
+              </div>
+            </RequirePermission>
           )}
         </div>
 
@@ -779,7 +791,15 @@ export function DetailDailyChecklistContent() {
                         }
 
                         // ACTIVITY rows
-                        timeGroup.activities.forEach((activity, index) => {
+                        const activities = timeGroup.activities;
+
+                        activities.sort((a, b) =>
+                          a.name.localeCompare(b.name, undefined, {
+                            sensitivity: 'base',
+                          })
+                        );
+
+                        activities.forEach((activity, index) => {
                           const indentClass = hasMultipleTimeTypes
                             ? 'pl-12'
                             : 'pl-8';
@@ -823,9 +843,15 @@ export function DetailDailyChecklistContent() {
                               })}
                               <td className='py-3 px-4'>
                                 {activity.employees.length > 0 &&
-                                activity.employees[0].note ? (
+                                activity.employees[
+                                  activity.employees.length - 1
+                                ].note ? (
                                   <p className='text-sm text-gray-600'>
-                                    {activity.employees[0].note}
+                                    {
+                                      activity.employees[
+                                        activity.employees.length - 1
+                                      ].note
+                                    }
                                   </p>
                                 ) : (
                                   <p className='text-xs text-gray-400 italic'>

src/figma-make/components/pages/master-data/configuration/MasterConfigurationContent.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Plus, MoreVertical, Pencil, Trash2 } from 'lucide-react';
 import { Card, CardContent } from '@/figma-make/components/base/card';
 import { Button } from '@/figma-make/components/base/button';
@@ -404,7 +404,22 @@ export function MasterConfigurationContent() {
       </div>
 
       {/* Add/Edit Modal */}
-      <Dialog open={showModal} onOpenChange={setShowModal}>
+      <Dialog
+        open={showModal}
+        onOpenChange={(open) => {
+          if (!open) {
+            setIsFormInvalid(false);
+            setConfigurationForm({
+              id: 0,
+              date: '',
+              percentage_threshold_bad: '',
+              percentage_threshold_enough: '',
+            });
+          }
+
+          setShowModal(open);
+        }}
+      >
         <DialogContent className='sm:max-w-md bg-white rounded-xl shadow-lg'>
           <DialogHeader>
             <DialogTitle>

src/services/api/marketing/marketing.ts

@@ -1,5 +1,6 @@
+import { isResponseError } from '@/lib/api-helper';
 import { BaseApiService } from '@/services/api/base';
-import { httpClient } from '@/services/http/client';
+import { httpClient, httpClientFetcher } from '@/services/http/client';
 import { BaseApiResponse } from '@/types/api/api-general';
 import {
   Marketing,
@@ -8,6 +9,9 @@ import {
   CreateDeliveryOrderPayload,
   UpdateDeliveryOrderPayload,
 } from '@/types/api/marketing/marketing';
+import toast from 'react-hot-toast';
+import * as XLSX from 'xlsx';
+import { formatCurrency, formatDate, formatTitleCase } from '@/lib/helper';
 
 /**
  * 💡 Helper untuk membuat respons dummy
@@ -97,6 +101,78 @@ export class SalesOrderService extends BaseApiService<
     }
   }
 }
+class MarketingExportService extends BaseApiService<
+  Marketing,
+  unknown,
+  unknown
+> {
+  constructor(basePath: string = '/marketing') {
+    super(basePath);
+  }
+
+  /**
+   * Export to Excel
+   */
+  async exportToExcel(initialQueryString: string) {
+    const params = new URLSearchParams(initialQueryString);
+    const queryString = `?${params.toString()}`;
+
+    try {
+      const marketingData = await httpClientFetcher<
+        BaseApiResponse<Marketing[]>
+      >(`${this.basePath}${queryString}`);
+
+      if (isResponseError(marketingData)) {
+        toast.error('Gagal melakukan export marketing! Coba lagi.');
+        return;
+      }
+
+      const rows = marketingData.data;
+
+      const formattedRows = [];
+
+      for (let i = 0; i < rows.length; i++) {
+        const row = rows[i];
+        const approval = row.latest_approval;
+        const isRejected = approval?.action === 'REJECTED';
+
+        // Calculate grand total from sales_order products
+        const grandTotal =
+          row.sales_order
+            ?.map((product) => product.total_price)
+            .reduce((a, b) => a + b, 0) ?? 0;
+
+        // Get product names
+        const products =
+          row.sales_order
+            ?.map((product) => product.product_warehouse?.product?.name)
+            .filter(Boolean)
+            .join(', ') ?? '';
+
+        formattedRows.push({
+          'No. Order': row.so_number,
+          Tanggal: formatDate(row.so_date, 'DD-MM-YYYY'),
+          Status: isRejected
+            ? 'Ditolak'
+            : formatTitleCase(approval?.step_name || ''),
+          Customer: row.customer?.name || '',
+          'Grand Total': formatCurrency(grandTotal),
+          Products: products,
+          Notes: row.notes || '',
+        });
+      }
+
+      const ws = XLSX.utils.json_to_sheet(formattedRows);
+      const wb = XLSX.utils.book_new();
+      XLSX.utils.book_append_sheet(wb, ws, 'marketing');
+
+      // triggers download in browser
+      XLSX.writeFile(wb, 'marketing.xlsx');
+    } catch (error) {
+      toast.error('Gagal melakukan export marketing! Coba lagi.');
+    }
+  }
+}
 
 export const SalesOrderApi = new SalesOrderService('/marketing/sales-orders');
 export const DeliveryOrderApi = new BaseApiService<
@@ -104,6 +180,4 @@ export const DeliveryOrderApi = new BaseApiService<
   CreateDeliveryOrderPayload,
   UpdateDeliveryOrderPayload
 >('/marketing/delivery-orders');
-export const MarketingApi = new BaseApiService<Marketing, unknown, unknown>(
-  '/marketing'
-);
+export const MarketingApi = new MarketingExportService('/marketing');

src/services/hooks/useFormikErrorList.ts

@@ -5,6 +5,7 @@ import { useState } from 'react';
 interface UseFormikErrorListOptions {
   onBeforeSubmit?: (e: React.FormEvent<HTMLFormElement>) => boolean | void;
   onAfterValidation?: () => void | Promise<void>;
+  onAfterSubmit?: () => void | Promise<void>;
 }
 
 export const useFormikErrorList = <T>(
@@ -49,6 +50,11 @@ export const useFormikErrorList = <T>(
 
     // Submit form
     formik.handleSubmit();
+
+    // Call onAfterSubmit callback if validation passed
+    if (options?.onAfterSubmit) {
+      await options.onAfterSubmit();
+    }
   };
 
   const close = () => {

src/types/api/marketing/marketing.d.ts

@@ -82,6 +82,15 @@ export type MarketingDeliveryProducts = {
 
 export type Marketing = BaseMetadata & BaseMarketing;
 
+/**
+ * Filter Data Types
+ */
+export type MarketingFilter = {
+  product_ids: number[];
+  status: string;
+  customer_id: number;
+};
+
 /**
  * Base Data Payload
  */

src/types/api/purchase/purchase.d.ts

@@ -1,10 +1,15 @@
-import { BaseApproval, BaseMetadata } from '@/types/api/api-general';
+import {
+  BaseApproval,
+  BaseMetadata,
+  CreatedUser,
+} from '@/types/api/api-general';
 import { Supplier } from '@/types/api/master-data/supplier';
 import { Warehouse } from '@/types/api/master-data/warehouse';
 import { Product } from '@/types/api/master-data/product';
 import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
 import { Area } from '@/types/api/master-data/area';
 import { Location } from '@/types/api/master-data/location';
+import { Uom } from '@/types/api/master-data/uom';
 
 export type PurchaseItemProduct = {
   id: number;
@@ -12,14 +17,15 @@ export type PurchaseItemProduct = {
   flags?: string[];
   ProductPrice?: number;
   SellingPrice?: number;
-  uom?: {
-    name: string;
-  };
+  uom: Uom;
   product_category?:
     | {
+        id: number;
         name: string;
+        code: string;
       }
     | string;
+  suppliers?: Supplier[];
 };
 
 export type PurchaseItem = {
@@ -69,6 +75,10 @@ export type BasePurchase = {
   warehouse?: Warehouse;
   items?: PurchaseItem[];
   latest_approval?: BaseApproval;
+  requester_name?: string;
+  po_expedition?: string[];
+  created_user?: CreatedUser;
+  products?: PurchaseItemProduct[];
 };
 
 export type Purchase = BaseMetadata & BasePurchase;