diff --git a/package-lock.json b/package-lock.json
index 38844543..61da9724 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "cmdk": "^1.1.1",
         "embla-carousel-react": "^8.6.0",
         "formik": "^2.4.6",
+        "html-to-image": "^1.11.13",
         "input-otp": "^1.4.2",
         "jspdf": "^3.0.4",
         "jspdf-autotable": "^5.0.2",
@@ -7380,6 +7381,12 @@
       "integrity": "sha512-LgOWAkrN0rFaQpfdWBQlv/VhkOxb5AsBjk6NQVx4yEzWS923T07X0M1Y0VNko2H52HeSpZrZNNMJ0aFqsdVzQg==",
       "license": "ISC"
     },
+    "node_modules/html-to-image": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/html-to-image/-/html-to-image-1.11.13.tgz",
+      "integrity": "sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg==",
+      "license": "MIT"
+    },
     "node_modules/html2canvas": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
diff --git a/package.json b/package.json
index 3a775db2..981413b3 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "cmdk": "^1.1.1",
     "embla-carousel-react": "^8.6.0",
     "formik": "^2.4.6",
+    "html-to-image": "^1.11.13",
     "input-otp": "^1.4.2",
     "jspdf": "^3.0.4",
     "jspdf-autotable": "^5.0.2",
diff --git a/src/app/expense/detail/edit/page.tsx b/src/app/expense/detail/edit/page.tsx
index e254f01d..2fb33484 100644
--- a/src/app/expense/detail/edit/page.tsx
+++ b/src/app/expense/detail/edit/page.tsx
@@ -38,9 +38,11 @@ const ExpenseEditPage = () => {
     !isLoadingExpense &&
     isResponseSuccess(expense) &&
     expense.data.latest_approval.step_number !== 5 &&
+    expense.data.latest_approval.step_number !== 6 &&
     (expense.data.latest_approval.step_number === 1 ||
       expense.data.latest_approval.step_number === 2 ||
-      expense.data.latest_approval.step_number === 3);
+      expense.data.latest_approval.step_number === 3 ||
+      expense.data.latest_approval.step_number === 4);
 
   if (!isLoadingExpense && !isExpenseCanBeEdited) {
     router.back();
diff --git a/src/app/finance/detail/page.tsx b/src/app/finance/detail/page.tsx
index 1d20e9f5..b80e8acb 100644
--- a/src/app/finance/detail/page.tsx
+++ b/src/app/finance/detail/page.tsx
@@ -24,8 +24,6 @@ const FinanceDetailPage = () => {
     );
   }
 
-  console.log(finance);
-
   // if (!finance || isResponseError(finance)) {
   //   router.replace('/404');
   //   return;
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index ff4c35f2..e04fa4c7 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -148,7 +148,11 @@ const Card = ({
     const hasContent = children || actions || footer;
 
     const titleContent = (
-      <div className='group flex items-center !justify-between w-full'>
+      <div
+        className={
+          `group flex items-center justify-between! w-full` + getTitleClasses()
+        }
+      >
         <div className='flex-1'>
           {title && <h2 className={getTitleClasses()}>{title}</h2>}
           {subtitle && <p className={getSubtitleClasses()}>{subtitle}</p>}
@@ -156,7 +160,7 @@ const Card = ({
         {collapsible && (
           <button
             onClick={() => handleCollapsedChange(!isCollapsed)}
-            className='btn btn-ghost btn-sm btn-circle'
+            className={`btn btn-ghost btn-sm btn-circle` + getTitleClasses()}
             aria-label={isCollapsed ? 'Expand content' : 'Collapse content'}
           >
             <Icon
diff --git a/src/components/helper/ButtonFilter.tsx b/src/components/helper/ButtonFilter.tsx
new file mode 100644
index 00000000..90343fed
--- /dev/null
+++ b/src/components/helper/ButtonFilter.tsx
@@ -0,0 +1,42 @@
+import Button, { ButtonProps } from '@/components/Button';
+import { getFilledFormikValuesCount } from '@/lib/formik-helper';
+import { cn } from '@/lib/helper';
+import { Icon } from '@iconify/react';
+import { FormikValues } from 'formik';
+
+export type ButtonFilterProps = ButtonProps & {
+  values: FormikValues;
+  onClick: () => void;
+};
+
+const ButtonFilter = ({ values, onClick, ...props }: ButtonFilterProps) => {
+  return (
+    <Button
+      {...props}
+      onClick={onClick}
+      className={cn(
+        getFilledFormikValuesCount(values) > 0
+          ? 'bg-gradient-to-t from-blue-50 to-blue-100 border-blue-500 text-blue-600 hover:from-blue-100 hover:to-blue-200'
+          : '',
+        props.className
+      )}
+    >
+      <Icon
+        icon='heroicons:funnel'
+        width={20}
+        height={20}
+        className={
+          getFilledFormikValuesCount(values) > 0 ? 'text-blue-600' : ''
+        }
+      />
+      Filter
+      {getFilledFormikValuesCount(values) > 0 && (
+        <span className='w-6 h-6 text-white bg-red-500 rounded-lg flex items-center justify-center text-xs'>
+          {getFilledFormikValuesCount(values)}
+        </span>
+      )}
+    </Button>
+  );
+};
+
+export default ButtonFilter;
diff --git a/src/components/helper/form/FormErrors.tsx b/src/components/helper/form/FormErrors.tsx
index 4b97d033..1fd7b58f 100644
--- a/src/components/helper/form/FormErrors.tsx
+++ b/src/components/helper/form/FormErrors.tsx
@@ -18,7 +18,7 @@ const AlertErrorList = ({
   if (formErrorList.length === 0) return null;
 
   return (
-    <Alert color='error' className='w-full flex flex-col gap-2 px-4 m-4'>
+    <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} />
diff --git a/src/components/input/DateInput.tsx b/src/components/input/DateInput.tsx
index 2d55fe6d..a424d723 100644
--- a/src/components/input/DateInput.tsx
+++ b/src/components/input/DateInput.tsx
@@ -113,7 +113,15 @@ const DateInput = ({
   };
 
   const handleSelectSingle = (selectedDate?: Date) => {
-    if (!selectedDate) return;
+    if (!selectedDate) {
+      setSelected(undefined);
+      setDisplayValue('');
+      const syntheticEvent = {
+        target: { name, value: '' },
+      } as unknown as React.ChangeEvent<HTMLInputElement>;
+      onChange?.(syntheticEvent);
+      return;
+    }
     if (minDate && selectedDate < minDate) {
       setInternalError(`Tanggal tidak boleh sebelum ${min}`);
       return;
@@ -136,7 +144,15 @@ const DateInput = ({
   };
 
   const handleSelectRange = (range?: { from?: Date; to?: Date }) => {
-    if (!range) return;
+    if (!range) {
+      setSelectedRange({});
+      setDisplayValue('');
+      const syntheticEvent = {
+        target: { name, value: { from: '', to: '' } },
+      } as unknown as React.ChangeEvent<HTMLInputElement>;
+      onChange?.(syntheticEvent);
+      return;
+    }
     setSelectedRange(range);
 
     const fromStr = range.from ? formatDate(range.from, 'DD/MM/YYYY') : '';
diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
index d35e7589..9cc9fda5 100644
--- a/src/components/input/SelectInput.tsx
+++ b/src/components/input/SelectInput.tsx
@@ -9,15 +9,20 @@ import Select, {
   SingleValue,
   components as ReactSelectComponents,
   ControlProps,
+  MenuListProps,
 } from 'react-select';
 import CreatableSelect from 'react-select/creatable';
 import makeAnimated from 'react-select/animated';
 import { useDebounce } from 'use-debounce';
 import { cn, getByPath } from '@/lib/helper';
-import useSWR from 'swr';
+import useSWRInfinite from 'swr/infinite';
 import { httpClientFetcher } from '@/services/http/client';
-import { BaseApiResponse } from '@/types/api/api-general';
-import { isResponseSuccess } from '@/lib/api-helper';
+import {
+  BaseApiResponse,
+  ErrorApiResponse,
+  SuccessApiResponse,
+} from '@/types/api/api-general';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 
 export interface OptionType {
   value: string | number;
@@ -35,6 +40,7 @@ interface SelectInputBaseProps<T = OptionType> {
   bottomLabel?: ReactNode;
   options: T[];
   optionComponent?: OptionComponent<T>;
+  components?: Partial<typeof ReactSelectComponents>;
   isDisabled?: boolean;
   isLoading?: boolean;
   isClearable?: boolean;
@@ -56,9 +62,13 @@ interface SelectInputBaseProps<T = OptionType> {
   onInputChange?: (search: string) => void;
   startAdornment?: ReactNode;
   menuPortalTarget?: HTMLElement | null;
+  closeMenuOnSelect?: boolean;
+  hideSelectedOptions?: boolean;
+  onMenuScrollToBottom?: ((event: WheelEvent | TouchEvent) => void) | undefined;
 }
 
-interface SelectInputProps<T = OptionType> extends SelectInputBaseProps<T> {
+export interface SelectInputProps<T = OptionType>
+  extends SelectInputBaseProps<T> {
   createables?: boolean;
   value?: T | T[] | null;
   onChange?: (val: T | T[] | null) => void;
@@ -93,6 +103,29 @@ const CustomControl = <
   );
 };
 
+const CustomMenuList = <
+  Option,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>,
+>(
+  props: MenuListProps<Option, IsMulti, Group>
+) => {
+  const { children, selectProps, options } = props;
+  const { isLoading } = selectProps;
+
+  return (
+    <ReactSelectComponents.MenuList {...props}>
+      {children}
+
+      {options.length > 0 && isLoading && (
+        <div className='mt-1 px-3 py-2 rounded-md text-center text-gray-400'>
+          <span className='loading loading-spinner loading-md' />
+        </div>
+      )}
+    </ReactSelectComponents.MenuList>
+  );
+};
+
 const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
   const {
     label,
@@ -101,6 +134,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
     onChange,
     options,
     optionComponent,
+    components: customComponents,
     isDisabled,
     isLoading,
     isClearable,
@@ -119,6 +153,9 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
     onInputChange,
     startAdornment,
     menuPortalTarget,
+    closeMenuOnSelect,
+    hideSelectedOptions,
+    onMenuScrollToBottom,
   } = props;
 
   const [internalInputValue, setInternalInputValue] = useState('');
@@ -128,14 +165,18 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
 
   const components = useMemo(() => {
     const base = isAnimated ? animatedComponents : {};
-    const customComponents = { ...base, IndicatorSeparator: () => null };
+    const mergedComponents = { ...base, IndicatorSeparator: () => null };
 
     if (startAdornment) {
-      customComponents.Control = CustomControl;
+      mergedComponents.Control = CustomControl;
     }
 
-    return customComponents;
-  }, [isAnimated, startAdornment]);
+    if (customComponents) {
+      Object.assign(mergedComponents, customComponents);
+    }
+
+    return mergedComponents;
+  }, [isAnimated, startAdornment, customComponents]);
 
   const internalInputChangeHandler = (val: string, meta: InputActionMeta) => {
     if (meta.action === 'input-change') setInternalInputValue(val);
@@ -205,6 +246,8 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         isRtl={isRtl}
         isSearchable={isSearchable}
         placeholder={placeholder}
+        closeMenuOnSelect={closeMenuOnSelect}
+        hideSelectedOptions={hideSelectedOptions}
         className={cn('w-full', className?.select)}
         classNames={{
           ...(!startAdornment && {
@@ -256,6 +299,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         components={{
           ...components,
           ...(optionComponent ? { Option: optionComponent } : {}),
+          MenuList: CustomMenuList,
         }}
         {...(startAdornment && {
           shouldShowAdornment,
@@ -269,6 +313,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
         styles={{
           menuPortal: (base) => ({ ...base, zIndex: 9999 }),
         }}
+        onMenuScrollToBottom={onMenuScrollToBottom}
       />
 
       {isError && <p className='w-full text-sm text-error'>{errorMessage}</p>}
@@ -280,7 +325,7 @@ const SelectInput = <T extends OptionType>(props: SelectInputProps<T>) => {
 };
 
 const useSelect = <T,>(
-  basePath: string,
+  basePath: string | null,
   valueKey: keyof T | string,
   labelKey: keyof T | string,
   searchKey: string = 'search',
@@ -288,34 +333,96 @@ const useSelect = <T,>(
 ) => {
   const [inputValue, setInputValue] = useState('');
 
-  const optionsUrlParams = useMemo(() => {
-    return new URLSearchParams({
+  const pageKey = 'page';
+  const limitKey = 'limit';
+  const limit = params?.['limit'] ?? 10;
+
+  const getKey = (
+    pageIndex: number,
+    previousPageData?: BaseApiResponse<T[]>
+  ) => {
+    // stop when backend says no more pages
+    if (previousPageData && isResponseSuccess(previousPageData)) {
+      const meta = previousPageData.meta;
+      if (meta && meta.page >= meta.total_pages) return null;
+    }
+
+    const qs = new URLSearchParams({
+      ...(params ?? {}),
       [searchKey]: inputValue ?? '',
-      ...params,
+      [pageKey]: String(pageIndex + 1),
+      [limitKey]: String(limit),
     }).toString();
-  }, [inputValue, searchKey, params]);
 
-  const optionsUrl = `${basePath}?${optionsUrlParams}`;
+    return basePath ? `${basePath}?${qs}` : null;
+  };
 
-  const { data, isLoading } = useSWR(optionsUrl, async (url) => {
-    return await httpClientFetcher<BaseApiResponse<T[]>>(url);
-  });
+  const {
+    data: pages,
+    isLoading,
+    isValidating,
+    size,
+    setSize,
+  } = useSWRInfinite<BaseApiResponse<T[]>>(getKey, (url) =>
+    httpClientFetcher<BaseApiResponse<T[]>>(url)
+  );
 
-  const options = isResponseSuccess(data)
-    ? data.data.map((item) => {
-        return {
-          value: getByPath<T, number>(item, valueKey as string),
-          label: getByPath<T, string>(item, labelKey as string),
-        };
-      })
-    : [];
+  const options = useMemo(() => {
+    if (!pages) return [];
+
+    return pages.flatMap((page) =>
+      isResponseSuccess(page)
+        ? page.data.map((item) => ({
+            value: getByPath<T, number>(item, valueKey as string),
+            label: getByPath<T, string>(item, labelKey as string),
+          }))
+        : []
+    );
+  }, [pages, valueKey, labelKey]);
+
+  const lastPage = pages?.[pages.length - 1];
+  const hasMore =
+    !!lastPage &&
+    isResponseSuccess(lastPage) &&
+    !!lastPage.meta &&
+    lastPage.meta.page < lastPage.meta.total_pages;
+
+  const loadMore = () => {
+    if (!hasMore) return;
+    setSize(size + 1);
+  };
+
+  let formattedSuccessRawData: SuccessApiResponse<T[]> | undefined = undefined;
+  let formattedErrorRawData: ErrorApiResponse | undefined = undefined;
+
+  const latestPagesIndex = pages?.length ? pages.length - 1 : 0;
+
+  if (isResponseSuccess(pages?.[latestPagesIndex])) {
+    formattedSuccessRawData = {
+      ...pages?.[latestPagesIndex],
+      data:
+        pages?.flatMap((page) => (isResponseSuccess(page) ? page.data : [])) ??
+        [],
+    };
+  }
+
+  if (isResponseError(pages?.[latestPagesIndex])) {
+    formattedErrorRawData = pages?.[latestPagesIndex];
+  }
 
   return {
     inputValue,
     setInputValue,
+
     options,
-    isLoadingOptions: isLoading,
-    rawData: data,
+    rawData: isResponseSuccess(pages?.[latestPagesIndex])
+      ? formattedSuccessRawData
+      : formattedErrorRawData,
+
+    isLoadingOptions: isLoading || isValidating,
+    isLoadingMore: isValidating && size > 1,
+    hasMore,
+    loadMore,
   };
 };
 
diff --git a/src/components/input/SelectInputCheckbox.tsx b/src/components/input/SelectInputCheckbox.tsx
new file mode 100644
index 00000000..0827a70a
--- /dev/null
+++ b/src/components/input/SelectInputCheckbox.tsx
@@ -0,0 +1,82 @@
+'use client';
+
+import { useMemo } from 'react';
+import {
+  OptionProps,
+  GroupBase,
+  components as ReactSelectComponents,
+} from 'react-select';
+import SelectInput, { OptionType, SelectInputProps } from './SelectInput';
+import { cn } from '@/lib/helper';
+
+interface SelectInputCheckboxProps<T = OptionType>
+  extends Omit<
+    SelectInputProps<T>,
+    'closeMenuOnSelect' | 'hideSelectedOptions' | 'optionComponent'
+  > {
+  closeMenuOnSelect?: boolean;
+  hideSelectedOptions?: boolean;
+}
+
+const CheckboxOption = <
+  T extends OptionType,
+  IsMulti extends boolean,
+  Group extends GroupBase<T>,
+>(
+  props: OptionProps<T, IsMulti, Group>
+) => {
+  const { isSelected, label, innerRef, innerProps, className } = props;
+
+  return (
+    <div
+      ref={innerRef}
+      {...innerProps}
+      className={cn(
+        'flex items-center gap-2 px-3 py-2 cursor-pointer',
+        className
+      )}
+    >
+      <input
+        type='checkbox'
+        checked={isSelected}
+        onChange={() => null}
+        className='checkbox checkbox-sm checkbox-primary pointer-events-none'
+      />
+      <label className='cursor-pointer flex-1 select-none'>{label}</label>
+    </div>
+  );
+};
+
+const SelectInputCheckbox = <T extends OptionType>(
+  props: SelectInputCheckboxProps<T>
+) => {
+  const {
+    closeMenuOnSelect = false,
+    hideSelectedOptions = false,
+    isMulti = true,
+    className,
+    ...restProps
+  } = props;
+
+  const customComponents = useMemo(() => {
+    return {
+      Option: CheckboxOption as typeof ReactSelectComponents.Option,
+    };
+  }, []);
+
+  return (
+    <SelectInput<T>
+      {...restProps}
+      isMulti={isMulti}
+      closeMenuOnSelect={closeMenuOnSelect}
+      hideSelectedOptions={hideSelectedOptions}
+      className={{
+        ...className,
+        select: cn(className?.select, 'select-checkbox'),
+      }}
+      components={customComponents}
+    />
+  );
+};
+
+export default SelectInputCheckbox;
diff --git a/src/components/pages/closing/ClosingFinanceTable.tsx b/src/components/pages/closing/ClosingFinanceTable.tsx
index 8c39b3fb..6225f5e7 100644
--- a/src/components/pages/closing/ClosingFinanceTable.tsx
+++ b/src/components/pages/closing/ClosingFinanceTable.tsx
@@ -3,224 +3,82 @@ import Table, { TABLE_DEFAULT_STYLING } from '@/components/Table';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { formatCurrency, formatTitleCase } from '@/lib/helper';
 import { ClosingApi } from '@/services/api/closing';
-import {
-  DataSummarySubTotal,
-  HppPurchaseData,
-  ProfitLossDataAmount,
-} from '@/types/api/closing';
+import { HppItem, ProfitLossItem } from '@/types/api/closing';
+import { useSearchParams } from 'next/navigation';
+import { useMemo } from 'react';
 import useSWR from 'swr';
 
-type HppTableRow =
-  | (HppPurchaseData & {
-      group_name: string;
-      group_index: number;
-      isGroupHeader?: boolean;
-    })
-  | {
-      group_name: string;
-      group_index: number;
-      isGroupHeader: true;
-      type?: never;
-      budgeting?: never;
-      realization?: never;
-    }
-  | {
-      type: string;
-      group_name: string;
-      group_index: number;
-      isGroupHeader: false;
-      budgeting?: { rp_per_bird: number; rp_per_kg: number; amount: number };
-      realization?: { rp_per_bird: number; rp_per_kg: number; amount: number };
-    };
-
-type ProfitLossTableRow =
-  | (DataSummarySubTotal & {
-      type: string;
-      group_name: string;
-      group_index: number;
-      isGroupHeader?: boolean;
-    })
-  | {
-      group_name: string;
-      group_index: number;
-      isGroupHeader: true;
-      type?: never;
-      rp_per_bird?: never;
-      rp_per_kg?: never;
-      amount?: never;
-    };
-
 const ClosingFinanceTable = ({
   projectFlockId,
 }: {
   projectFlockId: number;
 }) => {
+  const searchParams = useSearchParams();
+  const kandangId = searchParams.get('kandangId');
+
   const { data: finance, isLoading } = useSWR(
-    `/closing/finance/${projectFlockId}`,
-    () => ClosingApi.getFinance(projectFlockId)
+    `/closing/finance/${projectFlockId}${kandangId ? `/${kandangId}` : ''}`,
+    () =>
+      ClosingApi.getFinance(
+        projectFlockId,
+        kandangId ? Number(kandangId) : undefined
+      )
   );
 
-  const staticHppRows: Array<{
-    group_name: string;
-    type: string;
-    group_index: number;
-  }> = [
-    {
-      group_name: 'HPP dan Pengeluaran',
-      type: 'Pembelian PAKAN',
-      group_index: 0,
-    },
-    {
-      group_name: 'HPP dan Pengeluaran',
-      type: 'Pembelian STARTER',
-      group_index: 0,
-    },
-    {
-      group_name: 'HPP dan Pengeluaran',
-      type: 'Pembelian DOC',
-      group_index: 0,
-    },
-    {
-      group_name: 'HPP dan Pengeluaran',
-      type: 'Pembelian PULLET',
-      group_index: 0,
-    },
-    {
-      group_name: 'HPP dan Pengeluaran',
-      type: 'Pembelian LAYER',
-      group_index: 0,
-    },
-    {
-      group_name: 'HPP dan Bahan Baku',
-      type: 'Pengeluaran Overhead',
-      group_index: 1,
-    },
-    {
-      group_name: 'HPP dan Bahan Baku',
-      type: 'Beban Ekspedisi',
-      group_index: 1,
-    },
-  ];
+  const hppTableData: HppItem[] = useMemo(() => {
+    if (isResponseSuccess(finance)) {
+      const customItems = {
+        label: 'HPP dan Pengeluaran',
+        code: 'custom_row',
+      } as HppItem;
+      const purchases = finance.data.hpp.items.filter(
+        (item) => item.category === 'purchase'
+      );
+      const totalBudgeting = {
+        label: 'HPP dan Bahan Baku',
+        code: 'custom_row',
+      } as HppItem;
+      const overheads = finance.data.hpp.items.filter(
+        (item) => item.category === 'overhead'
+      );
+      return [customItems, ...purchases, totalBudgeting, ...overheads];
+    }
+    return [];
+  }, [finance]);
 
-  const hppTableData: HppTableRow[] = [
-    {
-      group_name: 'HPP dan Pengeluaran',
-      group_index: 0,
-      isGroupHeader: true as const,
-    },
-    ...staticHppRows
-      .filter((row) => row.group_index === 0)
-      .map((staticRow) => {
-        const apiData = isResponseSuccess(finance)
-          ? finance.data.hpp_purchases.hpp
-              .find((g) => g.group_name === staticRow.group_name)
-              ?.data.find((d) => d.type === staticRow.type)
-          : null;
-
-        return {
-          group_name: staticRow.group_name,
-          group_index: staticRow.group_index,
-          type: staticRow.type,
-          budgeting: apiData?.budgeting || {
-            rp_per_bird: 0,
-            rp_per_kg: 0,
-            amount: 0,
-          },
-          realization: apiData?.realization || {
-            rp_per_bird: 0,
-            rp_per_kg: 0,
-            amount: 0,
-          },
-          isGroupHeader: false as const,
-        };
-      }),
-    {
-      group_name: 'HPP dan Bahan Baku',
-      group_index: 1,
-      isGroupHeader: true as const,
-    },
-    ...staticHppRows
-      .filter((row) => row.group_index === 1)
-      .map((staticRow) => {
-        const apiData = isResponseSuccess(finance)
-          ? finance.data.hpp_purchases.hpp
-              .find((g) => g.group_name === staticRow.group_name)
-              ?.data.find((d) => d.type === staticRow.type)
-          : null;
-
-        return {
-          group_name: staticRow.group_name,
-          group_index: staticRow.group_index,
-          type: staticRow.type,
-          budgeting: apiData?.budgeting || {
-            rp_per_bird: 0,
-            rp_per_kg: 0,
-            amount: 0,
-          },
-          realization: apiData?.realization || {
-            rp_per_bird: 0,
-            rp_per_kg: 0,
-            amount: 0,
-          },
-          isGroupHeader: false as const,
-        };
-      }),
-    {
-      group_name: 'HPP',
-      group_index: 2,
-      isGroupHeader: true as const,
-    },
-  ];
-
-  const profitLossTableData: ProfitLossTableRow[] = isResponseSuccess(finance)
-    ? [
-        // Pembelian group
-        ...finance.data.profit_loss.data.pembelian.map((item) => ({
-          label: 'Pembelian',
-          group_name: 'Pembelian',
-          group_index: 1,
-          type: item.type,
-          rp_per_bird: item.rp_per_bird,
-          rp_per_kg: item.rp_per_kg,
-          amount: item.amount,
-          isGroupHeader: false as const,
-        })),
-        {
-          label: finance.data.profit_loss.data.summary.gross_profit.label,
-          group_name: 'Penjualan',
-          group_index: 0,
-          isGroupHeader: true as const,
-          type: finance.data.profit_loss.data.summary.gross_profit.label,
-          rp_per_bird:
-            finance.data.profit_loss.data.summary.gross_profit.rp_per_bird,
-          rp_per_kg:
-            finance.data.profit_loss.data.summary.gross_profit.rp_per_kg,
-          amount: finance.data.profit_loss.data.summary.gross_profit.amount,
-        },
-        // Penjualan group
-        ...finance.data.profit_loss.data.penjualan.map((item) => ({
-          label: 'Penjualan',
-          group_name: 'Penjualan',
-          group_index: 0,
-          type: item.type,
-          rp_per_bird: item.rp_per_bird,
-          rp_per_kg: item.rp_per_kg,
-          amount: item.amount,
-          isGroupHeader: false as const,
-        })),
-        {
-          label: finance.data.profit_loss.data.summary.sub_total.label,
-          group_name: 'Pembelian',
-          group_index: 1,
-          isGroupHeader: true as const,
-          type: finance.data.profit_loss.data.summary.sub_total.label,
-          rp_per_bird:
-            finance.data.profit_loss.data.summary.sub_total.rp_per_bird,
-          rp_per_kg: finance.data.profit_loss.data.summary.sub_total.rp_per_kg,
-          amount: finance.data.profit_loss.data.summary.sub_total.amount,
-        },
-      ]
-    : [];
+  const profitLossTableData: ProfitLossItem[] = useMemo(() => {
+    if (isResponseSuccess(finance)) {
+      const incomes = finance.data.profit_loss.items.filter(
+        (item) => item.type === 'income'
+      );
+      const purchases = finance.data.profit_loss.items.filter(
+        (item) => item.type === 'purchase'
+      );
+      const overheads = finance.data.profit_loss.items.filter(
+        (item) => item.type === 'overhead'
+      );
+      const grossProfit = {
+        label: 'LABA RUGI BRUTO',
+        code: 'custom_row',
+        type: 'gross_profit',
+        rp_per_bird:
+          finance.data.profit_loss.summary.gross_profit.rp_per_bird ?? 0,
+        rp_per_kg: finance.data.profit_loss.summary.gross_profit.rp_per_kg ?? 0,
+        amount: finance.data.profit_loss.summary.gross_profit.amount ?? 0,
+      } as ProfitLossItem;
+      const subtotal = {
+        label: 'Subtotal',
+        code: 'custom_row',
+        type: 'subtotal',
+        rp_per_bird:
+          finance.data.profit_loss.summary.sub_total.rp_per_bird ?? 0,
+        rp_per_kg: finance.data.profit_loss.summary.sub_total.rp_per_kg ?? 0,
+        amount: finance.data.profit_loss.summary.sub_total.amount ?? 0,
+      } as ProfitLossItem;
+      return [...incomes, ...purchases, grossProfit, ...overheads, subtotal];
+    }
+    return [];
+  }, [finance]);
 
   return (
     <div className='flex flex-col gap-4'>
@@ -233,35 +91,21 @@ const ClosingFinanceTable = ({
         >
           <div className='grid grid-cols-2 gap-6'>
             <div className='flex flex-col gap-1'>
-              <div>
-                {isResponseSuccess(finance)
-                  ? formatTitleCase(
-                      finance.data.profit_loss.data.summary.gross_profit
-                        .label || '-'
-                    )
-                  : 'Laba Rugi Brutto'}
-              </div>
+              <div>Laba Rugi Brutto</div>
               <div className='text-lg font-bold'>
                 {isResponseSuccess(finance)
                   ? formatCurrency(
-                      finance.data.profit_loss.data.summary.gross_profit.amount
+                      finance.data.profit_loss.summary.gross_profit.amount
                     )
                   : '-'}
               </div>
             </div>
             <div className='flex flex-col gap-1'>
-              <div>
-                {isResponseSuccess(finance)
-                  ? formatTitleCase(
-                      finance.data.profit_loss.data.summary.net_profit.label ||
-                        '-'
-                    )
-                  : 'Laba Rugi Netto'}
-              </div>
+              <div>Laba Rugi Netto</div>
               <div className='text-lg font-bold'>
                 {isResponseSuccess(finance)
                   ? formatCurrency(
-                      finance.data.profit_loss.data.summary.net_profit.amount
+                      finance.data.profit_loss.summary.net_profit.amount
                     )
                   : '-'}
               </div>
@@ -269,11 +113,7 @@ const ClosingFinanceTable = ({
           </div>
         </Card>
         <Card
-          title={
-            isResponseSuccess(finance)
-              ? finance.data.hpp_purchases.title
-              : 'HPP Purchases'
-          }
+          title='HPP Purchases'
           variant='bordered'
           collapsible
           className={{
@@ -281,17 +121,18 @@ const ClosingFinanceTable = ({
           }}
         >
           <div className='mt-6 p-0 mb-0'>
-            <Table<HppTableRow>
+            <Table<HppItem>
               data={hppTableData}
+              isLoading={isLoading}
               columns={[
                 {
                   header: 'No.',
                   enableSorting: false,
                   accessorFn: (item, index) => {
-                    if (item.isGroupHeader) return '-';
+                    if (item.code === 'custom_row') return '-';
                     const dataRowsBefore = hppTableData
                       .slice(0, index)
-                      .filter((row) => !row.isGroupHeader).length;
+                      .filter((row) => row.code !== 'custom_row').length;
                     return dataRowsBefore + 1;
                   },
                   footer: (props) => {
@@ -299,9 +140,9 @@ const ClosingFinanceTable = ({
                   },
                 },
                 {
-                  header: 'Type',
+                  header: 'Jenis',
                   enableSorting: false,
-                  accessorFn: (item) => formatTitleCase(item.type || '-'),
+                  accessorFn: (item) => formatTitleCase(item.label || '-'),
                 },
                 {
                   header: 'Budgeting',
@@ -317,7 +158,7 @@ const ClosingFinanceTable = ({
                         return props.column.id === 'budgeting_rp_per_bird' &&
                           isResponseSuccess(finance)
                           ? formatCurrency(
-                              finance.data.hpp_purchases.summary_hpp?.budgeting
+                              finance.data.hpp.summary?.budgeting
                                 ?.rp_per_bird || 0
                             )
                           : '-';
@@ -333,8 +174,8 @@ const ClosingFinanceTable = ({
                         return props.column.id === 'budgeting_rp_per_kg' &&
                           isResponseSuccess(finance)
                           ? formatCurrency(
-                              finance.data.hpp_purchases.summary_hpp?.budgeting
-                                ?.rp_per_kg || 0
+                              finance.data.hpp.summary?.budgeting?.rp_per_kg ||
+                                0
                             )
                           : '-';
                       },
@@ -349,8 +190,7 @@ const ClosingFinanceTable = ({
                         return props.column.id === 'budgeting_amount' &&
                           isResponseSuccess(finance)
                           ? formatCurrency(
-                              finance.data.hpp_purchases.summary_hpp?.budgeting
-                                ?.amount || 0
+                              finance.data.hpp.summary?.budgeting?.amount || 0
                             )
                           : '-';
                       },
@@ -371,8 +211,8 @@ const ClosingFinanceTable = ({
                         return props.column.id === 'realization_rp_per_bird' &&
                           isResponseSuccess(finance)
                           ? formatCurrency(
-                              finance.data.hpp_purchases.summary_hpp
-                                ?.realization?.rp_per_bird || 0
+                              finance.data.hpp.summary?.realization
+                                ?.rp_per_bird || 0
                             )
                           : '-';
                       },
@@ -387,8 +227,8 @@ const ClosingFinanceTable = ({
                         return props.column.id === 'realization_rp_per_kg' &&
                           isResponseSuccess(finance)
                           ? formatCurrency(
-                              finance.data.hpp_purchases.summary_hpp
-                                ?.realization?.rp_per_kg || 0
+                              finance.data.hpp.summary?.realization
+                                ?.rp_per_kg || 0
                             )
                           : '-';
                       },
@@ -403,8 +243,7 @@ const ClosingFinanceTable = ({
                         return props.column.id === 'realization_amount' &&
                           isResponseSuccess(finance)
                           ? formatCurrency(
-                              finance.data.hpp_purchases.summary_hpp
-                                ?.realization?.amount || 0
+                              finance.data.hpp.summary?.realization?.amount || 0
                             )
                           : '-';
                       },
@@ -414,7 +253,7 @@ const ClosingFinanceTable = ({
               ]}
               renderCustomRow={(row) => {
                 const rowData = row.original;
-                if (rowData.isGroupHeader) {
+                if (rowData.code === 'custom_row') {
                   return (
                     <tr
                       key={row.id}
@@ -428,7 +267,7 @@ const ClosingFinanceTable = ({
                         className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
                       >
                         <div className='font-bold'>
-                          {formatTitleCase(rowData.group_name ?? '-')}
+                          {formatTitleCase(rowData.label ?? '-')}
                         </div>
                       </td>
                     </tr>
@@ -441,11 +280,7 @@ const ClosingFinanceTable = ({
           </div>
         </Card>
         <Card
-          title={
-            isResponseSuccess(finance)
-              ? finance.data.profit_loss.title
-              : 'Profit/Loss'
-          }
+          title='Profit/Loss'
           variant='bordered'
           collapsible
           className={{
@@ -453,38 +288,32 @@ const ClosingFinanceTable = ({
           }}
         >
           <div className='mt-6 p-0 mb-0'>
-            <Table<ProfitLossTableRow>
+            <Table<ProfitLossItem>
               data={profitLossTableData}
+              isLoading={isLoading}
               columns={[
                 {
                   header: 'Jenis',
                   enableSorting: false,
-                  accessorFn: (item) => item.type,
+                  accessorFn: (item) => item.label,
                   cell: (item) => (
                     <div className=''>
-                      {formatTitleCase(item.row.original.type || '-')}
+                      {formatTitleCase(item.row.original.label || '-')}
                     </div>
                   ),
-                  footer: (item) => (
-                    <div className='font-bold uppercase'>
-                      {isResponseSuccess(finance)
-                        ? formatTitleCase(
-                            finance.data.profit_loss.data.summary.net_profit
-                              .label || '-'
-                          )
-                        : '-'}
-                    </div>
+                  footer: () => (
+                    <div className='font-bold uppercase'>LABA RUGI NETTO</div>
                   ),
                 },
                 {
                   header: 'Rp/Ekor',
                   enableSorting: false,
                   accessorFn: (item) => formatCurrency(item.rp_per_bird || 0),
-                  footer: (item) => (
+                  footer: () => (
                     <div className='font-bold'>
                       {isResponseSuccess(finance)
                         ? formatCurrency(
-                            finance.data.profit_loss.data.summary.net_profit
+                            finance.data.profit_loss.summary.net_profit
                               .rp_per_bird || 0
                           )
                         : formatCurrency(0)}
@@ -495,11 +324,11 @@ const ClosingFinanceTable = ({
                   header: 'Rp/Kg',
                   enableSorting: false,
                   accessorFn: (item) => formatCurrency(item.rp_per_kg || 0),
-                  footer: (item) => (
+                  footer: () => (
                     <div className='font-bold'>
                       {isResponseSuccess(finance)
                         ? formatCurrency(
-                            finance.data.profit_loss.data.summary.net_profit
+                            finance.data.profit_loss.summary.net_profit
                               .rp_per_kg || 0
                           )
                         : formatCurrency(0)}
@@ -510,11 +339,11 @@ const ClosingFinanceTable = ({
                   header: 'Jumlah (Rp)',
                   enableSorting: false,
                   accessorFn: (item) => formatCurrency(item.amount || 0),
-                  footer: (item) => (
+                  footer: () => (
                     <div className='font-bold'>
                       {isResponseSuccess(finance)
                         ? formatCurrency(
-                            finance.data.profit_loss.data.summary.net_profit
+                            finance.data.profit_loss.summary.net_profit
                               .amount || 0
                           )
                         : formatCurrency(0)}
@@ -524,55 +353,30 @@ const ClosingFinanceTable = ({
               ]}
               renderCustomRow={(row) => {
                 const rowData = row.original;
-                if (rowData.isGroupHeader) {
-                  if (rowData.amount) {
-                    return (
-                      <tr
-                        key={row.id}
-                        className={TABLE_DEFAULT_STYLING.footerRowClassName}
-                      >
-                        <td
-                          className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
-                        >
-                          <div className='font-bold ps-6 uppercase'>
-                            {formatTitleCase(rowData.label ?? '-')}
-                          </div>
-                        </td>
-                        <td
-                          className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
-                        >
-                          <div className='font-bold'>
-                            {formatCurrency(rowData.rp_per_bird ?? 0)}
-                          </div>
-                        </td>
-                        <td
-                          className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
-                        >
-                          <div className='font-bold'>
-                            {formatCurrency(rowData.rp_per_kg ?? 0)}
-                          </div>
-                        </td>
-                        <td
-                          className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
-                        >
-                          <div className='font-bold'>
-                            {formatCurrency(rowData.amount ?? 0)}
-                          </div>
-                        </td>
-                      </tr>
-                    );
-                  }
+                if (rowData.code === 'custom_row') {
                   return (
                     <tr
                       key={row.id}
-                      className={TABLE_DEFAULT_STYLING.bodyRowClassName}
+                      className={TABLE_DEFAULT_STYLING.footerRowClassName}
                     >
-                      <td
-                        colSpan={4}
-                        className={TABLE_DEFAULT_STYLING.bodyColumnClassName}
-                      >
+                      <td className={TABLE_DEFAULT_STYLING.bodyColumnClassName}>
+                        <div className='font-bold ps-6 uppercase'>
+                          {formatTitleCase(rowData.label ?? '-')}
+                        </div>
+                      </td>
+                      <td className={TABLE_DEFAULT_STYLING.bodyColumnClassName}>
                         <div className='font-bold'>
-                          {formatTitleCase(rowData.group_name ?? '-')}
+                          {formatCurrency(rowData.rp_per_bird ?? 0)}
+                        </div>
+                      </td>
+                      <td className={TABLE_DEFAULT_STYLING.bodyColumnClassName}>
+                        <div className='font-bold'>
+                          {formatCurrency(rowData.rp_per_kg ?? 0)}
+                        </div>
+                      </td>
+                      <td className={TABLE_DEFAULT_STYLING.bodyColumnClassName}>
+                        <div className='font-bold'>
+                          {formatCurrency(rowData.amount ?? 0)}
                         </div>
                       </td>
                     </tr>
diff --git a/src/components/pages/closing/ClosingIncomingSapronaksSummaryTable.tsx b/src/components/pages/closing/ClosingIncomingSapronaksSummaryTable.tsx
new file mode 100644
index 00000000..49e4f108
--- /dev/null
+++ b/src/components/pages/closing/ClosingIncomingSapronaksSummaryTable.tsx
@@ -0,0 +1,174 @@
+'use client';
+
+import { ChangeEventHandler, useEffect, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+import { ColumnDef, SortingState } from '@tanstack/react-table';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import Card from '@/components/Card';
+import Collapse from '@/components/Collapse';
+
+import { cn, formatNumber } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { ClosingApi } from '@/services/api/closing';
+import { ClosingIncomingSapronakSummary } from '@/types/api/closing';
+
+interface ClosingIncomingSapronaksSummaryTableProps {
+  projectFlockId: number;
+}
+
+const ClosingIncomingSapronaksSummaryTable = ({
+  projectFlockId,
+}: ClosingIncomingSapronaksSummaryTableProps) => {
+  const searchParams = useSearchParams();
+  const kandangId = searchParams.get('kandangId');
+
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      nameSort: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      nameSort: 'sort_name',
+    },
+  });
+
+  const {
+    data: incomingSapronakSummaries,
+    isLoading: isLoadingIncomingSapronakSummaries,
+  } = useSWR(
+    `${ClosingApi.basePath}/${projectFlockId}/sapronak/summary${getTableFilterQueryString()}&type=incoming&kandang_id=${kandangId ? `${kandangId}` : ''}`,
+    ClosingApi.getAllIncomingSapronakSummaryFetcher,
+    {
+      keepPreviousData: true,
+    }
+  );
+
+  const [open, setOpen] = useState(true);
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+
+  const incomingSapronaksColumns: ColumnDef<ClosingIncomingSapronakSummary>[] =
+    [
+      {
+        header: '#',
+        cell: (props) => props.row.index + 1,
+      },
+      {
+        accessorKey: 'category',
+        header: 'Kategori',
+      },
+      {
+        accessorKey: 'total_qty',
+        header: 'Total Kuantitas',
+        cell: (props) =>
+          `${formatNumber(props.row.original.total_qty)} ${props.row.original.uom.name}`,
+      },
+    ];
+
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
+  // track sorting
+  useEffect(() => {
+    const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
+
+    if (!isNameSorted) {
+      updateFilter('nameSort', '');
+    } else {
+      updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
+    }
+  }, [sorting, updateFilter]);
+
+  useEffect(() => {
+    if (!open) {
+      setOpen(
+        isResponseSuccess(incomingSapronakSummaries)
+          ? incomingSapronakSummaries.data.length > 0
+          : false
+      );
+    }
+  }, [incomingSapronakSummaries, isResponseSuccess]);
+
+  return (
+    <Card
+      className={{
+        wrapper: 'w-full',
+        body: 'p-4 shadow',
+      }}
+    >
+      <Collapse
+        open={open}
+        onOpenChange={setOpen}
+        title={
+          <div className='card-actions p-4 justify-between items-center w-full'>
+            <div className='card-title'>Ringkasan Sapronak Masuk</div>
+
+            <Icon
+              icon='material-symbols:keyboard-arrow-down'
+              width={24}
+              height={24}
+              className={cn('text-primary transition-transform', {
+                '-rotate-180': open,
+              })}
+            />
+          </div>
+        }
+        className='w-full!'
+        titleClassName='w-full p-0!'
+      >
+        <div className='w-full p-0'>
+          <Table<ClosingIncomingSapronakSummary>
+            data={
+              isResponseSuccess(incomingSapronakSummaries)
+                ? incomingSapronakSummaries?.data
+                : []
+            }
+            columns={incomingSapronaksColumns}
+            pageSize={tableFilterState.pageSize}
+            onPageSizeChange={setPageSize}
+            rowOptions={[10, 20, 50, 100]}
+            page={
+              isResponseSuccess(incomingSapronakSummaries)
+                ? incomingSapronakSummaries?.meta?.page
+                : 0
+            }
+            totalItems={
+              isResponseSuccess(incomingSapronakSummaries)
+                ? incomingSapronakSummaries?.meta?.total_results
+                : 0
+            }
+            onPageChange={setPage}
+            isLoading={isLoadingIncomingSapronakSummaries}
+            sorting={sorting}
+            setSorting={setSorting}
+            rowSelection={rowSelection}
+            setRowSelection={setRowSelection}
+            className={{
+              containerClassName: cn({
+                'w-full mb-20':
+                  isResponseSuccess(incomingSapronakSummaries) &&
+                  incomingSapronakSummaries?.data?.length === 0,
+              }),
+            }}
+          />
+        </div>
+      </Collapse>
+    </Card>
+  );
+};
+
+export default ClosingIncomingSapronaksSummaryTable;
diff --git a/src/components/pages/closing/ClosingIncomingSapronaksTable.tsx b/src/components/pages/closing/ClosingIncomingSapronaksTable.tsx
index 53e45710..eda7e756 100644
--- a/src/components/pages/closing/ClosingIncomingSapronaksTable.tsx
+++ b/src/components/pages/closing/ClosingIncomingSapronaksTable.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { ChangeEventHandler, useEffect, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 import { ColumnDef, SortingState } from '@tanstack/react-table';
 
@@ -23,6 +24,9 @@ interface ClosingIncomingSapronaksTableProps {
 const ClosingIncomingSapronaksTable = ({
   projectFlockId,
 }: ClosingIncomingSapronaksTableProps) => {
+  const searchParams = useSearchParams();
+  const kandangId = searchParams.get('kandangId');
+
   const {
     state: tableFilterState,
     updateFilter,
@@ -43,7 +47,7 @@ const ClosingIncomingSapronaksTable = ({
 
   const { data: incomingSapronaks, isLoading: isLoadingIncomingSapronaks } =
     useSWR(
-      `${ClosingApi.basePath}/${projectFlockId}/sapronak${getTableFilterQueryString()}&type=incoming`,
+      `${ClosingApi.basePath}/${projectFlockId}/sapronak${getTableFilterQueryString()}&type=incoming&kandang_id=${kandangId ? `${kandangId}` : ''}`,
       ClosingApi.getAllIncomingSapronakFetcher,
       {
         keepPreviousData: true,
diff --git a/src/components/pages/closing/ClosingOutgoingSapronaksSummaryTable.tsx b/src/components/pages/closing/ClosingOutgoingSapronaksSummaryTable.tsx
new file mode 100644
index 00000000..42fcb588
--- /dev/null
+++ b/src/components/pages/closing/ClosingOutgoingSapronaksSummaryTable.tsx
@@ -0,0 +1,174 @@
+'use client';
+
+import { ChangeEventHandler, useEffect, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+import { ColumnDef, SortingState } from '@tanstack/react-table';
+
+import { Icon } from '@iconify/react';
+import Table from '@/components/Table';
+import Card from '@/components/Card';
+import Collapse from '@/components/Collapse';
+
+import { cn, formatNumber } from '@/lib/helper';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { ClosingApi } from '@/services/api/closing';
+import { ClosingOutgoingSapronakSummary } from '@/types/api/closing';
+
+interface ClosingOutgoingSapronaksSummaryTableProps {
+  projectFlockId: number;
+}
+
+const ClosingOutgoingSapronaksSummaryTable = ({
+  projectFlockId,
+}: ClosingOutgoingSapronaksSummaryTableProps) => {
+  const searchParams = useSearchParams();
+  const kandangId = searchParams.get('kandangId');
+
+  const {
+    state: tableFilterState,
+    updateFilter,
+    setPage,
+    setPageSize,
+    toQueryString: getTableFilterQueryString,
+  } = useTableFilter({
+    initial: {
+      search: '',
+      nameSort: '',
+    },
+    paramMap: {
+      page: 'page',
+      pageSize: 'limit',
+      nameSort: 'sort_name',
+    },
+  });
+
+  const {
+    data: outgoingSapronakSummaries,
+    isLoading: isLoadingOutgoingSapronakSummaries,
+  } = useSWR(
+    `${ClosingApi.basePath}/${projectFlockId}/sapronak/summary${getTableFilterQueryString()}&type=outgoing&kandang_id=${kandangId ? `${kandangId}` : ''}`,
+    ClosingApi.getAllIncomingSapronakSummaryFetcher,
+    {
+      keepPreviousData: true,
+    }
+  );
+
+  const [open, setOpen] = useState(true);
+
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const [rowSelection, setRowSelection] = useState<Record<string, boolean>>({});
+
+  const outgoingSapronaksColumns: ColumnDef<ClosingOutgoingSapronakSummary>[] =
+    [
+      {
+        header: '#',
+        cell: (props) => props.row.index + 1,
+      },
+      {
+        accessorKey: 'category',
+        header: 'Kategori',
+      },
+      {
+        accessorKey: 'total_qty',
+        header: 'Total Kuantitas',
+        cell: (props) =>
+          `${formatNumber(props.row.original.total_qty)} ${props.row.original.uom.name}`,
+      },
+    ];
+
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
+  // track sorting
+  useEffect(() => {
+    const isNameSorted = sorting.find((sortItem) => sortItem.id === 'name');
+
+    if (!isNameSorted) {
+      updateFilter('nameSort', '');
+    } else {
+      updateFilter('nameSort', isNameSorted.desc ? 'desc' : 'asc');
+    }
+  }, [sorting, updateFilter]);
+
+  useEffect(() => {
+    if (!open) {
+      setOpen(
+        isResponseSuccess(outgoingSapronakSummaries)
+          ? outgoingSapronakSummaries.data.length > 0
+          : false
+      );
+    }
+  }, [outgoingSapronakSummaries, isResponseSuccess]);
+
+  return (
+    <Card
+      className={{
+        wrapper: 'w-full',
+        body: 'p-4 shadow',
+      }}
+    >
+      <Collapse
+        open={open}
+        onOpenChange={setOpen}
+        title={
+          <div className='card-actions p-4 justify-between items-center w-full'>
+            <div className='card-title'>Ringkasan Sapronak Keluar</div>
+
+            <Icon
+              icon='material-symbols:keyboard-arrow-down'
+              width={24}
+              height={24}
+              className={cn('text-primary transition-transform', {
+                '-rotate-180': open,
+              })}
+            />
+          </div>
+        }
+        className='w-full!'
+        titleClassName='w-full p-0!'
+      >
+        <div className='w-full p-0'>
+          <Table<ClosingOutgoingSapronakSummary>
+            data={
+              isResponseSuccess(outgoingSapronakSummaries)
+                ? outgoingSapronakSummaries?.data
+                : []
+            }
+            columns={outgoingSapronaksColumns}
+            pageSize={tableFilterState.pageSize}
+            onPageSizeChange={setPageSize}
+            rowOptions={[10, 20, 50, 100]}
+            page={
+              isResponseSuccess(outgoingSapronakSummaries)
+                ? outgoingSapronakSummaries?.meta?.page
+                : 0
+            }
+            totalItems={
+              isResponseSuccess(outgoingSapronakSummaries)
+                ? outgoingSapronakSummaries?.meta?.total_results
+                : 0
+            }
+            onPageChange={setPage}
+            isLoading={isLoadingOutgoingSapronakSummaries}
+            sorting={sorting}
+            setSorting={setSorting}
+            rowSelection={rowSelection}
+            setRowSelection={setRowSelection}
+            className={{
+              containerClassName: cn({
+                'w-full mb-20':
+                  isResponseSuccess(outgoingSapronakSummaries) &&
+                  outgoingSapronakSummaries?.data?.length === 0,
+              }),
+            }}
+          />
+        </div>
+      </Collapse>
+    </Card>
+  );
+};
+
+export default ClosingOutgoingSapronaksSummaryTable;
diff --git a/src/components/pages/closing/ClosingOutgoingSapronaksTable.tsx b/src/components/pages/closing/ClosingOutgoingSapronaksTable.tsx
index 5662cff1..ac918561 100644
--- a/src/components/pages/closing/ClosingOutgoingSapronaksTable.tsx
+++ b/src/components/pages/closing/ClosingOutgoingSapronaksTable.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { ChangeEventHandler, useEffect, useState } from 'react';
+import { useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 import { ColumnDef, SortingState } from '@tanstack/react-table';
 
@@ -23,6 +24,9 @@ interface ClosingOutgoingSapronaksTableProps {
 const ClosingOutgoingSapronaksTable = ({
   projectFlockId,
 }: ClosingOutgoingSapronaksTableProps) => {
+  const searchParams = useSearchParams();
+  const kandangId = searchParams.get('kandangId');
+
   const {
     state: tableFilterState,
     updateFilter,
@@ -43,7 +47,7 @@ const ClosingOutgoingSapronaksTable = ({
 
   const { data: outgoingSapronaks, isLoading: isLoadingOutgoingSapronaks } =
     useSWR(
-      `${ClosingApi.basePath}/${projectFlockId}/sapronak${getTableFilterQueryString()}&type=outgoing`,
+      `${ClosingApi.basePath}/${projectFlockId}/sapronak${getTableFilterQueryString()}&type=outgoing&kandang_id=${kandangId ? `${kandangId}` : ''}`,
       ClosingApi.getAllOutgoingSapronakFetcher,
       {
         keepPreviousData: true,
diff --git a/src/components/pages/closing/ClosingOverheadTable.tsx b/src/components/pages/closing/ClosingOverheadTable.tsx
index 3df0844d..9ef6694f 100644
--- a/src/components/pages/closing/ClosingOverheadTable.tsx
+++ b/src/components/pages/closing/ClosingOverheadTable.tsx
@@ -5,122 +5,187 @@ import { cn, formatCurrency, formatDate, formatNumber } from '@/lib/helper';
 import { ClosingApi } from '@/services/api/closing';
 import { Overhead, OverheadTotal } from '@/types/api/closing';
 import { ColumnDef } from '@tanstack/react-table';
+import { useSearchParams } from 'next/navigation';
 import { useMemo } from 'react';
 import useSWR from 'swr';
 
 interface ClosingOverheadTableProps {
-  type?: 'detail';
   projectFlockId: number;
 }
 
 const ClosingOverheadTable = ({
-  type,
   projectFlockId,
 }: ClosingOverheadTableProps) => {
+  const searchParams = useSearchParams();
+  const kandangId = searchParams.get('kandangId');
+
   const { data: overhead, isLoading: isLoadingOverhead } = useSWR(
-    `${ClosingApi.basePath}/${projectFlockId}/overhead`,
-    () => ClosingApi.getOverhead(projectFlockId),
+    `${ClosingApi.basePath}/${projectFlockId}${kandangId ? `/${kandangId}` : ''}/overhead`,
+    () =>
+      ClosingApi.getOverhead(
+        projectFlockId,
+        kandangId ? Number(kandangId) : undefined
+      ),
     {
       keepPreviousData: true,
     }
   );
 
   // Helper function to create columns with footer support
-  const createColumns = (total?: OverheadTotal): ColumnDef<Overhead>[] => [
-    // Group untuk kolom tanpa footer
-    {
-      header: 'Nama Item',
-      accessorFn: (props) => props.item_name,
-      footer: 'Total Pengeluaran Overhead',
-    },
-    {
-      header: 'Satuan',
-      accessorFn: (props) => props.uom_name,
-    },
-    {
-      header: 'Budget Pengajuan',
-      footer: '',
-      columns: [
-        {
-          id: 'budget_quantity',
-          header: 'Jumlah',
-          accessorFn: (props) =>
-            props.budget_quantity ? 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)
-              : '-',
-          footer: '',
-        },
-        {
-          id: 'budget_total_amount',
-          header: 'Total',
-          accessorFn: (props) =>
-            props.budget_total_amount
-              ? formatCurrency(props.budget_total_amount)
-              : '-',
-          footer: total ? () => formatCurrency(total.budget_total_amount) : '',
-        },
-      ],
-    },
-    {
-      header: 'Realisasi',
-      footer: '',
-      columns: [
-        {
-          id: 'actual_date',
-          header: 'Tanggal',
-          accessorFn: (props) =>
-            props.actual_date
-              ? 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) : '',
-        },
-        {
-          id: 'actual_unit_price',
-          header: 'Harga Satuan',
-          accessorFn: (props) =>
-            props.actual_unit_price
-              ? formatCurrency(props.actual_unit_price)
-              : '-',
-          footer: '',
-        },
-        {
-          id: 'actual_total_amount',
-          header: 'Total',
-          accessorFn: (props) =>
-            props.actual_total_amount
-              ? formatCurrency(props.actual_total_amount)
-              : '-',
-          footer: total ? () => formatCurrency(total.actual_total_amount) : '',
-        },
-      ],
-    },
-    {
-      id: 'cost_per_bird',
-      header: 'Rp/Ekor',
-      accessorFn: (props) =>
-        props.cost_per_bird ? formatCurrency(props.cost_per_bird) : '-',
-      footer: total ? () => formatCurrency(total.cost_per_bird) : '',
-    },
-  ];
+  const createColumns = (
+    total?: OverheadTotal,
+    kandangId?: number
+  ): ColumnDef<Overhead>[] => {
+    const flockColumn: ColumnDef<Overhead>[] = [
+      {
+        header: 'Budget Pengajuan',
+        footer: '',
+        columns: [
+          {
+            id: 'budget_quantity',
+            header: 'Jumlah',
+            accessorFn: (props) =>
+              props.budget_quantity ? 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)
+                : '-',
+            footer: '',
+          },
+          {
+            id: 'budget_total_amount',
+            header: 'Total',
+            accessorFn: (props) =>
+              props.budget_total_amount
+                ? formatCurrency(props.budget_total_amount)
+                : '-',
+            footer: total
+              ? () => formatCurrency(total.budget_total_amount)
+              : '',
+          },
+        ],
+      },
+      {
+        header: 'Realisasi',
+        footer: '',
+        columns: [
+          {
+            id: 'actual_date',
+            header: 'Tanggal',
+            accessorFn: (props) =>
+              props.actual_date
+                ? 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) : '',
+          },
+          {
+            id: 'actual_unit_price',
+            header: 'Harga Satuan',
+            accessorFn: (props) =>
+              props.actual_unit_price
+                ? formatCurrency(props.actual_unit_price)
+                : '-',
+            footer: '',
+          },
+          {
+            id: 'actual_total_amount',
+            header: 'Total',
+            accessorFn: (props) =>
+              props.actual_total_amount
+                ? formatCurrency(props.actual_total_amount)
+                : '-',
+            footer: total
+              ? () => formatCurrency(total.actual_total_amount)
+              : '',
+          },
+        ],
+      },
+    ];
+
+    const kandangColumn: ColumnDef<Overhead>[] = [
+      {
+        id: 'actual_date',
+        header: 'Tanggal',
+        accessorFn: (props) =>
+          props.actual_date
+            ? 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) : '',
+      },
+      {
+        id: 'actual_unit_price',
+        header: 'Harga Satuan',
+        accessorFn: (props) =>
+          props.actual_unit_price
+            ? formatCurrency(props.actual_unit_price)
+            : '-',
+        footer: '',
+      },
+      {
+        id: 'actual_total_amount',
+        header: 'Total',
+        accessorFn: (props) =>
+          props.actual_total_amount
+            ? formatCurrency(props.actual_total_amount)
+            : '-',
+        footer: total ? () => formatCurrency(total.actual_total_amount) : '',
+      },
+    ];
+
+    const finalColumns: ColumnDef<Overhead>[] = [
+      // Group untuk kolom tanpa footer
+      {
+        header: 'No',
+        accessorFn: (_, index) => index,
+        cell: (props) => props.row.index + 1,
+      },
+      {
+        header: 'Nama Item',
+        accessorFn: (props) => props.item_name,
+        footer: 'Total Pengeluaran Overhead',
+      },
+      {
+        header: 'Satuan',
+        accessorFn: (props) => props.uom_name,
+      },
+      ...(kandangId ? kandangColumn : flockColumn),
+      {
+        id: 'cost_per_bird',
+        header: 'Rp/Ekor',
+        accessorFn: (props) =>
+          props.cost_per_bird ? formatCurrency(props.cost_per_bird) : '-',
+        footer: total ? () => formatCurrency(total.cost_per_bird) : '',
+      },
+    ];
+    return finalColumns;
+  };
 
   const columns = useMemo(
     () =>
       isResponseSuccess(overhead)
-        ? createColumns(overhead.data?.total)
+        ? createColumns(
+            overhead.data?.total,
+            kandangId ? Number(kandangId) : undefined
+          )
         : createColumns(),
     [overhead]
   );
@@ -148,6 +213,7 @@ const ClosingOverheadTable = ({
               'whitespace-nowrap'
             ),
           }}
+          isLoading={isLoadingOverhead}
           renderFooter={
             isResponseSuccess(overhead)
               ? overhead.data?.overheads.length > 0
diff --git a/src/components/pages/closing/ClosingProductionDataTabContent.tsx b/src/components/pages/closing/ClosingProductionDataTabContent.tsx
index aabf48de..9295d283 100644
--- a/src/components/pages/closing/ClosingProductionDataTabContent.tsx
+++ b/src/components/pages/closing/ClosingProductionDataTabContent.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 import { ClosingApi } from '@/services/api/closing';
 import { isResponseSuccess } from '@/lib/api-helper';
@@ -12,9 +13,12 @@ interface ClosingProductionDataTabContentProps {
 const ClosingProductionDataTabContent = ({
   projectFlockId,
 }: ClosingProductionDataTabContentProps) => {
+  const searchParams = useSearchParams();
+  const kandangId = searchParams.get('kandangId');
+
   const { data: productionData, isLoading } = useSWR(
-    `${ClosingApi.basePath}/${projectFlockId}/production-data`,
-    () => ClosingApi.getProductionData(projectFlockId)
+    `${ClosingApi.basePath}/${projectFlockId}/production-data?kandang_id=${kandangId ? `${kandangId}` : ''}`,
+    () => ClosingApi.getProductionData(projectFlockId, Number(kandangId))
   );
 
   if (isLoading) {
@@ -197,7 +201,7 @@ const ClosingProductionDataTabContent = ({
                 value={formatNumber(performance.mor_diff)}
                 unitClassName='hidden'
               />
-              <DataRow
+              {/* <DataRow
                 label='AWG Std'
                 value={formatNumber(performance.awg_std)}
                 unit='Gr/Hari'
@@ -206,7 +210,7 @@ const ClosingProductionDataTabContent = ({
                 label='AWG Act'
                 value={formatNumber(performance.awg_act)}
                 unit='Gr/Hari'
-              />
+              /> */}
               <DataRow
                 label='Feed Intake Std'
                 value={formatNumber(performance.feed_intake_std)}
diff --git a/src/components/pages/closing/ClosingSapronakTabContent.tsx b/src/components/pages/closing/ClosingSapronakTabContent.tsx
index 41c7aa05..03c3c984 100644
--- a/src/components/pages/closing/ClosingSapronakTabContent.tsx
+++ b/src/components/pages/closing/ClosingSapronakTabContent.tsx
@@ -2,6 +2,8 @@
 
 import ClosingIncomingSapronaksTable from '@/components/pages/closing/ClosingIncomingSapronaksTable';
 import ClosingOutgoingSapronaksTable from '@/components/pages/closing/ClosingOutgoingSapronaksTable';
+import ClosingIncomingSapronaksSummaryTable from '@/components/pages/closing/ClosingIncomingSapronaksSummaryTable';
+import ClosingOutgoingSapronaksSummaryTable from './ClosingOutgoingSapronaksSummaryTable';
 
 interface ClosingSapronakTableProps {
   projectFlockId?: number;
@@ -16,7 +18,15 @@ const ClosingSapronakTabContent = ({
         <>
           <ClosingIncomingSapronaksTable projectFlockId={projectFlockId} />
 
+          <ClosingIncomingSapronaksSummaryTable
+            projectFlockId={projectFlockId}
+          />
+
           <ClosingOutgoingSapronaksTable projectFlockId={projectFlockId} />
+
+          <ClosingOutgoingSapronaksSummaryTable
+            projectFlockId={projectFlockId}
+          />
         </>
       )}
     </div>
diff --git a/src/components/pages/closing/ClosingsTable.tsx b/src/components/pages/closing/ClosingsTable.tsx
index 0cacb549..ec334104 100644
--- a/src/components/pages/closing/ClosingsTable.tsx
+++ b/src/components/pages/closing/ClosingsTable.tsx
@@ -163,6 +163,7 @@ const ClosingsTable = () => {
     setInputValue: setLocationInputValue,
     options: locationOptions,
     isLoadingOptions: isLoadingLocationOptions,
+    loadMore: loadMoreLocations,
   } = useSelect<Location>(LocationApi.basePath, 'id', 'name');
 
   const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
@@ -228,6 +229,7 @@ const ClosingsTable = () => {
                 value={selectedLocation}
                 onChange={locationChangeHandler}
                 onInputChange={setLocationInputValue}
+                onMenuScrollToBottom={loadMoreLocations}
                 isClearable
                 className={{
                   wrapper: 'col-span-12 sm:col-span-6',
diff --git a/src/components/pages/closing/sale/SalesReportTable.tsx b/src/components/pages/closing/sale/SalesReportTable.tsx
index fe8d46a5..6c12347e 100644
--- a/src/components/pages/closing/sale/SalesReportTable.tsx
+++ b/src/components/pages/closing/sale/SalesReportTable.tsx
@@ -82,12 +82,12 @@ const SalesReportTable = ({
           <div className='font-semibold text-gray-900'>Total Penjualan</div>
         ),
       },
-      {
-        id: 'age',
-        accessorKey: 'age',
-        header: 'Umur',
-        cell: (props) => props.getValue() || '-',
-      },
+      // {
+      //   id: 'age',
+      //   accessorKey: 'age',
+      //   header: 'Umur',
+      //   cell: (props) => props.getValue() || '-',
+      // },
       {
         id: 'do_number',
         accessorKey: 'do_number',
diff --git a/src/components/pages/dashboard/DashboardProduction.tsx b/src/components/pages/dashboard/DashboardProduction.tsx
index b65508cb..079b082c 100644
--- a/src/components/pages/dashboard/DashboardProduction.tsx
+++ b/src/components/pages/dashboard/DashboardProduction.tsx
@@ -8,19 +8,22 @@ import SelectInput, {
   OptionType,
   useSelect,
 } from '@/components/input/SelectInput';
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import useSWR from 'swr';
 import { DashboardApi } from '@/services/api/dashboard';
 import { useFormik } from 'formik';
 import { ProjectFlockApi } from '@/services/api/production';
 import { KandangApi, LocationApi } from '@/services/api/master-data';
-
+import { generateDashboardPDF } from '@/components/pages/dashboard/export/DashboardPDF';
 import {
   DashboardFilterType,
   getDashboardFilterSchema,
 } from '@/components/pages/dashboard/filter/DashboardProductionFilter.schema';
 import DashboardLineChart from '@/components/pages/dashboard/chart/DashboardLineChart';
 import DashboardLineChartSkeleton from '@/components/pages/dashboard/skeleton/DashboardLineChartSkeleton';
+import DashboardAllCharts, {
+  DashboardAllChartsRef,
+} from '@/components/pages/dashboard/chart/DashboardAllCharts';
 import { RadioGroup, RadioGroupItem } from '@/components/input/RadioInput';
 import {
   DashboardFilter,
@@ -30,6 +33,11 @@ import DashboardStats from '@/components/pages/dashboard/chart/DashboardStats';
 import { isResponseSuccess } from '@/lib/api-helper';
 import AlertErrorList from '@/components/helper/form/FormErrors';
 import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
+import ButtonFilter from '@/components/helper/ButtonFilter';
+import Dropdown from '@/components/Dropdown';
+import Menu from '@/components/menu/Menu';
+import MenuItem from '@/components/menu/MenuItem';
+import { useDashboardStore } from '@/stores/dashboard';
 
 // Helper function to normalize values to array
 const normalizeToArray = (
@@ -44,11 +52,22 @@ const normalizeToArray = (
 
 const DashboardProduction = () => {
   const filterModal = useModal();
+
+  // ===== DASHBOARD STORE =====
+  const { filterValues, setFilterValues, resetFilterValues } =
+    useDashboardStore();
+
   const [analysisMode, setAnalysisMode] = useState<'OVERVIEW' | 'COMPARISON'>(
-    'OVERVIEW'
+    (filterValues.analysisMode as 'OVERVIEW' | 'COMPARISON') || 'OVERVIEW'
   );
   const [endpointUrl, setEndpointUrl] = useState('/dashboards');
-  const [selectedLocationIds, setSelectedLocationIds] = useState<number[]>([]);
+  const [selectedLocationIds, setSelectedLocationIds] = useState<number[]>(
+    normalizeToArray(filterValues.location)
+  );
+  const [exporting, setExporting] = useState(false);
+  const statsRef = useRef<HTMLDivElement>(null);
+  const chartRef = useRef<HTMLDivElement>(null);
+  const allChartsRef = useRef<DashboardAllChartsRef>(null);
 
   // ===== FETCH DATA =====
   const {
@@ -64,22 +83,32 @@ const DashboardProduction = () => {
     : undefined;
 
   // ===== SELECT =====
-  const { options: flockOptions, isLoadingOptions: isLoadingFlockOptions } =
-    useSelect(ProjectFlockApi.basePath, 'id', 'flock_name', '', {
-      limit: 'limit',
-      location_id: selectedLocationIds ? selectedLocationIds.toString() : '',
-    });
   const {
+    setInputValue: setInputValueFlock,
+    options: flockOptions,
+    isLoadingOptions: isLoadingFlockOptions,
+    loadMore: loadMoreFlock,
+  } = useSelect(ProjectFlockApi.basePath, 'id', 'flock_name', '', {
+    limit: 'limit',
+    location_id: selectedLocationIds ? selectedLocationIds.toString() : '',
+  });
+  const {
+    setInputValue: setInputValueLocation,
     options: locationOptions,
     isLoadingOptions: isLoadingLocationOptions,
+    loadMore: loadMoreLocation,
   } = useSelect(LocationApi.basePath, 'id', 'name', '', {
     limit: 'limit',
   });
-  const { options: kandangOptions, isLoadingOptions: isLoadingKandangOptions } =
-    useSelect(KandangApi.basePath, 'id', 'name', '', {
-      limit: 'limit',
-      location_id: selectedLocationIds ? selectedLocationIds.toString() : '',
-    });
+  const {
+    setInputValue: setInputValueKandang,
+    options: kandangOptions,
+    isLoadingOptions: isLoadingKandangOptions,
+    loadMore: loadMoreKandang,
+  } = useSelect(KandangApi.basePath, 'id', 'name', '', {
+    limit: 'limit',
+    location_id: selectedLocationIds ? selectedLocationIds.toString() : '',
+  });
   const comparisonTypeOptions = [
     { value: 'FARM', label: 'Farm' },
     { value: 'FLOCK', label: 'Flock' },
@@ -89,20 +118,21 @@ const DashboardProduction = () => {
   // ===== FORMIK =====
   const formik = useFormik({
     initialValues: {
-      startDate: '',
-      endDate: '',
-      flock: [] as OptionType[],
-      location: [] as OptionType[],
-      kandang: [] as OptionType[],
-      analysisMode: analysisMode,
-      comparisonType: '',
-      lokasiIds: [],
-      flockIds: [],
-      kandangIds: [],
+      startDate: filterValues.startDate || '',
+      endDate: filterValues.endDate || '',
+      flock: filterValues.flock || ([] as OptionType[]),
+      location: filterValues.location || ([] as OptionType[]),
+      kandang: filterValues.kandang || ([] as OptionType[]),
+      analysisMode: filterValues.analysisMode || analysisMode,
+      comparisonType: filterValues.comparisonType || '',
+      locationIds: filterValues.locationIds || [],
+      flockIds: filterValues.flockIds || [],
+      kandangIds: filterValues.kandangIds || [],
     } as DashboardFilterType,
     validationSchema: getDashboardFilterSchema(analysisMode),
     onSubmit: (values) => {
-      console.log(values);
+      // Save filter values to store
+      setFilterValues(values);
 
       handleApplyFilter({
         start_date: values.startDate || '',
@@ -118,13 +148,13 @@ const DashboardProduction = () => {
 
   const handleResetFilter = () => {
     formik.resetForm();
+    resetFilterValues(); // Clear stored filter values
     setAnalysisMode('OVERVIEW');
     setEndpointUrl('/dashboards');
+    setSelectedLocationIds([]);
   };
 
   const handleApplyFilter = (values: DashboardFilter) => {
-    console.log(values);
-
     // Build query params object, only include non-empty values
     const params: Record<string, string> = {};
 
@@ -140,15 +170,37 @@ const DashboardProduction = () => {
     if (values.comparison_type) params.comparison_type = values.comparison_type;
 
     setEndpointUrl(`/dashboards?${new URLSearchParams(params).toString()}`);
-    console.log(endpointUrl);
     filterModal.closeModal();
     refreshDashboardProductionData();
-    formik.resetForm();
   };
 
+  // ===== Load filter from store on mount =====
+  useEffect(() => {
+    if (!filterValues) return;
+    handleApplyFilter({
+      start_date: filterValues.startDate,
+      end_date: filterValues.endDate,
+      analysis_mode: filterValues.analysisMode as 'OVERVIEW' | 'COMPARISON',
+      location_ids: normalizeToArray(filterValues.location),
+      flock_ids: normalizeToArray(filterValues.flock),
+      kandang_ids: normalizeToArray(filterValues.kandang),
+      comparison_type: filterValues.comparisonType,
+    });
+  }, [filterValues]);
+
   // ===== Formik Error List =====
   const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
 
+  // ===== Export PDF =====
+  const handleExportPDF = async () => {
+    await generateDashboardPDF({
+      filterValues: formik.values,
+      statsRef,
+      allChartsRef,
+      setExporting,
+    });
+  };
+
   if (isLoadingDashboardProductionData) {
     return (
       <div className='w-full min-h-screen flex items-center justify-center'>
@@ -156,103 +208,108 @@ const DashboardProduction = () => {
       </div>
     );
   }
+
   return (
     <>
       <section className='w-full p-4 space-y-6'>
         <div className='flex flex-col sm:flex-row items-center justify-between gap-4'>
           <div></div>
+
           <div className='flex flex-row justify-end gap-2'>
-            <Button
+            <ButtonFilter
+              values={{
+                ...formik.values,
+                analysisMode: undefined,
+              }}
               variant='outline'
-              className={`min-w-28 rounded-lg ${
-                isResponseSuccess(dashboardProductionResponse) &&
-                (dashboardProductionResponse.meta as unknown as DashboardMeta)
-                  .filters
-                  ? 'bg-gradient-to-r from-blue-50 to-blue-100 border-blue-500 text-blue-600 hover:from-blue-100 hover:to-blue-200'
-                  : ''
-              }`}
-              onClick={() => filterModal.openModal()}
-            >
-              <Icon
-                icon='heroicons:funnel'
-                width={20}
-                height={20}
-                className={
-                  isResponseSuccess(dashboardProductionResponse) &&
-                  (dashboardProductionResponse.meta as unknown as DashboardMeta)
-                    .filters
-                    ? 'text-blue-600'
-                    : ''
-                }
-              />
-              Filter
-              {isResponseSuccess(dashboardProductionResponse) &&
-                dashboardProductionResponse.meta &&
-                (dashboardProductionResponse.meta as unknown as DashboardMeta)
-                  .filters && (
-                  <span className='w-6 h-6 text-white bg-red-500 rounded-lg flex items-center justify-center text-xs'>
-                    {(() => {
-                      const meta =
-                        dashboardProductionResponse.meta as unknown as DashboardMeta;
-                      if (!meta.filters) return 0;
-                      const count =
-                        (meta.filters.location_ids.length > 1
-                          ? meta.filters.location_ids.length
-                          : 0) +
-                        (meta.filters.flock_ids.length > 1
-                          ? meta.filters.flock_ids.length
-                          : 0) +
-                        (meta.filters.kandang_ids.length > 1
-                          ? meta.filters.kandang_ids.length
-                          : 0);
-                      return meta.filters.analysis_mode === 'OVERVIEW'
-                        ? 1
-                        : count;
-                    })()}
-                  </span>
-                )}
-            </Button>
-            <Button
-              variant='outline'
-              color='neutral'
               className='min-w-28 rounded-lg'
+              onClick={() => filterModal.openModal()}
+            />
+            <Dropdown
+              trigger={
+                <Button variant='outline' className='min-w-28 rounded-lg z-50'>
+                  <Icon icon='heroicons:arrow-down-tray' />
+                  Export
+                  <Icon icon='heroicons:chevron-down' />
+                </Button>
+              }
+              className={{
+                content: 'w-full',
+              }}
             >
-              <Icon icon='heroicons:arrow-down-tray' width={20} height={20} />
-              Export
-              <Icon icon='heroicons:chevron-down' width={20} height={20} />
-            </Button>
+              <Menu className={exporting ? 'hidden' : ''}>
+                <MenuItem title='PDF' onClick={handleExportPDF} />
+              </Menu>
+            </Dropdown>
           </div>
         </div>
 
         {/* Dashboard Stats */}
-        <DashboardStats data={dashboardProductionData?.statistics_data ?? []} />
+        <div ref={statsRef}>
+          <DashboardStats
+            data={dashboardProductionData?.statistics_data ?? []}
+          />
+        </div>
 
         {/* Use DashboardLineChart component or skeleton */}
-        {isLoadingDashboardProductionData ? (
-          <DashboardLineChartSkeleton />
-        ) : dashboardProductionData &&
-          dashboardProductionData.charts &&
-          Object.keys(dashboardProductionData.charts).length > 0 ? (
-          <DashboardLineChart
-            analysisMode={
-              isResponseSuccess(dashboardProductionResponse)
-                ? dashboardProductionResponse.meta
-                  ? (
-                      dashboardProductionResponse.meta as unknown as DashboardMeta
-                    ).filters?.analysis_mode
+        <div ref={chartRef}>
+          {isLoadingDashboardProductionData ? (
+            <DashboardLineChartSkeleton />
+          ) : dashboardProductionData &&
+            dashboardProductionData.charts &&
+            Object.keys(dashboardProductionData.charts).length > 0 ? (
+            <DashboardLineChart
+              analysisMode={
+                isResponseSuccess(dashboardProductionResponse)
+                  ? dashboardProductionResponse.meta
+                    ? (
+                        dashboardProductionResponse.meta as unknown as DashboardMeta
+                      ).filters?.analysis_mode
+                    : analysisMode
                   : analysisMode
-                : analysisMode
-            }
-            data={dashboardProductionData}
-          />
-        ) : (
-          <DashboardLineChartSkeleton
-            meta={
-              isResponseSuccess(dashboardProductionResponse)
-                ? (dashboardProductionResponse.meta as unknown as DashboardMeta)
-                : undefined
-            }
-          />
+              }
+              data={dashboardProductionData}
+              selectedKandang={
+                analysisMode === 'OVERVIEW'
+                  ? (formik.values.kandang as OptionType)
+                  : undefined
+              }
+            />
+          ) : (
+            <DashboardLineChartSkeleton
+              meta={
+                isResponseSuccess(dashboardProductionResponse)
+                  ? (dashboardProductionResponse.meta as unknown as DashboardMeta)
+                  : undefined
+              }
+            />
+          )}
+        </div>
+
+        {/* Hidden container for all charts (used for PDF export in OVERVIEW mode) */}
+        {dashboardProductionData && (
+          <div
+            style={{
+              position: 'absolute',
+              left: '-9999px',
+              top: 0,
+              width: '1200px', // Fixed width for consistent PDF rendering
+            }}
+          >
+            <DashboardAllCharts
+              ref={allChartsRef}
+              data={dashboardProductionData}
+              analysisMode={
+                isResponseSuccess(dashboardProductionResponse)
+                  ? dashboardProductionResponse.meta
+                    ? (
+                        dashboardProductionResponse.meta as unknown as DashboardMeta
+                      ).filters?.analysis_mode
+                    : analysisMode
+                  : analysisMode
+              }
+            />
+          </div>
         )}
       </section>
 
@@ -287,7 +344,7 @@ const DashboardProduction = () => {
             {/* Rentang Waktu */}
             <div className='px-4'>
               <label className='flex items-center gap-2 mb-3'>Tanggal</label>
-              <div className='flex items-center gap-2'>
+              <div className='flex items-start gap-2'>
                 <DateInput
                   name='startDate'
                   placeholder='Tanggal Mulai'
@@ -302,7 +359,7 @@ const DashboardProduction = () => {
                     Boolean(formik.touched.startDate)
                   }
                 />
-                <span className='hidden md:block text-center'>—</span>
+                <div className='hidden md:block mt-3 text-center'>—</div>
                 <DateInput
                   name='endDate'
                   placeholder='Tanggal Akhir'
@@ -383,6 +440,8 @@ const DashboardProduction = () => {
               <SelectInput
                 label='Farm'
                 value={formik.values.location}
+                onInputChange={setInputValueLocation}
+                onMenuScrollToBottom={loadMoreLocation}
                 onChange={(selected) => {
                   formik.setFieldValue('location', selected);
                   // Update selectedLocationIds for kandang filter
@@ -422,6 +481,8 @@ const DashboardProduction = () => {
                     formik.setFieldValue('flock', selected)
                   }
                   errorMessage={formik.errors.flock as string}
+                  onInputChange={setInputValueFlock}
+                  onMenuScrollToBottom={loadMoreFlock}
                   options={flockOptions}
                   isLoading={isLoadingFlockOptions}
                   isMulti={
@@ -450,6 +511,8 @@ const DashboardProduction = () => {
                     formik.setFieldValue('kandang', selected)
                   }
                   errorMessage={formik.errors.kandang as string}
+                  onInputChange={setInputValueKandang}
+                  onMenuScrollToBottom={loadMoreKandang}
                   options={kandangOptions}
                   isLoading={isLoadingKandangOptions}
                   isMulti={
@@ -465,7 +528,9 @@ const DashboardProduction = () => {
               </div>
             )}
 
-            <AlertErrorList formErrorList={formErrorList} onClose={close} />
+            <div className='w-full p-4'>
+              <AlertErrorList formErrorList={formErrorList} onClose={close} />
+            </div>
 
             {/* Action Buttons */}
             <div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-gray-100'>
@@ -473,7 +538,6 @@ const DashboardProduction = () => {
                 type='reset'
                 variant='soft'
                 className='ms-4 min-w-36 rounded-lg'
-                onClick={handleResetFilter}
               >
                 Reset Filter
               </Button>
diff --git a/src/components/pages/dashboard/chart/DashboardAllCharts.tsx b/src/components/pages/dashboard/chart/DashboardAllCharts.tsx
new file mode 100644
index 00000000..fe0db0a7
--- /dev/null
+++ b/src/components/pages/dashboard/chart/DashboardAllCharts.tsx
@@ -0,0 +1,343 @@
+import Card from '@/components/Card';
+import {
+  Dashboard,
+  DashboardOverviewCharts,
+  DashboardComparisonCharts,
+  DashboardChartsSeries,
+  DashboardChartsDataset,
+} from '@/types/api/dashboard/dashboard';
+import { Icon } from '@iconify/react';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import {
+  CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
+} from 'recharts';
+
+type DashboardAllChartsProps = {
+  data: Dashboard;
+  analysisMode: string;
+};
+
+export type DashboardAllChartsRef = {
+  getChartRefs: () => {
+    key: string;
+    ref: HTMLDivElement | null;
+    label: string;
+  }[];
+};
+
+// Type guard to check if charts is DashboardOverviewCharts
+function isOverviewCharts(
+  charts: DashboardOverviewCharts | DashboardComparisonCharts | undefined
+): charts is DashboardOverviewCharts {
+  if (!charts) return false;
+  return (
+    'deplesi' in charts ||
+    'body_weight' in charts ||
+    'fcr' in charts ||
+    'performance' in charts ||
+    'quality_control' in charts
+  );
+}
+
+// Type guard to check if charts is DashboardComparisonCharts
+function isComparisonCharts(
+  charts: DashboardOverviewCharts | DashboardComparisonCharts | undefined
+): charts is DashboardComparisonCharts {
+  if (!charts) return false;
+  return 'farm' in charts || 'flock' in charts || 'kandang' in charts;
+}
+
+const lineColors: Record<string, string> = {
+  body_weight: '#10B981',
+  std_body_weight: '#10B981',
+  act_laying: '#1062B9',
+  std_laying: '#1062B9',
+  act_egg_weight: '#10B981',
+  std_egg_weight: '#10B981',
+  act_feed_intake: '#F52419',
+  std_feed_intake: '#F52419',
+  act_uniformity: '#F59E0B',
+  std_uniformity: '#F59E0B',
+  act_fcr: '#10B981',
+  std_fcr: '#10B981',
+  act_fcr_cum: '#F52419',
+  std_fcr_cum: '#10B981',
+  normal: '#10B981',
+  abnormal: '#F52419',
+  act_deplesi: '#10B981',
+  std_deplesi: '#10B981',
+};
+
+const defaultLineColors: string[] = [
+  '#10B981',
+  '#1062B9',
+  '#F52419',
+  '#F59E0B',
+  '#7F56D9',
+];
+
+// Helper function to get line color
+const getLineColor = (seriesId: string | number, index: number): string => {
+  const predefinedColor = lineColors[seriesId];
+  if (predefinedColor) {
+    return predefinedColor;
+  }
+  return defaultLineColors[index % defaultLineColors.length];
+};
+
+// Mapping for chart type labels
+const chartTypeLabels: Record<keyof DashboardOverviewCharts, string> = {
+  body_weight: 'Body Weight',
+  performance: 'Performance',
+  fcr: 'FCR',
+  quality_control: 'Quality Control',
+  deplesi: 'Deplesi',
+};
+
+const DashboardAllCharts = forwardRef<
+  DashboardAllChartsRef,
+  DashboardAllChartsProps
+>(({ data, analysisMode }, ref) => {
+  // Create refs for charts - use string keys for flexibility
+  const chartRefs = useRef<{
+    [key: string]: HTMLDivElement | null;
+  }>({});
+
+  // Determine chart keys and labels based on analysis mode
+  const getChartConfig = () => {
+    if (analysisMode === 'OVERVIEW' && isOverviewCharts(data.charts)) {
+      const overviewKeys: (keyof DashboardOverviewCharts)[] = [
+        'body_weight',
+        'performance',
+        'fcr',
+        'quality_control',
+        'deplesi',
+      ];
+      return overviewKeys.map((key) => ({
+        key,
+        label: chartTypeLabels[key],
+        chartData: (data.charts as DashboardOverviewCharts)[key],
+      }));
+    } else if (
+      analysisMode === 'COMPARISON' &&
+      isComparisonCharts(data.charts)
+    ) {
+      // For comparison mode, find which comparison type has data
+      const comparisonKey = data.charts.farm
+        ? 'farm'
+        : data.charts.flock
+          ? 'flock'
+          : 'kandang';
+
+      const comparisonLabels: Record<string, string> = {
+        farm: 'Farm Comparison',
+        flock: 'Flock Comparison',
+        kandang: 'Kandang Comparison',
+      };
+
+      return [
+        {
+          key: comparisonKey,
+          label: comparisonLabels[comparisonKey],
+          chartData: data.charts[comparisonKey],
+        },
+      ];
+    }
+    return [];
+  };
+
+  const chartConfig = getChartConfig();
+
+  // Expose method to get all chart refs
+  useImperativeHandle(ref, () => ({
+    getChartRefs: () => {
+      return chartConfig
+        .map(({ key, label }) => ({
+          key,
+          ref: chartRefs.current[key] || null,
+          label,
+        }))
+        .filter((item) => item.ref !== null);
+    },
+  }));
+
+  return (
+    <div className='space-y-6'>
+      {chartConfig.map(({ key, label, chartData }) => {
+        if (
+          !chartData ||
+          !chartData.dataset ||
+          chartData.dataset.length === 0
+        ) {
+          return null;
+        }
+
+        const seriesData: DashboardChartsSeries[] = chartData.series || [];
+        const dataset: DashboardChartsDataset[] = chartData.dataset || [];
+
+        return (
+          <div
+            key={key}
+            ref={(el: HTMLDivElement | null) => {
+              chartRefs.current[key] = el;
+            }}
+          >
+            <Card
+              className={{
+                wrapper: 'w-full rounded-lg',
+              }}
+              variant='bordered'
+            >
+              <div className='flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6'>
+                <div className='text-lg font-semibold'>
+                  {label}{' '}
+                  <Icon
+                    icon='heroicons:information-circle'
+                    width={20}
+                    height={20}
+                    className='inline text-neutral-500'
+                  />
+                </div>
+              </div>
+
+              {/* Legend */}
+              <div className='flex flex-wrap gap-3 mb-6'>
+                {seriesData.map((series, index) => {
+                  const isStandard = series.id
+                    .toString()
+                    .toLowerCase()
+                    .includes('std');
+
+                  return (
+                    <div
+                      key={series.id}
+                      className='flex items-center gap-2 px-3 py-2 rounded-lg border border-neutral-400 bg-neutral-50'
+                    >
+                      <div
+                        className={`w-6 h-0.5 ${
+                          isStandard ? 'border-t-2 border-dashed' : ''
+                        }`}
+                        style={{
+                          backgroundColor: isStandard
+                            ? 'transparent'
+                            : getLineColor(series.id, index),
+                          borderColor: isStandard
+                            ? getLineColor(series.id, index)
+                            : 'transparent',
+                        }}
+                      ></div>
+                      <span className='text-sm text-neutral-900 font-medium'>
+                        {series.label}
+                      </span>
+                      <Icon
+                        icon='heroicons:information-circle'
+                        width={16}
+                        height={16}
+                        className='text-neutral-400'
+                      />
+                    </div>
+                  );
+                })}
+              </div>
+
+              {/* Chart */}
+              <ResponsiveContainer width='100%' height={350}>
+                <LineChart
+                  data={dataset}
+                  margin={{
+                    top: 5,
+                    right: 10,
+                    left: 0,
+                    bottom: 5,
+                  }}
+                >
+                  <CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
+                  <XAxis
+                    dataKey='week'
+                    tick={{ fontSize: 11, fill: '#9ca3af' }}
+                    tickLine={false}
+                    axisLine={{ stroke: '#e5e7eb' }}
+                    label={{
+                      value: 'Weeks',
+                      position: 'insideBottom',
+                      offset: -5,
+                      style: { fontSize: 12, fill: '#9ca3af' },
+                    }}
+                  />
+                  <YAxis
+                    tick={{ fontSize: 11, fill: '#9ca3af' }}
+                    tickLine={false}
+                    axisLine={{ stroke: '#e5e7eb' }}
+                    domain={(() => {
+                      const allValues: number[] = [];
+                      dataset.forEach((item: DashboardChartsDataset) => {
+                        seriesData.forEach((series) => {
+                          const value = item[series.id];
+                          if (typeof value === 'number') {
+                            allValues.push(value);
+                          }
+                        });
+                      });
+
+                      if (allValues.length === 0) return [0, 100];
+
+                      const minValue = Math.min(...allValues);
+                      const maxValue = Math.max(...allValues);
+                      const padding = (maxValue - minValue) * 0.1;
+                      const domainMin = Math.floor(
+                        Math.max(0, minValue - padding)
+                      );
+                      const domainMax = Math.ceil(maxValue + padding);
+
+                      return [domainMin, domainMax];
+                    })()}
+                  />
+                  {seriesData.map((series, index) => {
+                    const isStandard = series.id
+                      .toString()
+                      .toLowerCase()
+                      .includes('std');
+                    const dataKey = series.id.toString();
+
+                    return (
+                      <Line
+                        key={series.id}
+                        type='monotone'
+                        dataKey={dataKey}
+                        name={series.label}
+                        stroke={getLineColor(series.id, index)}
+                        opacity={isStandard ? 0.5 : 1}
+                        strokeWidth={2}
+                        strokeDasharray={isStandard ? '5 5' : undefined}
+                        dot={
+                          isStandard
+                            ? false
+                            : {
+                                r: 3,
+                                fill: '#fff',
+                                stroke: getLineColor(series.id, index),
+                                strokeWidth: 2,
+                              }
+                        }
+                        activeDot={isStandard ? undefined : { r: 5 }}
+                      />
+                    );
+                  })}
+                </LineChart>
+              </ResponsiveContainer>
+            </Card>
+          </div>
+        );
+      })}
+    </div>
+  );
+});
+
+DashboardAllCharts.displayName = 'DashboardAllCharts';
+
+export default DashboardAllCharts;
diff --git a/src/components/pages/dashboard/chart/DashboardLineChart.tsx b/src/components/pages/dashboard/chart/DashboardLineChart.tsx
index e586b4a3..f2449795 100644
--- a/src/components/pages/dashboard/chart/DashboardLineChart.tsx
+++ b/src/components/pages/dashboard/chart/DashboardLineChart.tsx
@@ -1,8 +1,10 @@
 import Button from '@/components/Button';
 import Card from '@/components/Card';
 import Dropdown from '@/components/Dropdown';
+import { OptionType } from '@/components/input/SelectInput';
 import Menu from '@/components/menu/Menu';
 import MenuItem from '@/components/menu/MenuItem';
+import { formatNumber } from '@/lib/helper';
 import {
   Dashboard,
   DashboardOverviewCharts,
@@ -25,20 +27,29 @@ import {
 type DashboardLineChartProps = {
   analysisMode: 'OVERVIEW' | 'COMPARISON';
   data: Dashboard;
+  selectedKandang?: OptionType;
 };
 
 // Type guard to check if charts is DashboardOverviewCharts
 function isOverviewCharts(
-  charts: DashboardOverviewCharts | DashboardComparisonCharts
+  charts: DashboardOverviewCharts | DashboardComparisonCharts | undefined
 ): charts is DashboardOverviewCharts {
-  return 'deplesi' in charts;
+  if (!charts) return false;
+  return (
+    'deplesi' in charts ||
+    'body_weight' in charts ||
+    'fcr' in charts ||
+    'performance' in charts ||
+    'quality_control' in charts
+  );
 }
 
 // Type guard to check if charts is DashboardComparisonCharts
 function isComparisonCharts(
-  charts: DashboardOverviewCharts | DashboardComparisonCharts
+  charts: DashboardOverviewCharts | DashboardComparisonCharts | undefined
 ): charts is DashboardComparisonCharts {
-  return 'location' in charts || 'flock' in charts || 'kandang' in charts;
+  if (!charts) return false;
+  return 'farm' in charts || 'flock' in charts || 'kandang' in charts;
 }
 
 const lineColors: Record<string, string> = {
@@ -94,6 +105,7 @@ const getLineColor = (
 const DashboardLineChart = ({
   analysisMode,
   data,
+  selectedKandang,
 }: DashboardLineChartProps) => {
   const [chartData, setChartData] =
     useState<keyof DashboardOverviewCharts>('body_weight');
@@ -123,7 +135,7 @@ const DashboardLineChart = ({
       isComparisonCharts(data.charts)
     ) {
       const comparisonChart =
-        data.charts.location || data.charts.flock || data.charts.kandang;
+        data.charts.farm || data.charts.flock || data.charts.kandang;
       seriesData = comparisonChart?.series || [];
     }
 
@@ -224,7 +236,7 @@ const DashboardLineChart = ({
             isComparisonCharts(data.charts)
           ) {
             const comparisonChart =
-              data.charts.location || data.charts.flock || data.charts.kandang;
+              data.charts.farm || data.charts.flock || data.charts.kandang;
             seriesData = comparisonChart?.series || [];
           }
 
@@ -283,261 +295,382 @@ const DashboardLineChart = ({
         })()}
       </div>
 
-      {/* Chart */}
-      <ResponsiveContainer width='100%' height={350}>
-        <LineChart
-          data={(() => {
-            // Transform data based on analysisMode
-            if (analysisMode === 'OVERVIEW') {
-              // For OVERVIEW mode, use the selected chart data
-              if (isOverviewCharts(data.charts)) {
-                const selectedChartData = data.charts[chartData];
-                if (!selectedChartData || !selectedChartData.dataset) return [];
-                return selectedChartData.dataset;
+      {/* Chart Container with Empty State Overlay */}
+      <div className='relative'>
+        {/* Chart */}
+        <ResponsiveContainer width='100%' height={350}>
+          <LineChart
+            data={(() => {
+              // Transform data based on analysisMode
+              if (analysisMode === 'OVERVIEW') {
+                // For OVERVIEW mode, use the selected chart data
+                if (isOverviewCharts(data.charts)) {
+                  const selectedChartData = data.charts[chartData];
+                  if (!selectedChartData || !selectedChartData.dataset)
+                    return [];
+                  return selectedChartData.dataset;
+                }
+                return [];
+              } else {
+                // For COMPARISON mode, use the first available comparison chart
+                if (isComparisonCharts(data.charts)) {
+                  const chartData =
+                    data.charts.farm ||
+                    data.charts.flock ||
+                    data.charts.kandang;
+
+                  if (!chartData || !chartData.dataset) return [];
+                  return chartData.dataset;
+                }
+                return [];
               }
-              return [];
-            } else {
-              // For COMPARISON mode, use the first available comparison chart
-              if (isComparisonCharts(data.charts)) {
-                const chartData =
-                  data.charts.location ||
-                  data.charts.flock ||
-                  data.charts.kandang;
-
-                if (!chartData || !chartData.dataset) return [];
-                return chartData.dataset;
-              }
-              return [];
-            }
-          })()}
-          margin={{
-            top: 5,
-            right: 10,
-            left: 0,
-            bottom: 5,
-          }}
-        >
-          <CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
-          <XAxis
-            dataKey='week'
-            tick={{ fontSize: 11, fill: '#9ca3af' }}
-            tickLine={false}
-            axisLine={{ stroke: '#e5e7eb' }}
-            label={{
-              value: 'Weeks',
-              position: 'insideBottom',
-              offset: -5,
-              style: { fontSize: 12, fill: '#9ca3af' },
-            }}
-          />
-          <YAxis
-            tick={{ fontSize: 11, fill: '#9ca3af' }}
-            tickLine={false}
-            axisLine={{ stroke: '#e5e7eb' }}
-            domain={(() => {
-              // Calculate dynamic domain based on visible data
-              let seriesData: DashboardChartsSeries[] = [];
-              let dataset: DashboardChartsDataset[] = [];
-
-              if (
-                analysisMode === 'OVERVIEW' &&
-                isOverviewCharts(data.charts)
-              ) {
-                seriesData = data.charts[chartData]?.series || [];
-                dataset = data.charts[chartData]?.dataset || [];
-              } else if (
-                analysisMode === 'COMPARISON' &&
-                isComparisonCharts(data.charts)
-              ) {
-                const comparisonChart =
-                  data.charts.location ||
-                  data.charts.flock ||
-                  data.charts.kandang;
-                seriesData = comparisonChart?.series || [];
-                dataset = comparisonChart?.dataset || [];
-              }
-
-              // Get all values from visible series
-              const visibleSeriesIds = Array.from(visibleSeries);
-              const allValues: number[] = [];
-
-              dataset.forEach((item: DashboardChartsDataset) => {
-                visibleSeriesIds.forEach((seriesId) => {
-                  const value = item[seriesId];
-                  if (typeof value === 'number') {
-                    allValues.push(value);
-                  }
-                });
-              });
-
-              if (allValues.length === 0) return [0, 100];
-
-              const minValue = Math.min(...allValues);
-              const maxValue = Math.max(...allValues);
-
-              // Add padding (10% on each side)
-              const padding = (maxValue - minValue) * 0.1;
-              const domainMin = Math.floor(Math.max(0, minValue - padding));
-              const domainMax = Math.ceil(maxValue + padding);
-
-              return [domainMin, domainMax];
             })()}
-            ticks={(() => {
-              // Calculate dynamic ticks based on domain
-              let seriesData: DashboardChartsSeries[] = [];
-              let dataset: DashboardChartsDataset[] = [];
-
-              if (
-                analysisMode === 'OVERVIEW' &&
-                isOverviewCharts(data.charts)
-              ) {
-                seriesData = data.charts[chartData]?.series || [];
-                dataset = data.charts[chartData]?.dataset || [];
-              } else if (
-                analysisMode === 'COMPARISON' &&
-                isComparisonCharts(data.charts)
-              ) {
-                const comparisonChart =
-                  data.charts.location ||
-                  data.charts.flock ||
-                  data.charts.kandang;
-                seriesData = comparisonChart?.series || [];
-                dataset = comparisonChart?.dataset || [];
-              }
-
-              const visibleSeriesIds = Array.from(visibleSeries);
-              const allValues: number[] = [];
-
-              dataset.forEach((item: DashboardChartsDataset) => {
-                visibleSeriesIds.forEach((seriesId) => {
-                  const value = item[seriesId];
-                  if (typeof value === 'number') {
-                    allValues.push(value);
-                  }
-                });
-              });
-
-              if (allValues.length === 0) return [0, 25, 50, 75, 100];
-
-              const minValue = Math.min(...allValues);
-              const maxValue = Math.max(...allValues);
-              const padding = (maxValue - minValue) * 0.1;
-              const domainMin = Math.floor(Math.max(0, minValue - padding));
-              const domainMax = Math.ceil(maxValue + padding);
-
-              // Generate 5 evenly spaced ticks
-              const range = domainMax - domainMin;
-              const step = range / 4;
-
-              return [
-                domainMin,
-                Math.round(domainMin + step),
-                Math.round(domainMin + step * 2),
-                Math.round(domainMin + step * 3),
-                domainMax,
-              ];
-            })()}
-          />
-          <Tooltip
-            contentStyle={{
-              backgroundColor: '#1f2937',
-              border: 'none',
-              borderRadius: '8px',
-              padding: '8px 12px',
-              color: 'white',
+            margin={{
+              top: 5,
+              right: 10,
+              left: 0,
+              bottom: 5,
             }}
-            labelStyle={{ color: 'white', marginBottom: '4px' }}
-            itemStyle={{ color: 'white', fontSize: '12px' }}
-            labelFormatter={(value) => `Week ${value}`}
-            formatter={(
-              value: number | undefined,
-              name: string | undefined
-            ) => {
-              if (value === undefined || name === undefined) return ['', ''];
+          >
+            <CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
+            <XAxis
+              dataKey='week'
+              tick={{ fontSize: 11, fill: '#9ca3af' }}
+              tickLine={false}
+              axisLine={{ stroke: '#e5e7eb' }}
+              label={{
+                value: 'Weeks',
+                position: 'insideBottom',
+                offset: -5,
+                style: { fontSize: 12, fill: '#9ca3af' },
+              }}
+            />
+            <YAxis
+              tick={{ fontSize: 11, fill: '#9ca3af' }}
+              tickLine={false}
+              axisLine={{ stroke: '#e5e7eb' }}
+              domain={(() => {
+                // Calculate dynamic domain based on visible data
+                let seriesData: DashboardChartsSeries[] = [];
+                let dataset: DashboardChartsDataset[] = [];
 
-              // Get series data to find the unit
-              let seriesData: DashboardChartsSeries[] = [];
-              if (
-                analysisMode === 'OVERVIEW' &&
-                isOverviewCharts(data.charts)
-              ) {
-                seriesData = data.charts[chartData]?.series || [];
-              } else if (
-                analysisMode === 'COMPARISON' &&
-                isComparisonCharts(data.charts)
-              ) {
-                const comparisonChart =
-                  data.charts.location ||
-                  data.charts.flock ||
-                  data.charts.kandang;
-                seriesData = comparisonChart?.series || [];
-              }
+                if (
+                  analysisMode === 'OVERVIEW' &&
+                  isOverviewCharts(data.charts)
+                ) {
+                  seriesData = data.charts[chartData]?.series || [];
+                  dataset = data.charts[chartData]?.dataset || [];
+                } else if (
+                  analysisMode === 'COMPARISON' &&
+                  isComparisonCharts(data.charts)
+                ) {
+                  const comparisonChart =
+                    data.charts.farm ||
+                    data.charts.flock ||
+                    data.charts.kandang;
+                  seriesData = comparisonChart?.series || [];
+                  dataset = comparisonChart?.dataset || [];
+                }
 
-              // Find the series that matches this line's name
-              const series = seriesData.find((s) => s.label === name);
-              const unit = series?.unit || '';
+                // Get all values from visible series
+                const visibleSeriesIds = Array.from(visibleSeries);
+                const allValues: number[] = [];
 
-              return [`${value} ${unit}`, name];
-            }}
-          />
-          {/* Dynamic Line rendering based on visible series */}
-          {(() => {
-            let seriesData: DashboardChartsSeries[] = [];
-
-            if (analysisMode === 'OVERVIEW' && isOverviewCharts(data.charts)) {
-              seriesData = data.charts[chartData]?.series || [];
-            } else if (
-              analysisMode === 'COMPARISON' &&
-              isComparisonCharts(data.charts)
-            ) {
-              const comparisonChart =
-                data.charts.location ||
-                data.charts.flock ||
-                data.charts.kandang;
-              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 (
-                  <Line
-                    key={series.id}
-                    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,
-                          }
+                dataset.forEach((item: DashboardChartsDataset) => {
+                  visibleSeriesIds.forEach((seriesId) => {
+                    const value = item[seriesId];
+                    if (typeof value === 'number') {
+                      allValues.push(value);
                     }
-                    activeDot={isStandard ? undefined : { r: 5 }}
-                  />
+                  });
+                });
+
+                if (allValues.length === 0) return [0, 100];
+
+                const minValue = Math.min(...allValues);
+                const maxValue = Math.max(...allValues);
+
+                // Add padding (10% on each side)
+                const padding = (maxValue - minValue) * 0.1;
+                const domainMin = Math.floor(Math.max(0, minValue - padding));
+                const domainMax = Math.ceil(maxValue + padding);
+
+                return [domainMin, domainMax];
+              })()}
+              ticks={(() => {
+                // Calculate dynamic ticks based on domain
+                let seriesData: DashboardChartsSeries[] = [];
+                let dataset: DashboardChartsDataset[] = [];
+
+                if (
+                  analysisMode === 'OVERVIEW' &&
+                  isOverviewCharts(data.charts)
+                ) {
+                  seriesData = data.charts[chartData]?.series || [];
+                  dataset = data.charts[chartData]?.dataset || [];
+                } else if (
+                  analysisMode === 'COMPARISON' &&
+                  isComparisonCharts(data.charts)
+                ) {
+                  const comparisonChart =
+                    data.charts.farm ||
+                    data.charts.flock ||
+                    data.charts.kandang;
+                  seriesData = comparisonChart?.series || [];
+                  dataset = comparisonChart?.dataset || [];
+                }
+
+                const visibleSeriesIds = Array.from(visibleSeries);
+                const allValues: number[] = [];
+
+                dataset.forEach((item: DashboardChartsDataset) => {
+                  visibleSeriesIds.forEach((seriesId) => {
+                    const value = item[seriesId];
+                    if (typeof value === 'number') {
+                      allValues.push(value);
+                    }
+                  });
+                });
+
+                if (allValues.length === 0) return [0, 25, 50, 75, 100];
+
+                const minValue = Math.min(...allValues);
+                const maxValue = Math.max(...allValues);
+                const padding = (maxValue - minValue) * 0.1;
+                const domainMin = Math.floor(Math.max(0, minValue - padding));
+                const domainMax = Math.ceil(maxValue + padding);
+
+                // Generate 5 evenly spaced ticks
+                const range = domainMax - domainMin;
+                const step = range / 4;
+
+                return [
+                  domainMin,
+                  Math.round(domainMin + step),
+                  Math.round(domainMin + step * 2),
+                  Math.round(domainMin + step * 3),
+                  domainMax,
+                ];
+              })()}
+            />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: '#1f2937',
+                border: 'none',
+                borderRadius: '8px',
+                padding: '8px 12px',
+                color: 'white',
+              }}
+              labelStyle={{ color: 'white', marginBottom: '4px' }}
+              itemStyle={{ color: 'white', fontSize: '12px' }}
+              labelFormatter={(value) => `Week ${value}`}
+              content={(props) => {
+                return (
+                  <div className='flex flex-col gap-2 rounded-lg bg-neutral-950 p-4  text-white'>
+                    <p className='text-neutral-300 text-xs font-semibold text-start'>
+                      {analysisMode === 'OVERVIEW'
+                        ? selectedKandang
+                          ? selectedKandang.label || 'Overview Performance'
+                          : 'Overview Performance'
+                        : 'Comparison Performance'}
+                    </p>
+                    <ul className='flex flex-col gap-1'>
+                      {props.payload.map((item, index) => {
+                        if (item.name.startsWith('STD. ')) return null;
+                        // Get series data to find the unit
+                        let seriesData: DashboardChartsSeries[] = [];
+                        if (
+                          analysisMode === 'OVERVIEW' &&
+                          isOverviewCharts(data.charts)
+                        ) {
+                          seriesData = data.charts[chartData]?.series || [];
+                        } else if (
+                          analysisMode === 'COMPARISON' &&
+                          isComparisonCharts(data.charts)
+                        ) {
+                          const comparisonChart =
+                            data.charts.farm ||
+                            data.charts.flock ||
+                            data.charts.kandang;
+                          seriesData = comparisonChart?.series || [];
+                        }
+
+                        // Find the series that matches this line's name
+                        const series = seriesData.find(
+                          (s) => s.label === item.name
+                        );
+                        const color = series?.id
+                          ? getLineColor(series.id, index, analysisMode)
+                          : '#9ca3af';
+                        const unit = series?.unit;
+
+                        return (
+                          <li
+                            key={item.name}
+                            className='flex w-full justify-between items-center flex-row gap-6 p-0'
+                          >
+                            <span className='flex flex-row gap-1 items-center'>
+                              <div
+                                className='h-4 w-4 m-0 rounded-md'
+                                style={{
+                                  backgroundColor: color,
+                                }}
+                              ></div>
+                              <div className='m-0'>
+                                {formatNumber(item.value)}
+                                {unit}
+                              </div>
+                            </span>
+                            <span className='m-0'>{item.name}</span>
+                          </li>
+                        );
+                      })}
+                    </ul>
+                    <p className='text-neutral-300 text-xs text-start'>
+                      Week {props.label}
+                    </p>
+                  </div>
                 );
-              });
-          })()}
-        </LineChart>
-      </ResponsiveContainer>
+              }}
+              formatter={(
+                value: number | undefined,
+                name: string | undefined
+              ) => {
+                if (
+                  value === undefined ||
+                  name === undefined ||
+                  name.startsWith('STD. ')
+                )
+                  return [undefined, undefined];
+
+                // Get series data to find the unit
+                let seriesData: DashboardChartsSeries[] = [];
+                if (
+                  analysisMode === 'OVERVIEW' &&
+                  isOverviewCharts(data.charts)
+                ) {
+                  seriesData = data.charts[chartData]?.series || [];
+                } else if (
+                  analysisMode === 'COMPARISON' &&
+                  isComparisonCharts(data.charts)
+                ) {
+                  const comparisonChart =
+                    data.charts.farm ||
+                    data.charts.flock ||
+                    data.charts.kandang;
+                  seriesData = comparisonChart?.series || [];
+                }
+
+                // Find the series that matches this line's name
+                const series = seriesData.find((s) => s.label === name);
+                const id = series?.id || '';
+
+                return [value, id];
+              }}
+            />
+            {/* Dynamic Line rendering based on visible series */}
+            {(() => {
+              let seriesData: DashboardChartsSeries[] = [];
+
+              if (
+                analysisMode === 'OVERVIEW' &&
+                isOverviewCharts(data.charts)
+              ) {
+                seriesData = data.charts[chartData]?.series || [];
+              } else if (
+                analysisMode === 'COMPARISON' &&
+                isComparisonCharts(data.charts)
+              ) {
+                const comparisonChart =
+                  data.charts.farm || data.charts.flock || data.charts.kandang;
+                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 (
+                    <Line
+                      key={series.id}
+                      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 }}
+                    />
+                  );
+                });
+            })()}
+          </LineChart>
+        </ResponsiveContainer>
+
+        {/* Empty State Overlay */}
+        {(() => {
+          // Get current dataset
+          let dataset: DashboardChartsDataset[] = [];
+
+          if (analysisMode === 'OVERVIEW' && isOverviewCharts(data.charts)) {
+            dataset = data.charts[chartData]?.dataset || [];
+          } else if (
+            analysisMode === 'COMPARISON' &&
+            isComparisonCharts(data.charts)
+          ) {
+            const comparisonChart =
+              data.charts.farm || data.charts.flock || data.charts.kandang;
+            dataset = comparisonChart?.dataset || [];
+          }
+
+          // Show empty state if dataset is empty
+          if (dataset.length === 0) {
+            return (
+              <div className='absolute inset-x-0 inset-y-15 z-10 flex flex-col items-center justify-center rounded-lg'>
+                {/* Chart icon */}
+                <div className='w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center mb-4'>
+                  <Icon
+                    icon='heroicons:chart-bar'
+                    className='text-white'
+                    width={24}
+                    height={24}
+                  />
+                </div>
+
+                {/* Empty state text */}
+                <h3 className='text-gray-900 font-semibold text-base mb-2'>
+                  Data Not Yet Available
+                </h3>
+                <p className='text-gray-500 text-sm text-center max-w-xs'>
+                  Please change your filters to get the data.
+                </p>
+              </div>
+            );
+          }
+          return null;
+        })()}
+      </div>
     </Card>
   );
 };
diff --git a/src/components/pages/dashboard/export/DashboardPDF.ts b/src/components/pages/dashboard/export/DashboardPDF.ts
new file mode 100644
index 00000000..17c5bde4
--- /dev/null
+++ b/src/components/pages/dashboard/export/DashboardPDF.ts
@@ -0,0 +1,262 @@
+import jsPDF from 'jspdf';
+import { toPng } from 'html-to-image';
+import toast from 'react-hot-toast';
+import { formatDate } from '@/lib/helper';
+import { DashboardFilterType } from '@/components/pages/dashboard/filter/DashboardProductionFilter.schema';
+import { DashboardAllChartsRef } from '@/components/pages/dashboard/chart/DashboardAllCharts';
+
+interface DashboardPDFExportParams {
+  filterValues: DashboardFilterType;
+  statsRef: React.RefObject<HTMLDivElement | null>;
+  allChartsRef: React.RefObject<DashboardAllChartsRef | null>;
+  setExporting: (value: boolean) => void;
+}
+
+export const generateDashboardPDF = async ({
+  filterValues,
+  statsRef,
+  allChartsRef,
+  setExporting,
+}: DashboardPDFExportParams): Promise<void> => {
+  try {
+    setExporting(true);
+    toast.loading('Generating PDF...', { id: 'export-pdf' });
+
+    // Wait for DOM to update
+    await new Promise((resolve) => setTimeout(resolve, 200));
+
+    const pdf = new jsPDF('p', 'mm', 'a4');
+    const pageWidth = pdf.internal.pageSize.getWidth();
+    const pageHeight = pdf.internal.pageSize.getHeight();
+    const margin = 10;
+    let yPosition = margin;
+
+    // Add title
+    pdf.setFontSize(16);
+    pdf.setFont('helvetica', 'bold');
+    pdf.text('Dashboard Produksi', margin, yPosition);
+    yPosition += 10;
+
+    // Add filter information (horizontal layout)
+    pdf.setFontSize(6);
+    pdf.setFont('helvetica', 'normal');
+
+    const filterItems: string[] = [];
+
+    // Period
+    if (filterValues.startDate || filterValues.endDate) {
+      const periodText = `Periode: ${
+        filterValues.startDate
+          ? formatDate(filterValues.startDate, 'DD MMM YYYY')
+          : '-'
+      } s.d ${
+        filterValues.endDate
+          ? formatDate(filterValues.endDate, 'DD MMM YYYY')
+          : '-'
+      }`;
+      filterItems.push(periodText);
+    }
+
+    // Analysis Mode
+    const analysisModeText = `Analysis Mode: ${
+      filterValues.analysisMode === 'OVERVIEW'
+        ? 'Performance Overview'
+        : 'Performance Comparison'
+    }`;
+    filterItems.push(analysisModeText);
+
+    // Comparison Type (only for COMPARISON mode)
+    if (
+      filterValues.analysisMode === 'COMPARISON' &&
+      filterValues.comparisonType
+    ) {
+      const comparisonTypeLabel =
+        filterValues.comparisonType === 'FARM'
+          ? 'Farm'
+          : filterValues.comparisonType === 'FLOCK'
+            ? 'Flock'
+            : filterValues.comparisonType === 'KANDANG'
+              ? 'Kandang'
+              : filterValues.comparisonType;
+      filterItems.push(`Compared By: ${comparisonTypeLabel}`);
+    }
+
+    // Farm
+    if (filterValues.location) {
+      const locationText = Array.isArray(filterValues.location)
+        ? filterValues.location.map((loc) => loc.label).join(', ')
+        : filterValues.location.label;
+      filterItems.push(`Farm: ${locationText || '-'}`);
+    }
+
+    // Flock
+    if (
+      filterValues.flock &&
+      (Array.isArray(filterValues.flock)
+        ? filterValues.flock.length > 0
+        : filterValues.flock)
+    ) {
+      const flockText = Array.isArray(filterValues.flock)
+        ? filterValues.flock.map((f) => f.label).join(', ')
+        : filterValues.flock.label;
+      filterItems.push(`Flock: ${flockText || '-'}`);
+    }
+
+    // Kandang
+    if (
+      filterValues.kandang &&
+      (Array.isArray(filterValues.kandang)
+        ? filterValues.kandang.length > 0
+        : filterValues.kandang)
+    ) {
+      const kandangText = Array.isArray(filterValues.kandang)
+        ? filterValues.kandang.map((k) => k.label).join(', ')
+        : filterValues.kandang.label;
+      filterItems.push(`Kandang: ${kandangText || '-'}`);
+    }
+
+    // Generated timestamp
+    filterItems.push(`Dicetak: ${formatDate(new Date(), 'DD MMM YYYY HH:mm')}`);
+
+    // Render filter items horizontally with word wrap and gray background
+    const maxWidth = pageWidth - 2 * margin;
+    let currentLine = '';
+    const lines: string[] = [];
+
+    // First pass: calculate all lines
+    filterItems.forEach((item, index) => {
+      const separator = index > 0 ? ' | ' : '';
+      const testLine = currentLine + separator + item;
+      const testWidth = pdf.getTextWidth(testLine);
+
+      if (testWidth > maxWidth && currentLine !== '') {
+        lines.push(currentLine);
+        currentLine = item;
+      } else {
+        currentLine = testLine;
+      }
+    });
+
+    // Add last line
+    if (currentLine) {
+      lines.push(currentLine);
+    }
+
+    // Calculate background dimensions
+    const lineHeight = 3;
+    const padding = 1;
+    const backgroundHeight = lines.length * lineHeight + padding * 2;
+
+    // Draw gray background
+    pdf.setFillColor(240, 240, 240); // Light gray (RGB: 240, 240, 240)
+    pdf.rect(
+      margin - padding,
+      yPosition - padding - 2,
+      pageWidth - 2 * margin + padding * 2,
+      backgroundHeight,
+      'F'
+    );
+
+    // Render text on top of background
+    lines.forEach((line, index) => {
+      pdf.text(line, margin, yPosition);
+      if (index < lines.length - 1) {
+        yPosition += lineHeight;
+      }
+    });
+
+    yPosition += 10;
+
+    // Capture and add stats if available
+    if (statsRef.current) {
+      const statsImage = await toPng(statsRef.current, {
+        quality: 1,
+        pixelRatio: 2,
+      });
+      const statsImgProps = pdf.getImageProperties(statsImage);
+      const statsWidth = pageWidth - 2 * margin;
+      const statsHeight =
+        (statsImgProps.height * statsWidth) / statsImgProps.width;
+
+      // Check if we need a new page
+      if (yPosition + statsHeight > pageHeight - margin) {
+        pdf.addPage();
+        yPosition = margin;
+      }
+
+      pdf.addImage(
+        statsImage,
+        'PNG',
+        margin,
+        yPosition,
+        statsWidth,
+        statsHeight
+      );
+      yPosition += statsHeight + 10;
+    }
+
+    if (allChartsRef.current) {
+      // Get all individual chart refs
+      const chartRefs = allChartsRef.current.getChartRefs();
+
+      // Capture each chart separately and add to PDF
+      for (let i = 0; i < chartRefs.length; i++) {
+        const { ref: chartElement, label } = chartRefs[i];
+
+        if (chartElement) {
+          // Add chart title
+          pdf.setFontSize(12);
+          pdf.setFont('helvetica', 'bold');
+
+          const chartImage = await toPng(chartElement, {
+            quality: 1,
+            pixelRatio: 2,
+          });
+          const chartImgProps = pdf.getImageProperties(chartImage);
+          const chartWidth = pageWidth - 2 * margin;
+          const chartHeight =
+            (chartImgProps.height * chartWidth) / chartImgProps.width;
+
+          // Calculate total height needed (title + spacing + chart)
+          const titleHeight = 10;
+          const totalHeight = titleHeight + chartHeight;
+
+          // Check if chart fits on current page
+          if (yPosition + totalHeight > pageHeight - margin) {
+            pdf.addPage();
+            yPosition = margin;
+          }
+
+          // Add title
+          pdf.text(label, margin, yPosition);
+          yPosition += titleHeight;
+
+          // Add chart image
+          pdf.addImage(
+            chartImage,
+            'PNG',
+            margin,
+            yPosition,
+            chartWidth,
+            chartHeight
+          );
+
+          // Update yPosition for next chart (add spacing between charts)
+          yPosition += chartHeight + 10;
+        }
+      }
+    }
+
+    // Save the PDF
+    const fileName = `dashboard-production-${new Date().toISOString().split('T')[0]}.pdf`;
+    pdf.save(fileName);
+
+    toast.success('PDF exported successfully!', { id: 'export-pdf' });
+  } catch (error) {
+    toast.error('Failed to export PDF. Please try again.', {
+      id: 'export-pdf',
+    });
+  } finally {
+    setExporting(false);
+  }
+};
diff --git a/src/components/pages/dashboard/filter/DashboardProductionFilter.schema.ts b/src/components/pages/dashboard/filter/DashboardProductionFilter.schema.ts
index d62157a8..1e03252b 100644
--- a/src/components/pages/dashboard/filter/DashboardProductionFilter.schema.ts
+++ b/src/components/pages/dashboard/filter/DashboardProductionFilter.schema.ts
@@ -7,7 +7,7 @@ export type DashboardFilterType = {
   analysisMode: string;
   comparisonType: string | undefined;
   location: OptionType | OptionType[];
-  lokasiIds: number[] | undefined;
+  locationIds: number[] | undefined;
   flock: OptionType | OptionType[] | undefined;
   flockIds: number[] | undefined;
   kandang: OptionType | OptionType[] | undefined;
@@ -25,7 +25,7 @@ export const DashboardFilterOverviewSchema: yup.ObjectSchema<DashboardFilterType
       then: (schema) => schema.required('Compared by is required'),
       otherwise: (schema) => schema.optional(),
     }),
-    lokasiIds: yup.array().optional(),
+    locationIds: yup.array().optional(),
     flockIds: yup.array().optional(),
     kandangIds: yup.array().optional(),
     location: yup
@@ -68,7 +68,7 @@ export const DashboardFilterComparisonSchema: yup.ObjectSchema<DashboardFilterTy
       then: (schema) => schema.required('Compared by is required'),
       otherwise: (schema) => schema.optional(),
     }),
-    lokasiIds: yup.array().optional(),
+    locationIds: yup.array().optional(),
     flockIds: yup.array().optional(),
     kandangIds: yup.array().optional(),
     location: yup
diff --git a/src/components/pages/expense/ExpenseDetail.tsx b/src/components/pages/expense/ExpenseDetail.tsx
index 9c84ed4d..1f43eae1 100644
--- a/src/components/pages/expense/ExpenseDetail.tsx
+++ b/src/components/pages/expense/ExpenseDetail.tsx
@@ -43,7 +43,7 @@ const ExpenseDetail: React.FC<ExpenseDetailProps> = ({ initialValues }) => {
 
   return (
     <>
-      <section className='w-full max-w-7xl pb-16'>
+      <section className='w-full max-w-full pb-16'>
         <header className='flex flex-col gap-4'>
           <Button
             href='/expense'
@@ -65,7 +65,7 @@ const ExpenseDetail: React.FC<ExpenseDetailProps> = ({ initialValues }) => {
           tabs={expenseDetailTabs}
           variant='lifted'
           className={{
-            wrapper: 'max-w-5xl mx-auto mt-4',
+            wrapper: 'mx-auto mt-4',
           }}
         />
       </section>
diff --git a/src/components/pages/expense/ExpenseRealizationContent.tsx b/src/components/pages/expense/ExpenseRealizationContent.tsx
index ea4a0e8d..7057ba19 100644
--- a/src/components/pages/expense/ExpenseRealizationContent.tsx
+++ b/src/components/pages/expense/ExpenseRealizationContent.tsx
@@ -68,7 +68,7 @@ const ExpenseRealizationContent = ({
 
   return (
     <div>
-      <div className='w-full max-w-5xl mx-auto flex flex-col sm:flex-row justify-end gap-2'>
+      <div className='w-full mx-auto flex flex-col sm:flex-row justify-end gap-2'>
         <div className='w-full sm:w-fit sm:ml-2 flex flex-row gap-2 items-center'>
           <RequirePermission permissions='lti.expense.update.realization'>
             <Button
@@ -84,7 +84,7 @@ const ExpenseRealizationContent = ({
         </div>
       </div>
 
-      <div className='overflow-x-auto w-full max-w-5xl mx-auto'>
+      <div className='overflow-x-auto w-full mx-auto'>
         <table className='table table-sm table-zebra'>
           <tbody>
             <tr>
@@ -179,7 +179,7 @@ const ExpenseRealizationContent = ({
         </table>
       </div>
 
-      <div className='w-full max-w-5xl mt-8 mx-auto'>
+      <div className='w-full mt-8 mx-auto'>
         <div className='flex flex-row gap-4'>
           <Card variant='bordered' size='sm' className={{ wrapper: 'grow' }}>
             <div className='w-full flex flex-col gap-2'>
@@ -216,127 +216,141 @@ const ExpenseRealizationContent = ({
         </div>
       </div>
 
-      <div className='w-full max-w-5xl mt-8 mx-auto'>
-        <h2 className='font-bold text-xl text-center'>
-          Rincian Pengajuan Biaya Operasional
-        </h2>
+      <div className='w-full mt-8 mx-auto grid grid-cols-2 gap-4'>
+        <div>
+          <h2 className='font-bold text-xl text-center'>
+            Rincian Pengajuan Biaya Operasional
+          </h2>
 
-        <div className='w-full mt-2 flex flex-col gap-4'>
-          {initialValues?.kandangs.map((kandangExpense, kandangExpenseIdx) => {
-            let expenseGrandTotal = 0;
+          <div className='w-full mt-2 flex flex-col gap-4'>
+            {initialValues?.kandangs.map(
+              (kandangExpense, kandangExpenseIdx) => {
+                let expenseGrandTotal = 0;
 
-            kandangExpense.pengajuans?.forEach(
-              (item) => (expenseGrandTotal += item.qty * item.price)
-            );
+                kandangExpense.pengajuans?.forEach(
+                  (item) => (expenseGrandTotal += item.qty * item.price)
+                );
 
-            return (
-              <div
-                key={kandangExpenseIdx}
-                className='overflow-x-auto w-full mx-auto'
-              >
-                <table className='table table-sm table-zebra'>
-                  <thead>
-                    <tr>
-                      <th
-                        colSpan={5}
-                        className='font-bold text-center text-base-content text-lg'
-                      >
-                        Biaya {kandangExpense.name}
-                      </th>
-                    </tr>
-                    <tr>
-                      <th>Nonstock</th>
-                      <th>Total Kuantitas</th>
-                      <th>Total Biaya</th>
-                      <th>Catatan</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {kandangExpense.pengajuans?.map(
-                      (pengajuanItem, pengajuanIdx) => (
-                        <tr key={pengajuanIdx}>
-                          <td>{pengajuanItem.nonstock.name}</td>
-                          <td>{pengajuanItem.qty}</td>
-                          <td>{formatCurrency(pengajuanItem.price)}</td>
-                          <td className='w-xs'>{pengajuanItem.note ?? '-'}</td>
+                return (
+                  <div
+                    key={kandangExpenseIdx}
+                    className='overflow-x-auto w-full mx-auto'
+                  >
+                    <table className='table table-sm table-zebra'>
+                      <thead>
+                        <tr>
+                          <th
+                            colSpan={5}
+                            className='font-bold text-center text-base-content text-lg'
+                          >
+                            Biaya {kandangExpense.name}
+                          </th>
                         </tr>
-                      )
-                    )}
-                  </tbody>
-                  <tfoot>
-                    <tr className='border-y'>
-                      <th colSpan={2} className='text-right'>
-                        Total Biaya Keseluruhan:
-                      </th>
-                      <th colSpan={2}>{formatCurrency(expenseGrandTotal)}</th>
-                    </tr>
-                  </tfoot>
-                </table>
-              </div>
-            );
-          })}
+                        <tr>
+                          <th>Nonstock</th>
+                          <th>Total Kuantitas</th>
+                          <th>Total Biaya</th>
+                          <th>Catatan</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {kandangExpense.pengajuans?.map(
+                          (pengajuanItem, pengajuanIdx) => (
+                            <tr key={pengajuanIdx}>
+                              <td>{pengajuanItem.nonstock.name}</td>
+                              <td>{pengajuanItem.qty}</td>
+                              <td>{formatCurrency(pengajuanItem.price)}</td>
+                              <td className='w-xs'>
+                                {pengajuanItem.notes ?? '-'}
+                              </td>
+                            </tr>
+                          )
+                        )}
+                      </tbody>
+                      <tfoot>
+                        <tr className='border-y'>
+                          <th colSpan={2} className='text-right'>
+                            Total Biaya Keseluruhan:
+                          </th>
+                          <th colSpan={2}>
+                            {formatCurrency(expenseGrandTotal)}
+                          </th>
+                        </tr>
+                      </tfoot>
+                    </table>
+                  </div>
+                );
+              }
+            )}
+          </div>
         </div>
-      </div>
 
-      <div className='w-full max-w-5xl mt-8 mx-auto'>
-        <h2 className='font-bold text-xl text-center'>
-          Rincian Realisasi Biaya Operasional
-        </h2>
+        <div>
+          <h2 className='font-bold text-xl text-center'>
+            Rincian Realisasi Biaya Operasional
+          </h2>
 
-        <div className='w-full mt-2 flex flex-col gap-4'>
-          {initialValues?.kandangs.map((kandangExpense, kandangExpenseIdx) => {
-            let expenseGrandTotal = 0;
+          <div className='w-full mt-2 flex flex-col gap-4'>
+            {initialValues?.kandangs.map(
+              (kandangExpense, kandangExpenseIdx) => {
+                let expenseGrandTotal = 0;
 
-            kandangExpense.realisasi?.forEach(
-              (item) => (expenseGrandTotal += item.qty * item.price)
-            );
+                kandangExpense.realisasi?.forEach(
+                  (item) => (expenseGrandTotal += item.qty * item.price)
+                );
 
-            return (
-              <div
-                key={kandangExpenseIdx}
-                className='overflow-x-auto w-full mx-auto'
-              >
-                <table className='table table-sm table-zebra'>
-                  <thead>
-                    <tr>
-                      <th
-                        colSpan={5}
-                        className='font-bold text-center text-base-content text-lg'
-                      >
-                        Biaya {kandangExpense.name}
-                      </th>
-                    </tr>
-                    <tr>
-                      <th>Nonstock</th>
-                      <th>Total Kuantitas</th>
-                      <th>Total Biaya</th>
-                      <th>Catatan</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {kandangExpense.realisasi?.map(
-                      (realisasiItem, realisasiIdx) => (
-                        <tr key={realisasiIdx}>
-                          <td>{realisasiItem.nonstock.name}</td>
-                          <td>{realisasiItem.qty}</td>
-                          <td>{formatCurrency(realisasiItem.price)}</td>
-                          <td className='w-xs'>{realisasiItem.note ?? '-'}</td>
+                return (
+                  <div
+                    key={kandangExpenseIdx}
+                    className='overflow-x-auto w-full mx-auto'
+                  >
+                    <table className='table table-sm table-zebra'>
+                      <thead>
+                        <tr>
+                          <th
+                            colSpan={5}
+                            className='font-bold text-center text-base-content text-lg'
+                          >
+                            Biaya {kandangExpense.name}
+                          </th>
                         </tr>
-                      )
-                    )}
-                  </tbody>
-                  <tfoot>
-                    <tr className='border-y'>
-                      <th colSpan={2} className='text-right'>
-                        Total Biaya Keseluruhan:
-                      </th>
-                      <th colSpan={2}>{formatCurrency(expenseGrandTotal)}</th>
-                    </tr>
-                  </tfoot>
-                </table>
-              </div>
-            );
-          })}
+                        <tr>
+                          <th>Nonstock</th>
+                          <th>Total Kuantitas</th>
+                          <th>Total Biaya</th>
+                          <th>Catatan</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {kandangExpense.realisasi?.map(
+                          (realisasiItem, realisasiIdx) => (
+                            <tr key={realisasiIdx}>
+                              <td>{realisasiItem.nonstock.name}</td>
+                              <td>{realisasiItem.qty}</td>
+                              <td>{formatCurrency(realisasiItem.price)}</td>
+                              <td className='w-xs'>
+                                {realisasiItem.notes ?? '-'}
+                              </td>
+                            </tr>
+                          )
+                        )}
+                      </tbody>
+                      <tfoot>
+                        <tr className='border-y'>
+                          <th colSpan={2} className='text-right'>
+                            Total Biaya Keseluruhan:
+                          </th>
+                          <th colSpan={2}>
+                            {formatCurrency(expenseGrandTotal)}
+                          </th>
+                        </tr>
+                      </tfoot>
+                    </table>
+                  </div>
+                );
+              }
+            )}
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/pages/expense/ExpenseRequestContent.tsx b/src/components/pages/expense/ExpenseRequestContent.tsx
index a1ad4643..ac814bcf 100644
--- a/src/components/pages/expense/ExpenseRequestContent.tsx
+++ b/src/components/pages/expense/ExpenseRequestContent.tsx
@@ -273,7 +273,7 @@ const ExpenseRequestContent = ({
     <>
       <div>
         {initialValues && !isLoadingApprovalHistory && approvalHistory && (
-          <div className='w-full max-w-5xl my-4 mx-auto'>
+          <div className='w-full my-4 mx-auto'>
             <ApprovalSteps approvals={approvalHistory} />
           </div>
         )}
@@ -281,7 +281,7 @@ const ExpenseRequestContent = ({
         <div className='w-full mt-4 flex flex-col gap-4'>
           {/* TODO: apply RBAC */}
 
-          <div className='w-full max-w-5xl mx-auto flex flex-col sm:flex-row justify-end gap-2'>
+          <div className='w-full mx-auto flex flex-col sm:flex-row justify-end gap-2'>
             {isCurrentApprovalOnHeadArea && (
               <RequirePermission permissions='lti.expense.approve.head_area'>
                 <Button
@@ -414,7 +414,7 @@ const ExpenseRequestContent = ({
             </div>
           </div>
 
-          <div className='overflow-x-auto w-full max-w-5xl mx-auto'>
+          <div className='overflow-x-auto w-full mx-auto'>
             <table className='table table-sm table-zebra'>
               <tbody>
                 <tr>
@@ -608,7 +608,7 @@ const ExpenseRequestContent = ({
             </table>
           </div>
         </div>
-        <div className='w-full max-w-5xl mt-8 mx-auto'>
+        <div className='w-full mt-8 mx-auto'>
           <h2 className='font-bold text-xl text-center'>
             Rincian Pengajuan Biaya Operasional
           </h2>
@@ -654,7 +654,7 @@ const ExpenseRequestContent = ({
                               <td>{pengajuanItem.qty}</td>
                               <td>{formatCurrency(pengajuanItem.price)}</td>
                               <td className='w-xs'>
-                                {pengajuanItem.note ?? '-'}
+                                {pengajuanItem.notes ?? '-'}
                               </td>
                             </tr>
                           )
diff --git a/src/components/pages/expense/ExpensesTable.tsx b/src/components/pages/expense/ExpensesTable.tsx
index fdfd9cc3..895c0997 100644
--- a/src/components/pages/expense/ExpensesTable.tsx
+++ b/src/components/pages/expense/ExpensesTable.tsx
@@ -54,17 +54,19 @@ const RowOptionsMenu = ({
   rejectClickHandler: () => void;
   deleteClickHandler: () => void;
 }) => {
-  const showEditButton =
-    props.row.original.latest_approval.step_number !== 6 &&
-    (props.row.original.latest_approval.step_number === 1 ||
-      props.row.original.latest_approval.step_number === 2 ||
-      props.row.original.latest_approval.step_number === 3 ||
-      props.row.original.latest_approval.step_number === 4);
+  const showEditButton = props.row.original.latest_approval
+    ? props.row.original.latest_approval.step_number !== 6 &&
+      (props.row.original.latest_approval.step_number === 1 ||
+        props.row.original.latest_approval.step_number === 2 ||
+        props.row.original.latest_approval.step_number === 3 ||
+        props.row.original.latest_approval.step_number === 4)
+    : false;
 
   // TODO: apply RBAC
-  const showRealizationButton =
-    props.row.original.latest_approval.action !== 'REJECTED' &&
-    props.row.original.latest_approval.step_number === 4;
+  const showRealizationButton = props.row.original.latest_approval
+    ? props.row.original.latest_approval.action !== 'REJECTED' &&
+      props.row.original.latest_approval.step_number === 4
+    : false;
 
   return (
     <RowOptionsMenuWrapper type={type}>
@@ -278,6 +280,7 @@ const ExpensesTable = () => {
       cell: ({ row }) => {
         const isCheckboxDisabled =
           !row.getCanSelect() ||
+          !row.original.latest_approval ||
           row.original.latest_approval.action === 'REJECTED';
 
         return (
@@ -413,6 +416,8 @@ const ExpensesTable = () => {
   const tableEnableRowSelectionHandler: (row: Row<Expense>) => boolean = (
     row
   ) => {
+    if (!row.original.latest_approval) return false;
+
     return (
       row.original.latest_approval.action !== 'REJECTED' &&
       row.original.latest_approval.step_number !== 6
@@ -692,14 +697,6 @@ const ExpensesTable = () => {
                   </>
                 )}
               </div>
-
-              <DebouncedTextInput
-                name='search'
-                placeholder='Cari Biaya Operasional'
-                value={tableFilterState.search}
-                onChange={searchChangeHandler}
-                className={{ wrapper: 'sm:max-w-3xs' }}
-              />
             </div>
 
             <div className='grid grid-cols-12 justify-end gap-2'>
@@ -753,17 +750,12 @@ const ExpensesTable = () => {
                 }}
               />
 
-              <SelectInput
-                label='Baris'
-                options={ROWS_OPTIONS}
-                value={{
-                  label: String(tableFilterState.pageSize),
-                  value: tableFilterState.pageSize,
-                }}
-                onChange={pageSizeChangeHandler}
-                className={{
-                  wrapper: 'col-span-12 max-w-28 justify-self-end',
-                }}
+              <DebouncedTextInput
+                name='search'
+                placeholder='Cari Biaya Operasional'
+                value={tableFilterState.search}
+                onChange={searchChangeHandler}
+                className={{ wrapper: 'col-span-12 max-w-52 justify-self-end' }}
               />
             </div>
           </div>
diff --git a/src/components/pages/expense/form/ExpenseKandangsTable.tsx b/src/components/pages/expense/form/ExpenseKandangsTable.tsx
index 7d7f76ca..5c60ae1e 100644
--- a/src/components/pages/expense/form/ExpenseKandangsTable.tsx
+++ b/src/components/pages/expense/form/ExpenseKandangsTable.tsx
@@ -19,6 +19,7 @@ import { isResponseSuccess } from '@/lib/api-helper';
 interface ExpenseKandangsTableProps {
   locationId?: number;
   type: 'add' | 'edit' | 'detail';
+  formType?: 'request' | 'realization';
   selectedKandangs: {
     id?: number;
     name?: string;
@@ -31,6 +32,7 @@ interface ExpenseKandangsTableProps {
 
 const ExpenseKandangsTable = ({
   type,
+  formType = 'request',
   locationId,
   selectedKandangs,
   onChange,
@@ -172,69 +174,84 @@ const ExpenseKandangsTable = ({
     updateSortingFilter('picSort', picSortFilter);
   }, [sorting, updateSortingFilter]);
 
-  return (
-    <Card
-      className={{
-        wrapper: className?.wrapper,
-        body: 'p-4 shadow',
-      }}
-    >
-      <Collapse
-        open={open}
-        onOpenChange={setOpen}
-        title={
-          <div className='card-actions p-4 justify-between items-center w-full'>
-            <div className='card-title'>Pilih Kandang</div>
+  // Tampilkan tabel jika:
+  // 1. Mode request pertama kali (type='add' dan formType='request')
+  // 2. Atau sudah ada kandang yang dipilih
+  const shouldShowTable =
+    (type === 'add' && formType === 'request') ||
+    (selectedKandangs.length > 0 && selectedKandangs.some((k) => k.id));
 
-            <Icon
-              icon='material-symbols:keyboard-arrow-down'
-              width={24}
-              height={24}
-              className={cn('text-primary transition-transform', {
-                '-rotate-180': open,
-              })}
-            />
-          </div>
-        }
-        className='w-full!'
-        titleClassName='w-full p-0!'
-      >
-        <Table<Kandang>
-          data={isResponseSuccess(kandangs) ? kandangs?.data : []}
-          columns={kandangsColumns}
-          pageSize={tableFilterState.pageSize}
-          page={isResponseSuccess(kandangs) ? kandangs?.meta?.page : 0}
-          totalItems={
-            isResponseSuccess(kandangs) ? kandangs?.meta?.total_results : 0
-          }
-          onPageChange={setPage}
-          isLoading={isLoading}
-          sorting={sorting}
-          setSorting={setSorting}
-          rowSelection={rowSelection}
-          setRowSelection={setRowSelection}
+  return (
+    <>
+      {shouldShowTable && (
+        <Card
           className={{
-            containerClassName: cn({
-              'mb-20':
-                isResponseSuccess(kandangs) && kandangs?.data?.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 first:flex first:flex-row first:justify-start',
-            bodyRowClassName: 'border-b border-b-gray-200',
-            bodyColumnClassName:
-              'px-6 py-3 first:flex first:flex-row first:justify-start',
-            paginationClassName: cn({
-              hidden:
-                isResponseSuccess(kandangs) &&
-                kandangs?.meta?.total_pages === 1,
-            }),
+            wrapper: className?.wrapper,
+            body: 'p-4 shadow',
           }}
-        />
-      </Collapse>
-    </Card>
+        >
+          <Collapse
+            open={open}
+            onOpenChange={setOpen}
+            title={
+              <div className='card-actions p-4 justify-between items-center w-full'>
+                <div className='card-title'>
+                  {formType === 'realization'
+                    ? 'Kandang yang Direalisasikan'
+                    : 'Pilih Kandang'}
+                </div>
+
+                <Icon
+                  icon='material-symbols:keyboard-arrow-down'
+                  width={24}
+                  height={24}
+                  className={cn('text-primary transition-transform', {
+                    '-rotate-180': open,
+                  })}
+                />
+              </div>
+            }
+            className='w-full!'
+            titleClassName='w-full p-0!'
+          >
+            <Table<Kandang>
+              data={isResponseSuccess(kandangs) ? kandangs?.data : []}
+              columns={kandangsColumns}
+              pageSize={tableFilterState.pageSize}
+              page={isResponseSuccess(kandangs) ? kandangs?.meta?.page : 0}
+              totalItems={
+                isResponseSuccess(kandangs) ? kandangs?.meta?.total_results : 0
+              }
+              onPageChange={setPage}
+              isLoading={isLoading}
+              sorting={sorting}
+              setSorting={setSorting}
+              rowSelection={rowSelection}
+              setRowSelection={setRowSelection}
+              className={{
+                containerClassName: cn({
+                  'mb-20':
+                    isResponseSuccess(kandangs) && kandangs?.data?.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 first:flex first:flex-row first:justify-start',
+                bodyRowClassName: 'border-b border-b-gray-200',
+                bodyColumnClassName:
+                  'px-6 py-3 first:flex first:flex-row first:justify-start',
+                paginationClassName: cn({
+                  hidden:
+                    isResponseSuccess(kandangs) &&
+                    kandangs?.meta?.total_pages === 1,
+                }),
+              }}
+            />
+          </Collapse>
+        </Card>
+      )}
+    </>
   );
 };
 
diff --git a/src/components/pages/expense/form/ExpenseRealizationForm.schema.ts b/src/components/pages/expense/form/ExpenseRealizationForm.schema.ts
index 1f3682ea..94d6e38d 100644
--- a/src/components/pages/expense/form/ExpenseRealizationForm.schema.ts
+++ b/src/components/pages/expense/form/ExpenseRealizationForm.schema.ts
@@ -130,7 +130,7 @@ export const getExpenseRealizationFormInitialValues = (
       ? formatDate(initialValues?.realization_date, 'YYYY-MM-DD')
       : undefined,
     kandangs: initialValues?.kandangs.map((kandang) => ({
-      id: kandang.kandang_id,
+      id: kandang.id,
       name: kandang.name,
     })),
     supplier: initialValues?.supplier
@@ -159,7 +159,7 @@ export const getExpenseRealizationFormInitialValues = (
                   },
                   quantity: realisasiItem.qty,
                   price: realisasiItem.price,
-                  notes: realisasiItem.note,
+                  notes: realisasiItem.notes,
                 };
               })
             : kandangExpense.pengajuans
@@ -170,7 +170,7 @@ export const getExpenseRealizationFormInitialValues = (
                   },
                   quantity: expenseItem.qty,
                   price: expenseItem.price,
-                  notes: expenseItem.note,
+                  notes: expenseItem.notes,
                 }))
               : [];
 
diff --git a/src/components/pages/expense/form/ExpenseRealizationForm.tsx b/src/components/pages/expense/form/ExpenseRealizationForm.tsx
index ed5aea3e..6117c920 100644
--- a/src/components/pages/expense/form/ExpenseRealizationForm.tsx
+++ b/src/components/pages/expense/form/ExpenseRealizationForm.tsx
@@ -249,7 +249,7 @@ const ExpenseRealizationForm = ({
   }, [formikSetValues, getExpenseRealizationFormInitialValues, initialValues]);
 
   return (
-    <section className='w-full max-w-5xl'>
+    <section className='w-full'>
       <header className='flex flex-col gap-4'>
         <Button
           href='/expense'
@@ -297,6 +297,7 @@ const ExpenseRealizationForm = ({
 
           <ExpenseKandangsTable
             type='detail'
+            formType='realization'
             locationId={formik.values.location?.value}
             selectedKandangs={formik.values.kandangs ?? []}
             onChange={kandangsChangeHandler}
diff --git a/src/components/pages/expense/form/ExpenseRequestForm.schema.ts b/src/components/pages/expense/form/ExpenseRequestForm.schema.ts
index cd34e5a3..6e0fb783 100644
--- a/src/components/pages/expense/form/ExpenseRequestForm.schema.ts
+++ b/src/components/pages/expense/form/ExpenseRequestForm.schema.ts
@@ -41,22 +41,25 @@ type ExpenseFormSchemaType = {
 export const ExpenseRequestFormSchema: Yup.ObjectSchema<ExpenseFormSchemaType> =
   Yup.object({
     category: Yup.object({
-      value: Yup.string().oneOf(['BOP', 'NON-BOP']).required(),
-      label: Yup.string().oneOf(['BOP', 'NON-BOP']).required(),
+      value: Yup.string()
+        .oneOf(['BOP', 'NON-BOP'])
+        .required('Kategori wajib diisi!'),
+      label: Yup.string()
+        .oneOf(['BOP', 'NON-BOP'])
+        .required('Kategori wajib diisi!'),
     })
       .nullable()
-      .optional(),
+      .required('Kategori wajib diisi!')
+      .typeError('Kategori wajib diisi!'),
 
     location: Yup.object({
       value: Yup.number().min(1).required(),
       label: Yup.string().required(),
-    })
-      .nullable()
-      .optional(),
+    }).nullable(),
 
     location_id: Yup.number()
-      .required('Lokasi wajib diisi!')
       .min(1, 'Lokasi wajib diisi!')
+      .required('Lokasi wajib diisi!')
       .typeError('Lokasi wajib diisi!'),
 
     transaction_date: Yup.string().required('Tanggal transaksi wajib diisi!'),
@@ -73,9 +76,7 @@ export const ExpenseRequestFormSchema: Yup.ObjectSchema<ExpenseFormSchemaType> =
     supplier: Yup.object({
       value: Yup.number().min(1).required(),
       label: Yup.string().required(),
-    })
-      .nullable()
-      .optional(),
+    }).nullable(),
 
     supplier_id: Yup.number()
       .required('Vendor wajib diisi!')
@@ -104,9 +105,12 @@ export const ExpenseRequestFormSchema: Yup.ObjectSchema<ExpenseFormSchemaType> =
             .of(
               Yup.object({
                 nonstock: Yup.object({
-                  value: Yup.number().min(1).required(),
-                  label: Yup.string().required(),
-                }).nullable(),
+                  value: Yup.number().min(1).required('Nonstock wajib diisi!'),
+                  label: Yup.string().required('Nonstock wajib diisi!'),
+                })
+                  .nullable()
+                  .required('Nonstock wajib diisi!')
+                  .typeError('Nonstock wajib diisi!'),
                 nonstock_id: Yup.number()
                   .required('Nonstock wajib diisi!')
                   .min(1, 'Nonstock wajib diisi!')
@@ -204,7 +208,7 @@ export const getExpenseFormInitialValues = (
                 nonstock_id: expenseItem.nonstock.id,
                 quantity: expenseItem.qty,
                 price: expenseItem.price,
-                notes: expenseItem.note,
+                notes: expenseItem.notes,
               }))
             : [],
         }))
diff --git a/src/components/pages/expense/form/ExpenseRequestForm.tsx b/src/components/pages/expense/form/ExpenseRequestForm.tsx
index a41290b8..ed30de3d 100644
--- a/src/components/pages/expense/form/ExpenseRequestForm.tsx
+++ b/src/components/pages/expense/form/ExpenseRequestForm.tsx
@@ -190,30 +190,18 @@ const ExpenseRequestForm = ({
     formik.setFieldValue('category', val);
   };
 
-  const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
-    formik.setFieldTouched('location', true);
-    formik.setFieldValue('location', val);
+  const locationChangeHandler = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const location = val as OptionType | null;
+      const locationId = location ? Number(location.value) : 0;
 
-    const locationId = Array.isArray(val) ? val[0]?.value : val?.value;
-    formik.setFieldValue('location_id', locationId);
-
-    formik.setFieldValue('kandangs', []);
-
-    // Auto-create expense item for location (without kandang)
-    formik.setFieldValue('expense_nonstocks', [
-      {
-        cost_items: [
-          {
-            nonstock: null,
-            nonstock_id: 0,
-            quantity: undefined,
-            price: undefined,
-            notes: '',
-          },
-        ],
-      },
-    ]);
-  };
+      formik.setFieldTouched('location', true);
+      formik.setFieldValue('location', location);
+      formik.setFieldTouched('location_id', true);
+      formik.setFieldValue('location_id', locationId);
+    },
+    []
+  );
 
   const kandangsChangeHandler = (
     kandangs: { id?: number; name?: string }[]
@@ -268,6 +256,7 @@ const ExpenseRequestForm = ({
 
   const supplierChangeHandler = (val: OptionType | OptionType[] | null) => {
     formik.setFieldTouched('supplier', true);
+    formik.setFieldTouched('supplier_id', true);
     formik.setFieldValue('supplier', val);
 
     const supplierId = Array.isArray(val) ? val[0]?.value : val?.value;
@@ -360,7 +349,7 @@ const ExpenseRequestForm = ({
 
   return (
     <>
-      <section className='w-full max-w-5xl'>
+      <section className='w-full'>
         <header className='flex flex-col gap-4'>
           <Button
             href='/expense'
@@ -407,6 +396,16 @@ const ExpenseRequestForm = ({
               placeholder='Pilih Kategori'
               value={formik.values.category}
               onChange={categoryChangeHandler}
+              isError={
+                formik.touched.category && Boolean(formik.errors.category)
+              }
+              errorMessage={
+                formik.touched.category && formik.errors.category
+                  ? typeof formik.errors.category === 'object'
+                    ? 'Kategori wajib diisi!'
+                    : (formik.errors.category as string)
+                  : undefined
+              }
               options={[
                 {
                   value: 'BOP',
@@ -427,8 +426,13 @@ const ExpenseRequestForm = ({
               value={formik.values.location}
               onChange={locationChangeHandler}
               options={locationOptions}
-              isLoading={isLoadingLocationOptions}
               onInputChange={setLocationInputValue}
+              isLoading={isLoadingLocationOptions}
+              isError={
+                formik.touched.location_id && Boolean(formik.errors.location_id)
+              }
+              errorMessage={formik.errors.location_id as string}
+              isClearable
               className={{ wrapper: 'col-span-12 sm:col-span-4' }}
             />
 
@@ -438,6 +442,12 @@ const ExpenseRequestForm = ({
               required
               value={formik.values.transaction_date}
               onChange={formik.handleChange}
+              onBlur={formik.handleBlur}
+              isError={
+                formik.touched.transaction_date &&
+                Boolean(formik.errors.transaction_date)
+              }
+              errorMessage={formik.errors.transaction_date as string}
               className={{
                 wrapper: 'col-span-12 sm:col-span-4',
               }}
@@ -460,8 +470,12 @@ const ExpenseRequestForm = ({
               value={formik.values.supplier}
               onChange={supplierChangeHandler}
               options={supplierOptions}
-              isLoading={isLoadingVendorOptions}
               onInputChange={setVendorInputValue}
+              isLoading={isLoadingVendorOptions}
+              isError={
+                formik.touched.supplier_id && Boolean(formik.errors.supplier_id)
+              }
+              errorMessage={formik.errors.supplier_id as string}
               className={{ wrapper: 'col-span-12' }}
             />
 
diff --git a/src/components/pages/expense/form/ExpenseRequestKandangDetailExpense.tsx b/src/components/pages/expense/form/ExpenseRequestKandangDetailExpense.tsx
index 41eb40f8..8a1f6974 100644
--- a/src/components/pages/expense/form/ExpenseRequestKandangDetailExpense.tsx
+++ b/src/components/pages/expense/form/ExpenseRequestKandangDetailExpense.tsx
@@ -55,6 +55,10 @@ const ExpenseRequestKandangDetailExpense: React.FC<
       `expense_nonstocks[${kandangExpenseIdx}].cost_items[${expenseIdx}].nonstock`,
       true
     );
+    formik.setFieldTouched(
+      `expense_nonstocks[${kandangExpenseIdx}].cost_items[${expenseIdx}].nonstock_id`,
+      true
+    );
     formik.setFieldValue(
       `expense_nonstocks[${kandangExpenseIdx}].cost_items[${expenseIdx}].nonstock`,
       val
@@ -96,7 +100,7 @@ const ExpenseRequestKandangDetailExpense: React.FC<
   };
 
   const isExpenseRepeaterInputError = (
-    column: 'nonstock' | 'quantity' | 'price' | 'notes',
+    column: 'nonstock_id' | 'quantity' | 'price' | 'notes',
     kandangExpenseIdx: number,
     expenseIdx: number
   ) => {
@@ -105,11 +109,14 @@ const ExpenseRequestKandangDetailExpense: React.FC<
         expenseIdx
       ]?.[column] &&
       Boolean(
-        formik.errors.expense_nonstocks?.[kandangExpenseIdx] instanceof
-          Object &&
+        formik.errors.expense_nonstocks?.[kandangExpenseIdx] &&
+          typeof formik.errors.expense_nonstocks?.[kandangExpenseIdx] ===
+            'object' &&
           formik.errors.expense_nonstocks?.[kandangExpenseIdx].cost_items?.[
             expenseIdx
-          ] instanceof Object &&
+          ] &&
+          typeof formik.errors.expense_nonstocks?.[kandangExpenseIdx]
+            .cost_items?.[expenseIdx] === 'object' &&
           formik.errors.expense_nonstocks?.[kandangExpenseIdx].cost_items?.[
             expenseIdx
           ]?.[column]
@@ -117,6 +124,32 @@ const ExpenseRequestKandangDetailExpense: React.FC<
     );
   };
 
+  const getExpenseRepeaterErrorMessage = (
+    column: 'nonstock_id' | 'quantity' | 'price' | 'notes',
+    kandangExpenseIdx: number,
+    expenseIdx: number
+  ): string => {
+    const kandangError = formik.errors.expense_nonstocks?.[kandangExpenseIdx];
+
+    if (!kandangError || typeof kandangError !== 'object') return '';
+
+    if (!('cost_items' in kandangError)) return '';
+
+    const costItemsError = kandangError.cost_items?.[expenseIdx];
+
+    if (!costItemsError || typeof costItemsError !== 'object') return '';
+
+    const fieldError = costItemsError[column as keyof typeof costItemsError];
+
+    if (!fieldError) return '';
+
+    if (typeof fieldError === 'object' && fieldError !== null) {
+      return 'Nonstock wajib diisi!';
+    }
+
+    return String(fieldError);
+  };
+
   return (
     <Card
       className={{
@@ -202,10 +235,21 @@ const ExpenseRequestKandangDetailExpense: React.FC<
                                           val
                                         );
                                       }}
+                                      isError={isExpenseRepeaterInputError(
+                                        'nonstock_id',
+                                        kandangExpenseIdx,
+                                        expenseIdx
+                                      )}
+                                      errorMessage={getExpenseRepeaterErrorMessage(
+                                        'nonstock_id',
+                                        kandangExpenseIdx,
+                                        expenseIdx
+                                      )}
                                       options={nonstockOptions}
                                       isLoading={isLoadingNonstockOptions}
                                       onInputChange={setNonstockInputValue}
                                       className={{ wrapper: 'min-w-48' }}
+                                      isClearable={true}
                                     />
                                   </td>
 
@@ -226,6 +270,11 @@ const ExpenseRequestKandangDetailExpense: React.FC<
                                         kandangExpenseIdx,
                                         expenseIdx
                                       )}
+                                      errorMessage={getExpenseRepeaterErrorMessage(
+                                        'quantity',
+                                        kandangExpenseIdx,
+                                        expenseIdx
+                                      )}
                                       className={{ wrapper: 'min-w-24' }}
                                     />
                                   </td>
@@ -246,6 +295,11 @@ const ExpenseRequestKandangDetailExpense: React.FC<
                                         kandangExpenseIdx,
                                         expenseIdx
                                       )}
+                                      errorMessage={getExpenseRepeaterErrorMessage(
+                                        'price',
+                                        kandangExpenseIdx,
+                                        expenseIdx
+                                      )}
                                       inputPrefix={
                                         <span className='text-gray-600 font-medium'>
                                           Rp
@@ -271,6 +325,11 @@ const ExpenseRequestKandangDetailExpense: React.FC<
                                         kandangExpenseIdx,
                                         expenseIdx
                                       )}
+                                      errorMessage={getExpenseRepeaterErrorMessage(
+                                        'notes',
+                                        kandangExpenseIdx,
+                                        expenseIdx
+                                      )}
                                       className={{ wrapper: 'min-w-24' }}
                                     />
                                   </td>
diff --git a/src/components/pages/expense/pdf/ExpensePDF.tsx b/src/components/pages/expense/pdf/ExpensePDF.tsx
index f82f6639..f76b6f11 100644
--- a/src/components/pages/expense/pdf/ExpensePDF.tsx
+++ b/src/components/pages/expense/pdf/ExpensePDF.tsx
@@ -447,7 +447,7 @@ const ExpensePDF = ({ expense }: ExpensePDFProps) => {
                         ]}
                       >
                         <Text style={ExpensePDFStyle.kandangExpenseLabelText}>
-                          {pengajuan.note}
+                          {pengajuan.notes}
                         </Text>
                       </View>
                     </View>
@@ -607,7 +607,7 @@ const ExpensePDF = ({ expense }: ExpensePDFProps) => {
                         ]}
                       >
                         <Text style={ExpensePDFStyle.kandangExpenseLabelText}>
-                          {realisasi.note}
+                          {realisasi.notes}
                         </Text>
                       </View>
                     </View>
diff --git a/src/components/pages/finance/FinanceDetail.tsx b/src/components/pages/finance/FinanceDetail.tsx
index 03291420..76d2d1a0 100644
--- a/src/components/pages/finance/FinanceDetail.tsx
+++ b/src/components/pages/finance/FinanceDetail.tsx
@@ -34,7 +34,7 @@ const FinanceDetail = ({ finance }: { finance: Finance }) => {
     },
     {
       label: 'Pihak',
-      value: finance.party.id ? finance.party.name : '-',
+      value: finance.party?.id ? finance.party?.name : '-',
     },
     {
       label: 'Tanggal',
@@ -56,25 +56,21 @@ const FinanceDetail = ({ finance }: { finance: Finance }) => {
     },
     {
       label: 'Nomor Rekening',
-      value: `${finance.bank.alias} - ${finance.bank.account_number} - ${finance.bank.owner}`,
+      value: `${finance.bank?.alias} - ${finance.bank?.account_number} - ${finance.bank?.owner}`,
     },
     {
-      label: `Rekening ${formatTitleCase(finance.party.type)}`,
-      value: finance.party.account_number,
+      label: `Rekening ${formatTitleCase(finance.party?.type)}`,
+      value: finance.party?.account_number,
     },
     {
       label: 'Nominal',
-      value: formatCurrency(finance.expense_amount),
-    },
-    {
-      label: 'Sisa',
-      value: formatCurrency(finance.income_amount),
+      value: formatCurrency(finance.nominal),
     },
   ].filter((item) => {
     // Hide party account number row if transaction type is INJECTION
     if (
       FINANCE_INJECTION_STATUS.includes(finance.transaction_type) &&
-      item.label === `Rekening ${formatTitleCase(finance.party.type)}`
+      item.label === `Rekening ${formatTitleCase(finance.party?.type)}`
     ) {
       return false;
     }
@@ -148,18 +144,19 @@ const FinanceDetail = ({ finance }: { finance: Finance }) => {
       </Card>
 
       <div className='flex flex-row gap-2 justify-end'>
-        {FINANCE_TRANSACTION_STATUS.includes(finance.transaction_type) && (
-          <RequirePermission permissions='lti.finance.payments.update'>
-            <Button
-              color='warning'
-              className='min-w-24'
-              href={`/finance/detail/edit?financeId=${finance.id}`}
-            >
-              <Icon icon='mdi:pencil-outline' />
-              Edit
-            </Button>
-          </RequirePermission>
-        )}
+        {FINANCE_TRANSACTION_STATUS.includes(finance.transaction_type) &&
+          finance.party?.type !== 'SUPPLIER' && (
+            <RequirePermission permissions='lti.finance.payments.update'>
+              <Button
+                color='warning'
+                className='min-w-24'
+                href={`/finance/detail/edit?financeId=${finance.id}`}
+              >
+                <Icon icon='mdi:pencil-outline' />
+                Edit
+              </Button>
+            </RequirePermission>
+          )}
         {FINANCE_INITIAL_BALANCE_STATUS.includes(finance.transaction_type) && (
           <RequirePermission permissions='lti.finance.initial_balances.update'>
             <Button
diff --git a/src/components/pages/finance/FinanceTable.tsx b/src/components/pages/finance/FinanceTable.tsx
index 2d43d273..ff62b9db 100644
--- a/src/components/pages/finance/FinanceTable.tsx
+++ b/src/components/pages/finance/FinanceTable.tsx
@@ -1,21 +1,17 @@
 import { ChangeEventHandler, useMemo, useState } from 'react';
-import { CellContext, Row } from '@tanstack/react-table';
+import { CellContext } from '@tanstack/react-table';
 import { useSearchParams } from 'next/navigation';
 import useSWR from 'swr';
 
 import Button from '@/components/Button';
 import Card from '@/components/Card';
-import Dropdown from '@/components/dropdown/Dropdown';
 import DateInput from '@/components/input/DateInput';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import SelectInput, {
   OptionType,
   useSelect,
 } from '@/components/input/SelectInput';
-import Menu from '@/components/menu/Menu';
-import MenuItem from '@/components/menu/MenuItem';
 import Table from '@/components/Table';
-import Tooltip from '@/components/Tooltip';
 import { formatCurrency, formatDate, formatTitleCase } from '@/lib/helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { Finance } from '@/types/api/finance/finance';
@@ -23,7 +19,6 @@ import {
   FINANCE_INITIAL_BALANCE_STATUS,
   FINANCE_INJECTION_STATUS,
   FINANCE_TRANSACTION_STATUS,
-  ROWS_OPTIONS,
 } from '@/config/constant';
 import { FinanceApi } from '@/services/api/finance';
 import { isResponseSuccess } from '@/lib/api-helper';
@@ -70,19 +65,24 @@ const RowOptionsMenu = ({
 
       {FINANCE_TRANSACTION_STATUS.includes(
         props.row.original.transaction_type
-      ) && (
-        <RequirePermission permissions='lti.finance.payments.update'>
-          <Button
-            href={`/finance/detail/edit?financeId=${props.row.original.id}`}
-            variant='ghost'
-            color='warning'
-            className='justify-start text-sm'
-          >
-            <Icon icon='material-symbols:edit-outline' width={16} height={16} />
-            Edit
-          </Button>
-        </RequirePermission>
-      )}
+      ) &&
+        props.row.original.party?.type !== 'SUPPLIER' && (
+          <RequirePermission permissions='lti.finance.payments.update'>
+            <Button
+              href={`/finance/detail/edit?financeId=${props.row.original.id}`}
+              variant='ghost'
+              color='warning'
+              className='justify-start text-sm'
+            >
+              <Icon
+                icon='material-symbols:edit-outline'
+                width={16}
+                height={16}
+              />
+              Edit
+            </Button>
+          </RequirePermission>
+        )}
 
       {FINANCE_INITIAL_BALANCE_STATUS.includes(
         props.row.original.transaction_type
@@ -199,35 +199,37 @@ const FinanceTable = () => {
 
   // ===== Options =====
   const transactionTypeOptions = useMemo(() => {
-    return [
-      { label: 'Transfer', value: 'TRANSFER' },
-      { label: 'Cash', value: 'CASH' },
-      { label: 'Card', value: 'CARD' },
-      { label: 'Cheque', value: 'CHEQUE' },
-      { label: 'Saldo', value: 'SALDO' },
-    ];
-  }, []);
-  const partyTypeOptions = useMemo(() => {
     return [
       { label: 'Customer', value: 'CUSTOMER' },
       { label: 'Supplier', value: 'SUPPLIER' },
     ];
   }, []);
+  const {
+    options: partyTypeOptions,
+    isLoadingOptions: partyTypeIsLoadingOptions,
+    setInputValue: partyTypeInputValue,
+    loadMore: partyTypeLoadMore,
+  } = useSelect(
+    selectedTransactionType
+      ? selectedTransactionType.value === 'CUSTOMER'
+        ? CustomerApi.basePath
+        : SupplierApi.basePath
+      : '',
+    'id',
+    'name'
+  );
   const sortByOptions = useMemo(() => {
     return [
       { label: 'Tanggal Pembayaran', value: 'payment_date' },
       { label: 'Tanggal Dibuat', value: 'created_at' },
     ];
   }, []);
-  const { options: bankOptions, rawData: bankRawData } = useSelect<Bank>(
-    BankApi.basePath,
-    'id',
-    'alias',
-    '',
-    {
-      limit: 'limit',
-    }
-  );
+  const {
+    options: bankOptions,
+    rawData: bankRawData,
+    setInputValue: bankInputValue,
+    loadMore: bankLoadMore,
+  } = useSelect<Bank>(BankApi.basePath, 'id', 'alias');
 
   // ===== Handler =====
   const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
@@ -344,10 +346,10 @@ const FinanceTable = () => {
       },
       {
         header: 'Pihak',
-        accessorFn: (finance: Finance) => finance.party.name,
+        accessorFn: (finance: Finance) => finance.party?.name,
         cell: (props: CellContext<Finance, unknown>) => {
-          if (props.row.original.party.id) {
-            return <span>{props.row.original.party.name}</span>;
+          if (props.row.original.party?.id) {
+            return <span>{props.row.original.party?.name}</span>;
           }
           return <span>{'-'}</span>;
         },
@@ -368,12 +370,12 @@ const FinanceTable = () => {
       {
         header: 'Bank',
         accessorFn: (finance: Finance) =>
-          `${finance.bank.alias} - ${finance.bank.account_number} - ${finance.bank.owner}`,
+          `${finance.bank?.alias} - ${finance.bank?.account_number} - ${finance.bank?.owner}`,
       },
       {
         header: 'Pengeluaran (Rp)',
         accessorFn: (finance: Finance) =>
-          formatCurrency(finance.expense_amount),
+          formatCurrency(Math.abs(finance.expense_amount)),
       },
       {
         header: 'Pemasukan (Rp)',
@@ -476,38 +478,49 @@ const FinanceTable = () => {
         <div className='grid grid-cols-4 gap-6'>
           <SelectInput
             options={transactionTypeOptions}
-            label='Jenis Transaksi'
+            label='Tipe Transaksi'
             value={selectedTransactionType}
             onChange={transactionTypeChangeHandler}
             isClearable
           />
+          <SelectInput
+            options={partyTypeOptions}
+            label={
+              selectedTransactionType
+                ? selectedTransactionType.value === 'CUSTOMER'
+                  ? 'Pelanggan'
+                  : 'Supplier'
+                : 'Pihak'
+            }
+            value={selectedPartyType}
+            onChange={partyTypeChangeHandler}
+            onInputChange={partyTypeInputValue}
+            onMenuScrollToBottom={partyTypeLoadMore}
+            isLoading={partyTypeIsLoadingOptions}
+            isClearable
+          />
           <SelectInput
             options={
               isResponseSuccess(bankRawData)
                 ? bankOptions.map((bank) => ({
                     label:
-                      bankRawData.data.find((data) => data.id === bank.value)
+                      bankRawData.data.find((data) => data.id === bank?.value)
                         ?.alias +
                       ' - ' +
-                      bankRawData.data.find((data) => data.id === bank.value)
+                      bankRawData.data.find((data) => data.id === bank?.value)
                         ?.account_number +
                       ' - ' +
-                      bankRawData.data.find((data) => data.id === bank.value)
+                      bankRawData.data.find((data) => data.id === bank?.value)
                         ?.owner,
-                    value: bank.value,
+                    value: bank?.value,
                   }))
                 : []
             }
             label='Bank'
             value={selectedBank}
             onChange={bankChangeHandler}
-            isClearable
-          />
-          <SelectInput
-            options={partyTypeOptions}
-            label='Pihak'
-            value={selectedPartyType}
-            onChange={partyTypeChangeHandler}
+            onInputChange={bankInputValue}
+            onMenuScrollToBottom={bankLoadMore}
             isClearable
           />
           <DebouncedTextInput
diff --git a/src/components/pages/finance/add/FormFinanceAdd.tsx b/src/components/pages/finance/add/FormFinanceAdd.tsx
index a94fabd9..168d306a 100644
--- a/src/components/pages/finance/add/FormFinanceAdd.tsx
+++ b/src/components/pages/finance/add/FormFinanceAdd.tsx
@@ -32,8 +32,10 @@ import {
 import { Bank } from '@/types/api/master-data/bank';
 import { useFormik } from 'formik';
 import { useRouter } from 'next/navigation';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
+import Alert from '@/components/Alert';
+import { Icon } from '@iconify/react';
 
 interface FormFinanceAddProps {
   type?: 'add' | 'edit';
@@ -51,18 +53,22 @@ const FormFinanceAdd = ({
   initialValues,
 }: FormFinanceAddProps) => {
   const router = useRouter();
+  const [serverErrorMessage, setServerErrorMessage] = useState('');
+  const [isSupplier, setIsSupplier] = useState(
+    initialValues?.party?.type === 'SUPPLIER'
+  );
 
   // ===== Formik =====
   const formikInitialValues = useMemo((): FinanceFormValues => {
     return {
       party_type_option:
         FINANCE_PARTY_TYPE_OPTIONS.find(
-          (option) => option.value === initialValues?.party.type
+          (option) => option.value === initialValues?.party?.type
         ) || null,
       party_id_option: initialValues?.party
         ? {
-            label: initialValues?.party.name || '',
-            value: initialValues?.party.id || 0,
+            label: initialValues?.party?.name || '',
+            value: initialValues?.party?.id || 0,
           }
         : null,
       payment_date: initialValues?.payment_date || '',
@@ -72,11 +78,11 @@ const FormFinanceAdd = ({
         ) || null,
       bank_id_option: initialValues?.bank
         ? {
-            label: initialValues.bank.name,
-            value: initialValues.bank.id,
+            label: initialValues?.bank?.name,
+            value: initialValues?.bank?.id,
           }
         : null,
-      party_account_number: initialValues?.party.account_number || '',
+      party_account_number: initialValues?.party?.account_number || '',
       reference_number: initialValues?.reference_number || '',
       nominal: initialValues?.nominal.toString() || '',
       notes: initialValues?.notes || '',
@@ -113,20 +119,22 @@ const FormFinanceAdd = ({
     options: partyOptions,
     isLoadingOptions: isLoadingPartyOptions,
     rawData: partyRawData,
+    setInputValue: setPartyInputValue,
+    loadMore: loadMorePartyOptions,
   } = useSelect<PartyCommonProps>(
     formik.values.party_type_option?.value === 'CUSTOMER'
       ? CustomerApi.basePath
       : SupplierApi.basePath,
     'id',
-    'name',
-    '',
-    { limit: 'limit' }
+    'name'
   );
   const {
     options: bankOptions,
     rawData: bankRawData,
     isLoadingOptions: isLoadingBankOptions,
-  } = useSelect<Bank>(BankApi.basePath, 'id', 'name', '', { limit: 'limit' });
+    setInputValue: setBankInputValue,
+    loadMore: loadMoreBankOptions,
+  } = useSelect<Bank>(BankApi.basePath, 'id', 'name');
 
   // ===== Helper Functions =====
   const transformFormValuesToPayload = (
@@ -151,6 +159,7 @@ const FormFinanceAdd = ({
 
       if (isResponseError(response)) {
         toast.error(response.message);
+        setServerErrorMessage(response.message);
         return;
       }
 
@@ -166,6 +175,7 @@ const FormFinanceAdd = ({
 
       if (isResponseError(response)) {
         toast.error(response.message);
+        setServerErrorMessage(response.message);
         return;
       }
 
@@ -205,6 +215,7 @@ const FormFinanceAdd = ({
                   ? formik.errors.party_type_option
                   : ''
               }
+              isDisabled={type === 'edit' || isSupplier}
               required
               isClearable
             />
@@ -219,6 +230,8 @@ const FormFinanceAdd = ({
               placeholder={`Pilih ${formik.values.party_type_option?.value ? formatTitleCase(formik.values.party_type_option.value as string) : 'jenis transaksi dahulu'}`}
               options={partyOptions}
               value={formik.values.party_id_option}
+              onInputChange={setPartyInputValue}
+              onMenuScrollToBottom={loadMorePartyOptions}
               onChange={(value) => {
                 formik.setFieldValue('party_id_option', value);
                 if (isResponseSuccess(partyRawData) && value) {
@@ -241,7 +254,7 @@ const FormFinanceAdd = ({
               }
               required
               isClearable
-              isDisabled={!formik.values.party_type_option?.value}
+              isDisabled={!formik.values.party_type_option?.value || isSupplier}
             />
             <DateInput
               label='Tanggal'
@@ -259,6 +272,7 @@ const FormFinanceAdd = ({
                   : ''
               }
               required
+              disabled={isSupplier}
             />
             <SelectInput
               label='Metode Pembayaran'
@@ -280,6 +294,7 @@ const FormFinanceAdd = ({
               }
               required
               isClearable
+              isDisabled={isSupplier}
             />
             <SelectInput
               label='Bank'
@@ -304,6 +319,8 @@ const FormFinanceAdd = ({
                   : []
               }
               value={formik.values.bank_id_option}
+              onInputChange={setBankInputValue}
+              onMenuScrollToBottom={loadMoreBankOptions}
               onChange={(value) => {
                 formik.setFieldValue('bank_id_option', value);
               }}
@@ -318,6 +335,7 @@ const FormFinanceAdd = ({
               }
               required
               isClearable
+              isDisabled={isSupplier}
             />
             <TextInput
               label={`Nomor Rekening ${formik.values.party_type_option?.value ? formatTitleCase(formik.values.party_type_option.value as string) : 'Pihak'}`}
@@ -338,6 +356,7 @@ const FormFinanceAdd = ({
               }
               required
               readOnly
+              disabled={isSupplier}
             />
             <TextInput
               label='Nomor Referensi'
@@ -357,6 +376,7 @@ const FormFinanceAdd = ({
                   : ''
               }
               required
+              disabled={isSupplier}
             />
             <NumberInput
               label='Nominal'
@@ -372,6 +392,7 @@ const FormFinanceAdd = ({
                   : ''
               }
               required
+              disabled={isSupplier}
             />
             <TextArea
               label='Catatan'
@@ -387,8 +408,18 @@ const FormFinanceAdd = ({
                   : ''
               }
               required
+              disabled={isSupplier}
             />
             <AlertErrorList formErrorList={formErrorList} onClose={close} />
+            {serverErrorMessage && (
+              <Alert color='error'>
+                <Icon icon='mdi:alert' />
+                {serverErrorMessage}
+                <Button color='error' onClick={() => setServerErrorMessage('')}>
+                  <Icon icon='mdi:close' />
+                </Button>
+              </Alert>
+            )}
             <div className='flex justify-center gap-4'>
               <Button
                 type='reset'
diff --git a/src/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance.schema.ts b/src/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance.schema.ts
index 776028c6..0a7133b6 100644
--- a/src/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance.schema.ts
+++ b/src/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance.schema.ts
@@ -27,13 +27,7 @@ export const InitialBalanceFormSchema = Yup.object().shape({
       'Pihak wajib diisi',
       (value) => value !== null && value !== undefined
     ),
-  bank_id_option: Yup.mixed()
-    .nullable()
-    .test(
-      'is-valid-option',
-      'Bank wajib diisi',
-      (value) => value !== null && value !== undefined
-    ),
+  bank_id_option: Yup.mixed().nullable(),
   reference_number: Yup.string().required('Nomor referensi wajib diisi'),
   initial_balance_type_option: Yup.mixed()
     .nullable()
diff --git a/src/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance.tsx b/src/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance.tsx
index 85b63ac3..e1a31415 100644
--- a/src/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance.tsx
+++ b/src/components/pages/finance/add/initial-balance/FormFinanceAddInitialBalance.tsx
@@ -29,8 +29,9 @@ import { Bank } from '@/types/api/master-data/bank';
 import { Icon } from '@iconify/react';
 import { useFormik } from 'formik';
 import { useRouter } from 'next/navigation';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
+import Alert from '@/components/Alert';
 
 interface FormFinanceAddInitialBalanceProps {
   type?: 'add' | 'edit';
@@ -42,6 +43,7 @@ const FormFinanceAddInitialBalance = ({
   initialValues,
 }: FormFinanceAddInitialBalanceProps) => {
   const router = useRouter();
+  const [serverErrorMessage, setServerErrorMessage] = useState('');
 
   // ===== Formik =====
   const formikInitialValues = useMemo((): InitialBalanceFormValues => {
@@ -53,18 +55,18 @@ const FormFinanceAddInitialBalance = ({
     return {
       party_type_option:
         FINANCE_PARTY_TYPE_OPTIONS.find(
-          (option) => option.value === initialValues?.party.type
+          (option) => option.value === initialValues?.party?.type
         ) || null,
       party_id_option: initialValues?.party
         ? {
-            label: initialValues.party.name,
-            value: initialValues.party.id,
+            label: initialValues.party?.name,
+            value: initialValues.party?.id,
           }
         : null,
       bank_id_option: initialValues?.bank
         ? {
-            label: initialValues.bank.name,
-            value: initialValues.bank.id,
+            label: initialValues.bank?.name,
+            value: initialValues.bank?.id,
           }
         : null,
       reference_number: initialValues?.reference_number || '',
@@ -104,21 +106,25 @@ const FormFinanceAddInitialBalance = ({
   });
 
   // ===== Options =====
-  const { options: partyOptions, isLoadingOptions: isLoadingPartyOptions } =
-    useSelect(
-      formik.values.party_type_option?.value === 'CUSTOMER'
-        ? CustomerApi.basePath
-        : SupplierApi.basePath,
-      'id',
-      'name',
-      '',
-      { limit: 'limit' }
-    );
+  const {
+    options: partyOptions,
+    isLoadingOptions: isLoadingPartyOptions,
+    setInputValue: setPartyInputValue,
+    loadMore: loadMorePartyOptions,
+  } = useSelect(
+    formik.values.party_type_option?.value === 'CUSTOMER'
+      ? CustomerApi.basePath
+      : SupplierApi.basePath,
+    'id',
+    'name'
+  );
   const {
     options: bankOptions,
     rawData: bankRawData,
     isLoadingOptions: isLoadingBankOptions,
-  } = useSelect<Bank>(BankApi.basePath, 'id', 'name', '', { limit: 'limit' });
+    setInputValue: setBankInputValue,
+    loadMore: loadMoreBankOptions,
+  } = useSelect<Bank>(BankApi.basePath, 'id', 'name');
 
   // ===== Helper Functions =====
   const transformFormValuesToPayload = (
@@ -143,6 +149,7 @@ const FormFinanceAddInitialBalance = ({
 
       if (isResponseError(response)) {
         toast.error(response.message);
+        setServerErrorMessage(response.message);
         return;
       }
 
@@ -162,6 +169,7 @@ const FormFinanceAddInitialBalance = ({
 
       if (isResponseError(response)) {
         toast.error(response.message);
+        setServerErrorMessage(response.message);
         return;
       }
 
@@ -189,6 +197,8 @@ const FormFinanceAddInitialBalance = ({
               placeholder='Pilih jenis pihak'
               options={FINANCE_PARTY_TYPE_OPTIONS}
               value={formik.values.party_type_option}
+              onInputChange={setPartyInputValue}
+              onMenuScrollToBottom={loadMorePartyOptions}
               onChange={(value) => {
                 formik.setFieldValue('party_type_option', value);
                 formik.setFieldValue('party_id_option', null);
@@ -205,6 +215,7 @@ const FormFinanceAddInitialBalance = ({
                   : ''
               }
               required
+              isDisabled={type === 'edit'}
               isClearable
             />
             <SelectInput
@@ -218,6 +229,8 @@ const FormFinanceAddInitialBalance = ({
               placeholder={`Pilih ${formik.values.party_type_option?.value ? formatTitleCase(formik.values.party_type_option.value as string) : 'jenis pihak dahulu'}`}
               options={partyOptions}
               value={formik.values.party_id_option}
+              onInputChange={setPartyInputValue}
+              onMenuScrollToBottom={loadMorePartyOptions}
               onChange={(value) => {
                 formik.setFieldValue('party_id_option', value);
               }}
@@ -269,7 +282,6 @@ const FormFinanceAddInitialBalance = ({
                   ? formik.errors.bank_id_option
                   : ''
               }
-              required
               isClearable
             />
             <TextInput
@@ -354,7 +366,18 @@ const FormFinanceAddInitialBalance = ({
               }
               required
             />
+
             <AlertErrorList formErrorList={formErrorList} onClose={close} />
+            {serverErrorMessage && (
+              <Alert color='error'>
+                <Icon icon='mdi:alert' />
+                {serverErrorMessage}
+                <Button color='error' onClick={() => setServerErrorMessage('')}>
+                  <Icon icon='mdi:close' />
+                </Button>
+              </Alert>
+            )}
+
             <div className='flex justify-center gap-4'>
               <Button
                 type='reset'
diff --git a/src/components/pages/finance/add/injection/FormFinanceInjection.tsx b/src/components/pages/finance/add/injection/FormFinanceInjection.tsx
index 4ddd282c..d685619d 100644
--- a/src/components/pages/finance/add/injection/FormFinanceInjection.tsx
+++ b/src/components/pages/finance/add/injection/FormFinanceInjection.tsx
@@ -24,8 +24,10 @@ import {
 import { Bank } from '@/types/api/master-data/bank';
 import { useFormik } from 'formik';
 import { useRouter } from 'next/navigation';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
+import Alert from '@/components/Alert';
+import { Icon } from '@iconify/react';
 
 interface FormFinanceInjectionProps {
   type?: 'add' | 'edit';
@@ -37,14 +39,15 @@ const FormFinanceInjection = ({
   initialValues,
 }: FormFinanceInjectionProps) => {
   const router = useRouter();
+  const [serverErrorMessage, setServerErrorMessage] = useState('');
 
   // ===== Formik =====
   const formikInitialValues = useMemo((): InjectionFormValues => {
     return {
       bank_id_option: initialValues?.bank
         ? {
-            label: initialValues.bank.name,
-            value: initialValues.bank.id,
+            label: initialValues.bank?.name,
+            value: initialValues.bank?.id,
           }
         : null,
       adjustment_date: initialValues?.payment_date || '',
@@ -80,7 +83,9 @@ const FormFinanceInjection = ({
     options: bankOptions,
     rawData: bankRawData,
     isLoadingOptions: isLoadingBankOptions,
-  } = useSelect<Bank>(BankApi.basePath, 'id', 'name', '', { limit: 'limit' });
+    setInputValue: setBankInputValue,
+    loadMore: loadMoreBankOptions,
+  } = useSelect<Bank>(BankApi.basePath, 'id', 'name');
 
   // ===== Helper Functions =====
   const transformFormValuesToPayload = (
@@ -101,6 +106,7 @@ const FormFinanceInjection = ({
 
       if (isResponseError(response)) {
         toast.error(response.message);
+        setServerErrorMessage(response.message);
         return;
       }
 
@@ -117,6 +123,7 @@ const FormFinanceInjection = ({
 
       if (isResponseError(response)) {
         toast.error(response.message);
+        setServerErrorMessage(response.message);
         return;
       }
 
@@ -162,6 +169,8 @@ const FormFinanceInjection = ({
                   : []
               }
               value={formik.values.bank_id_option}
+              onInputChange={setBankInputValue}
+              onMenuScrollToBottom={loadMoreBankOptions}
               onChange={(value) => {
                 formik.setFieldValue('bank_id_option', value);
               }}
@@ -226,6 +235,15 @@ const FormFinanceInjection = ({
               required
             />
             <AlertErrorList formErrorList={formErrorList} onClose={close} />
+            {serverErrorMessage && (
+              <Alert color='error'>
+                <Icon icon='mdi:alert' />
+                {serverErrorMessage}
+                <Button color='error' onClick={() => setServerErrorMessage('')}>
+                  <Icon icon='mdi:close' />
+                </Button>
+              </Alert>
+            )}
             <div className='flex justify-center gap-4'>
               <Button
                 type='reset'
diff --git a/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx b/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx
index c1fc25da..3bae393d 100644
--- a/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx
+++ b/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { isResponseError } from '@/lib/api-helper';
 import { InventoryAdjustmentApi } from '@/services/api/inventory';
 import {
   CreateInventoryAdjustmentPayload,
@@ -22,12 +22,18 @@ import {
 } from '@/services/api/master-data';
 import Button from '@/components/Button';
 import { Icon } from '@iconify/react';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
 import TextInput from '@/components/input/TextInput';
 import { RadioGroup } from '@/components/input/RadioInput';
 import TextArea from '@/components/input/TextArea';
 import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 import AlertErrorList from '@/components/helper/form/FormErrors';
+import { ProductCategory } from '@/types/api/master-data/product-category';
+import { Product } from '@/types/api/master-data/product';
+import { Warehouse } from '@/types/api/master-data/warehouse';
 
 interface InventoryAdjustmentFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -44,10 +50,7 @@ const InventoryAdjustmentForm = ({
     InventoryAdjustmentFormErrorMessage,
     setInventoryAdjustmentFormErrorMessage,
   ] = useState('');
-  const [selectedProductCategories, setSelectedProductCategories] =
-    useState('');
   const [disabledProduct, setDisabledProduct] = useState(true);
-  const [optionsProduct, setOptionsProduct] = useState<OptionType[]>([]);
   const [quantityLabel, setQuantityLabel] = useState('Tambah Stok');
 
   // Submit Handler
@@ -108,45 +111,30 @@ const InventoryAdjustmentForm = ({
   });
 
   // Fetch Data
-  const productCategoriesUrl = `${
-    ProductCategoryApi.basePath
-  }?${new URLSearchParams({
-    search: '',
-  }).toString()}`;
-  const { data: productCategories, isLoading: isLoadingProductCategories } =
-    useSWR(productCategoriesUrl, ProductCategoryApi.getAllFetcher);
+  const {
+    setInputValue: setProductCategoryInputValue,
+    options: productCategoryOptions,
+    isLoadingOptions: isLoadingProductCategoryOptions,
+    loadMore: loadMoreProductCategories,
+  } = useSelect<ProductCategory>(ProductCategoryApi.basePath, 'id', 'name');
 
-  const productUrl = `${ProductApi.basePath}?${new URLSearchParams({
-    search: '',
-    product_category_id: selectedProductCategories,
-  }).toString()}`;
-  const { data: products, isLoading: isLoadingProducts } = useSWR(
-    productUrl,
-    ProductApi.getAllFetcher
-  );
+  const {
+    setInputValue: setProductInputValue,
+    options: productOptions,
+    isLoadingOptions: isLoadingProductOptions,
+    loadMore: loadMoreProducts,
+  } = useSelect<Product>(ProductApi.basePath, 'id', 'name', 'search', {
+    product_category_id: formik.values.product_category_id
+      ? String(formik.values.product_category_id)
+      : '',
+  });
 
-  const warehouseUrl = `${WarehouseApi.basePath}?${new URLSearchParams({
-    search: '',
-    limit: '100',
-  }).toString()}`;
-  const { data: warehouses, isLoading: isLoadingWarehouses } = useSWR(
-    warehouseUrl,
-    WarehouseApi.getAllFetcher
-  );
-
-  // Map Data to Options
-  const optionsProductCategory = isResponseSuccess(productCategories)
-    ? productCategories?.data.map((productCategory) => ({
-        value: productCategory.id,
-        label: productCategory.name,
-      }))
-    : [];
-  const optionsWarehouse = isResponseSuccess(warehouses)
-    ? warehouses?.data.map((warehouse) => ({
-        value: warehouse.id,
-        label: warehouse.name,
-      }))
-    : [];
+  const {
+    setInputValue: setWarehouseInputValue,
+    options: warehouseOptions,
+    isLoadingOptions: isLoadingWarehouseOptions,
+    loadMore: loadMoreWarehouses,
+  } = useSelect<Warehouse>(WarehouseApi.basePath, 'id', 'name');
 
   // Options Handler
   const productCategoryChangeHandler = (
@@ -157,7 +145,6 @@ const InventoryAdjustmentForm = ({
 
     formik.setFieldValue('product_category', val);
 
-    setSelectedProductCategories((val as OptionType)?.value as string);
     const disabled = (val as OptionType)?.value == null;
     setDisabledProduct(disabled);
     formik.setFieldValue('product_id', 0);
@@ -193,9 +180,6 @@ const InventoryAdjustmentForm = ({
   // Effect
   useEffect(() => {
     if (initialValues?.product_warehouse?.product?.id) {
-      setSelectedProductCategories(
-        String(initialValues.product_warehouse.product.id)
-      );
       setDisabledProduct(false);
       formik.setFieldValue(
         'product_id',
@@ -219,25 +203,10 @@ const InventoryAdjustmentForm = ({
       );
       formik.setFieldValue('note', initialValues.note);
     }
-  }, [
-    formik,
-    initialValues,
-    setQuantityLabel,
-    setDisabledProduct,
-    setSelectedProductCategories,
-  ]);
+  }, [formik, initialValues, setQuantityLabel, setDisabledProduct]);
   useEffect(() => {
     formikSetValues(formikInitialValues as InventoryAdjustmentFormValues);
   }, [formikSetValues, formikInitialValues]);
-  useEffect(() => {
-    if (isResponseSuccess(products)) {
-      const options = products.data.map((p) => ({
-        value: p.id,
-        label: p.name,
-      }));
-      setOptionsProduct(options);
-    }
-  }, [products]);
 
   // Utils Function
   const formatNumber = (value: string) => {
@@ -282,9 +251,10 @@ const InventoryAdjustmentForm = ({
               label='Kategori Produk'
               value={formik.values.product_category as OptionType}
               onChange={productCategoryChangeHandler}
-              onInputChange={setSelectedProductCategories}
-              options={optionsProductCategory}
-              isLoading={isLoadingProductCategories}
+              onInputChange={setProductCategoryInputValue}
+              options={productCategoryOptions}
+              onMenuScrollToBottom={loadMoreProductCategories}
+              isLoading={isLoadingProductCategoryOptions}
               isError={
                 formik.touched.product_category &&
                 Boolean(formik.errors.product_category)
@@ -300,8 +270,10 @@ const InventoryAdjustmentForm = ({
               label='Produk'
               value={formik.values.product as OptionType}
               onChange={productChangeHandler}
-              options={optionsProduct}
-              isLoading={isLoadingProducts}
+              onInputChange={setProductInputValue}
+              options={productOptions}
+              onMenuScrollToBottom={loadMoreProducts}
+              isLoading={isLoadingProductOptions}
               isError={formik.touched.product && Boolean(formik.errors.product)}
               errorMessage={formik.errors.product as string}
               isDisabled={type === 'detail' || disabledProduct}
@@ -314,8 +286,10 @@ const InventoryAdjustmentForm = ({
               label='Warehouse'
               value={formik.values.warehouse as OptionType}
               onChange={warehouseChangeHandler}
-              options={optionsWarehouse}
-              isLoading={isLoadingWarehouses}
+              onInputChange={setWarehouseInputValue}
+              options={warehouseOptions}
+              onMenuScrollToBottom={loadMoreWarehouses}
+              isLoading={isLoadingWarehouseOptions}
               isError={
                 formik.touched.warehouse && Boolean(formik.errors.warehouse)
               }
diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
index 048b1bd2..1a29fa94 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.schema.ts
+++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
@@ -110,6 +110,14 @@ const DeliveryProductObjectSchema = Yup.object({
     .typeError('Qty harus berupa angka!'),
 });
 
+const DeliveryDocumentSchema = Yup.mixed<File | MovementDocument>()
+  .nullable()
+  .test('fileSize', 'Ukuran dokumen maksimal 5 MB', (value): boolean => {
+    if (!value) return true;
+    if (value instanceof File) return value.size <= 5 * 1024 * 1024;
+    return true;
+  });
+
 const DeliveryObjectSchema: Yup.ObjectSchema<DeliverySchema> = Yup.object({
   delivery_cost: Yup.number()
     .transform((value) => (isNaN(value) || value === 0 ? undefined : value))
@@ -135,13 +143,7 @@ const DeliveryObjectSchema: Yup.ObjectSchema<DeliverySchema> = Yup.object({
     }),
   document_path: Yup.string().nullable().optional(),
   document_index: Yup.number().optional(),
-  document: Yup.mixed<File | MovementDocument>()
-    .nullable()
-    .test('fileSize', 'Ukuran dokumen maksimal 5 MB', (value) => {
-      if (!value) return true;
-      if (value instanceof File) return value.size <= 5 * 1024 * 1024;
-      return true;
-    }),
+  document: DeliveryDocumentSchema,
   driver_name: Yup.string().required('Nama sopir wajib diisi!'),
   vehicle_plate: Yup.string().required('Plat nomor wajib diisi!'),
   supplier: Yup.object({
diff --git a/src/components/pages/inventory/movement/form/MovementForm.tsx b/src/components/pages/inventory/movement/form/MovementForm.tsx
index d9aef6cd..d36fb067 100644
--- a/src/components/pages/inventory/movement/form/MovementForm.tsx
+++ b/src/components/pages/inventory/movement/form/MovementForm.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useFormik } from 'formik';
 import useSWR from 'swr';
 
@@ -38,6 +38,8 @@ import Card from '@/components/Card';
 import { S3_PUBLIC_BASE_URL } from '@/config/constant';
 import { getUniqueFormikErrors } from '@/lib/formik-helper';
 import AlertErrorList from '@/components/helper/form/FormErrors';
+import { Warehouse } from '@/types/api/master-data/warehouse';
+import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
 
 interface MovementFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -49,10 +51,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
 
   // ===== STATE MANAGEMENT =====
   const [movementFormErrorMessage, setMovementFormErrorMessage] = useState('');
-  const [
-    productWarehouseSelectInputValue,
-    setProductWarehouseSelectInputValue,
-  ] = useState('');
   const [selectedProducts, setSelectedProducts] = useState<number[]>([]);
   const [selectedDeliveries, setSelectedDeliveries] = useState<number[]>([]);
   const [formErrorList, setFormErrorList] = useState<string[]>([]);
@@ -93,10 +91,13 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
 
   // ===== USE SELECT HOOKS =====
   const {
-    inputValue: warehouseSelectInputValue,
     setInputValue: setWarehouseSelectInputValue,
     isLoadingOptions: isLoadingWarehouses,
-  } = useSelect(WarehouseApi.basePath, 'id', 'name', 'search');
+    loadMore: loadMoreWarehouses,
+    rawData: warehouses,
+  } = useSelect<Warehouse>(WarehouseApi.basePath, 'id', 'name', 'search', {
+    flag: 'EKSPEDISI',
+  });
 
   // ===== SELECT INPUT DATA =====
   const {
@@ -107,12 +108,6 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     category: 'BOP',
   });
 
-  const warehousesUrl = `${WarehouseApi.basePath}?${new URLSearchParams({ search: warehouseSelectInputValue }).toString()}`;
-  const { data: warehouses } = useSWR(
-    warehousesUrl,
-    WarehouseApi.getAllFetcher
-  );
-
   // ===== DATA PROCESSING =====
   const warehouseStockMap = useMemo(() => {
     if (!isResponseSuccess(allProductWarehouses)) return new Map();
@@ -268,26 +263,64 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     },
   });
 
-  // ===== PRODUCT WAREHOUSE FETCHING (after form initialization) =====
-  const getProductWarehousesUrl = useCallback(() => {
-    const productWarehouseParams = new URLSearchParams({
-      search: productWarehouseSelectInputValue,
-    });
-    if (formik.values.source_warehouse_id) {
-      productWarehouseParams.append(
-        'warehouse_id',
-        formik.values.source_warehouse_id.toString()
-      );
-    }
-    return `${ProductWarehouseApi.basePath}?${productWarehouseParams.toString()}`;
-  }, [formik.values.source_warehouse_id, productWarehouseSelectInputValue]);
+  const prevSourceWarehouseIdRef = useRef<number | null>(
+    formik.values.source_warehouse_id
+  );
 
-  const productWarehousesUrl = getProductWarehousesUrl();
-  const { data: productWarehouses, isLoading: isLoadingProductWarehouses } =
-    useSWR(
-      formik.values.source_warehouse_id ? productWarehousesUrl : null,
-      ProductWarehouseApi.getAllFetcher
-    );
+  // ===== RESET PRODUCTS WHEN SOURCE WAREHOUSE CHANGES =====
+  useEffect(() => {
+    const prevSourceWarehouseId = prevSourceWarehouseIdRef.current;
+    const currentSourceWarehouseId = formik.values.source_warehouse_id;
+
+    if (
+      prevSourceWarehouseId !== currentSourceWarehouseId &&
+      prevSourceWarehouseId !== null
+    ) {
+      formik.setFieldValue('products', [
+        {
+          product: null,
+          product_id: 0,
+          product_qty: '',
+        },
+      ]);
+      formik.setFieldTouched('products', false);
+
+      const updatedDeliveries = formik.values.deliveries.map(
+        (delivery: DeliverySchema) => ({
+          ...delivery,
+          products: [
+            {
+              product: null,
+              product_id: 0,
+              product_qty: '',
+            },
+          ],
+        })
+      );
+      formik.setFieldValue('deliveries', updatedDeliveries);
+      formik.setFieldTouched('deliveries', false);
+    }
+
+    prevSourceWarehouseIdRef.current = currentSourceWarehouseId;
+  }, [formik.values.source_warehouse_id, formik.values.deliveries]);
+
+  // ===== PRODUCT WAREHOUSE FETCHING (after form initialization) =====
+  const {
+    setInputValue: setProductWarehouseSelectInputValue,
+    isLoadingOptions: isLoadingProductWarehouses,
+    loadMore: loadMoreProductWarehouses,
+    rawData: productWarehouses,
+  } = useSelect<ProductWarehouse>(
+    formik.values.source_warehouse_id ? ProductWarehouseApi.basePath : null,
+    'id',
+    'name',
+    'search',
+    {
+      warehouse_id: formik.values.source_warehouse_id
+        ? formik.values.source_warehouse_id.toString()
+        : '',
+    }
+  );
 
   const productWarehouseOptions = isResponseSuccess(productWarehouses)
     ? productWarehouses?.data.map((pw) => ({
@@ -357,13 +390,71 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
     };
   };
 
-  const handleTransferDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    formik.setFieldValue('transfer_date', e.target.value);
-  };
-
   // ===== EVENT HANDLERS =====
-  // Product Handlers
-  const addProduct = () => {
+  const handleTransferDateChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      formik.setFieldValue('transfer_date', e.target.value);
+    },
+    []
+  );
+
+  const handleSourceWarehouseChange = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const newSourceWarehouseId = (val as WarehouseOptionType)?.value;
+
+      if (
+        newSourceWarehouseId &&
+        newSourceWarehouseId === formik.values.destination_warehouse_id
+      ) {
+        const destinationWarehouseName =
+          (formik.values.destination_warehouse as WarehouseOptionType)?.label ||
+          'gudang tujuan';
+        toast.error(
+          `Tidak bisa memilih gudang yang sama. Gudang asal tidak boleh sama dengan ${destinationWarehouseName}.`
+        );
+        return;
+      }
+
+      formik.setFieldTouched('source_warehouse', true);
+      formik.setFieldValue('source_warehouse', val);
+      formik.setFieldTouched('source_warehouse_id', true);
+      formik.setFieldValue('source_warehouse_id', newSourceWarehouseId);
+    },
+    [
+      formik.values.destination_warehouse_id,
+      formik.values.destination_warehouse,
+    ]
+  );
+
+  const handleDestinationWarehouseChange = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const newDestinationWarehouseId = (val as WarehouseOptionType)?.value;
+
+      if (
+        newDestinationWarehouseId &&
+        newDestinationWarehouseId === formik.values.source_warehouse_id
+      ) {
+        const sourceWarehouseName =
+          (formik.values.source_warehouse as WarehouseOptionType)?.label ||
+          'gudang asal';
+        toast.error(
+          `Tidak bisa memilih gudang yang sama. Gudang tujuan tidak boleh sama dengan ${sourceWarehouseName}.`
+        );
+        return;
+      }
+
+      formik.setFieldTouched('destination_warehouse', true);
+      formik.setFieldValue('destination_warehouse', val);
+      formik.setFieldTouched('destination_warehouse_id', true);
+      formik.setFieldValue(
+        'destination_warehouse_id',
+        newDestinationWarehouseId
+      );
+    },
+    [formik.values.source_warehouse_id, formik.values.source_warehouse]
+  );
+
+  const addProduct = useCallback(() => {
     const newProducts = [
       ...(formik.values.products || []),
       {
@@ -373,22 +464,19 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       },
     ];
     formik.setFieldValue('products', newProducts);
-  };
+  }, []);
 
-  const removeProduct = useCallback(
-    (i: number) => {
-      const updatedProducts =
-        formik.values.products?.reduce((acc: ProductSchema[], item, index) => {
-          if (index !== i) {
-            acc.push(item);
-          }
-          return acc;
-        }, []) ?? [];
+  const removeProduct = useCallback((i: number) => {
+    const updatedProducts =
+      formik.values.products?.reduce((acc: ProductSchema[], item, index) => {
+        if (index !== i) {
+          acc.push(item);
+        }
+        return acc;
+      }, []) ?? [];
 
-      formik.setFieldValue('products', updatedProducts);
-    },
-    [formik]
-  );
+    formik.setFieldValue('products', updatedProducts);
+  }, []);
 
   const bulkRemoveProduct = useCallback(() => {
     const updatedProducts =
@@ -397,10 +485,45 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       ) ?? [];
     formik.setFieldValue('products', updatedProducts);
     setSelectedProducts([]);
-  }, [formik, selectedProducts]);
+  }, [formik, selectedProducts, setSelectedProducts]);
 
-  // Delivery Handlers
-  const addDelivery = () => {
+  const handleProductChange = useCallback(
+    (idx: number, val: OptionType | OptionType[] | null) => {
+      formik.setFieldTouched(`products.${idx}.product`, true);
+      formik.setFieldValue(`products.${idx}.product`, val);
+      formik.setFieldTouched(`products.${idx}.product_id`, true);
+      formik.setFieldValue(
+        `products.${idx}.product_id`,
+        (val as ProductWarehouseOptionType)?.value
+      );
+    },
+    []
+  );
+
+  const handleProductSelectAllChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.checked) {
+        setSelectedProducts(formik.values.products?.map((_, idx) => idx) ?? []);
+      } else {
+        setSelectedProducts([]);
+      }
+    },
+    [formik.values.products, setSelectedProducts]
+  );
+
+  const handleProductCheckboxChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const idx = Number(e.target.name.replace('product-', ''));
+      if (e.target.checked) {
+        setSelectedProducts((prev) => [...prev, idx]);
+      } else {
+        setSelectedProducts((prev) => prev.filter((i) => i !== idx));
+      }
+    },
+    [setSelectedProducts]
+  );
+
+  const addDelivery = useCallback(() => {
     formik.setFieldValue('deliveries', [
       ...(formik.values.deliveries || []),
       {
@@ -420,25 +543,19 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
         ],
       },
     ]);
-  };
+  }, []);
 
-  const removeDelivery = useCallback(
-    (i: number) => {
-      const updatedDeliveries =
-        formik.values.deliveries?.reduce(
-          (acc: DeliverySchema[], item, index) => {
-            if (index !== i) {
-              acc.push(item);
-            }
-            return acc;
-          },
-          []
-        ) ?? [];
+  const removeDelivery = useCallback((i: number) => {
+    const updatedDeliveries =
+      formik.values.deliveries?.reduce((acc: DeliverySchema[], item, index) => {
+        if (index !== i) {
+          acc.push(item);
+        }
+        return acc;
+      }, []) ?? [];
 
-      formik.setFieldValue('deliveries', updatedDeliveries);
-    },
-    [formik]
-  );
+    formik.setFieldValue('deliveries', updatedDeliveries);
+  }, []);
 
   const bulkRemoveDelivery = useCallback(() => {
     const updatedDeliveries =
@@ -447,33 +564,101 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
       ) ?? [];
     formik.setFieldValue('deliveries', updatedDeliveries);
     setSelectedDeliveries([]);
-  }, [formik, selectedDeliveries]);
+  }, [formik, selectedDeliveries, setSelectedDeliveries]);
 
-  // Cost Calculation Handlers
-  const handleDeliveryCostChange = useCallback(
-    (idx: number, value: number) => {
-      formik.setFieldValue(`deliveries.${idx}.delivery_cost`, value);
-
-      const delivery = formik.values.deliveries?.[idx];
-      if (delivery) {
-        const productQty = delivery.products.reduce(
-          (sum, p) => sum + (parseInt(p.product_qty.toString()) || 0),
-          0
+  const handleDeliverySelectAllChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.checked) {
+        setSelectedDeliveries(
+          formik.values.deliveries?.map((_, idx) => idx) ?? []
         );
-        if (productQty > 0 && value > 0) {
-          const perItem = value / productQty;
-          formik.setFieldValue(
-            `deliveries.${idx}.delivery_cost_per_item`,
-            perItem
-          );
-        } else if (value === 0) {
-          formik.setFieldValue(`deliveries.${idx}.delivery_cost_per_item`, 0);
-        }
+      } else {
+        setSelectedDeliveries([]);
       }
     },
-    [formik]
+    [formik.values.deliveries, setSelectedDeliveries]
   );
 
+  const handleDeliveryCheckboxChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const idx = Number(e.target.name.replace('delivery-', ''));
+      if (e.target.checked) {
+        setSelectedDeliveries((prev) => [...prev, idx]);
+      } else {
+        setSelectedDeliveries((prev) => prev.filter((i) => i !== idx));
+      }
+    },
+    [setSelectedDeliveries]
+  );
+
+  const handleDeliveryProductChange = useCallback(
+    (deliveryIdx: number, val: OptionType | OptionType[] | null) => {
+      formik.setFieldTouched(
+        `deliveries.${deliveryIdx}.products.0.product`,
+        true
+      );
+      formik.setFieldValue(`deliveries.${deliveryIdx}.products.0.product`, val);
+      formik.setFieldTouched(
+        `deliveries.${deliveryIdx}.products.0.product_id`,
+        true
+      );
+      formik.setFieldValue(
+        `deliveries.${deliveryIdx}.products.0.product_id`,
+        (val as OptionType)?.value
+      );
+    },
+    []
+  );
+
+  const handleDeliverySupplierChange = useCallback(
+    (deliveryIdx: number, val: OptionType | OptionType[] | null) => {
+      formik.setFieldTouched(`deliveries.${deliveryIdx}.supplier`, true);
+      formik.setFieldValue(`deliveries.${deliveryIdx}.supplier`, val);
+      formik.setFieldTouched(`deliveries.${deliveryIdx}.supplier_id`, true);
+      formik.setFieldValue(
+        `deliveries.${deliveryIdx}.supplier_id`,
+        (val as OptionType)?.value
+      );
+    },
+    []
+  );
+
+  const handleDeliveryDocumentChange = useCallback(
+    (deliveryIdx: number, e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (file) {
+        if (file.size > 5 * 1024 * 1024) {
+          toast.error('Ukuran dokumen maksimal 5 MB!');
+          e.target.value = '';
+          return;
+        }
+        formik.setFieldValue(`deliveries.${deliveryIdx}.document`, file);
+      }
+    },
+    []
+  );
+
+  const handleDeliveryCostChange = useCallback((idx: number, value: number) => {
+    formik.setFieldValue(`deliveries.${idx}.delivery_cost`, value);
+
+    const delivery = formik.values.deliveries?.[idx];
+    if (delivery) {
+      const productQty = delivery.products.reduce(
+        (sum, p) => sum + (parseInt(p.product_qty.toString()) || 0),
+        0
+      );
+      if (productQty > 0 && value > 0) {
+        const perItem = value / productQty;
+        formik.setFieldValue(
+          `deliveries.${idx}.delivery_cost_per_item`,
+          perItem
+        );
+      } else if (value === 0) {
+        formik.setFieldValue(`deliveries.${idx}.delivery_cost_per_item`, 0);
+      }
+    }
+  }, []);
+
   const handleDeliveryCostPerItemChange = useCallback(
     (idx: number, value: number) => {
       formik.setFieldValue(`deliveries.${idx}.delivery_cost_per_item`, value);
@@ -492,7 +677,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
         }
       }
     },
-    [formik]
+    []
   );
 
   const handleDeliveryCostChangeWrapper = useCallback(
@@ -967,45 +1152,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 label='Gudang'
                 placeholder='Pilih gudang asal...'
                 value={formik.values.source_warehouse}
-                onChange={(val) => {
-                  const newSourceWarehouseId = (val as WarehouseOptionType)
-                    ?.value;
-
-                  if (newSourceWarehouseId) {
-                    if (
-                      newSourceWarehouseId ===
-                      formik.values.destination_warehouse_id
-                    ) {
-                      const destinationWarehouseName =
-                        (
-                          formik.values
-                            .destination_warehouse as WarehouseOptionType
-                        )?.label || 'gudang tujuan';
-
-                      toast.error(
-                        `Tidak bisa memilih gudang yang sama. Gudang asal tidak boleh sama dengan ${destinationWarehouseName}.`
-                      );
-                      return;
-                    }
-                  }
-
-                  formik.setFieldTouched('source_warehouse', true);
-                  formik.setFieldValue('source_warehouse', val);
-                  formik.setFieldTouched('source_warehouse_id', true);
-                  formik.setFieldValue(
-                    'source_warehouse_id',
-                    newSourceWarehouseId
-                  );
-
-                  if (
-                    formik.errors.destination_warehouse_id ===
-                    'Gudang tujuan tidak boleh sama dengan gudang asal!'
-                  ) {
-                    formik.setFieldError('destination_warehouse_id', undefined);
-                  }
-                }}
+                onChange={handleSourceWarehouseChange}
                 options={warehouseOptions}
                 onInputChange={setWarehouseSelectInputValue}
+                onMenuScrollToBottom={loadMoreWarehouses}
                 isLoading={isLoadingWarehouses}
                 isError={
                   formik.touched.source_warehouse_id &&
@@ -1066,44 +1216,11 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                 label='Gudang'
                 placeholder='Pilih gudang tujuan...'
                 value={formik.values.destination_warehouse}
-                onChange={(val) => {
-                  const newDestinationWarehouseId = (val as WarehouseOptionType)
-                    ?.value;
-
-                  if (newDestinationWarehouseId) {
-                    if (
-                      newDestinationWarehouseId ===
-                      formik.values.source_warehouse_id
-                    ) {
-                      const sourceWarehouseName =
-                        (formik.values.source_warehouse as WarehouseOptionType)
-                          ?.label || 'gudang asal';
-
-                      toast.error(
-                        `Tidak bisa memilih gudang yang sama. Gudang tujuan tidak boleh sama dengan ${sourceWarehouseName}.`
-                      );
-                      return;
-                    }
-                  }
-
-                  formik.setFieldTouched('destination_warehouse', true);
-                  formik.setFieldValue('destination_warehouse', val);
-                  formik.setFieldTouched('destination_warehouse_id', true);
-                  formik.setFieldValue(
-                    'destination_warehouse_id',
-                    newDestinationWarehouseId
-                  );
-
-                  if (
-                    formik.errors.destination_warehouse_id ===
-                    'Gudang tujuan tidak boleh sama dengan gudang asal!'
-                  ) {
-                    formik.setFieldError('destination_warehouse_id', undefined);
-                  }
-                }}
+                onChange={handleDestinationWarehouseChange}
                 options={warehouseOptions}
                 onInputChange={setWarehouseSelectInputValue}
                 isLoading={isLoadingWarehouses}
+                onMenuScrollToBottom={loadMoreWarehouses}
                 isError={
                   formik.touched.destination_warehouse_id &&
                   Boolean(formik.errors.destination_warehouse_id)
@@ -1173,18 +1290,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                               selectedProducts.length &&
                             formik.values.products?.length > 0
                           }
-                          onChange={(
-                            e: React.ChangeEvent<HTMLInputElement>
-                          ) => {
-                            if (e.target.checked) {
-                              setSelectedProducts(
-                                formik.values.products?.map((_, idx) => idx) ??
-                                  []
-                              );
-                            } else {
-                              setSelectedProducts([]);
-                            }
-                          }}
+                          onChange={handleProductSelectAllChange}
                           classNames={{
                             wrapper: 'flex justify-center',
                             checkbox: 'checkbox checkbox-sm',
@@ -1221,17 +1327,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                           <CheckboxInput
                             name={`product-${idx}`}
                             checked={selectedProducts.includes(idx)}
-                            onChange={(
-                              e: React.ChangeEvent<HTMLInputElement>
-                            ) => {
-                              if (e.target.checked) {
-                                setSelectedProducts([...selectedProducts, idx]);
-                              } else {
-                                setSelectedProducts(
-                                  selectedProducts.filter((i) => i !== idx)
-                                );
-                              }
-                            }}
+                            onChange={handleProductCheckboxChange}
                             classNames={{
                               wrapper: 'flex justify-center',
                               checkbox: 'checkbox checkbox-sm',
@@ -1243,26 +1339,10 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                         <SelectInput
                           required
                           value={product.product ?? undefined}
-                          onChange={(val) => {
-                            formik.setFieldTouched(
-                              `products.${idx}.product`,
-                              true
-                            );
-                            formik.setFieldValue(
-                              `products.${idx}.product`,
-                              val
-                            );
-                            formik.setFieldTouched(
-                              `products.${idx}.product_id`,
-                              true
-                            );
-                            formik.setFieldValue(
-                              `products.${idx}.product_id`,
-                              (val as ProductWarehouseOptionType)?.value
-                            );
-                          }}
+                          onChange={(val) => handleProductChange(idx, val)}
                           options={productWarehouseOptions}
                           onInputChange={setProductWarehouseSelectInputValue}
+                          onMenuScrollToBottom={loadMoreProductWarehouses}
                           isLoading={isLoadingProductWarehouses}
                           isDisabled={
                             type === 'detail' ||
@@ -1386,19 +1466,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                               selectedDeliveries.length &&
                             formik.values.deliveries?.length > 0
                           }
-                          onChange={(
-                            e: React.ChangeEvent<HTMLInputElement>
-                          ) => {
-                            if (e.target.checked) {
-                              setSelectedDeliveries(
-                                formik.values.deliveries?.map(
-                                  (_, idx) => idx
-                                ) ?? []
-                              );
-                            } else {
-                              setSelectedDeliveries([]);
-                            }
-                          }}
+                          onChange={handleDeliverySelectAllChange}
                           classNames={{
                             wrapper: 'flex justify-center',
                             checkbox: 'checkbox checkbox-sm',
@@ -1481,20 +1549,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                           <CheckboxInput
                             name={`delivery-${idx}`}
                             checked={selectedDeliveries.includes(idx)}
-                            onChange={(
-                              e: React.ChangeEvent<HTMLInputElement>
-                            ) => {
-                              if (e.target.checked) {
-                                setSelectedDeliveries([
-                                  ...selectedDeliveries,
-                                  idx,
-                                ]);
-                              } else {
-                                setSelectedDeliveries(
-                                  selectedDeliveries.filter((i) => i !== idx)
-                                );
-                              }
-                            }}
+                            onChange={handleDeliveryCheckboxChange}
                             classNames={{
                               wrapper: 'flex justify-center',
                               checkbox: 'checkbox checkbox-sm',
@@ -1507,24 +1562,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                           required
                           placeholder='Pilih produk...'
                           value={delivery.products[0]?.product ?? undefined}
-                          onChange={(val) => {
-                            formik.setFieldTouched(
-                              `deliveries.${idx}.products.0.product`,
-                              true
-                            );
-                            formik.setFieldValue(
-                              `deliveries.${idx}.products.0.product`,
-                              val
-                            );
-                            formik.setFieldTouched(
-                              `deliveries.${idx}.products.0.product_id`,
-                              true
-                            );
-                            formik.setFieldValue(
-                              `deliveries.${idx}.products.0.product_id`,
-                              (val as OptionType)?.value
-                            );
-                          }}
+                          onChange={(val) =>
+                            handleDeliveryProductChange(idx, val)
+                          }
                           options={getFilteredProductWarehouseOptions()}
                           isDisabled={type === 'detail'}
                           isClearable
@@ -1575,24 +1615,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                           required
                           placeholder='Pilih supplier...'
                           value={delivery.supplier}
-                          onChange={(val) => {
-                            formik.setFieldTouched(
-                              `deliveries.${idx}.supplier`,
-                              true
-                            );
-                            formik.setFieldValue(
-                              `deliveries.${idx}.supplier`,
-                              val
-                            );
-                            formik.setFieldTouched(
-                              `deliveries.${idx}.supplier_id`,
-                              true
-                            );
-                            formik.setFieldValue(
-                              `deliveries.${idx}.supplier_id`,
-                              (val as OptionType)?.value
-                            );
-                          }}
+                          onChange={(val) =>
+                            handleDeliverySupplierChange(idx, val)
+                          }
                           options={supplierOptions}
                           onInputChange={setSupplierSelectInputValue}
                           isLoading={isLoadingSuppliers}
@@ -1684,20 +1709,9 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                           <FileInput
                             accept='.pdf,.jpg,.jpeg,.png'
                             name={`deliveries.${idx}.document`}
-                            onChange={(e) => {
-                              const file = e.target.files?.[0];
-                              if (file) {
-                                if (file.size > 5 * 1024 * 1024) {
-                                  toast.error('Ukuran dokumen maksimal 5 MB!');
-                                  e.target.value = '';
-                                  return;
-                                }
-                                formik.setFieldValue(
-                                  `deliveries.${idx}.document`,
-                                  file
-                                );
-                              }
-                            }}
+                            onChange={(e) =>
+                              handleDeliveryDocumentChange(idx, e)
+                            }
                             {...isRepeaterInputError(
                               'deliveries',
                               'document',
diff --git a/src/components/pages/inventory/product/detail/InventoryProductDetail.tsx b/src/components/pages/inventory/product/detail/InventoryProductDetail.tsx
index 42c177d7..39609b06 100644
--- a/src/components/pages/inventory/product/detail/InventoryProductDetail.tsx
+++ b/src/components/pages/inventory/product/detail/InventoryProductDetail.tsx
@@ -91,7 +91,7 @@ const InventoryProductDetail = ({
                   <td>:</td>
                   <td>
                     {inventoryProduct?.tax
-                      ? formatCurrency(inventoryProduct?.tax)
+                      ? formatNumber(inventoryProduct?.tax) + '%'
                       : '-'}
                   </td>
                 </tr>
diff --git a/src/components/pages/marketing/MarketingTable.tsx b/src/components/pages/marketing/MarketingTable.tsx
index 1c37dbbb..8f1a6cf9 100644
--- a/src/components/pages/marketing/MarketingTable.tsx
+++ b/src/components/pages/marketing/MarketingTable.tsx
@@ -16,7 +16,7 @@ import { TableRowSizeSelector } from '@/components/table/TableRowSizeSelector';
 import { TableToolbar } from '@/components/table/TableToolbar';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { cn, formatCurrency, formatDate } from '@/lib/helper';
+import { cn, formatCurrency, formatDate, formatTitleCase } from '@/lib/helper';
 import {
   MarketingApi,
   SalesOrderApi,
@@ -33,6 +33,7 @@ import RequirePermission from '@/components/helper/RequirePermission';
 import { useAuth } from '@/services/hooks/useAuth';
 import { CustomerApi, ProductApi } from '@/services/api/master-data';
 import { MARKETING_APPROVAL_LINE } from '@/config/approval-line';
+import Badge from '@/components/Badge';
 
 const RowsOptionsMenu = ({
   type = 'dropdown',
@@ -184,12 +185,16 @@ const MarketingTable = () => {
   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',
   });
@@ -400,6 +405,8 @@ const MarketingTable = () => {
                     .join(',') || ''
                 )
               }
+              onInputChange={setProductsInputValue}
+              onMenuScrollToBottom={loadMoreProducts}
               isMulti
             />
             {/* select status */}
@@ -444,6 +451,8 @@ const MarketingTable = () => {
                   (value as OptionType)?.value.toString() || ''
                 )
               }
+              onInputChange={setCustomersInputValue}
+              onMenuScrollToBottom={loadMoreCustomers}
             />
           </TableRowSizeSelector>
         </div>
@@ -512,8 +521,53 @@ const MarketingTable = () => {
               },
             },
             {
-              accessorKey: 'latest_approval.step_name',
+              accessorKey: 'approval.step_name',
               header: 'Status',
+              cell: (props) => {
+                const approval = props.row.original.latest_approval;
+                const isRejected = approval?.action == 'REJECTED';
+                const isApproved = approval?.action == 'APPROVED';
+                return (
+                  <Badge
+                    variant='soft'
+                    className={{
+                      badge:
+                        'rounded-lg px-2 w-full 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>
+                );
+              },
             },
             {
               accessorKey: 'customer.name',
diff --git a/src/components/pages/marketing/detail/MarketingDetail.tsx b/src/components/pages/marketing/detail/MarketingDetail.tsx
index 12ebda20..91e02928 100644
--- a/src/components/pages/marketing/detail/MarketingDetail.tsx
+++ b/src/components/pages/marketing/detail/MarketingDetail.tsx
@@ -16,6 +16,7 @@ import {
   formatCurrency,
   formatDate,
   formatNumber,
+  formatTitleCase,
   formatVechicleNumber,
 } from '@/lib/helper';
 import {
@@ -34,6 +35,7 @@ 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,
@@ -121,6 +123,10 @@ const MarketingDetail = ({
     );
   };
 
+  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'>
@@ -230,7 +236,46 @@ const MarketingDetail = ({
                 <tr>
                   <td className='font-semibold'>Status</td>
                   <td>:</td>
-                  <td>{initialValues?.latest_approval?.step_name}</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>
diff --git a/src/components/pages/marketing/form/MarketingForm.schema.ts b/src/components/pages/marketing/form/MarketingForm.schema.ts
index d81cdb9c..b09129c3 100644
--- a/src/components/pages/marketing/form/MarketingForm.schema.ts
+++ b/src/components/pages/marketing/form/MarketingForm.schema.ts
@@ -11,6 +11,13 @@ import {
 type MarketingSchemaType = {
   customer_id: number | undefined;
   sales_person_id: number | undefined;
+  sales_person:
+    | {
+        value: number;
+        label: string;
+      }
+    | undefined
+    | null;
   customer:
     | {
         value: number;
@@ -33,7 +40,11 @@ type DeliveryOrderSchemaType = {
 export const SalesOrderSchema: Yup.ObjectSchema<SalesOrderSchemaType> =
   Yup.object({
     customer_id: Yup.number().required('Customer wajib diisi!'),
-    sales_person_id: Yup.number().required('Sales Person wajib diisi!'),
+    sales_person_id: Yup.number().required('Sales wajib diisi!'),
+    sales_person: Yup.object({
+      value: Yup.number().required(),
+      label: Yup.string().required(),
+    }).nullable(),
     customer: Yup.object({
       value: Yup.number().required(),
       label: Yup.string().required(),
diff --git a/src/components/pages/marketing/form/MarketingForm.tsx b/src/components/pages/marketing/form/MarketingForm.tsx
index 2fbca835..b9a1a1fb 100644
--- a/src/components/pages/marketing/form/MarketingForm.tsx
+++ b/src/components/pages/marketing/form/MarketingForm.tsx
@@ -50,6 +50,8 @@ import { DeliveryOrderProductFormValues } from '@/components/pages/marketing/for
 import RequirePermission from '@/components/helper/RequirePermission';
 import AlertErrorList from '@/components/helper/form/FormErrors';
 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);
@@ -244,7 +246,15 @@ const MarketingForm = ({
   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');
 
   // ================== SETUP FORMIK ==================
   const formikInitialValues = useMemo<
@@ -255,6 +265,12 @@ const MarketingForm = ({
       notes: initialValues?.notes || undefined,
       customer_id: initialValues?.customer?.id || undefined,
       sales_person_id: initialValues?.sales_person?.id || 1,
+      sales_person: initialValues?.sales_person
+        ? {
+            value: initialValues.sales_person.id,
+            label: initialValues.sales_person.name,
+          }
+        : null,
       customer: initialValues?.customer
         ? {
             value: initialValues.customer.id,
@@ -345,6 +361,8 @@ const MarketingForm = ({
     },
   });
 
+  const memoSalesOrder = formik.values.sales_order;
+
   // ================== FORM REPEATER HANDLER ==================
   const createMarketingHandler = async (values: CreateSalesOrderPayload) => {
     setIsLoading(true);
@@ -443,18 +461,37 @@ const MarketingForm = ({
     },
     []
   );
+  const handleChangeSalesPerson = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      formik.setFieldValue('sales_person_id', (val as OptionType)?.value);
+      formik.setFieldValue('sales_person', val as OptionType);
+    },
+    []
+  );
   const handleDelete = useCallback(() => {
     deleteModal.openModal();
   }, [deleteModal]);
 
   // ================== SALES ORDER HANDLER ==================
-  const handleDeleteSO = useCallback((id: number) => {
-    const currentProducts = formik.values.sales_order;
-    formik.setFieldValue(
-      'sales_order',
-      currentProducts.filter((p) => p.id != id)
-    );
-  }, []);
+  const handleDeleteSO = useCallback(
+    (id: number) => {
+      const currentProducts = formik.values.sales_order;
+      formik.setFieldValue(
+        'sales_order',
+        currentProducts.filter((p) => p.id != id)
+      );
+    },
+    [memoSalesOrder]
+  );
+  const handleEditSO = useCallback(
+    (id: number) => {
+      const currentProducts = formik.values.sales_order;
+      const selectedProduct = currentProducts.find((p) => p.id == id);
+      setSelectedMarketingProduct(selectedProduct ?? null);
+      addSOModal.openModal();
+    },
+    [memoSalesOrder]
+  );
   const handleBulkDeleteSO = useCallback(() => {
     const currentProducts = formik.values.sales_order;
     formik.setFieldValue(
@@ -464,7 +501,7 @@ const MarketingForm = ({
       )
     );
     setRowSOSelection({});
-  }, [selectedRowSOIds]);
+  }, [selectedRowSOIds, memoSalesOrder]);
   const handleAddSOClick = useCallback(() => {
     setSelectedMarketingProduct(null);
     addSOModal.openModal();
@@ -500,7 +537,7 @@ const MarketingForm = ({
 
       addSOModal.closeModal();
     },
-    [addSOModal]
+    [addSOModal, memoSalesOrder]
   );
 
   // ================== DELIVERY ORDER HANDLER ==================
@@ -545,8 +582,30 @@ const MarketingForm = ({
     },
     [addDOModal]
   );
-
-  const memoSalesOrder = formik.values.sales_order;
+  const handleDeleteDO = useCallback(
+    async (id: number) => {
+      setDeliveryOrderValues((prev) =>
+        prev.map((product) =>
+          product.id === id
+            ? {
+                ...product,
+                ...{
+                  unit_price: '',
+                  total_weight: '',
+                  qty: '',
+                  avg_weight: '',
+                  total_price: '',
+                  delivery_date: '',
+                },
+              }
+            : product
+        )
+      );
+      addDOModal.closeModal();
+      setSelectedDeliveryProduct(null);
+    },
+    [addDOModal]
+  );
 
   useEffect(() => {
     formik.setFieldValue('delivery_order', deliveryOrderValues);
@@ -580,6 +639,7 @@ const MarketingForm = ({
           className={{
             wrapper: 'bg-white w-full',
           }}
+          variant='bordered'
         >
           <div className='grid sm:grid-cols-2 gap-3 mt-3'>
             <SelectInput
@@ -588,6 +648,8 @@ const MarketingForm = ({
               isLoading={isLoadingCustomerOptions}
               value={formik.values.customer}
               onChange={handleChangeCustomer}
+              onInputChange={setInputCustomerValue}
+              onMenuScrollToBottom={loadMoreCustomer}
               isError={
                 formik.touched.customer_id && Boolean(formik.errors.customer_id)
               }
@@ -595,7 +657,9 @@ const MarketingForm = ({
               isClearable
               placeholder='Pilih Pelanggan'
               isDisabled={
-                formType === 'add_deliver' || formType === 'edit_deliver'
+                formType === 'add_deliver' ||
+                formType === 'edit_deliver' ||
+                formType === 'edit'
               }
             />
             <DateInput
@@ -617,6 +681,7 @@ const MarketingForm = ({
           className={{
             wrapper: 'bg-white w-full',
           }}
+          variant='bordered'
         >
           <MemoizedSalesOrderProductTable
             formType={formType}
@@ -625,6 +690,7 @@ const MarketingForm = ({
             setRowSelection={setRowSOSelection}
             selectedRowIds={selectedRowSOIds}
             onDelete={handleDeleteSO}
+            onEdit={handleEditSO}
             onBulkDelete={handleBulkDeleteSO}
             onAddProductClick={handleAddSOClick}
           />
@@ -644,6 +710,7 @@ const MarketingForm = ({
                 formType={formType}
                 data={deliveryOrderValues}
                 onEdit={handleEditDO}
+                onDelete={handleDeleteDO}
                 onAddProductClick={handleAddDOClick}
               />
             </Card>
@@ -651,19 +718,42 @@ const MarketingForm = ({
 
         {/* Input Notes */}
         <div className='grid sm:grid-cols-2 gap-3'>
-          <DebouncedTextArea
-            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={formType === 'add_deliver' || formType === 'edit_deliver'}
-          />
-          <div className='flex flex-col h-full justify-between items-end py-6'>
+          <div className='flex flex-col h-full items-end gap-3'>
+            <SelectInput
+              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={
+                formType === 'add_deliver' || formType === 'edit_deliver'
+              }
+            />
+            <DebouncedTextArea
+              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={
+                formType === 'add_deliver' || formType === 'edit_deliver'
+              }
+            />
+          </div>
+          <div className='flex flex-col h-full justify-end items-end'>
             <span>Total Penjualan</span>
             <span className='text-lg font-semibold'>
               {formatCurrency(grandTotal)}{' '}
diff --git a/src/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.tsx b/src/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.tsx
index 25a20982..56f00135 100644
--- a/src/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.tsx
+++ b/src/components/pages/marketing/form/repeater/delivery-order/DeliverOrderProduct.tsx
@@ -18,6 +18,11 @@ import * as Yup from 'yup';
 import { isResponseSuccess } from '@/lib/api-helper';
 import AlertErrorList from '@/components/helper/form/FormErrors';
 import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
+import useSWR from 'swr';
+import { ProductApi } from '@/services/api/master-data';
+
+const roundWeight = (value: number) => Number(value.toFixed(2));
+const roundPrice = (value: number) => Math.round(value);
 
 const DeliveryOrderProductForm = ({
   formState,
@@ -43,6 +48,17 @@ const DeliveryOrderProductForm = ({
   );
   const [currentInput, setCurrentInput] = useState<string>('');
 
+  // ============ Fetch Data ============
+  const { data: productData } = useSWR(
+    selectedProduct?.value
+      ? ProductApi.basePath + '/' + selectedProduct?.value
+      : null,
+    () =>
+      selectedProduct?.value
+        ? ProductApi.getSingle(Number(selectedProduct?.value))
+        : undefined
+  );
+
   const salesOrder = salesOrders.find(
     (item) => item.id === initialValues?.marketing_product_id
   );
@@ -90,6 +106,7 @@ const DeliveryOrderProductForm = ({
         await onUpdateForm?.(values.marketing_product_id as number, values);
       }
       handleResetForm();
+      setSelectedProduct(null);
     },
   });
 
@@ -108,27 +125,65 @@ const DeliveryOrderProductForm = ({
         marketing_product: undefined,
       },
     });
-    setSelectedProduct(null);
+    // setSelectedProduct(null);
   };
 
   const handleBlurField = (field: string) => {
     setCurrentInput(field);
-    const { qty, unit_price, total_price, avg_weight, total_weight } =
-      formik.values;
 
-    if (field === 'unit_price' || field === 'total_price' || field === 'qty') {
-      if (qty && unit_price && (field === 'unit_price' || field === 'qty')) {
-        formik.setFieldValue('total_price', Number(qty) * Number(unit_price));
-      } else if (qty && total_price && field === 'total_price') {
-        formik.setFieldValue('unit_price', Number(total_price) / Number(qty));
+    const qty = Number(formik.values.qty || 0);
+    const avgWeight = Number(formik.values.avg_weight || 0);
+    const totalWeight = Number(formik.values.total_weight || 0);
+    const unitPrice = Number(formik.values.unit_price || 0);
+    const totalPrice = Number(formik.values.total_price || 0);
+
+    if (qty <= 0) return;
+
+    switch (field) {
+      // ===== SOURCE FIELDS =====
+      case 'qty': {
+        if (avgWeight > 0) {
+          formik.setFieldValue('total_weight', roundWeight(qty * avgWeight));
+        }
+
+        if (unitPrice > 0) {
+          formik.setFieldValue('total_price', roundPrice(qty * unitPrice));
+        }
+        break;
       }
-    }
 
-    if (field === 'avg_weight' || field === 'total_weight' || field === 'qty') {
-      if (qty && avg_weight && (field === 'avg_weight' || field === 'qty')) {
-        formik.setFieldValue('total_weight', Number(qty) * Number(avg_weight));
-      } else if (qty && total_weight && field === 'total_weight') {
-        formik.setFieldValue('avg_weight', Number(total_weight) / Number(qty));
+      case 'avg_weight': {
+        if (avgWeight > 0) {
+          const tw = roundWeight(qty * avgWeight);
+          formik.setFieldValue('total_weight', tw);
+
+          if (unitPrice > 0) {
+            formik.setFieldValue('total_price', roundPrice(qty * unitPrice));
+          }
+        }
+        break;
+      }
+
+      case 'unit_price': {
+        if (unitPrice > 0) {
+          formik.setFieldValue('total_price', roundPrice(qty * unitPrice));
+        }
+        break;
+      }
+
+      // ===== TOTAL EDITABLE =====
+      case 'total_weight': {
+        if (totalWeight > 0) {
+          formik.setFieldValue('avg_weight', roundWeight(totalWeight / qty));
+        }
+        break;
+      }
+
+      case 'total_price': {
+        if (totalPrice > 0) {
+          formik.setFieldValue('unit_price', roundPrice(totalPrice / qty));
+        }
+        break;
       }
     }
   };
@@ -183,7 +238,7 @@ const DeliveryOrderProductForm = ({
           </div>
         )}
 
-        <div className='grid sm:grid-cols-2 gap-4'>
+        <div className='grid sm:grid-cols-3 gap-4'>
           <SelectInput
             options={options}
             label='Produk'
@@ -287,7 +342,9 @@ const DeliveryOrderProductForm = ({
             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'
@@ -301,33 +358,28 @@ const DeliveryOrderProductForm = ({
             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
+                  )?.qty +
+                  ' ' +
+                  (isResponseSuccess(productData)
+                    ? productData?.data?.uom.name
+                    : '')
                 : ''
             }
           />
-        </div>
-        <div className='divider my-6'></div>
-        <div className='grid sm:grid-cols-2 gap-4'>
-          <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='Harga Satuan (Rp)'
@@ -342,7 +394,20 @@ const DeliveryOrderProductForm = ({
             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)'
diff --git a/src/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema.ts b/src/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema.ts
index e62ed701..879efc12 100644
--- a/src/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema.ts
+++ b/src/components/pages/marketing/form/repeater/sales-order/SalesOrderProduct.schema.ts
@@ -18,6 +18,7 @@ type SalesOrderProductSchemaType = {
   avg_weight: string | number | undefined;
   total_price: string | number | undefined;
   vehicle_number?: string | undefined;
+  uom?: string | null | undefined;
 };
 
 export const SalesOrderProductSchema: Yup.ObjectSchema<SalesOrderProductSchemaType> =
@@ -57,6 +58,7 @@ export const SalesOrderProductSchema: Yup.ObjectSchema<SalesOrderProductSchemaTy
     total_price: Yup.number()
       .min(1, 'Total Penjualan wajib diisi!')
       .required('Total Penjualan wajib diisi!'),
+    uom: Yup.string().nullable().optional().notRequired(),
   });
 
 export type SalesOrderProductFormValues = Yup.InferType<
diff --git a/src/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm.tsx b/src/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm.tsx
index 78529fe4..52d844cd 100644
--- a/src/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm.tsx
+++ b/src/components/pages/marketing/form/repeater/sales-order/SalesOrderProductForm.tsx
@@ -11,7 +11,7 @@ import SelectInput, {
   useSelect,
 } from '@/components/input/SelectInput';
 import { Kandang } from '@/types/api/master-data/kandang';
-import { WarehouseApi } from '@/services/api/master-data';
+import { ProductApi, UomApi, 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';
@@ -26,6 +26,10 @@ 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';
+
+const roundWeight = (value: number) => Number(value.toFixed(2));
+const roundPrice = (value: number) => Math.round(value);
 
 const SalesOrderProductForm = ({
   initialValues,
@@ -39,21 +43,35 @@ const SalesOrderProductForm = ({
 }) => {
   const [formErrorMessage, setFormErrorMessage] = useState('');
   const [currentInput, setCurrentInput] = useState<string>('');
+  const [selectedProductWarehouse, setSelectedProductWarehouse] =
+    useState<ProductWarehouse | null>(null);
+
+  // ============ Fetch Data ============
+  const { data: productData } = useSWR(
+    selectedProductWarehouse?.product_id
+      ? ProductApi.basePath + '/' + selectedProductWarehouse?.product_id
+      : null,
+    () =>
+      selectedProductWarehouse?.product_id
+        ? ProductApi.getSingle(selectedProductWarehouse?.product_id)
+        : undefined
+  );
 
   // ============ Formik ============
   const formik = useFormik<SalesOrderProductFormValues>({
     enableReinitialize: true,
     initialValues: {
-      vehicle_number: initialValues?.vehicle_number || undefined,
+      vehicle_number: initialValues?.vehicle_number || '',
       kandang_id: initialValues?.kandang_id || undefined,
-      kandang: initialValues?.kandang || undefined,
-      product_warehouse: initialValues?.product_warehouse || undefined,
+      kandang: initialValues?.kandang || null,
+      product_warehouse: initialValues?.product_warehouse || null,
       product_warehouse_id: initialValues?.product_warehouse_id || undefined,
-      unit_price: initialValues?.unit_price || undefined,
-      total_weight: initialValues?.total_weight || undefined,
-      qty: initialValues?.qty || undefined,
-      avg_weight: initialValues?.avg_weight || undefined,
-      total_price: initialValues?.total_price || undefined,
+      unit_price: initialValues?.unit_price || '',
+      total_weight: initialValues?.total_weight || '',
+      qty: initialValues?.qty || '',
+      avg_weight: initialValues?.avg_weight || '',
+      total_price: initialValues?.total_price || '',
+      uom: initialValues?.uom || '',
     },
     validationSchema: SalesOrderProductSchema,
     onSubmit: async (values) => {
@@ -69,17 +87,21 @@ const SalesOrderProductForm = ({
   const {
     options: kandangSourceOptions,
     isLoadingOptions: isLoadingKandangSourceOptions,
+    setInputValue: setKandangInputValue,
+    loadMore: loadMoreKandang,
   } = useSelect<Kandang>(WarehouseApi.basePath, 'id', 'name');
 
   const {
     options: warehouseSourceOptions,
     rawData: warehouseSourceRawData,
     isLoadingOptions: isLoadingWarehouseSourceOptions,
+    setInputValue: setWarehouseInputValue,
+    loadMore: loadMoreWarehouse,
   } = useSelect<ProductWarehouse>(
     ProductWarehouseApi.basePath,
     'id',
     'product.name',
-    'search',
+    '',
     {
       warehouse_id: formik.values.kandang_id?.toString() ?? '',
     }
@@ -112,6 +134,7 @@ const SalesOrderProductForm = ({
       const productWarehouse = warehouseSourceRawData?.data.find(
         (item: ProductWarehouse) => item.id === newId
       );
+      setSelectedProductWarehouse(productWarehouse || null);
       formik.setFieldValue('qty', productWarehouse?.quantity);
       handleBlurField('qty');
     } else {
@@ -139,40 +162,78 @@ const SalesOrderProductForm = ({
 
   const handleBlurField = (field: string) => {
     setCurrentInput(field);
-    const { qty, unit_price, total_price, avg_weight, total_weight } =
-      formik.values;
 
-    if (field === 'unit_price' || field === 'total_price' || field === 'qty') {
-      if (qty && unit_price && (field === 'unit_price' || field === 'qty')) {
-        formik.setFieldValue(
-          'total_price',
-          (qty as number) * (unit_price as number)
-        );
-      } else if (qty && total_price && field === 'total_price') {
-        formik.setFieldValue(
-          'unit_price',
-          (total_price as number) / (qty as number)
-        );
+    const qty = Number(formik.values.qty || 0);
+    const avgWeight = Number(formik.values.avg_weight || 0);
+    const totalWeight = Number(formik.values.total_weight || 0);
+    const unitPrice = Number(formik.values.unit_price || 0);
+    const totalPrice = Number(formik.values.total_price || 0);
+
+    if (qty <= 0) return;
+
+    switch (field) {
+      // ===== SOURCE FIELDS =====
+      case 'qty': {
+        if (avgWeight > 0) {
+          formik.setFieldValue('total_weight', roundWeight(qty * avgWeight));
+        }
+
+        if (unitPrice > 0) {
+          formik.setFieldValue('total_price', roundPrice(qty * unitPrice));
+        }
+        break;
       }
-    }
 
-    if (field === 'avg_weight' || field === 'total_weight' || field === 'qty') {
-      if (qty && avg_weight && (field === 'avg_weight' || field === 'qty')) {
-        formik.setFieldValue(
-          'total_weight',
-          (qty as number) * (avg_weight as number)
-        );
-      } else if (qty && total_weight && field === 'total_weight') {
-        formik.setFieldValue(
-          'avg_weight',
-          (total_weight as number) / (qty as number)
-        );
+      case 'avg_weight': {
+        if (avgWeight > 0) {
+          const tw = roundWeight(qty * avgWeight);
+          formik.setFieldValue('total_weight', tw);
+
+          if (unitPrice > 0) {
+            formik.setFieldValue('total_price', roundPrice(qty * unitPrice));
+          }
+        }
+        break;
+      }
+
+      case 'unit_price': {
+        if (unitPrice > 0) {
+          formik.setFieldValue('total_price', roundPrice(qty * unitPrice));
+        }
+        break;
+      }
+
+      // ===== TOTAL EDITABLE =====
+      case 'total_weight': {
+        if (totalWeight > 0) {
+          formik.setFieldValue('avg_weight', roundWeight(totalWeight / qty));
+        }
+        break;
+      }
+
+      case 'total_price': {
+        if (totalPrice > 0) {
+          formik.setFieldValue('unit_price', roundPrice(totalPrice / qty));
+        }
+        break;
       }
     }
   };
 
   // ===== Formik Error List =====
-  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(
+    formik,
+    {
+      onBeforeSubmit(e) {
+        e.preventDefault();
+        handleBlurField(currentInput);
+        formik.setFieldValue(
+          'uom',
+          isResponseSuccess(productData) ? productData?.data?.uom.name : ''
+        );
+      },
+    }
+  );
 
   return (
     <>
@@ -188,7 +249,7 @@ const SalesOrderProductForm = ({
             </Alert>
           </div>
         )}
-        <div className='grid sm:grid-cols-2 gap-4 z-200'>
+        <div className='grid sm:grid-cols-3 gap-4 z-200'>
           <PatternInput
             name='vehicle_number'
             label='No. Polisi'
@@ -215,6 +276,8 @@ const SalesOrderProductForm = ({
             value={formik.values.kandang}
             onChange={kandangChangeHandler}
             isClearable
+            onInputChange={setKandangInputValue}
+            onMenuScrollToBottom={loadMoreKandang}
             isError={
               formik.touched.kandang_id && Boolean(formik.errors.kandang_id)
             }
@@ -228,6 +291,8 @@ const SalesOrderProductForm = ({
             isLoading={isLoadingWarehouseSourceOptions}
             value={formik.values.product_warehouse}
             onChange={warehouseChangeHandler}
+            onInputChange={setWarehouseInputValue}
+            onMenuScrollToBottom={loadMoreWarehouse}
             isClearable
             placeholder={
               formik.values.kandang_id
@@ -243,6 +308,9 @@ const SalesOrderProductForm = ({
             }
             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'
@@ -256,6 +324,15 @@ const SalesOrderProductForm = ({
             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'>
+                  {isResponseSuccess(productData)
+                    ? productData?.data?.uom.name
+                    : ''}
+                </span>
+              </div>
+            }
             bottomLabel={
               isResponseSuccess(warehouseSourceRawData) &&
               formik.values.product_warehouse_id
@@ -264,32 +341,13 @@ const SalesOrderProductForm = ({
                       (item) => item.id === formik.values.product_warehouse_id
                     )?.quantity ?? 0
                   )} ${
-                    warehouseSourceRawData?.data?.find(
-                      (item) => item.id === formik.values.product_warehouse_id
-                    )?.product?.uom?.name ?? ''
+                    isResponseSuccess(productData)
+                      ? productData?.data?.uom.name
+                      : ''
                   }`
                 : ''
             }
           />
-        </div>
-        <div className='divider my-6'></div>
-        <div className='grid sm:grid-cols-2 gap-4 z-200'>
-          <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='Harga Satuan (Rp)'
@@ -306,6 +364,22 @@ const SalesOrderProductForm = ({
             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)'
diff --git a/src/components/pages/marketing/form/table-view/DeliveryOrderProductTable.tsx b/src/components/pages/marketing/form/table-view/DeliveryOrderProductTable.tsx
index ac59529e..6b6f6a81 100644
--- a/src/components/pages/marketing/form/table-view/DeliveryOrderProductTable.tsx
+++ b/src/components/pages/marketing/form/table-view/DeliveryOrderProductTable.tsx
@@ -16,6 +16,7 @@ type DeliveryOrderProductTableProps = {
   data: DeliveryOrderProductFormValues[];
   formType?: 'add' | 'edit' | 'add_deliver' | 'edit_deliver';
   onEdit: (id: number) => void;
+  onDelete: (id: number) => void;
   onAddProductClick: () => void;
 };
 
@@ -23,10 +24,13 @@ const DeliveryOrderProductTable = ({
   data,
   formType,
   onEdit,
+  onDelete,
   onAddProductClick,
 }: DeliveryOrderProductTableProps) => {
   const onEditRef = useRef(onEdit);
   onEditRef.current = onEdit;
+  const onDeleteRef = useRef(onDelete);
+  onDeleteRef.current = onDelete;
 
   const canAddData = data.filter((item) => !Boolean(item.qty));
 
@@ -144,16 +148,29 @@ const DeliveryOrderProductTable = ({
           <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='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 && '-'}
             </>
diff --git a/src/components/pages/marketing/form/table-view/SalesOrderProductTable.tsx b/src/components/pages/marketing/form/table-view/SalesOrderProductTable.tsx
index c37bbfb1..02d33587 100644
--- a/src/components/pages/marketing/form/table-view/SalesOrderProductTable.tsx
+++ b/src/components/pages/marketing/form/table-view/SalesOrderProductTable.tsx
@@ -23,6 +23,7 @@ type SalesOrderProductTableProps = {
   >;
   selectedRowIds: number[];
   onDelete: (id: number) => void;
+  onEdit: (id: number) => void;
   onBulkDelete: () => void;
   onAddProductClick: () => void;
 };
@@ -34,11 +35,14 @@ const SalesOrderProductTable = ({
   setRowSelection,
   selectedRowIds,
   onDelete,
+  onEdit,
   onBulkDelete,
   onAddProductClick,
 }: SalesOrderProductTableProps) => {
   const onDeleteRef = useRef(onDelete);
   onDeleteRef.current = onDelete;
+  const onEditRef = useRef(onEdit);
+  onEditRef.current = onEdit;
 
   const columns = useMemo(
     () => [
@@ -92,17 +96,26 @@ const SalesOrderProductTable = ({
       },
       {
         accessorFn: (row: SalesOrderProductFormValues) =>
-          formatNumber(parseFloat(row.total_weight as string)),
+          formatNumber(parseFloat(row.total_weight as string), undefined, 0, 5),
         header: 'Total Bobot (Kg)',
       },
       {
         accessorFn: (row: SalesOrderProductFormValues) =>
           formatNumber(parseFloat(row.qty as string)),
         header: 'Kuantitas',
+        cell: ({ row }: { row: TanStack.Row<SalesOrderProductFormValues> }) =>
+          formatNumber(
+            parseFloat(row.original.qty as string),
+            undefined,
+            0,
+            5
+          ) +
+          ' ' +
+          (row.original.uom ?? ''),
       },
       {
         accessorFn: (row: SalesOrderProductFormValues) =>
-          formatNumber(parseFloat(row.avg_weight as string)),
+          formatNumber(parseFloat(row.avg_weight as string), undefined, 0, 5),
         header: 'Avg. Bobot (Kg)',
       },
       {
@@ -116,6 +129,14 @@ const SalesOrderProductTable = ({
           props: TanStack.CellContext<SalesOrderProductFormValues, unknown>
         ) => (
           <div className='flex flex-row gap-1 items-center justify-end h-full mt-2'>
+            <Button
+              color='warning'
+              className='p-1'
+              onClick={() => onEditRef.current(props.row.original.id as number)}
+              type='button'
+            >
+              <Icon icon='mdi:pencil' width={16} height={16} /> Edit
+            </Button>
             <Button
               color='error'
               className='p-1'
@@ -124,7 +145,7 @@ const SalesOrderProductTable = ({
               }
               type='button'
             >
-              <Icon icon='mdi:trash' width={16} height={16} />
+              <Icon icon='mdi:trash' width={16} height={16} /> Hapus
             </Button>
           </div>
         ),
diff --git a/src/components/pages/marketing/pdf/DeliveryOrderExport.tsx b/src/components/pages/marketing/pdf/DeliveryOrderExport.tsx
index 46e85a23..4659c650 100644
--- a/src/components/pages/marketing/pdf/DeliveryOrderExport.tsx
+++ b/src/components/pages/marketing/pdf/DeliveryOrderExport.tsx
@@ -7,6 +7,7 @@ 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';
 
 interface DeliveryOrderExportProps {
   data?: Marketing;
@@ -23,7 +24,7 @@ const DeliveryOrderExport = ({
 
   const handleDownloadPDF = async () => {
     if (!salesData) {
-      alert('No sales order data available');
+      toast.error('No sales order data available');
       return;
     }
     setIsGeneratingPDF(true);
@@ -40,8 +41,7 @@ const DeliveryOrderExport = ({
       document.body.removeChild(link);
       URL.revokeObjectURL(url);
     } catch (error) {
-      console.error('Error generating PDF:', error);
-      alert('Failed to generate PDF. Please try again.');
+      toast.error('Failed to generate PDF. Please try again.');
     } finally {
       setIsGeneratingPDF(false);
     }
diff --git a/src/components/pages/marketing/pdf/SalesOrderExport.tsx b/src/components/pages/marketing/pdf/SalesOrderExport.tsx
index f9f0a6c5..5d892853 100644
--- a/src/components/pages/marketing/pdf/SalesOrderExport.tsx
+++ b/src/components/pages/marketing/pdf/SalesOrderExport.tsx
@@ -5,6 +5,7 @@ import { Document, Image, Page, pdf, Text, View } from '@react-pdf/renderer';
 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';
 
 interface SalesOrderExportProps {
   data?: Marketing;
@@ -17,7 +18,7 @@ const SalesOrderExport = ({ data }: SalesOrderExportProps) => {
 
   const handleDownloadPDF = async () => {
     if (!salesData) {
-      alert('No sales order data available');
+      toast.error('No sales order data available');
       return;
     }
     setIsGeneratingPDF(true);
@@ -32,8 +33,7 @@ const SalesOrderExport = ({ data }: SalesOrderExportProps) => {
       document.body.removeChild(link);
       URL.revokeObjectURL(url);
     } catch (error) {
-      console.error('Error generating PDF:', error);
-      alert('Failed to generate PDF. Please try again.');
+      toast.error('Failed to generate PDF. Please try again.');
     } finally {
       setIsGeneratingPDF(false);
     }
diff --git a/src/components/pages/master-data/area/AreasTable.tsx b/src/components/pages/master-data/area/AreasTable.tsx
index 45c4fdff..d92c7840 100644
--- a/src/components/pages/master-data/area/AreasTable.tsx
+++ b/src/components/pages/master-data/area/AreasTable.tsx
@@ -20,7 +20,7 @@ import RequirePermission from '@/components/helper/RequirePermission';
 import { Area } from '@/types/api/master-data/area';
 import { AreaApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
-import { isResponseSuccess } from '@/lib/api-helper';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
 
@@ -164,7 +164,14 @@ const AreasTable = () => {
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
-    await AreaApi.delete(selectedArea?.id as number);
+    const deleteResponse = await AreaApi.delete(selectedArea?.id as number);
+
+    if (isResponseError(deleteResponse)) {
+      toast.error(deleteResponse.message);
+      setIsDeleteLoading(false);
+      return;
+    }
+
     refreshAreas();
 
     deleteModal.closeModal();
diff --git a/src/components/pages/master-data/bank/BanksTable.tsx b/src/components/pages/master-data/bank/BanksTable.tsx
index f28f4bd0..c5a564fe 100644
--- a/src/components/pages/master-data/bank/BanksTable.tsx
+++ b/src/components/pages/master-data/bank/BanksTable.tsx
@@ -20,7 +20,7 @@ import RequirePermission from '@/components/helper/RequirePermission';
 import { Bank } from '@/types/api/master-data/bank';
 import { BankApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
-import { isResponseSuccess } from '@/lib/api-helper';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
 
@@ -177,7 +177,14 @@ const BanksTable = () => {
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
-    await BankApi.delete(selectedBank?.id as number);
+    const deleteResponse = await BankApi.delete(selectedBank?.id as number);
+
+    if (isResponseError(deleteResponse)) {
+      toast.error(deleteResponse.message);
+      setIsDeleteLoading(false);
+      return;
+    }
+
     refreshBanks();
 
     deleteModal.closeModal();
diff --git a/src/components/pages/master-data/customer/CustomersTable.tsx b/src/components/pages/master-data/customer/CustomersTable.tsx
index 3e442620..e605d9f7 100644
--- a/src/components/pages/master-data/customer/CustomersTable.tsx
+++ b/src/components/pages/master-data/customer/CustomersTable.tsx
@@ -11,7 +11,7 @@ import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import RequirePermission from '@/components/helper/RequirePermission';
 import { ROWS_OPTIONS } from '@/config/constant';
-import { isResponseSuccess } from '@/lib/api-helper';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
 import { CustomerApi } from '@/services/api/master-data';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
@@ -186,7 +186,16 @@ const CustomersTable = () => {
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
-    await CustomerApi.delete(selectedCustomer?.id as number);
+    const deleteResponse = await CustomerApi.delete(
+      selectedCustomer?.id as number
+    );
+
+    if (isResponseError(deleteResponse)) {
+      toast.error(deleteResponse.message);
+      setIsDeleteLoading(false);
+      return;
+    }
+
     refreshCustomers();
 
     deleteModal.closeModal();
diff --git a/src/components/pages/master-data/customer/form/CustomerForm.tsx b/src/components/pages/master-data/customer/form/CustomerForm.tsx
index 0a629b36..fed5b14e 100644
--- a/src/components/pages/master-data/customer/form/CustomerForm.tsx
+++ b/src/components/pages/master-data/customer/form/CustomerForm.tsx
@@ -23,13 +23,17 @@ import TextInput from '@/components/input/TextInput';
 import { cn } from '@/lib/helper';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import TextArea from '@/components/input/TextArea';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
 import useSWR from 'swr';
 import { UserApi } from '@/services/api/user';
 import { TYPE_OPTIONS } from '@/config/constant';
 import RequirePermission from '@/components/helper/RequirePermission';
 import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 import AlertErrorList from '@/components/helper/form/FormErrors';
+import { User } from '@/types/api/api-general';
 
 interface CustomerFormProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -47,25 +51,15 @@ const CustomerForm = ({
   // Setup State
   const [customerFormErrorMessage, setCustomerFormErrorMessage] = useState('');
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-  const [picSelectInputValue, setPicSelectInputValue] = useState('');
 
-  // Fetch Data
-  const picUrl = `${UserApi.basePath}?${new URLSearchParams({
-    search: picSelectInputValue ?? '',
-  })}`;
-
-  const { data: pic, isLoading: isLoadingPic } = useSWR(
-    picUrl,
-    UserApi.getAllFetcher
-  );
+  const {
+    setInputValue: setPicSelectInputValue,
+    options: picOptions,
+    isLoadingOptions: isLoadingPicOptions,
+    loadMore: loadMorePic,
+  } = useSelect<User>(UserApi.basePath, 'id', 'name');
 
   // -- Options data mapping
-  const picOptions = isResponseSuccess(pic)
-    ? pic?.data.map((area) => ({
-        value: area.id,
-        label: area.name,
-      }))
-    : [];
   const typeOptions = TYPE_OPTIONS;
 
   // Handler Event
@@ -240,11 +234,12 @@ const CustomerForm = ({
               required
               placeholder='Pilih PIC'
               label='PIC'
-              value={formik.values.pic ?? undefined}
+              value={formik.values.pic?.value ? formik.values.pic : undefined}
               onChange={picChangeHandler}
               options={picOptions}
               onInputChange={setPicSelectInputValue}
-              isLoading={isLoadingPic}
+              onMenuScrollToBottom={loadMorePic}
+              isLoading={isLoadingPicOptions}
               isError={formik.touched.picId && Boolean(formik.errors.picId)}
               errorMessage={formik.errors.picId as string}
               isDisabled={formType === 'detail'}
diff --git a/src/components/pages/master-data/fcr/FcrsTable.tsx b/src/components/pages/master-data/fcr/FcrsTable.tsx
index 2d65a406..2eb8d8da 100644
--- a/src/components/pages/master-data/fcr/FcrsTable.tsx
+++ b/src/components/pages/master-data/fcr/FcrsTable.tsx
@@ -20,7 +20,7 @@ import RequirePermission from '@/components/helper/RequirePermission';
 import { Fcr } from '@/types/api/master-data/fcr';
 import { FcrApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
-import { isResponseSuccess } from '@/lib/api-helper';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
 
@@ -164,7 +164,14 @@ const FcrsTable = () => {
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
-    await FcrApi.delete(selectedFcr?.id as number);
+    const deleteResponse = await FcrApi.delete(selectedFcr?.id as number);
+
+    if (isResponseError(deleteResponse)) {
+      toast.error(deleteResponse.message);
+      setIsDeleteLoading(false);
+      return;
+    }
+
     refreshFcrs();
 
     deleteModal.closeModal();
diff --git a/src/components/pages/master-data/flock/FlocksTable.tsx b/src/components/pages/master-data/flock/FlocksTable.tsx
index ce8f701a..dd6ebfe8 100644
--- a/src/components/pages/master-data/flock/FlocksTable.tsx
+++ b/src/components/pages/master-data/flock/FlocksTable.tsx
@@ -19,7 +19,7 @@ import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import { ROWS_OPTIONS } from '@/config/constant';
 import Table from '@/components/Table';
-import { isResponseSuccess } from '@/lib/api-helper';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 
 const RowsOptions = ({
@@ -33,22 +33,6 @@ const RowsOptions = ({
 }) => {
   return (
     <RowOptionsMenuWrapper type={type}>
-      <RequirePermission permissions='lti.master.flocks.update'>
-        <Button
-          href={`/master-data/flock/detail/edit/?flockId=${props.row.original.id}`}
-          variant='ghost'
-          color='warning'
-          className='justify-start text-sm'
-        >
-          <Icon
-            icon='material-symbols:edit-outline'
-            width={16}
-            height={16}
-            className='justify-start text-sm'
-          />
-          Edit
-        </Button>
-      </RequirePermission>
       <RequirePermission permissions='lti.master.flocks.detail'>
         <Button
           href={`/master-data/flock/detail/?flockId=${props.row.original.id}`}
@@ -65,6 +49,22 @@ const RowsOptions = ({
           Detail
         </Button>
       </RequirePermission>
+      <RequirePermission permissions='lti.master.flocks.update'>
+        <Button
+          href={`/master-data/flock/detail/edit/?flockId=${props.row.original.id}`}
+          variant='ghost'
+          color='warning'
+          className='justify-start text-sm'
+        >
+          <Icon
+            icon='material-symbols:edit-outline'
+            width={16}
+            height={16}
+            className='justify-start text-sm'
+          />
+          Edit
+        </Button>
+      </RequirePermission>
       <RequirePermission permissions='lti.master.flocks.delete'>
         <Button
           onClick={deleteClickHandler}
@@ -182,7 +182,14 @@ const FlockTable = () => {
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
-    await FlockApi.delete(selectedFlock?.id as number);
+    const deleteResponse = await FlockApi.delete(selectedFlock?.id as number);
+
+    if (isResponseError(deleteResponse)) {
+      toast.error(deleteResponse.message);
+      setIsDeleteLoading(false);
+      return;
+    }
+
     refreshFlocks();
 
     deleteModal.closeModal();
diff --git a/src/components/pages/master-data/flock/form/FlockForm.tsx b/src/components/pages/master-data/flock/form/FlockForm.tsx
index 51ed4325..1d7d6168 100644
--- a/src/components/pages/master-data/flock/form/FlockForm.tsx
+++ b/src/components/pages/master-data/flock/form/FlockForm.tsx
@@ -19,6 +19,8 @@ import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import RequirePermission from '@/components/helper/RequirePermission';
 import AlertErrorList from '@/components/helper/form/FormErrors';
 import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
+import { toast } from 'react-hot-toast';
+import Alert from '@/components/Alert';
 
 interface FlockCustomProps {
   formType?: 'add' | 'edit' | 'detail';
@@ -37,7 +39,13 @@ const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => {
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
-    await FlockApi.delete(initialValues?.id as number);
+    const deleteFlockRes = await FlockApi.delete(initialValues?.id as number);
+    if (deleteFlockRes?.status === 'error') {
+      setFlockFormErrorMessage(deleteFlockRes.message);
+      return;
+    }
+
+    toast.success(deleteFlockRes?.message as string);
 
     deleteModal.closeModal();
     setIsDeleteLoading(false);
@@ -68,12 +76,29 @@ const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => {
 
       // cek type form yang disubmit
       switch (formType) {
-        case 'add':
-          await FlockApi.create(payload);
+        case 'add': {
+          const createFlockRes = await FlockApi.create(payload);
+          if (createFlockRes?.status === 'error') {
+            setFlockFormErrorMessage(createFlockRes.message);
+            return;
+          }
+
+          toast.success(createFlockRes?.message as string);
           break;
-        case 'edit':
-          await FlockApi.update(initialValues?.id as number, payload);
+        }
+        case 'edit': {
+          const updateFlockRes = await FlockApi.update(
+            initialValues?.id as number,
+            payload
+          );
+          if (updateFlockRes?.status === 'error') {
+            setFlockFormErrorMessage(updateFlockRes.message);
+            return;
+          }
+
+          toast.success(updateFlockRes?.message as string);
           break;
+        }
         default:
           break;
       }
@@ -174,6 +199,24 @@ const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => {
             )}
 
             <AlertErrorList formErrorList={formErrorList} onClose={close} />
+            {flockFormErrorMessage && (
+              <Alert color='error' className='w-full'>
+                <Icon
+                  icon='material-symbols:error-outline'
+                  width={24}
+                  height={24}
+                />
+                {flockFormErrorMessage}
+                <Button
+                  onClick={() => setFlockFormErrorMessage('')}
+                  variant='link'
+                  className='ml-auto p-0 w-fit text-white'
+                  color='none'
+                >
+                  <Icon icon='material-symbols:close' width={24} height={24} />
+                </Button>
+              </Alert>
+            )}
 
             {formType !== 'detail' && (
               <div
@@ -197,17 +240,6 @@ const FlockForm = ({ formType = 'add', initialValues }: FlockCustomProps) => {
               </div>
             )}
           </div>
-
-          {flockFormErrorMessage && (
-            <div role='alert' className='alert alert-error'>
-              <Icon
-                icon='material-symbols:error-outline'
-                width={24}
-                height={24}
-              />
-              <span>{flockFormErrorMessage}</span>
-            </div>
-          )}
         </form>
       </section>
 
diff --git a/src/components/pages/master-data/kandang/KandangsTable.tsx b/src/components/pages/master-data/kandang/KandangsTable.tsx
index 1bd7badb..7d79d456 100644
--- a/src/components/pages/master-data/kandang/KandangsTable.tsx
+++ b/src/components/pages/master-data/kandang/KandangsTable.tsx
@@ -25,7 +25,7 @@ import RequirePermission from '@/components/helper/RequirePermission';
 import { Kandang } from '@/types/api/master-data/kandang';
 import { KandangApi } from '@/services/api/master-data';
 import { cn, formatNumber } from '@/lib/helper';
-import { isResponseSuccess } from '@/lib/api-helper';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
 
@@ -199,7 +199,16 @@ const KandangsTable = () => {
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
-    await KandangApi.delete(selectedKandang?.id as number);
+    const deleteResponse = await KandangApi.delete(
+      selectedKandang?.id as number
+    );
+
+    if (isResponseError(deleteResponse)) {
+      toast.error(deleteResponse.message);
+      setIsDeleteLoading(false);
+      return;
+    }
+
     refreshKandangs();
 
     deleteModal.closeModal();
diff --git a/src/components/pages/master-data/kandang/form/KandangForm.tsx b/src/components/pages/master-data/kandang/form/KandangForm.tsx
index ffea5718..22ad91f8 100644
--- a/src/components/pages/master-data/kandang/form/KandangForm.tsx
+++ b/src/components/pages/master-data/kandang/form/KandangForm.tsx
@@ -9,7 +9,10 @@ import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import RequirePermission from '@/components/helper/RequirePermission';
@@ -31,6 +34,7 @@ import { UserApi } from '@/services/api/user';
 import NumberInput from '@/components/input/NumberInput';
 import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 import AlertErrorList from '@/components/helper/form/FormErrors';
+import { User } from '@/types/api/api-general';
 
 interface KandangFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -128,23 +132,12 @@ const KandangForm = ({ type = 'add', initialValues }: KandangFormProps) => {
   const { setValues: formikSetValues } = formik;
 
   // location
-  const [locationSelectInputValue, setLocationSelectInputValue] = useState('');
-
-  const locationsUrl = `${LocationApi.basePath}?${new URLSearchParams({
-    search: locationSelectInputValue ?? '',
-  }).toString()}`;
-
-  const { data: locations, isLoading: isLoadingLocations } = useSWR(
-    locationsUrl,
-    LocationApi.getAllFetcher
-  );
-
-  const locationOptions = isResponseSuccess(locations)
-    ? locations?.data.map((location) => ({
-        value: location.id,
-        label: location.name,
-      }))
-    : [];
+  const {
+    setInputValue: setLocationSelectInputValue,
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocationOptions,
+    loadMore: loadMoreLocations,
+  } = useSelect<Location>(LocationApi.basePath, 'id', 'name');
 
   const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
     formik.setFieldTouched('location', true);
@@ -155,23 +148,12 @@ const KandangForm = ({ type = 'add', initialValues }: KandangFormProps) => {
   };
 
   // PIC
-  const [picSelectInputValue, setPicSelectInputValue] = useState('');
-
-  const picsUrl = `${UserApi.basePath}?${new URLSearchParams({
-    search: picSelectInputValue ?? '',
-  }).toString()}`;
-
-  const { data: pics, isLoading: isLoadingPics } = useSWR(
-    picsUrl,
-    LocationApi.getAllFetcher
-  );
-
-  const picOptions = isResponseSuccess(pics)
-    ? pics?.data.map((pic) => ({
-        value: pic.id,
-        label: pic.name,
-      }))
-    : [];
+  const {
+    setInputValue: setPicSelectInputValue,
+    options: picOptions,
+    isLoadingOptions: isLoadingPicOptions,
+    loadMore: loadMorePics,
+  } = useSelect<User>(UserApi.basePath, 'id', 'name');
 
   const picChangeHandler = (val: OptionType | OptionType[] | null) => {
     formik.setFieldTouched('pic', true);
@@ -233,7 +215,7 @@ const KandangForm = ({ type = 'add', initialValues }: KandangFormProps) => {
               required
               label='Nama'
               name='name'
-              placeholder='Masukkan nama lokasi'
+              placeholder='Masukkan nama kandang'
               value={formik.values.name}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
@@ -249,7 +231,8 @@ const KandangForm = ({ type = 'add', initialValues }: KandangFormProps) => {
               onChange={locationChangeHandler}
               options={locationOptions}
               onInputChange={setLocationSelectInputValue}
-              isLoading={isLoadingLocations}
+              onMenuScrollToBottom={loadMoreLocations}
+              isLoading={isLoadingLocationOptions}
               isError={
                 formik.touched.locationId && Boolean(formik.errors.locationId)
               }
@@ -280,7 +263,8 @@ const KandangForm = ({ type = 'add', initialValues }: KandangFormProps) => {
               onChange={picChangeHandler}
               options={picOptions}
               onInputChange={setPicSelectInputValue}
-              isLoading={isLoadingPics}
+              onMenuScrollToBottom={loadMorePics}
+              isLoading={isLoadingPicOptions}
               isError={formik.touched.picId && Boolean(formik.errors.picId)}
               errorMessage={formik.errors.picId as string}
               isDisabled={type === 'detail'}
diff --git a/src/components/pages/master-data/location/LocationsTable.tsx b/src/components/pages/master-data/location/LocationsTable.tsx
index 10fe46c9..a35ffd09 100644
--- a/src/components/pages/master-data/location/LocationsTable.tsx
+++ b/src/components/pages/master-data/location/LocationsTable.tsx
@@ -25,7 +25,7 @@ import RequirePermission from '@/components/helper/RequirePermission';
 import { Location } from '@/types/api/master-data/location';
 import { LocationApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
-import { isResponseSuccess } from '@/lib/api-helper';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
 
@@ -186,7 +186,16 @@ const LocationsTable = () => {
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
-    await LocationApi.delete(selectedLocation?.id as number);
+    const deleteResponse = await LocationApi.delete(
+      selectedLocation?.id as number
+    );
+
+    if (isResponseError(deleteResponse)) {
+      toast.error(deleteResponse.message);
+      setIsDeleteLoading(false);
+      return;
+    }
+
     refreshLocations();
 
     deleteModal.closeModal();
diff --git a/src/components/pages/master-data/location/form/LocationForm.tsx b/src/components/pages/master-data/location/form/LocationForm.tsx
index 9f77cf86..224c0f35 100644
--- a/src/components/pages/master-data/location/form/LocationForm.tsx
+++ b/src/components/pages/master-data/location/form/LocationForm.tsx
@@ -9,7 +9,10 @@ import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import RequirePermission from '@/components/helper/RequirePermission';
@@ -29,6 +32,7 @@ import { AreaApi, LocationApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
 import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 import AlertErrorList from '@/components/helper/form/FormErrors';
+import { Area } from '@/types/api/master-data/area';
 
 interface LocationFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -117,23 +121,12 @@ const LocationForm = ({ type = 'add', initialValues }: LocationFormProps) => {
 
   const { setValues: formikSetValues } = formik;
 
-  const [areaSelectInputValue, setAreaSelectInputValue] = useState('');
-
-  const areasUrl = `${AreaApi.basePath}?${new URLSearchParams({
-    search: areaSelectInputValue ?? '',
-  }).toString()}`;
-
-  const { data: areas, isLoading: isLoadingAreas } = useSWR(
-    areasUrl,
-    AreaApi.getAllFetcher
-  );
-
-  const areaOptions = isResponseSuccess(areas)
-    ? areas?.data.map((area) => ({
-        value: area.id,
-        label: area.name,
-      }))
-    : [];
+  const {
+    setInputValue: setAreaSelectInputValue,
+    options: areaOptions,
+    isLoadingOptions: isLoadingAreaOptions,
+    loadMore: loadMoreAreas,
+  } = useSelect<Area>(AreaApi.basePath, 'id', 'name');
 
   const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
     formik.setFieldTouched('area', true);
@@ -224,7 +217,8 @@ const LocationForm = ({ type = 'add', initialValues }: LocationFormProps) => {
               onChange={areaChangeHandler}
               options={areaOptions}
               onInputChange={setAreaSelectInputValue}
-              isLoading={isLoadingAreas}
+              onMenuScrollToBottom={loadMoreAreas}
+              isLoading={isLoadingAreaOptions}
               isError={formik.touched.areaId && Boolean(formik.errors.areaId)}
               errorMessage={formik.errors.areaId as string}
               isDisabled={type === 'detail'}
diff --git a/src/components/pages/master-data/nonstock/NonstocksTable.tsx b/src/components/pages/master-data/nonstock/NonstocksTable.tsx
index 7066c19a..6aeb3f99 100644
--- a/src/components/pages/master-data/nonstock/NonstocksTable.tsx
+++ b/src/components/pages/master-data/nonstock/NonstocksTable.tsx
@@ -25,7 +25,7 @@ import RequirePermission from '@/components/helper/RequirePermission';
 import { Nonstock } from '@/types/api/master-data/nonstock';
 import { NonstockApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
-import { isResponseSuccess } from '@/lib/api-helper';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
 
@@ -198,7 +198,16 @@ const NonstocksTable = () => {
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
-    await NonstockApi.delete(selectedNonstock?.id as number);
+    const deleteResponse = await NonstockApi.delete(
+      selectedNonstock?.id as number
+    );
+
+    if (isResponseError(deleteResponse)) {
+      toast.error(deleteResponse.message);
+      setIsDeleteLoading(false);
+      return;
+    }
+
     refreshNonstocks();
 
     deleteModal.closeModal();
diff --git a/src/components/pages/master-data/nonstock/form/NonstockForm.tsx b/src/components/pages/master-data/nonstock/form/NonstockForm.tsx
index 7d8b8784..bfe88c0e 100644
--- a/src/components/pages/master-data/nonstock/form/NonstockForm.tsx
+++ b/src/components/pages/master-data/nonstock/form/NonstockForm.tsx
@@ -9,7 +9,10 @@ import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import RequirePermission from '@/components/helper/RequirePermission';
@@ -31,6 +34,8 @@ import { flags } from '@/types/api/api-general';
 import { SUPPLIER_FLAG_OPTIONS } from '@/config/constant';
 import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 import AlertErrorList from '@/components/helper/form/FormErrors';
+import { Supplier } from '@/types/api/master-data/supplier';
+import { Uom } from '@/types/api/master-data/uom';
 
 interface NonstockFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -78,7 +83,7 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
   const formikInitialValues = useMemo<NonstockFormValues>(() => {
     return {
       name: initialValues?.name ?? '',
-      uomId: initialValues?.uom_id ?? 0,
+      uomId: initialValues?.uom?.id ?? 0,
       uom: initialValues?.uom
         ? {
             value: initialValues?.uom?.id,
@@ -129,23 +134,12 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
   const { setValues: formikSetValues } = formik;
 
   // UOM
-  const [uomSelectInputValue, setUomSelectInputValue] = useState('');
-
-  const uomsUrl = `${UomApi.basePath}?${new URLSearchParams({
-    search: uomSelectInputValue ?? '',
-  }).toString()}`;
-
-  const { data: uoms, isLoading: isLoadingUoms } = useSWR(
-    uomsUrl,
-    UomApi.getAllFetcher
-  );
-
-  const uomOptions = isResponseSuccess(uoms)
-    ? uoms?.data.map((uom) => ({
-        value: uom.id,
-        label: uom.name,
-      }))
-    : [];
+  const {
+    setInputValue: setUomSelectInputValue,
+    options: uomOptions,
+    isLoadingOptions: isLoadingUomOptions,
+    loadMore: loadMoreUoms,
+  } = useSelect<Uom>(UomApi.basePath, 'id', 'name');
 
   const uomChangeHandler = (val: OptionType | OptionType[] | null) => {
     formik.setFieldTouched('uom', true);
@@ -156,25 +150,12 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
   };
 
   // supplier
-  const [supplierSelectInputValue, setSupplierSelectInputValue] = useState('');
-
-  const suppliersUrl = `${SupplierApi.basePath}?${new URLSearchParams({
-    search: supplierSelectInputValue ?? '',
-  }).toString()}`;
-
-  const { data: suppliers, isLoading: isLoadingSuppliers } = useSWR(
-    suppliersUrl,
-    SupplierApi.getAllFetcher
-  );
-
-  const supplierOptions = isResponseSuccess(suppliers)
-    ? suppliers?.data
-        .filter((sup) => sup.category === 'BOP')
-        .map((supplier) => ({
-          value: supplier.id,
-          label: supplier.name,
-        }))
-    : [];
+  const {
+    setInputValue: setSupplierSelectInputValue,
+    options: supplierOptions,
+    isLoadingOptions: isLoadingSupplierOptions,
+    loadMore: loadMoreSuppliers,
+  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name');
 
   const supplierChangeHandler = (val: OptionType | OptionType[] | null) => {
     formik.setFieldTouched('suppliers', true);
@@ -248,7 +229,7 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
               required
               label='Nama'
               name='name'
-              placeholder='Masukkan nama lokasi'
+              placeholder='Masukkan nama nonstock'
               value={formik.values.name}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
@@ -264,7 +245,8 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
               onChange={uomChangeHandler}
               options={uomOptions}
               onInputChange={setUomSelectInputValue}
-              isLoading={isLoadingUoms}
+              isLoading={isLoadingUomOptions}
+              onMenuScrollToBottom={loadMoreUoms}
               isError={formik.touched.uomId && Boolean(formik.errors.uomId)}
               errorMessage={formik.errors.uomId as string}
               isDisabled={type === 'detail'}
@@ -278,7 +260,8 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
               onChange={supplierChangeHandler}
               options={supplierOptions ?? []}
               onInputChange={setSupplierSelectInputValue}
-              isLoading={isLoadingSuppliers}
+              onMenuScrollToBottom={loadMoreSuppliers}
+              isLoading={isLoadingSupplierOptions}
               isError={
                 formik.touched.suppliers && Boolean(formik.errors.suppliers)
               }
diff --git a/src/components/pages/master-data/product-category/ProductCategoryTable.tsx b/src/components/pages/master-data/product-category/ProductCategoryTable.tsx
index a9b98bcb..e25dfd56 100644
--- a/src/components/pages/master-data/product-category/ProductCategoryTable.tsx
+++ b/src/components/pages/master-data/product-category/ProductCategoryTable.tsx
@@ -20,7 +20,7 @@ import RequirePermission from '@/components/helper/RequirePermission';
 import { ProductCategory } from '@/types/api/master-data/product-category';
 import { ProductCategoryApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
-import { isResponseSuccess } from '@/lib/api-helper';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
 
@@ -170,7 +170,16 @@ const ProductCategoryTable = () => {
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
-    await ProductCategoryApi.delete(selectedProductCategory?.id as number);
+    const deleteResponse = await ProductCategoryApi.delete(
+      selectedProductCategory?.id as number
+    );
+
+    if (isResponseError(deleteResponse)) {
+      toast.error(deleteResponse.message);
+      setIsDeleteLoading(false);
+      return;
+    }
+
     refreshProductCategories();
 
     deleteModal.closeModal();
diff --git a/src/components/pages/master-data/product/ProductTable.tsx b/src/components/pages/master-data/product/ProductTable.tsx
index 957d0551..74137a14 100644
--- a/src/components/pages/master-data/product/ProductTable.tsx
+++ b/src/components/pages/master-data/product/ProductTable.tsx
@@ -25,7 +25,7 @@ import RequirePermission from '@/components/helper/RequirePermission';
 import { Product } from '@/types/api/master-data/product';
 import { ProductApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
-import { isResponseSuccess } from '@/lib/api-helper';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
 
@@ -230,8 +230,19 @@ const ProductsTable = () => {
 
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
-    await ProductApi.delete(selectedProduct?.id as number);
+
+    const deleteResponse = await ProductApi.delete(
+      selectedProduct?.id as number
+    );
+
+    if (isResponseError(deleteResponse)) {
+      toast.error(deleteResponse.message);
+      setIsDeleteLoading(false);
+      return;
+    }
+
     refreshProducts();
+
     deleteModal.closeModal();
     toast.success('Successfully delete Product!');
     setIsDeleteLoading(false);
diff --git a/src/components/pages/master-data/product/form/ProductForm.schema.ts b/src/components/pages/master-data/product/form/ProductForm.schema.ts
index 9dcf713e..8a1d3de2 100644
--- a/src/components/pages/master-data/product/form/ProductForm.schema.ts
+++ b/src/components/pages/master-data/product/form/ProductForm.schema.ts
@@ -3,7 +3,7 @@ import * as Yup from 'yup';
 type ProductFormSchemaType = {
   name: string;
   brand: string;
-  sku: string;
+  sku?: string;
   uom?: {
     value: number;
     label: string;
@@ -15,10 +15,16 @@ type ProductFormSchemaType = {
   } | null;
   product_category_id: number;
   product_price: number | string;
-  selling_price: number | string;
-  tax: number | string;
-  expiry_period: number | string;
-  supplier_ids: number[];
+  selling_price?: number | string;
+  tax?: number | string;
+  expiry_period?: number | string;
+  suppliers: {
+    supplier: {
+      value: number;
+      label: string;
+    } | null;
+    price: number;
+  }[];
   flags: string[];
 };
 
@@ -26,7 +32,7 @@ export const ProductFormSchema: Yup.ObjectSchema<ProductFormSchemaType> =
   Yup.object({
     name: Yup.string().required('Nama wajib diisi!'),
     brand: Yup.string().required('Merek wajib diisi!'),
-    sku: Yup.string().required('SKU wajib diisi!'),
+    sku: Yup.string(),
 
     uom: Yup.object({
       value: Yup.number()
@@ -58,24 +64,34 @@ export const ProductFormSchema: Yup.ObjectSchema<ProductFormSchemaType> =
       .min(1, 'Harga produk tidak boleh kurang dari 1!'),
 
     selling_price: Yup.number()
-      .required('Harga jual wajib diisi!')
-      .typeError('Harga jual wajib diisi!')
+      .typeError('Harga hanya boleh angka!')
       .min(1, 'Harga jual tidak boleh kurang dari 1!'),
 
     tax: Yup.number()
-      .required('Pajak wajib diisi!')
-      .typeError('Pajak wajib diisi!')
+      .typeError('Pajak hanya boleh angka!')
       .min(0, 'Pajak tidak boleh kurang dari 0!')
       .max(100, 'Pajak tidak boleh lebih dari 100%!'),
 
     expiry_period: Yup.number()
-      .required('Periode kadaluarsa wajib diisi!')
-      .typeError('Periode kadaluarsa wajib diisi!')
+      .typeError('Periode kadaluarsa hanya boleh angka!')
       .min(1, 'Periode kadaluarsa tidak boleh kurang dari 1 hari!'),
 
-    supplier_ids: Yup.array()
-      .of(Yup.number().required().typeError('Supplier tidak valid!'))
-      .min(1, 'Minimal harus ada 1 supplier!')
+    suppliers: Yup.array()
+      .of(
+        Yup.object({
+          supplier: Yup.object({
+            value: Yup.number()
+              .min(1, 'Supplier wajib dipilih!')
+              .required('Supplier wajib dipilih!')
+              .typeError('Supplier wajib dipilih!'),
+            label: Yup.string().required('Supplier wajib dipilih!'),
+          }).required('Supplier wajib dipilih!'),
+          price: Yup.number()
+            .min(1, 'Harga tidak boleh kurang dari 1!')
+            .required('Harga wajib diisi!')
+            .typeError('Harga wajib diisi!'),
+        })
+      )
       .required('Supplier wajib diisi!'),
 
     flags: Yup.array()
diff --git a/src/components/pages/master-data/product/form/ProductForm.tsx b/src/components/pages/master-data/product/form/ProductForm.tsx
index 204422dd..8c04d594 100644
--- a/src/components/pages/master-data/product/form/ProductForm.tsx
+++ b/src/components/pages/master-data/product/form/ProductForm.tsx
@@ -40,6 +40,9 @@ import {
 import { cn } from '@/lib/helper';
 import { PRODUCT_FLAG_OPTIONS } from '@/config/constant';
 import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
+import { Supplier } from '@/types/api/master-data/supplier';
+import Card from '@/components/Card';
+import { removeArrayItemAndSync } from '@/lib/utils/formik';
 
 interface ProductFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -100,7 +103,15 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
       selling_price: initialValues?.selling_price ?? '',
       tax: initialValues?.tax ?? '',
       expiry_period: initialValues?.expiry_period ?? '',
-      supplier_ids: initialValues?.suppliers?.map((s) => s.id) ?? [],
+      suppliers: initialValues?.suppliers
+        ? initialValues.suppliers.map((supplier) => ({
+            supplier: {
+              value: supplier.id,
+              label: supplier.name,
+            },
+            price: supplier.price,
+          }))
+        : [],
       flags: initialValues?.flags ?? [],
     }),
     [initialValues]
@@ -119,12 +130,17 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
         uom_id: values.uom_id,
         product_category_id: values.product_category_id,
         product_price: parseInt(values.product_price.toString()) || 0,
-        selling_price: parseInt(values.selling_price.toString()) || 0,
-        tax: parseInt(values.tax.toString()) || 0,
-        expiry_period: parseInt(values.expiry_period.toString()) || 0,
-        supplier_ids: values.supplier_ids.filter(
-          (id): id is number => typeof id === 'number'
-        ),
+        selling_price: values.selling_price
+          ? parseInt(values.selling_price.toString()) || 0
+          : undefined,
+        tax: values.tax ? parseInt(values.tax.toString()) || 0 : undefined,
+        expiry_period: values.expiry_period
+          ? parseInt(values.expiry_period.toString()) || 0
+          : undefined,
+        suppliers: values.suppliers.map((s) => ({
+          supplier_id: s.supplier?.value as number,
+          price: parseInt(s.price.toString()) || 0,
+        })),
         flags: values.flags.filter((f): f is string => typeof f === 'string'),
       };
       switch (type) {
@@ -145,6 +161,7 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
     setInputValue: setUomSelectInputValue,
     options: uomOptions,
     isLoadingOptions: isLoadingUoms,
+    loadMore: loadMoreUoms,
   } = useSelect(UomApi.basePath, 'id', 'name');
   const uomChangeHandler = (val: OptionType | OptionType[] | null) => {
     formik.setFieldTouched('uom', true);
@@ -158,6 +175,7 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
     setInputValue: setCategorySelectInputValue,
     options: categoryOptions,
     isLoadingOptions: isLoadingCategories,
+    loadMore: loadMoreCategories,
   } = useSelect(ProductCategoryApi.basePath, 'id', 'name');
   const categoryChangeHandler = (val: OptionType | OptionType[] | null) => {
     formik.setFieldTouched('product_category', true);
@@ -167,24 +185,38 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
   };
 
   // Supplier (multi select) - using SWR to filter by category
-  const [supplierSelectInputValue, setSupplierSelectInputValue] = useState('');
-  const suppliersUrl = `${SupplierApi.basePath}?${new URLSearchParams({ search: supplierSelectInputValue ?? '' }).toString()}`;
-  const { data: suppliers, isLoading: isLoadingSuppliers } = useSWR(
-    suppliersUrl,
-    SupplierApi.getAllFetcher
-  );
-  const supplierOptions = isResponseSuccess(suppliers)
-    ? suppliers?.data
-        .filter((sup) => sup.category === 'SAPRONAK')
-        .map((sup) => ({ value: sup.id, label: sup.name }))
-    : [];
-  const supplierChangeHandler = (val: OptionType | OptionType[] | null) => {
-    const arr = Array.isArray(val) ? val : val ? [val] : [];
-    formik.setFieldTouched('supplier_ids', true);
-    formik.setFieldValue(
-      'supplier_ids',
-      arr.map((v) => (v as OptionType).value)
-    );
+  const {
+    setInputValue: setSupplierSelectInputValue,
+    options: supplierOptions,
+    isLoadingOptions: isLoadingSuppliers,
+    loadMore: loadMoreSuppliers,
+  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name', 'search', {
+    category: 'SAPRONAK',
+  });
+
+  const filteredSupplierOptions = useMemo(() => {
+    return supplierOptions.filter((opt) => {
+      return !formik.values.suppliers.some(
+        (s) => s.supplier?.value === opt.value
+      );
+    });
+  }, [supplierOptions, formik.values.suppliers]);
+
+  const addSupplierHandler = () => {
+    formik.setFieldValue('suppliers', [
+      ...formik.values.suppliers,
+      {
+        supplier_id: '',
+        price: formik.values.product_price,
+      },
+    ]);
+  };
+
+  const deleteSupplierItemHandler = (idx: number) => {
+    const path = 'suppliers';
+
+    // trims values, errors, and touched at idx
+    removeArrayItemAndSync(formik, path, idx);
   };
 
   const deleteProductClickHandler = () => {
@@ -200,6 +232,19 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
     router.push('/master-data/product');
   };
 
+  const isSupplierRepeaterError = (
+    column: 'supplier' | 'price',
+    supplierIdx: number
+  ) => {
+    return (
+      formik.touched.suppliers?.[supplierIdx]?.[column] &&
+      Boolean(
+        formik.errors.suppliers?.[supplierIdx] instanceof Object &&
+          formik.errors.suppliers?.[supplierIdx]?.[column]
+      )
+    );
+  };
+
   useEffect(() => {
     formikSetValues(formikInitialValues);
   }, [formikSetValues, formikInitialValues]);
@@ -270,7 +315,6 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
                 readOnly={type === 'detail'}
               />
               <TextInput
-                required
                 label='SKU'
                 name='sku'
                 placeholder='Masukkan SKU...'
@@ -291,6 +335,7 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
                 onChange={uomChangeHandler}
                 options={uomOptions}
                 onInputChange={setUomSelectInputValue}
+                onMenuScrollToBottom={loadMoreUoms}
                 isLoading={isLoadingUoms}
                 isError={
                   (formik.touched.uom || formik.touched.uom_id) &&
@@ -308,6 +353,7 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
                 onChange={categoryChangeHandler}
                 options={categoryOptions}
                 onInputChange={setCategorySelectInputValue}
+                onMenuScrollToBottom={loadMoreCategories}
                 isLoading={isLoadingCategories}
                 isError={
                   (formik.touched.product_category ||
@@ -341,7 +387,6 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
                 readOnly={type === 'detail'}
               />
               <NumberInput
-                required
                 label='Harga Jual'
                 name='selling_price'
                 placeholder='Masukkan harga jual...'
@@ -363,7 +408,6 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
             </div>
             <div className='grid sm:grid-cols-2 gap-4'>
               <NumberInput
-                required
                 label='Pajak (%)'
                 name='tax'
                 placeholder='Masukkan pajak...'
@@ -380,7 +424,6 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
                 readOnly={type === 'detail'}
               />
               <NumberInput
-                required
                 label='Periode Kadaluarsa (hari)'
                 name='expiry_period'
                 placeholder='Masukkan periode kadaluarsa...'
@@ -400,27 +443,7 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
                 readOnly={type === 'detail'}
               />
             </div>
-            <div className='grid sm:grid-cols-2 gap-4'>
-              <SelectInput
-                required
-                label='Supplier'
-                placeholder='Pilih supplier...'
-                isMulti
-                value={supplierOptions.filter((opt) =>
-                  (formik.values.supplier_ids || []).includes(opt.value)
-                )}
-                onChange={supplierChangeHandler}
-                options={supplierOptions}
-                onInputChange={setSupplierSelectInputValue}
-                isLoading={isLoadingSuppliers}
-                isError={
-                  formik.touched.supplier_ids &&
-                  Boolean(formik.errors.supplier_ids)
-                }
-                errorMessage={formik.errors.supplier_ids as string}
-                isDisabled={type === 'detail'}
-                isClearable
-              />
+            <div className='grid sm:grid-cols-1 gap-4'>
               <SelectInput
                 required
                 label='Flags'
@@ -443,6 +466,129 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
                 isClearable
               />
             </div>
+
+            <div className='grid sm:grid-cols-1 gap-4'>
+              {type !== 'detail' && formik.values.suppliers.length === 0 && (
+                <Button
+                  type='button'
+                  color='success'
+                  onClick={addSupplierHandler}
+                  className='w-fit mx-auto'
+                >
+                  <Icon icon='ic:round-plus' width={24} height={24} /> Tambah
+                  Supplier
+                </Button>
+              )}
+
+              {formik.values.suppliers.length > 0 && (
+                <Card
+                  className={{
+                    wrapper: 'w-full',
+                    body: 'p-4 shadow',
+                  }}
+                >
+                  <div className='mb-4 text-center'>
+                    <h4 className='font-bold text-xl'>Supplier</h4>
+                  </div>
+
+                  <div className='overflow-x-auto'>
+                    <table className='table'>
+                      <thead>
+                        <tr>
+                          <th className='after:content-["*"] after:text-red-500 after:ml-0.5'>
+                            Supplier
+                          </th>
+                          <th className='after:content-["*"] after:text-red-500 after:ml-0.5'>
+                            Harga
+                          </th>
+                          <th>Aksi</th>
+                        </tr>
+                      </thead>
+
+                      <tbody>
+                        {formik.values.suppliers.map((supplier, idx) => (
+                          <tr key={idx}>
+                            <td className='p-2 w-full max-w-1/2'>
+                              <SelectInput
+                                placeholder='Pilih Supplier'
+                                options={filteredSupplierOptions}
+                                onInputChange={setSupplierSelectInputValue}
+                                onMenuScrollToBottom={loadMoreSuppliers}
+                                isLoading={isLoadingSuppliers}
+                                value={formik.values.suppliers[idx].supplier}
+                                onChange={(val) => {
+                                  formik.setFieldValue(
+                                    `suppliers.${idx}.supplier`,
+                                    val
+                                  );
+                                }}
+                                isError={isSupplierRepeaterError(
+                                  'supplier',
+                                  idx
+                                )}
+                                isClearable
+                                isDisabled={type === 'detail'}
+                                className={{
+                                  wrapper: 'min-w-48 w-full',
+                                }}
+                              />
+                            </td>
+                            <td className='p-2 w-full max-w-1/2'>
+                              <NumberInput
+                                required
+                                name={`suppliers.${idx}.price`}
+                                placeholder='Masukkan harga...'
+                                value={formik.values.suppliers[idx].price}
+                                onChange={formik.handleChange}
+                                onBlur={formik.handleBlur}
+                                decimalScale={2}
+                                allowNegative={false}
+                                thousandSeparator=','
+                                decimalSeparator='.'
+                                inputPrefix='Rp '
+                                isError={isSupplierRepeaterError('price', idx)}
+                                readOnly={type === 'detail'}
+                                className={{
+                                  wrapper: 'min-w-48 w-full',
+                                }}
+                              />
+                            </td>
+                            {type !== 'detail' && (
+                              <td>
+                                <Button
+                                  type='button'
+                                  color='error'
+                                  onClick={() => deleteSupplierItemHandler(idx)}
+                                >
+                                  <Icon
+                                    icon='material-symbols:delete-outline-rounded'
+                                    width={24}
+                                    height={24}
+                                  />
+                                </Button>
+                              </td>
+                            )}
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+
+                  {type !== 'detail' && (
+                    <div className='w-full flex flex-row justify-center'>
+                      <Button
+                        type='button'
+                        color='success'
+                        onClick={addSupplierHandler}
+                      >
+                        <Icon icon='ic:round-plus' width={24} height={24} />{' '}
+                        Tambah Supplier
+                      </Button>
+                    </div>
+                  )}
+                </Card>
+              )}
+            </div>
           </div>
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (
diff --git a/src/components/pages/master-data/production-standard/ProductionStandardTable.tsx b/src/components/pages/master-data/production-standard/ProductionStandardTable.tsx
index afa41295..b56e31bd 100644
--- a/src/components/pages/master-data/production-standard/ProductionStandardTable.tsx
+++ b/src/components/pages/master-data/production-standard/ProductionStandardTable.tsx
@@ -7,7 +7,7 @@ import { ProductionStandard } from '@/types/api/master-data/production-standard'
 import { Icon } from '@iconify/react';
 import useSWR from 'swr';
 import { ProductionStandardApi } from '@/services/api/master-data';
-import { isResponseSuccess } from '@/lib/api-helper';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import { CellContext } from '@tanstack/react-table';
 import { useModal } from '@/components/Modal';
@@ -94,9 +94,16 @@ const ProductionStandardTable = () => {
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
-    await ProductionStandardApi.delete(
+    const deleteResponse = await ProductionStandardApi.delete(
       selectedProductionStandard?.id as number
     );
+
+    if (isResponseError(deleteResponse)) {
+      toast.error(deleteResponse.message);
+      setIsDeleteLoading(false);
+      return;
+    }
+
     refreshProductionStandards();
 
     deleteModal.closeModal();
diff --git a/src/components/pages/master-data/production-standard/form/ProductionStandardForm.schema.ts b/src/components/pages/master-data/production-standard/form/ProductionStandardForm.schema.ts
index 13183e71..eb59a9c0 100644
--- a/src/components/pages/master-data/production-standard/form/ProductionStandardForm.schema.ts
+++ b/src/components/pages/master-data/production-standard/form/ProductionStandardForm.schema.ts
@@ -2,34 +2,30 @@ import * as Yup from 'yup';
 
 // Schema for LAYING category (production_standard_details is required)
 const LayingRepeaterFormSchema = Yup.object({
-  week: Yup.number().required('Minggu wajib diisi!'),
+  week: Yup.number().required('Wajib diisi!'),
   production_standard_uniformity_details: Yup.object({
-    target_mean_bw: Yup.number().required('Berat rata-rata wajib diisi!'),
-    max_depletion: Yup.number().required('Maksimal depletion wajib diisi!'),
-    min_uniformity: Yup.number().required('Minimal uniformitas wajib diisi!'),
-    feed_intake: Yup.number().required('Pengambilan makanan wajib diisi!'),
+    target_mean_bw: Yup.number().required('Wajib diisi!'),
+    max_depletion: Yup.number().required('Wajib diisi!'),
+    min_uniformity: Yup.number().required('Wajib diisi!'),
+    feed_intake: Yup.number().required('Wajib diisi!'),
   }),
   production_standard_details: Yup.object({
-    target_hen_day_production: Yup.number().required(
-      'Produksi telur per hari wajib diisi!'
-    ),
-    target_hen_house_production: Yup.number().required(
-      'Produksi telur per kandang wajib diisi!'
-    ),
-    target_egg_weight: Yup.number().required('Berat telur wajib diisi!'),
-    target_egg_mass: Yup.number().required('Massa telur wajib diisi!'),
-    standard_fcr: Yup.number().required('FCR wajib diisi!'),
+    target_hen_day_production: Yup.number().required('Wajib diisi!'),
+    target_hen_house_production: Yup.number().required('Wajib diisi!'),
+    target_egg_weight: Yup.number().required('Wajib diisi!'),
+    target_egg_mass: Yup.number().required('Wajib diisi!'),
+    standard_fcr: Yup.number().required('Wajib diisi!'),
   }).required(),
 });
 
 // Schema for GROWING category (production_standard_details is optional)
 const GrowingRepeaterFormSchema = Yup.object({
-  week: Yup.number().required('Minggu wajib diisi!'),
+  week: Yup.number().required('Wajib diisi!'),
   production_standard_uniformity_details: Yup.object({
-    target_mean_bw: Yup.number().required('Berat rata-rata wajib diisi!'),
-    max_depletion: Yup.number().required('Maksimal depletion wajib diisi!'),
-    min_uniformity: Yup.number().required('Minimal uniformitas wajib diisi!'),
-    feed_intake: Yup.number().required('Pengambilan makanan wajib diisi!'),
+    target_mean_bw: Yup.number().required('Wajib diisi!'),
+    max_depletion: Yup.number().required('Wajib diisi!'),
+    min_uniformity: Yup.number().required('Wajib diisi!'),
+    feed_intake: Yup.number().required('Wajib diisi!'),
   }),
   production_standard_details: Yup.object({
     target_hen_day_production: Yup.number().optional(),
diff --git a/src/components/pages/master-data/production-standard/form/ProductionStandardForm.tsx b/src/components/pages/master-data/production-standard/form/ProductionStandardForm.tsx
index 8dfc5f45..4512f474 100644
--- a/src/components/pages/master-data/production-standard/form/ProductionStandardForm.tsx
+++ b/src/components/pages/master-data/production-standard/form/ProductionStandardForm.tsx
@@ -344,7 +344,7 @@ const ProductionStandardForm = ({
   const columns = useMemo<ColumnDef<TableRowsType>[]>(() => {
     const baseColumns: ColumnDef<TableRowsType>[] = [
       {
-        header: 'Minggu',
+        header: 'Week',
         accessorKey: 'week',
         enableSorting: false,
       },
@@ -358,30 +358,40 @@ const ProductionStandardForm = ({
               header: 'Hen Day',
               accessorFn: (row) =>
                 row.production_standard_details?.target_hen_day_production,
+              cell: ({ row }) =>
+                `${row.original.production_standard_details?.target_hen_day_production}%`,
               enableSorting: false,
             },
             {
               header: 'Hen House',
               accessorFn: (row) =>
                 row.production_standard_details?.target_hen_house_production,
+              cell: ({ row }) =>
+                `${row.original.production_standard_details?.target_hen_house_production} pc`,
               enableSorting: false,
             },
             {
               header: 'Egg Weight',
               accessorFn: (row) =>
                 row.production_standard_details?.target_egg_weight,
+              cell: ({ row }) =>
+                `${row.original.production_standard_details?.target_egg_weight} g`,
               enableSorting: false,
             },
             {
               header: 'Egg Mass',
               accessorFn: (row) =>
                 row.production_standard_details?.target_egg_mass,
+              cell: ({ row }) =>
+                `${row.original.production_standard_details?.target_egg_mass} g`,
               enableSorting: false,
             },
             {
               header: 'FCR',
               accessorFn: (row) =>
                 row.production_standard_details?.standard_fcr,
+              cell: ({ row }) =>
+                `${row.original.production_standard_details?.standard_fcr} g`,
               enableSorting: false,
             },
           ]
@@ -393,24 +403,32 @@ const ProductionStandardForm = ({
         header: 'Mean BW',
         accessorFn: (row) =>
           row.production_standard_uniformity_details?.target_mean_bw,
+        cell: ({ row }) =>
+          `${row.original.production_standard_uniformity_details?.target_mean_bw} g`,
         enableSorting: false,
       },
       {
         header: 'Max Depletion',
         accessorFn: (row) =>
           row.production_standard_uniformity_details?.max_depletion,
+        cell: ({ row }) =>
+          `${row.original.production_standard_uniformity_details?.max_depletion}%`,
         enableSorting: false,
       },
       {
         header: 'Min Uniformity',
         accessorFn: (row) =>
           row.production_standard_uniformity_details?.min_uniformity,
+        cell: ({ row }) =>
+          `${row.original.production_standard_uniformity_details?.min_uniformity}%`,
         enableSorting: false,
       },
       {
         header: 'Feed Intake',
         accessorFn: (row) =>
           row.production_standard_uniformity_details?.feed_intake,
+        cell: ({ row }) =>
+          `${row.original.production_standard_uniformity_details?.feed_intake} g`,
         enableSorting: false,
       },
     ];
@@ -728,7 +746,52 @@ const ProductionStandardForm = ({
   };
 
   // ===== Formik Error List =====
-  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);
+  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(
+    formik,
+    {
+      onBeforeSubmit: (e) => {
+        e.preventDefault();
+
+        // For GROWING category, clear production_standard_details errors and set default values
+        if (formik.values.project_category === 'GROWING') {
+          // Set default values for production_standard_details
+          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,
+            };
+          });
+
+          // Clear any errors related to production_standard_details
+          const currentErrors = { ...formik.errors };
+          if (currentErrors.details && Array.isArray(currentErrors.details)) {
+            const cleanedDetails = currentErrors.details
+              .map((detailError) => {
+                if (detailError && typeof detailError === 'object') {
+                  const { production_standard_details, ...rest } = detailError;
+                  return Object.keys(rest).length > 0 ? rest : undefined;
+                }
+                return detailError;
+              })
+              .filter(
+                (error): error is Exclude<typeof error, undefined> =>
+                  error !== undefined
+              );
+
+            currentErrors.details = (
+              cleanedDetails.length > 0 ? cleanedDetails : undefined
+            ) as typeof currentErrors.details;
+          }
+          formik.setErrors(currentErrors);
+        }
+
+        return true;
+      },
+    }
+  );
 
   return (
     <>
@@ -821,19 +884,20 @@ const ProductionStandardForm = ({
                   key={`row-${row.index}`}
                   className='sticky bottom-0 bg-base-100 shadow-lg'
                 >
-                  <td colSpan={colSpan} className='p-6'>
+                  <td colSpan={colSpan} className='p-2'>
                     <form
                       className='h-full w-full flex flex-col justify-end'
                       onSubmit={repeaterFormik.handleSubmit}
                       onReset={repeaterFormik.handleReset}
                     >
                       <div
-                        className={cn(
-                          'grid gap-4 items-start',
-                          formik.values.project_category === 'LAYING'
-                            ? 'grid-cols-10'
-                            : 'grid-cols-5'
-                        )}
+                        className='grid gap-2 items-start w-full'
+                        style={{
+                          gridTemplateColumns:
+                            formik.values.project_category === 'LAYING'
+                              ? 'repeat(10, minmax(auto, 1fr)) minmax(auto, auto)'
+                              : 'repeat(4, minmax(auto, 1fr)) minmax(auto, auto)',
+                        }}
                       >
                         <NumberInput
                           name='week'
@@ -862,7 +926,7 @@ const ProductionStandardForm = ({
                               }
                               onChange={repeaterFormik.handleChange}
                               onBlur={repeaterFormik.handleBlur}
-                              endAdornment={<Icon icon='mdi:percent' />}
+                              bottomLabel='Persen (%)'
                               errorMessage={getProductionDetailsError(
                                 repeaterFormik.errors
                                   .production_standard_details,
@@ -894,11 +958,7 @@ const ProductionStandardForm = ({
                               }
                               onChange={repeaterFormik.handleChange}
                               onBlur={repeaterFormik.handleBlur}
-                              endAdornment={
-                                <div className='w-full h-full flex items-center justify-center'>
-                                  Butir
-                                </div>
-                              }
+                              bottomLabel='Butir (pc)'
                               errorMessage={getProductionDetailsError(
                                 repeaterFormik.errors
                                   .production_standard_details,
@@ -930,11 +990,7 @@ const ProductionStandardForm = ({
                               }
                               onChange={repeaterFormik.handleChange}
                               onBlur={repeaterFormik.handleBlur}
-                              endAdornment={
-                                <div className='w-full h-full flex items-center justify-center'>
-                                  gr
-                                </div>
-                              }
+                              bottomLabel='Gram (g)'
                               errorMessage={getProductionDetailsError(
                                 repeaterFormik.errors
                                   .production_standard_details,
@@ -959,17 +1015,13 @@ const ProductionStandardForm = ({
                               name='production_standard_details.target_egg_mass'
                               label='Egg Mass'
                               placeholder='1'
+                              bottomLabel='Gram (g)'
                               value={
                                 repeaterFormik.values
                                   .production_standard_details?.target_egg_mass
                               }
                               onChange={repeaterFormik.handleChange}
                               onBlur={repeaterFormik.handleBlur}
-                              endAdornment={
-                                <div className='w-full h-full flex items-center justify-center'>
-                                  gr
-                                </div>
-                              }
                               errorMessage={getProductionDetailsError(
                                 repeaterFormik.errors
                                   .production_standard_details,
@@ -1000,11 +1052,7 @@ const ProductionStandardForm = ({
                               }
                               onChange={repeaterFormik.handleChange}
                               onBlur={repeaterFormik.handleBlur}
-                              endAdornment={
-                                <div className='w-full h-full flex items-center justify-center'>
-                                  gr
-                                </div>
-                              }
+                              bottomLabel='Gram (g)'
                               errorMessage={getProductionDetailsError(
                                 repeaterFormik.errors
                                   .production_standard_details,
@@ -1038,11 +1086,7 @@ const ProductionStandardForm = ({
                           }
                           onChange={repeaterFormik.handleChange}
                           onBlur={repeaterFormik.handleBlur}
-                          endAdornment={
-                            <div className='w-full h-full flex items-center justify-center'>
-                              gr
-                            </div>
-                          }
+                          bottomLabel='Gram (g)'
                           errorMessage={
                             repeaterFormik.errors
                               .production_standard_uniformity_details
@@ -1072,7 +1116,7 @@ const ProductionStandardForm = ({
                           }
                           onChange={repeaterFormik.handleChange}
                           onBlur={repeaterFormik.handleBlur}
-                          endAdornment={<Icon icon='mdi:percent' />}
+                          bottomLabel='Persen (%)'
                           errorMessage={
                             repeaterFormik.errors
                               .production_standard_uniformity_details
@@ -1102,7 +1146,7 @@ const ProductionStandardForm = ({
                           }
                           onChange={repeaterFormik.handleChange}
                           onBlur={repeaterFormik.handleBlur}
-                          endAdornment={<Icon icon='mdi:percent' />}
+                          bottomLabel='Persen (%)'
                           errorMessage={
                             repeaterFormik.errors
                               .production_standard_uniformity_details
@@ -1132,11 +1176,8 @@ const ProductionStandardForm = ({
                           }
                           onChange={repeaterFormik.handleChange}
                           onBlur={repeaterFormik.handleBlur}
-                          endAdornment={
-                            <div className='w-full h-full flex items-center justify-center'>
-                              gr/ekor
-                            </div>
-                          }
+                          bottomLabel='Gram/Ekor (g)'
+                          endAdornment
                           errorMessage={
                             repeaterFormik.errors
                               .production_standard_uniformity_details
@@ -1162,7 +1203,7 @@ const ProductionStandardForm = ({
                             type='button'
                             color='error'
                             variant='outline'
-                            className='min-w-24'
+                            className='min-w-xs'
                             onClick={handleCancelEdit}
                           >
                             <Icon icon='mdi:close' /> Batal
@@ -1178,7 +1219,7 @@ const ProductionStandardForm = ({
                           <Button
                             type='submit'
                             color={editMode ? 'warning' : 'success'}
-                            className='min-w-24'
+                            className='min-w-xs'
                             disabled={
                               isAddingRow ||
                               formik.values.project_category === ''
@@ -1195,7 +1236,7 @@ const ProductionStandardForm = ({
                           variant='outline'
                           color='primary'
                           onClick={toggleTableHeight}
-                          className='absolute bottom-6 right-6'
+                          className='absolute bottom-2 right-2'
                         >
                           <Icon
                             icon={
diff --git a/src/components/pages/master-data/supplier/SupplierTable.tsx b/src/components/pages/master-data/supplier/SupplierTable.tsx
index 3e10c9c8..2620c9e6 100644
--- a/src/components/pages/master-data/supplier/SupplierTable.tsx
+++ b/src/components/pages/master-data/supplier/SupplierTable.tsx
@@ -11,7 +11,7 @@ import RowDropdownOptions from '@/components/table/RowDropdownOptions';
 import RowOptionsMenuWrapper from '@/components/table/RowOptionsMenuWrapper';
 import RequirePermission from '@/components/helper/RequirePermission';
 import { ROWS_OPTIONS } from '@/config/constant';
-import { isResponseSuccess } from '@/lib/api-helper';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { cn } from '@/lib/helper';
 import { SupplierApi } from '@/services/api/master-data';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
@@ -205,7 +205,16 @@ const SuppliersTable = () => {
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
-    await SupplierApi.delete(selectedSupplier?.id as number);
+    const deleteResponse = await SupplierApi.delete(
+      selectedSupplier?.id as number
+    );
+
+    if (isResponseError(deleteResponse)) {
+      toast.error(deleteResponse.message);
+      setIsDeleteLoading(false);
+      return;
+    }
+
     refreshSuppliers();
 
     deleteModal.closeModal();
diff --git a/src/components/pages/master-data/uom/UomsTable.tsx b/src/components/pages/master-data/uom/UomsTable.tsx
index 851647b9..51e95661 100644
--- a/src/components/pages/master-data/uom/UomsTable.tsx
+++ b/src/components/pages/master-data/uom/UomsTable.tsx
@@ -20,7 +20,7 @@ import RequirePermission from '@/components/helper/RequirePermission';
 import { Uom } from '@/types/api/master-data/uom';
 import { UomApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
-import { isResponseSuccess } from '@/lib/api-helper';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
 
@@ -164,7 +164,14 @@ const UomsTable = () => {
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
-    await UomApi.delete(selectedUom?.id as number);
+    const deleteResponse = await UomApi.delete(selectedUom?.id as number);
+
+    if (isResponseError(deleteResponse)) {
+      toast.error(deleteResponse.message);
+      setIsDeleteLoading(false);
+      return;
+    }
+
     refreshUoms();
 
     deleteModal.closeModal();
diff --git a/src/components/pages/master-data/warehouse/WarehousesTable.tsx b/src/components/pages/master-data/warehouse/WarehousesTable.tsx
index fe694322..62c39574 100644
--- a/src/components/pages/master-data/warehouse/WarehousesTable.tsx
+++ b/src/components/pages/master-data/warehouse/WarehousesTable.tsx
@@ -25,7 +25,7 @@ import RequirePermission from '@/components/helper/RequirePermission';
 import { Warehouse } from '@/types/api/master-data/warehouse';
 import { WarehouseApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
-import { isResponseSuccess } from '@/lib/api-helper';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { ROWS_OPTIONS } from '@/config/constant';
 
@@ -220,7 +220,16 @@ const WarehousesTable = () => {
   const confirmationModalDeleteClickHandler = async () => {
     setIsDeleteLoading(true);
 
-    await WarehouseApi.delete(selectedWarehouse?.id as number);
+    const deleteResponse = await WarehouseApi.delete(
+      selectedWarehouse?.id as number
+    );
+
+    if (isResponseError(deleteResponse)) {
+      toast.error(deleteResponse.message);
+      setIsDeleteLoading(false);
+      return;
+    }
+
     refreshWarehouses();
 
     deleteModal.closeModal();
diff --git a/src/components/pages/master-data/warehouse/form/WarehouseForm.tsx b/src/components/pages/master-data/warehouse/form/WarehouseForm.tsx
index 0fb55a2a..a6a53e3f 100644
--- a/src/components/pages/master-data/warehouse/form/WarehouseForm.tsx
+++ b/src/components/pages/master-data/warehouse/form/WarehouseForm.tsx
@@ -9,7 +9,10 @@ import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import Button from '@/components/Button';
 import TextInput from '@/components/input/TextInput';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import RequirePermission from '@/components/helper/RequirePermission';
@@ -35,6 +38,8 @@ import { cn } from '@/lib/helper';
 import { WAREHOUSE_TYPE_OPTIONS } from '@/config/constant';
 import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 import AlertErrorList from '@/components/helper/form/FormErrors';
+import { Area } from '@/types/api/master-data/area';
+import { Kandang } from '@/types/api/master-data/kandang';
 
 interface WarehouseFormProps {
   type?: 'add' | 'edit' | 'detail';
@@ -221,61 +226,28 @@ const WarehouseForm = ({ type = 'add', initialValues }: WarehouseFormProps) => {
   const { setValues: formikSetValues } = formik;
 
   // Area
-  const [areaSelectInputValue, setAreaSelectInputValue] = useState('');
-
-  const areasUrl = `${AreaApi.basePath}?${new URLSearchParams({
-    search: areaSelectInputValue ?? '',
-  }).toString()}`;
-
-  const { data: areas, isLoading: isLoadingAreas } = useSWR(
-    areasUrl,
-    AreaApi.getAllFetcher
-  );
-
-  const areaOptions = isResponseSuccess(areas)
-    ? areas?.data.map((area) => ({
-        value: area.id,
-        label: area.name,
-      }))
-    : [];
+  const {
+    setInputValue: setAreaSelectInputValue,
+    options: areaOptions,
+    isLoadingOptions: isLoadingAreaOptions,
+    loadMore: loadMoreAreas,
+  } = useSelect<Area>(AreaApi.basePath, 'id', 'name');
 
   // Location
-  const [locationSelectInputValue, setLocationSelectInputValue] = useState('');
-
-  const locationsUrl = `${LocationApi.basePath}?${new URLSearchParams({
-    search: locationSelectInputValue ?? '',
-  }).toString()}`;
-
-  const { data: locations, isLoading: isLoadingLocations } = useSWR(
-    locationsUrl,
-    LocationApi.getAllFetcher
-  );
-
-  const locationOptions = isResponseSuccess(locations)
-    ? locations?.data.map((location) => ({
-        value: location.id,
-        label: location.name,
-      }))
-    : [];
+  const {
+    setInputValue: setLocationSelectInputValue,
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocationOptions,
+    loadMore: loadMoreLocations,
+  } = useSelect<Location>(LocationApi.basePath, 'id', 'name');
 
   // Kandang
-  const [kandangSelectInputValue, setKandangSelectInputValue] = useState('');
-
-  const kandangsUrl = `${KandangApi.basePath}?${new URLSearchParams({
-    search: kandangSelectInputValue ?? '',
-  }).toString()}`;
-
-  const { data: kandangs, isLoading: isLoadingKandangs } = useSWR(
-    kandangsUrl,
-    KandangApi.getAllFetcher
-  );
-
-  const kandangOptions = isResponseSuccess(kandangs)
-    ? kandangs?.data.map((kandang) => ({
-        value: kandang.id,
-        label: kandang.name,
-      }))
-    : [];
+  const {
+    setInputValue: setKandangSelectInputValue,
+    options: kandangOptions,
+    isLoadingOptions: isLoadingKandangOptions,
+    loadMore: loadMoreKandangs,
+  } = useSelect<Kandang>(KandangApi.basePath, 'id', 'name');
 
   const typeChangeHandler = (val: OptionType | OptionType[] | null) => {
     formik.setFieldTouched('type', true);
@@ -358,7 +330,7 @@ const WarehouseForm = ({ type = 'add', initialValues }: WarehouseFormProps) => {
               required
               label='Nama'
               name='name'
-              placeholder='Masukkan nama lokasi'
+              placeholder='Masukkan nama warehouse'
               value={formik.values.name}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
@@ -393,7 +365,8 @@ const WarehouseForm = ({ type = 'add', initialValues }: WarehouseFormProps) => {
               onChange={areaChangeHandler}
               options={areaOptions}
               onInputChange={setAreaSelectInputValue}
-              isLoading={isLoadingAreas}
+              onMenuScrollToBottom={loadMoreAreas}
+              isLoading={isLoadingAreaOptions}
               isError={formik.touched.areaId && Boolean(formik.errors.areaId)}
               errorMessage={formik.errors.areaId as string}
               isDisabled={type === 'detail'}
@@ -409,7 +382,8 @@ const WarehouseForm = ({ type = 'add', initialValues }: WarehouseFormProps) => {
                 onChange={locationChangeHandler}
                 options={locationOptions}
                 onInputChange={setLocationSelectInputValue}
-                isLoading={isLoadingLocations}
+                onMenuScrollToBottom={loadMoreLocations}
+                isLoading={isLoadingLocationOptions}
                 isError={
                   formik.touched.locationId && Boolean(formik.errors.locationId)
                 }
@@ -427,7 +401,8 @@ const WarehouseForm = ({ type = 'add', initialValues }: WarehouseFormProps) => {
                 onChange={kandangChangeHandler}
                 options={kandangOptions}
                 onInputChange={setKandangSelectInputValue}
-                isLoading={isLoadingKandangs}
+                onMenuScrollToBottom={loadMoreKandangs}
+                isLoading={isLoadingKandangOptions}
                 isError={
                   formik.touched.kandangId && Boolean(formik.errors.kandangId)
                 }
diff --git a/src/components/pages/production/chickin/form/ChickinForm.tsx b/src/components/pages/production/chickin/form/ChickinForm.tsx
index b5b1dc4d..d484e1c6 100644
--- a/src/components/pages/production/chickin/form/ChickinForm.tsx
+++ b/src/components/pages/production/chickin/form/ChickinForm.tsx
@@ -75,12 +75,12 @@ const ChickinFormKandang = ({
         <div className='flex flex-row gap-2'>
           <Badge
             variant='soft'
-            color='success'
+            color='primary'
             className={{
               badge: 'rounded-lg px-2',
             }}
           >
-            <Icon icon='mdi:circle' width={12} height={12} color='success' />{' '}
+            <Icon icon='mdi:circle' width={12} height={12} color='primary' />{' '}
             Aktif
           </Badge>
           <div className='divider divider-horizontal p-0 m-0'></div>
diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
index 5ca0e789..ab14ef84 100644
--- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx
+++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
@@ -5,14 +5,17 @@ import Button from '@/components/Button';
 import FloatingActionsButton from '@/components/FloatingActionsButton';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import DebouncedTextInput from '@/components/input/DebouncedTextInput';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
 import Table from '@/components/Table';
 import { ROWS_OPTIONS } from '@/config/constant';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
-import { cn, formatDate } from '@/lib/helper';
+import { cn, formatDate, formatTitleCase } from '@/lib/helper';
 import { AreaApi, KandangApi, LocationApi } from '@/services/api/master-data';
 import { ProjectFlockApi } from '@/services/api/production/project-flock';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
@@ -59,9 +62,6 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
   const selectedRowIds = Object.keys(rowSelection)
     .filter((id) => rowSelection[id])
     .map((id) => parseInt(id));
-  const [locationSelectInputValue, setLocationSelectInputValue] = useState('');
-  const [areaSelectInputValue, setAreaSelectInputValue] = useState('');
-  const [kandangSelectInputValue, setKandangSelectInputValue] = useState('');
   const [selectedArea, setSelectedArea] = useState<OptionType | null>(null);
   const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
     null
@@ -90,55 +90,25 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
     { revalidateOnMount: true }
   );
 
-  const areaUrl = `${AreaApi.basePath}?${new URLSearchParams({
-    search: areaSelectInputValue,
-    limit: '100',
-  }).toString()}`;
-  const { data: areas, isLoading: isLoadingAreas } = useSWR(
-    areaUrl,
-    AreaApi.getAllFetcher
-  );
-
-  const locationUrl = `${LocationApi.basePath}?${new URLSearchParams({
-    search: locationSelectInputValue,
-    area_id: selectedArea != null ? selectedArea.value.toString() : '',
-    limit: '100',
-  }).toString()}`;
-  const { data: locations, isLoading: isLoadingLocations } = useSWR(
-    locationUrl,
-    LocationApi.getAllFetcher
-  );
-
-  const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
-    search: kandangSelectInputValue,
-    location_id:
-      selectedLocation != null ? selectedLocation.value.toString() : '',
-    limit: '100',
-  }).toString()}`;
-  const { data: kandangs, isLoading: isLoadingKandang } = useSWR(
-    kandangUrl,
-    KandangApi.getAllFetcher
-  );
-
-  // ===== Data to Options Mapping ======
-  const optionsArea = isResponseSuccess(areas)
-    ? areas?.data.map((area) => ({
-        value: area.id,
-        label: area.name,
-      }))
-    : [];
-  const optionsKandang = isResponseSuccess(kandangs)
-    ? kandangs?.data.map((kandang) => ({
-        value: kandang.id,
-        label: kandang.name,
-      }))
-    : [];
-  const optionsLocation = isResponseSuccess(locations)
-    ? locations?.data.map((location) => ({
-        value: location.id,
-        label: location.name,
-      }))
-    : [];
+  // ===== Fetch Data Select =====
+  const {
+    options: optionsArea,
+    isLoadingOptions: isLoadingArea,
+    setInputValue: setAreaSelectInputValue,
+    loadMore: loadMoreArea,
+  } = useSelect(AreaApi.basePath, 'id', 'name');
+  const {
+    options: optionsLocation,
+    isLoadingOptions: isLoadingLocation,
+    setInputValue: setLocationSelectInputValue,
+    loadMore: loadMoreLocation,
+  } = useSelect(LocationApi.basePath, 'id', 'name');
+  const {
+    options: optionsKandang,
+    isLoadingOptions: isLoadingKandang,
+    setInputValue: setKandangSelectInputValue,
+    loadMore: loadMoreKandang,
+  } = useSelect(KandangApi.basePath, 'id', 'name');
 
   // ====== HANDLER ======
   const confirmationModalDeleteClickHandler = async () => {
@@ -284,7 +254,8 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
         header: 'Status',
         cell: (props) => {
           const approval = props.row.original.approval;
-
+          const isRejected = approval?.action == 'REJECTED';
+          const isApproved = approval?.action == 'APPROVED';
           return (
             <Badge
               variant='soft'
@@ -292,11 +263,17 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
                 badge: 'rounded-lg px-2 w-full flex flex-row justify-start',
               }}
               color={
-                approval?.step_number == 1
-                  ? 'neutral'
-                  : approval?.step_number == 2
-                    ? 'success'
-                    : 'error'
+                isRejected
+                  ? 'error'
+                  : isApproved
+                    ? approval?.step_number == 1
+                      ? 'neutral'
+                      : approval?.step_number == 2
+                        ? 'primary'
+                        : approval?.step_number == 3
+                          ? 'success'
+                          : 'neutral'
+                    : 'neutral'
               }
             >
               <Icon
@@ -307,11 +284,15 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
                   approval?.step_number == 1
                     ? 'neutral'
                     : approval?.step_number == 2
-                      ? 'success'
-                      : 'error'
+                      ? 'primary'
+                      : approval?.step_number == 3
+                        ? 'success'
+                        : 'neutral'
                 }
               />
-              {approval?.step_name}
+              {isRejected
+                ? 'Ditolak'
+                : formatTitleCase(approval?.step_name || '')}
             </Badge>
           );
         },
@@ -385,7 +366,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
               <SelectInput
                 label='Area'
                 options={optionsArea}
-                isLoading={isLoadingAreas}
+                isLoading={isLoadingArea}
                 value={selectedArea}
                 onChange={(val) => {
                   setSelectedArea(val as OptionType);
@@ -395,12 +376,13 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
                   );
                 }}
                 onInputChange={setAreaSelectInputValue}
+                onMenuScrollToBottom={loadMoreArea}
                 isClearable
               />
               <SelectInput
                 label='Lokasi'
                 options={optionsLocation}
-                isLoading={isLoadingLocations}
+                isLoading={isLoadingLocation}
                 value={selectedLocation}
                 onChange={(val) => {
                   setSelectedLocation(val as OptionType);
@@ -410,6 +392,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
                   );
                 }}
                 onInputChange={setLocationSelectInputValue}
+                onMenuScrollToBottom={loadMoreLocation}
                 isClearable
               />
               <SelectInput
@@ -425,6 +408,7 @@ const ProjectFlockTable = ({ refresh }: { refresh?: () => void }) => {
                   );
                 }}
                 onInputChange={setKandangSelectInputValue}
+                onMenuScrollToBottom={loadMoreKandang}
                 isClearable
               />
               <DebouncedTextInput
diff --git a/src/components/pages/production/project-flock/detail/ProjectFlockDetail.tsx b/src/components/pages/production/project-flock/detail/ProjectFlockDetail.tsx
index 4a998c83..50b258fb 100644
--- a/src/components/pages/production/project-flock/detail/ProjectFlockDetail.tsx
+++ b/src/components/pages/production/project-flock/detail/ProjectFlockDetail.tsx
@@ -156,9 +156,9 @@ const ProjectFlockDetail = ({
                   projectFlock.approval?.step_number == 1
                     ? 'neutral'
                     : projectFlock.approval?.step_number == 2
-                      ? 'success'
-                      : projectFlock.approval?.step_number >= 3
-                        ? 'error'
+                      ? 'primary'
+                      : projectFlock.approval?.step_number == 3
+                        ? 'success'
                         : undefined
                 }
                 className={{
@@ -173,9 +173,9 @@ const ProjectFlockDetail = ({
                     projectFlock.approval?.step_number == 1
                       ? 'neutral'
                       : projectFlock.approval?.step_number == 2
-                        ? 'success'
-                        : projectFlock.approval?.step_number >= 3
-                          ? 'error'
+                        ? 'primary'
+                        : projectFlock.approval?.step_number == 3
+                          ? 'success'
                           : undefined
                   }
                 />{' '}
@@ -273,7 +273,7 @@ const ProjectFlockDetail = ({
             <div className='flex flex-row gap-2'>
               <Badge
                 variant='soft'
-                color={'success'}
+                color={'primary'}
                 className={{
                   badge: 'rounded-lg px-2',
                 }}
@@ -282,7 +282,7 @@ const ProjectFlockDetail = ({
                   icon='mdi:circle'
                   width={12}
                   height={12}
-                  color={'success'}
+                  color={'primary'}
                 />{' '}
                 Kandang Aktif ({projectFlock.kandangs?.length})
               </Badge>
diff --git a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
index 745a6b1e..89769787 100644
--- a/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
+++ b/src/components/pages/production/project-flock/form/ProjectFlockForm.tsx
@@ -102,41 +102,54 @@ const ProjectFlockForm = ({
   );
 
   // Fetch Data
-  const { isLoadingOptions: isLoadingFlocks, options: optionsFlock } =
-    useSelect(FlockApi.basePath, 'id', 'name');
+  const {
+    setInputValue: setInputValueFlock,
+    isLoadingOptions: isLoadingFlocks,
+    options: optionsFlock,
+    loadMore: loadMoreFlock,
+  } = useSelect(FlockApi.basePath, 'id', 'name', '', {
+    project_category: selectedCategory,
+  });
 
-  const { options: optionsArea, isLoadingOptions: isLoadingAreas } = useSelect(
-    AreaApi.basePath,
-    'id',
-    'name'
-  );
+  const {
+    setInputValue: setInputValueArea,
+    options: optionsArea,
+    isLoadingOptions: isLoadingAreas,
+    loadMore: loadMoreArea,
+  } = useSelect(AreaApi.basePath, 'id', 'name');
 
-  const { options: optionsLocation, isLoadingOptions: isLoadingLocations } =
-    useSelect(LocationApi.basePath, 'id', 'name', '', {
-      area_id:
-        selectedArea != ''
-          ? selectedArea
-          : ((initialValues?.area?.id ?? '') as string),
-    });
+  const {
+    options: optionsLocation,
+    isLoadingOptions: isLoadingLocations,
+    setInputValue: setInputValueLocation,
+    loadMore: loadMoreLocation,
+  } = useSelect(LocationApi.basePath, 'id', 'name', '', {
+    area_id:
+      selectedArea != ''
+        ? selectedArea
+        : ((initialValues?.area?.id ?? '') as string),
+  });
 
-  const { options: optionsFcr, isLoadingOptions: isLoadingFcrs } = useSelect(
-    FcrApi.basePath,
-    'id',
-    'name'
-  );
+  const {
+    options: optionsFcr,
+    isLoadingOptions: isLoadingFcrs,
+    setInputValue: setInputValueFcr,
+    loadMore: loadMoreFcr,
+  } = useSelect(FcrApi.basePath, 'id', 'name');
 
   const {
     options: optionsProductionStandards,
     isLoadingOptions: isLoadingProductionStandards,
+    setInputValue: setInputValueProductionStandard,
+    loadMore: loadMoreProductionStandard,
   } = useSelect(ProductionStandardApi.basePath, 'id', 'name', '', {
-    search: '',
     project_category: selectedCategory,
   });
 
   const kandangUrl = `${KandangApi.basePath}?${new URLSearchParams({
     search: '',
     location_id: selectedLocation == '' ? '0' : selectedLocation,
-    limit: 'limit',
+    limit: '500',
   }).toString()}`;
   const {
     data: kandang,
@@ -153,6 +166,8 @@ const ProjectFlockForm = ({
     options: optionsNonstock,
     rawData: nonstocks,
     isLoadingOptions: isLoadingNonstocks,
+    setInputValue: setInputValueNonstock,
+    loadMore: loadMoreNonstock,
   } = useSelect<Nonstock>(NonstockApi.basePath, 'id', 'name');
 
   useEffect(() => {
@@ -542,15 +557,12 @@ const ProjectFlockForm = ({
   };
 
   const onDeleteBudgetRowHandler = (nonstock_id: number, index?: number) => {
-    console.log(`nonstock_id: ${nonstock_id}, index: ${index}`);
     if (!nonstock_id) {
       const updatedBudgets = formik.values.project_budgets
         .map((budget, i) => {
           if (i == index) {
-            console.log(`buget: ${null}, index: ${index}, i: ${i}`);
             return null;
           } else {
-            console.log(`buget: ${budget}, index: ${index}, i: ${i}`);
             return budget;
           }
         })
@@ -722,6 +734,8 @@ const ProjectFlockForm = ({
                   formik.touched.area_id && Boolean(formik.errors.area_id)
                 }
                 errorMessage={formik.errors.area_id as string}
+                onInputChange={setInputValueArea}
+                onMenuScrollToBottom={loadMoreArea}
                 isClearable
                 isDisabled={formType != 'add'}
               />
@@ -740,6 +754,8 @@ const ProjectFlockForm = ({
                   formik.touched.location_id &&
                   Boolean(formik.errors.location_id)
                 }
+                onInputChange={setInputValueLocation}
+                onMenuScrollToBottom={loadMoreLocation}
                 errorMessage={formik.errors.location_id as string}
                 isClearable
                 isDisabled={formType != 'add' || disabledLocation}
@@ -766,6 +782,8 @@ const ProjectFlockForm = ({
                   );
                 }}
                 options={optionsFlock}
+                onInputChange={setInputValueFlock}
+                onMenuScrollToBottom={loadMoreFlock}
                 isLoading={isLoadingFlocks}
                 isError={
                   formik.touched.flock_name && Boolean(formik.errors.flock_name)
@@ -781,6 +799,8 @@ const ProjectFlockForm = ({
                 onChange={(val) => {
                   optionChangeHandler(val, 'fcr');
                 }}
+                onInputChange={setInputValueFcr}
+                onMenuScrollToBottom={loadMoreFcr}
                 options={optionsFcr}
                 isLoading={isLoadingFcrs}
                 isError={formik.touched.fcr_id && Boolean(formik.errors.fcr_id)}
@@ -808,6 +828,8 @@ const ProjectFlockForm = ({
                 onChange={(val) => {
                   optionChangeHandler(val, 'production_standard');
                 }}
+                onInputChange={setInputValueProductionStandard}
+                onMenuScrollToBottom={loadMoreProductionStandard}
                 options={optionsProductionStandards}
                 isLoading={isLoadingProductionStandards}
                 isError={
@@ -892,6 +914,8 @@ const ProjectFlockForm = ({
                           isLoading={isLoadingNonstocks}
                           placeholder='Pilih barang non stock'
                           value={formik.values.project_budgets[index].nonstock}
+                          onInputChange={setInputValueNonstock}
+                          onMenuScrollToBottom={loadMoreNonstock}
                           onChange={(val) => {
                             const updatedBudgets = [
                               ...formik.values.project_budgets,
diff --git a/src/components/pages/production/recording/RecordingTable.tsx b/src/components/pages/production/recording/RecordingTable.tsx
index 39b17ef7..8d8caad1 100644
--- a/src/components/pages/production/recording/RecordingTable.tsx
+++ b/src/components/pages/production/recording/RecordingTable.tsx
@@ -5,7 +5,7 @@ import { RefObject } from 'react';
 import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import { SortingState, CellContext } from '@tanstack/react-table';
-import { cn, formatDate } from '@/lib/helper';
+import { cn, formatDate, formatNumber } from '@/lib/helper';
 import RequirePermission from '@/components/helper/RequirePermission';
 import { useModal } from '@/components/Modal';
 import Modal from '@/components/Modal';
@@ -656,34 +656,57 @@ const RecordingTable = () => {
               );
             },
             cell: ({ row }) => {
+              const recording = row.original;
+              const isDisabled = isRecordingApproved(recording);
+
+              const handleToggleSelection = (e: unknown) => {
+                if (!isDisabled) {
+                  row.getToggleSelectedHandler()(e);
+                }
+              };
+
               return (
-                <div>
+                <div className={cn({ 'opacity-50': isDisabled })}>
                   <CheckboxInput
                     name='row'
                     checked={row.getIsSelected()}
                     indeterminate={row.getIsSomeSelected()}
-                    onChange={row.getToggleSelectedHandler()}
+                    onChange={handleToggleSelection}
+                    disabled={isDisabled}
                   />
                 </div>
               );
             },
           },
           {
-            header: '#',
+            header: 'No',
             cell: (props) =>
               tableFilterState.pageSize * (tableFilterState.page - 1) +
               props.row.index +
               1,
           },
           {
-            header: 'Nama Project',
+            header: 'Lokasi',
+            cell: (props) => props.row.original.location?.name || '-',
+          },
+          {
+            header: 'Flock',
             cell: (props) =>
-              `Project ${props.row.original.project_flock_kandang_id}`,
+              props.row.original.project_flock?.flock_name || '-',
+          },
+          {
+            header: 'Kandang',
+            cell: (props) => props.row.original.kandang?.name || '-',
+          },
+          {
+            header: 'Periode',
+            cell: (props) => props.row.original.project_flock?.period || '-',
           },
           {
             header: 'Kategori',
             cell: (props) => {
-              const category = props.row.original.project_flock_category;
+              const category =
+                props.row.original.project_flock?.project_flock_category;
               if (!category) return '-';
               const color = category === 'LAYING' ? 'info' : 'warning';
               return (
@@ -695,18 +718,280 @@ const RecordingTable = () => {
           },
           {
             header: 'Umur (hari)',
-            cell: (props) => props.row.original.day,
+            cell: (props) => {
+              return (
+                <>
+                  <span>
+                    {props.row.original.day} (Minggu ke-
+                    {props.row.original.project_flock.production_standart.week})
+                  </span>
+                </>
+              );
+            },
           },
           {
-            accessorKey: 'record_date',
             header: 'Waktu Recording',
             cell: (props) =>
               formatDate(props.row.original.record_datetime, 'DD MMMM YYYY'),
           },
           {
-            header: 'Populasi Awal',
+            header: 'Populasi Akhir',
             cell: (props) =>
-              props.row.original.total_chick_qty?.toLocaleString() || '-',
+              props.row.original.project_flock?.total_chick_qty != null
+                ? formatNumber(props.row.original.project_flock.total_chick_qty)
+                : '-',
+          },
+          {
+            id: 'fcr',
+            header: 'FCR',
+            columns: [
+              {
+                id: 'fcr_actual',
+                header: 'Actual',
+                cell: (props) => {
+                  const value = props.row.original.fcr_value;
+                  return (
+                    <div className='text-center'>
+                      {value !== null && value !== undefined
+                        ? formatNumber(value)
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+              {
+                id: 'fcr_standard',
+                header: 'Standard',
+                cell: (props) => {
+                  const value = props.row.original.project_flock?.fcr?.fcr_std;
+                  return (
+                    <div className='text-center text-gray-600'>
+                      {value !== null && value !== undefined
+                        ? formatNumber(value)
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+            ],
+          },
+          {
+            id: 'feed_intake',
+            header: 'Feed Intake (KG)',
+            columns: [
+              {
+                id: 'feed_intake_actual',
+                header: 'Actual',
+                cell: (props) => {
+                  const value = props.row.original.feed_intake;
+                  return (
+                    <div className='text-center'>
+                      {value !== null && value !== undefined
+                        ? formatNumber(value)
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+              {
+                id: 'feed_intake_standard',
+                header: 'Standard',
+                cell: (props) => {
+                  const value =
+                    props.row.original.project_flock?.production_standart
+                      ?.feed_intake_std;
+                  return (
+                    <div className='text-center text-gray-600'>
+                      {value !== null && value !== undefined
+                        ? formatNumber(value)
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+            ],
+          },
+          {
+            id: 'mortality',
+            header: 'Mortality',
+            columns: [
+              {
+                id: 'cum_depletion_rate_actual',
+                header: 'Cum Depletion Rate',
+                cell: (props) => {
+                  const value = props.row.original.cum_depletion_rate;
+                  return (
+                    <div className='text-center'>
+                      {value !== null && value !== undefined
+                        ? `${value.toFixed(2)}%`
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+              {
+                id: 'max_depletion_std',
+                header: 'Max Depletion Std',
+                cell: (props) => {
+                  const value =
+                    props.row.original.project_flock?.production_standart
+                      ?.max_depletion_std;
+                  return (
+                    <div className='text-center text-gray-600'>
+                      {value !== null && value !== undefined
+                        ? `${value.toFixed(2)}%`
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+              {
+                id: 'total_depletion',
+                header: 'Total Depletion',
+                cell: (props) => {
+                  const value = props.row.original.total_depletion_qty;
+                  return (
+                    <div className='text-center'>
+                      {value !== null && value !== undefined
+                        ? formatNumber(value)
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+            ],
+          },
+          {
+            id: 'egg_production',
+            header: 'Egg Production',
+            columns: [
+              {
+                id: 'egg_mass_actual',
+                header: 'Egg Mass Actual',
+                cell: (props) => {
+                  const value = props.row.original.egg_mass;
+                  return (
+                    <div className='text-center'>
+                      {value !== null && value !== undefined
+                        ? formatNumber(value)
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+              {
+                id: 'egg_mass_standard',
+                header: 'Egg Mass Standar',
+                cell: (props) => {
+                  const value =
+                    props.row.original.project_flock?.production_standart
+                      ?.egg_mass_std;
+                  return (
+                    <div className='text-center text-gray-600'>
+                      {value !== null && value !== undefined
+                        ? formatNumber(value)
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+              {
+                id: 'egg_weight_actual',
+                header: 'Egg Weight Actual',
+                cell: (props) => {
+                  const value = props.row.original.egg_weight;
+                  return (
+                    <div className='text-center'>
+                      {value !== null && value !== undefined
+                        ? formatNumber(value)
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+              {
+                id: 'egg_weight_standard',
+                header: 'Egg Weight Standar',
+                cell: (props) => {
+                  const value =
+                    props.row.original.project_flock?.production_standart
+                      ?.egg_weight_std;
+                  return (
+                    <div className='text-center text-gray-600'>
+                      {value !== null && value !== undefined
+                        ? formatNumber(value)
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+            ],
+          },
+          {
+            id: 'hen_performance',
+            header: 'Hen Performance',
+            columns: [
+              {
+                id: 'hen_day_actual',
+                header: 'Hen Day Actual',
+                cell: (props) => {
+                  const value = props.row.original.hen_day;
+                  return (
+                    <div className='text-center'>
+                      {value !== null && value !== undefined
+                        ? `${value.toFixed(2)}%`
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+              {
+                id: 'hen_day_standard',
+                header: 'Hen Day Standar',
+                cell: (props) => {
+                  const value =
+                    props.row.original.project_flock?.production_standart
+                      ?.hen_day_std;
+                  return (
+                    <div className='text-center text-gray-600'>
+                      {value !== null && value !== undefined
+                        ? `${value.toFixed(2)}%`
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+              {
+                id: 'hen_house_actual',
+                header: 'Hen House Actual',
+                cell: (props) => {
+                  const value = props.row.original.hen_house;
+                  return (
+                    <div className='text-center'>
+                      {value !== null && value !== undefined
+                        ? `${value.toFixed(2)}%`
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+              {
+                id: 'hen_house_standard',
+                header: 'Hen House Standar',
+                cell: (props) => {
+                  const value =
+                    props.row.original.project_flock?.production_standart
+                      ?.hen_house_std;
+                  return (
+                    <div className='text-center text-gray-600'>
+                      {value !== null && value !== undefined
+                        ? `${value.toFixed(2)}%`
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+            ],
           },
           {
             header: 'Status Approval',
@@ -728,21 +1013,6 @@ const RecordingTable = () => {
                 approvalHistoryModal.openModal();
               };
 
-              const getStatusText = (action: string) => {
-                switch (action) {
-                  case 'APPROVED':
-                    return 'Disetujui';
-                  case 'REJECTED':
-                    return 'Ditolak';
-                  case 'CREATED':
-                    return 'Dibuat';
-                  case 'UPDATED':
-                    return 'Diperbarui';
-                  default:
-                    return action;
-                }
-              };
-
               return (
                 <Badge
                   variant='soft'
@@ -753,7 +1023,7 @@ const RecordingTable = () => {
                   }}
                   onClick={openApprovalHistory}
                 >
-                  {getStatusText(approval.action)}
+                  {approval.step_name || approval.action}
                 </Badge>
               );
             },
@@ -872,14 +1142,15 @@ const RecordingTable = () => {
             'mb-20':
               isResponseSuccess(recordings) && recordings?.data?.length === 0,
           }),
-          tableWrapperClassName: 'overflow-x-auto min-h-full!',
-          tableClassName: 'font-inter w-full table-auto min-h-full!',
+          tableWrapperClassName: 'overflow-x-auto',
+          tableClassName: 'w-full table-auto text-sm',
           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',
+            'px-4 py-3 text-xs font-semibold text-gray-500 whitespace-nowrap border-l border-l-gray-200 border-r border-r-gray-200 border-t border-t-gray-200 border-gray-200 border-b-0',
+          bodyRowClassName:
+            'hover:bg-gray-50 transition-colors border-b border-gray-200 first:border-t first:border-t-gray-200 border-l border-l-gray-200 border-r border-r-gray-200',
           bodyColumnClassName:
-            'px-6 py-3 last:flex last:flex-row last:justify-end',
+            'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
         }}
       />
 
diff --git a/src/components/pages/production/recording/form/RecordingForm.schema.ts b/src/components/pages/production/recording/form/RecordingForm.schema.ts
index 4901b349..063c2cc0 100644
--- a/src/components/pages/production/recording/form/RecordingForm.schema.ts
+++ b/src/components/pages/production/recording/form/RecordingForm.schema.ts
@@ -7,6 +7,22 @@ import {
 } from '@/types/api/production/recording';
 
 type RecordingGrowingFormSchemaType = {
+  record_date: string;
+  location?: {
+    value: number;
+    label: string;
+  } | null;
+  location_id: number;
+  project_flock?: {
+    value: number;
+    label: string;
+  } | null;
+  project_flock_id: number;
+  kandang?: {
+    value: number;
+    label: string;
+  } | null;
+  kandang_id: number;
   project_flock_kandang: {
     value: number;
     label: string;
@@ -17,16 +33,16 @@ type RecordingGrowingFormSchemaType = {
     qty: number | string;
   }[];
   depletions: {
-    product_warehouse_id: number;
-    qty: number | string;
+    product_warehouse_id?: number;
+    qty?: number | string;
   }[];
 };
 
 type RecordingLayingFormSchemaType = RecordingGrowingFormSchemaType & {
   eggs: {
-    product_warehouse_id: number;
-    qty: number | string;
-    weight: number | string;
+    product_warehouse_id?: number;
+    qty?: number | string;
+    weight?: number | string;
   }[];
 };
 
@@ -36,14 +52,14 @@ export type StockSchema = {
 };
 
 export type DepletionSchema = {
-  product_warehouse_id: number;
-  qty: number | string;
+  product_warehouse_id?: number;
+  qty?: number | string;
 };
 
 export type EggSchema = {
-  product_warehouse_id: number;
-  qty: number | string;
-  weight: number | string;
+  product_warehouse_id?: number;
+  qty?: number | string;
+  weight?: number | string;
 };
 
 const StockObjectSchema: Yup.ObjectSchema<StockSchema> = Yup.object({
@@ -59,32 +75,51 @@ const StockObjectSchema: Yup.ObjectSchema<StockSchema> = Yup.object({
 
 const DepletionObjectSchema: Yup.ObjectSchema<DepletionSchema> = Yup.object({
   product_warehouse_id: Yup.number()
-    .required('Produk depletions wajib diisi!')
-    .min(1, 'Produk depletions wajib diisi!')
-    .typeError('Produk depletions harus berupa angka!'),
+    .optional()
+    .typeError('Depletions harus berupa angka!'),
   qty: Yup.number()
-    .required('Jumlah depletions wajib diisi!')
-    .min(1, 'Jumlah depletions minimal 1!')
+    .optional()
     .typeError('Jumlah depletions harus berupa angka!'),
 });
 
 const EggObjectSchema: Yup.ObjectSchema<EggSchema> = Yup.object({
   product_warehouse_id: Yup.number()
-    .required('Kondisi telur wajib diisi!')
-    .min(1, 'Kondisi telur wajib diisi!')
+    .optional()
     .typeError('Kondisi telur harus berupa angka!'),
-  qty: Yup.number()
-    .required('Jumlah telur wajib diisi!')
-    .min(1, 'Jumlah telur tidak boleh 0!')
-    .typeError('Jumlah telur harus berupa angka!'),
-  weight: Yup.number()
-    .required('Berat telur wajib diisi!')
-    .min(1, 'Berat telur minimal 1 gram!')
-    .typeError('Berat telur harus berupa angka!'),
+  qty: Yup.number().optional().typeError('Jumlah telur harus berupa angka!'),
+  weight: Yup.number().optional().typeError('Berat telur harus berupa angka!'),
 });
 
 export const RecordingGrowingFormSchema: Yup.ObjectSchema<RecordingGrowingFormSchemaType> =
   Yup.object({
+    record_date: Yup.string()
+      .required('Tanggal recording wajib diisi!')
+      .min(1, 'Tanggal recording wajib diisi!')
+      .typeError('Tanggal recording wajib diisi!'),
+    location: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    location_id: Yup.number()
+      .min(1, 'Lokasi wajib diisi!')
+      .required('Lokasi wajib diisi!')
+      .typeError('Lokasi wajib diisi!'),
+    project_flock: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    project_flock_id: Yup.number()
+      .min(1, 'Project flock wajib diisi!')
+      .required('Project flock wajib diisi!')
+      .typeError('Project flock wajib diisi!'),
+    kandang: Yup.object({
+      value: Yup.number().min(1).required(),
+      label: Yup.string().required(),
+    }).nullable(),
+    kandang_id: Yup.number()
+      .min(1, 'Kandang wajib diisi!')
+      .required('Kandang wajib diisi!')
+      .typeError('Kandang wajib diisi!'),
     project_flock_kandang: Yup.object({
       value: Yup.number().min(1).required(),
       label: Yup.string().required(),
@@ -100,7 +135,7 @@ export const RecordingGrowingFormSchema: Yup.ObjectSchema<RecordingGrowingFormSc
       .required('Project Flock Kandang wajib diisi!')
       .test(
         'not-already-recorded',
-        'Project Flock ini sudah direcord hari ini!',
+        'Project Flock ini sudah direcord pada tanggal tersebut!',
         function (value) {
           const recordedProjectFlockIds = this.options.context
             ?.recordedProjectFlockIds as Set<number>;
@@ -119,18 +154,12 @@ export const RecordingGrowingFormSchema: Yup.ObjectSchema<RecordingGrowingFormSc
       .of(StockObjectSchema)
       .min(1, 'Minimal harus ada 1 data stok!')
       .required('Data stok wajib diisi!'),
-    depletions: Yup.array()
-      .of(DepletionObjectSchema)
-      .min(1, 'Minimal harus ada 1 data depletions!')
-      .required('Data depletions wajib diisi!'),
+    depletions: Yup.array().of(DepletionObjectSchema).default([]),
   });
 
 export const RecordingLayingFormSchema: Yup.ObjectSchema<RecordingLayingFormSchemaType> =
   RecordingGrowingFormSchema.shape({
-    eggs: Yup.array()
-      .of(EggObjectSchema)
-      .min(1, 'Minimal harus ada 1 data telur!')
-      .required('Data telur wajib diisi!'),
+    eggs: Yup.array().of(EggObjectSchema).default([]),
   });
 
 export const UpdateRecordingGrowingFormSchema =
@@ -179,6 +208,15 @@ type RecordingFormData = Partial<Recording> & {
 export const getRecordingGrowingFormInitialValues = (
   initialValues?: RecordingFormData
 ): RecordingGrowingFormValues => ({
+  record_date: initialValues?.record_datetime
+    ? new Date(initialValues.record_datetime).toISOString().split('T')[0]
+    : new Date().toISOString().split('T')[0],
+  location: null,
+  location_id: 0,
+  project_flock: null,
+  project_flock_id: 0,
+  kandang: null,
+  kandang_id: 0,
   project_flock_kandang: initialValues?.project_flock_kandang_id
     ? {
         value: initialValues.project_flock_kandang_id,
diff --git a/src/components/pages/production/recording/form/RecordingForm.tsx b/src/components/pages/production/recording/form/RecordingForm.tsx
index 4966172c..17a1d020 100644
--- a/src/components/pages/production/recording/form/RecordingForm.tsx
+++ b/src/components/pages/production/recording/form/RecordingForm.tsx
@@ -12,20 +12,33 @@ import RequirePermission from '@/components/helper/RequirePermission';
 import Card from '@/components/Card';
 import Badge from '@/components/Badge';
 import NumberInput from '@/components/input/NumberInput';
-import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import DateInput from '@/components/input/DateInput';
+import SelectInput, {
+  OptionType,
+  useSelect,
+} from '@/components/input/SelectInput';
 import CheckboxInput from '@/components/input/CheckboxInput';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import ConfirmationModalWithNotes from '@/components/modal/ConfirmationModalWithNotes';
-import { useModal } from '@/components/Modal';
+import Modal, { useModal } from '@/components/Modal';
 import AlertErrorList from '@/components/helper/form/FormErrors';
+import Table from '@/components/Table';
+import { type ColumnDef } from '@tanstack/react-table';
 
 import {
   ProjectFlockKandangApi,
   RecordingApi,
   ProjectFlockApi,
 } from '@/services/api/production';
+import { FcrApi, ProductionStandardApi } from '@/services/api/master-data';
+import { FcrWithStandards, FcrStandard } from '@/types/api/master-data/fcr';
+import {
+  ProductionStandard,
+  StandardDetails,
+} from '@/types/api/master-data/production-standard';
 import { LocationApi } from '@/services/api/master-data';
 import { ProductWarehouseApi } from '@/services/api/inventory';
+import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
 
 import {
   CreateGrowingRecordingPayload,
@@ -36,10 +49,14 @@ import {
   NextDayRecording,
 } from '@/types/api/production/recording';
 import { type BaseApiResponse } from '@/types/api/api-general';
-import { ProjectFlockKandangLookup } from '@/types/api/production/project-flock';
+import {
+  ProjectFlockKandangLookup,
+  ProjectFlock,
+} from '@/types/api/production/project-flock';
 import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 import { Kandang } from '@/types/api/master-data/kandang';
 
+import * as Yup from 'yup';
 import {
   RecordingGrowingFormSchema,
   RecordingLayingFormSchema,
@@ -62,12 +79,119 @@ import {
   GROWING_RECORDING_APPROVAL_LINE,
   LAYING_RECORDING_APPROVAL_LINE,
 } from '@/config/approval-line';
+import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 
 interface RecordingFormProps {
   type?: 'add' | 'edit' | 'detail';
   initialValues?: Recording;
 }
 
+const fcrStandardColumns: ColumnDef<FcrStandard>[] = [
+  {
+    accessorKey: 'weight',
+    header: 'Weight',
+    cell: (props) => formatNumber(props.getValue() as number),
+  },
+  {
+    accessorKey: 'fcr_number',
+    header: 'FCR Number',
+    cell: (props) => formatNumber(props.getValue() as number),
+  },
+  {
+    accessorKey: 'mortality',
+    header: 'Mortality',
+    cell: (props) => formatNumber(props.getValue() as number),
+  },
+];
+
+const productionStandardColumns: ColumnDef<StandardDetails>[] = [
+  {
+    accessorKey: 'week',
+    header: 'Minggu',
+    cell: (props) => `Minggu ${props.getValue() as number}`,
+  },
+  {
+    accessorKey: 'growth_standard_detail.target_mean_bw',
+    header: 'Target Mean BW (gram)',
+    cell: (props) =>
+      formatNumber(
+        (props.row.original.growth_standard_detail?.target_mean_bw as number) ||
+          0
+      ),
+  },
+  {
+    accessorKey: 'growth_standard_detail.max_depletion',
+    header: 'Max Depletion (%)',
+    cell: (props) =>
+      `${
+        (props.row.original.growth_standard_detail?.max_depletion as number) ||
+        0
+      }%`,
+  },
+  {
+    accessorKey: 'growth_standard_detail.min_uniformity',
+    header: 'Min Uniformity (%)',
+    cell: (props) =>
+      `${
+        (props.row.original.growth_standard_detail?.min_uniformity as number) ||
+        0
+      }%`,
+  },
+  {
+    accessorKey: 'growth_standard_detail.feed_intake',
+    header: 'Feed Intake (gram)',
+    cell: (props) =>
+      formatNumber(
+        (props.row.original.growth_standard_detail?.feed_intake as number) || 0
+      ),
+  },
+  {
+    accessorKey: 'egg_production_standard_detail.target_hen_day_production',
+    header: 'Target Hen Day (%)',
+    cell: (props) =>
+      `${
+        (props.row.original.egg_production_standard_detail
+          ?.target_hen_day_production as number) || 0
+      }%`,
+  },
+  {
+    accessorKey: 'egg_production_standard_detail.target_hen_house_production',
+    header: 'Target Hen House (%)',
+    cell: (props) =>
+      `${
+        (props.row.original.egg_production_standard_detail
+          ?.target_hen_house_production as number) || 0
+      }%`,
+  },
+  {
+    accessorKey: 'egg_production_standard_detail.target_egg_weight',
+    header: 'Target Egg Weight (gram)',
+    cell: (props) =>
+      formatNumber(
+        (props.row.original.egg_production_standard_detail
+          ?.target_egg_weight as number) || 0
+      ),
+  },
+  {
+    accessorKey: 'egg_production_standard_detail.target_egg_mass',
+    header: 'Target Egg Mass (gram)',
+    cell: (props) =>
+      formatNumber(
+        (props.row.original.egg_production_standard_detail
+          ?.target_egg_mass as number) || 0
+      ),
+  },
+  {
+    accessorKey: 'egg_production_standard_detail.standard_fcr',
+    header: 'Standard FCR',
+    cell: (props) =>
+      formatNumber(
+        (props.row.original.egg_production_standard_detail
+          ?.standard_fcr as number) || 0
+      ),
+  },
+];
+
 const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   // ===== HOOKS & ROUTER =====
   const router = useRouter();
@@ -77,31 +201,99 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   const [selectedDepletions, setSelectedDepletions] = useState<number[]>([]);
   const [selectedEggs, setSelectedEggs] = useState<number[]>([]);
 
-  const [locationSearchValue, setLocationSearchValue] = useState('');
   const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
     null
   );
-  const [projectFlockSearchValue, setProjectFlockSearchValue] = useState('');
   const [selectedProjectFlock, setSelectedProjectFlock] =
     useState<OptionType | null>(null);
   const [selectedKandang, setSelectedKandang] = useState<OptionType | null>(
     null
   );
+  const [selectedProjectFlockLocationId, setSelectedProjectFlockLocationId] =
+    useState<string>('');
+  const [stockProductsLocationId, setStockProductsLocationId] =
+    useState<string>('');
+  const [stockProductsKandangId, setStockProductsKandangId] =
+    useState<string>('');
+  const [depletionProductsLocationId, setDepletionProductsLocationId] =
+    useState<string>('');
+  const [depletionProductsKandangId, setDepletionProductsKandangId] =
+    useState<string>('');
+  const [eggProductsLocationId, setEggProductsLocationId] =
+    useState<string>('');
+  const [eggProductsKandangId, setEggProductsKandangId] = useState<string>('');
 
   const [isApproveLoading, setIsApproveLoading] = useState(false);
   const [isRejectLoading, setIsRejectLoading] = useState(false);
   const [, setApprovalNotes] = useState('');
   const [recordingFormErrorMessage, setRecordingFormErrorMessage] =
     useState('');
-  const [formErrorList, setFormErrorList] = useState<string[]>([]);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
   const [, setNewRecordingData] = useState<Recording | null>(null);
   const [nextDayRecording, setNextDayRecording] =
     useState<NextDayRecording | null>(null);
+  const [currentRecordDate, setCurrentRecordDate] = useState<string>(
+    new Date().toISOString().split('T')[0]
+  );
+  const [duplicateErrorShown, setDuplicateErrorShown] = useState(false);
+
+  useEffect(() => {
+    return () => {
+      toast.dismiss();
+    };
+  }, []);
 
   const approveModal = useModal();
   const rejectModal = useModal();
   const deleteModal = useModal();
+  const fcrStandardModal = useModal();
+  const productionStandardModal = useModal();
+
+  const [fcrStandards, setFcrStandards] = useState<FcrStandard[]>([]);
+  const [productionStandards, setProductionStandards] =
+    useState<ProductionStandard | null>(null);
+
+  const [isFcrModalOpen, setIsFcrModalOpen] = useState(false);
+  const [isProductionStandardModalOpen, setIsProductionStandardModalOpen] =
+    useState(false);
+
+  useEffect(() => {
+    const checkFcrModalOpen = () => {
+      const isOpen = fcrStandardModal.ref.current?.open || false;
+      setIsFcrModalOpen(isOpen);
+    };
+
+    checkFcrModalOpen();
+
+    const observer = new MutationObserver(checkFcrModalOpen);
+    if (fcrStandardModal.ref.current) {
+      observer.observe(fcrStandardModal.ref.current, {
+        attributes: true,
+        attributeFilter: ['open'],
+      });
+    }
+
+    return () => observer.disconnect();
+  }, [fcrStandardModal.ref]);
+
+  useEffect(() => {
+    const checkProductionStandardModalOpen = () => {
+      const isOpen = productionStandardModal.ref.current?.open || false;
+      setIsProductionStandardModalOpen(isOpen);
+    };
+
+    checkProductionStandardModalOpen();
+
+    const observer = new MutationObserver(checkProductionStandardModalOpen);
+    if (productionStandardModal.ref.current) {
+      observer.observe(productionStandardModal.ref.current, {
+        attributes: true,
+        attributeFilter: ['open'],
+      });
+    }
+
+    return () => observer.disconnect();
+  }, [productionStandardModal.ref]);
 
   const isRecordingApproved = useCallback((recording?: Recording) => {
     return (
@@ -117,16 +309,21 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   // ===== PAYLOAD CREATION HELPERS =====
   const createGrowingPayload = useCallback(
     (values: RecordingGrowingFormValues) => {
+      const depletions = values.depletions
+        ?.filter((d) => d.product_warehouse_id && d.qty)
+        .map((depletion) => ({
+          product_warehouse_id: depletion.product_warehouse_id!,
+          qty: Number(depletion.qty) || 0,
+        }));
+
       return {
         project_flock_kandang_id: values.project_flock_kandang_id,
+        record_date: values.record_date,
         stocks: (values.stocks ?? []).map((stock) => ({
           product_warehouse_id: stock.product_warehouse_id,
           qty: Number(stock.qty) || 0,
         })),
-        depletions: (values.depletions ?? []).map((depletion) => ({
-          product_warehouse_id: depletion.product_warehouse_id,
-          qty: Number(depletion.qty) || 0,
-        })),
+        ...(depletions && depletions.length > 0 && { depletions }),
       };
     },
     []
@@ -134,24 +331,33 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   const createLayingPayload = useCallback(
     (values: RecordingLayingFormValues) => {
-      return {
-        project_flock_kandang_id: values.project_flock_kandang_id,
-        stocks: (values.stocks ?? []).map((stock) => ({
-          product_warehouse_id: stock.product_warehouse_id,
-          qty: Number(stock.qty) || 0,
-        })),
-        depletions: (values.depletions ?? []).map((depletion) => ({
-          product_warehouse_id: depletion.product_warehouse_id,
+      const depletions = values.depletions
+        ?.filter((d) => d.product_warehouse_id && d.qty)
+        .map((depletion) => ({
+          product_warehouse_id: depletion.product_warehouse_id!,
           qty: Number(depletion.qty) || 0,
-        })),
-        eggs: (values.eggs ?? []).map((egg) => ({
-          product_warehouse_id: egg.product_warehouse_id,
+        }));
+
+      const eggs = values.eggs
+        ?.filter((e) => e.product_warehouse_id && e.qty && e.weight)
+        .map((egg) => ({
+          product_warehouse_id: egg.product_warehouse_id!,
           qty: Number(egg.qty) || 0,
           weight:
             typeof egg.weight === 'number'
               ? egg.weight
               : parseFloat(String(egg.weight)) || 0,
+        }));
+
+      return {
+        project_flock_kandang_id: values.project_flock_kandang_id,
+        record_date: values.record_date,
+        stocks: values.stocks.map((stock) => ({
+          product_warehouse_id: stock.product_warehouse_id,
+          qty: Number(stock.qty) || 0,
         })),
+        ...(depletions && depletions.length > 0 && { depletions }),
+        ...(eggs && eggs.length > 0 && { eggs }),
       };
     },
     []
@@ -206,26 +412,24 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   }, [deleteModal, initialValues?.id, router]);
 
   // ===== API DATA FETCHING =====
-  const locationsUrl = `${LocationApi.basePath}?${new URLSearchParams({
-    search: locationSearchValue || '',
-    limit: '100',
-  }).toString()}`;
-  const { data: locations, isLoading: isLoadingLocations } = useSWR(
-    locationsUrl,
-    LocationApi.getAllFetcher
-  );
+  const {
+    setInputValue: setLocationSearchValue,
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocations,
+    loadMore: loadMoreLocations,
+    hasMore: hasMoreLocations,
+  } = useSelect(LocationApi.basePath, 'id', 'name', 'search');
 
-  const projectFlocksUrl = `${ProjectFlockApi.basePath}?${new URLSearchParams({
-    search: projectFlockSearchValue || '',
-    limit: '100',
-    ...(selectedLocation
-      ? { location_id: selectedLocation.value.toString() }
-      : {}),
-  }).toString()}`;
-  const { data: projectFlocks, isLoading: isLoadingProjectFlocks } = useSWR(
-    projectFlocksUrl,
-    ProjectFlockApi.getAllFetcher
-  );
+  const {
+    setInputValue: setProjectFlockSearchValue,
+    options: projectFlockOptions,
+    rawData: projectFlocksRawData,
+    isLoadingOptions: isLoadingProjectFlocks,
+    loadMore: loadMoreProjectFlocks,
+    hasMore: hasMoreProjectFlocks,
+  } = useSelect(ProjectFlockApi.basePath, 'id', 'flock_name', 'search', {
+    location_id: selectedProjectFlockLocationId,
+  });
 
   const projectFlockKandangLookupUrl = useMemo(() => {
     if (!selectedProjectFlock || !selectedKandang) return null;
@@ -251,10 +455,55 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       ? projectFlockKandangLookupData.data
       : undefined;
 
+  const fcrId = useMemo(() => {
+    if (type === 'add') {
+      return projectFlockKandangLookup?.project_flock?.fcr?.id;
+    }
+    return initialValues?.project_flock?.fcr?.id;
+  }, [type, projectFlockKandangLookup, initialValues]);
+
+  const { data: fcr, isLoading: isLoadingFcrStandards } = useSWR(
+    isFcrModalOpen && fcrId ? `fcr-detail-${fcrId}` : null,
+    () => FcrApi.getSingle(fcrId!)
+  );
+
+  useEffect(() => {
+    if (fcr?.status === 'success') {
+      setFcrStandards((fcr.data as FcrWithStandards).fcr_standards || []);
+    }
+  }, [fcr]);
+
+  const productionStandardId = useMemo(() => {
+    if (type === 'add') {
+      return projectFlockKandangLookup?.project_flock?.production_standard_id;
+    }
+    return initialValues?.project_flock?.production_standart?.id;
+  }, [type, projectFlockKandangLookup, initialValues]);
+
+  const { data: productionStandard, isLoading: isLoadingProductionStandards } =
+    useSWR(
+      isProductionStandardModalOpen && productionStandardId
+        ? `production-standard-detail-${productionStandardId}`
+        : null,
+      () => ProductionStandardApi.getSingle(productionStandardId!)
+    );
+
+  useEffect(() => {
+    if (productionStandard?.status === 'success') {
+      setProductionStandards(
+        productionStandard.data as ProductionStandard | null
+      );
+    }
+  }, [productionStandard]);
+
   const projectFlockKandangDetailUrl = useMemo(() => {
-    if (type === 'add' || !initialValues?.project_flock_kandang_id) return null;
-    return `${ProjectFlockKandangApi.basePath}/${initialValues.project_flock_kandang_id}`;
-  }, [type, initialValues?.project_flock_kandang_id]);
+    if (
+      type === 'add' ||
+      !initialValues?.project_flock?.project_flock_kandang_id
+    )
+      return null;
+    return `${ProjectFlockKandangApi.basePath}/${initialValues.project_flock.project_flock_kandang_id}`;
+  }, [type, initialValues?.project_flock?.project_flock_kandang_id]);
 
   const { data: projectFlockKandangDetailData } = useSWR(
     projectFlockKandangDetailUrl,
@@ -271,46 +520,28 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       ? projectFlockKandangDetailData.data
       : undefined;
 
-  const stockProductsUrl = useMemo(() => {
-    if (!selectedLocation || !selectedKandang) return null;
-    const params = new URLSearchParams({
-      flags: 'PAKAN,OVK',
-      search: '',
-      limit: '100',
-      location_id: selectedLocation.value.toString(),
-    });
+  const {
+    options: stockProductOptions,
+    rawData: stockProducts,
+    isLoadingOptions: isLoadingStockProducts,
+    loadMore: loadMoreStockProducts,
+    hasMore: hasMoreStockProducts,
+  } = useSelect(ProductWarehouseApi.basePath, 'id', 'product.name', '', {
+    flags: 'PAKAN,OVK',
+    location_id: stockProductsLocationId,
+    kandang_id: stockProductsKandangId,
+  });
 
-    if (projectFlockKandangLookup?.kandang?.id) {
-      params.append(
-        'kandang_id',
-        projectFlockKandangLookup.kandang.id.toString()
-      );
-    } else if (selectedKandang) {
-      params.append('kandang_id', selectedKandang.value.toString());
-    }
-
-    return `${ProductWarehouseApi.basePath}?${params.toString()}`;
-  }, [selectedLocation, selectedKandang, projectFlockKandangLookup]);
-
-  const depletionProductsUrl = useMemo(() => {
-    if (!selectedLocation || !selectedKandang) return null;
-    const params = new URLSearchParams({
-      search: '',
-      limit: '100',
-      location_id: selectedLocation.value.toString(),
-    });
-
-    if (projectFlockKandangLookup?.kandang?.id) {
-      params.append(
-        'kandang_id',
-        projectFlockKandangLookup.kandang.id.toString()
-      );
-    } else if (selectedKandang) {
-      params.append('kandang_id', selectedKandang.value.toString());
-    }
-
-    return `${ProductWarehouseApi.basePath}?${params.toString()}`;
-  }, [selectedLocation, selectedKandang, projectFlockKandangLookup]);
+  const {
+    options: depletionProductOptions,
+    rawData: depletionProductsData,
+    isLoadingOptions: isLoadingDepletionProducts,
+    loadMore: loadMoreDepletionProducts,
+    hasMore: hasMoreDepletionProducts,
+  } = useSelect(ProductWarehouseApi.basePath, 'id', 'product.name', '', {
+    location_id: depletionProductsLocationId,
+    kandang_id: depletionProductsKandangId,
+  });
 
   const today = new Date().toISOString().split('T')[0];
   const existingRecordingsUrl = `${RecordingApi.basePath}`;
@@ -352,38 +583,17 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     }
   }, [nextDayRecordingData]);
 
-  const { data: stockProducts, isLoading: isLoadingStockProducts } = useSWR(
-    stockProductsUrl,
-    ProductWarehouseApi.getAllFetcher
-  );
-
-  const { data: depletionProductsData, isLoading: isLoadingDepletionProducts } =
-    useSWR(depletionProductsUrl, ProductWarehouseApi.getAllFetcher);
-
-  const eggProductsUrl = useMemo(() => {
-    if (!selectedLocation || !selectedKandang) return null;
-    const params = new URLSearchParams({
-      search: 'telur',
-      limit: '100',
-      location_id: selectedLocation.value.toString(),
-    });
-
-    if (projectFlockKandangLookup?.kandang?.id) {
-      params.append(
-        'kandang_id',
-        projectFlockKandangLookup.kandang.id.toString()
-      );
-    } else if (selectedKandang) {
-      params.append('kandang_id', selectedKandang.value.toString());
-    }
-
-    return `${ProductWarehouseApi.basePath}?${params.toString()}`;
-  }, [selectedLocation, selectedKandang, projectFlockKandangLookup]);
-
-  const { data: eggProductsData, isLoading: isLoadingEggProducts } = useSWR(
-    eggProductsUrl,
-    ProductWarehouseApi.getAllFetcher
-  );
+  const {
+    options: eggProductOptions,
+    rawData: eggProductsData,
+    isLoadingOptions: isLoadingEggProducts,
+    loadMore: loadMoreEggProducts,
+    hasMore: hasMoreEggProducts,
+  } = useSelect(ProductWarehouseApi.basePath, 'id', 'product.name', 'search', {
+    search: 'telur',
+    location_id: eggProductsLocationId,
+    kandang_id: eggProductsKandangId,
+  });
 
   const approvedProjectFlockKandangsUrl = useMemo(() => {
     const params = new URLSearchParams({
@@ -404,12 +614,12 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   }, [approvedProjectFlockKandangsData]);
 
   const isLayingCategory =
-    initialValues?.project_flock_category === 'LAYING' ||
+    initialValues?.project_flock?.project_flock_category === 'LAYING' ||
     projectFlockKandangLookup?.project_flock?.category === 'LAYING' ||
     projectFlockKandangDetail?.project_flock?.category === 'LAYING';
 
   const isGrowingCategory =
-    initialValues?.project_flock_category === 'GROWING' ||
+    initialValues?.project_flock?.project_flock_category === 'GROWING' ||
     projectFlockKandangLookup?.project_flock?.category === 'GROWING' ||
     projectFlockKandangDetail?.project_flock?.category === 'GROWING';
 
@@ -440,17 +650,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   });
 
   // ===== DATA PROCESSING =====
-  const locationOptions = useMemo(() => {
-    let options: OptionType[] = [];
-
-    if (isResponseSuccess(locations)) {
-      const locationOptionsList =
-        locations?.data.map((location) => ({
-          value: location.id,
-          label: location.name || '',
-        })) || [];
-      options = options.concat(locationOptionsList);
-    }
+  const enhancedLocationOptions = useMemo(() => {
+    const options = [...locationOptions];
 
     if (projectFlockKandangDetail && (type === 'edit' || type === 'detail')) {
       const currentLocation = projectFlockKandangDetail.project_flock.location;
@@ -466,19 +667,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     }
 
     return options;
-  }, [locations, projectFlockKandangDetail, type]);
+  }, [locationOptions, projectFlockKandangDetail, type]);
 
-  const projectFlockOptions = useMemo(() => {
-    let options: OptionType[] = [];
-
-    if (isResponseSuccess(projectFlocks)) {
-      const flockOptions =
-        projectFlocks?.data.map((projectFlock) => ({
-          value: projectFlock.id,
-          label: projectFlock.flock_name || '',
-        })) || [];
-      options = options.concat(flockOptions);
-    }
+  const enhancedProjectFlockOptions = useMemo(() => {
+    const options = [...projectFlockOptions];
 
     if (projectFlockKandangDetail && (type === 'edit' || type === 'detail')) {
       const currentProjectFlock = projectFlockKandangDetail.project_flock;
@@ -494,13 +686,14 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     }
 
     return options;
-  }, [projectFlocks, projectFlockKandangDetail, type]);
+  }, [projectFlockOptions, projectFlockKandangDetail, type]);
 
   const kandangOptions = useMemo(() => {
     let options: OptionType[] = [];
 
-    if (selectedProjectFlock && isResponseSuccess(projectFlocks)) {
-      const selectedProjectFlockData = projectFlocks.data.find(
+    if (selectedProjectFlock && isResponseSuccess(projectFlocksRawData)) {
+      const data = projectFlocksRawData.data as ProjectFlock[];
+      const selectedProjectFlockData = data.find(
         (pf) => pf.id === selectedProjectFlock.value
       );
 
@@ -540,7 +733,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     return options;
   }, [
     selectedProjectFlock,
-    projectFlocks,
+    projectFlocksRawData,
     projectFlockKandangDetail,
     type,
     approvedProjectFlockKandangs,
@@ -549,34 +742,60 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   const recordedProjectFlockKandangIds = useMemo(() => {
     if (!isResponseSuccess(existingRecordings)) return new Set<number>();
 
-    const todayRecordings = existingRecordings.data;
+    const allRecordings = existingRecordings.data;
     const recordedIds = new Set<number>();
 
-    todayRecordings.forEach((recording) => {
+    allRecordings.forEach((recording) => {
       const recordingDate = recording.record_datetime?.split('T')[0];
-      if (recordingDate === today) {
-        recordedIds.add(recording.project_flock_kandang_id);
+      if (recordingDate === currentRecordDate) {
+        recordedIds.add(recording.project_flock?.project_flock_kandang_id);
       }
     });
 
     return recordedIds;
-  }, [existingRecordings, today]);
+  }, [existingRecordings, currentRecordDate]);
+
+  const currentTotalChickQty = useMemo(() => {
+    if (type === 'add' && projectFlockKandangLookup) {
+      return projectFlockKandangLookup.available_quantity || null;
+    }
+
+    if ((type === 'edit' || type === 'detail') && initialValues) {
+      return initialValues.project_flock?.total_chick_qty || null;
+    }
+
+    if (!isResponseSuccess(existingRecordings) || !selectedKandang) {
+      return null;
+    }
+
+    let projectFlockKandangId: number | undefined;
+
+    if (projectFlockKandangLookup) {
+      projectFlockKandangId =
+        projectFlockKandangLookup.project_flock_kandang_id;
+    } else if (projectFlockKandangDetail) {
+      projectFlockKandangId = projectFlockKandangDetail.id;
+    }
+
+    if (!projectFlockKandangId) return null;
+
+    const recording = existingRecordings.data.find(
+      (rec) =>
+        rec.project_flock.project_flock_kandang_id === projectFlockKandangId
+    );
+
+    return recording?.project_flock.total_chick_qty || null;
+  }, [
+    type,
+    initialValues,
+    existingRecordings,
+    selectedKandang,
+    projectFlockKandangLookup,
+    projectFlockKandangDetail,
+  ]);
 
   const unifiedStockProducts = useMemo(() => {
-    const options: OptionType[] = [];
-    if (isResponseSuccess(stockProducts) && selectedKandang) {
-      stockProducts.data.forEach((product) => {
-        const hasPakanFlag = product.product.flags?.includes('PAKAN');
-        const hasOvkFlag = product.product.flags?.includes('OVK');
-
-        if (hasPakanFlag || hasOvkFlag) {
-          options.push({
-            value: product.id,
-            label: product.product.name,
-          });
-        }
-      });
-    }
+    const options = [...stockProductOptions];
 
     if (
       initialValues &&
@@ -600,12 +819,14 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     }
 
     return options;
-  }, [stockProducts, initialValues, type, selectedKandang]);
+  }, [stockProductOptions, initialValues, type]);
 
   const depletionProducts = useMemo(() => {
     const options: OptionType[] = [];
+
     if (isResponseSuccess(depletionProductsData) && selectedKandang) {
-      depletionProductsData.data.forEach((product) => {
+      const data = depletionProductsData.data as unknown as ProductWarehouse[];
+      data.forEach((product) => {
         const productName = product.product.name;
 
         if (
@@ -645,8 +866,10 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   const eggProducts = useMemo(() => {
     const options: OptionType[] = [];
+
     if (isResponseSuccess(eggProductsData) && selectedKandang) {
-      eggProductsData.data.forEach((product) => {
+      const data = eggProductsData.data as unknown as ProductWarehouse[];
+      data.forEach((product) => {
         const productName = product.product.name;
 
         if (
@@ -694,10 +917,58 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
       baseValues = getRecordingGrowingFormInitialValues(initialValues);
     }
 
+    if (type === 'add') {
+      baseValues.location = selectedLocation
+        ? {
+            value: Number(selectedLocation.value),
+            label: selectedLocation.label,
+          }
+        : null;
+      baseValues.location_id = selectedLocation
+        ? Number(selectedLocation.value)
+        : 0;
+      baseValues.project_flock = selectedProjectFlock
+        ? {
+            value: Number(selectedProjectFlock.value),
+            label: selectedProjectFlock.label,
+          }
+        : null;
+      baseValues.project_flock_id = selectedProjectFlock
+        ? Number(selectedProjectFlock.value)
+        : 0;
+      baseValues.kandang = selectedKandang
+        ? {
+            value: Number(selectedKandang.value),
+            label: selectedKandang.label,
+          }
+        : null;
+      baseValues.kandang_id = selectedKandang
+        ? Number(selectedKandang.value)
+        : 0;
+    }
+
     if (projectFlockKandangDetail && (type === 'edit' || type === 'detail')) {
-      baseValues.project_flock_kandang = {
-        value: projectFlockKandangDetail.project_flock.id,
-        label: projectFlockKandangDetail.project_flock.flock_name || '',
+      baseValues = {
+        ...baseValues,
+        project_flock_kandang: {
+          value: projectFlockKandangDetail.project_flock?.id,
+          label: projectFlockKandangDetail.project_flock?.flock_name || '',
+        },
+        project_flock: {
+          value: projectFlockKandangDetail.project_flock?.id,
+          label: projectFlockKandangDetail.project_flock?.flock_name || '',
+        },
+        project_flock_id: projectFlockKandangDetail.project_flock?.id,
+        location: {
+          value: projectFlockKandangDetail.project_flock?.location?.id,
+          label: projectFlockKandangDetail.project_flock?.location?.name || '',
+        },
+        location_id: projectFlockKandangDetail.project_flock?.location?.id,
+        kandang: {
+          value: projectFlockKandangDetail.kandang?.id,
+          label: projectFlockKandangDetail.kandang?.name || '',
+        },
+        kandang_id: projectFlockKandangDetail.kandang?.id,
       };
     }
 
@@ -710,14 +981,38 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     initialValues: formikInitialValues,
     enableReinitialize: true,
     validationSchema: (() => {
+      let schema;
       if (isLayingCategory) {
-        return type === 'edit'
-          ? UpdateRecordingLayingFormSchema
-          : RecordingLayingFormSchema;
+        schema =
+          type === 'edit'
+            ? UpdateRecordingLayingFormSchema
+            : RecordingLayingFormSchema;
+      } else {
+        schema =
+          type === 'edit'
+            ? UpdateRecordingGrowingFormSchema
+            : RecordingGrowingFormSchema;
       }
-      return type === 'edit'
-        ? UpdateRecordingGrowingFormSchema
-        : RecordingGrowingFormSchema;
+      return schema.clone().concat(
+        Yup.object().shape({
+          project_flock_kandang_id: Yup.number().test(
+            'not-already-recorded',
+            'Project Flock ini sudah direcord pada tanggal tersebut!',
+            function (value) {
+              if (type !== 'add') return true;
+              if (value && recordedProjectFlockKandangIds.has(value)) {
+                if (this.createError) {
+                  return this.createError({
+                    message: `Project Flock ini sudah direcord pada tanggal ${formatDate(currentRecordDate, 'DD MMMM YYYY')}!`,
+                  });
+                }
+                return false;
+              }
+              return true;
+            }
+          ),
+        })
+      );
     })(),
     validateOnChange: true,
     validateOnBlur: true,
@@ -760,50 +1055,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     },
   });
 
-  const handleValidateForm = async () => {
-    const errors = await formik.validateForm();
-
-    if (Object.keys(errors).length > 0) {
-      const errorMessages = getUniqueFormikErrors(errors);
-      setFormErrorList(errorMessages);
-      return;
-    }
-  };
-
-  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    handleValidateForm();
-    formik.handleSubmit(e);
-  };
-
   // ===== HELPER FUNCTIONS =====
-  useCallback((): OptionType | null => {
-    if (
-      !formik.values.project_flock_kandang ||
-      !isResponseSuccess(projectFlocks)
-    ) {
-      return selectedLocation;
-    }
-    const projectFlockId = formik.values.project_flock_kandang.value;
-    const projectFlock = projectFlocks.data.find(
-      (pf) => pf.id === projectFlockId
-    );
-    if (projectFlock && projectFlock.location) {
-      return {
-        value: projectFlock.location.id,
-        label: projectFlock.location.name,
-      };
-    }
-    return selectedLocation;
-  }, [formik.values.project_flock_kandang, projectFlocks, selectedLocation]);
-
   const getAvailableStock = useCallback(
     (productWarehouseId: number) => {
       if ((type as 'add' | 'edit' | 'detail') === 'detail') return 0;
       if (!isResponseSuccess(stockProducts)) return 0;
-      const productWarehouse = stockProducts.data.find(
-        (pw) => pw.id === productWarehouseId
-      );
+      const data = stockProducts.data as unknown as ProductWarehouse[];
+      const productWarehouse = data.find((pw) => pw.id === productWarehouseId);
       return productWarehouse?.quantity ?? 0;
     },
     [stockProducts, type]
@@ -880,9 +1138,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
     (productWarehouseId: number) => {
       if (!isResponseSuccess(stockProducts)) return null;
 
-      const productWarehouse = stockProducts.data.find(
-        (pw) => pw.id === productWarehouseId
-      );
+      const data = stockProducts.data as unknown as ProductWarehouse[];
+      const productWarehouse = data.find((pw) => pw.id === productWarehouseId);
       if (!productWarehouse) return null;
 
       const hasPakanFlag = productWarehouse.product.flags?.includes('PAKAN');
@@ -967,26 +1224,94 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
   // ===== EVENT HANDLERS =====
   const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
-    setSelectedLocation(val as OptionType);
+    const location = val as OptionType | null;
+    const locationId = location ? Number(location.value) : 0;
+
+    formik.setFieldTouched('location', true);
+    formik.setFieldValue('location', location);
+    formik.setFieldTouched('location_id', true);
+    formik.setFieldValue('location_id', locationId);
+
+    setSelectedLocation(location);
     setSelectedProjectFlock(null);
     setSelectedKandang(null);
-    formik.setFieldValue('project_flock_kandang', null);
-    formik.setFieldValue('project_flock_kandang_id', 0);
+    if (duplicateErrorShown) {
+      toast.dismiss();
+      setDuplicateErrorShown(false);
+    }
+    setSelectedProjectFlockLocationId(
+      location ? location.value.toString() : ''
+    );
   };
 
   const projectFlockChangeHandler = (val: OptionType | OptionType[] | null) => {
-    setSelectedProjectFlock(val as OptionType);
+    const projectFlock = val as OptionType | null;
+    const projectFlockId = Number(projectFlock?.value);
+
+    formik.setFieldTouched('project_flock', true);
+    formik.setFieldValue('project_flock', projectFlock);
+    formik.setFieldTouched('project_flock_id', true);
+    formik.setFieldValue('project_flock_id', projectFlockId);
+
+    setSelectedProjectFlock(projectFlock);
     setSelectedKandang(null);
-    formik.setFieldValue('project_flock_kandang', null);
-    formik.setFieldValue('project_flock_kandang_id', 0);
+    if (duplicateErrorShown) {
+      toast.dismiss();
+      setDuplicateErrorShown(false);
+    }
   };
 
   const kandangChangeHandler = (val: OptionType | OptionType[] | null) => {
-    setSelectedKandang(val as OptionType);
+    const kandang = val as OptionType | null;
+    const kandangId = Number(kandang?.value);
+
+    formik.setFieldTouched('kandang', true);
+    formik.setFieldValue('kandang', kandang);
+    formik.setFieldTouched('kandang_id', true);
+    formik.setFieldValue('kandang_id', kandangId);
+
+    setSelectedKandang(kandang);
+    if (duplicateErrorShown) {
+      toast.dismiss();
+      setDuplicateErrorShown(false);
+    }
+    if (selectedLocation && kandang) {
+      setStockProductsLocationId(selectedLocation.value.toString());
+      setStockProductsKandangId(kandang.value.toString());
+      setDepletionProductsLocationId(selectedLocation.value.toString());
+      setDepletionProductsKandangId(kandang.value.toString());
+      setEggProductsLocationId(selectedLocation.value.toString());
+      setEggProductsKandangId(kandang.value.toString());
+    } else {
+      setStockProductsLocationId('');
+      setStockProductsKandangId('');
+      setDepletionProductsLocationId('');
+      setDepletionProductsKandangId('');
+      setEggProductsLocationId('');
+      setEggProductsKandangId('');
+    }
     formik.setFieldTouched('project_flock_kandang', true);
     formik.setFieldTouched('project_flock_kandang_id', true);
   };
 
+  const handleRecordDateChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newDate = e.target.value;
+      formik.setFieldValue('record_date', newDate);
+      setCurrentRecordDate(newDate);
+      if (duplicateErrorShown) {
+        toast.dismiss();
+        setDuplicateErrorShown(false);
+      }
+      setTimeout(() => {
+        formik.validateField('project_flock_kandang_id');
+      }, 0);
+    },
+    [formik, duplicateErrorShown]
+  );
+
+  const { formErrorList, handleFormSubmit, close } = useFormikErrorList(formik);
+
   useEffect(() => {
     if (projectFlockKandangLookup?.project_flock_kandang_id) {
       const projectFlockKandangId =
@@ -994,8 +1319,19 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
       if (type === 'add') {
         if (recordedProjectFlockKandangIds.has(projectFlockKandangId)) {
-          toast.error('Project Flock Kandang ini sudah direcord hari ini!');
+          if (!duplicateErrorShown) {
+            toast.error(
+              `Project Flock Kandang ini sudah direcord pada tanggal ${formatDate(currentRecordDate, 'DD MMMM YYYY')}!`,
+              { duration: Infinity }
+            );
+            setDuplicateErrorShown(true);
+          }
           return;
+        } else {
+          if (duplicateErrorShown) {
+            toast.dismiss();
+            setDuplicateErrorShown(false);
+          }
         }
 
         if (
@@ -1005,7 +1341,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
           const hasSameDayRecording = isResponseSuccess(existingRecordings)
             ? existingRecordings.data?.some(
                 (recording: Recording) =>
-                  recording.project_flock_kandang_id ===
+                  recording.project_flock.project_flock_kandang_id ===
                     projectFlockKandangId &&
                   recording.day === nextDayRecording.next_day
               )
@@ -1056,6 +1392,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
           label: location.name || '',
         };
         setSelectedLocation(locationOption);
+        setSelectedProjectFlockLocationId(location.id.toString());
 
         if (projectFlock) {
           const projectFlockOption = {
@@ -1071,6 +1408,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             };
             setSelectedKandang(kandangOption);
 
+            setStockProductsLocationId(location.id.toString());
+            setStockProductsKandangId(kandang.id.toString());
+            setDepletionProductsLocationId(location.id.toString());
+            setDepletionProductsKandangId(kandang.id.toString());
+            setEggProductsLocationId(location.id.toString());
+            setEggProductsKandangId(kandang.id.toString());
+
             if (
               formik.values.project_flock_kandang_id !==
               projectFlockKandangDetail.id
@@ -1091,7 +1435,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   }, [
     projectFlockKandangDetail,
     type,
-    projectFlockOptions,
+    enhancedProjectFlockOptions,
     formik.values.project_flock_kandang_id,
   ]);
 
@@ -1357,10 +1701,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
 
           {/* Error List Alert */}
           {formErrorList.length > 0 && (
-            <AlertErrorList
-              formErrorList={formErrorList}
-              onClose={() => setFormErrorList([])}
-            />
+            <AlertErrorList formErrorList={formErrorList} onClose={close} />
           )}
 
           {/* Basic Info Card */}
@@ -1372,32 +1713,54 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                 body: 'flex flex-col gap-6',
               }}
             >
-              <div className={'grid grid-cols-3 gap-4'}>
+              <div className={'grid grid-cols-4 gap-4'}>
                 <>
+                  <DateInput
+                    required
+                    label='Tanggal Recording'
+                    name='record_date'
+                    value={formik.values.record_date}
+                    onChange={handleRecordDateChange}
+                    onBlur={formik.handleBlur}
+                    isError={
+                      formik.touched.record_date &&
+                      Boolean(formik.errors.record_date)
+                    }
+                    errorMessage={formik.errors.record_date as string}
+                    disabled={type === 'edit'}
+                  />
                   <SelectInput
                     key={`location-select-${selectedLocation?.value || 'default'}`}
                     required
                     label='Lokasi'
                     value={selectedLocation}
                     onChange={locationChangeHandler}
-                    options={locationOptions}
+                    options={enhancedLocationOptions}
                     onInputChange={setLocationSearchValue}
                     isLoading={isLoadingLocations}
+                    onMenuScrollToBottom={loadMoreLocations}
                     placeholder='Pilih Lokasi'
                     isClearable
                     isSearchable
+                    isDisabled={type === 'edit'}
+                    isError={
+                      formik.touched.location_id &&
+                      Boolean(formik.errors.location_id)
+                    }
+                    errorMessage={formik.errors.location_id as string}
                   />
 
                   <SelectInput
-                    key={`project-flock-select-${selectedProjectFlock?.value || 'default'}-${projectFlockOptions.length}`}
+                    key={`project-flock-select-${selectedProjectFlock?.value || 'default'}-${enhancedProjectFlockOptions.length}`}
                     required
                     label='Project Flock'
                     value={selectedProjectFlock}
                     onChange={projectFlockChangeHandler}
-                    options={projectFlockOptions}
+                    options={enhancedProjectFlockOptions}
                     onInputChange={setProjectFlockSearchValue}
                     isLoading={isLoadingProjectFlocks}
-                    isDisabled={!selectedLocation}
+                    onMenuScrollToBottom={loadMoreProjectFlocks}
+                    isDisabled={!selectedLocation || type === 'edit'}
                     placeholder={
                       selectedLocation
                         ? 'Pilih Project Flock'
@@ -1405,6 +1768,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     }
                     isClearable
                     isSearchable
+                    isError={
+                      formik.touched.project_flock_id &&
+                      Boolean(formik.errors.project_flock_id)
+                    }
+                    errorMessage={formik.errors.project_flock_id as string}
                   />
 
                   <SelectInput
@@ -1415,7 +1783,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     onChange={kandangChangeHandler}
                     options={kandangOptions}
                     isLoading={false}
-                    isDisabled={!selectedProjectFlock}
+                    isDisabled={!selectedProjectFlock || type === 'edit'}
                     placeholder={
                       selectedProjectFlock
                         ? 'Pilih Kandang'
@@ -1423,14 +1791,96 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     }
                     isClearable
                     isSearchable
+                    isError={
+                      formik.touched.kandang_id &&
+                      Boolean(formik.errors.kandang_id)
+                    }
+                    errorMessage={formik.errors.kandang_id as string}
                     startAdornment={
                       projectFlockKandangLookup || projectFlockKandangDetail
                         ? getProjectFlockBadgeAdornment()
                         : undefined
                     }
+                    bottomLabel={
+                      currentTotalChickQty
+                        ? `Jumlah ayam saat ini: ${formatNumber(
+                            currentTotalChickQty
+                          )}`
+                        : undefined
+                    }
                   />
                 </>
               </div>
+
+              {/* Additional Information Fields */}
+              {(projectFlockKandangLookup || projectFlockKandangDetail) && (
+                <div
+                  className={
+                    'grid grid-cols-4 gap-4 pt-4 border-t border-gray-200'
+                  }
+                >
+                  <div>
+                    <span className='text-sm text-gray-600'>Gudang</span>
+                    <p className='font-semibold'>
+                      {projectFlockKandangLookup?.warehouse?.name ||
+                        initialValues?.warehouse?.name ||
+                        '-'}
+                    </p>
+                  </div>
+                  <div>
+                    <span className='text-sm text-gray-600'>Umur</span>
+                    <p className='font-semibold'>
+                      {nextDayRecording
+                        ? `Hari ke-${nextDayRecording.next_day} (Minggu ke-${Math.ceil(nextDayRecording.next_day / 7)})`
+                        : initialValues?.day
+                          ? `Hari ke-${initialValues.day} (Minggu ke-${Math.ceil(initialValues.day / 7)})`
+                          : '-'}
+                    </p>
+                  </div>
+                  <div>
+                    <span className='text-sm text-gray-600'>Standard FCR</span>
+                    <div className='mt-1'>
+                      <Badge
+                        variant='soft'
+                        color='primary'
+                        className={{
+                          badge:
+                            'cursor-pointer hover:opacity-80 transition-opacity whitespace-nowrap',
+                        }}
+                        onClick={() => fcrStandardModal.openModal()}
+                      >
+                        {projectFlockKandangLookup?.project_flock?.fcr?.name ||
+                          initialValues?.project_flock?.fcr?.name ||
+                          '-'}
+                      </Badge>
+                    </div>
+                  </div>
+                  <div>
+                    <span className='text-sm text-gray-600'>
+                      Standard Produksi
+                    </span>
+                    <div className='mt-1'>
+                      <Badge
+                        variant='soft'
+                        color='primary'
+                        className={{
+                          badge:
+                            'cursor-pointer hover:opacity-80 transition-opacity whitespace-nowrap',
+                        }}
+                        onClick={() => productionStandardModal.openModal()}
+                      >
+                        {productionStandards?.name ||
+                          initialValues?.project_flock?.production_standart
+                            ?.name ||
+                          (projectFlockKandangLookup?.project_flock
+                            ?.production_standard_id
+                            ? `Production Standard ${projectFlockKandangLookup.project_flock.production_standard_id}`
+                            : '-')}
+                      </Badge>
+                    </div>
+                  </div>
+                </div>
+              )}
             </Card>
           )}
 
@@ -1445,7 +1895,106 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                   body: 'flex flex-col gap-4',
                 }}
               >
-                <div className='grid grid-cols-2 md:grid-cols-4 gap-4'>
+                <div className='grid grid-cols-3 gap-4'>
+                  <div>
+                    <span className='text-sm text-gray-600'>Lokasi</span>
+                    <p className='font-semibold'>
+                      {projectFlockKandangLookup?.project_flock?.location
+                        ?.name ||
+                        projectFlockKandangDetail?.project_flock?.location
+                          ?.name ||
+                        '-'}
+                    </p>
+                  </div>
+                  <div>
+                    <span className='text-sm text-gray-600'>Project Flock</span>
+                    <p className='font-semibold'>
+                      {projectFlockKandangLookup?.project_flock?.flock_name ||
+                        projectFlockKandangDetail?.project_flock?.flock_name ||
+                        '-'}
+                    </p>
+                  </div>
+                  <div>
+                    <span className='text-sm text-gray-600'>Kandang</span>
+                    <p className='font-semibold'>
+                      {projectFlockKandangLookup?.kandang?.name ||
+                        projectFlockKandangDetail?.kandang?.name ||
+                        '-'}
+                    </p>
+                  </div>
+                  <div>
+                    <span className='text-sm text-gray-600'>Kategori</span>
+                    <p className='font-semibold'>
+                      <Badge
+                        variant='soft'
+                        color={
+                          initialValues.project_flock
+                            ?.project_flock_category === 'LAYING'
+                            ? 'info'
+                            : 'warning'
+                        }
+                        size='sm'
+                      >
+                        {initialValues.project_flock?.project_flock_category}
+                      </Badge>
+                    </p>
+                  </div>
+                  <div>
+                    <span className='text-sm text-gray-600'>Gudang</span>
+                    <p className='font-semibold'>
+                      {initialValues.warehouse?.name || '-'}
+                    </p>
+                  </div>
+                  <div>
+                    <span className='text-sm text-gray-600'>
+                      Jumlah Ayam Saat Ini
+                    </span>
+                    <p className='font-semibold'>
+                      {initialValues.project_flock?.total_chick_qty
+                        ? formatNumber(
+                            initialValues.project_flock.total_chick_qty
+                          )
+                        : '-'}
+                    </p>
+                  </div>
+                  <div>
+                    <span className='text-sm text-gray-600'>Periode</span>
+                    <p className='font-semibold'>
+                      <Badge
+                        variant='soft'
+                        color='neutral'
+                        size='sm'
+                        className={{
+                          badge: 'whitespace-nowrap font-semibold text-xs px-2',
+                        }}
+                      >
+                        Periode{' '}
+                        {projectFlockKandangLookup?.project_flock?.period ||
+                          projectFlockKandangDetail?.project_flock?.period ||
+                          '-'}
+                      </Badge>
+                    </p>
+                  </div>
+                  <div>
+                    <span className='text-sm text-gray-600'>
+                      Tanggal Recording
+                    </span>
+                    <p className='font-semibold'>
+                      {formatDate(
+                        initialValues.record_datetime || '',
+                        'DD MMMM YYYY'
+                      )}
+                    </p>
+                  </div>
+                  <div>
+                    <span className='text-sm text-gray-600'>Hari</span>
+                    <p className='font-semibold'>
+                      Hari ke-{initialValues.day} (Minggu ke-
+                      {initialValues.project_flock?.production_standart?.week ||
+                        '-'}
+                      )
+                    </p>
+                  </div>
                   {initialValues.approval && (
                     <div>
                       <span className='text-sm text-gray-600'>
@@ -1497,79 +2046,39 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     </div>
                   )}
                   <div>
-                    <span className='text-sm text-gray-600'>Lokasi</span>
-                    <p className='font-semibold'>
-                      {projectFlockKandangLookup?.project_flock?.location
-                        ?.name ||
-                        projectFlockKandangDetail?.project_flock?.location
-                          ?.name ||
-                        '-'}
-                    </p>
-                  </div>
-                  <div>
-                    <span className='text-sm text-gray-600'>Project Flock</span>
-                    <p className='font-semibold'>
-                      {projectFlockKandangLookup?.project_flock?.flock_name ||
-                        projectFlockKandangDetail?.project_flock?.flock_name ||
-                        '-'}
-                    </p>
-                  </div>
-                  <div>
-                    <span className='text-sm text-gray-600'>Kandang</span>
-                    <p className='font-semibold'>
-                      {projectFlockKandangLookup?.kandang?.name ||
-                        projectFlockKandangDetail?.kandang?.name ||
-                        '-'}
-                    </p>
+                    <span className='text-sm text-gray-600'>Standard FCR</span>
+                    <div className='mt-1'>
+                      <Badge
+                        variant='soft'
+                        color='primary'
+                        className={{
+                          badge:
+                            'cursor-pointer hover:opacity-80 transition-opacity whitespace-nowrap',
+                        }}
+                        onClick={() => fcrStandardModal.openModal()}
+                      >
+                        {initialValues.project_flock?.fcr?.name || '-'}
+                      </Badge>
+                    </div>
                   </div>
                   <div>
                     <span className='text-sm text-gray-600'>
-                      Tanggal Recording
+                      Standard Produksi
                     </span>
-                    <p className='font-semibold'>
-                      {formatDate(
-                        initialValues.record_datetime || '',
-                        'DD MMMM YYYY'
-                      )}
-                    </p>
-                  </div>
-                  <div>
-                    <span className='text-sm text-gray-600'>Hari</span>
-                    <p className='font-semibold'>Hari ke-{initialValues.day}</p>
-                  </div>
-                  <div>
-                    <span className='text-sm text-gray-600'>Kategori</span>
-                    <p className='font-semibold'>
+                    <div className='mt-1'>
                       <Badge
                         variant='soft'
-                        color={
-                          initialValues.project_flock_category === 'LAYING'
-                            ? 'info'
-                            : 'warning'
-                        }
-                        size='sm'
-                      >
-                        {initialValues.project_flock_category}
-                      </Badge>
-                    </p>
-                  </div>
-                  <div>
-                    <span className='text-sm text-gray-600'>Periode</span>
-                    <p className='font-semibold'>
-                      <Badge
-                        variant='soft'
-                        color='neutral'
-                        size='sm'
+                        color='primary'
                         className={{
-                          badge: 'whitespace-nowrap font-semibold text-xs px-2',
+                          badge:
+                            'cursor-pointer hover:opacity-80 transition-opacity whitespace-nowrap',
                         }}
+                        onClick={() => productionStandardModal.openModal()}
                       >
-                        Periode{' '}
-                        {projectFlockKandangLookup?.project_flock?.period ||
-                          projectFlockKandangDetail?.project_flock?.period ||
-                          '-'}
+                        {initialValues.project_flock?.production_standart
+                          ?.name || '-'}
                       </Badge>
-                    </p>
+                    </div>
                   </div>
                 </div>
               </Card>
@@ -1579,7 +2088,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
           {type === 'detail' && initialValues && (
             <div
               className={`grid gap-6 mb-6 grid-cols-1 ${
-                initialValues.project_flock_category === 'LAYING'
+                initialValues.project_flock?.project_flock_category === 'LAYING'
                   ? 'xl:grid-cols-3'
                   : 'xl:grid-cols-2'
               }`}
@@ -1607,15 +2116,16 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         <td className='py-3 font-medium'>FCR</td>
                         <td className='text-center py-3'>
                           <span className='font-semibold'>
-                            {initialValues.fcr_value &&
-                            initialValues.fcr_value > 0
+                            {initialValues.fcr_value != null
                               ? formatNumber(initialValues.fcr_value)
                               : '-'}
                           </span>
                         </td>
                         <td className='text-center py-3 text-gray-600'>
-                          {initialValues.fcr_std && initialValues.fcr_std > 0
-                            ? formatNumber(initialValues.fcr_std)
+                          {initialValues.project_flock?.fcr?.fcr_std != null
+                            ? formatNumber(
+                                initialValues.project_flock?.fcr?.fcr_std
+                              )
                             : '-'}
                         </td>
                       </tr>
@@ -1623,16 +2133,18 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         <td className='py-3 font-medium'>Feed Intake (KG)</td>
                         <td className='text-center py-3'>
                           <span className='font-semibold'>
-                            {initialValues.feed_intake &&
-                            initialValues.feed_intake > 0
+                            {initialValues.feed_intake != null
                               ? formatNumber(initialValues.feed_intake)
                               : '-'}
                           </span>
                         </td>
                         <td className='text-center py-3 text-gray-600'>
-                          {initialValues.feed_intake_std &&
-                          initialValues.feed_intake_std > 0
-                            ? formatNumber(initialValues.feed_intake_std)
+                          {initialValues.project_flock?.production_standart
+                            ?.feed_intake_std != null
+                            ? formatNumber(
+                                initialValues.project_flock?.production_standart
+                                  ?.feed_intake_std
+                              )
                             : '-'}
                         </td>
                       </tr>
@@ -1650,59 +2162,36 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                 </div>
                 <div className='p-4'>
                   <table className='w-full text-sm'>
-                    <thead>
-                      <tr className='border-b border-gray-200'>
-                        <th
-                          colSpan={2}
-                          className='text-center py-2 font-semibold text-gray-600'
-                        >
-                          DEPLESI KUMULATIF
-                        </th>
-                      </tr>
-                      <tr className='border-b border-gray-200'>
-                        <th className='text-center py-2 font-semibold text-xs text-gray-500'>
-                          Total
-                        </th>
-                        <th className='text-center py-2 font-semibold text-xs text-gray-500'>
-                          (%)
-                        </th>
-                      </tr>
-                    </thead>
                     <tbody>
                       <tr>
-                        <td className='text-center py-3 border-r border-gray-100'>
+                        <td className='py-2 font-medium'>Deplesi Kumulatif</td>
+                        <td className='text-right py-2'>
                           <span className='font-semibold'>
-                            {initialValues.total_depletion_qty &&
-                            initialValues.total_depletion_qty > 0
-                              ? formatNumber(initialValues.total_depletion_qty)
+                            {initialValues.cum_depletion_rate != null
+                              ? `${initialValues.cum_depletion_rate.toFixed(2)}%`
                               : '-'}
                           </span>
                         </td>
-                        <td className='text-center py-3 text-gray-600'>
-                          {initialValues.cum_depletion_rate &&
-                          initialValues.cum_depletion_rate > 0
-                            ? initialValues.cum_depletion_rate.toFixed(2)
-                            : '-'}
-                        </td>
                       </tr>
                       <tr>
-                        <td
-                          colSpan={2}
-                          className='text-center py-3 border-r border-gray-200 text-gray-600'
-                        >
-                          Total Ayam
-                        </td>
-                      </tr>
-                      <tr>
-                        <td
-                          colSpan={2}
-                          className='text-center py-3 font-semibold'
-                        >
-                          {initialValues.total_chick_qty &&
-                          initialValues.total_chick_qty > 0
-                            ? formatNumber(initialValues.total_chick_qty)
+                        <td className='py-2 font-medium'>Total Depletion</td>
+                        <td className='text-right py-2 font-semibold'>
+                          {initialValues.total_depletion_qty != null
+                            ? formatNumber(initialValues.total_depletion_qty)
                             : '-'}
                         </td>
+                        <td></td>
+                      </tr>
+                      <tr className='border-t border-gray-200'>
+                        <td className='py-2 text-gray-600'>Total Ayam</td>
+                        <td className='text-right py-2 font-semibold'>
+                          {initialValues.project_flock?.total_chick_qty != null
+                            ? formatNumber(
+                                initialValues.project_flock?.total_chick_qty
+                              )
+                            : '-'}
+                        </td>
+                        <td></td>
                       </tr>
                     </tbody>
                   </table>
@@ -1712,7 +2201,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
               {/* Egg Production Section - Only for LAYING category */}
               {type === 'detail' &&
                 initialValues &&
-                initialValues.project_flock_category === 'LAYING' && (
+                initialValues.project_flock?.project_flock_category ===
+                  'LAYING' && (
                   <div className='border border-gray-200 rounded-lg bg-white'>
                     <div className='px-4 py-3 border-b border-gray-200'>
                       <span className='card-title font-bold text-xl'>
@@ -1737,16 +2227,18 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             <td className='py-3 font-medium'>Egg Mass</td>
                             <td className='text-center py-3'>
                               <span className='font-semibold'>
-                                {initialValues.egg_mass &&
-                                initialValues.egg_mass > 0
+                                {initialValues.egg_mass != null
                                   ? formatNumber(initialValues.egg_mass)
                                   : '-'}
                               </span>
                             </td>
                             <td className='text-center py-3 text-gray-600'>
-                              {initialValues.egg_mass_std &&
-                              initialValues.egg_mass_std > 0
-                                ? formatNumber(initialValues.egg_mass_std)
+                              {initialValues.project_flock?.production_standart
+                                ?.egg_mass_std != null
+                                ? formatNumber(
+                                    initialValues.project_flock
+                                      ?.production_standart?.egg_mass_std
+                                  )
                                 : '-'}
                             </td>
                           </tr>
@@ -1756,16 +2248,18 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             </td>
                             <td className='text-center py-3'>
                               <span className='font-semibold'>
-                                {initialValues.egg_weight &&
-                                initialValues.egg_weight > 0
+                                {initialValues.egg_weight != null
                                   ? formatNumber(initialValues.egg_weight)
                                   : '-'}
                               </span>
                             </td>
                             <td className='text-center py-3 text-gray-600'>
-                              {initialValues.egg_weight_std &&
-                              initialValues.egg_weight_std > 0
-                                ? formatNumber(initialValues.egg_weight_std)
+                              {initialValues.project_flock?.production_standart
+                                ?.egg_weight_std != null
+                                ? formatNumber(
+                                    initialValues.project_flock
+                                      ?.production_standart?.egg_weight_std
+                                  )
                                 : '-'}
                             </td>
                           </tr>
@@ -1773,16 +2267,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             <td className='py-3 font-medium'>Hen Day</td>
                             <td className='text-center py-3'>
                               <span className='font-semibold'>
-                                {initialValues.hen_day &&
-                                initialValues.hen_day > 0
+                                {initialValues.hen_day != null
                                   ? formatNumber(initialValues.hen_day)
                                   : '-'}
                               </span>
                             </td>
                             <td className='text-center py-3 text-gray-600'>
-                              {initialValues.hen_day_std !== undefined &&
-                              initialValues.hen_day_std > 0
-                                ? `${initialValues.hen_day_std}%`
+                              {initialValues.project_flock?.production_standart
+                                ?.hen_day_std != null
+                                ? `${initialValues.project_flock?.production_standart?.hen_day_std}%`
                                 : '-'}
                             </td>
                           </tr>
@@ -1790,16 +2283,15 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                             <td className='py-3 font-medium'>Hen House</td>
                             <td className='text-center py-3'>
                               <span className='font-semibold'>
-                                {initialValues.hen_house &&
-                                initialValues.hen_house > 0
+                                {initialValues.hen_house != null
                                   ? formatNumber(initialValues.hen_house)
                                   : '-'}
                               </span>
                             </td>
                             <td className='text-center py-3 text-gray-600'>
-                              {initialValues.hen_house_std !== undefined &&
-                              initialValues.hen_house_std > 0
-                                ? `${initialValues.hen_house_std}%`
+                              {initialValues.project_flock?.production_standart
+                                ?.hen_house_std != null
+                                ? `${initialValues.project_flock?.production_standart?.hen_house_std}%`
                                 : '-'}
                             </td>
                           </tr>
@@ -1919,6 +2411,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           options={unifiedStockProducts}
                           placeholder='Pilih Produk'
                           isLoading={isLoadingStockProducts}
+                          onMenuScrollToBottom={loadMoreStockProducts}
                           isError={
                             isRepeaterInputError(
                               'stocks',
@@ -2070,24 +2563,8 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                         />
                       </th>
                     )}
-                    <th>
-                      Kondisi
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom '
-                        data-tip='required'
-                      >
-                        <span className='text-error'>*</span>
-                      </span>
-                    </th>
-                    <th>
-                      Jumlah
-                      <span
-                        className='tooltip tooltip-error tooltip-bottom '
-                        data-tip='required'
-                      >
-                        <span className='text-error'>*</span>
-                      </span>
-                    </th>
+                    <th>Kondisi</th>
+                    <th>Jumlah</th>
                     {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
                       <th>Action</th>
                     )}
@@ -2140,6 +2617,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           options={depletionProducts}
                           placeholder='Pilih Kondisi'
                           isLoading={isLoadingDepletionProducts}
+                          onMenuScrollToBottom={loadMoreDepletionProducts}
                           isError={
                             isRepeaterInputError(
                               'depletions',
@@ -2164,7 +2642,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                       </td>
                       <td>
                         <NumberInput
-                          required
                           name={`depletions.${idx}.qty`}
                           value={depletion.qty ?? ''}
                           onChange={handleDepletionQtyChangeWrapper(idx)}
@@ -2280,33 +2757,9 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           />
                         </th>
                       )}
-                      <th>
-                        Kondisi Telur
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom '
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>
-                        Jumlah
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom '
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
-                      <th>
-                        Berat (gram)
-                        <span
-                          className='tooltip tooltip-error tooltip-bottom '
-                          data-tip='required'
-                        >
-                          <span className='text-error'>*</span>
-                        </span>
-                      </th>
+                      <th>Kondisi Telur</th>
+                      <th>Jumlah</th>
+                      <th>Berat (gram)</th>
                       {(type as 'add' | 'edit' | 'detail') !== 'detail' && (
                         <th>Action</th>
                       )}
@@ -2341,7 +2794,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           )}
                           <td>
                             <SelectInput
-                              required
                               value={
                                 eggProducts.find(
                                   (product) =>
@@ -2359,6 +2811,7 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                               options={eggProducts}
                               placeholder='Pilih Kondisi Telur'
                               isLoading={isLoadingEggProducts}
+                              onMenuScrollToBottom={loadMoreEggProducts}
                               isError={
                                 isRepeaterInputError(
                                   'eggs',
@@ -2383,7 +2836,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           </td>
                           <td>
                             <NumberInput
-                              required
                               name={`eggs.${idx}.qty`}
                               value={egg.qty ?? ''}
                               onChange={handleEggQtyChangeWrapper(idx)}
@@ -2408,7 +2860,6 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                           </td>
                           <td>
                             <NumberInput
-                              required
                               name={`eggs.${idx}.weight`}
                               value={egg.weight ?? ''}
                               onChange={handleEggWeightChangeWrapper(idx)}
@@ -2544,7 +2995,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     color='primary'
                     className='px-4'
                     isLoading={formik.isSubmitting}
-                    disabled={hasExceededStock || formik.isSubmitting}
+                    disabled={
+                      hasExceededStock ||
+                      formik.isSubmitting ||
+                      duplicateErrorShown
+                    }
                   >
                     Submit
                   </Button>
@@ -2569,7 +3024,11 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
                     color='primary'
                     className='px-4'
                     isLoading={formik.isSubmitting}
-                    disabled={hasExceededStock || formik.isSubmitting}
+                    disabled={
+                      hasExceededStock ||
+                      formik.isSubmitting ||
+                      duplicateErrorShown
+                    }
                   >
                     Submit
                   </Button>
@@ -2644,6 +3103,119 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
             )}
         </>
       )}
+
+      {/* FCR Standard Modal */}
+      <Modal
+        ref={fcrStandardModal.ref}
+        closeOnBackdrop={true}
+        className={{
+          modal: 'p-0',
+          modalBox: 'p-0 rounded-2xl xl:max-w-4/12 max-w-sm',
+        }}
+      >
+        <div className='space-y-6'>
+          {/* Modal Header */}
+          <div className='flex items-center justify-between gap-2 py-3 border-b border-gray-300 px-4'>
+            <div className='flex items-center gap-2 text-primary'>
+              <Icon icon='mdi:chart-line' width={20} height={20} />
+              <h3 className='font-semibold'>Detail Standard FCR</h3>
+            </div>
+            <Button
+              variant='link'
+              onClick={fcrStandardModal.closeModal}
+              className='text-gray-500 hover:text-gray-700 transition-colors cursor-pointer'
+            >
+              <Icon icon='heroicons:x-mark' width={20} height={20} />
+            </Button>
+          </div>
+          <div className='px-4'>
+            {isLoadingFcrStandards ? (
+              <div className='flex justify-center py-8'>
+                <span className='loading loading-spinner loading-lg'></span>
+              </div>
+            ) : fcrStandards.length > 0 ? (
+              <Table<FcrStandard>
+                data={fcrStandards}
+                columns={fcrStandardColumns}
+                pageSize={100}
+                className={{
+                  tableWrapperClassName: 'overflow-x-auto',
+                  tableClassName: 'w-full table-auto text-sm',
+                  headerRowClassName: 'border-b border-b-gray-200',
+                  headerColumnClassName:
+                    'px-4 py-3 text-xs font-semibold text-gray-500 whitespace-nowrap border-l border-l-gray-200 border-r border-r-gray-200 border-t border-t-gray-200 border-gray-200 border-b-0',
+                  bodyRowClassName:
+                    'hover:bg-gray-50 transition-colors border-b border-gray-200 first:border-t first:border-t-gray-200 border-l border-l-gray-200 border-r border-r-gray-200',
+                  bodyColumnClassName:
+                    'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+                  paginationClassName: 'hidden',
+                }}
+              />
+            ) : (
+              <p className='text-sm text-gray-500'>
+                Tidak ada data FCR standards
+              </p>
+            )}
+          </div>
+        </div>
+      </Modal>
+
+      {/* Production Standard Modal */}
+      <Modal
+        closeOnBackdrop={true}
+        ref={productionStandardModal.ref}
+        className={{
+          modal: 'p-0',
+          modalBox: 'p-0 rounded-2xl xl:max-w-full max-w-sm',
+        }}
+      >
+        <div className='space-y-6'>
+          {/* Modal Header */}
+          <div className='flex items-center justify-between gap-2 py-3 border-b border-gray-300 px-4'>
+            <div className='flex items-center gap-2 text-primary'>
+              <Icon icon='mdi:clipboard-text' width={20} height={20} />
+              <h3 className='font-semibold'>Detail Standard Produksi</h3>
+            </div>
+            <Button
+              variant='link'
+              onClick={productionStandardModal.closeModal}
+              className='text-gray-500 hover:text-gray-700 transition-colors cursor-pointer'
+            >
+              <Icon icon='heroicons:x-mark' width={20} height={20} />
+            </Button>
+          </div>
+          <div className='px-4'>
+            {isLoadingProductionStandards ? (
+              <div className='flex justify-center py-8'>
+                <span className='loading loading-spinner loading-lg'></span>
+              </div>
+            ) : productionStandards?.details &&
+              productionStandards.details.length > 0 ? (
+              <Table<StandardDetails>
+                data={productionStandards.details}
+                columns={productionStandardColumns}
+                pageSize={100}
+                className={{
+                  tableWrapperClassName: 'overflow-x-auto',
+                  tableClassName: 'w-full table-auto text-sm',
+                  headerRowClassName: 'border-b border-b-gray-200',
+                  headerColumnClassName:
+                    'px-4 py-3 text-xs font-semibold text-gray-500 whitespace-nowrap border-l border-l-gray-200 border-r border-r-gray-200 border-t border-t-gray-200 border-gray-200 border-b-0',
+                  bodyRowClassName:
+                    'hover:bg-gray-50 transition-colors border-b border-gray-200 first:border-t first:border-t-gray-200 border-l border-l-gray-200 border-r border-r-gray-200',
+                  bodyColumnClassName:
+                    'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+                  paginationClassName: 'hidden',
+                }}
+              />
+            ) : (
+              <p className='text-sm text-gray-500 mb-8'>
+                Tidak ada data Production standards
+              </p>
+            )}
+          </div>
+        </div>
+      </Modal>
     </>
   );
 };
diff --git a/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx b/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
index 18ce404d..860c4616 100644
--- a/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
+++ b/src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx
@@ -179,12 +179,16 @@ const TransferToLayingsTable = () => {
     setInputValue: setFlockSourceInputValue,
     options: flockSourceOptions,
     isLoadingOptions: isLoadingFlockSourceOptions,
+    loadMore: loadMoreFlockSource,
+    hasMore: hasMoreFlockSource,
   } = useSelect<Flock>(FlockApi.basePath, 'id', 'name');
 
   const {
     setInputValue: setFlockDestinationInputValue,
     options: flockDestinationOptions,
     isLoadingOptions: isLoadingFlockDestinationOptions,
+    loadMore: loadMoreFlockDestination,
+    hasMore: hasMoreFlockDestination,
   } = useSelect<Flock>(FlockApi.basePath, 'id', 'name');
 
   // Flocks value
@@ -595,6 +599,7 @@ const TransferToLayingsTable = () => {
               value={selectedFlockSource}
               onChange={flockSourceChangeHandler}
               onInputChange={setFlockSourceInputValue}
+              onMenuScrollToBottom={loadMoreFlockSource}
               isClearable
               className={{
                 wrapper: 'col-span-12 sm:col-span-3',
@@ -608,6 +613,7 @@ const TransferToLayingsTable = () => {
               value={selectedFlockDestination}
               onChange={flockDestinationChangeHandler}
               onInputChange={setFlockDestinationInputValue}
+              onMenuScrollToBottom={loadMoreFlockDestination}
               isClearable
               className={{
                 wrapper: 'col-span-12 sm:col-span-3',
diff --git a/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx
index c5683fff..a257af0d 100644
--- a/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx
+++ b/src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx
@@ -270,6 +270,8 @@ const TransferToLayingForm = ({
     options: flockSourceOptions,
     isLoadingOptions: isLoadingFlockSourceOptions,
     rawData: flockSources,
+    loadMore: loadMoreFlockSource,
+    hasMore: hasMoreFlockSource,
   } = useSelect<ProjectFlock>(
     '/production/project-flocks',
     'id',
@@ -360,6 +362,8 @@ const TransferToLayingForm = ({
     options: flockDestinationOptions,
     isLoadingOptions: isLoadingFlockDestinationOptions,
     rawData: flockDestinations,
+    loadMore: loadMoreFlockDestination,
+    hasMore: hasMoreFlockDestination,
   } = useSelect<ProjectFlock>(
     '/production/project-flocks',
     'id',
@@ -573,6 +577,7 @@ const TransferToLayingForm = ({
                 onChange={flockSourceChangeHandler}
                 isLoading={isLoadingFlockSourceOptions}
                 onInputChange={setFlockSourceInputValue}
+                onMenuScrollToBottom={loadMoreFlockSource}
                 isError={
                   formik.touched.flockSource &&
                   Boolean(typeof formik.errors.flockSource === 'string')
@@ -591,6 +596,7 @@ const TransferToLayingForm = ({
                 onChange={flockDestinationChangeHandler}
                 isLoading={isLoadingFlockDestinationOptions}
                 onInputChange={setFlockDestinationInputValue}
+                onMenuScrollToBottom={loadMoreFlockDestination}
                 isError={
                   formik.touched.flockDestination &&
                   Boolean(typeof formik.errors.flockDestination === 'string')
diff --git a/src/components/pages/production/uniformity/UniformityTable.tsx b/src/components/pages/production/uniformity/UniformityTable.tsx
index 63c446ac..c2049ab1 100644
--- a/src/components/pages/production/uniformity/UniformityTable.tsx
+++ b/src/components/pages/production/uniformity/UniformityTable.tsx
@@ -37,7 +37,10 @@ import DateInput from '@/components/input/DateInput';
 import { LocationApi } from '@/services/api/master-data';
 import { ProjectFlockApi } from '@/services/api/production';
 import { Kandang } from '@/types/api/master-data/kandang';
-import { ProjectFlockKandangLookup } from '@/types/api/production/project-flock';
+import {
+  ProjectFlockKandangLookup,
+  ProjectFlock,
+} from '@/types/api/production/project-flock';
 import {
   getStatusColor,
   getStatusIndicatorColor,
@@ -229,63 +232,37 @@ const UniformityTable = () => {
     useState<number | undefined>(undefined);
   const [filterStartDate, setFilterStartDate] = useState('');
   const [filterEndDate, setFilterEndDate] = useState('');
-  const [projectFlockSearchValue, setProjectFlockSearchValue] = useState('');
+  const [filterProjectFlockLocationId, setFilterProjectFlockLocationId] =
+    useState<string>('');
   const [filterErrors, setFilterErrors] = useState<Record<string, string>>({});
 
   const {
     setInputValue: setFilterLocationInputValue,
     options: filterLocationOptions,
     isLoadingOptions: isLoadingFilterLocations,
-  } = useSelect(LocationApi.basePath, 'id', 'name', 'search', {
-    limit: '100',
-  });
+    loadMore: loadMoreFilterLocations,
+    hasMore: hasMoreFilterLocations,
+  } = useSelect(LocationApi.basePath, 'id', 'name', 'search');
 
   // ===== FETCH PROJECT FLOCKS DATA FOR FILTER =====
-  const filterProjectFlocksUrl = useMemo(() => {
-    const params = new URLSearchParams({
-      search: projectFlockSearchValue || '',
-      limit: '100',
-    });
-    if (filterLocation) {
-      params.append('location_id', filterLocation.value.toString());
-    }
-    return `${ProjectFlockApi.basePath}?${params.toString()}`;
-  }, [projectFlockSearchValue, filterLocation]);
-
   const {
-    data: filterProjectFlocksData,
-    isLoading: isLoadingFilterProjectFlocks,
-  } = useSWR(filterProjectFlocksUrl, ProjectFlockApi.getAllFetcher);
-
-  const filterProjectFlocksDataList = useMemo(
-    () =>
-      isResponseSuccess(filterProjectFlocksData)
-        ? filterProjectFlocksData.data
-        : undefined,
-    [filterProjectFlocksData]
-  );
-
-  const filterProjectFlockOptions = useMemo(() => {
-    let options: OptionType[] = [];
-
-    if (isResponseSuccess(filterProjectFlocksData)) {
-      const flockOptions =
-        filterProjectFlocksData?.data.map((projectFlock) => ({
-          value: projectFlock.id,
-          label: projectFlock.flock_name || '',
-        })) || [];
-      options = options.concat(flockOptions);
-    }
-
-    return options;
-  }, [filterProjectFlocksData]);
+    setInputValue: setFilterProjectFlockSearchValue,
+    options: filterProjectFlockOptions,
+    rawData: filterProjectFlocksRawData,
+    isLoadingOptions: isLoadingFilterProjectFlocks,
+    loadMore: loadMoreFilterProjectFlocks,
+    hasMore: hasMoreFilterProjectFlocks,
+  } = useSelect(ProjectFlockApi.basePath, 'id', 'flock_name', 'search', {
+    location_id: filterProjectFlockLocationId,
+  });
 
   // ===== KANDANG OPTIONS FOR FILTER =====
   const filterKandangOptions = useMemo(() => {
     let options: OptionType[] = [];
 
-    if (filterProjectFlock && filterProjectFlocksDataList) {
-      const selectedProjectFlockData = filterProjectFlocksDataList.find(
+    if (filterProjectFlock && isResponseSuccess(filterProjectFlocksRawData)) {
+      const data = filterProjectFlocksRawData.data as unknown as ProjectFlock[];
+      const selectedProjectFlockData = data.find(
         (pf) => pf.id === filterProjectFlock.value
       );
 
@@ -301,7 +278,7 @@ const UniformityTable = () => {
     }
 
     return options;
-  }, [filterProjectFlock, filterProjectFlocksDataList]);
+  }, [filterProjectFlock, filterProjectFlocksRawData]);
 
   // ===== PROJECT FLOCK KANDANG LOOKUP =====
   const projectFlockKandangLookupUrl = useMemo(() => {
@@ -394,9 +371,13 @@ const UniformityTable = () => {
   // ===== FILTER HANDLERS =====
   const handleFilterLocationChange = useCallback(
     (val: OptionType | OptionType[] | null) => {
-      setFilterLocation(val as OptionType | null);
+      const location = val as OptionType | null;
+      setFilterLocation(location);
       setFilterProjectFlock(null);
       setFilterKandang(null);
+      setFilterProjectFlockLocationId(
+        location ? location.value.toString() : ''
+      );
     },
     []
   );
@@ -1206,6 +1187,7 @@ const UniformityTable = () => {
                   options={filterLocationOptions}
                   onInputChange={setFilterLocationInputValue}
                   isLoading={isLoadingFilterLocations}
+                  onMenuScrollToBottom={loadMoreFilterLocations}
                   className={{ wrapper: 'w-full' }}
                 />
                 {filterErrors.location && (
@@ -1225,8 +1207,9 @@ const UniformityTable = () => {
                     setFilterErrors((prev) => ({ ...prev, project_flock: '' }));
                   }}
                   options={filterProjectFlockOptions}
-                  onInputChange={setProjectFlockSearchValue}
+                  onInputChange={setFilterProjectFlockSearchValue}
                   isLoading={isLoadingFilterProjectFlocks}
+                  onMenuScrollToBottom={loadMoreFilterProjectFlocks}
                   isDisabled={!filterLocation}
                   className={{ wrapper: 'w-full' }}
                 />
diff --git a/src/components/pages/production/uniformity/chart/UniformityStat.tsx b/src/components/pages/production/uniformity/chart/UniformityStat.tsx
index ea8a5c0e..e7603e16 100644
--- a/src/components/pages/production/uniformity/chart/UniformityStat.tsx
+++ b/src/components/pages/production/uniformity/chart/UniformityStat.tsx
@@ -1,4 +1,4 @@
-import Badge from '../../../../Badge';
+import Badge from '@/components/Badge';
 import Card from '@/components/Card';
 import { Icon } from '@iconify/react';
 import { formatNumber } from '@/lib/helper';
diff --git a/src/components/pages/production/uniformity/form/UniformityForm.tsx b/src/components/pages/production/uniformity/form/UniformityForm.tsx
index 54b4ee2b..f46a15b3 100644
--- a/src/components/pages/production/uniformity/form/UniformityForm.tsx
+++ b/src/components/pages/production/uniformity/form/UniformityForm.tsx
@@ -36,7 +36,10 @@ import {
   VerifyUniformityPayload,
 } from '@/types/api/production/uniformity';
 import { type BaseApiResponse } from '@/types/api/api-general';
-import { ProjectFlockKandangLookup } from '@/types/api/production/project-flock';
+import {
+  ProjectFlockKandangLookup,
+  ProjectFlock,
+} from '@/types/api/production/project-flock';
 import { Kandang } from '@/types/api/master-data/kandang';
 import UniformityPreviewForm from '@/components/pages/production/uniformity/form/UniformityPreviewForm';
 import UniformityResultForm from '@/components/pages/production/uniformity/form/UniformityResultForm';
@@ -88,7 +91,9 @@ const UniformityForm = ({
     null
   );
 
-  const [projectFlockSearchValue, setProjectFlockSearchValue] = useState('');
+  const [selectedProjectFlockLocationId, setSelectedProjectFlockLocationId] =
+    useState<string>('');
+
   const [selectedProjectFlock, setSelectedProjectFlock] =
     useState<OptionType | null>(null);
 
@@ -100,50 +105,21 @@ const UniformityForm = ({
     setInputValue: setLocationSelectInputValue,
     options: locationOptions,
     isLoadingOptions: isLoadingLocations,
-  } = useSelect(LocationApi.basePath, 'id', 'name', 'search', {
-    page: '1',
-    limit: '100',
+    loadMore: loadMoreLocations,
+    hasMore: hasMoreLocations,
+  } = useSelect(LocationApi.basePath, 'id', 'name', 'search');
+
+  const {
+    setInputValue: setProjectFlockSearchValue,
+    options: projectFlockOptions,
+    rawData: projectFlocksRawData,
+    isLoadingOptions: isLoadingProjectFlocks,
+    loadMore: loadMoreProjectFlocks,
+    hasMore: hasMoreProjectFlocks,
+  } = useSelect(ProjectFlockApi.basePath, 'id', 'flock_name', 'search', {
+    location_id: selectedProjectFlockLocationId,
   });
 
-  // ===== FETCH PROJECT FLOCKS DATA =====
-  const projectFlocksUrl = useMemo(() => {
-    const params = new URLSearchParams({
-      search: projectFlockSearchValue || '',
-      page: '1',
-      limit: '100',
-    });
-    if (selectedLocation) {
-      params.append('location_id', selectedLocation.value.toString());
-    }
-    return `${ProjectFlockApi.basePath}?${params.toString()}`;
-  }, [projectFlockSearchValue, selectedLocation]);
-
-  const { data: projectFlocksData, isLoading: isLoadingProjectFlocks } = useSWR(
-    projectFlocksUrl,
-    ProjectFlockApi.getAllFetcher
-  );
-
-  const projectFlocksDataList =
-    projectFlocksData?.status === 'success'
-      ? projectFlocksData.data
-      : undefined;
-
-  // ===== PROJECT FLOCK OPTIONS =====
-  const projectFlockOptions = useMemo(() => {
-    let options: OptionType[] = [];
-
-    if (isResponseSuccess(projectFlocksData)) {
-      const flockOptions =
-        projectFlocksData?.data.map((projectFlock) => ({
-          value: projectFlock.id,
-          label: projectFlock.flock_name || '',
-        })) || [];
-      options = options.concat(flockOptions);
-    }
-
-    return options;
-  }, [projectFlocksData]);
-
   // ===== APPROVED PROJECT FLOCK KANDANGS =====
   const approvedProjectFlockKandangsUrl = useMemo(() => {
     const params = new URLSearchParams({
@@ -168,8 +144,9 @@ const UniformityForm = ({
   const kandangOptions = useMemo(() => {
     let options: OptionType[] = [];
 
-    if (selectedProjectFlock && projectFlocksDataList) {
-      const selectedProjectFlockData = projectFlocksDataList.find(
+    if (selectedProjectFlock && isResponseSuccess(projectFlocksRawData)) {
+      const data = projectFlocksRawData.data as unknown as ProjectFlock[];
+      const selectedProjectFlockData = data.find(
         (pf) => pf.id === selectedProjectFlock.value
       );
 
@@ -196,7 +173,7 @@ const UniformityForm = ({
     return options;
   }, [
     selectedProjectFlock,
-    projectFlocksDataList,
+    projectFlocksRawData,
     approvedProjectFlockKandangs,
     formType,
   ]);
@@ -313,6 +290,10 @@ const UniformityForm = ({
       formik.setFieldValue('location_id', locationId);
 
       setSelectedLocation(location);
+      setSelectedProjectFlock(null);
+      setSelectedProjectFlockLocationId(
+        location ? location.value.toString() : ''
+      );
     },
     []
   );
@@ -513,6 +494,7 @@ const UniformityForm = ({
               options={locationOptions}
               onInputChange={setLocationSelectInputValue}
               isLoading={isLoadingLocations}
+              onMenuScrollToBottom={loadMoreLocations}
               isError={
                 formik.touched.location_id && Boolean(formik.errors.location_id)
               }
@@ -530,6 +512,7 @@ const UniformityForm = ({
               options={projectFlockOptions}
               onInputChange={setProjectFlockSearchValue}
               isLoading={isLoadingProjectFlocks}
+              onMenuScrollToBottom={loadMoreProjectFlocks}
               isDisabled={!formik.values.location_id}
               isError={
                 formik.touched.project_flock_id &&
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
index 2b18afee..de27a169 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx
@@ -156,8 +156,11 @@ const PurchaseOrderAcceptApprovalForm = ({
     setInputValue: setExpeditionsSelectInputValue,
     options: expeditionVendors,
     isLoadingOptions: isLoadingExpeditions,
+    loadMore: loadMoreExpeditions,
+    hasMore: hasMoreExpeditions,
   } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name', 'search', {
     category: 'BOP',
+    flag: 'EKSPEDISI',
   });
 
   // ===== FORM CONFIGURATION =====
@@ -183,8 +186,8 @@ const PurchaseOrderAcceptApprovalForm = ({
               purchase_item_id: formItem.purchase_item_id || 0,
               received_date: formItem.received_date || '',
               travel_number: formItem.travel_number || '',
-              vehicle_number: formItem.vehicle_number || '',
-              expedition_vendor_id: formItem.expedition_vendor_id || 0,
+              vehicle_number: formItem.vehicle_number || null,
+              expedition_vendor_id: formItem.expedition_vendor_id || null,
               received_qty:
                 typeof formItem.received_qty === 'string'
                   ? parseFloat(formItem.received_qty) || 0
@@ -192,10 +195,13 @@ const PurchaseOrderAcceptApprovalForm = ({
               transport_per_item:
                 typeof formItem.transport_per_item === 'string'
                   ? parseFloat(formItem.transport_per_item) || 0
-                  : formItem.transport_per_item || 0,
+                  : formItem.transport_per_item || null,
             };
           }) || [],
-        travel_documents: values.travel_documents || [],
+        travel_documents:
+          values.travel_documents
+            ?.filter((file): file is File => file instanceof File)
+            .filter(Boolean) || undefined,
       };
 
       switch (type) {
@@ -403,22 +409,13 @@ const PurchaseOrderAcceptApprovalForm = ({
                   Dokumen Surat Jalan
                   <span className='text-error'>*</span>
                 </th>
-                <th>
-                  Nomor Kendaraan
-                  <span className='text-error'>*</span>
-                </th>
-                <th>
-                  Vendor Ekspedisi
-                  <span className='text-error'>*</span>
-                </th>
+                <th>Nomor Kendaraan</th>
+                <th>Vendor Ekspedisi</th>
                 <th>
                   Jumlah Diterima
                   <span className='text-error'>*</span>
                 </th>
-                <th>
-                  Transport/Item
-                  <span className='text-error'>*</span>
-                </th>
+                <th>Transport/Item</th>
               </tr>
             </thead>
             <tbody>
@@ -536,7 +533,6 @@ const PurchaseOrderAcceptApprovalForm = ({
                     </td>
                     <td>
                       <TextInput
-                        required
                         name={`items.${idx}.vehicle_number`}
                         type='text'
                         value={formItem?.vehicle_number || ''}
@@ -562,7 +558,6 @@ const PurchaseOrderAcceptApprovalForm = ({
                     </td>
                     <td>
                       <SelectInput
-                        required
                         isClearable={true}
                         value={formItem?.expedition_vendor}
                         key={`expedition-vendor-${idx}`}
@@ -570,6 +565,8 @@ const PurchaseOrderAcceptApprovalForm = ({
                           expeditionVendorChangeHandler(idx, val)
                         }
                         options={getExpeditionVendorOptions()}
+                        isLoading={isLoadingExpeditions}
+                        onMenuScrollToBottom={loadMoreExpeditions}
                         isError={
                           isRepeaterInputError(idx, 'expedition_vendor_id')
                             .isError
@@ -629,7 +626,6 @@ const PurchaseOrderAcceptApprovalForm = ({
                     </td>
                     <td>
                       <NumberInput
-                        required
                         name={`items.${idx}.transport_per_item`}
                         value={formItem?.transport_per_item || ''}
                         onChange={(e) =>
@@ -680,7 +676,6 @@ const PurchaseOrderAcceptApprovalForm = ({
 
         <div className={'col-span-2 my-2'}>
           <FileInput
-            required
             name='travel_documents'
             label='Dokumen Surat Jalan'
             accept='.pdf,.jpg,.jpeg,.png'
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
index a1b60249..6a299703 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
+++ b/src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts
@@ -38,16 +38,16 @@ type PurchaseRequestAcceptApprovalFormSchemaType = {
     purchase_item_id: number;
     received_date: string;
     travel_number: string;
-    vehicle_number: string;
+    vehicle_number?: string | null;
     expedition_vendor?: {
       value: number;
       label: string;
     } | null;
-    expedition_vendor_id: number;
+    expedition_vendor_id?: number | null;
     received_qty: number | string;
-    transport_per_item: number | string;
+    transport_per_item?: number | string | null;
   }[];
-  travel_documents: File[];
+  travel_documents?: (File | null | undefined)[] | null;
 };
 
 export type PurchaseStaffApprovalItemSchema = {
@@ -75,14 +75,14 @@ export type PurchaseAcceptApprovalItemSchema = {
   purchase_item_id: number;
   received_date: string;
   travel_number: string;
-  vehicle_number: string;
+  vehicle_number?: string | null;
   expedition_vendor?: {
     value: number;
     label: string;
   } | null;
-  expedition_vendor_id: number;
+  expedition_vendor_id?: number | null;
   received_qty: number | string;
-  transport_per_item: number | string;
+  transport_per_item?: number | string | null;
 };
 
 export type PurchaseDeleteItemsSchema = {
@@ -184,24 +184,19 @@ const PurchaseAcceptApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseAcceptApp
       .required('No. Surat jalan wajib diisi!')
       .typeError('No. Surat jalan wajib diisi!'),
     vehicle_number: Yup.string()
-      .required('Nomor kendaraan wajib diisi!')
-      .typeError('Nomor kendaraan wajib diisi!'),
+      .nullable()
+      .optional()
+      .typeError('Nomor kendaraan harus berupa plat nomor!'),
     expedition_vendor: Yup.object({
       value: Yup.number().min(1).required(),
       label: Yup.string().required(),
-    }).nullable(),
+    })
+      .nullable()
+      .optional(),
     expedition_vendor_id: Yup.number()
-      .min(1, 'Vendor ekspedisi wajib diisi!')
-      .required('Vendor ekspedisi wajib diisi!')
-      .test(
-        'is-valid-expedition-vendor',
-        'Vendor ekspedisi harus dipilih!',
-        function (value) {
-          if (!this.parent.expedition_vendor) return true;
-          return Boolean(value && value > 0);
-        }
-      )
-      .typeError('Vendor ekspedisi harus dipilih!'),
+      .nullable()
+      .optional()
+      .typeError('Vendor ekspedisi harus berupa angka!'),
     received_qty: Yup.mixed<string | number>()
       .required('Jumlah diterima wajib diisi!')
       .test(
@@ -217,13 +212,14 @@ const PurchaseAcceptApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseAcceptApp
       )
       .typeError('Jumlah diterima harus berupa angka!'),
     transport_per_item: Yup.mixed<string | number>()
-      .required('Biaya transport per item wajib diisi!')
+      .nullable()
+      .optional()
       .test(
         'is-valid-transport-per-item',
         'Biaya transport per item harus berupa angka lebih dari atau sama dengan 0!',
         function (value) {
           if (value === '' || value === null || value === undefined)
-            return false;
+            return true;
           const numValue =
             typeof value === 'string' ? parseFloat(value) : value;
           return !isNaN(numValue) && numValue >= 0;
@@ -389,16 +385,17 @@ export const PurchaseRequestAcceptApprovalFormSchema: Yup.ObjectSchema<PurchaseR
     travel_documents: Yup.array()
       .of(
         Yup.mixed<File>()
-          .required('Dokumen surat jalan wajib diupload!')
+          .nullable()
+          .optional()
           .test('fileSize', 'Ukuran dokumen maksimal 5 MB', (value) => {
             if (!value) return true;
             if (value instanceof File) return value.size <= 5 * 1024 * 1024;
             return true;
           })
       )
-      .required('Dokumen surat jalan wajib diupload!')
-      .min(1, 'Minimal upload 1 dokumen surat jalan!')
-      .typeError('Dokumen surat jalan wajib diupload!'),
+      .nullable()
+      .optional()
+      .typeError('Dokumen surat jalan harus berupa array!'),
   });
 
 export const PurchaseRequestAcceptApprovalFormInitialValues: PurchaseRequestAcceptApprovalFormSchemaType =
diff --git a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
index 729b6782..a232347d 100644
--- a/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
+++ b/src/components/pages/purchase/form/order/PurchaseOrderStaffApprovalForm.tsx
@@ -633,8 +633,18 @@ const PurchaseOrderStaffApprovalForm = ({
 
       formik.setFieldValue(`items.${idx}.qty`, numValue);
 
-      formik.setFieldValue(`items.${idx}.price`, '');
-      formik.setFieldValue(`items.${idx}.total_price`, '');
+      if (
+        formItem.price !== '' &&
+        formItem.price !== undefined &&
+        formItem.price !== null &&
+        numValue !== '' &&
+        numValue > 0
+      ) {
+        const calculatedTotal = Number(formItem.price) * Number(numValue);
+        formik.setFieldValue(`items.${idx}.total_price`, calculatedTotal);
+      } else if (numValue === '') {
+        formik.setFieldValue(`items.${idx}.total_price`, '');
+      }
     }
 
     if (field === 'price' || field === 'total_price') {
@@ -1184,8 +1194,10 @@ const PurchaseOrderStaffApprovalForm = ({
                 color='warning'
                 className='px-4'
                 onClick={() => {
-                  formik.setValues(formikInitialValues);
-                  formik.resetForm();
+                  if (type === 'add') {
+                    formik.setValues(formikInitialValues);
+                    formik.resetForm();
+                  }
                   setPurchaseOrderFormErrorMessage('');
                   onCancel?.();
                   onModalClose?.();
diff --git a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
index 0c319f5a..9a54d537 100644
--- a/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
+++ b/src/components/pages/purchase/form/request/PurchaseRequestForm.tsx
@@ -63,11 +63,9 @@ const PurchaseRequestForm = ({
     useState('');
   const [formErrorList, setFormErrorList] = useState<string[]>([]);
 
-  // ===== TYPE DEFINITIONS =====
-  interface ProductOptionType {
-    value: number;
-    label: string;
-  }
+  const [selectedArea, setSelectedArea] = useState('');
+  const [selectedLocation, setSelectedLocation] = useState('');
+  const [disabledLocation, setDisabledLocation] = useState(true);
 
   // ===== UTILITY FUNCTIONS =====
   const isRepeaterInputError = (
@@ -160,11 +158,35 @@ const PurchaseRequestForm = ({
     isLoadingOptions: isLoadingAreas,
   } = useSelect(AreaApi.basePath, 'id', 'name', 'search');
 
+  const {
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocations,
+    loadMore: loadMoreLocations,
+    hasMore: hasMoreLocations,
+  } = useSelect(LocationApi.basePath, 'id', 'name', '', {
+    area_id:
+      selectedArea != ''
+        ? selectedArea
+        : ((initialValues?.area?.id ?? '') as string),
+  });
+
   const {
     inputValue: warehouseSelectInputValue,
     setInputValue: setWarehouseSelectInputValue,
+    options: warehouseOptions,
     isLoadingOptions: isLoadingWarehouses,
-  } = useSelect(WarehouseApi.basePath, 'id', 'name', 'search');
+    loadMore: loadMoreWarehouses,
+    hasMore: hasMoreWarehouses,
+  } = useSelect(WarehouseApi.basePath, 'id', 'name', 'search', {
+    area_id:
+      selectedArea != ''
+        ? selectedArea
+        : ((initialValues?.area?.id ?? '') as string),
+    location_id:
+      selectedLocation != ''
+        ? selectedLocation
+        : ((initialValues?.location?.id ?? '') as string),
+  });
 
   // ===== FORM CONFIGURATION =====
   const formikInitialValues = useMemo<PurchaseRequestFormValues>(
@@ -267,70 +289,6 @@ const PurchaseRequestForm = ({
     return data;
   }, [supplierData]);
 
-  const locationsUrl = useMemo(() => {
-    const params = new URLSearchParams({
-      search: locationSelectInputValue,
-      ...(formik.values.area_id && formik.values.area_id > 0
-        ? { area_id: formik.values.area_id.toString() }
-        : {}),
-    });
-    return `${LocationApi.basePath}?${params.toString()}`;
-  }, [locationSelectInputValue, formik.values.area_id]);
-
-  const { data: locations, isLoading: isLoadingLocations } = useSWR(
-    locationsUrl,
-    LocationApi.getAllFetcher
-  );
-
-  const locationOptions = useMemo(() => {
-    if (!isResponseSuccess(locations)) return [];
-    return (
-      locations?.data.map((location) => ({
-        value: location.id,
-        label: location.name,
-      })) || []
-    );
-  }, [locations]);
-
-  const warehousesUrl = useMemo(() => {
-    const params = new URLSearchParams({ search: warehouseSelectInputValue });
-
-    if (formik.values.area_id && formik.values.area_id > 0) {
-      params.append('area_id', formik.values.area_id.toString());
-    }
-
-    if (formik.values.location_id && formik.values.location_id > 0) {
-      params.append('location_id', formik.values.location_id.toString());
-    }
-
-    return `${WarehouseApi.basePath}?${params.toString()}`;
-  }, [
-    warehouseSelectInputValue,
-    formik.values.area_id,
-    formik.values.location_id,
-  ]);
-
-  const { data: warehouses } = useSWR(
-    warehousesUrl,
-    WarehouseApi.getAllFetcher
-  );
-
-  const warehouseOptions = useMemo(() => {
-    if (!isResponseSuccess(warehouses)) return [];
-
-    return (
-      warehouses?.data.map((w) => ({
-        value: w.id,
-        label: w.name,
-        area: w.area?.name,
-        location:
-          'type' in w && (w.type === 'LOKASI' || w.type === 'KANDANG')
-            ? w.location?.name
-            : undefined,
-      })) || []
-    );
-  }, [warehouses]);
-
   const addPurchaseItem = () => {
     const newItems = [
       ...(formik.values.items || []),
@@ -407,6 +365,18 @@ const PurchaseRequestForm = ({
     }
   }, [formik.values.supplier_id]);
 
+  useEffect(() => {
+    if (type !== 'add' && initialValues) {
+      if (initialValues.area?.id) {
+        setSelectedArea(initialValues.area.id.toString());
+        setDisabledLocation(false);
+      }
+      if (initialValues.location?.id) {
+        setSelectedLocation(initialValues.location.id.toString());
+      }
+    }
+  }, [type, initialValues]);
+
   // ===== FORM HANDLERS =====
   const handleSupplierChange = useCallback(
     (val: OptionType | OptionType[] | null) => {
@@ -445,6 +415,16 @@ const PurchaseRequestForm = ({
       formik.setFieldValue('area_id', (area as OptionType)?.value || 0);
       formik.setFieldTouched('area', true);
       formik.setFieldValue('area', area);
+
+      setSelectedArea((area as OptionType)?.value as string);
+      setSelectedLocation('');
+      const disabled = (area as OptionType)?.value == null;
+      setDisabledLocation(disabled);
+
+      formik.setFieldTouched('location_id', false);
+      formik.setFieldValue('location_id', 0);
+      formik.setFieldTouched('location', false);
+      formik.setFieldValue('location', null);
     },
     []
   );
@@ -456,6 +436,8 @@ const PurchaseRequestForm = ({
       formik.setFieldValue('location_id', (location as OptionType)?.value || 0);
       formik.setFieldTouched('location', true);
       formik.setFieldValue('location', location);
+
+      setSelectedLocation((location as OptionType)?.value as string);
     },
     []
   );
@@ -596,10 +578,15 @@ const PurchaseRequestForm = ({
                 placeholder='Pilih Lokasi...'
                 value={formik.values.location}
                 onChange={handleLocationChange}
-                options={locationOptions}
+                options={
+                  selectedArea != '' || initialValues?.area?.id
+                    ? locationOptions
+                    : []
+                }
                 onInputChange={setLocationSelectInputValue}
                 isLoading={isLoadingLocations}
-                isDisabled={type === 'detail'}
+                onMenuScrollToBottom={loadMoreLocations}
+                isDisabled={type === 'detail' || disabledLocation}
                 isClearable={type !== 'detail'}
               />
 
@@ -713,6 +700,7 @@ const PurchaseRequestForm = ({
                           options={warehouseOptions}
                           onInputChange={setWarehouseSelectInputValue}
                           isLoading={isLoadingWarehouses}
+                          onMenuScrollToBottom={loadMoreWarehouses}
                           isError={
                             isRepeaterInputError(idx, 'warehouse_id').isError
                           }
@@ -732,9 +720,9 @@ const PurchaseRequestForm = ({
                           required
                           value={item.product ?? undefined}
                           onChange={(val) => {
-                            const product = val as ProductOptionType | null;
+                            const product = val as OptionType | null;
                             const productId =
-                              (product as ProductOptionType)?.value || 0;
+                              (product as OptionType)?.value || 0;
 
                             formik.setFieldTouched(
                               `items.${idx}.product`,
diff --git a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
index 72f9c474..47dbc8f0 100644
--- a/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderDetail.tsx
@@ -540,31 +540,6 @@ const PurchaseOrderDetail = ({
       accessorKey: 'travel_number',
       cell: (props) => props.row.original.travel_number || '-',
     },
-    {
-      header: 'Dokumen Surat Jalan',
-      accessorKey: 'travel_document_path',
-      cell: (props) => {
-        const documentPath = props.row.original.travel_document_path;
-        return documentPath ? (
-          <Button
-            color='primary'
-            className='w-fit min-w-32 flex items-center justify-start gap-1 px-2 py-1 text-sm'
-            href={documentPath}
-            target='_blank'
-            rel='noopener noreferrer'
-          >
-            <Icon
-              icon='material-symbols:file-open-outline'
-              width={16}
-              height={16}
-            />
-            Lihat Dokumen
-          </Button>
-        ) : (
-          '-'
-        );
-      },
-    },
     {
       header: 'No. Armada Pengangkut',
       accessorKey: 'vehicle_number',
@@ -588,7 +563,10 @@ const PurchaseOrderDetail = ({
     {
       header: 'Transport /Item',
       accessorKey: 'transport_per_item',
-      cell: (props) => formatCurrency(props.getValue() as number),
+      cell: (props) => {
+        const value = props.row.original.transport_per_item;
+        return value ? formatCurrency(value) : formatCurrency(0);
+      },
     },
   ];
 
@@ -723,8 +701,8 @@ const PurchaseOrderDetail = ({
                   </span>
                   <span className='text-gray-900 ml-3 break-all'>
                     :{' '}
-                    {purchaseData.items?.[0]?.warehouse?.type === 'LOKASI' &&
-                    purchaseData.items?.[0]?.warehouse?.location?.name
+                    {purchaseData.items?.[0]?.warehouse &&
+                    'location' in purchaseData.items[0].warehouse
                       ? purchaseData.items[0].warehouse.location.name
                       : '-'}
                   </span>
@@ -905,11 +883,29 @@ const PurchaseOrderDetail = ({
               Informasi Penerimaan Barang
             </h3>
             {canShowPenerimaanBarang && (
-              <RowDropdownOptions isLast2Rows>
-                <PenerimaanBarangDropdown
-                  onEdit={penerimaanBarangModal.openModal}
-                />
-              </RowDropdownOptions>
+              <div className='flex items-center gap-2'>
+                {goodsReceiptItems[0]?.travel_document_path && (
+                  <Button
+                    color='primary'
+                    className='w-fit min-w-32 flex items-center justify-start gap-1 p-1.5 text-sm'
+                    href={goodsReceiptItems[0].travel_document_path}
+                    target='_blank'
+                    rel='noopener noreferrer'
+                  >
+                    <Icon
+                      icon='material-symbols:file-open-outline'
+                      width={16}
+                      height={16}
+                    />
+                    Lihat Dokumen
+                  </Button>
+                )}
+                <RowDropdownOptions isLast2Rows>
+                  <PenerimaanBarangDropdown
+                    onEdit={penerimaanBarangModal.openModal}
+                  />
+                </RowDropdownOptions>
+              </div>
             )}
           </div>
           <div className='overflow-x-auto'>
diff --git a/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx b/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx
index 36aea9c7..aed154d0 100644
--- a/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx
+++ b/src/components/pages/purchase/order/PurchaseOrderInvoice.tsx
@@ -324,12 +324,14 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
                     PT LUMBUNG TELUR INDONESIA
                   </Text>
                   <Text>
-                    {purchaseData?.items?.[0]?.warehouse.type === 'LOKASI'
+                    {purchaseData?.items?.[0]?.warehouse &&
+                    'location' in purchaseData.items[0].warehouse
                       ? purchaseData.items[0].warehouse.location.name
                       : '-'}
                   </Text>
                   <Text>
-                    {purchaseData?.items?.[0]?.warehouse.type === 'LOKASI'
+                    {purchaseData?.items?.[0]?.warehouse &&
+                    'location' in purchaseData.items[0].warehouse
                       ? purchaseData.items[0].warehouse.location.address
                       : '-'}
                   </Text>
@@ -434,7 +436,7 @@ const PurchaseOrderInvoice = ({ data }: PurchaseOrderInvoiceProps) => {
                     </View>
                     <View style={pdfStyles.tableCell}>
                       <Text>
-                        {item.warehouse?.type === 'LOKASI'
+                        {item.warehouse && 'location' in item.warehouse
                           ? item.warehouse.location.address
                           : '-'}
                       </Text>
diff --git a/src/components/pages/report/DailyMarketingReportContent.tsx b/src/components/pages/report/DailyMarketingReportContent.tsx
index 3ddbd6cf..01c360d0 100644
--- a/src/components/pages/report/DailyMarketingReportContent.tsx
+++ b/src/components/pages/report/DailyMarketingReportContent.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { ChangeEventHandler, useState } from 'react';
+import { ChangeEventHandler, useEffect, useState } from 'react';
 import { pdf } from '@react-pdf/renderer';
 import toast from 'react-hot-toast';
 
@@ -28,7 +28,10 @@ import {
 import { Warehouse } from '@/types/api/master-data/warehouse';
 import { Customer } from '@/types/api/master-data/customer';
 import { MarketingReportApi } from '@/services/api/report/marketing-report';
-import { MARKETING_TYPE_OPTIONS } from '@/config/constant';
+import {
+  MARKETING_DATE_FILTER_TYPE_OPTIONS,
+  MARKETING_TYPE_OPTIONS,
+} from '@/config/constant';
 import { httpClient } from '@/services/http/client';
 import { BaseApiResponse } from '@/types/api/api-general';
 import {
@@ -84,6 +87,7 @@ const DailyMarketingReportContent = () => {
     setInputValue: setAreaInputValue,
     options: areaOptions,
     isLoadingOptions: isLoadingAreaOptions,
+    loadMore: loadMoreAreas,
   } = useSelect<Area>(AreaApi.basePath, 'id', 'name');
 
   const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -98,6 +102,7 @@ const DailyMarketingReportContent = () => {
     setInputValue: setLocationInputValue,
     options: locationOptions,
     isLoadingOptions: isLoadingLocationOptions,
+    loadMore: loadMoreLocations,
   } = useSelect<Location>(LocationApi.basePath, 'id', 'name');
 
   const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -115,6 +120,7 @@ const DailyMarketingReportContent = () => {
     setInputValue: setWarehouseInputValue,
     options: warehouseOptions,
     isLoadingOptions: isLoadingWarehouseOptions,
+    loadMore: loadMoreWarehouses,
   } = useSelect<Warehouse>(WarehouseApi.basePath, 'id', 'name');
 
   const warehouseChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -132,6 +138,7 @@ const DailyMarketingReportContent = () => {
     setInputValue: setCustomerInputValue,
     options: customerOptions,
     isLoadingOptions: isLoadingCustomerOptions,
+    loadMore: loadMoreCustomers,
   } = useSelect<Customer>(CustomerApi.basePath, 'id', 'name');
 
   const customerChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -150,6 +157,15 @@ const DailyMarketingReportContent = () => {
     updateFilter('end_date', e.target.value ? e.target.value : '');
   };
 
+  const [selectedMarketingDateFilterType, setSelectedMarketingDateFilterType] =
+    useState<OptionType | null>(null);
+  const marketingDateFilterTypeChangeHandler = (
+    val: OptionType | OptionType[] | null
+  ) => {
+    setSelectedMarketingDateFilterType(val as OptionType);
+    updateFilter('filter_by', val ? ((val as OptionType).value as string) : '');
+  };
+
   const [selectedMarketingType, setSelectedMarketingType] =
     useState<OptionType | null>(null);
   const marketingTypeChangeHandler = (
@@ -252,6 +268,23 @@ const DailyMarketingReportContent = () => {
     resetFilter();
   };
 
+  useEffect(() => {
+    if (
+      tableFilterState.filter_by === 'realization_date' ||
+      tableFilterState.filter_by === 'so_date'
+    ) {
+      setSelectedMarketingDateFilterType({
+        label:
+          tableFilterState.filter_by === 'realization_date'
+            ? 'Tanggal Realisasi'
+            : 'Tanggal SO',
+        value: tableFilterState.filter_by,
+      });
+    } else {
+      setSelectedMarketingDateFilterType(null);
+    }
+  }, [tableFilterState.filter_by]);
+
   return (
     <div className='w-full border border-gray-200 p-4'>
       <div>
@@ -269,6 +302,7 @@ const DailyMarketingReportContent = () => {
             value={selectedArea}
             onChange={areaChangeHandler}
             onInputChange={setAreaInputValue}
+            onMenuScrollToBottom={loadMoreAreas}
             isClearable
             className={{
               wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
@@ -283,6 +317,7 @@ const DailyMarketingReportContent = () => {
             value={selectedLocation}
             onChange={locationChangeHandler}
             onInputChange={setLocationInputValue}
+            onMenuScrollToBottom={loadMoreLocations}
             isClearable
             className={{
               wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
@@ -297,6 +332,7 @@ const DailyMarketingReportContent = () => {
             value={selectedWarehouse}
             onChange={warehouseChangeHandler}
             onInputChange={setWarehouseInputValue}
+            onMenuScrollToBottom={loadMoreWarehouses}
             isClearable
             className={{
               wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
@@ -311,6 +347,7 @@ const DailyMarketingReportContent = () => {
             value={selectedCustomer}
             onChange={customerChangeHandler}
             onInputChange={setCustomerInputValue}
+            onMenuScrollToBottom={loadMoreCustomers}
             isClearable
             className={{
               wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
@@ -341,6 +378,18 @@ const DailyMarketingReportContent = () => {
         </div>
 
         <div className='grid grid-cols-12 gap-4'>
+          <SelectInput
+            label='Filter Tanggal'
+            placeholder='Pilih Filter Tanggal'
+            options={MARKETING_DATE_FILTER_TYPE_OPTIONS}
+            value={selectedMarketingDateFilterType}
+            onChange={marketingDateFilterTypeChangeHandler}
+            isClearable
+            className={{
+              wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
+            }}
+          />
+
           <SelectInput
             label='Tipe Marketing'
             placeholder='Pilih Tipe Marketing'
diff --git a/src/components/pages/report/DailyMarketingsTable.tsx b/src/components/pages/report/DailyMarketingsTable.tsx
index 94da96f8..d270d6d7 100644
--- a/src/components/pages/report/DailyMarketingsTable.tsx
+++ b/src/components/pages/report/DailyMarketingsTable.tsx
@@ -71,19 +71,22 @@ const DailyMarketingsTable = ({
       cell: (props) => `${props.row.original.aging_days} hari`,
     },
     {
-      accessorKey: 'warehouse.name',
+      accessorKey: 'warehouse',
       header: 'Gudang',
+      cell: ({ row }) => row.original.warehouse.name,
     },
     {
-      accessorKey: 'customer.name',
+      accessorKey: 'customer',
       header: 'Pelanggan',
+      cell: ({ row }) => row.original.customer.name,
     },
     {
       accessorKey: 'do_number',
       header: 'No. DO',
+      enableSorting: false,
     },
     {
-      accessorKey: 'sales',
+      accessorKey: 'sales_person',
       header: 'Sales/Marketing',
       cell: (props) => props.row.original.sales.name,
     },
@@ -97,10 +100,12 @@ const DailyMarketingsTable = ({
     {
       accessorKey: 'marketing_type',
       header: 'Marketing Type',
+      enableSorting: false,
     },
     {
-      accessorKey: 'product.name',
+      accessorKey: 'product',
       header: 'Produk',
+      cell: ({ row }) => row.original.product.name,
     },
     {
       accessorKey: 'qty',
@@ -115,12 +120,12 @@ const DailyMarketingsTable = ({
       },
     },
     {
-      accessorKey: 'average_weight_kg',
+      accessorKey: 'average_weight',
       header: 'Bobot Rata-Rata (Kg)',
       cell: (props) => formatNumber(props.row.original.average_weight_kg),
     },
     {
-      accessorKey: 'total_weight_kg',
+      accessorKey: 'total_weight',
       header: 'Bobot Total (Kg)',
       cell: (props) => formatNumber(props.row.original.total_weight_kg),
       footer: () => {
@@ -132,12 +137,12 @@ const DailyMarketingsTable = ({
       },
     },
     {
-      accessorKey: 'sales_price_per_kg',
+      accessorKey: 'sales_price',
       header: 'Harga Jual (Rp)',
       cell: (props) => formatCurrency(props.row.original.sales_price_per_kg),
     },
     {
-      accessorKey: 'hpp_price_per_kg',
+      accessorKey: 'hpp_price',
       header: 'HPP (Rp)',
       cell: (props) => formatCurrency(props.row.original.hpp_price_per_kg),
       footer: () => {
@@ -163,6 +168,8 @@ const DailyMarketingsTable = ({
   ];
 
   useEffect(() => {
+    // console.log({ sorting });
+
     if (sorting.length === 1) {
       onFilterByChange(sorting[0].id);
       onSortByChange(sorting[0].desc ? 'desc' : 'asc');
diff --git a/src/components/pages/report/MarketingReportContent.tsx b/src/components/pages/report/MarketingReportContent.tsx
index d54c935a..3ebacecb 100644
--- a/src/components/pages/report/MarketingReportContent.tsx
+++ b/src/components/pages/report/MarketingReportContent.tsx
@@ -33,7 +33,7 @@ const MarketingReportContent = () => {
   const [activeTab, setActiveTab] = useState<string>('daily');
 
   return (
-    <section className='w-full max-w-7xl pb-16'>
+    <section className='w-full max-w-full pb-16'>
       <Tabs
         activeTabId={activeTab}
         onTabChange={setActiveTab}
diff --git a/src/components/pages/report/expense/ReportExpenseTable.tsx b/src/components/pages/report/expense/ReportExpenseTable.tsx
index c34072a2..c809c153 100644
--- a/src/components/pages/report/expense/ReportExpenseTable.tsx
+++ b/src/components/pages/report/expense/ReportExpenseTable.tsx
@@ -26,6 +26,15 @@ import MenuItem from '@/components/menu/MenuItem';
 import * as XLSX from 'xlsx';
 import { generateReportExpensePDF } from './pdf/ReportExpenseExport';
 import toast from 'react-hot-toast';
+import {
+  KandangApi,
+  LocationApi,
+  NonstockApi,
+  SupplierApi,
+} from '@/services/api/master-data';
+import { Supplier } from '@/types/api/master-data/supplier';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { Nonstock } from '@/types/api/master-data/nonstock';
 
 const ReportExpenseTable = () => {
   // ===== STATE MANAGEMENT =====
@@ -64,16 +73,33 @@ const ReportExpenseTable = () => {
   });
 
   // ===== SELECT OPTIONS =====
-  const { options: optionsLocation, isLoadingOptions: isLoadingLocation } =
-    useSelect(`/master-data/locations`, 'id', 'name');
-  const { options: optionsSupplier, isLoadingOptions: isLoadingSupplier } =
-    useSelect(`/master-data/suppliers`, 'id', 'name');
-  const { options: optionsKandang, isLoadingOptions: isLoadingKandang } =
-    useSelect(`/master-data/kandangs`, 'id', 'name', '', {
-      location_id: filterState.location_id,
-    });
-  const { options: optionsNonstock, isLoadingOptions: isLoadingNonstock } =
-    useSelect(`/master-data/nonstocks`, 'id', 'name');
+  const {
+    setInputValue: setLocationInputValue,
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocationOptions,
+    loadMore: loadMoreLocations,
+  } = useSelect<Location>(LocationApi.basePath, 'id', 'name');
+
+  const {
+    setInputValue: setSupplierInputValue,
+    options: supplierOptions,
+    isLoadingOptions: isLoadingSupplierOptions,
+    loadMore: loadMoreSuppliers,
+  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name');
+
+  const {
+    setInputValue: setKandangInputValue,
+    options: kandangOptions,
+    isLoadingOptions: isLoadingKandangOptions,
+    loadMore: loadMoreKandangs,
+  } = useSelect<Kandang>(KandangApi.basePath, 'id', 'name');
+
+  const {
+    setInputValue: setNonstockInputValue,
+    options: nonstockOptions,
+    isLoadingOptions: isLoadingNonstockOptions,
+    loadMore: loadMoreNonstocks,
+  } = useSelect<Nonstock>(NonstockApi.basePath, 'id', 'name');
 
   const categoryOptions = useMemo(
     () => [
@@ -86,31 +112,31 @@ const ReportExpenseTable = () => {
   // Mendapatkan value option select dari filter state
   const selectedLocation = useMemo(
     () =>
-      optionsLocation.find(
+      locationOptions.find(
         (opt) => String(opt.value) === filterState.location_id
       ) || null,
-    [optionsLocation, filterState.location_id]
+    [locationOptions, filterState.location_id]
   );
   const selectedSupplier = useMemo(
     () =>
-      optionsSupplier.find(
+      supplierOptions.find(
         (opt) => String(opt.value) === filterState.supplier_id
       ) || null,
-    [optionsSupplier, filterState.supplier_id]
+    [supplierOptions, filterState.supplier_id]
   );
   const selectedKandang = useMemo(
     () =>
-      optionsKandang.find(
+      kandangOptions.find(
         (opt) => String(opt.value) === filterState.kandang_id
       ) || null,
-    [optionsKandang, filterState.kandang_id]
+    [kandangOptions, filterState.kandang_id]
   );
   const selectedNonstock = useMemo(
     () =>
-      optionsNonstock.find(
+      nonstockOptions.find(
         (opt) => String(opt.value) === filterState.nonstock_id
       ) || null,
-    [optionsNonstock, filterState.nonstock_id]
+    [nonstockOptions, filterState.nonstock_id]
   );
   const selectedCategory = useMemo(
     () =>
@@ -756,38 +782,46 @@ const ReportExpenseTable = () => {
           <SelectInput
             isClearable
             label='Lokasi'
-            options={optionsLocation}
-            isLoading={isLoadingLocation}
+            options={locationOptions}
+            isLoading={isLoadingLocationOptions}
             placeholder='Lokasi'
             value={selectedLocation}
             onChange={locationChangeHandler}
+            onInputChange={setLocationInputValue}
+            onMenuScrollToBottom={loadMoreLocations}
           />
           <SelectInput
             isClearable
             label='Kandang'
-            options={optionsKandang}
-            isLoading={isLoadingKandang}
+            options={kandangOptions}
+            isLoading={isLoadingKandangOptions}
             placeholder='Kandang'
             value={selectedKandang}
             onChange={kandangChangeHandler}
+            onInputChange={setKandangInputValue}
+            onMenuScrollToBottom={loadMoreKandangs}
           />
           <SelectInput
             isClearable
             label='Supplier'
-            options={optionsSupplier}
-            isLoading={isLoadingSupplier}
+            options={supplierOptions}
+            isLoading={isLoadingSupplierOptions}
             placeholder='Supplier'
             value={selectedSupplier}
             onChange={supplierChangeHandler}
+            onInputChange={setSupplierInputValue}
+            onMenuScrollToBottom={loadMoreSuppliers}
           />
           <SelectInput
             isClearable
             label='Produk'
-            options={optionsNonstock}
-            isLoading={isLoadingNonstock}
+            options={nonstockOptions}
+            isLoading={isLoadingNonstockOptions}
             placeholder='Produk'
             value={selectedNonstock}
             onChange={nonstockChangeHandler}
+            onInputChange={setNonstockInputValue}
+            onMenuScrollToBottom={loadMoreNonstocks}
           />
           <SelectInput
             isClearable
diff --git a/src/components/pages/report/finance/FinanceTabs.tsx b/src/components/pages/report/finance/FinanceTabs.tsx
index aaaae985..58d1e78b 100644
--- a/src/components/pages/report/finance/FinanceTabs.tsx
+++ b/src/components/pages/report/finance/FinanceTabs.tsx
@@ -8,16 +8,16 @@ const FinanceTabs = () => {
   const tabs = [
     {
       id: '1',
-      label: 'Kontrol Pembayaran Customer',
-
-      content: <CustomerPaymentTab />,
-    },
-    {
-      id: '2',
       label: 'Rekapitulasi Hutang Ke Supplier',
 
       content: <DebtSupplierTab />,
     },
+    {
+      id: '2',
+      label: 'Kontrol Pembayaran Customer',
+
+      content: <CustomerPaymentTab />,
+    },
   ];
 
   return (
diff --git a/src/components/pages/report/finance/export/CustomerPaymentExportPDF.tsx b/src/components/pages/report/finance/export/CustomerPaymentExportPDF.tsx
index 88c556de..aa04b4f0 100644
--- a/src/components/pages/report/finance/export/CustomerPaymentExportPDF.tsx
+++ b/src/components/pages/report/finance/export/CustomerPaymentExportPDF.tsx
@@ -136,41 +136,136 @@ const pdfStyles = StyleSheet.create({
     backgroundColor: '#F0F0F0',
     fontWeight: 'bold',
   },
+  badge: {
+    backgroundColor: '#1f74bf',
+    color: '#FFFFFF',
+    padding: 2,
+    borderRadius: 2,
+    fontSize: 7,
+    fontWeight: 'bold',
+    alignSelf: 'center',
+    marginRight: 4,
+  },
+  badgeLunas: {
+    backgroundColor: '#1f74bf',
+    color: '#FFFFFF',
+  },
+  badgeBelumLunas: {
+    backgroundColor: '#F97316',
+    color: '#FFFFFF',
+  },
+  textError: {
+    color: '#DC2626',
+  },
+  parameterBadge: {
+    backgroundColor: '#F5F5F5',
+    color: '#333333',
+    padding: 4,
+    borderRadius: 4,
+    fontSize: 8,
+    marginRight: 8,
+    marginBottom: 4,
+  },
+  parameterContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginBottom: 8,
+  },
 });
 
 interface CustomerPaymentExportPDFParams {
   data: CustomerPaymentReport[];
+  params?: {
+    customer_name?: string;
+    // TODO: Uncomment when BE is ready
+    // sales?: string;
+    start_date?: string;
+    end_date?: string;
+    // TODO: Uncomment when BE is ready
+    // filter_by?: string;
+  };
 }
 
+const getParameterText = (
+  params?: CustomerPaymentExportPDFParams['params']
+) => {
+  const paramsText = [];
+
+  if (params?.customer_name) {
+    paramsText.push(`Customer: ${params.customer_name}`);
+  } else {
+    paramsText.push('Semua Customer');
+  }
+
+  // TODO: Uncomment when BE is ready
+  // if (params?.sales) {
+  //   paramsText.push(`Sales: ${params.sales}`);
+  // }
+
+  if (params?.start_date && params?.end_date) {
+    const startDate = formatDate(params.start_date, 'DD MMM YYYY');
+    const endDate = formatDate(params.end_date, 'DD MMM YYYY');
+    paramsText.push(`Periode: ${startDate} - ${endDate}`);
+  } else if (params?.start_date) {
+    const startDate = formatDate(params.start_date, 'DD MMM YYYY');
+    paramsText.push(`Tanggal: ${startDate}`);
+  }
+
+  const currentDate = formatDate(new Date(), 'DD MMM YYYY HH:mm');
+  paramsText.push(`Dicetak: ${currentDate}`);
+
+  return paramsText;
+};
+
 const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
   return (
     <Document>
       {params.data.map((customerReport, customerIndex) => (
         <Page
           key={customerIndex}
-          size='A4'
+          size='A3'
           orientation='landscape'
           style={pdfStyles.page}
         >
-          {/* Title and Customer Info */}
+          {/* Title and Parameters */}
           <View style={pdfStyles.titleSection}>
             <Text style={pdfStyles.mainTitle}>
               Laporan &gt; Kontrol Pembayaran Customer
             </Text>
+            <View style={pdfStyles.parameterContainer}>
+              <View style={pdfStyles.parameterBadge}>
+                <Text>
+                  Periode:{' '}
+                  {params.params?.start_date
+                    ? formatDate(params.params.start_date, 'DD MMM YYYY')
+                    : '-'}{' '}
+                  s.d{' '}
+                  {params.params?.end_date
+                    ? formatDate(params.params.end_date, 'DD MMM YYYY')
+                    : '-'}
+                </Text>
+              </View>
+              {/* TODO: Uncomment when BE is ready */}
+              {/* <View style={pdfStyles.parameterBadge}>
+                <Text>Filter Tanggal: Tanggal DO</Text>
+              </View> */}
+              <View style={pdfStyles.parameterBadge}>
+                <Text>
+                  Customer: {params.params?.customer_name || 'Semua Customer'}
+                </Text>
+              </View>
+              <View style={pdfStyles.parameterBadge}>
+                <Text>
+                  Dicetak: {formatDate(new Date(), 'DD MMM YYYY HH:mm')}
+                </Text>
+              </View>
+            </View>
             <Text style={pdfStyles.supplierTitle}>
               {customerReport.customer.name}
             </Text>
             <Text style={pdfStyles.supplierInfo}>
-              {customerReport.customer.address || ''}
+              Alamat: {customerReport.customer.address || '-'}
             </Text>
-            {customerReport.summary && (
-              <Text style={pdfStyles.supplierInfo}>
-                Total Saldo Piutang:{' '}
-                {formatCurrency(
-                  customerReport.summary.total_accounts_receivable
-                )}
-              </Text>
-            )}
           </View>
 
           {/* Table */}
@@ -181,41 +276,35 @@ const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
                 <Text>No</Text>
               </View>
               <View style={[pdfStyles.tableCellHeader, { flex: 1.2 }]}>
-                <Text>Tgl DO/Bayar</Text>
+                <Text>Tanggal DO</Text>
               </View>
               <View style={[pdfStyles.tableCellHeader, { flex: 1.2 }]}>
-                <Text>Tgl Realisasi</Text>
+                <Text>Tanggal Realisasi</Text>
               </View>
               <View style={[pdfStyles.tableCellHeader, { flex: 0.8 }]}>
                 <Text>Aging</Text>
               </View>
-              <View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
+              <View style={[pdfStyles.tableCellHeader, { flex: 1.5 }]}>
                 <Text>Referensi</Text>
               </View>
               <View style={[pdfStyles.tableCellHeader, { flex: 1.2 }]}>
-                <Text>No. Polisi</Text>
+                <Text>No Polisi</Text>
               </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 0.8 }]}>
                 <Text>Qty</Text>
               </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1 }]}>
-                <Text>Berat (Kg)</Text>
+                <Text>Berat</Text>
               </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 0.8 }]}>
-                <Text>AVG</Text>
+                <Text>Rata-Rata</Text>
               </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
-                <Text>Harga Awal</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1 }]}>
-                <Text>CN</Text>
+                <Text>Harga/Unit</Text>
               </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
                 <Text>Harga Akhir</Text>
               </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 0.8 }]}>
-                <Text>PPN (%)</Text>
-              </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
                 <Text>Total</Text>
               </View>
@@ -223,10 +312,10 @@ const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
                 <Text>Pembayaran</Text>
               </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
-                <Text>Saldo Piutang</Text>
+                <Text>Saldo</Text>
               </View>
               <View style={[pdfStyles.tableCellHeader, { flex: 1.5 }]}>
-                <Text>Ket</Text>
+                <Text>Keterangan</Text>
               </View>
               <View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
                 <Text>Pengambilan</Text>
@@ -252,13 +341,15 @@ const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
                 </View>
                 <View style={[pdfStyles.tableCellCenter, { flex: 1.2 }]}>
                   <Text>
-                    {item.do_date ? formatDate(item.do_date, 'DD MMM YY') : '-'}
+                    {item.trans_date
+                      ? formatDate(item.trans_date, 'DD MMM YY')
+                      : '-'}
                   </Text>
                 </View>
                 <View style={[pdfStyles.tableCellCenter, { flex: 1.2 }]}>
                   <Text>
-                    {item.realization_date
-                      ? formatDate(item.realization_date, 'DD MMM YY')
+                    {item.delivery_date
+                      ? formatDate(item.delivery_date, 'DD MMM YY')
                       : '-'}
                   </Text>
                 </View>
@@ -267,11 +358,15 @@ const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
                     {item.aging_day ? formatNumber(item.aging_day) : '-'} hari
                   </Text>
                 </View>
-                <View style={[pdfStyles.tableCell, { flex: 1 }]}>
+                <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
                   <Text>{item.reference || '-'}</Text>
                 </View>
                 <View style={[pdfStyles.tableCell, { flex: 1.2 }]}>
-                  <Text>{item.vehicle_plate || '-'}</Text>
+                  <Text>
+                    {Array.isArray(item.vehicle_numbers)
+                      ? item.vehicle_numbers.join(', ')
+                      : item.vehicle_numbers || '-'}
+                  </Text>
                 </View>
                 <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
                   <Text>{formatNumber(item.qty)}</Text>
@@ -283,34 +378,49 @@ const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
                   <Text>{formatNumber(item.average_weight)}</Text>
                 </View>
                 <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                  <Text>{formatCurrency(item.price)}</Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
-                  <Text>{formatCurrency(item.credit_note)}</Text>
+                  <Text>{formatCurrency(item.unit_price)}</Text>
                 </View>
                 <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
                   <Text>{formatCurrency(item.final_price)}</Text>
                 </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
-                  <Text>{formatNumber(item.ppn)}%</Text>
+                <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
+                  <Text>{formatCurrency(item.total_price)}</Text>
                 </View>
                 <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                  <Text>{formatCurrency(item.total)}</Text>
+                  <Text>{formatCurrency(item.payment_amount)}</Text>
                 </View>
                 <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                  <Text>{formatCurrency(item.payment)}</Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                  <Text>{formatCurrency(item.accounts_receivable)}</Text>
+                  <Text style={pdfStyles.textError}>
+                    {formatCurrency(item.accounts_receivable)}
+                  </Text>
                 </View>
                 <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
-                  <Text>{item.notes || '-'}</Text>
+                  {item.status ? (
+                    <View
+                      style={[
+                        pdfStyles.badge,
+                        item.status === 'LUNAS'
+                          ? pdfStyles.badgeLunas
+                          : pdfStyles.badgeBelumLunas,
+                      ]}
+                    >
+                      <Text>
+                        {item.status === 'LUNAS' ? 'Lunas' : 'Belum Lunas'}
+                      </Text>
+                    </View>
+                  ) : (
+                    <Text>-</Text>
+                  )}
                 </View>
                 <View style={[pdfStyles.tableCell, { flex: 1 }]}>
-                  <Text>{item.pickup_info || '-'}</Text>
+                  <Text>
+                    {Array.isArray(item.pickup_info)
+                      ? item.pickup_info.join(', ')
+                      : item.pickup_info || '-'}
+                  </Text>
                 </View>
                 <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
-                  <Text>{item.sales_marketing || '-'}</Text>
+                  <Text>{item.sales_person || '-'}</Text>
                 </View>
               </View>
             ))}
@@ -330,7 +440,7 @@ const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
                 <View style={[pdfStyles.tableCell, { flex: 0.8 }]}>
                   <Text></Text>
                 </View>
-                <View style={[pdfStyles.tableCell, { flex: 1 }]}>
+                <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
                   <Text></Text>
                 </View>
                 <View style={[pdfStyles.tableCell, { flex: 1.2 }]}>
@@ -348,25 +458,13 @@ const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
                   <Text></Text>
                 </View>
                 <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                  <Text>
-                    {formatCurrency(
-                      customerReport.summary.total_initial_amount
-                    )}
-                  </Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
-                  <Text>
-                    {formatCurrency(customerReport.summary.total_credit_note)}
-                  </Text>
+                  <Text></Text>
                 </View>
                 <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
                   <Text>
                     {formatCurrency(customerReport.summary.total_final_amount)}
                   </Text>
                 </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
-                  <Text></Text>
-                </View>
                 <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
                   <Text>
                     {formatCurrency(customerReport.summary.total_grand_amount)}
@@ -378,7 +476,7 @@ const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
                   </Text>
                 </View>
                 <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                  <Text>
+                  <Text style={pdfStyles.textError}>
                     {formatCurrency(
                       customerReport.summary.total_accounts_receivable
                     )}
diff --git a/src/components/pages/report/finance/export/CustomerPaymentExportXLSX.tsx b/src/components/pages/report/finance/export/CustomerPaymentExportXLSX.tsx
index d51aa3b7..830df633 100644
--- a/src/components/pages/report/finance/export/CustomerPaymentExportXLSX.tsx
+++ b/src/components/pages/report/finance/export/CustomerPaymentExportXLSX.tsx
@@ -24,30 +24,30 @@ export const generateCustomerPaymentExcel = (
     const excelData: { [key: string]: string | number }[] = customerData.map(
       (item, index) => ({
         No: index + 1,
-        'Tanggal DO/Bayar': item.do_date
-          ? formatDate(item.do_date, 'DD MMM YYYY')
+        'Tanggal DO/Bayar': item.trans_date
+          ? formatDate(item.trans_date, 'DD MMM YYYY')
           : '',
-        'Tanggal Realisasi': item.realization_date
-          ? formatDate(item.realization_date, 'DD MMM YYYY')
+        'Tanggal Realisasi': item.delivery_date
+          ? formatDate(item.delivery_date, 'DD MMM YYYY')
           : '',
         Aging: formatNumber(item.aging_day || 0),
         Referensi: item.reference || '',
-        'Nomor Polisi': Array.isArray(item.vehicle_plate)
-          ? item.vehicle_plate.join(', ')
+        'Nomor Polisi': Array.isArray(item.vehicle_numbers)
+          ? item.vehicle_numbers.join(', ')
           : '',
         'Ekor/Qty': formatNumber(item.qty || 0),
         'Berat (Kg)': formatNumber(item.weight || 0),
         AVG: formatNumber(item.average_weight || 0),
-        'Harga Awal': formatCurrency(item.price || 0),
-        CN: formatCurrency(item.credit_note || 0),
+        'Harga/Unit': formatCurrency(item.unit_price || 0),
         'Harga Akhir': formatCurrency(item.final_price || 0),
-        'PPN (%)': formatNumber(item.ppn || 0),
-        Total: formatCurrency(item.total || 0),
-        Pembayaran: formatCurrency(item.payment || 0),
+        Total: formatCurrency(item.total_price || 0),
+        Pembayaran: formatCurrency(item.payment_amount || 0),
         'Saldo Piutang': formatCurrency(item.accounts_receivable || 0),
-        Keterangan: item.notes || '',
-        Pengambilan: item.pickup_info || '',
-        'Sales/Marketing': item.sales_marketing || '',
+        Keterangan: item.status || '',
+        Pengambilan: Array.isArray(item.pickup_info)
+          ? item.pickup_info.join(', ')
+          : '',
+        'Sales/Marketing': item.sales_person || '',
       })
     );
 
@@ -62,14 +62,10 @@ export const generateCustomerPaymentExcel = (
         'Ekor/Qty': formatNumber(customerReport.summary.total_qty || 0),
         'Berat (Kg)': formatNumber(customerReport.summary.total_weight || 0),
         AVG: '',
-        'Harga Awal': formatCurrency(
-          customerReport.summary.total_initial_amount || 0
-        ),
-        CN: formatCurrency(customerReport.summary.total_credit_note || 0),
+        'Harga/Unit': '',
         'Harga Akhir': formatCurrency(
           customerReport.summary.total_final_amount || 0
         ),
-        'PPN (%)': '',
         Total: formatCurrency(customerReport.summary.total_grand_amount || 0),
         Pembayaran: formatCurrency(customerReport.summary.total_payment || 0),
         'Saldo Piutang': formatCurrency(
@@ -93,10 +89,8 @@ export const generateCustomerPaymentExcel = (
       { wch: 10 }, // Ekor/Qty
       { wch: 12 }, // Berat
       { wch: 10 }, // AVG
-      { wch: 15 }, // Harga Awal
-      { wch: 10 }, // CN
+      { wch: 15 }, // Harga/Unit
       { wch: 15 }, // Harga Akhir
-      { wch: 10 }, // PPN
       { wch: 15 }, // Total
       { wch: 15 }, // Pembayaran
       { wch: 15 }, // Saldo Piutang
diff --git a/src/components/pages/report/finance/export/DebtSupllierExportPDF.tsx b/src/components/pages/report/finance/export/DebtSupllierExportPDF.tsx
index 7f6fa45b..869430b0 100644
--- a/src/components/pages/report/finance/export/DebtSupllierExportPDF.tsx
+++ b/src/components/pages/report/finance/export/DebtSupllierExportPDF.tsx
@@ -18,6 +18,47 @@ Font.register({
   src: 'helvetica',
 });
 
+// Status color mappings (same as in DebtSupplierTab)
+const dueStatusColors: Record<
+  string,
+  { bg: string; text: string; border: string }
+> = {
+  'Sudah Jatuh Tempo': { bg: '#FEE2E2', text: '#991B1B', border: '#F87171' }, // error/red
+  'Belum Jatuh Tempo': { bg: '#D1FAE5', text: '#065F46', border: '#34D399' }, // success/green
+  'Mendekati Jatuh Tempo': {
+    bg: '#FEF3C7',
+    text: '#92400E',
+    border: '#FBBF24',
+  }, // warning/yellow
+};
+
+const paymentStatusColors: Record<
+  string,
+  { bg: string; text: string; border: string }
+> = {
+  'Belum Lunas': { bg: '#FEF3C7', text: '#92400E', border: '#FBBF24' }, // warning/yellow
+  Lunas: { bg: '#DBEAFE', text: '#1E40AF', border: '#60A5FA' }, // primary/blue
+  Pembayaran: { bg: '#D1FAE5', text: '#065F46', border: '#34D399' }, // success/green
+};
+
+/**
+ * Get badge style for PDF rendering
+ * @param statusText - The status text
+ * @param type - Type of status: 'due' or 'payment'
+ * @returns Style object with background and text colors
+ */
+const getPDFBadgeStyle = (
+  statusText: string,
+  type: 'due' | 'payment' = 'payment'
+) => {
+  const colors =
+    type === 'due'
+      ? dueStatusColors[statusText]
+      : paymentStatusColors[statusText];
+
+  return colors || { bg: '#F3F4F6', text: '#374151', border: '#D1D5DB' }; // neutral fallback
+};
+
 const pdfStyles = StyleSheet.create({
   page: {
     fontSize: 10,
@@ -136,10 +177,40 @@ const pdfStyles = StyleSheet.create({
     backgroundColor: '#F0F0F0',
     fontWeight: 'bold',
   },
+  badge: {
+    paddingVertical: 2,
+    paddingHorizontal: 4,
+    borderRadius: 12,
+    fontSize: 5,
+    fontWeight: 'bold',
+    borderWidth: 1,
+    textAlign: 'center',
+    whiteSpace: 'nowrap',
+  },
+  parameterBadge: {
+    backgroundColor: '#F5F5F5',
+    color: '#333333',
+    padding: 4,
+    borderRadius: 4,
+    fontSize: 8,
+    marginRight: 8,
+    marginBottom: 4,
+  },
+  parameterContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginBottom: 8,
+  },
 });
 
 interface DebtSupplierExportPDFParams {
   data: DebtSupplier[];
+  params?: {
+    supplier_name?: string;
+    start_date?: string;
+    end_date?: string;
+    filter_by?: string;
+  };
 }
 
 const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
@@ -157,9 +228,50 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
             <Text style={pdfStyles.mainTitle}>
               Laporan &gt; Rekapitulasi Hutang ke Supplier
             </Text>
+            <View style={pdfStyles.parameterContainer}>
+              <View style={pdfStyles.parameterBadge}>
+                <Text>
+                  Periode:{' '}
+                  {params.params?.start_date
+                    ? formatDate(params.params.start_date, 'DD MMM YYYY')
+                    : '-'}{' '}
+                  s.d{' '}
+                  {params.params?.end_date
+                    ? formatDate(params.params.end_date, 'DD MMM YYYY')
+                    : '-'}
+                </Text>
+              </View>
+              {params.params?.filter_by && (
+                <View style={pdfStyles.parameterBadge}>
+                  <Text>
+                    Filter Tanggal:{' '}
+                    {params.params.filter_by === 'po_date'
+                      ? 'Tanggal PO'
+                      : params.params.filter_by === 'received_date'
+                        ? 'Tanggal Terima'
+                        : params.params.filter_by === 'due_date'
+                          ? 'Tanggal Jatuh Tempo'
+                          : params.params.filter_by}
+                  </Text>
+                </View>
+              )}
+              <View style={pdfStyles.parameterBadge}>
+                <Text>
+                  Supplier: {params.params?.supplier_name || 'Semua Supplier'}
+                </Text>
+              </View>
+              <View style={pdfStyles.parameterBadge}>
+                <Text>
+                  Dicetak: {formatDate(new Date(), 'DD MMM YYYY HH:mm')}
+                </Text>
+              </View>
+            </View>
             <Text style={pdfStyles.supplierTitle}>
               {supplierReport.supplier.name}
             </Text>
+            <Text style={pdfStyles.supplierInfo}>
+              {supplierReport.supplier.category}
+            </Text>
           </View>
 
           {/* Table */}
@@ -176,7 +288,7 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
                 <Text>No. PO</Text>
               </View>
               <View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
-                <Text>Tgl Terima</Text>
+                <Text>Tgl Terima/Bayar</Text>
               </View>
               <View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
                 <Text>Tgl PO</Text>
@@ -191,21 +303,21 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
                 <Text>Gudang</Text>
               </View>
               <View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
-                <Text>Tgl Jatuh Tempo</Text>
+                <Text>Jatuh Tempo</Text>
               </View>
-              <View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
+              <View style={[pdfStyles.tableCellHeader, { flex: 2 }]}>
                 <Text>Status Jatuh Tempo</Text>
               </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.5 }]}>
-                <Text>Total Harga</Text>
+                <Text>Nominal Pembelian (Rp)</Text>
               </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.5 }]}>
-                <Text>Pembayaran</Text>
+                <Text>Pembayaran (Rp)</Text>
               </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.5 }]}>
-                <Text>Hutang</Text>
+                <Text>Sisa Saldo Hutang (Rp)</Text>
               </View>
-              <View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
+              <View style={[pdfStyles.tableCellHeader, { flex: 1.2 }]}>
                 <Text>Status</Text>
               </View>
               <View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
@@ -213,6 +325,67 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
               </View>
             </View>
 
+            {/* Initial Balance Row */}
+            <View style={[pdfStyles.tableRow, pdfStyles.tableBorderBottom]}>
+              <View style={[pdfStyles.tableCellNo, { flex: 0.5 }]}>
+                <Text></Text> {/* NO */}
+              </View>
+              <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
+                <Text></Text> {/* No. PR */}
+              </View>
+              <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
+                <Text></Text> {/* No. PO */}
+              </View>
+              <View style={[pdfStyles.tableCellCenter, { flex: 1 }]}>
+                <Text></Text> {/* Tgl Terima/Bayar */}
+              </View>
+              <View style={[pdfStyles.tableCellCenter, { flex: 1 }]}>
+                <Text></Text> {/* Tgl PO */}
+              </View>
+              <View style={[pdfStyles.tableCellCenter, { flex: 0.6 }]}>
+                <Text></Text> {/* Aging */}
+              </View>
+              <View style={[pdfStyles.tableCell, { flex: 1 }]}>
+                <Text></Text> {/* Area */}
+              </View>
+              <View style={[pdfStyles.tableCell, { flex: 1 }]}>
+                <Text></Text> {/* Gudang */}
+              </View>
+              <View style={[pdfStyles.tableCellCenter, { flex: 1 }]}>
+                <Text></Text> {/* Jatuh Tempo */}
+              </View>
+              <View style={[pdfStyles.tableCell, { flex: 2 }]}>
+                <Text></Text> {/* Status Jatuh Tempo */}
+              </View>
+              <View style={[pdfStyles.tableCellRight, { flex: 1.5 }]}>
+                <Text></Text> {/* Nominal Pembelian (Rp) */}
+              </View>
+              <View style={[pdfStyles.tableCellRight, { flex: 1.5 }]}>
+                <Text></Text> {/* Pembayaran (Rp) */}
+              </View>
+              <View
+                style={[
+                  pdfStyles.tableCellRight,
+                  {
+                    flex: 1.5,
+                    color: supplierReport.initial_balance < 0 ? 'red' : 'black',
+                  },
+                ]}
+              >
+                <Text>
+                  {' '}
+                  {/* Sisa Saldo Hutang (Rp) */}
+                  {formatCurrency(supplierReport.initial_balance || 0)}
+                </Text>
+              </View>
+              <View style={[pdfStyles.tableCell, { flex: 1.2 }]}>
+                <Text></Text> {/* Status */}
+              </View>
+              <View style={[pdfStyles.tableCell, { flex: 1 }]}>
+                <Text></Text> {/* No. Perjalanan */}
+              </View>
+            </View>
+
             {/* Table Body */}
             {supplierReport.rows.map((item, index) => (
               <View
@@ -269,8 +442,32 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
                       : '-'}
                   </Text>
                 </View>
-                <View style={[pdfStyles.tableCell, { flex: 1 }]}>
-                  <Text>{item.due_status || '-'}</Text>
+                <View style={[pdfStyles.tableCell, { flex: 2 }]}>
+                  {item.due_status && item.due_status !== '-' ? (
+                    <View
+                      style={[
+                        pdfStyles.badge,
+                        {
+                          backgroundColor: getPDFBadgeStyle(
+                            item.due_status,
+                            'due'
+                          ).bg,
+                          borderColor: getPDFBadgeStyle(item.due_status, 'due')
+                            .border,
+                        },
+                      ]}
+                    >
+                      <Text
+                        style={{
+                          color: getPDFBadgeStyle(item.due_status, 'due').text,
+                        }}
+                      >
+                        {item.due_status}
+                      </Text>
+                    </View>
+                  ) : (
+                    <Text>-</Text>
+                  )}
                 </View>
                 <View
                   style={[
@@ -297,13 +494,37 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
                 <View
                   style={[
                     pdfStyles.tableCellRight,
-                    { flex: 1.5, color: item.debt_price < 0 ? 'red' : 'black' },
+                    { flex: 1.5, color: item.balance < 0 ? 'red' : 'black' },
                   ]}
                 >
-                  <Text>{formatCurrency(item.debt_price)}</Text>
+                  <Text>{formatCurrency(item.balance)}</Text>
                 </View>
-                <View style={[pdfStyles.tableCell, { flex: 1 }]}>
-                  <Text>{item.status || '-'}</Text>
+                <View style={[pdfStyles.tableCell, { flex: 1.2 }]}>
+                  {item.status && item.status !== '-' ? (
+                    <View
+                      style={[
+                        pdfStyles.badge,
+                        {
+                          backgroundColor: getPDFBadgeStyle(
+                            item.status,
+                            'payment'
+                          ).bg,
+                          borderColor: getPDFBadgeStyle(item.status, 'payment')
+                            .border,
+                        },
+                      ]}
+                    >
+                      <Text
+                        style={{
+                          color: getPDFBadgeStyle(item.status, 'payment').text,
+                        }}
+                      >
+                        {item.status}
+                      </Text>
+                    </View>
+                  ) : (
+                    <Text>-</Text>
+                  )}
                 </View>
                 <View style={[pdfStyles.tableCell, { flex: 1 }]}>
                   <Text>{item.travel_number || '-'}</Text>
@@ -341,7 +562,7 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
                 <View style={[pdfStyles.tableCell, { flex: 1 }]}>
                   <Text></Text>
                 </View>
-                <View style={[pdfStyles.tableCell, { flex: 1 }]}>
+                <View style={[pdfStyles.tableCell, { flex: 2 }]}>
                   <Text></Text>
                 </View>
                 <View
@@ -386,7 +607,7 @@ const createPDFDocument = (params: DebtSupplierExportPDFParams) => {
                 >
                   <Text>{formatCurrency(supplierReport.total.debt_price)}</Text>
                 </View>
-                <View style={[pdfStyles.tableCell, { flex: 1 }]}>
+                <View style={[pdfStyles.tableCell, { flex: 1.2 }]}>
                   <Text></Text>
                 </View>
                 <View style={[pdfStyles.tableCellLast, { flex: 1 }]}>
diff --git a/src/components/pages/report/finance/export/DebtSupplierExportXLSX.tsx b/src/components/pages/report/finance/export/DebtSupplierExportXLSX.tsx
index 58b07e30..39e0cec4 100644
--- a/src/components/pages/report/finance/export/DebtSupplierExportXLSX.tsx
+++ b/src/components/pages/report/finance/export/DebtSupplierExportXLSX.tsx
@@ -2,7 +2,7 @@
 
 import * as XLSX from 'xlsx';
 import { formatDate } from '@/lib/helper';
-import { DebtSupplier } from '@/types/api/report/debt-supplier';
+import { DebtRow, DebtSupplier } from '@/types/api/report/debt-supplier';
 
 interface DebtSupplierExportExcelParams {
   data: DebtSupplier[];
@@ -21,12 +21,29 @@ export const generateDebtSupplierExcel = (
     const supplierData = supplierReport.rows;
     const supplierName = supplierReport.supplier.name || 'Unknown Supplier';
 
-    const excelData: { [key: string]: string | number }[] = supplierData.map(
-      (item, index) => ({
+    const excelData: { [key: string]: string | number }[] = [
+      {
+        No: '',
+        'Nomor PR': '',
+        'Nomor PO': '',
+        'Tanggal Terima/Bayar': '',
+        'Tanggal PO': '',
+        'Aging (Hari)': '',
+        Area: '',
+        Gudang: '',
+        'Jatuh Tempo': '',
+        'Status Jatuh Tempo': '',
+        'Nominal Pembelian (Rp)': '',
+        'Pembayaran (Rp)': '',
+        'Sisa Saldo Hutang (Rp)': supplierReport.initial_balance || 0,
+        Status: '',
+        'Nomor Perjalanan': '',
+      },
+      ...supplierData.map((item, index) => ({
         No: index + 1,
         'Nomor PR': item.pr_number || '',
         'Nomor PO': item.po_number || '',
-        'Tanggal Terima': item.received_date
+        'Tanggal Terima/Bayar': item.received_date
           ? item.received_date != '-'
             ? formatDate(item.received_date, 'MM/DD/YYYY')
             : '-'
@@ -39,35 +56,35 @@ export const generateDebtSupplierExcel = (
         'Aging (Hari)': item.aging || 0,
         Area: item.area?.name || '',
         Gudang: item.warehouse?.name || '',
-        'Tanggal Jatuh Tempo': item.due_date
+        'Jatuh Tempo': item.due_date
           ? item.due_date != '-'
             ? formatDate(item.due_date, 'MM/DD/YYYY')
             : '-'
           : '-',
         'Status Jatuh Tempo': item.due_status || '',
-        'Total Harga': item.total_price || 0,
-        'Harga Pembayaran': item.payment_price || 0,
-        'Harga Hutang': item.debt_price || 0,
+        'Nominal Pembelian (Rp)': item.total_price || 0,
+        'Pembayaran (Rp)': item.payment_price || 0,
+        'Sisa Saldo Hutang (Rp)': item.balance || 0,
         Status: item.status || '',
         'Nomor Perjalanan': item.travel_number || '',
-      })
-    );
+      })),
+    ];
 
     if (supplierReport.total) {
       excelData.push({
         No: 'Total',
         'Nomor PR': '',
         'Nomor PO': '',
-        'Tanggal Terima': '',
+        'Tanggal Terima/Bayar': '',
         'Tanggal PO': '',
         'Aging (Hari)': supplierReport.total.aging || 0,
         Area: '',
         Gudang: '',
-        'Tanggal Jatuh Tempo': '',
+        'Jatuh Tempo': '',
         'Status Jatuh Tempo': '',
-        'Total Harga': supplierReport.total.total_price || 0,
-        'Harga Pembayaran': supplierReport.total.payment_price || 0,
-        'Harga Hutang': supplierReport.total.debt_price || 0,
+        'Nominal Pembelian (Rp)': supplierReport.total.total_price || 0,
+        'Pembayaran (Rp)': supplierReport.total.payment_price || 0,
+        'Sisa Saldo Hutang (Rp)': supplierReport.total.debt_price || 0,
         Status: '',
         'Nomor Perjalanan': '',
       });
@@ -77,18 +94,18 @@ export const generateDebtSupplierExcel = (
 
     const colWidths = [
       { wch: 5 }, // No
-      { wch: 15 }, // Nomor PR
-      { wch: 15 }, // Nomor PO
-      { wch: 15 }, // Tanggal PR
-      { wch: 15 }, // Tanggal PO
-      { wch: 12 }, // Aging
+      { wch: 10 }, // Nomor PR
+      { wch: 10 }, // Nomor PO
+      { wch: 20 }, // Tanggal Terima/Bayar
+      { wch: 10 }, // Tanggal PO
+      { wch: 10 }, // Aging
       { wch: 15 }, // Area
       { wch: 15 }, // Gudang
-      { wch: 18 }, // Tanggal Jatuh Tempo
-      { wch: 18 }, // Status Jatuh Tempo
-      { wch: 15 }, // Total Harga
-      { wch: 15 }, // Harga Pembayaran
-      { wch: 15 }, // Harga Hutang
+      { wch: 12 }, // Jatuh Tempo
+      { wch: 20 }, // Status Jatuh Tempo
+      { wch: 20 }, // Nominal Pembelian (Rp)
+      { wch: 15 }, // Pembayaran (Rp)
+      { wch: 20 }, // Sisa Saldo Hutang (Rp)
       { wch: 12 }, // Status
       { wch: 15 }, // Nomor Perjalanan
     ];
diff --git a/src/components/pages/report/finance/filter/DebtSupplierFilter.ts b/src/components/pages/report/finance/filter/DebtSupplierFilter.ts
new file mode 100644
index 00000000..1c1c2fac
--- /dev/null
+++ b/src/components/pages/report/finance/filter/DebtSupplierFilter.ts
@@ -0,0 +1,36 @@
+import { OptionType } from '@/components/input/SelectInput';
+import * as yup from 'yup';
+
+export type DebtSupplierFilterType = {
+  startDate: string | null | undefined;
+  endDate: string | null | undefined;
+  supplierIds: OptionType[] | null | undefined;
+  filterBy: OptionType | null | undefined;
+};
+
+export const DebtSupplierFilterSchema: yup.ObjectSchema<DebtSupplierFilterType> =
+  yup.object({
+    startDate: yup.string().optional().notRequired(),
+    endDate: yup.string().optional().notRequired(),
+    supplierIds: yup
+      .array()
+      .of(
+        yup.object({
+          value: yup.mixed<string | number>().required(),
+          label: yup.string().required(),
+        })
+      )
+      .optional()
+      .notRequired(),
+    filterBy: yup
+      .object({
+        value: yup.mixed<string | number>().required(),
+        label: yup.string().required(),
+      })
+      .optional()
+      .notRequired(),
+  });
+
+export type DebtSupplierFilterValues = yup.InferType<
+  typeof DebtSupplierFilterSchema
+>;
diff --git a/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx b/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
index 1d8d1993..b5e8e438 100644
--- a/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
+++ b/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
@@ -2,13 +2,16 @@ import { useState, useMemo, useCallback } from 'react';
 import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import Card from '@/components/Card';
+import Badge from '@/components/Badge';
 import SelectInput, {
   useSelect,
   OptionType,
 } from '@/components/input/SelectInput';
+import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
 import DateInput from '@/components/input/DateInput';
 import { CustomerApi } from '@/services/api/master-data';
 import { FinanceApi } from '@/services/api/report/finance-report';
+import { UserApi } from '@/services/api/user';
 import Table from '@/components/Table';
 import { ColumnDef } from '@tanstack/react-table';
 import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
@@ -17,7 +20,6 @@ import {
   CustomerPaymentSummary,
 } from '@/types/api/report/customer-payment';
 import { isResponseSuccess } from '@/lib/api-helper';
-import Pagination from '@/components/Pagination';
 import Button from '@/components/Button';
 import Dropdown from '@/components/Dropdown';
 import MenuItem from '@/components/menu/MenuItem';
@@ -36,38 +38,81 @@ const CustomerPaymentTab = () => {
 
   // ===== PAGINATION STATE =====
   const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
+  const [pageSize] = useState(10);
 
   // ===== SUBMISSION STATE =====
   const [isSubmitted, setIsSubmitted] = useState(false);
 
   // ===== FILTER STATE =====
-  const [filterCustomer, setFilterCustomer] = useState<OptionType[]>([]);
-  const [filterSales, setFilterSales] = useState<OptionType[]>([]);
+  const [filterCustomer, setFilterCustomer] = useState<typeof customerOptions>(
+    []
+  );
+  // TODO: Uncomment when BE is ready
+  // const [filterSales, setFilterSales] = useState<typeof salesOptions>([]);
+  const [filterSales, setFilterSales] = useState<typeof salesOptions>([]);
   const [filterStartDate, setFilterStartDate] = useState('');
   const [filterEndDate, setFilterEndDate] = useState('');
-  const [filterErrors, setFilterErrors] = useState<Record<string, string>>({});
 
   const filterModal = useModal();
 
-  const { options: customerOptions, isLoadingOptions: isLoadingCustomers } =
-    useSelect(CustomerApi.basePath, 'id', 'name', 'search');
+  const {
+    options: customerOptions,
+    setInputValue: setCustomerInputValue,
+    isLoadingOptions: isLoadingCustomers,
+    loadMore: loadMoreCustomers,
+    hasMore: hasMoreCustomers,
+  } = useSelect(CustomerApi.basePath, 'id', 'name', 'search');
 
-  const salesOptions = useMemo(
-    () => [
-      { value: 'Sales A', label: 'Sales A' },
-      { value: 'Sales B', label: 'Sales B' },
-      { value: 'Sales C', label: 'Sales C' },
-      // TODO: Fetch sales options from API
-    ],
-    []
-  );
+  // TODO: Uncomment when BE is ready
+  const {
+    options: salesOptions,
+    setInputValue: setSalesInputValue,
+    isLoadingOptions: isLoadingSales,
+    loadMore: loadMoreSales,
+    hasMore: hasMoreSales,
+  } = useSelect(UserApi.basePath, 'id', 'name', 'search');
 
   const dataTypeOptions = useMemo(
     () => [{ value: 'do_date', label: 'Tanggal Jual' }],
     []
   );
 
+  const getPaymentStatusColor = (notes: string) => {
+    const normalizedValue = notes.toLowerCase();
+
+    if (normalizedValue === 'lunas') {
+      return 'bg-info/10 text-info border-info';
+    }
+
+    if (normalizedValue.includes('belum')) {
+      return 'bg-warning/10 text-warning border-warning';
+    }
+
+    return 'bg-gray-100 text-gray-600 border-gray-300';
+  };
+
+  const getPaymentStatusIndicatorColor = (notes: string) => {
+    const normalizedValue = notes.toLowerCase();
+
+    if (normalizedValue === 'lunas') {
+      return 'bg-info';
+    }
+
+    if (normalizedValue.includes('belum')) {
+      return 'bg-warning';
+    }
+
+    return 'bg-gray-400';
+  };
+
+  const getPaymentStatusText = (notes: string) => {
+    return notes
+      .toLowerCase()
+      .split(' ')
+      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+      .join(' ');
+  };
+
   // ===== FILTER HANDLERS =====
   const handleResetFilters = useCallback(() => {
     setIsSubmitted(false);
@@ -75,42 +120,59 @@ const CustomerPaymentTab = () => {
     setFilterSales([]);
     setFilterStartDate('');
     setFilterEndDate('');
-    setFilterErrors({});
   }, []);
 
   const handleApplyFilters = useCallback(() => {
-    const errors: Record<string, string> = {};
+    setIsSubmitted(true);
+    setCurrentPage(1);
+    filterModal.closeModal();
+  }, [filterModal]);
 
-    if (!filterStartDate) {
-      errors.start_date = 'Tanggal mulai wajib diisi';
-    }
-    if (!filterEndDate) {
-      errors.end_date = 'Tanggal akhir wajib diisi';
+  // ===== ACTIVE FILTERS COUNT =====
+  const activeFiltersCount = useMemo(() => {
+    let count = 0;
+
+    // Date filter (start_date + end_date = 1 filter)
+    if (filterStartDate || filterEndDate) {
+      count += 1;
     }
 
-    setFilterErrors(errors);
-
-    if (Object.keys(errors).length === 0) {
-      setIsSubmitted(true);
-      setCurrentPage(1);
-      filterModal.closeModal();
+    // Customer filter
+    if (filterCustomer.length > 0) {
+      count += 1;
     }
-  }, [filterModal, filterStartDate, filterEndDate]);
+
+    // TODO: Uncomment when BE is ready
+    // // Sales filter
+    // if (filterSales.length > 0) {
+    //   count += 1;
+    // }
+
+    return count;
+  }, [
+    filterStartDate,
+    filterEndDate,
+    filterCustomer,
+    // filterSales,
+  ]);
+
+  const hasFilters = activeFiltersCount > 0;
 
   // ===== DATA FETCHING =====
   const { data: customerPayment, isLoading } = useSWR(
     isSubmitted
       ? () => {
           const params = {
-            customer_id:
+            customer_ids:
               filterCustomer.length > 0
                 ? filterCustomer.map((v) => String(v.value)).join(',')
                 : undefined,
-            sales:
-              filterSales.length > 0
-                ? filterSales.map((v) => String(v.value)).join(',')
-                : undefined,
-            filter_by: 'do_date' as const,
+            // TODO: Uncomment when BE is ready
+            // sales_id:
+            //   filterSales.length > 0
+            //     ? filterSales.map((v) => String(v.value)).join(',')
+            //     : undefined,
+            // filter_by: 'do_date' as const,
             start_date: filterStartDate || undefined,
             end_date: filterEndDate || undefined,
             page: currentPage,
@@ -122,9 +184,9 @@ const CustomerPaymentTab = () => {
       : null,
     ([, params]) =>
       FinanceApi.getCustomerPaymentReport(
-        params.customer_id,
-        params.sales,
-        params.filter_by,
+        params.customer_ids,
+        undefined, // TODO: Change to params.sales_id when BE is ready
+        undefined, // TODO: Change to params.filter_by when BE is ready
         params.start_date,
         params.end_date,
         params.page,
@@ -140,25 +202,20 @@ const CustomerPaymentTab = () => {
     [customerPayment]
   );
 
-  const meta =
-    isResponseSuccess(customerPayment) && customerPayment?.meta
-      ? customerPayment.meta
-      : null;
-
   // ===== EXPORT DATA FETCHER =====
   const customerPaymentExport = useCallback(async (): Promise<
     CustomerPaymentReport[] | null
   > => {
     const params = {
-      customer_id:
+      customer_ids:
         filterCustomer.length > 0
           ? filterCustomer.map((v) => String(v.value)).join(',')
           : undefined,
-      sales:
-        filterSales.length > 0
-          ? filterSales.map((v) => String(v.value)).join(',')
-          : undefined,
-      filter_by: 'do_date' as const,
+      // TODO: Uncomment when BE is ready
+      // sales_id:
+      //   filterSales.length > 0
+      //     ? filterSales.map((v) => String(v.value)).join(',')
+      //     : undefined,
       start_date: filterStartDate || undefined,
       end_date: filterEndDate || undefined,
       limit: 100,
@@ -166,9 +223,9 @@ const CustomerPaymentTab = () => {
     };
 
     const response = await FinanceApi.getCustomerPaymentReport(
-      params.customer_id,
-      params.sales,
-      params.filter_by,
+      params.customer_ids,
+      undefined, // TODO: Change to params.sales_id when BE is ready
+      undefined, // TODO: Change to params.filter_by when BE is ready
       params.start_date,
       params.end_date,
       params.page,
@@ -218,7 +275,24 @@ const CustomerPaymentTab = () => {
         return;
       }
 
-      await generateCustomerPaymentPDF({ data: allDataForExport });
+      await generateCustomerPaymentPDF({
+        data: allDataForExport,
+        params: {
+          customer_name:
+            filterCustomer.length > 0
+              ? filterCustomer.map((c) => c.label).join(', ')
+              : undefined,
+          // TODO: Uncomment when BE is ready
+          // sales:
+          //   filterSales.length > 0
+          //     ? filterSales.map((s) => s.label).join(', ')
+          //     : undefined,
+          start_date: filterStartDate || undefined,
+          end_date: filterEndDate || undefined,
+          // TODO: Uncomment when BE is ready
+          // filter_by: 'do_date' as const,
+        },
+      });
       toast.success('PDF berhasil dibuat dan diunduh.');
     } catch {
       toast.error('Gagal membuat PDF. Silakan coba lagi.');
@@ -227,27 +301,6 @@ const CustomerPaymentTab = () => {
     }
   }, [customerPaymentExport]);
 
-  // ===== PAGINATION HANDLERS =====
-  const handlePageChange = (page: number) => {
-    setCurrentPage(page);
-  };
-
-  const handleRowChange = (pageSize: number) => {
-    setPageSize(pageSize);
-  };
-
-  const handleNextPage = () => {
-    if (meta && currentPage < meta.total_pages) {
-      setCurrentPage(currentPage + 1);
-    }
-  };
-
-  const handlePrevPage = () => {
-    if (currentPage > 1) {
-      setCurrentPage(currentPage - 1);
-    }
-  };
-
   const getTableColumns = (
     summary: CustomerPaymentSummary
   ): ColumnDef<CustomerPaymentReport['rows'][0]>[] => {
@@ -255,36 +308,41 @@ const CustomerPaymentTab = () => {
       {
         id: 'no',
         header: 'No',
-        cell: (props) => props.row.index + 1,
+        cell: (props) => props.row.index,
         footer: () => <div className='font-semibold text-gray-900'>Total</div>,
       },
       {
         id: 'do_date_or_payment_date',
-        header: 'Tanggal DO/Bayar',
-        accessorKey: 'do_date',
+        header: 'Tanggal Jual/Bayar',
+        accessorKey: 'trans_date',
+        enableSorting: false,
         cell: (props) => {
-          const value = props.row.original.do_date;
-          return formatDate(value, 'DD MMM YYYY');
+          const value = props.row.original.trans_date;
+          return value ? formatDate(value, 'DD MMM YYYY') : '-';
         },
       },
       {
         id: 'realization_date',
         header: 'Tanggal Realisasi',
-        accessorKey: 'realization_date',
+        accessorKey: 'delivery_date',
+        enableSorting: false,
         cell: (props) => {
-          const value = props.row.original.realization_date;
-          return formatDate(value, 'DD MMM YYYY');
+          const value = props.row.original.delivery_date;
+          return value ? formatDate(value, 'DD MMM YYYY') : '-';
         },
       },
       {
         id: 'aging',
         header: 'Aging',
         accessorKey: 'aging_day',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.aging_day;
           return (
             <div className='text-center'>
-              {value ? formatNumber(value) : '-'} hari
+              {value !== null && value !== undefined
+                ? `${formatNumber(value)} hari`
+                : '-'}
             </div>
           );
         },
@@ -293,6 +351,7 @@ const CustomerPaymentTab = () => {
         id: 'reference',
         header: 'Referensi',
         accessorKey: 'reference',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.reference;
           return value || '-';
@@ -301,16 +360,18 @@ const CustomerPaymentTab = () => {
       {
         id: 'vehicle_plate',
         header: 'Nomor Polisi',
-        accessorKey: 'vehicle_plate',
+        accessorKey: 'vehicle_numbers',
+        enableSorting: false,
         cell: (props) => {
-          const value = props.row.original.vehicle_plate;
-          return value || '-';
+          const value = props.row.original.vehicle_numbers;
+          return Array.isArray(value) ? value.join(', ') : value || '-';
         },
       },
       {
         id: 'qty',
-        header: 'Ekor/Qty',
+        header: 'Qty',
         accessorKey: 'qty',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.qty;
           return <div className='text-right'>{formatNumber(value)}</div>;
@@ -325,6 +386,7 @@ const CustomerPaymentTab = () => {
         id: 'weight',
         header: 'Berat (Kg)',
         accessorKey: 'weight',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.weight;
           return <div className='text-right'>{formatNumber(value)}</div>;
@@ -339,6 +401,7 @@ const CustomerPaymentTab = () => {
         id: 'average_weight',
         header: 'AVG',
         accessorKey: 'average_weight',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.average_weight;
           return <div className='text-right'>{formatNumber(value)}</div>;
@@ -348,37 +411,23 @@ const CustomerPaymentTab = () => {
         ),
       },
       {
-        id: 'price',
-        header: 'Harga Awal',
-        accessorKey: 'price',
+        id: 'unit_price',
+        header: 'Harga/Unit',
+        accessorKey: 'unit_price',
+        enableSorting: false,
         cell: (props) => {
-          const value = props.row.original.price;
+          const value = props.row.original.unit_price;
           return <div className='text-right'>{formatCurrency(value)}</div>;
         },
         footer: () => (
-          <div className='text-right font-semibold text-gray-900'>
-            {formatCurrency(summary.total_initial_amount) || '-'}
-          </div>
-        ),
-      },
-      {
-        id: 'credit_note',
-        header: 'CN',
-        accessorKey: 'credit_note',
-        cell: (props) => {
-          const value = props.row.original.credit_note;
-          return <div className='text-right'>{formatCurrency(value)}</div>;
-        },
-        footer: () => (
-          <div className='text-right font-semibold text-gray-900'>
-            {formatCurrency(summary.total_credit_note) || '-'}
-          </div>
+          <div className='text-right font-semibold text-gray-900'>-</div>
         ),
       },
       {
         id: 'final_price',
         header: 'Harga Akhir',
         accessorKey: 'final_price',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.final_price;
           return <div className='text-right'>{formatCurrency(value)}</div>;
@@ -389,24 +438,13 @@ const CustomerPaymentTab = () => {
           </div>
         ),
       },
-      {
-        id: 'ppn',
-        header: 'PPN (%)',
-        accessorKey: 'ppn',
-        cell: (props) => {
-          const value = props.row.original.ppn;
-          return <div className='text-right'>{formatNumber(value)}%</div>;
-        },
-        footer: () => (
-          <div className='text-right font-semibold text-gray-900'>-</div>
-        ),
-      },
       {
         id: 'total',
         header: 'Total',
-        accessorKey: 'total',
+        accessorKey: 'total_price',
+        enableSorting: false,
         cell: (props) => {
-          const value = props.row.original.total;
+          const value = props.row.original.total_price;
           return <div className='text-right'>{formatCurrency(value)}</div>;
         },
         footer: () => (
@@ -418,9 +456,10 @@ const CustomerPaymentTab = () => {
       {
         id: 'payment',
         header: 'Pembayaran',
-        accessorKey: 'payment',
+        accessorKey: 'payment_amount',
+        enableSorting: false,
         cell: (props) => {
-          const value = props.row.original.payment;
+          const value = props.row.original.payment_amount;
           return <div className='text-right'>{formatCurrency(value)}</div>;
         },
         footer: () => (
@@ -433,12 +472,25 @@ const CustomerPaymentTab = () => {
         id: 'accounts_receivable',
         header: 'Saldo Piutang',
         accessorKey: 'accounts_receivable',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.accounts_receivable;
-          return <div className='text-right'>{formatCurrency(value)}</div>;
+          return (
+            <div
+              className={`text-right font-semibold ${
+                value < 0 ? 'text-error' : ''
+              }`}
+            >
+              {formatCurrency(value)}
+            </div>
+          );
         },
         footer: () => (
-          <div className='text-right font-semibold text-gray-900'>
+          <div
+            className={`text-right font-semibold ${
+              summary.total_accounts_receivable < 0 ? 'text-error' : ''
+            }`}
+          >
             {formatCurrency(summary.total_accounts_receivable) || '-'}
           </div>
         ),
@@ -446,27 +498,46 @@ const CustomerPaymentTab = () => {
       {
         id: 'notes',
         header: 'Keterangan',
-        accessorKey: 'notes',
+        accessorKey: 'status',
+        enableSorting: false,
         cell: (props) => {
-          const value = props.row.original.notes;
-          return value || '-';
+          const value = props.row.original.status;
+
+          if (!value) {
+            return '-';
+          }
+
+          return (
+            <Badge
+              statusIndicator={true}
+              variant='soft'
+              className={{
+                badge: `rounded-xl justify-start border border-gray-200 ${getPaymentStatusColor(value)}`,
+                status: getPaymentStatusIndicatorColor(value),
+              }}
+            >
+              <span className='capitalize'>{getPaymentStatusText(value)}</span>
+            </Badge>
+          );
         },
       },
       {
         id: 'pickup_info',
         header: 'Pengambilan',
         accessorKey: 'pickup_info',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.pickup_info;
-          return value || '-';
+          return Array.isArray(value) ? value.join(', ') : value || '-';
         },
       },
       {
         id: 'sales_marketing',
         header: 'Sales/Marketing',
-        accessorKey: 'sales_marketing',
+        accessorKey: 'sales_person',
+        enableSorting: false,
         cell: (props) => {
-          const value = props.row.original.sales_marketing;
+          const value = props.row.original.sales_person;
           return value || '-';
         },
       },
@@ -481,14 +552,37 @@ const CustomerPaymentTab = () => {
         className={{ wrapper: 'w-full', body: 'p-1!' }}
       >
         <div className='mb-4 flex justify-end gap-2 [&_button]:px-4'>
-          <Button variant='outline' onClick={filterModal.openModal}>
+          <Button
+            variant='outline'
+            onClick={filterModal.openModal}
+            className={
+              hasFilters
+                ? 'bg-linear-to-b from-[#0069E0]/40 to-white text-[#0069E0] rounded-lg'
+                : 'rounded-lg'
+            }
+          >
             <Icon icon='heroicons:funnel' width={18} height={18} />
             Filter
+            {hasFilters && (
+              <Badge
+                variant='default'
+                className={{
+                  badge:
+                    'rounded-lg px-1.5 py-2.5 text-xs font-semibold bg-error text-white',
+                }}
+              >
+                {activeFiltersCount}
+              </Badge>
+            )}
           </Button>
 
           <Dropdown
             trigger={
-              <Button variant='outline' isLoading={isAnyExportLoading}>
+              <Button
+                variant='outline'
+                isLoading={isAnyExportLoading}
+                className='rounded-lg'
+              >
                 <Icon
                   icon='heroicons:cloud-arrow-down'
                   width={18}
@@ -499,7 +593,7 @@ const CustomerPaymentTab = () => {
             }
             align='end'
           >
-            <Menu>
+            <Menu className={'w-full'}>
               <MenuItem title='Excel' onClick={handleExportExcel} />
               <MenuItem title='PDF' onClick={handleExportPdf} />
             </Menu>
@@ -538,15 +632,9 @@ const CustomerPaymentTab = () => {
                     value={filterStartDate}
                     onChange={(e) => {
                       setFilterStartDate(e.target.value);
-                      setFilterErrors((prev) => ({ ...prev, start_date: '' }));
                     }}
                     className={{ wrapper: 'w-full' }}
                   />
-                  {filterErrors.start_date && (
-                    <p className='text-red-500 text-sm mt-1'>
-                      {filterErrors.start_date}
-                    </p>
-                  )}
                 </div>
 
                 <div>
@@ -556,23 +644,16 @@ const CustomerPaymentTab = () => {
                     value={filterEndDate}
                     onChange={(e) => {
                       setFilterEndDate(e.target.value);
-                      setFilterErrors((prev) => ({ ...prev, end_date: '' }));
                     }}
                     className={{ wrapper: 'w-full' }}
                   />
-                  {filterErrors.end_date && (
-                    <p className='text-red-500 text-sm mt-1'>
-                      {filterErrors.end_date}
-                    </p>
-                  )}
                 </div>
               </div>
 
               <div>
-                <SelectInput
+                <SelectInputCheckbox
                   label='Customer'
                   placeholder='Pilih Customer'
-                  isMulti
                   options={customerOptions}
                   value={filterCustomer}
                   onChange={(val) => {
@@ -580,28 +661,34 @@ const CustomerPaymentTab = () => {
                       Array.isArray(val) ? val : val ? [val] : []
                     );
                   }}
+                  onInputChange={setCustomerInputValue}
                   isLoading={isLoadingCustomers}
                   isClearable
+                  onMenuScrollToBottom={loadMoreCustomers}
                   className={{ wrapper: 'w-full' }}
                 />
               </div>
 
-              <div>
-                <SelectInput
+              {/* TODO: Uncomment when BE is ready */}
+              {/* <div>
+                <SelectInputCheckbox
                   label='Sales'
                   placeholder='Pilih Sales'
-                  isMulti
                   options={salesOptions}
                   value={filterSales}
                   onChange={(val) => {
                     setFilterSales(Array.isArray(val) ? val : val ? [val] : []);
                   }}
+                  onInputChange={setSalesInputValue}
+                  isLoading={isLoadingSales}
                   isClearable
+                  onMenuScrollToBottom={loadMoreSales}
                   className={{ wrapper: 'w-full' }}
                 />
-              </div>
+              </div> */}
 
-              <div>
+              {/* TODO: Uncomment when BE is ready */}
+              {/* <div>
                 <SelectInput
                   label='Filter Berdasarkan'
                   placeholder='Pilih Filter Berdasarkan'
@@ -610,7 +697,7 @@ const CustomerPaymentTab = () => {
                   isDisabled={true}
                   className={{ wrapper: 'w-full' }}
                 />
-              </div>
+              </div> */}
             </div>
 
             {/* Action Buttons */}
@@ -650,35 +737,43 @@ const CustomerPaymentTab = () => {
             const summary = customerReport.summary || {
               total_qty: 0,
               total_weight: 0,
-              total_initial_amount: 0,
-              total_credit_note: 0,
               total_final_amount: 0,
-              total_ppn: 0,
               total_grand_amount: 0,
               total_payment: 0,
               total_accounts_receivable: 0,
             };
 
-            const totalAccountsReceivable = summary.total_accounts_receivable;
             const tableColumns = getTableColumns(summary);
 
             return (
               <Card
                 key={customerReport.customer.id}
                 title={customerReport.customer.name}
-                subtitle={`${customerReport.customer.address || ''}\nSaldo Piutang: ${formatCurrency(totalAccountsReceivable)}`}
-                className={{ wrapper: 'w-full' }}
+                subtitle={`(${customerReport.customer.address})`}
+                className={{
+                  wrapper: 'w-full rounded-2xl',
+                  body: 'p-0',
+                  title:
+                    'py-1.5 px-3 bg-[#0069E0] text-white text-lg font-normal',
+                  subtitle:
+                    'px-3 pb-1 bg-[#0069E0] text-white text-sm font-normal',
+                }}
                 variant='bordered'
                 collapsible={true}
               >
                 <Table
-                  data={customerReport.rows}
+                  data={[
+                    {
+                      accounts_receivable: customerReport.initial_balance,
+                    } as CustomerPaymentReport['rows'][0],
+                    ...customerReport.rows,
+                  ]}
                   columns={tableColumns}
-                  pageSize={10}
+                  pageSize={customerReport.rows.length + 1}
                   renderFooter={customerReport.rows.length > 0}
                   className={{
                     containerClassName: 'w-full',
-                    tableWrapperClassName: 'overflow-x-auto mt-4',
+                    tableWrapperClassName: 'overflow-x-auto',
                     tableClassName: 'w-full table-auto text-sm',
                     headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
                     headerColumnClassName:
@@ -694,26 +789,42 @@ const CustomerPaymentTab = () => {
                       'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
                     paginationClassName: 'hidden',
                   }}
+                  renderCustomRow={(row) => {
+                    if (row.index === 0) {
+                      return (
+                        <tr
+                          className='hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200'
+                          key={row.index}
+                        >
+                          <td
+                            className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap'
+                            colSpan={13}
+                          ></td>
+                          <td className='px-4 py-3 text-xs whitespace-nowrap'>
+                            <div
+                              className={`text-right ${
+                                row.original.accounts_receivable < 0
+                                  ? 'text-error'
+                                  : ''
+                              }`}
+                            >
+                              {formatCurrency(row.original.accounts_receivable)}
+                            </div>
+                          </td>
+                          <td
+                            className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap'
+                            colSpan={4}
+                          ></td>
+                        </tr>
+                      );
+                    }
+                  }}
                 />
               </Card>
             );
           })
         )}
       </Card>
-      {meta && data.length > 0 && (
-        <div className='mt-6'>
-          <Pagination
-            currentPage={meta.page}
-            totalItems={meta.total_results}
-            onPageChange={handlePageChange}
-            onRowChange={handleRowChange}
-            onNextPage={handleNextPage}
-            onPrevPage={handlePrevPage}
-            rowOptions={[10, 25, 50, 100]}
-            itemsPerPage={meta.limit}
-          />
-        </div>
-      )}
     </div>
   );
 };
diff --git a/src/components/pages/report/finance/tab/DebtSupplierTab.tsx b/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
index 5a72ea3c..9fefa9c7 100644
--- a/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
+++ b/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
@@ -9,11 +9,15 @@ import SelectInput, {
 import Menu from '@/components/menu/Menu';
 import MenuItem from '@/components/menu/MenuItem';
 import Modal, { useModal } from '@/components/Modal';
-import Table from '@/components/Table';
+import Table, { TABLE_DEFAULT_STYLING } from '@/components/Table';
 import { isResponseSuccess } from '@/lib/api-helper';
-import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
+import { cn, formatCurrency, formatDate, formatNumber } from '@/lib/helper';
 import { SupplierApi } from '@/services/api/master-data';
-import { DebtRow, DebtSupplier } from '@/types/api/report/debt-supplier';
+import {
+  DebtRow,
+  DebtSupplier,
+  DebtSupplierFilter,
+} from '@/types/api/report/debt-supplier';
 import { generateDebtSupplierExcel } from '@/components/pages/report/finance/export/DebtSupplierExportXLSX';
 import { generateDebtSupplierPDF } from '@/components/pages/report/finance/export/DebtSupllierExportPDF';
 import { Icon } from '@iconify/react';
@@ -21,8 +25,53 @@ import { ColumnDef } from '@tanstack/react-table';
 import { useCallback, useMemo, useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
-import Pagination from '@/components/Pagination';
 import { DebtSupplierApi } from '@/services/api/report/debt-supplier';
+import { useFormik } from 'formik';
+import {
+  DebtSupplierFilterSchema,
+  DebtSupplierFilterType,
+} from '@/components/pages/report/finance/filter/DebtSupplierFilter';
+import ButtonFilter from '@/components/helper/ButtonFilter';
+import Badge from '@/components/Badge';
+import { Color } from '@/types/theme';
+import { Supplier } from '@/types/api/master-data/supplier';
+
+const dueStatus: Record<string, Color> = {
+  'Sudah Jatuh Tempo': 'error',
+  'Belum Jatuh Tempo': 'success',
+  'Mendekati Jatuh Tempo': 'warning',
+};
+
+const paymentStatus: Record<string, Color> = {
+  'Belum Lunas': 'warning',
+  Lunas: 'primary',
+  Pembayaran: 'success',
+};
+
+const getPillBadge = (
+  statusText: string,
+  type: 'due' | 'payment' = 'payment'
+) => {
+  // Get color based on type
+  const color =
+    type === 'due'
+      ? dueStatus[statusText] || 'neutral'
+      : paymentStatus[statusText] || 'neutral';
+
+  return (
+    <Badge
+      color={color as Color}
+      size='sm'
+      variant='soft'
+      className={{
+        badge: `py-2.5 px-2 font-medium text-base-content rounded-full border border-${color}`,
+      }}
+      statusIndicator
+    >
+      {statusText}
+    </Badge>
+  );
+};
 
 const DebtSupplierTab = () => {
   // ===== STATE MANAGEMENT =====
@@ -30,26 +79,23 @@ const DebtSupplierTab = () => {
   const [isExcelExportLoading, setIsExcelExportLoading] = useState(false);
   const isAnyExportLoading = isPdfExportLoading || isExcelExportLoading;
 
-  // ===== PAGINATION STATE =====
-  const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
-
   // ===== SUBMISSION STATE =====
+  const [filterParams, setFilterParams] = useState<DebtSupplierFilter>({
+    start_date: undefined,
+    end_date: undefined,
+    supplier_ids: undefined,
+    filter_by: undefined,
+  });
   const [isSubmitted, setIsSubmitted] = useState(false);
 
-  // ===== FILTER STATE =====
-  const [filterSupplier, setFilterSupplier] = useState<OptionType[]>([]);
-  const [filterStartDate, setFilterStartDate] = useState('');
-  const [filterEndDate, setFilterEndDate] = useState('');
-  const [filterDateType, setFilterDateType] = useState<OptionType>();
-  const [filterErrors, setFilterErrors] = useState<Record<string, string>>({});
-
   const filterModal = useModal();
 
-  const { options: supplierOptions, isLoadingOptions: isLoadingSuppliers } =
-    useSelect(SupplierApi.basePath, 'id', 'name', '', {
-      limit: 'limit',
-    });
+  const {
+    setInputValue: setSupplierInputValue,
+    options: supplierOptions,
+    isLoadingOptions: isLoadingSupplierOptions,
+    loadMore: loadMoreSuppliers,
+  } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name');
 
   const dataTypeOptions = useMemo(
     () => [
@@ -59,48 +105,51 @@ const DebtSupplierTab = () => {
     []
   );
 
-  // ===== FILTER HANDLERS =====
-  const handleResetFilters = useCallback(() => {
-    setIsSubmitted(false);
-    setFilterSupplier([]);
-    setFilterStartDate('');
-    setFilterEndDate('');
-    setFilterErrors({});
-  }, []);
+  const handleFilterModalOpen = () => {
+    filterModal.openModal();
+  };
 
-  const handleApplyFilters = useCallback(() => {
-    const errors: Record<string, string> = {};
-
-    if (!filterStartDate) {
-      errors.start_date = 'Tanggal mulai wajib diisi';
-    }
-    if (!filterEndDate) {
-      errors.end_date = 'Tanggal akhir wajib diisi';
-    }
-
-    setFilterErrors(errors);
-
-    if (Object.keys(errors).length === 0) {
-      setIsSubmitted(true);
-      setCurrentPage(1);
+  // ===== FORMIK SETUP =====
+  const formik = useFormik<DebtSupplierFilterType>({
+    initialValues: {
+      startDate: null,
+      endDate: null,
+      supplierIds: null,
+      filterBy: null,
+    },
+    validationSchema: DebtSupplierFilterSchema,
+    onSubmit: (values) => {
+      setFilterParams({
+        start_date: values.startDate?.toString() || undefined,
+        end_date: values.endDate?.toString() || undefined,
+        supplier_ids:
+          values.supplierIds?.map((v) => String(v.value)).join(',') ||
+          undefined,
+        filter_by: values.filterBy?.value?.toString() || undefined,
+      });
       filterModal.closeModal();
-    }
-  }, [filterModal, filterStartDate, filterEndDate]);
+      setIsSubmitted(true);
+    },
+    onReset: (values) => {
+      setFilterParams({
+        start_date: undefined,
+        end_date: undefined,
+        supplier_ids: undefined,
+        filter_by: undefined,
+      });
+      setIsSubmitted(false);
+    },
+  });
 
   // ===== DATA FETCHING =====
   const { data: debtSupplier, isLoading } = useSWR(
     isSubmitted
       ? () => {
           const params = {
-            supplier_ids:
-              filterSupplier.length > 0
-                ? filterSupplier.map((v) => String(v.value)).join(',')
-                : undefined,
-            filter_by: filterDateType?.value,
-            start_date: filterStartDate || undefined,
-            end_date: filterEndDate || undefined,
-            page: currentPage,
-            limit: pageSize,
+            supplier_ids: filterParams.supplier_ids,
+            filter_by: filterParams.filter_by,
+            start_date: filterParams.start_date,
+            end_date: filterParams.end_date,
           };
 
           return ['debt-supplier-report', params];
@@ -109,11 +158,9 @@ const DebtSupplierTab = () => {
     ([, params]) =>
       DebtSupplierApi.getDebtSupplierReport(
         params.supplier_ids,
-        params.filter_by?.toString(),
+        params.filter_by,
         params.start_date,
-        params.end_date,
-        params.page,
-        params.limit
+        params.end_date
       )
   );
 
@@ -135,13 +182,15 @@ const DebtSupplierTab = () => {
   > => {
     const params = {
       supplier_ids:
-        filterSupplier.length > 0
-          ? filterSupplier.map((v) => String(v.value)).join(',')
+        formik.values.supplierIds && formik.values.supplierIds.length > 0
+          ? formik.values.supplierIds.map((v) => String(v.value)).join(',')
           : undefined,
-      filter_by: filterDateType?.value?.toString(),
-      start_date: filterStartDate || undefined,
-      end_date: filterEndDate || undefined,
-      date_type: filterDateType ? filterDateType.value : undefined,
+      filter_by: formik.values.filterBy?.value?.toString() || undefined,
+      start_date: formik.values.startDate || undefined,
+      end_date: formik.values.endDate || undefined,
+      date_type: formik.values.filterBy
+        ? formik.values.filterBy.value
+        : undefined,
       limit: 100,
       page: 1,
     };
@@ -150,15 +199,18 @@ const DebtSupplierTab = () => {
       params.supplier_ids,
       params.filter_by,
       params.start_date,
-      params.end_date,
-      params.page,
-      params.limit
+      params.end_date
     );
 
     return isResponseSuccess(response)
       ? (response.data as unknown as DebtSupplier[])
       : null;
-  }, [filterSupplier, filterStartDate, filterEndDate]);
+  }, [
+    formik.values.supplierIds,
+    formik.values.startDate,
+    formik.values.endDate,
+    formik.values.filterBy,
+  ]);
 
   // ===== EXPORT HANDLERS =====
   const handleExportExcel = useCallback(async () => {
@@ -198,7 +250,17 @@ const DebtSupplierTab = () => {
         return;
       }
 
-      await generateDebtSupplierPDF({ data: allDataForExport });
+      await generateDebtSupplierPDF({
+        data: allDataForExport,
+        params: {
+          supplier_name: formik.values.supplierIds
+            ?.map((v) => v.label)
+            .join(', '),
+          filter_by: formik.values.filterBy?.label,
+          start_date: formik.values.startDate || undefined,
+          end_date: formik.values.endDate || undefined,
+        },
+      });
       toast.success('PDF berhasil dibuat dan diunduh.');
     } catch {
       toast.error('Gagal membuat PDF. Silakan coba lagi.');
@@ -207,37 +269,19 @@ const DebtSupplierTab = () => {
     }
   }, [debtSupplierExport]);
 
-  // ===== PAGINATION HANDLERS =====
-  const handlePageChange = (page: number) => {
-    setCurrentPage(page);
-  };
-
-  const handleRowChange = (pageSize: number) => {
-    setPageSize(pageSize);
-  };
-
-  const handleNextPage = () => {
-    if (meta && currentPage < meta.total_pages) {
-      setCurrentPage(currentPage + 1);
-    }
-  };
-
-  const handlePrevPage = () => {
-    if (currentPage > 1) {
-      setCurrentPage(currentPage - 1);
-    }
-  };
-
   const getTableColumns = (supplier: DebtSupplier): ColumnDef<DebtRow>[] => [
     {
       id: 'no',
       header: 'No',
-      cell: (props) => props.row.index + 1,
+      enableSorting: false,
+      cell: (props) => props.row.index,
+      footer: () => 'Total',
     },
     {
       id: 'pr_number',
       header: 'Nomor PR',
       accessorKey: 'pr_number',
+      enableSorting: false,
       cell: (props) => {
         const value = props.row.original.pr_number;
         return value || '-';
@@ -247,6 +291,7 @@ const DebtSupplierTab = () => {
       id: 'po_number',
       header: 'Nomor PO',
       accessorKey: 'po_number',
+      enableSorting: false,
       cell: (props) => {
         const value = props.row.original.po_number;
         return value || '-';
@@ -254,8 +299,9 @@ const DebtSupplierTab = () => {
     },
     {
       id: 'received_date',
-      header: 'Tanggal Terima',
+      header: 'Tanggal Terima/Bayar',
       accessorKey: 'received_date',
+      enableSorting: false,
       cell: (props) => {
         const value = props.row.original.received_date;
         return value
@@ -269,6 +315,7 @@ const DebtSupplierTab = () => {
       id: 'po_date',
       header: 'Tanggal PO',
       accessorKey: 'po_date',
+      enableSorting: false,
       cell: (props) => {
         const value = props.row.original.po_date;
         return value
@@ -282,6 +329,7 @@ const DebtSupplierTab = () => {
       id: 'aging',
       header: 'Aging',
       accessorKey: 'aging',
+      enableSorting: false,
       cell: (props) => {
         const value = props.row.original.aging;
         return <div className='text-center'>{formatNumber(value)} Hari</div>;
@@ -295,6 +343,7 @@ const DebtSupplierTab = () => {
       id: 'area',
       header: 'Area',
       accessorKey: 'area',
+      enableSorting: false,
       cell: (props) => {
         const value = props.row.original.area?.name;
         return value || '-';
@@ -304,6 +353,7 @@ const DebtSupplierTab = () => {
       id: 'warehouse',
       header: 'Gudang',
       accessorKey: 'warehouse',
+      enableSorting: false,
       cell: (props) => {
         const value = props.row.original.warehouse?.name;
         return value || '-';
@@ -311,8 +361,9 @@ const DebtSupplierTab = () => {
     },
     {
       id: 'due_date',
-      header: 'Tanggal Jatuh Tempo',
+      header: 'Jatuh Tempo',
       accessorKey: 'due_date',
+      enableSorting: false,
       cell: (props) => {
         const value = props.row.original.due_date;
         return value
@@ -326,15 +377,17 @@ const DebtSupplierTab = () => {
       id: 'due_status',
       header: 'Status Jatuh Tempo',
       accessorKey: 'due_status',
+      enableSorting: false,
       cell: (props) => {
         const value = props.row.original.due_status;
-        return value || '-';
+        return value ? (value != '-' ? getPillBadge(value, 'due') : '-') : '-';
       },
     },
     {
       id: 'total_price',
-      header: 'Total Harga',
+      header: 'Nominal Pembelian',
       accessorKey: 'total_price',
+      enableSorting: false,
       cell: (props) => {
         const value = props.row.original.total_price;
         return (
@@ -354,8 +407,9 @@ const DebtSupplierTab = () => {
     },
     {
       id: 'payment_price',
-      header: 'Harga Pembayaran',
+      header: 'Pembayaran',
       accessorKey: 'payment_price',
+      enableSorting: false,
       cell: (props) => {
         const value = props.row.original.payment_price;
         return (
@@ -374,11 +428,12 @@ const DebtSupplierTab = () => {
       },
     },
     {
-      id: 'debt_price',
-      header: 'Harga Hutang',
-      accessorKey: 'debt_price',
+      id: 'balance',
+      header: 'Sisa Saldo Hutang',
+      accessorKey: 'balance',
+      enableSorting: false,
       cell: (props) => {
-        const value = props.row.original.debt_price;
+        const value = props.row.original.balance;
         return (
           <div className={`text-right ${value < 0 ? 'text-red-500' : ''}`}>
             {formatCurrency(value)}
@@ -398,15 +453,21 @@ const DebtSupplierTab = () => {
       id: 'status',
       header: 'Status',
       accessorKey: 'status',
+      enableSorting: false,
       cell: (props) => {
         const value = props.row.original.status;
-        return value || '-';
+        return value
+          ? value != '-'
+            ? getPillBadge(value, 'payment')
+            : '-'
+          : '-';
       },
     },
     {
       id: 'travel_number',
       header: 'Nomor Perjalanan',
       accessorKey: 'travel_number',
+      enableSorting: false,
       cell: (props) => {
         const value = props.row.original.travel_number;
         return value || '-';
@@ -421,10 +482,11 @@ const DebtSupplierTab = () => {
           className={{ wrapper: 'w-full', body: 'p-1!' }}
         >
           <div className='mb-4 flex justify-end gap-2 [&_button]:px-4'>
-            <Button variant='outline' onClick={filterModal.openModal}>
-              <Icon icon='heroicons:funnel' width={18} height={18} />
-              Filter
-            </Button>
+            <ButtonFilter
+              values={formik.values}
+              onClick={handleFilterModalOpen}
+              variant='outline'
+            />
 
             <Dropdown
               trigger={
@@ -466,53 +528,87 @@ const DebtSupplierTab = () => {
               <Card
                 key={supplierReport.supplier.id}
                 title={supplierReport.supplier.name}
-                className={{ wrapper: 'w-full' }}
+                className={{
+                  wrapper: 'w-full !rounded-lg',
+                  body: 'p-0 rounded-lg',
+                  title:
+                    'ps-2 pt-1 pb-1 font-normal text-md bg-primary text-white',
+                }}
                 variant='bordered'
                 collapsible={true}
+                defaultCollapsed={true}
               >
                 <Table
-                  data={supplierReport.rows}
+                  data={[
+                    {
+                      balance: supplierReport.initial_balance,
+                    } as DebtRow,
+                    ...supplierReport.rows,
+                  ]}
                   columns={getTableColumns(supplierReport)}
-                  pageSize={supplierReport.rows.length}
+                  pageSize={supplierReport.rows.length + 1}
                   renderFooter={supplierReport.rows.length > 0}
                   className={{
                     containerClassName: 'w-full',
-                    tableWrapperClassName: 'overflow-x-auto mt-4',
-                    tableClassName: 'w-full table-auto text-sm',
-                    headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
-                    headerColumnClassName:
-                      'px-4 py-3 text-xs font-semibold text-gray-700 text-left border border-gray-200',
-                    bodyRowClassName:
-                      'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200',
-                    bodyColumnClassName:
-                      'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
-                    tableFooterClassName:
-                      'bg-gray-100 font-semibold border border-gray-200',
-                    footerRowClassName: 'border-t-2 border-gray-300',
-                    footerColumnClassName:
-                      'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+                    tableWrapperClassName: 'overflow-x-auto',
+                    headerColumnClassName: cn(
+                      TABLE_DEFAULT_STYLING.headerColumnClassName,
+                      'whitespace-nowrap'
+                    ),
+                    bodyColumnClassName: cn(
+                      TABLE_DEFAULT_STYLING.bodyColumnClassName,
+                      'whitespace-nowrap'
+                    ),
+                    footerRowClassName: cn(
+                      TABLE_DEFAULT_STYLING.footerRowClassName,
+                      'bg-white'
+                    ),
+                    footerColumnClassName: cn(
+                      TABLE_DEFAULT_STYLING.footerColumnClassName,
+                      'whitespace-nowrap p-3'
+                    ),
                     paginationClassName: 'hidden',
                   }}
+                  renderCustomRow={(row) => {
+                    if (row.index == 0) {
+                      return (
+                        <tr
+                          className={cn(TABLE_DEFAULT_STYLING.bodyRowClassName)}
+                          key={row.index}
+                        >
+                          <td
+                            className={cn(
+                              TABLE_DEFAULT_STYLING.bodyColumnClassName
+                            )}
+                            colSpan={12}
+                          ></td>
+                          <td
+                            className={cn(
+                              TABLE_DEFAULT_STYLING.bodyColumnClassName
+                            )}
+                          >
+                            <div
+                              className={`text-right ${row.original.balance < 0 ? 'text-red-500' : ''}`}
+                            >
+                              {formatCurrency(row.original.balance)}
+                            </div>
+                          </td>
+                          <td
+                            className={cn(
+                              TABLE_DEFAULT_STYLING.bodyColumnClassName
+                            )}
+                            colSpan={2}
+                          ></td>
+                        </tr>
+                      );
+                    }
+                  }}
                 />
               </Card>
             );
           })
         )}
       </div>
-      {meta && data.length > 0 && (
-        <div className='mt-6'>
-          <Pagination
-            currentPage={meta.page}
-            totalItems={meta.total_results}
-            onPageChange={handlePageChange}
-            onRowChange={handleRowChange}
-            onNextPage={handleNextPage}
-            onPrevPage={handlePrevPage}
-            rowOptions={[10, 25, 50, 100]}
-            itemsPerPage={meta.limit}
-          />
-        </div>
-      )}
 
       {/* Filter Modal */}
       <Modal
@@ -522,7 +618,11 @@ const DebtSupplierTab = () => {
           modalBox: 'p-0 rounded-2xl xl:max-w-4/12 max-w-sm',
         }}
       >
-        <div className='space-y-6'>
+        <form
+          className='space-y-6'
+          onSubmit={formik.handleSubmit}
+          onReset={formik.handleReset}
+        >
           {/* Modal Header */}
           <div className='flex items-center justify-between gap-2 py-3 border-b border-gray-300 px-4'>
             <div className='flex items-center gap-2 text-primary'>
@@ -542,37 +642,31 @@ const DebtSupplierTab = () => {
               <div>
                 <DateInput
                   label='Tanggal'
-                  name='start_date'
-                  value={filterStartDate}
+                  name='startDate'
+                  value={formik.values.startDate || ''}
                   onChange={(e) => {
-                    setFilterStartDate(e.target.value);
-                    setFilterErrors((prev) => ({ ...prev, start_date: '' }));
+                    formik.setFieldValue('startDate', e.target.value || null);
                   }}
                   className={{ wrapper: 'w-full' }}
+                  isError={
+                    formik.touched.startDate && !!formik.errors.startDate
+                  }
+                  errorMessage={formik.errors.startDate}
                 />
-                {filterErrors.start_date && (
-                  <p className='text-red-500 text-sm mt-1'>
-                    {filterErrors.start_date}
-                  </p>
-                )}
               </div>
 
               <div className='mt-auto'>
                 <DateInput
                   label='‎ '
-                  name='end_date'
-                  value={filterEndDate}
+                  name='endDate'
+                  value={formik.values.endDate || ''}
                   onChange={(e) => {
-                    setFilterEndDate(e.target.value);
-                    setFilterErrors((prev) => ({ ...prev, end_date: '' }));
+                    formik.setFieldValue('endDate', e.target.value || null);
                   }}
                   className={{ wrapper: 'w-full' }}
+                  isError={formik.touched.endDate && !!formik.errors.endDate}
+                  errorMessage={formik.errors.endDate}
                 />
-                {filterErrors.end_date && (
-                  <p className='text-red-500 text-sm mt-1'>
-                    {filterErrors.end_date}
-                  </p>
-                )}
               </div>
             </div>
 
@@ -582,15 +676,22 @@ const DebtSupplierTab = () => {
                 placeholder='Pilih Supplier'
                 isMulti
                 options={supplierOptions}
-                value={filterSupplier}
+                value={formik.values.supplierIds || []}
                 onChange={(val) => {
-                  setFilterSupplier(
-                    Array.isArray(val) ? val : val ? [val] : []
+                  formik.setFieldValue(
+                    'supplierIds',
+                    Array.isArray(val) ? val : val ? [val] : null
                   );
                 }}
-                isLoading={isLoadingSuppliers}
+                onInputChange={setSupplierInputValue}
+                onMenuScrollToBottom={loadMoreSuppliers}
+                isLoading={isLoadingSupplierOptions}
                 isClearable
                 className={{ wrapper: 'w-full' }}
+                isError={
+                  formik.touched.supplierIds && !!formik.errors.supplierIds
+                }
+                errorMessage={formik.errors.supplierIds as string}
               />
             </div>
 
@@ -599,12 +700,17 @@ const DebtSupplierTab = () => {
                 label='Filter Berdasarkan'
                 placeholder='Pilih Filter Berdasarkan'
                 options={dataTypeOptions}
-                value={filterDateType}
+                value={formik.values.filterBy || null}
                 onChange={(val) => {
-                  setFilterDateType(val ? (val as OptionType) : undefined);
+                  formik.setFieldValue(
+                    'filterBy',
+                    val ? (val as OptionType) : null
+                  );
                 }}
                 className={{ wrapper: 'w-full' }}
                 isClearable
+                isError={formik.touched.filterBy && !!formik.errors.filterBy}
+                errorMessage={formik.errors.filterBy as string}
               />
             </div>
           </div>
@@ -614,18 +720,15 @@ const DebtSupplierTab = () => {
             <Button
               variant='soft'
               className='ms-4 min-w-36 rounded-lg'
-              onClick={handleResetFilters}
+              type='reset'
             >
               Reset Filter
             </Button>
-            <Button
-              className='me-4 min-w-36 rounded-lg'
-              onClick={handleApplyFilters}
-            >
+            <Button className='me-4 min-w-36 rounded-lg' type='submit'>
               Apply Filter
             </Button>
           </div>
-        </div>
+        </form>
       </Modal>
     </>
   );
diff --git a/src/components/pages/report/production-result/ProductionResultContent.tsx b/src/components/pages/report/production-result/ProductionResultContent.tsx
index ae6f744b..28d334e8 100644
--- a/src/components/pages/report/production-result/ProductionResultContent.tsx
+++ b/src/components/pages/report/production-result/ProductionResultContent.tsx
@@ -21,10 +21,18 @@ import {
   ProjectFlockApi,
   ProjectFlockKandangApi,
 } from '@/services/api/production';
-import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
-import { isResponseError } from '@/lib/api-helper';
+import {
+  BaseProjectFlockKandang,
+  ProjectFlockKandang,
+} from '@/types/api/production/project-flock-kandang';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import Pagination from '@/components/Pagination';
 import { ProductionResultReportApi } from '@/services/api/report/production-result';
+import { BaseApiResponse } from '@/types/api/api-general';
+import { httpClient } from '@/services/http/client';
+import { ProductionResult } from '@/types/api/report/production-result';
+import ProductionResultReportPDF from './ProductionResultReportPDF';
+import { pdf } from '@react-pdf/renderer';
 
 const ProductionResultContent = () => {
   const [projectFlockKandangs, setProjectFlockKandangs] = useState<
@@ -49,6 +57,8 @@ const ProductionResultContent = () => {
   const [isLoadingExportingToExcel, setIsLoadingExportingToExcel] =
     useState(false);
 
+  const [isLoadingExportingToPdf, setIsLoadingExportingToPdf] = useState(false);
+
   const [selectedArea, setSelectedArea] = useState<OptionType | null>(null);
   const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
     null
@@ -62,6 +72,7 @@ const ProductionResultContent = () => {
     setInputValue: setAreaInputValue,
     options: areaOptions,
     isLoadingOptions: isLoadingAreaOptions,
+    loadMore: loadMoreAreas,
   } = useSelect<BaseKandang>(AreaApi.basePath, 'id', 'name');
 
   const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
@@ -78,6 +89,7 @@ const ProductionResultContent = () => {
     setInputValue: setLocationInputValue,
     options: locationOptions,
     isLoadingOptions: isLoadingLocationOptions,
+    loadMore: loadMoreLocations,
   } = useSelect<BaseKandang>(LocationApi.basePath, 'id', 'name', 'search', {
     area_id: selectedArea ? ((selectedArea as OptionType).value as string) : '',
   });
@@ -94,6 +106,7 @@ const ProductionResultContent = () => {
     setInputValue: setProjectFlockInputValue,
     options: projectFlockOptions,
     isLoadingOptions: isLoadingProjectFlockOptions,
+    loadMore: loadMoreProjectFlocks,
   } = useSelect<BaseKandang>(
     ProjectFlockApi.basePath,
     'id',
@@ -120,6 +133,7 @@ const ProductionResultContent = () => {
     setInputValue: setProjectFlockKandangInputValue,
     options: projectFlockKandangOptions,
     isLoadingOptions: isLoadingProjectFlockKandangOptions,
+    loadMore: loadMoreProjectFlockKandangs,
   } = useSelect<BaseKandang>(
     ProjectFlockKandangApi.basePath,
     'id',
@@ -154,6 +168,87 @@ const ProductionResultContent = () => {
     setIsLoadingExportingToExcel(false);
   };
 
+  const exportToPdfHandler = async () => {
+    setIsLoadingExportingToPdf(true);
+
+    try {
+      let projectFlockKandangsData: BaseProjectFlockKandang[] = [];
+
+      if (selectedProjectFlockKandang) {
+        const projectFlockKandangResponse =
+          await ProjectFlockKandangApi.getSingle(
+            selectedProjectFlockKandang?.value as number
+          );
+
+        projectFlockKandangsData = isResponseSuccess(
+          projectFlockKandangResponse
+        )
+          ? [projectFlockKandangResponse.data]
+          : [];
+      } else {
+        const projectFlockKandangsResponse =
+          await ProjectFlockKandangApi.getAll({
+            area_id: selectedArea?.value,
+            project_flock_id: selectedProjectFlock?.value,
+          });
+
+        projectFlockKandangsData = isResponseSuccess(
+          projectFlockKandangsResponse
+        )
+          ? projectFlockKandangsResponse.data
+          : [];
+      }
+
+      const mappedProductionResults: {
+        projectFlockKandang: BaseProjectFlockKandang;
+        productionResult: ProductionResult[] | null;
+      }[] = await Promise.all(
+        projectFlockKandangsData.map(async (projectFlockKandang) => {
+          const getProductionResultPath = `${ProductionResultReportApi.basePath}/${projectFlockKandang.id}?page=1&limit=100`;
+          const getProductionResultRes = await httpClient<
+            BaseApiResponse<ProductionResult[]>
+          >(getProductionResultPath);
+
+          return {
+            projectFlockKandang,
+            productionResult: isResponseSuccess(getProductionResultRes)
+              ? getProductionResultRes.data
+              : null,
+          };
+        })
+      );
+
+      if (mappedProductionResults.length === 0) {
+        toast.error('Tidak ada data untuk diexport.');
+        setIsLoadingExportingToPdf(false);
+        return;
+      }
+
+      const openPdf = async () => {
+        const productionResultPdfBlob = await pdf(
+          <ProductionResultReportPDF
+            mappedProductionResults={mappedProductionResults}
+          />
+        ).toBlob();
+
+        const productionResultReportPdfUrl = URL.createObjectURL(
+          productionResultPdfBlob
+        );
+        window.open(productionResultReportPdfUrl, '_blank');
+      };
+
+      await openPdf();
+    } catch (error) {
+      console.error(error);
+      toast.error('Gagal melakukan export laporan hasil produksi! Coba lagi.');
+    }
+    // await ProductionResultReportApi.exportProductionResultToPdf(
+    //   projectFlockKandangs
+    // );
+
+    setIsLoadingExportingToPdf(false);
+  };
+
   const searchHandler = async () => {
     setProjectFlockKandangs(null);
     setIsLoadingSearch(true);
@@ -235,6 +330,7 @@ const ProductionResultContent = () => {
               value={selectedArea}
               onChange={areaChangeHandler}
               onInputChange={setAreaInputValue}
+              onMenuScrollToBottom={loadMoreAreas}
               isClearable
               className={{
                 wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
@@ -251,6 +347,7 @@ const ProductionResultContent = () => {
               value={selectedLocation}
               onChange={locationChangeHandler}
               onInputChange={setLocationInputValue}
+              onMenuScrollToBottom={loadMoreLocations}
               isClearable
               isDisabled={!selectedArea}
               className={{
@@ -270,6 +367,7 @@ const ProductionResultContent = () => {
               value={selectedProjectFlock}
               onChange={projectFlockChangeHandler}
               onInputChange={setProjectFlockInputValue}
+              onMenuScrollToBottom={loadMoreProjectFlocks}
               isClearable
               isDisabled={!selectedArea || !selectedLocation}
               className={{
@@ -289,6 +387,7 @@ const ProductionResultContent = () => {
               value={selectedProjectFlockKandang}
               onChange={projectFlockKandangChangeHandler}
               onInputChange={setProjectFlockKandangInputValue}
+              onMenuScrollToBottom={loadMoreProjectFlockKandangs}
               isClearable
               isDisabled={!selectedProjectFlock}
               className={{
@@ -347,6 +446,13 @@ const ProductionResultContent = () => {
                     onClick={exportToExcelHandler}
                     className='text-nowrap'
                   />
+                  <MenuItem
+                    title='Export to PDF'
+                    icon='icon-park-outline:file-pdf-one'
+                    isLoading={isLoadingExportingToPdf}
+                    onClick={exportToPdfHandler}
+                    className='text-nowrap'
+                  />
                 </Menu>
               </Dropdown>
             </div>
diff --git a/src/components/pages/report/production-result/ProductionResultReportPDF.tsx b/src/components/pages/report/production-result/ProductionResultReportPDF.tsx
new file mode 100644
index 00000000..9bc27c4b
--- /dev/null
+++ b/src/components/pages/report/production-result/ProductionResultReportPDF.tsx
@@ -0,0 +1,388 @@
+'use client';
+
+import React from 'react';
+import {
+  Document,
+  Page,
+  StyleSheet,
+  Text,
+  View,
+  Image,
+} from '@react-pdf/renderer';
+
+import { formatDate, formatNumber } from '@/lib/helper';
+import { BaseProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
+import { ProductionResult } from '@/types/api/report/production-result';
+
+type MappedProductionResultsItem = {
+  projectFlockKandang: BaseProjectFlockKandang;
+  productionResult: ProductionResult[] | null;
+};
+
+interface ProductionResultReportPDFProps {
+  mappedProductionResults?: MappedProductionResultsItem[];
+}
+
+const styles = StyleSheet.create({
+  page: {
+    paddingTop: 24,
+    paddingBottom: 52,
+    paddingHorizontal: 16,
+  },
+
+  companyInfoHeader: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    marginBottom: 8,
+  },
+  companyLogo: {
+    width: 64,
+    height: 'auto',
+  },
+  companyInfoHeaderDate: {
+    paddingTop: 8,
+    fontSize: 10,
+  },
+  companyName: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginBottom: 4,
+  },
+  companyAddress: {
+    fontSize: 8,
+    maxWidth: 420,
+    marginBottom: 10,
+  },
+  doubleDivider: {
+    width: '100%',
+    height: 6,
+    borderTopWidth: 2,
+    borderTopColor: '#000',
+    borderBottomWidth: 2,
+    borderBottomColor: '#000',
+  },
+
+  title: {
+    marginTop: 14,
+    fontSize: 14,
+    lineHeight: '150%',
+    textAlign: 'center',
+    fontFamily: 'Times-Roman',
+    fontWeight: 'bold',
+  },
+
+  footer: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    position: 'absolute',
+    fontSize: 8,
+    bottom: 22,
+    left: 0,
+    right: 0,
+    textAlign: 'center',
+    color: 'grey',
+  },
+
+  section: {
+    marginTop: 12,
+    borderWidth: 1,
+    borderColor: '#000',
+    padding: 8,
+  },
+
+  sectionHeader: {
+    marginBottom: 6,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'baseline',
+  },
+  sectionTitle: {
+    fontSize: 10,
+    fontWeight: 'bold',
+  },
+  sectionSubtitle: {
+    fontSize: 8,
+    color: '#444',
+  },
+
+  // Simple grid table (label/value pairs)
+  grid: {
+    width: '100%',
+    borderWidth: 1,
+    borderColor: '#000',
+  },
+  gridRow: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: '#000',
+  },
+  gridRowLast: {
+    borderBottomWidth: 0,
+  },
+  gridCellLabel: {
+    width: '40%',
+    paddingVertical: 3,
+    paddingHorizontal: 6,
+    fontSize: 8,
+    borderRightWidth: 1,
+    borderRightColor: '#000',
+    fontWeight: 'bold',
+  },
+  gridCellValue: {
+    width: '60%',
+    paddingVertical: 3,
+    paddingHorizontal: 6,
+    fontSize: 8,
+    textAlign: 'right',
+  },
+
+  // Subsection headings
+  groupTitle: {
+    marginTop: 8,
+    marginBottom: 4,
+    fontSize: 9,
+    fontWeight: 'bold',
+  },
+
+  emptyText: {
+    fontSize: 8,
+    color: '#666',
+    fontStyle: 'italic',
+  },
+});
+
+function safeNum(v: unknown): number {
+  const n = typeof v === 'number' ? v : Number(v);
+  return Number.isFinite(n) ? n : 0;
+}
+
+function valueText(v: unknown) {
+  if (v === null || v === undefined) return '-';
+  if (typeof v === 'number') return formatNumber(v);
+  return String(v);
+}
+
+/**
+ * Render label/value table for one ProductionResult.
+ * Uses a compact grid to keep page readable.
+ */
+function ProductionResultGrid({ pr }: { pr: ProductionResult }) {
+  const rows: Array<[string, string]> = [
+    ['WOA', valueText(pr.woa)],
+
+    // BW
+    ['BW', valueText(pr.bw)],
+    ['Std BW', valueText(pr.std_bw)],
+    ['Uniformity', valueText(pr.uniformity)],
+    ['Std Uniformity', valueText(pr.std_uniformity)],
+
+    // Dep
+    ['Dep Kum', valueText(pr.dep_kum)],
+    ['Dep Std', valueText(pr.dep_std)],
+
+    // Butiran
+    ['Butiran Utuh', valueText(pr.butiran_utuh)],
+    ['Butiran Putih', valueText(pr.butiran_putih)],
+    ['Butiran Retak', valueText(pr.butiran_retak)],
+    ['Butiran Pecah', valueText(pr.butiran_pecah)],
+    ['Butiran Jumlah', valueText(pr.butiran_jumlah)],
+    ['Total Butir', valueText(pr.total_butir)],
+
+    // Kg
+    ['Kg Utuh', valueText(pr.kg_utuh)],
+    ['Kg Putih', valueText(pr.kg_putih)],
+    ['Kg Retak', valueText(pr.kg_retak)],
+    ['Kg Pecah', valueText(pr.kg_pecah)],
+    ['Kg Jumlah', valueText(pr.kg_jumlah)],
+    ['Total Kg', valueText(pr.total_kg)],
+
+    // %
+    ['% Utuh', valueText(pr.persen_utuh)],
+    ['% Putih', valueText(pr.persen_putih)],
+    ['% Retak', valueText(pr.persen_retak)],
+    ['% Pecah', valueText(pr.persen_pecah)],
+
+    // Produksi
+    ['HD', valueText(pr.hd)],
+    ['HD Std', valueText(pr.hd_std)],
+    ['FI', valueText(pr.fi)],
+    ['FI Std', valueText(pr.fi_std)],
+    ['EM', valueText(pr.em)],
+    ['EM Std', valueText(pr.em_std)],
+    ['EW', valueText(pr.ew)],
+    ['EW Std', valueText(pr.ew_std)],
+    ['FCR', valueText(pr.fcr)],
+    ['FCR Std', valueText(pr.fcr_std)],
+    ['HH', valueText(pr.hh)],
+    ['HH Std', valueText(pr.hh_std)],
+  ];
+
+  return (
+    <View style={styles.grid}>
+      {rows.map(([label, value], idx) => {
+        const isLast = idx === rows.length - 1;
+        return (
+          <View
+            key={label}
+            style={[styles.gridRow, ...(isLast ? [styles.gridRowLast] : [])]}
+          >
+            <Text style={styles.gridCellLabel}>{label}</Text>
+            <Text style={styles.gridCellValue}>{value}</Text>
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+/**
+ * If there are multiple ProductionResult entries for a kandang,
+ * we show them sequentially with a small header per result.
+ *
+ * You can later change this to render only the latest WOA, or group by week.
+ */
+function ProductionResultList({
+  productionResults,
+}: {
+  productionResults: ProductionResult[];
+}) {
+  return (
+    <View>
+      {productionResults.map((pr, idx) => {
+        const kandangName =
+          pr.project_flock?.kandang?.name ||
+          pr.project_flock?.kandang?.id?.toString() ||
+          '';
+
+        // Optional: show a compact subheader
+        const headerLeft = `Data #${idx + 1}`;
+        const headerRight =
+          kandangName && pr.woa !== undefined
+            ? `${kandangName} • WOA ${safeNum(pr.woa)}`
+            : pr.woa !== undefined
+              ? `WOA ${safeNum(pr.woa)}`
+              : '';
+
+        return (
+          <View
+            key={`${pr.project_flock?.id ?? 'pf'}-${idx}`}
+            style={{ marginTop: idx === 0 ? 0 : 10 }}
+            wrap={false}
+          >
+            <View style={styles.sectionHeader}>
+              <Text style={styles.sectionTitle}>{headerLeft}</Text>
+              <Text style={styles.sectionSubtitle}>{headerRight}</Text>
+            </View>
+
+            <ProductionResultGrid pr={pr} />
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+/**
+ * ✅ Main PDF Component
+ */
+const ProductionResultReportPDF = ({
+  mappedProductionResults = [],
+}: ProductionResultReportPDFProps) => {
+  return (
+    <Document>
+      <Page style={styles.page} size='A4'>
+        {/* Header */}
+        <View>
+          <View style={styles.companyInfoHeader}>
+            <Image style={styles.companyLogo} src='/assets/img/lti-logo.png' />
+            <Text style={styles.companyInfoHeaderDate}>
+              {formatDate(Date.now(), 'DD MMMM YYYY')}
+            </Text>
+          </View>
+
+          <View>
+            <Text style={styles.companyName}>PT LUMBUNG TELUR INDONESIA</Text>
+            <Text style={styles.companyAddress}>
+              SOHO Building Lt.3 (Paris Van Java), Jalan Karang Tinggal, Kel.
+              Cipedes, Kec. Sukajadi, Kota Bandung 40162
+            </Text>
+
+            <View style={styles.doubleDivider} />
+          </View>
+        </View>
+
+        <Text style={styles.title}>Laporan Production Result</Text>
+
+        {/* Sections per ProjectFlockKandang */}
+        {mappedProductionResults.length === 0 ? (
+          <View style={{ marginTop: 16 }}>
+            <Text style={styles.emptyText}>Tidak ada data.</Text>
+          </View>
+        ) : (
+          mappedProductionResults.map((item, idx) => {
+            const pfk = item.projectFlockKandang;
+
+            // Try to display meaningful identifiers.
+            // Adjust these fields based on your real BaseProjectFlockKandang structure.
+            const kandangName =
+              pfk?.kandang?.name ?? `Kandang #${pfk?.kandang_id ?? idx + 1}`;
+
+            const projectName = pfk?.project_flock?.name ?? '';
+
+            const locationName = pfk?.project_flock?.location?.name ?? '';
+
+            const areaName = pfk?.project_flock?.area?.name ?? '';
+
+            return (
+              <View
+                key={`pfk-${pfk?.id ?? idx}`}
+                style={styles.section}
+                break={idx > 0} // each kandang starts on a new page for clarity
+              >
+                <View style={styles.sectionHeader}>
+                  <Text style={styles.sectionTitle}>
+                    {projectName
+                      ? `${projectName} • ${kandangName}`
+                      : kandangName}
+                  </Text>
+                  <Text style={styles.sectionSubtitle}>
+                    {[areaName, locationName].filter(Boolean).join(' • ')}
+                  </Text>
+                </View>
+
+                {item.productionResult && item.productionResult.length > 0 ? (
+                  <ProductionResultList
+                    productionResults={item.productionResult}
+                  />
+                ) : (
+                  <Text style={styles.emptyText}>
+                    Tidak ada production result untuk kandang ini.
+                  </Text>
+                )}
+              </View>
+            );
+          })
+        )}
+
+        {/* Footer */}
+        <View style={styles.footer} fixed>
+          <Text
+            render={({ pageNumber, totalPages }) =>
+              `${pageNumber} / ${totalPages}`
+            }
+            fixed
+          />
+        </View>
+      </Page>
+    </Document>
+  );
+};
+
+export default ProductionResultReportPDF;
diff --git a/src/components/pages/report/sale/export/HppPerkandangExport.tsx b/src/components/pages/report/sale/export/HppPerkandangExport.tsx
index 0a712a6c..9b05a88d 100644
--- a/src/components/pages/report/sale/export/HppPerkandangExport.tsx
+++ b/src/components/pages/report/sale/export/HppPerkandangExport.tsx
@@ -226,7 +226,7 @@ const createPDFDocument = (
                 <Text>Rentang BW</Text>
               </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1 }]}>
-                <Text>Sisa Ekor</Text>
+                <Text>Sisa Butir</Text>
               </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1 }]}>
                 <Text>Sisa Kg</Text>
@@ -234,12 +234,6 @@ const createPDFDocument = (
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
                 <Text>Rata-Rata Bobot (Kg)</Text>
               </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1 }]}>
-                <Text>Produksi Telur (Butir)</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1 }]}>
-                <Text>Produksi Telur (Kg)</Text>
-              </View>
               <View style={[pdfStyles.tableCellHeader, { flex: 1.5 }]}>
                 <Text>Feed (Supplier)</Text>
               </View>
@@ -249,16 +243,15 @@ const createPDFDocument = (
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
                 <Text>Rata-Rata Harga DOC</Text>
               </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
-                <Text>Nilai Nominal Telur</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1 }]}>
-                <Text>HPP Ayam</Text>
-              </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
                 <Text>HPP Telur (RP/KG)</Text>
               </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
+              <View
+                style={[
+                  pdfStyles.tableCellHeaderRight,
+                  { flex: 1.2, borderRightWidth: 0 },
+                ]}
+              >
                 <Text>Nominal Sisa</Text>
               </View>
             </View>
@@ -278,23 +271,15 @@ const createPDFDocument = (
                   <View style={[pdfStyles.tableCellCenter, { flex: 1.2 }]}>
                     <Text>{group.label}</Text>
                   </View>
-                  <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
-                    <Text>{formatNumber(group.remaining_chicken_birds)}</Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
-                    <Text>
-                      {formatNumber(group.remaining_chicken_weight_kg)}
-                    </Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                    <Text>{formatNumber(group.avg_weight_kg)}</Text>
-                  </View>
                   <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
                     <Text>{formatNumber(group.egg_production_pieces)}</Text>
                   </View>
                   <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
                     <Text>{formatNumber(group.egg_production_kg)}</Text>
                   </View>
+                  <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
+                    <Text>{formatNumber(group.avg_weight_kg)}</Text>
+                  </View>
                   <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
                     <Text>
                       {group.feed_suppliers
@@ -318,17 +303,16 @@ const createPDFDocument = (
                   <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
                     <Text>{formatCurrency(group.average_doc_price_rp)}</Text>
                   </View>
-                  <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                    <Text>{formatCurrency(group.egg_value_rp)}</Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
-                    <Text>{formatCurrency(group.hpp_rp)}</Text>
-                  </View>
                   <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
                     <Text>{formatCurrency(group.egg_hpp_rp_per_kg)}</Text>
                   </View>
-                  <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                    <Text>{formatCurrency(group.remaining_value_rp)}</Text>
+                  <View
+                    style={[
+                      pdfStyles.tableCellRight,
+                      { flex: 1.2, borderRightWidth: 0 },
+                    ]}
+                  >
+                    <Text>{formatCurrency(group.egg_value_rp)}</Text>
                   </View>
                 </View>
               )
@@ -356,16 +340,10 @@ const createPDFDocument = (
                 <Text>Rata-Rata Bobot (Kg)</Text>
               </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 0.8 }]}>
-                <Text>Sisa Ekor</Text>
+                <Text>Sisa Butir</Text>
               </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 0.8 }]}>
-                <Text>Sisa Kg (Ayam)</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 0.8 }]}>
-                <Text>Produksi Telur (Butir)</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 0.8 }]}>
-                <Text>Produksi Telur (Kg)</Text>
+                <Text>Sisa Kg (Telur)</Text>
               </View>
               <View style={[pdfStyles.tableCellHeader, { flex: 1.2 }]}>
                 <Text>Feed (Supplier)</Text>
@@ -376,16 +354,15 @@ const createPDFDocument = (
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
                 <Text>Rata-Rata Harga DOC</Text>
               </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
-                <Text>Nilai Nominal Telur</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 0.8 }]}>
-                <Text>HPP Ayam</Text>
-              </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1 }]}>
                 <Text>HPP Telur (RP/KG)</Text>
               </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
+              <View
+                style={[
+                  pdfStyles.tableCellHeaderRight,
+                  { flex: 1.2, borderRightWidth: 0 },
+                ]}
+              >
                 <Text>Nominal Sisa</Text>
               </View>
             </View>
@@ -394,12 +371,7 @@ const createPDFDocument = (
             {data.rows.map((item: HppPerKandangRow, index: number) => (
               <View
                 key={index}
-                style={[
-                  pdfStyles.tableRow,
-                  index < data.rows.length - 1
-                    ? pdfStyles.tableBorderBottom
-                    : {},
-                ]}
+                style={[pdfStyles.tableRow, pdfStyles.tableBorderBottom]}
               >
                 <View style={[pdfStyles.tableCellCenter, { flex: 0.5 }]}>
                   <Text>{index + 1}</Text>
@@ -416,12 +388,6 @@ const createPDFDocument = (
                 <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
                   <Text>{formatNumber(item.avg_weight_kg)}</Text>
                 </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
-                  <Text>{formatNumber(item.remaining_chicken_birds)}</Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
-                  <Text>{formatNumber(item.remaining_chicken_weight_kg)}</Text>
-                </View>
                 <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
                   <Text>{formatNumber(item.egg_production_pieces)}</Text>
                 </View>
@@ -451,20 +417,202 @@ const createPDFDocument = (
                 <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
                   <Text>{formatCurrency(item.average_doc_price_rp)}</Text>
                 </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                  <Text>{formatCurrency(item.egg_value_rp)}</Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
-                  <Text>{formatCurrency(item.hpp_rp)}</Text>
-                </View>
                 <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
                   <Text>{formatCurrency(item.egg_hpp_rp_per_kg)}</Text>
                 </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                  <Text>{formatCurrency(item.remaining_value_rp)}</Text>
+                <View
+                  style={[
+                    pdfStyles.tableCellRight,
+                    { flex: 1.2, borderRightWidth: 0 },
+                  ]}
+                >
+                  <Text>{formatCurrency(item.egg_value_rp)}</Text>
                 </View>
               </View>
             ))}
+
+            {/* TOTAL Row */}
+            {data.summary?.total && (
+              <View style={pdfStyles.tableRow}>
+                <View
+                  style={[
+                    pdfStyles.tableCellHeader,
+                    {
+                      flex: 0.5,
+                      backgroundColor: '#F5F5F5',
+                      borderBottomWidth: 0,
+                    },
+                  ]}
+                >
+                  <Text>TOTAL</Text>
+                </View>
+                <View
+                  style={[
+                    pdfStyles.tableCellHeader,
+                    {
+                      flex: 1.5,
+                      backgroundColor: '#F5F5F5',
+                      borderBottomWidth: 0,
+                    },
+                  ]}
+                >
+                  <Text>ALL</Text>
+                </View>
+                <View
+                  style={[
+                    pdfStyles.tableCellHeader,
+                    {
+                      flex: 1,
+                      backgroundColor: '#F5F5F5',
+                      borderBottomWidth: 0,
+                    },
+                  ]}
+                >
+                  <Text>-</Text>
+                </View>
+                <View
+                  style={[
+                    pdfStyles.tableCellHeaderRight,
+                    {
+                      flex: 1,
+                      backgroundColor: '#F5F5F5',
+                      borderBottomWidth: 0,
+                    },
+                  ]}
+                >
+                  <Text>
+                    {formatNumber(data.summary.total.average_weight_kg)}
+                  </Text>
+                </View>
+                <View
+                  style={[
+                    pdfStyles.tableCellHeaderRight,
+                    {
+                      flex: 0.8,
+                      backgroundColor: '#F5F5F5',
+                      borderBottomWidth: 0,
+                    },
+                  ]}
+                >
+                  <Text>
+                    {formatNumber(
+                      data.summary.total.total_egg_production_pieces
+                    )}
+                  </Text>
+                </View>
+                <View
+                  style={[
+                    pdfStyles.tableCellHeaderRight,
+                    {
+                      flex: 0.8,
+                      backgroundColor: '#F5F5F5',
+                      borderBottomWidth: 0,
+                    },
+                  ]}
+                >
+                  <Text>
+                    {formatNumber(data.summary.total.total_egg_production_kg)}
+                  </Text>
+                </View>
+                <View
+                  style={[
+                    pdfStyles.tableCellHeader,
+                    {
+                      flex: 1.2,
+                      backgroundColor: '#F5F5F5',
+                      borderBottomWidth: 0,
+                    },
+                  ]}
+                >
+                  <Text>
+                    {data.rows
+                      .flatMap((row: HppPerKandangRow) =>
+                        row.feed_suppliers?.map(
+                          (s: { alias?: string; name: string }) =>
+                            s.alias || s.name
+                        )
+                      )
+                      .filter(
+                        (v: string, i: number, a: string[]) =>
+                          a.indexOf(v) === i
+                      )
+                      .join(' | ') || '-'}
+                  </Text>
+                </View>
+                <View
+                  style={[
+                    pdfStyles.tableCellHeader,
+                    {
+                      flex: 1,
+                      backgroundColor: '#F5F5F5',
+                      borderBottomWidth: 0,
+                    },
+                  ]}
+                >
+                  <Text>
+                    {data.rows
+                      .flatMap((row: HppPerKandangRow) =>
+                        row.doc_suppliers?.map(
+                          (s: { alias?: string; name: string }) =>
+                            s.alias || s.name
+                        )
+                      )
+                      .filter(
+                        (v: string, i: number, a: string[]) =>
+                          a.indexOf(v) === i
+                      )
+                      .join(' | ') || '-'}
+                  </Text>
+                </View>
+                <View
+                  style={[
+                    pdfStyles.tableCellHeaderRight,
+                    {
+                      flex: 1.2,
+                      backgroundColor: '#F5F5F5',
+                      borderBottomWidth: 0,
+                    },
+                  ]}
+                >
+                  <Text>
+                    {formatCurrency(
+                      data.summary.total.total_average_doc_price_rp
+                    )}
+                  </Text>
+                </View>
+                <View
+                  style={[
+                    pdfStyles.tableCellHeaderRight,
+                    {
+                      flex: 1,
+                      backgroundColor: '#F5F5F5',
+                      borderBottomWidth: 0,
+                    },
+                  ]}
+                >
+                  <Text>
+                    {formatCurrency(
+                      data.summary.total.average_egg_hpp_rp_per_kg
+                    )}
+                  </Text>
+                </View>
+                <View
+                  style={[
+                    pdfStyles.tableCellHeaderRight,
+                    {
+                      flex: 1.2,
+                      backgroundColor: '#F5F5F5',
+                      borderBottomWidth: 0,
+                      borderRightWidth: 0,
+                    },
+                  ]}
+                >
+                  <Text>
+                    {formatCurrency(data.summary.total.total_egg_value_rp)}
+                  </Text>
+                </View>
+              </View>
+            )}
           </View>
         </View>
       </Page>
diff --git a/src/components/pages/report/sale/tab/HppPerKandangTab.tsx b/src/components/pages/report/sale/tab/HppPerKandangTab.tsx
index 7d6f0951..7bd774f3 100644
--- a/src/components/pages/report/sale/tab/HppPerKandangTab.tsx
+++ b/src/components/pages/report/sale/tab/HppPerKandangTab.tsx
@@ -10,7 +10,7 @@ import DateInput from '@/components/input/DateInput';
 import NumberInput from '@/components/input/NumberInput';
 import { AreaApi } from '@/services/api/master-data';
 import { LocationApi } from '@/services/api/master-data';
-import { KandangApi } from '@/services/api/master-data';
+import { ProjectFlockKandangApi } from '@/services/api/production';
 import { SaleReportApi } from '@/services/api/report/marketing-sale';
 import Table from '@/components/Table';
 import { ColumnDef, Row, flexRender } from '@tanstack/react-table';
@@ -40,6 +40,9 @@ const HppPerKandangTab = () => {
   // ===== SUBMISSION STATE =====
   const [isSubmitted, setIsSubmitted] = useState(false);
 
+  // ===== VALIDATION STATE =====
+  const [weightMaxError, setWeightMaxError] = useState<string>('');
+
   // ===== TABLE FILTER STATE =====
   const { state: tableFilterState, updateFilter } = useTableFilter({
     initial: {
@@ -58,19 +61,32 @@ const HppPerKandangTab = () => {
     },
   });
 
-  const { options: areaOptions, isLoadingOptions: isLoadingAreas } = useSelect(
-    AreaApi.basePath,
+  const {
+    setInputValue: setAreaInputValue,
+    options: areaOptions,
+    isLoadingOptions: isLoadingAreas,
+    loadMore: loadMoreAreas,
+  } = useSelect(AreaApi.basePath, 'id', 'name', 'search');
+
+  const {
+    setInputValue: setLocationInputValue,
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocations,
+    loadMore: loadMoreLocations,
+  } = useSelect(LocationApi.basePath, 'id', 'name', 'search');
+
+  const {
+    setInputValue: setKandangInputValue,
+    options: kandangOptions,
+    isLoadingOptions: isLoadingKandangs,
+    loadMore: loadMoreKandangs,
+  } = useSelect(
+    ProjectFlockKandangApi.basePath,
     'id',
-    'name',
+    'name_with_period',
     'search'
   );
 
-  const { options: locationOptions, isLoadingOptions: isLoadingLocations } =
-    useSelect(LocationApi.basePath, 'id', 'name', 'search');
-
-  const { options: kandangOptions, isLoadingOptions: isLoadingKandangs } =
-    useSelect(KandangApi.basePath, 'id', 'name', 'search');
-
   const showUnrecordedOptions: OptionType[] = [
     { value: 'false', label: 'Sembunyikan' },
     { value: 'true', label: 'Tampilkan' },
@@ -119,8 +135,12 @@ const HppPerKandangTab = () => {
       const val = e.target.value;
       updateFilter('weight_min', val ? String(parseFloat(val) || 0) : '');
       setIsSubmitted(false);
+
+      if (weightMaxError) {
+        setWeightMaxError('');
+      }
     },
-    [updateFilter]
+    [updateFilter, weightMaxError]
   );
 
   const weightMaxChangeHandler = useCallback<
@@ -128,10 +148,22 @@ const HppPerKandangTab = () => {
   >(
     (e) => {
       const val = e.target.value;
-      updateFilter('weight_max', val ? String(parseFloat(val) || 0) : '');
+      const weightMax = val ? parseFloat(val) || 0 : 0;
+      const weightMin = tableFilterState.weight_min
+        ? parseFloat(tableFilterState.weight_min)
+        : 0;
+
+      if (weightMax < weightMin) {
+        setWeightMaxError('Rentang bobot max tidak boleh lebih kecil dari min');
+        toast.error('Rentang bobot max tidak boleh lebih kecil dari min');
+        return;
+      }
+
+      setWeightMaxError('');
+      updateFilter('weight_max', val ? String(weightMax) : '');
       setIsSubmitted(false);
     },
-    [updateFilter]
+    [updateFilter, tableFilterState.weight_min]
   );
 
   const periodChangeHandler = useCallback<ChangeEventHandler<HTMLInputElement>>(
@@ -317,8 +349,53 @@ const HppPerKandangTab = () => {
       const allExportData =
         allDataForExport.rows as HppPerKandangReport['rows'];
 
+      const perWeightRangeSummary =
+        allDataForExport.summary.per_weight_range || [];
+
       const summaryTotal = allDataForExport.summary.total;
 
+      const rekapitulasiData: { [key: string]: string | number }[] =
+        perWeightRangeSummary.map(
+          (item: HppPerKandangPerWeightRange, index: number) => ({
+            No: index + 1,
+            'Rentang BW': item.label || '',
+            'Sisa Butir': item.egg_production_pieces || 0,
+            'Sisa Kg': item.egg_production_kg || 0,
+            'Rata-Rata Bobot (Kg)': item.avg_weight_kg || 0,
+            'Feed (Supplier)':
+              item.feed_suppliers
+                ?.map(
+                  (s: { alias?: string; name: string }) => s.alias || s.name
+                )
+                .join(' | ') || '',
+            'DOC (Supplier)':
+              item.doc_suppliers
+                ?.map(
+                  (s: { alias?: string; name: string }) => s.alias || s.name
+                )
+                .join(' | ') || '',
+            'Rata-Rata Harga DOC': item.average_doc_price_rp || 0,
+            'HPP Telur (RP/KG)': item.egg_hpp_rp_per_kg || 0,
+            'Nominal Sisa': item.egg_value_rp || 0,
+          })
+        );
+
+      const rekapitulasiWorksheet = XLSX.utils.json_to_sheet(rekapitulasiData);
+
+      const rekapitulasiColWidths = [
+        { wch: 5 }, // No
+        { wch: 15 }, // Rentang BW
+        { wch: 15 }, // Sisa Butir
+        { wch: 12 }, // Sisa Kg
+        { wch: 18 }, // Rata-Rata Bobot (Kg)
+        { wch: 20 }, // Feed (Supplier)
+        { wch: 20 }, // DOC (Supplier)
+        { wch: 20 }, // Rata-Rata Harga DOC
+        { wch: 18 }, // HPP Telur (RP/KG)
+        { wch: 25 }, // Nominal Sisa
+      ];
+      rekapitulasiWorksheet['!cols'] = rekapitulasiColWidths;
+
       const excelData: { [key: string]: string | number }[] = allExportData.map(
         (item: HppPerKandangRow, index: number) => ({
           No: index + 1,
@@ -327,10 +404,8 @@ const HppPerKandangTab = () => {
             ? `${formatNumber(item.weight_range.weight_min)} - ${formatNumber(item.weight_range.weight_max)}`
             : '',
           'Rata-Rata Bobot (KG)': item.avg_weight_kg || 0,
-          'Sisa Ayam (Ekor)': item.remaining_chicken_birds || 0,
-          'Sisa Ayam (KG)': item.remaining_chicken_weight_kg || 0,
-          'Produksi Telur (Butir)': item.egg_production_pieces || 0,
-          'Produksi Telur (KG)': item.egg_production_kg || 0,
+          'Sisa Telur (Butir)': item.egg_production_pieces || 0,
+          'Sisa Telur (KG)': item.egg_production_kg || 0,
           'Feed (Supplier)':
             item.feed_suppliers
               ?.map((s: { alias?: string; name: string }) => s.alias || s.name)
@@ -340,10 +415,8 @@ const HppPerKandangTab = () => {
               ?.map((s: { alias?: string; name: string }) => s.alias || s.name)
               .join(' | ') || '',
           'Rata-Rata Harga DOC (RP)': item.average_doc_price_rp || 0,
-          'Nilai Nominal Telur (RP)': item.egg_value_rp || 0,
-          'HPP Ayam (RP)': item.hpp_rp || 0,
           'HPP Telur (RP/KG)': item.egg_hpp_rp_per_kg || 0,
-          'Nilai Nominal Sisa Ayam (RP)': item.remaining_value_rp || 0,
+          'Nilai Nominal Sisa Telur (RP)': item.egg_value_rp || 0,
         })
       );
 
@@ -352,20 +425,14 @@ const HppPerKandangTab = () => {
         Kandang: 'ALL',
         'Rentang Bobot': '-',
         'Rata-Rata Bobot (KG)': summaryTotal?.average_weight_kg || 0,
-        'Sisa Ayam (Ekor)': summaryTotal?.total_remaining_chicken_birds || 0,
-        'Sisa Ayam (KG)': summaryTotal?.total_remaining_chicken_weight_kg || 0,
-        'Produksi Telur (Butir)':
-          summaryTotal?.total_egg_production_pieces || 0,
-        'Produksi Telur (KG)': summaryTotal?.total_egg_production_kg || 0,
+        'Sisa Telur (Butir)': summaryTotal?.total_egg_production_pieces || 0,
+        'Sisa Telur (KG)': summaryTotal?.total_egg_production_kg || 0,
         'Feed (Supplier)': allFeedSuppliers,
         'DOC (Supplier)': allDocSuppliers,
         'Rata-Rata Harga DOC (RP)':
           summaryTotal?.total_average_doc_price_rp || 0,
-        'Nilai Nominal Telur (RP)': summaryTotal?.total_egg_value_rp || 0,
-        'HPP Ayam (RP)': summaryTotal?.total_hpp_rp || 0,
         'HPP Telur (RP/KG)': summaryTotal?.average_egg_hpp_rp_per_kg || 0,
-        'Nilai Nominal Sisa Ayam (RP)':
-          summaryTotal?.total_remaining_value_rp || 0,
+        'Nilai Nominal Sisa Telur (RP)': summaryTotal?.total_egg_value_rp || 0,
       });
 
       const worksheet = XLSX.utils.json_to_sheet(excelData);
@@ -375,22 +442,23 @@ const HppPerKandangTab = () => {
         { wch: 30 }, // Kandang
         { wch: 15 }, // Rentang Bobot
         { wch: 18 }, // Rata-Rata Bobot (KG)
-        { wch: 15 }, // Sisa Ayam (Ekor)
-        { wch: 15 }, // Sisa Ayam (KG)
-        { wch: 18 }, // Produksi Telur (Butir)
-        { wch: 18 }, // Produksi Telur (KG)
+        { wch: 15 }, // Sisa Telur (Butir)
+        { wch: 15 }, // Sisa Telur (KG)
         { wch: 20 }, // Feed (Supplier)
         { wch: 20 }, // DOC (Supplier)
         { wch: 20 }, // Rata-Rata Harga DOC (RP)
-        { wch: 20 }, // Nilai Nominal Telur (RP)
-        { wch: 15 }, // HPP Ayam (RP)
         { wch: 18 }, // HPP Telur (RP/KG)
-        { wch: 25 }, // Nilai Nominal Sisa Ayam (RP)
+        { wch: 25 }, // Nilai Nominal Sisa Telur (RP)
       ];
       worksheet['!cols'] = colWidths;
 
       const workbook = XLSX.utils.book_new();
-      XLSX.utils.book_append_sheet(workbook, worksheet, 'HPP Per Kandang');
+      XLSX.utils.book_append_sheet(
+        workbook,
+        rekapitulasiWorksheet,
+        'Rekapitulasi'
+      );
+      XLSX.utils.book_append_sheet(workbook, worksheet, 'Detail Per Kandang');
 
       const filename = `laporan-hpp-harian-kandang-periode-${tableFilterState.period}.xlsx`;
 
@@ -494,8 +562,8 @@ const HppPerKandangTab = () => {
         header: 'Kandang',
         accessorKey: 'kandang.name',
         cell: (props) => {
-          const kandang = props.row.original.kandang;
-          return kandang?.name || '-';
+          const row = props.row.original;
+          return row.name_with_periode || row.kandang?.name || '-';
         },
         footer: () => <div className='font-semibold text-gray-900'>ALL</div>,
       },
@@ -525,37 +593,9 @@ const HppPerKandangTab = () => {
           </div>
         ),
       },
-      {
-        id: 'remaining_chicken_birds',
-        header: 'Sisa Ayam (Ekor)',
-        accessorKey: 'remaining_chicken_birds',
-        cell: (props) => {
-          const value = props.row.original.remaining_chicken_birds;
-          return <div className='text-right'>{formatNumber(value)}</div>;
-        },
-        footer: () => (
-          <div className='text-right font-semibold text-gray-900'>
-            {formatNumber(summaryTotal?.total_remaining_chicken_birds || 0)}
-          </div>
-        ),
-      },
-      {
-        id: 'remaining_chicken_weight_kg',
-        header: 'Sisa Ayam (KG)',
-        accessorKey: 'remaining_chicken_weight_kg',
-        cell: (props) => {
-          const value = props.row.original.remaining_chicken_weight_kg;
-          return <div className='text-right'>{formatNumber(value)}</div>;
-        },
-        footer: () => (
-          <div className='text-right font-semibold text-gray-900'>
-            {formatNumber(summaryTotal?.total_remaining_chicken_weight_kg || 0)}
-          </div>
-        ),
-      },
       {
         id: 'egg_production_pieces',
-        header: 'Produksi Telur (Butir)',
+        header: 'Sisa Telur (Butir)',
         accessorKey: 'egg_production_pieces',
         cell: (props) => {
           const value = props.row.original.egg_production_pieces;
@@ -569,7 +609,7 @@ const HppPerKandangTab = () => {
       },
       {
         id: 'egg_production_kg',
-        header: 'Produksi Telur (KG)',
+        header: 'Sisa Telur (KG)',
         accessorKey: 'egg_production_kg',
         cell: (props) => {
           const value = props.row.original.egg_production_kg;
@@ -577,7 +617,7 @@ const HppPerKandangTab = () => {
         },
         footer: () => (
           <div className='text-right font-semibold text-gray-900'>
-            {formatNumber(summaryTotal?.total_remaining_chicken_weight_kg || 0)}
+            {formatNumber(summaryTotal?.total_egg_production_kg || 0)}
           </div>
         ),
       },
@@ -631,34 +671,6 @@ const HppPerKandangTab = () => {
           </div>
         ),
       },
-      {
-        id: 'egg_value_rp',
-        header: 'Nilai Nominal Telur (RP)',
-        accessorKey: 'egg_value_rp',
-        cell: (props) => {
-          const value = props.row.original.egg_value_rp;
-          return <div className='text-right'>{formatCurrency(value)}</div>;
-        },
-        footer: () => (
-          <div className='text-right font-semibold text-gray-900'>
-            {formatCurrency(summaryTotal?.total_egg_value_rp || 0)}
-          </div>
-        ),
-      },
-      {
-        id: 'hpp_rp',
-        header: 'HPP Ayam (RP)',
-        accessorKey: 'hpp_rp',
-        cell: (props) => {
-          const value = props.row.original.hpp_rp;
-          return <div className='text-right'>{formatCurrency(value)}</div>;
-        },
-        footer: () => (
-          <div className='text-right font-semibold text-gray-900'>
-            {formatCurrency(summaryTotal?.total_hpp_rp || 0)}
-          </div>
-        ),
-      },
       {
         id: 'egg_hpp_rp_per_kg',
         header: 'HPP Telur (RP/KG)',
@@ -674,16 +686,16 @@ const HppPerKandangTab = () => {
         ),
       },
       {
-        id: 'remaining_value_rp',
-        header: 'Nilai Nominal Sisa Ayam (RP)',
-        accessorKey: 'remaining_value_rp',
+        id: 'egg_value_rp',
+        header: 'Nilai Nominal Sisa Telur (RP)',
+        accessorKey: 'egg_value_rp',
         cell: (props) => {
-          const value = props.row.original.remaining_value_rp;
+          const value = props.row.original.egg_value_rp;
           return <div className='text-right'>{formatCurrency(value)}</div>;
         },
         footer: () => (
           <div className='text-right font-semibold text-gray-900'>
-            {formatCurrency(summaryTotal?.total_remaining_value_rp || 0)}
+            {formatCurrency(summaryTotal?.total_egg_value_rp || 0)}
           </div>
         ),
       },
@@ -717,7 +729,7 @@ const HppPerKandangTab = () => {
             key={'rekapitulasi-row'}
           >
             <td
-              colSpan={15}
+              colSpan={11}
               className='px-4 py-3 text-gray-900 text-center font-semibold'
             >
               Rekapitulasi per rentang bobot
@@ -739,12 +751,6 @@ const HppPerKandangTab = () => {
                   <td className='text-right'>
                     {formatNumber(item.avg_weight_kg)}
                   </td>
-                  <td className='text-right'>
-                    {formatNumber(item.remaining_chicken_birds)}
-                  </td>
-                  <td className='text-right'>
-                    {formatNumber(item.remaining_chicken_weight_kg)}
-                  </td>
                   <td className='text-right'>
                     {formatNumber(item.egg_production_pieces)}
                   </td>
@@ -764,15 +770,11 @@ const HppPerKandangTab = () => {
                   <td className='text-right'>
                     {formatCurrency(item.average_doc_price_rp)}
                   </td>
-                  <td className='text-right'>
-                    {formatCurrency(item.egg_value_rp)}
-                  </td>
-                  <td className='text-right'>{formatCurrency(item.hpp_rp)}</td>
                   <td className='text-right'>
                     {formatCurrency(item.egg_hpp_rp_per_kg)}
                   </td>
                   <td className='text-right'>
-                    {formatCurrency(item.remaining_value_rp)}
+                    {formatCurrency(item.egg_value_rp)}
                   </td>
                 </tr>
               );
@@ -810,7 +812,11 @@ const HppPerKandangTab = () => {
                 .includes(String(opt.value))
             )}
             onChange={areaChangeHandler}
+            onInputChange={setAreaInputValue}
+            onMenuScrollToBottom={loadMoreAreas}
             isLoading={isLoadingAreas}
+            closeMenuOnSelect={false}
+            hideSelectedOptions={false}
             isClearable
           />
           <SelectInput
@@ -824,7 +830,11 @@ const HppPerKandangTab = () => {
                 .includes(String(opt.value))
             )}
             onChange={locationChangeHandler}
+            onInputChange={setLocationInputValue}
+            onMenuScrollToBottom={loadMoreLocations}
             isLoading={isLoadingLocations}
+            closeMenuOnSelect={false}
+            hideSelectedOptions={false}
             isClearable
           />
           <SelectInput
@@ -838,7 +848,11 @@ const HppPerKandangTab = () => {
                 .includes(String(opt.value))
             )}
             onChange={kandangChangeHandler}
+            onInputChange={setKandangInputValue}
+            onMenuScrollToBottom={loadMoreKandangs}
             isLoading={isLoadingKandangs}
+            closeMenuOnSelect={false}
+            hideSelectedOptions={false}
             isClearable
           />
         </div>
@@ -858,6 +872,8 @@ const HppPerKandangTab = () => {
               placeholder='Masukkan bobot maximum'
               value={tableFilterState.weight_max}
               onChange={weightMaxChangeHandler}
+              isError={!!weightMaxError}
+              errorMessage={weightMaxError}
             />
           </div>
           <DateInput
@@ -884,7 +900,11 @@ const HppPerKandangTab = () => {
         </div>
 
         <div className='mt-4 flex justify-end gap-2 [&_button]:px-4'>
-          <Button color='primary' onClick={handleSubmit}>
+          <Button
+            color='primary'
+            onClick={handleSubmit}
+            disabled={!!weightMaxError}
+          >
             <Icon icon='heroicons:magnifying-glass' width={20} height={20} />
             Cari
           </Button>
diff --git a/src/config/approval-line.ts b/src/config/approval-line.ts
index 4914d258..4b346299 100644
--- a/src/config/approval-line.ts
+++ b/src/config/approval-line.ts
@@ -74,23 +74,7 @@ export const RECORDING_APPROVAL_LINE: ApprovalLine = [
   },
   {
     step_number: 2,
-    step_name: 'Approval Head Area',
-  },
-  {
-    step_number: 3,
-    step_name: 'Approval Business Unit Vice President',
-  },
-  {
-    step_number: 4,
-    step_name: 'Approval Finance',
-  },
-  {
-    step_number: 5,
-    step_name: 'Realisasi',
-  },
-  {
-    step_number: 6,
-    step_name: 'Selesai',
+    step_name: 'Disetujui',
   },
 ] as const;
 
diff --git a/src/config/constant.ts b/src/config/constant.ts
index 364f1824..b3621c8f 100644
--- a/src/config/constant.ts
+++ b/src/config/constant.ts
@@ -10,61 +10,65 @@ export const MAIN_DRAWER_LINKS: SidebarMenuItem[] = [
     text: 'Daily Checklist',
     link: '/daily-checklist',
     icon: 'heroicons-outline:clipboard-check',
-    // TODO: add permission
-    // permission: ['lti.daily_checklist.list'],
+    permission: [
+      'lti.daily_checklist.dashboard.list',
+      'lti.daily_checklist.create',
+      'lti.daily_checklist.list',
+      'lti.daily_checklist.detail',
+      'lti.daily_checklist.reports',
+      'lti.daily_checklist.master_data.employee',
+      'lti.daily_checklist.master_data.activity',
+      'lti.daily_checklist.master_data.configuration',
+    ],
     submenu: [
       {
         text: 'Dashboard',
         link: '/daily-checklist/dashboard',
         icon: 'lucide:layout-dashboard',
-        // TODO: add permission
-        // permission: ['lti.daily_checklist.list'],
+        permission: ['lti.daily_checklist.dashboard.list'],
       },
       {
         text: 'Daily Checklist',
         link: '/daily-checklist/daily-checklist',
         icon: 'lucide:clipboard-check',
-        // TODO: add permission
-        // permission: ['lti.daily_checklist.list'],
+        permission: ['lti.daily_checklist.create'],
       },
       {
         text: 'Daftar Daily Checklist',
         link: '/daily-checklist/list-daily-checklist',
         icon: 'lucide:circle-check',
-        // TODO: add permission
-        // permission: ['lti.daily_checklist.list'],
+        permission: ['lti.daily_checklist.list'],
       },
       {
         text: 'Laporan',
         link: '/daily-checklist/reports',
         icon: 'lucide:file-text',
-        // TODO: add permission
-        // permission: ['lti.daily_checklist.list'],
+        permission: ['lti.daily_checklist.reports'],
       },
       {
         text: 'Master Data',
         link: '/daily-checklist/master-data',
         icon: 'lucide:database',
-        // TODO: add permission
-        // permission: ['lti.daily_checklist.list'],
+        permission: [
+          'lti.daily_checklist.master_data.employee',
+          'lti.daily_checklist.master_data.activity',
+          'lti.daily_checklist.master_data.configuration',
+        ],
         submenu: [
           {
             text: 'Employee (ABK)',
             link: '/daily-checklist/master-data/employee',
-            // TODO: add permission
-            // permission: ['lti.daily_checklist.list'],
+            permission: ['lti.daily_checklist.master_data.employee'],
           },
           {
             text: 'Aktivitas',
             link: '/daily-checklist/master-data/activity',
-            // TODO: add permission
-            // permission: ['lti.daily_checklist.list'],
+            permission: ['lti.daily_checklist.master_data.activity'],
           },
           {
             text: 'Konfigurasi',
             link: '/daily-checklist/master-data/configuration',
-            // TODO: add permission
-            // permission: ['lti.daily_checklist.list'],
+            permission: ['lti.daily_checklist.master_data.configuration'],
           },
         ],
       },
@@ -457,3 +461,14 @@ export const MARKETING_TYPE_OPTIONS = [
     value: 'trading',
   },
 ];
+
+export const MARKETING_DATE_FILTER_TYPE_OPTIONS = [
+  {
+    label: 'Tanggal Realisasi',
+    value: 'realization_date',
+  },
+  {
+    label: 'Tanggal SO',
+    value: 'so_date',
+  },
+];
diff --git a/src/config/route-permission.ts b/src/config/route-permission.ts
index 9a0c9d2e..44f3728e 100644
--- a/src/config/route-permission.ts
+++ b/src/config/route-permission.ts
@@ -5,22 +5,22 @@ export const ROUTE_PERMISSIONS: Record<string, string[]> = {
   '/dashboard/': ['lti.dashboard.list'],
 
   // Daily Checklist
-  // TODO: use real daily checklist permission name
-  // '/daily-checklist/': ['lti.daily_checklist.list'],
-  // '/daily-checklist/dashboard/': ['lti.daily_checklist.list'],
-  // '/daily-checklist/list-daily-checklist/': ['lti.daily_checklist.list'],
-  // '/daily-checklist/list-daily-checklist/detail/': ['lti.daily_checklist.detail'],
-  // '/daily-checklist/reports/': ['lti.daily_checklist.reports'],
-  // '/daily-checklist/master-data/employee/': ['lti.dashboard.master_data.employee'],
-  // '/daily-checklist/master-data/activity/': ['lti.dashboard.master_data.activity'],
-  '/daily-checklist/dashboard/': ['lti.dashboard.list'],
-  '/daily-checklist/daily-checklist/': ['lti.dashboard.list'],
-  '/daily-checklist/list-daily-checklist/': ['lti.dashboard.list'],
-  '/daily-checklist/list-daily-checklist/detail/': ['lti.dashboard.list'],
-  '/daily-checklist/reports/': ['lti.dashboard.list'],
-  '/daily-checklist/master-data/employee/': ['lti.dashboard.list'],
-  '/daily-checklist/master-data/activity/': ['lti.dashboard.list'],
-  '/daily-checklist/master-data/configuration/': ['lti.dashboard.list'],
+  '/daily-checklist/dashboard/': ['lti.daily_checklist.dashboard.list'],
+  '/daily-checklist/daily-checklist/': ['lti.daily_checklist.create'],
+  '/daily-checklist/list-daily-checklist/': ['lti.daily_checklist.list'],
+  '/daily-checklist/list-daily-checklist/detail/': [
+    'lti.daily_checklist.detail',
+  ],
+  '/daily-checklist/reports/': ['lti.daily_checklist.reports'],
+  '/daily-checklist/master-data/employee/': [
+    'lti.daily_checklist.master_data.employee',
+  ],
+  '/daily-checklist/master-data/activity/': [
+    'lti.daily_checklist.master_data.activity',
+  ],
+  '/daily-checklist/master-data/configuration/': [
+    'lti.daily_checklist.master_data.configuration',
+  ],
 
   // Production
   // Production - Project Flock
@@ -121,6 +121,7 @@ export const ROUTE_PERMISSIONS: Record<string, string[]> = {
   '/report/finance/': [
     'lti.repport.finance.list',
     'lti.repport.debtsupplier.list',
+    'lti.repport.customerpayment.list',
   ],
 
   // Inventory
diff --git a/src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx b/src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx
index 7bd0be83..314381fd 100644
--- a/src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx
+++ b/src/figma-make/components/pages/daily-checklist/DailyChecklistContent.tsx
@@ -601,15 +601,15 @@ export function DailyChecklistContent() {
   ) => {
     const taskId = taskIdsByPhaseActivityId[activityId];
 
-    console.log('[CHECKBOX] Click detected:', {
-      activityId,
-      employeeId,
-      checked,
-      taskId,
-      hasTaskId: !!taskId,
-      checklistStatus,
-      isEditable,
-    });
+    // console.log('[CHECKBOX] Click detected:', {
+    //   activityId,
+    //   employeeId,
+    //   checked,
+    //   taskId,
+    //   hasTaskId: !!taskId,
+    //   checklistStatus,
+    //   isEditable,
+    // });
 
     if (!taskId) {
       console.error('[CHECKBOX] No taskId found for activityId:', activityId);
@@ -638,10 +638,10 @@ export function DailyChecklistContent() {
           },
         },
       };
-      console.log(
-        '[CHECKBOX] State updated optimistically:',
-        updated[taskId]?.[employeeId]
-      );
+      // console.log(
+      //   '[CHECKBOX] State updated optimistically:',
+      //   updated[taskId]?.[employeeId]
+      // );
       return updated;
     });
 
@@ -653,7 +653,7 @@ export function DailyChecklistContent() {
       note: assignments[taskId]?.[employeeId]?.note || null,
     };
 
-    console.log('[CHECKBOX] Saving to database:', payload);
+    // console.log('[CHECKBOX] Saving to database:', payload);
 
     const checkOrUncheckAssignmentRes =
       await DailyChecklistApi.checkOrUncheckAssignment(payload);
@@ -679,7 +679,7 @@ export function DailyChecklistContent() {
       return;
     }
 
-    console.log('[CHECKBOX] Saved successfully');
+    // console.log('[CHECKBOX] Saved successfully');
   };
 
   const handleNoteChange = async (
diff --git a/src/lib/formik-helper.ts b/src/lib/formik-helper.ts
index 9c457e86..17c6bc7d 100644
--- a/src/lib/formik-helper.ts
+++ b/src/lib/formik-helper.ts
@@ -1,4 +1,4 @@
-import { FormikErrors } from 'formik';
+import { FormikErrors, FormikValues } from 'formik';
 
 export type ErrorMessage = {
   key: string;
@@ -69,3 +69,66 @@ export function getUniqueFormikErrors<T>(errors: FormikErrors<T>): string[] {
 export function getAllFormikErrors<T>(errors: FormikErrors<T>): ErrorMessage[] {
   return parseFormikErrors(errors);
 }
+
+/**
+ * Check if a value is considered "filled" (not empty)
+ * @param value - Value to check
+ * @returns True if value is filled, false otherwise
+ */
+function isValueFilled(value: unknown): boolean {
+  // Check for null or undefined
+  if (value === null || value === undefined) {
+    return false;
+  }
+
+  // Check for empty string
+  if (typeof value === 'string' && value.trim() === '') {
+    return false;
+  }
+
+  // Check for empty array
+  if (Array.isArray(value) && value.length === 0) {
+    return false;
+  }
+
+  // Check for empty object (but not Date or other special objects)
+  if (
+    typeof value === 'object' &&
+    !Array.isArray(value) &&
+    !(value instanceof Date) &&
+    Object.keys(value).length === 0
+  ) {
+    return false;
+  }
+
+  return true;
+}
+
+/**
+ * Count the number of filled (non-empty) values in Formik values object
+ * @param values - Formik values object
+ * @returns Number of filled values
+ * @example
+ * const values = {
+ *   name: 'John',
+ *   email: '',
+ *   age: null,
+ *   tags: ['tag1', 'tag2'],
+ *   emptyArray: [],
+ * };
+ * getFilledFormikValuesCount(values); // Returns 2 (name and tags)
+ */
+export function getFilledFormikValuesCount<T extends FormikValues>(
+  values: T
+): number {
+  let count = 0;
+
+  Object.keys(values).forEach((key) => {
+    const value = values[key];
+    if (isValueFilled(value)) {
+      count++;
+    }
+  });
+
+  return count;
+}
diff --git a/src/services/api/closing.ts b/src/services/api/closing.ts
index 892fc88e..7462e41a 100644
--- a/src/services/api/closing.ts
+++ b/src/services/api/closing.ts
@@ -11,6 +11,8 @@ import {
   ClosingSapronakCalculation,
   ClosingProductionData,
   ClosingHppExpedition,
+  ClosingIncomingSapronakSummary,
+  ClosingOutgoingSapronakSummary,
 } from '@/types/api/closing';
 import { BaseApiResponse } from '@/types/api/api-general';
 import { httpClient, httpClientFetcher } from '@/services/http/client';
@@ -62,6 +64,14 @@ export class ClosingApiService extends BaseApiService<Closing, null, null> {
     );
   }
 
+  async getAllIncomingSapronakSummaryFetcher(
+    endpoint: string
+  ): Promise<BaseApiResponse<ClosingIncomingSapronakSummary[]>> {
+    return await httpClientFetcher<
+      BaseApiResponse<ClosingIncomingSapronakSummary[]>
+    >(endpoint);
+  }
+
   async getAllOutgoingSapronakFetcher(
     endpoint: string
   ): Promise<BaseApiResponse<ClosingOutgoingSapronak[]>> {
@@ -70,6 +80,14 @@ export class ClosingApiService extends BaseApiService<Closing, null, null> {
     );
   }
 
+  async getAllOutgoingSapronakSummaryFetcher(
+    endpoint: string
+  ): Promise<BaseApiResponse<ClosingOutgoingSapronakSummary[]>> {
+    return await httpClientFetcher<
+      BaseApiResponse<ClosingOutgoingSapronakSummary[]>
+    >(endpoint);
+  }
+
   async getGeneralInfo(
     id: number
   ): Promise<BaseApiResponse<ClosingGeneralInformation> | undefined> {
@@ -91,10 +109,11 @@ export class ClosingApiService extends BaseApiService<Closing, null, null> {
   }
 
   async getProductionData(
-    id: number
+    id: number,
+    kandangId?: number
   ): Promise<BaseApiResponse<ClosingProductionData> | undefined> {
     try {
-      const getProductionDataPath = `${this.basePath}/${id}/production-data`;
+      const getProductionDataPath = `${this.basePath}/${id}/production-data?kandang_id=${kandangId ? `${kandangId}` : ''}`;
       const getProductionDataRes = await httpClient<
         BaseApiResponse<ClosingProductionData>
       >(getProductionDataPath);
@@ -131,10 +150,11 @@ export class ClosingApiService extends BaseApiService<Closing, null, null> {
   }
 
   async getOverhead(
-    id: number
+    id: number,
+    kandangId?: number
   ): Promise<BaseApiResponse<ClosingOverhead> | undefined> {
     try {
-      const path = `${this.basePath}/${id}/overhead`;
+      const path = `${this.basePath}/${id}${kandangId ? `/${kandangId}` : ''}/overhead`;
       return await httpClient<BaseApiResponse<ClosingOverhead>>(path, {
         method: 'GET',
       });
@@ -147,10 +167,11 @@ export class ClosingApiService extends BaseApiService<Closing, null, null> {
   }
 
   async getFinance(
-    id: number
+    id: number,
+    kandangId?: number
   ): Promise<BaseApiResponse<ClosingFinance> | undefined> {
     try {
-      const path = `${this.basePath}/${id}/keuangan`;
+      const path = `${this.basePath}/${id}${kandangId ? `/${kandangId}` : ''}/keuangan`;
       return await httpClient<BaseApiResponse<ClosingFinance>>(path, {
         method: 'GET',
       });
diff --git a/src/services/api/marketing/marketing.ts b/src/services/api/marketing/marketing.ts
index 59b9b4c8..05afaa30 100644
--- a/src/services/api/marketing/marketing.ts
+++ b/src/services/api/marketing/marketing.ts
@@ -48,8 +48,7 @@ export class SalesOrderService extends BaseApiService<
         },
       });
     } catch (error) {
-      console.error('Error approve marketing:', error);
-      return undefined;
+      throw error;
     }
   }
 
@@ -72,8 +71,7 @@ export class SalesOrderService extends BaseApiService<
         },
       });
     } catch (error) {
-      console.error('Error bulk approve marketing:', error);
-      return undefined;
+      throw error;
     }
   }
 
@@ -95,8 +93,7 @@ export class SalesOrderService extends BaseApiService<
         },
       });
     } catch (error) {
-      console.error('Error delivery marketing:', error);
-      return undefined;
+      throw error;
     }
   }
 }
diff --git a/src/services/api/production/chickin.ts b/src/services/api/production/chickin.ts
index f582c5d4..0efaa0f9 100644
--- a/src/services/api/production/chickin.ts
+++ b/src/services/api/production/chickin.ts
@@ -35,8 +35,7 @@ export class ChickinService extends BaseApiService<
         },
       });
     } catch (error) {
-      console.error('Error approve chickin:', error);
-      return undefined;
+      throw error;
     }
   }
 }
diff --git a/src/services/api/report/debt-supplier.ts b/src/services/api/report/debt-supplier.ts
index dad46d18..706c873e 100644
--- a/src/services/api/report/debt-supplier.ts
+++ b/src/services/api/report/debt-supplier.ts
@@ -15,9 +15,7 @@ export class DebtSupplierApiService extends BaseApiService<
     supplier_ids?: string,
     filter_by?: string,
     start_date?: string,
-    end_date?: string,
-    page?: number,
-    limit?: number
+    end_date?: string
   ): Promise<BaseApiResponse<DebtSupplier[]> | undefined> {
     return await this.customRequest<BaseApiResponse<DebtSupplier[]>>(
       `debt-supplier`,
@@ -28,8 +26,6 @@ export class DebtSupplierApiService extends BaseApiService<
           filter_by: filter_by,
           start_date: start_date,
           end_date: end_date,
-          page: page,
-          limit: limit,
         },
       }
     );
diff --git a/src/services/api/report/finance-report.ts b/src/services/api/report/finance-report.ts
index e8ec52c8..1102f99c 100644
--- a/src/services/api/report/finance-report.ts
+++ b/src/services/api/report/finance-report.ts
@@ -1,7 +1,6 @@
 import { BaseApiService } from '@/services/api/base';
 import { BaseApiResponse } from '@/types/api/api-general';
 import { CustomerPaymentReport } from '@/types/api/report/customer-payment';
-import { DebtSupplier } from '@/types/api/report/debt-supplier';
 
 export class FinanceApiService extends BaseApiService<
   CustomerPaymentReport,
@@ -13,9 +12,12 @@ export class FinanceApiService extends BaseApiService<
   }
 
   async getCustomerPaymentReport(
-    customer_id?: string,
-    sales?: string,
-    filter_by?: 'do_date',
+    customer_ids?: string,
+    // TODO: Uncomment when BE is ready
+    // sales_id?: string,
+    // filter_by?: 'do_date',
+    sales_id?: string,
+    filter_by?: 'do_date' | undefined,
     start_date?: string,
     end_date?: string,
     page?: number,
@@ -26,9 +28,10 @@ export class FinanceApiService extends BaseApiService<
       {
         method: 'GET',
         params: {
-          customer_id: customer_id,
-          sales: sales,
-          filter_by: filter_by,
+          customer_ids: customer_ids,
+          // TODO: Uncomment when BE is ready
+          // sales_id: sales_id,
+          // filter_by: filter_by,
           start_date: start_date,
           end_date: end_date,
           page: page,
@@ -39,8 +42,8 @@ export class FinanceApiService extends BaseApiService<
   }
 }
 
-// export const FinanceApi = new FinanceApiService('reports');
+export const FinanceApi = new FinanceApiService('reports');
 
-export const FinanceApi = new FinanceApiService(
-  'http://localhost:4010/api/reports/finance'
-);
+// export const FinanceApi = new FinanceApiService(
+//   'http://localhost:4010/api/reports/finance'
+// );
diff --git a/src/services/api/report/marketing-sale.ts b/src/services/api/report/marketing-sale.ts
index bb9c1f49..92c59b2c 100644
--- a/src/services/api/report/marketing-sale.ts
+++ b/src/services/api/report/marketing-sale.ts
@@ -44,9 +44,7 @@ export class MarketingSaleReportService extends BaseApiService<
   }
 }
 
-export const SaleReportApi = new MarketingSaleReportService(
-  'reports/marketings'
-);
+export const SaleReportApi = new MarketingSaleReportService('reports');
 
 // export const SaleReportApi = new MarketingSaleReportService(
 //   'http://localhost:4010/api/reports/marketings'
diff --git a/src/services/hooks/useFormikErrorList.ts b/src/services/hooks/useFormikErrorList.ts
index 9d299322..94aa78bd 100644
--- a/src/services/hooks/useFormikErrorList.ts
+++ b/src/services/hooks/useFormikErrorList.ts
@@ -38,6 +38,9 @@ export const useFormikErrorList = <T>(
 
     // Validate form
     const isValid = await handleValidateForm();
+    if (isValid) {
+      close();
+    }
 
     // Call onAfterValidation callback if validation passed
     if (options?.onAfterValidation) {
diff --git a/src/stores/dashboard/dashboard.store.ts b/src/stores/dashboard/dashboard.store.ts
new file mode 100644
index 00000000..439ab3d3
--- /dev/null
+++ b/src/stores/dashboard/dashboard.store.ts
@@ -0,0 +1,24 @@
+'use client';
+
+import { create } from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+import { createDashboardFilterSlice } from '@/stores/dashboard/slices/dashboard-filter.slice';
+import { DashboardFilterSlice } from '@/types/stores';
+
+export type DashboardStore = DashboardFilterSlice;
+
+export const useDashboardStore = create<DashboardStore>()(
+  devtools(
+    persist(
+      (...args) => ({
+        ...createDashboardFilterSlice(...args),
+      }),
+      {
+        name: 'dashboard-filter-cache',
+      }
+    ),
+    {
+      name: 'DashboardStore',
+    }
+  )
+);
diff --git a/src/stores/dashboard/index.ts b/src/stores/dashboard/index.ts
new file mode 100644
index 00000000..3ccba369
--- /dev/null
+++ b/src/stores/dashboard/index.ts
@@ -0,0 +1,2 @@
+export { useDashboardStore } from './dashboard.store';
+export type { DashboardStore } from './dashboard.store';
diff --git a/src/stores/dashboard/slices/dashboard-filter.slice.ts b/src/stores/dashboard/slices/dashboard-filter.slice.ts
new file mode 100644
index 00000000..dc398b78
--- /dev/null
+++ b/src/stores/dashboard/slices/dashboard-filter.slice.ts
@@ -0,0 +1,43 @@
+import { DashboardFilterSlice } from '@/types/stores';
+import { StateCreator } from 'zustand';
+
+export const createDashboardFilterSlice: StateCreator<
+  DashboardFilterSlice,
+  [],
+  [],
+  DashboardFilterSlice
+> = (set) => ({
+  // Initial state
+  filterValues: {
+    startDate: '',
+    endDate: '',
+    analysisMode: 'OVERVIEW',
+    comparisonType: undefined,
+    location: [],
+    locationIds: undefined,
+    flock: undefined,
+    flockIds: undefined,
+    kandang: undefined,
+    kandangIds: undefined,
+  },
+
+  // Actions
+  setFilterValues: (values) => set({ filterValues: values }),
+
+  resetFilterValues: () => {
+    return set({
+      filterValues: {
+        startDate: '',
+        endDate: '',
+        analysisMode: 'OVERVIEW',
+        comparisonType: undefined,
+        location: [],
+        locationIds: undefined,
+        flock: undefined,
+        flockIds: undefined,
+        kandang: undefined,
+        kandangIds: undefined,
+      },
+    });
+  },
+});
diff --git a/src/types/api/closing.d.ts b/src/types/api/closing.d.ts
index 56406ada..ec256a45 100644
--- a/src/types/api/closing.d.ts
+++ b/src/types/api/closing.d.ts
@@ -11,6 +11,7 @@ import { Product } from '@type/api/master-data/product';
 import { Customer } from '@type/api/master-data/customer';
 import { BaseMetadata } from '@/types/api/api-general';
 import { ProjectFlock } from '@/types/api/production/project-flock';
+import { BaseUom } from '@/types/api/master-data/uom';
 
 export type BaseSales = {
   id: number;
@@ -104,8 +105,16 @@ export type ClosingIncomingSapronak = {
   notes: string;
 };
 
+export type ClosingIncomingSapronakSummary = {
+  category: string;
+  total_qty: number;
+  uom: BaseUom;
+};
+
 export type ClosingOutgoingSapronak = ClosingIncomingSapronak;
 
+export type ClosingOutgoingSapronakSummary = ClosingIncomingSapronakSummary;
+
 export type ClosingProductionData = {
   purchase: {
     initial_population: number;
@@ -219,64 +228,30 @@ export type ClosingSales = BaseMetadata & BaseClosingSales;
 
 // ====== FINANCE ======
 export interface ClosingFinance {
-  project_flock_id: number;
-  period: number;
-  project_type: string;
-  volume_base: ClosingFinanceVolumeBase;
-  hpp_purchases: ClosingFinanceHppPurchases;
+  hpp: ClosingFinanceHpp;
   profit_loss: ClosingFinanceProfitLoss;
 }
 
-export interface ClosingFinanceProfitLoss {
-  title: string;
-  data: ProfitLossData;
+export interface ClosingFinanceHpp {
+  items: HppItem[];
+  summary: HppSummary;
 }
 
-export interface ClosingFinanceHppPurchases {
-  title: string;
-  hpp: GroupHppPurchase[];
-  summary_hpp: HppPurchasesSummary;
-}
-
-export interface ClosingFinanceVolumeBase {
-  total_birds: number;
-  total_weight_kg: number;
-}
-
-export interface ProfitLossData {
-  penjualan: ProfitLossDataAmount[];
-  pembelian: ProfitLossDataAmount[];
-  summary: ProfitLossDataSummary;
-}
-
-export interface GroupHppPurchase {
-  group_name: string;
-  data: HppPurchaseData[];
-}
-
-export interface ProfitLossDataSummary {
-  gross_profit: DataSummarySubTotal;
-  sub_total: DataSummarySubTotal;
-  net_profit: DataSummarySubTotal;
-}
-
-export interface ProfitLossDataAmount {
-  type: string;
-  rp_per_bird: number;
-  rp_per_kg: number;
-  amount: number;
-}
-
-export interface HppPurchasesSummary {
+export interface HppItem {
+  id: number;
+  category: string;
+  code: string;
   label: string;
   budgeting: HppPurchaseDataAmount;
   realization: HppPurchaseDataAmount;
 }
 
-export interface HppPurchaseData {
-  type: string;
+export interface HppSummary {
+  label: string;
   budgeting: HppPurchaseDataAmount;
   realization: HppPurchaseDataAmount;
+  egg_budgeting: HppPurchaseDataAmount;
+  egg_realization: HppPurchaseDataAmount;
 }
 
 export interface HppPurchaseDataAmount {
@@ -285,8 +260,27 @@ export interface HppPurchaseDataAmount {
   amount: number;
 }
 
-export interface DataSummarySubTotal {
+export interface ClosingFinanceProfitLoss {
+  items: ProfitLossItem[];
+  summary: ProfitLossSummary;
+}
+
+export interface ProfitLossItem {
+  code: string;
   label: string;
+  type: string;
+  rp_per_bird: number;
+  rp_per_kg: number;
+  amount: number;
+}
+
+export interface ProfitLossSummary {
+  gross_profit: ProfitLossAmount;
+  sub_total: ProfitLossAmount;
+  net_profit: ProfitLossAmount;
+}
+
+export interface ProfitLossAmount {
   rp_per_bird: number;
   rp_per_kg: number;
   amount: number;
diff --git a/src/types/api/dashboard/dashboard.d.ts b/src/types/api/dashboard/dashboard.d.ts
index ec3dafdb..749b469a 100644
--- a/src/types/api/dashboard/dashboard.d.ts
+++ b/src/types/api/dashboard/dashboard.d.ts
@@ -6,7 +6,7 @@ export interface Dashboard {
 }
 
 export interface DashboardComparisonCharts {
-  location: DashboardCharts;
+  farm: DashboardCharts;
   flock: DashboardCharts;
   kandang: DashboardCharts;
 }
diff --git a/src/types/api/expense.d.ts b/src/types/api/expense.d.ts
index 12455cc8..3ca57dd0 100644
--- a/src/types/api/expense.d.ts
+++ b/src/types/api/expense.d.ts
@@ -34,7 +34,7 @@ export type BaseExpense = {
       nonstock_id: number;
       qty: number;
       price: number;
-      note?: string;
+      notes?: string;
       nonstock: Pick<BaseNonstock, 'id' | 'name' | 'flags'>;
       created_at: string;
     }[];
@@ -43,7 +43,7 @@ export type BaseExpense = {
       expense_nonstock_id: number;
       qty: number;
       price: number;
-      note?: string;
+      notes?: string;
       nonstock: Pick<BaseNonstock, 'id' | 'name' | 'flags'>;
       created_at: string;
     }[];
diff --git a/src/types/api/master-data/product.d.ts b/src/types/api/master-data/product.d.ts
index e82f857e..7fd2c7c1 100644
--- a/src/types/api/master-data/product.d.ts
+++ b/src/types/api/master-data/product.d.ts
@@ -1,20 +1,20 @@
 import { BaseMetadata } from '@/types/api/api-general';
 import { Uom } from '@/types/api/master-data/uom';
 import { ProductCategory } from '@/types/api/master-data/product-category';
-import { Supplier } from '@/types/api/master-data/supplier';
+import { BaseSupplier, Supplier } from '@/types/api/master-data/supplier';
 
 export type BaseProduct = {
   id: number;
   name: string;
   brand: string;
-  sku: string;
+  sku?: string;
   product_price: number;
   selling_price?: number;
   tax?: number;
-  expiry_period: number;
+  expiry_period?: number;
   uom: Uom;
   product_category: ProductCategory;
-  suppliers: Supplier[];
+  suppliers: (BaseSupplier & { price: number })[];
   flags: string[];
 };
 
@@ -23,14 +23,17 @@ export type Product = BaseMetadata & BaseProduct;
 export type CreateProductPayload = {
   name: string;
   brand: string;
-  sku: string;
+  sku?: string;
   uom_id: number;
   product_category_id: number;
   product_price: number;
-  selling_price: number;
-  tax: number;
-  expiry_period: number;
-  supplier_ids: number[];
+  selling_price?: number;
+  tax?: number;
+  expiry_period?: number;
+  suppliers: {
+    supplier_id: number;
+    price: number;
+  }[];
   flags: string[];
 };
 
diff --git a/src/types/api/production/project-flock-kandang.d.ts b/src/types/api/production/project-flock-kandang.d.ts
index 8c8d6273..111ca98b 100644
--- a/src/types/api/production/project-flock-kandang.d.ts
+++ b/src/types/api/production/project-flock-kandang.d.ts
@@ -10,6 +10,7 @@ export type BaseProjectFlockKandang = {
   kandang_id: number;
   kandang: Kandang;
   project_flock: ProjectFlock;
+  name_with_period?: string;
   approval: BaseApproval;
   chickins?: Chickin[];
   available_qtys?: AvailableQty[];
diff --git a/src/types/api/production/project-flock.d.ts b/src/types/api/production/project-flock.d.ts
index 66cc39ed..dcc1a348 100644
--- a/src/types/api/production/project-flock.d.ts
+++ b/src/types/api/production/project-flock.d.ts
@@ -6,6 +6,7 @@ import { Location } from '@/types/api/master-data/location';
 import { BaseApproval, BaseMetadata } from '@/types/api/api-general';
 import { Nonstock } from '@/types/api/master-data/nonstock';
 import { ProductionStandard } from '@/types/api/master-data/production-standard';
+import { Warehouse } from '@/types/api/master-data/warehouse';
 
 export type BaseProjectFlock = {
   id: number;
@@ -71,6 +72,7 @@ export type ProjectFlockKandangLookup = {
   kandang_id: number;
   kandang: Kandang;
   project_flock: ProjectFlock;
+  warehouse: Warehouse;
   quantity: number;
   available_quantity?: number;
   population: number;
diff --git a/src/types/api/production/recording.d.ts b/src/types/api/production/recording.d.ts
index 1728516a..eb611a3b 100644
--- a/src/types/api/production/recording.d.ts
+++ b/src/types/api/production/recording.d.ts
@@ -1,34 +1,54 @@
 import { BaseApproval, BaseMetadata, User } from '@/types/api/api-general';
 import { ProductWarehouse } from '@/types/api/inventory/product-warehouse';
+import { Warehouse } from '@/types/api/master-data/warehouse';
+import { Kandang } from '@/types/api/master-data/kandang';
+import { Location } from '@/types/api/master-data/location';
+
+export type ProductionStandard = {
+  id: number;
+  week: number;
+  name: string;
+  hen_day_std: number;
+  hen_house_std: number;
+  feed_intake_std: number;
+  max_depletion_std: number;
+  egg_mass_std: number;
+  egg_weight_std: number;
+};
+
+export type FCR = {
+  id: number;
+  name: string;
+  fcr_std: number;
+};
+
+export type ProjectFlock = {
+  project_flock_kandang_id: number;
+  flock_name: string;
+  project_flock_category: 'GROWING' | 'LAYING';
+  period: number;
+  production_standart: ProductionStandard;
+  fcr: FCR;
+  total_chick_qty: number;
+};
 
 export type ProductionMetrics = {
   total_depletion_qty: number;
   cum_depletion_rate: number;
   cum_intake: number;
   fcr_value: number;
-  fcr_std?: number;
-  total_chick_qty: number;
   hen_day?: number;
   hen_house?: number;
   feed_intake?: number;
-  feed_intake_std?: number;
   egg_mass?: number;
   egg_weight?: number;
-  hen_day_std?: number;
-  hen_house_std?: number;
-  egg_mass_std?: number;
-  egg_weight_std?: number;
-  daily_gain?: number;
-  avg_daily_gain?: number;
-  cum_depletion?: number;
 };
 
 export type BaseRecording = {
   id: number;
-  project_flock_kandang_id: number;
+  project_flock: ProjectFlock;
   record_datetime: string;
   day: number;
-  project_flock_category?: 'GROWING' | 'LAYING';
 } & ProductionMetrics;
 
 export type RecordingDepletion = {
@@ -68,6 +88,10 @@ export type Recording = BaseMetadata &
   BaseRecording & {
     approval?: BaseApproval;
     created_user: User;
+    warehouse?: Warehouse;
+    kandang?: Kandang;
+    location?: Location;
+    product_category?: 'GROWING' | 'LAYING';
     depletions?: RecordingDepletion[];
     stocks?: RecordingStock[];
     eggs?: RecordingEgg[];
@@ -81,20 +105,21 @@ export type NextDayRecording = {
 
 export type CreateGrowingRecordingPayload = {
   project_flock_kandang_id: number;
+  record_date: string;
   stocks?: {
     product_warehouse_id: number;
     qty: number;
   }[];
   depletions?: {
-    product_warehouse_id: number;
-    qty: number;
+    product_warehouse_id?: number;
+    qty?: number;
   }[];
 };
 
 export type CreateEggPayload = {
-  product_warehouse_id: number;
-  qty: number;
-  weight: number;
+  product_warehouse_id?: number;
+  qty?: number;
+  weight?: number;
 };
 
 export type CreateLayingRecordingPayload = CreateGrowingRecordingPayload & {
diff --git a/src/types/api/purchase/purchase.d.ts b/src/types/api/purchase/purchase.d.ts
index 34798ac3..9ad59f8b 100644
--- a/src/types/api/purchase/purchase.d.ts
+++ b/src/types/api/purchase/purchase.d.ts
@@ -120,12 +120,12 @@ export type CreateAcceptApprovalRequestPayload = {
     purchase_item_id: number;
     received_date: string;
     travel_number: string;
-    vehicle_number: string;
-    expedition_vendor_id: number;
+    vehicle_number?: string | null;
+    expedition_vendor_id?: number | null;
     received_qty: number;
-    transport_per_item: number;
+    transport_per_item?: number | null;
   }[];
-  travel_documents?: File[];
+  travel_documents?: File[] | null;
 };
 
 export type DeletePurchaseRequestItemPayload = {
diff --git a/src/types/api/report/customer-payment.d.ts b/src/types/api/report/customer-payment.d.ts
index bfa059c9..90834cdc 100644
--- a/src/types/api/report/customer-payment.d.ts
+++ b/src/types/api/report/customer-payment.d.ts
@@ -2,34 +2,30 @@ import { BaseCustomer } from '@/types/api/master-data/customer';
 import { BaseMetadata } from '@/types/api/api-general';
 
 export type CustomerPaymentRow = {
-  id: number;
-  do_date: string;
-  realization_date: string;
-  aging_day: number | null;
+  transaction_type: string;
+  transaction_id: number;
+  trans_date: string;
+  delivery_date: string | null;
   reference: string;
-  vehicle_plate: string[];
+  vehicle_numbers: string[];
   qty: number;
   weight: number;
   average_weight: number;
-  price: number;
-  credit_note: number;
+  unit_price: number;
   final_price: number;
-  ppn: number;
-  total: number;
-  payment: number;
+  total_price: number;
+  payment_amount: number;
   accounts_receivable: number;
-  notes: string;
-  pickup_info: string;
-  sales_marketing: string;
+  aging_day: number | null;
+  status: string;
+  pickup_info: string[];
+  sales_person: string;
 };
 
 export type CustomerPaymentSummary = {
   total_qty: number;
   total_weight: number;
-  total_initial_amount: number;
-  total_credit_note: number;
   total_final_amount: number;
-  total_ppn: number;
   total_grand_amount: number;
   total_payment: number;
   total_accounts_receivable: number;
@@ -37,6 +33,7 @@ export type CustomerPaymentSummary = {
 
 export type CustomerPaymentReport = BaseMetadata & {
   customer: BaseCustomer;
+  initial_balance: number;
   rows: CustomerPaymentRow[];
   summary: CustomerPaymentSummary;
 };
diff --git a/src/types/api/report/debt-supplier.d.ts b/src/types/api/report/debt-supplier.d.ts
index 46849599..c00db7df 100644
--- a/src/types/api/report/debt-supplier.d.ts
+++ b/src/types/api/report/debt-supplier.d.ts
@@ -33,3 +33,11 @@ export interface DebtRow {
   travel_number: string;
   balance: number;
 }
+
+// Filter Param
+export interface DebtSupplierFilter {
+  start_date?: string;
+  end_date?: string;
+  supplier_ids?: string;
+  filter_by?: string;
+}
diff --git a/src/types/api/report/hpp-per-kandang.d.ts b/src/types/api/report/hpp-per-kandang.d.ts
index 824a3837..0d47fc3f 100644
--- a/src/types/api/report/hpp-per-kandang.d.ts
+++ b/src/types/api/report/hpp-per-kandang.d.ts
@@ -5,34 +5,27 @@ import { Kandang } from '@/types/api/master-data/kandang';
 export type HppPerKandangRow = {
   id: number;
   kandang: Kandang;
+  name_with_periode?: string;
   weight_range: {
     weight_min: number;
     weight_max: number;
   };
-  remaining_chicken_birds: number;
-  remaining_chicken_weight_kg: number;
   avg_weight_kg: number;
   egg_production_pieces: number;
   egg_production_kg: number;
   egg_hpp_rp_per_kg: number;
   egg_value_rp: number;
-  feed_suppliers: Supplier[];
-  doc_suppliers: Supplier[];
+  feed_suppliers: Supplier[] | null;
+  doc_suppliers: Supplier[] | null;
   average_doc_price_rp: number;
-  hpp_rp: number;
-  remaining_value_rp: number;
 };
 
 export type HppPerKandangSummaryTotal = {
-  total_remaining_chicken_birds: number;
-  total_remaining_chicken_weight_kg: number;
   average_weight_kg: number;
-  total_remaining_value_rp: number;
   total_egg_production_pieces: number;
   total_egg_production_kg: number;
   average_egg_hpp_rp_per_kg: number;
   total_egg_value_rp: number;
-  total_hpp_rp: number;
   total_average_doc_price_rp: number;
 };
 
@@ -43,8 +36,6 @@ export type HppPerKandangPerWeightRange = {
     weight_max: number;
   };
   label: string;
-  remaining_chicken_birds: number;
-  remaining_chicken_weight_kg: number;
   avg_weight_kg: number;
   egg_production_pieces: number;
   egg_production_kg: number;
@@ -53,8 +44,6 @@ export type HppPerKandangPerWeightRange = {
   feed_suppliers: Supplier[];
   doc_suppliers: Supplier[];
   average_doc_price_rp: number;
-  hpp_rp: number;
-  remaining_value_rp: number;
 };
 
 export type HppPerKandangSummary = {
diff --git a/src/types/stores.d.ts b/src/types/stores.d.ts
index 48873805..528309c7 100644
--- a/src/types/stores.d.ts
+++ b/src/types/stores.d.ts
@@ -1,3 +1,4 @@
+import { DashboardFilterType } from '@/components/pages/dashboard/filter/DashboardProductionFilter.schema';
 import type { ProductionStandardRepeaterFormSchemaValues } from '@/components/pages/master-data/production-standard/form/ProductionStandardForm.schema';
 import type {
   UniformityFormData,
@@ -70,3 +71,13 @@ export type UniformitySlice = {
   setCreatedUniformity: (data: UniformityDetail | null) => void;
   resetUniformity: () => void;
 };
+
+// Dashboard Filter Slice
+export type DashboardFilterSlice = {
+  // State
+  filterValues: DashboardFilterType;
+
+  // Actions
+  setFilterValues: (values: DashboardFilterType) => void;
+  resetFilterValues: () => void;
+};