fix(FE): resolve conflict

2026-05-20 13:32:00 +00:00 · 2026-01-15 14:39:06 +07:00
parent 76e15d13ad 27a398a1c8
commit 49b7ca4be5
24 changed files with 833 additions and 560 deletions
@@ -1,5 +1,6 @@
 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';

@@ -13,11 +14,12 @@ const ButtonFilter = ({ values, onClick, ...props }: ButtonFilterProps) => {
    <Button
      {...props}
      onClick={onClick}
-      className={
+      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'
@@ -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} />
@@ -325,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',
@@ -354,7 +354,7 @@ const useSelect = <T,>(
      [limitKey]: String(limit),
    }).toString();

-    return `${basePath}?${qs}`;
+    return basePath ? `${basePath}?${qs}` : null;
  };

  const {
@@ -8,6 +8,7 @@ import {
  HppPurchaseData,
  ProfitLossDataAmount,
 } from '@/types/api/closing';
+import { useSearchParams } from 'next/navigation';
 import useSWR from 'swr';

 type HppTableRow =
@@ -55,9 +56,16 @@ const ClosingFinanceTable = ({
 }: {
  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<{
@@ -283,6 +291,7 @@ const ClosingFinanceTable = ({
          <div className='mt-6 p-0 mb-0'>
            <Table<HppTableRow>
              data={hppTableData}
+              isLoading={isLoading}
              columns={[
                {
                  header: 'No.',
@@ -455,6 +464,7 @@ const ClosingFinanceTable = ({
          <div className='mt-6 p-0 mb-0'>
            <Table<ProfitLossTableRow>
              data={profitLossTableData}
+              isLoading={isLoading}
              columns={[
                {
                  header: 'Jenis',
@@ -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',
@@ -8,7 +8,7 @@ import SelectInput, {
  OptionType,
  useSelect,
 } from '@/components/input/SelectInput';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import useSWR from 'swr';
 import { DashboardApi } from '@/services/api/dashboard';
 import { useFormik } from 'formik';
@@ -30,6 +30,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 toast from 'react-hot-toast';
+import Dropdown from '@/components/Dropdown';
+import Menu from '@/components/menu/Menu';
+import MenuItem from '@/components/menu/MenuItem';

 // Helper function to normalize values to array
 const normalizeToArray = (
@@ -49,6 +54,7 @@ const DashboardProduction = () => {
  );
  const [endpointUrl, setEndpointUrl] = useState('/dashboards');
  const [selectedLocationIds, setSelectedLocationIds] = useState<number[]>([]);
+  const [exporting, setExporting] = useState(false);

  // ===== FETCH DATA =====
  const {
@@ -64,19 +70,29 @@ const DashboardProduction = () => {
    : undefined;

  // ===== SELECT =====
-  const { options: flockOptions, isLoadingOptions: isLoadingFlockOptions } =
-    useSelect(ProjectFlockApi.basePath, 'id', 'flock_name', '', {
+  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', '', {
+  const {
+    setInputValue: setInputValueKandang,
+    options: kandangOptions,
+    isLoadingOptions: isLoadingKandangOptions,
+    loadMore: loadMoreKandang,
+  } = useSelect(KandangApi.basePath, 'id', 'name', '', {
    limit: 'limit',
    location_id: selectedLocationIds ? selectedLocationIds.toString() : '',
  });
@@ -143,12 +159,27 @@ const DashboardProduction = () => {
    console.log(endpointUrl);
    filterModal.closeModal();
    refreshDashboardProductionData();
-    formik.resetForm();
  };

  // ===== Formik Error List =====
  const { formErrorList, close, handleFormSubmit } = useFormikErrorList(formik);

+  // ===== Export PDF =====
+  const handleExportPDF = () => {
+    setExporting(true);
+  };
+
+  // Wait for state to render, then trigger print
+  useEffect(() => {
+    if (exporting) {
+      const timer = setTimeout(() => {
+        window.print();
+        setExporting(false);
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [exporting]);
+
  if (isLoadingDashboardProductionData) {
    return (
      <div className='w-full min-h-screen flex items-center justify-center'>
@@ -156,71 +187,39 @@ 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'
-            >
-              <Icon icon='heroicons:arrow-down-tray' width={20} height={20} />
+              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' width={20} height={20} />
+                  <Icon icon='heroicons:chevron-down' />
                </Button>
+              }
+              className={{
+                content: 'w-full',
+              }}
+            >
+              <Menu className={exporting ? 'hidden' : ''}>
+                <MenuItem title='PDF' onClick={handleExportPDF} />
+              </Menu>
+            </Dropdown>
          </div>
        </div>

@@ -287,7 +286,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 +301,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 +382,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 +423,8 @@ const DashboardProduction = () => {
                    formik.setFieldValue('flock', selected)
                  }
                  errorMessage={formik.errors.flock as string}
+                  onInputChange={setInputValueFlock}
+                  onMenuScrollToBottom={loadMoreFlock}
                  options={flockOptions}
                  isLoading={isLoadingFlockOptions}
                  isMulti={
@@ -450,6 +453,8 @@ const DashboardProduction = () => {
                    formik.setFieldValue('kandang', selected)
                  }
                  errorMessage={formik.errors.kandang as string}
+                  onInputChange={setInputValueKandang}
+                  onMenuScrollToBottom={loadMoreKandang}
                  options={kandangOptions}
                  isLoading={isLoadingKandangOptions}
                  isMulti={
@@ -465,7 +470,9 @@ const DashboardProduction = () => {
              </div>
            )}

+            <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'>
@@ -283,6 +283,8 @@ const DashboardLineChart = ({
        })()}
      </div>

+      {/* Chart Container with Empty State Overlay */}
+      <div className='relative'>
        {/* Chart */}
        <ResponsiveContainer width='100%' height={350}>
          <LineChart
@@ -292,7 +294,8 @@ const DashboardLineChart = ({
                // For OVERVIEW mode, use the selected chart data
                if (isOverviewCharts(data.charts)) {
                  const selectedChartData = data.charts[chartData];
-                if (!selectedChartData || !selectedChartData.dataset) return [];
+                  if (!selectedChartData || !selectedChartData.dataset)
+                    return [];
                  return selectedChartData.dataset;
                }
                return [];
@@ -484,7 +487,10 @@ const DashboardLineChart = ({
            {(() => {
              let seriesData: DashboardChartsSeries[] = [];

-            if (analysisMode === 'OVERVIEW' && isOverviewCharts(data.charts)) {
+              if (
+                analysisMode === 'OVERVIEW' &&
+                isOverviewCharts(data.charts)
+              ) {
                seriesData = data.charts[chartData]?.series || [];
              } else if (
                analysisMode === 'COMPARISON' &&
@@ -538,6 +544,50 @@ const DashboardLineChart = ({
            })()}
          </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.location || 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>
  );
 };
@@ -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)
              }
@@ -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,11 @@ 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');

  // ===== SELECT INPUT DATA =====
  const {
@@ -107,12 +106,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();
@@ -269,24 +262,21 @@ 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()
-      );
+  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()
+        : '',
    }
-    return `${ProductWarehouseApi.basePath}?${productWarehouseParams.toString()}`;
-  }, [formik.values.source_warehouse_id, productWarehouseSelectInputValue]);
-
-  const productWarehousesUrl = getProductWarehousesUrl();
-  const { data: productWarehouses, isLoading: isLoadingProductWarehouses } =
-    useSWR(
-      formik.values.source_warehouse_id ? productWarehousesUrl : null,
-      ProductWarehouseApi.getAllFetcher
  );

  const productWarehouseOptions = isResponseSuccess(productWarehouses)
@@ -1006,6 +996,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                }}
                options={warehouseOptions}
                onInputChange={setWarehouseSelectInputValue}
+                onMenuScrollToBottom={loadMoreWarehouses}
                isLoading={isLoadingWarehouses}
                isError={
                  formik.touched.source_warehouse_id &&
@@ -1104,6 +1095,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                options={warehouseOptions}
                onInputChange={setWarehouseSelectInputValue}
                isLoading={isLoadingWarehouses}
+                onMenuScrollToBottom={loadMoreWarehouses}
                isError={
                  formik.touched.destination_warehouse_id &&
                  Boolean(formik.errors.destination_warehouse_id)
@@ -1263,6 +1255,7 @@ const MovementForm = ({ type = 'add', initialValues }: MovementFormProps) => {
                          }}
                          options={productWarehouseOptions}
                          onInputChange={setProductWarehouseSelectInputValue}
+                          onMenuScrollToBottom={loadMoreProductWarehouses}
                          isLoading={isLoadingProductWarehouses}
                          isDisabled={
                            type === 'detail' ||
@@ -215,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}
@@ -229,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}
@@ -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()
@@ -41,6 +41,8 @@ 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';
@@ -101,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]
@@ -120,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) {
@@ -179,13 +194,29 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
    category: 'SAPRONAK',
  });

-  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 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 = () => {
@@ -201,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]);
@@ -271,7 +315,6 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
                readOnly={type === 'detail'}
              />
              <TextInput
-                required
                label='SKU'
                name='sku'
                placeholder='Masukkan SKU...'
@@ -344,7 +387,6 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
                readOnly={type === 'detail'}
              />
              <NumberInput
-                required
                label='Harga Jual'
                name='selling_price'
                placeholder='Masukkan harga jual...'
@@ -366,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...'
@@ -383,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...'
@@ -403,28 +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}
-                onMenuScrollToBottom={loadMoreSuppliers}
-                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'
@@ -447,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' && (
@@ -330,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}
@@ -87,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) => {
@@ -101,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) => {
@@ -118,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) => {
@@ -135,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) => {
@@ -298,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',
@@ -312,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',
@@ -326,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',
@@ -340,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',
@@ -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
@@ -94,18 +94,18 @@ export const generateDebtSupplierExcel = (

    const colWidths = [
      { wch: 5 }, // No
-      { wch: 15 }, // Nomor PR
-      { wch: 15 }, // Nomor PO
-      { wch: 15 }, // Tanggal Terima/Bayar
-      { 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 }, // Jatuh Tempo
-      { wch: 18 }, // Status Jatuh Tempo
-      { wch: 15 }, // Nominal Pembelian (Rp)
+      { wch: 12 }, // Jatuh Tempo
+      { wch: 20 }, // Status Jatuh Tempo
+      { wch: 20 }, // Nominal Pembelian (Rp)
      { wch: 15 }, // Pembayaran (Rp)
-      { wch: 15 }, // Sisa Saldo Hutang (Rp)
+      { wch: 20 }, // Sisa Saldo Hutang (Rp)
      { wch: 12 }, // Status
      { wch: 15 }, // Nomor Perjalanan
    ];
@@ -55,6 +55,7 @@ const CustomerPaymentTab = () => {

  const {
    options: customerOptions,
+    setInputValue: setCustomerInputValue,
    isLoadingOptions: isLoadingCustomers,
    loadMore: loadMoreCustomers,
    hasMore: hasMoreCustomers,
@@ -62,6 +63,7 @@ const CustomerPaymentTab = () => {

  const {
    options: salesOptions,
+    setInputValue: setSalesInputValue,
    isLoadingOptions: isLoadingSales,
    loadMore: loadMoreSales,
    hasMore: hasMoreSales,
@@ -654,6 +656,7 @@ const CustomerPaymentTab = () => {
                      Array.isArray(val) ? val : val ? [val] : []
                    );
                  }}
+                  onInputChange={setCustomerInputValue}
                  isLoading={isLoadingCustomers}
                  isClearable
                  onMenuScrollToBottom={loadMoreCustomers}
@@ -670,6 +673,7 @@ const CustomerPaymentTab = () => {
                  onChange={(val) => {
                    setFilterSales(Array.isArray(val) ? val : val ? [val] : []);
                  }}
+                  onInputChange={setSalesInputValue}
                  isLoading={isLoadingSales}
                  isClearable
                  onMenuScrollToBottom={loadMoreSales}
@@ -34,6 +34,7 @@ import {
 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',
@@ -89,10 +90,12 @@ const DebtSupplierTab = () => {

  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(
    () => [
@@ -680,7 +683,9 @@ const DebtSupplierTab = () => {
                    Array.isArray(val) ? val : val ? [val] : null
                  );
                }}
-                isLoading={isLoadingSuppliers}
+                onInputChange={setSupplierInputValue}
+                onMenuScrollToBottom={loadMoreSuppliers}
+                isLoading={isLoadingSupplierOptions}
                isClearable
                className={{ wrapper: 'w-full' }}
                isError={
@@ -62,6 +62,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 +79,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 +96,7 @@ const ProductionResultContent = () => {
    setInputValue: setProjectFlockInputValue,
    options: projectFlockOptions,
    isLoadingOptions: isLoadingProjectFlockOptions,
+    loadMore: loadMoreProjectFlocks,
  } = useSelect<BaseKandang>(
    ProjectFlockApi.basePath,
    'id',
@@ -120,6 +123,7 @@ const ProductionResultContent = () => {
    setInputValue: setProjectFlockKandangInputValue,
    options: projectFlockKandangOptions,
    isLoadingOptions: isLoadingProjectFlockKandangOptions,
+    loadMore: loadMoreProjectFlockKandangs,
  } = useSelect<BaseKandang>(
    ProjectFlockKandangApi.basePath,
    'id',
@@ -235,6 +239,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 +256,7 @@ const ProductionResultContent = () => {
              value={selectedLocation}
              onChange={locationChangeHandler}
              onInputChange={setLocationInputValue}
+              onMenuScrollToBottom={loadMoreLocations}
              isClearable
              isDisabled={!selectedArea}
              className={{
@@ -270,6 +276,7 @@ const ProductionResultContent = () => {
              value={selectedProjectFlock}
              onChange={projectFlockChangeHandler}
              onInputChange={setProjectFlockInputValue}
+              onMenuScrollToBottom={loadMoreProjectFlocks}
              isClearable
              isDisabled={!selectedArea || !selectedLocation}
              className={{
@@ -289,6 +296,7 @@ const ProductionResultContent = () => {
              value={selectedProjectFlockKandang}
              onChange={projectFlockKandangChangeHandler}
              onInputChange={setProjectFlockKandangInputValue}
+              onMenuScrollToBottom={loadMoreProjectFlockKandangs}
              isClearable
              isDisabled={!selectedProjectFlock}
              className={{
@@ -58,18 +58,26 @@ const HppPerKandangTab = () => {
    },
  });

-  const { options: areaOptions, isLoadingOptions: isLoadingAreas } = useSelect(
-    AreaApi.basePath,
-    'id',
-    'name',
-    'search'
-  );
+  const {
+    setInputValue: setAreaInputValue,
+    options: areaOptions,
+    isLoadingOptions: isLoadingAreas,
+    loadMore: loadMoreAreas,
+  } = useSelect(AreaApi.basePath, 'id', 'name', 'search');

-  const { options: locationOptions, isLoadingOptions: isLoadingLocations } =
-    useSelect(LocationApi.basePath, 'id', 'name', 'search');
+  const {
+    setInputValue: setLocationInputValue,
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocations,
+    loadMore: loadMoreLocations,
+  } = useSelect(LocationApi.basePath, 'id', 'name', 'search');

-  const { options: kandangOptions, isLoadingOptions: isLoadingKandangs } =
-    useSelect(KandangApi.basePath, 'id', 'name', 'search');
+  const {
+    setInputValue: setKandangInputValue,
+    options: kandangOptions,
+    isLoadingOptions: isLoadingKandangs,
+    loadMore: loadMoreKandangs,
+  } = useSelect(KandangApi.basePath, 'id', 'name', 'search');

  const showUnrecordedOptions: OptionType[] = [
    { value: 'false', label: 'Sembunyikan' },
@@ -810,6 +818,8 @@ const HppPerKandangTab = () => {
                .includes(String(opt.value))
            )}
            onChange={areaChangeHandler}
+            onInputChange={setAreaInputValue}
+            onMenuScrollToBottom={loadMoreAreas}
            isLoading={isLoadingAreas}
            isClearable
          />
@@ -824,6 +834,8 @@ const HppPerKandangTab = () => {
                .includes(String(opt.value))
            )}
            onChange={locationChangeHandler}
+            onInputChange={setLocationInputValue}
+            onMenuScrollToBottom={loadMoreLocations}
            isLoading={isLoadingLocations}
            isClearable
          />
@@ -838,6 +850,8 @@ const HppPerKandangTab = () => {
                .includes(String(opt.value))
            )}
            onChange={kandangChangeHandler}
+            onInputChange={setKandangInputValue}
+            onMenuScrollToBottom={loadMoreKandangs}
            isLoading={isLoadingKandangs}
            isClearable
          />
@@ -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
@@ -148,10 +148,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',
      });
@@ -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[];
 };