From 9cf0d15c331a8c0386f4f76b39335356136d0c4d Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Sun, 12 Apr 2026 21:36:40 +0700
Subject: [PATCH 1/9] fix: implement lazy loading for select input

---
 .../marketing/tab/DailyMarketingTab.tsx       | 44 ++++++++++++++-----
 1 file changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/components/pages/report/marketing/tab/DailyMarketingTab.tsx b/src/components/pages/report/marketing/tab/DailyMarketingTab.tsx
index 1d9dc750..0bf66748 100644
--- a/src/components/pages/report/marketing/tab/DailyMarketingTab.tsx
+++ b/src/components/pages/report/marketing/tab/DailyMarketingTab.tsx
@@ -88,21 +88,33 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
   const filterModal = useModal();
 
   // ===== OPTIONS =====
-  const { options: areaOptions, isLoadingOptions: isLoadingAreas } = useSelect(
-    AreaApi.basePath,
-    'id',
-    'name',
-    'search'
-  );
+  const {
+    options: areaOptions,
+    isLoadingOptions: isLoadingAreas,
+    setInputValue: setAreaInputValue,
+    loadMore: loadMoreArea,
+  } = useSelect(AreaApi.basePath, 'id', 'name', 'search');
 
-  const { options: locationOptions, isLoadingOptions: isLoadingLocations } =
-    useSelect(LocationApi.basePath, 'id', 'name', 'search');
+  const {
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocations,
+    setInputValue: setLocationInputValue,
+    loadMore: loadMoreLocation,
+  } = useSelect(LocationApi.basePath, 'id', 'name', 'search');
 
-  const { options: warehouseOptions, isLoadingOptions: isLoadingWarehouses } =
-    useSelect(WarehouseApi.basePath, 'id', 'name', 'search');
+  const {
+    options: warehouseOptions,
+    isLoadingOptions: isLoadingWarehouses,
+    setInputValue: setWarehouseInputValue,
+    loadMore: loadMoreWarehouse,
+  } = useSelect(WarehouseApi.basePath, 'id', 'name', 'search');
 
-  const { options: customerOptions, isLoadingOptions: isLoadingCustomers } =
-    useSelect(CustomerApi.basePath, 'id', 'name', 'search');
+  const {
+    options: customerOptions,
+    isLoadingOptions: isLoadingCustomers,
+    setInputValue: setCustomerInputValue,
+    loadMore: loadMoreCustomer,
+  } = useSelect(CustomerApi.basePath, 'id', 'name', 'search');
 
   // ===== FORMIK SETUP =====
   const formik = useFormik<DailyMarketingReportFilterType>({
@@ -837,6 +849,8 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
               }}
               isClearable
               className={{ wrapper: 'w-full' }}
+              onInputChange={setAreaInputValue}
+              onMenuScrollToBottom={loadMoreArea}
             />
 
             {/* Location Filter */}
@@ -854,6 +868,8 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
               }}
               isClearable
               className={{ wrapper: 'w-full' }}
+              onInputChange={setLocationInputValue}
+              onMenuScrollToBottom={loadMoreLocation}
             />
 
             {/* Warehouse Filter */}
@@ -871,6 +887,8 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
               }}
               isClearable
               className={{ wrapper: 'w-full' }}
+              onInputChange={setWarehouseInputValue}
+              onMenuScrollToBottom={loadMoreWarehouse}
             />
 
             {/* Customer Filter */}
@@ -888,6 +906,8 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
               }}
               isClearable
               className={{ wrapper: 'w-full' }}
+              onInputChange={setCustomerInputValue}
+              onMenuScrollToBottom={loadMoreCustomer}
             />
 
             {/* Filter By Date Type */}

From ad0e617ed040752995f447255d4b806f15c75a70 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Mon, 13 Apr 2026 09:33:01 +0700
Subject: [PATCH 2/9] fix: render button if href is provided and is disabled

---
 src/components/Button.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index b55e5e24..7c8eac47 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -51,7 +51,7 @@ const Button = ({
 
   return (
     <>
-      {!href && (
+      {(!href || (href && disabled)) && (
         <button
           {...props}
           type={type}
@@ -68,9 +68,9 @@ const Button = ({
         </button>
       )}
 
-      {href && (
+      {href && !disabled && (
         <Link
-          href={disabled ? '#' : href}
+          href={href}
           target={target}
           rel={rel}
           aria-disabled={disabled}

From bb3541090a31708c0daa1e2872389ee8fbaf73a4 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Mon, 13 Apr 2026 09:33:23 +0700
Subject: [PATCH 3/9] fix: pass kandang ID ClosingKandangList component

---
 src/components/pages/closing/ClosingDetailTabs.tsx | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/pages/closing/ClosingDetailTabs.tsx b/src/components/pages/closing/ClosingDetailTabs.tsx
index 12651313..bb3ffab4 100644
--- a/src/components/pages/closing/ClosingDetailTabs.tsx
+++ b/src/components/pages/closing/ClosingDetailTabs.tsx
@@ -112,12 +112,11 @@ const ClosingDetail: React.FC<ClosingDetailProps> = ({
           kandangData={kandangData}
         />
 
-        {!kandangData && (
-          <ClosingKandangList
-            initialValue={initialValue}
-            projectData={projectData}
-          />
-        )}
+        <ClosingKandangList
+          initialValue={initialValue}
+          projectData={projectData}
+          selectedKandangId={kandangData?.id}
+        />
 
         <Tabs
           activeTabId={activeTabId}

From c9000c1e2cdf3bb2289d7e0f1eaf485d5036016b Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Mon, 13 Apr 2026 09:33:41 +0700
Subject: [PATCH 4/9] fix: disable button if kandang is selected

---
 src/components/pages/closing/ClosingKandangList.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/pages/closing/ClosingKandangList.tsx b/src/components/pages/closing/ClosingKandangList.tsx
index 4ecf607f..03e096b4 100644
--- a/src/components/pages/closing/ClosingKandangList.tsx
+++ b/src/components/pages/closing/ClosingKandangList.tsx
@@ -5,9 +5,11 @@ import { ProjectFlock } from '@/types/api/production/project-flock';
 const ClosingKandangList = ({
   initialValue,
   projectData,
+  selectedKandangId,
 }: {
   initialValue?: ClosingGeneralInformation;
   projectData?: ProjectFlock;
+  selectedKandangId?: number;
 }) => {
   return (
     <div className='w-full py-3 @container relative before:absolute before:top-0 before:left-0 before:right-0 before:-mx-4 before:border-t before:border-base-content/10'>
@@ -22,6 +24,9 @@ const ClosingKandangList = ({
                   variant='outline'
                   className='px-3 py-2.5 w-fit text-sm rounded-lg shadow-sm'
                   href={`/closing/detail/?closingId=${initialValue?.flock_id}&kandangId=${kandang.project_flock_kandang_id}`}
+                  disabled={
+                    selectedKandangId === kandang.project_flock_kandang_id
+                  }
                 >
                   {kandang.name}
                 </Button>

From 8faed2e561926e5f6080f65356260944a53b54c2 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Mon, 13 Apr 2026 09:44:38 +0700
Subject: [PATCH 5/9] fix: implement lazy loading in select input in filter
 modal

---
 .../tab/PurchasesPerSupplierTab.tsx           | 42 +++++++++++++------
 1 file changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx b/src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx
index c8ffa399..b3f5c2ec 100644
--- a/src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx
+++ b/src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx
@@ -70,24 +70,34 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
   const filterModal = useModal();
 
   // ===== OPTIONS =====
-  const { options: areaOptions, isLoadingOptions: isLoadingAreas } = useSelect(
-    AreaApi.basePath,
-    'id',
-    'name',
-    'search'
-  );
+  const {
+    options: areaOptions,
+    isLoadingOptions: isLoadingAreas,
+    setInputValue: setAreaInputValue,
+    loadMore: loadMoreArea,
+  } = useSelect(AreaApi.basePath, 'id', 'name', 'search');
 
-  const { options: supplierOptions, isLoadingOptions: isLoadingSuppliers } =
-    useSelect(SupplierApi.basePath, 'id', 'name', 'search', {
-      category: 'SAPRONAK',
-    });
+  const {
+    options: supplierOptions,
+    isLoadingOptions: isLoadingSuppliers,
+    setInputValue: setSupplierInputValue,
+    loadMore: loadMoreSupplier,
+  } = useSelect(SupplierApi.basePath, 'id', 'name', 'search', {
+    category: 'SAPRONAK',
+  });
 
-  const { options: productOptions, isLoadingOptions: isLoadingProducts } =
-    useSelect(ProductApi.basePath, 'id', 'name', 'search');
+  const {
+    options: productOptions,
+    isLoadingOptions: isLoadingProducts,
+    setInputValue: setProductInputValue,
+    loadMore: loadMoreProduct,
+  } = useSelect(ProductApi.basePath, 'id', 'name', 'search');
 
   const {
     options: productCategoryOptions,
     isLoadingOptions: isLoadingProductCategories,
+    setInputValue: setProductCategoryInputValue,
+    loadMore: loadMoreProductCategory,
   } = useSelect(ProductCategoryApi.basePath, 'id', 'name', 'search');
 
   const dataTypeOptions = useMemo(
@@ -907,6 +917,8 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
               isLoading={isLoadingAreas}
               isClearable
               className={{ wrapper: 'w-full' }}
+              onInputChange={setAreaInputValue}
+              onMenuScrollToBottom={loadMoreArea}
             />
 
             {/* Supplier Filter */}
@@ -926,6 +938,8 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
               isLoading={isLoadingSuppliers}
               isClearable
               className={{ wrapper: 'w-full' }}
+              onInputChange={setSupplierInputValue}
+              onMenuScrollToBottom={loadMoreSupplier}
             />
 
             {/* Product Filter */}
@@ -945,6 +959,8 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
               isLoading={isLoadingProducts}
               isClearable
               className={{ wrapper: 'w-full' }}
+              onInputChange={setProductInputValue}
+              onMenuScrollToBottom={loadMoreProduct}
             />
 
             {/* Product Category Filter */}
@@ -964,6 +980,8 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
               isLoading={isLoadingProductCategories}
               isClearable
               className={{ wrapper: 'w-full' }}
+              onInputChange={setProductCategoryInputValue}
+              onMenuScrollToBottom={loadMoreProductCategory}
             />
 
             {/* Filter By Type */}

From 9e297cc0a413ce20b210bb8fc8d1c43ec700dbb3 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Mon, 13 Apr 2026 10:58:23 +0700
Subject: [PATCH 6/9] chore: remove unnecessary code

---
 src/components/pages/expense/ExpenseRequestContent.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/pages/expense/ExpenseRequestContent.tsx b/src/components/pages/expense/ExpenseRequestContent.tsx
index 8fbc81d7..ac0316d5 100644
--- a/src/components/pages/expense/ExpenseRequestContent.tsx
+++ b/src/components/pages/expense/ExpenseRequestContent.tsx
@@ -279,8 +279,6 @@ const ExpenseRequestContent = ({
         )}
 
         <div className='w-full mt-4 flex flex-col gap-4'>
-          {/* TODO: apply RBAC */}
-
           <div className='w-full mx-auto flex flex-col sm:flex-row justify-end gap-2'>
             {isCurrentApprovalOnHeadArea && (
               <RequirePermission permissions='lti.expense.approve.head_area'>

From 3fedbc7ffb1172c428a8c24688afd935f933cad3 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Mon, 13 Apr 2026 10:58:33 +0700
Subject: [PATCH 7/9] fix: adjust showEditButton condition

---
 .../pages/production/project-flock/ProjectFlockTable.tsx       | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/pages/production/project-flock/ProjectFlockTable.tsx b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
index bdc271a6..17d5227b 100644
--- a/src/components/pages/production/project-flock/ProjectFlockTable.tsx
+++ b/src/components/pages/production/project-flock/ProjectFlockTable.tsx
@@ -59,8 +59,7 @@ const RowOptionsMenu = ({
   detailClickHandler: (id: number) => void;
   deleteClickHandler: () => void;
 }) => {
-  // TODO: change this to real condition
-  const showEditButton = true;
+  const showEditButton = props.row.original.approval?.step_number !== 2;
 
   const showDeleteButton = showEditButton;
 

From de6fd2367e50ae62b08f329755ab0615db8b7d00 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Mon, 13 Apr 2026 11:00:02 +0700
Subject: [PATCH 8/9] fix: set filter default value

---
 .../report/expense/tab/ReportExpenseTab.tsx   | 65 +++++++----------
 .../report/finance/tab/CustomerPaymentTab.tsx | 62 ++++++----------
 .../report/finance/tab/DebtSupplierTab.tsx    | 54 ++++++--------
 .../tab/PurchasesPerSupplierTab.tsx           | 64 +++++++----------
 .../marketing/tab/DailyMarketingTab.tsx       | 72 +++++++------------
 5 files changed, 119 insertions(+), 198 deletions(-)

diff --git a/src/components/pages/report/expense/tab/ReportExpenseTab.tsx b/src/components/pages/report/expense/tab/ReportExpenseTab.tsx
index 03c35958..c04d09c4 100644
--- a/src/components/pages/report/expense/tab/ReportExpenseTab.tsx
+++ b/src/components/pages/report/expense/tab/ReportExpenseTab.tsx
@@ -67,7 +67,6 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
   const isAnyExportLoading = isPdfExportLoading || isExcelExportLoading;
 
   // ===== SUBMISSION STATE =====
-  const [isSubmitted, setIsSubmitted] = useState(false);
   const [filterParams, setFilterParams] = useState<FilterParams>({});
 
   // ===== PAGINATION STATE =====
@@ -117,12 +116,10 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
           : undefined,
       });
       filterModal.closeModal();
-      setIsSubmitted(true);
       setPage(1);
     },
     onReset: () => {
       setFilterParams({});
-      setIsSubmitted(false);
       setPage(1);
       filterModal.closeModal();
     },
@@ -194,27 +191,25 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
 
   // ===== DATA FETCHING =====
   const { data: reportExpenseResponse, isLoading } = useSWR(
-    isSubmitted
-      ? () => {
-          const params = new URLSearchParams();
-          if (filterParams.location_id)
-            params.append('location_id', filterParams.location_id);
-          if (filterParams.supplier_id)
-            params.append('supplier_id', filterParams.supplier_id);
-          if (filterParams.kandang_id)
-            params.append('kandang_id', filterParams.kandang_id);
-          if (filterParams.nonstock_id)
-            params.append('nonstock_id', filterParams.nonstock_id);
-          if (filterParams.realization_date)
-            params.append('realization_date', filterParams.realization_date);
-          if (filterParams.category)
-            params.append('category', filterParams.category);
-          params.append('page', String(page));
-          params.append('limit', String(pageSize));
+    () => {
+      const params = new URLSearchParams();
+      if (filterParams.location_id)
+        params.append('location_id', filterParams.location_id);
+      if (filterParams.supplier_id)
+        params.append('supplier_id', filterParams.supplier_id);
+      if (filterParams.kandang_id)
+        params.append('kandang_id', filterParams.kandang_id);
+      if (filterParams.nonstock_id)
+        params.append('nonstock_id', filterParams.nonstock_id);
+      if (filterParams.realization_date)
+        params.append('realization_date', filterParams.realization_date);
+      if (filterParams.category)
+        params.append('category', filterParams.category);
+      params.append('page', String(page));
+      params.append('limit', String(pageSize));
 
-          return [`${ReportExpenseApi.basePath}?${params.toString()}`];
-        }
-      : null,
+      return [`${ReportExpenseApi.basePath}?${params.toString()}`];
+    },
     ([url]: string[]) => httpClient<BaseApiResponse<ReportExpense[]>>(url)
   );
 
@@ -529,25 +524,13 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
     <>
       {TabActionsElement}
       <div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
-        {!isSubmitted ? (
-          <ReportExpenseSkeleton
-            columns={columns}
-            icon={
-              <Icon
-                icon='heroicons:funnel'
-                className='text-white'
-                width={20}
-                height={20}
-              />
-            }
-            title='No Filters Selected'
-            subtitle='Please choose filters to narrow down your results and make your search easier.'
-          />
-        ) : isLoading ? (
+        {isLoading && (
           <div className='w-full flex flex-row justify-center items-center p-4'>
             <span className='loading loading-spinner loading-xl' />
           </div>
-        ) : !data || data.length === 0 ? (
+        )}
+
+        {!isLoading && (!data || data.length === 0) && (
           <ReportExpenseSkeleton
             columns={columns}
             icon={
@@ -561,7 +544,9 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
             title='Data Not Yet Available'
             subtitle='Please change your filters to get the data.'
           />
-        ) : (
+        )}
+
+        {!isLoading && data.length > 0 && (
           <>
             <Table
               data={data}
diff --git a/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx b/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
index b0c2637e..c1428119 100644
--- a/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
+++ b/src/components/pages/report/finance/tab/CustomerPaymentTab.tsx
@@ -61,7 +61,6 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
   const [pageSize] = useState(10);
 
   // ===== SUBMISSION STATE =====
-  const [isSubmitted, setIsSubmitted] = useState(false);
   const [filterParams, setFilterParams] = useState<FilterParams>({});
   const [dateErrorShown, setDateErrorShown] = useState(false);
   const [hasDateError, setHasDateError] = useState(false);
@@ -102,13 +101,11 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
         filter_by: values.filter_by || undefined,
       });
       filterModal.closeModal();
-      setIsSubmitted(true);
       setCurrentPage(1);
       setSubmitting(false);
     },
     onReset: () => {
       setFilterParams({});
-      setIsSubmitted(false);
       setCurrentPage(1);
       setHasDateError(false);
       if (dateErrorShown) {
@@ -218,23 +215,21 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
 
   // ===== DATA FETCHING =====
   const { data: customerPayment, isLoading } = useSWR(
-    isSubmitted
-      ? () => {
-          const params = {
-            customer_ids: filterParams.customer_ids,
-            filter_by: filterParams.filter_by as
-              | 'trans_date'
-              | 'realization_date'
-              | undefined,
-            start_date: filterParams.start_date,
-            end_date: filterParams.end_date,
-            page: currentPage,
-            limit: pageSize,
-          };
+    () => {
+      const params = {
+        customer_ids: filterParams.customer_ids,
+        filter_by: filterParams.filter_by as
+          | 'trans_date'
+          | 'realization_date'
+          | undefined,
+        start_date: filterParams.start_date,
+        end_date: filterParams.end_date,
+        page: currentPage,
+        limit: pageSize,
+      };
 
-          return ['customer-payment-report', params];
-        }
-      : null,
+      return ['customer-payment-report', params];
+    },
     ([, params]) =>
       FinanceApi.getCustomerPaymentReport(
         params.customer_ids,
@@ -700,25 +695,13 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
     <>
       {TabActionsElement}
       <div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
-        {!isSubmitted ? (
-          <CustomerSupplierSkeleton
-            columns={getTableColumns({} as CustomerPaymentSummary)}
-            icon={
-              <Icon
-                icon='heroicons:funnel'
-                className='text-white'
-                width={20}
-                height={20}
-              />
-            }
-            title='No Filters Selected'
-            subtitle='Please choose filters to narrow down your results and make your search easier.'
-          />
-        ) : isLoading ? (
+        {isLoading && (
           <div className='w-full flex flex-row justify-center items-center p-4'>
             <span className='loading loading-spinner loading-xl' />
           </div>
-        ) : data.length === 0 ? (
+        )}
+
+        {!isLoading && data.length === 0 && (
           <CustomerSupplierSkeleton
             columns={getTableColumns({} as CustomerPaymentSummary)}
             icon={
@@ -732,7 +715,10 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
             title='Data Not Yet Available'
             subtitle='Please change your filters to get the data.'
           />
-        ) : (
+        )}
+
+        {!isLoading &&
+          data.length > 0 &&
           data.map((customerReport) => {
             const summary = customerReport.summary || {
               total_qty: 0,
@@ -761,7 +747,6 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
                 }}
                 variant='bordered'
                 collapsible={true}
-                defaultCollapsed={true}
               >
                 <Table
                   data={[
@@ -825,8 +810,7 @@ const CustomerPaymentTab = ({ tabId }: CustomerPaymentTabProps) => {
                 />
               </Card>
             );
-          })
-        )}
+          })}
       </div>
 
       {/* Filter Modal */}
diff --git a/src/components/pages/report/finance/tab/DebtSupplierTab.tsx b/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
index 57d37a23..a425a66b 100644
--- a/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
+++ b/src/components/pages/report/finance/tab/DebtSupplierTab.tsx
@@ -85,7 +85,6 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
     supplier_ids: undefined,
     filter_by: undefined,
   });
-  const [isSubmitted, setIsSubmitted] = useState(false);
 
   // ===== DATE ERROR STATE =====
   const [dateErrorShown, setDateErrorShown] = useState(false);
@@ -129,7 +128,7 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
         filter_by: values.filterBy?.value?.toString() || undefined,
       });
       filterModal.closeModal();
-      setIsSubmitted(true);
+      // setIsSubmitted(true);
     },
     onReset: () => {
       setFilterParams({
@@ -138,7 +137,7 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
         supplier_ids: undefined,
         filter_by: undefined,
       });
-      setIsSubmitted(false);
+      // setIsSubmitted(false);
       filterModal.closeModal();
     },
   });
@@ -150,18 +149,16 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
 
   // ===== DATA FETCHING =====
   const { data: debtSupplier, isLoading } = useSWR(
-    isSubmitted
-      ? () => {
-          const params = {
-            supplier_ids: filterParams.supplier_ids,
-            filter_by: filterParams.filter_by,
-            start_date: filterParams.start_date,
-            end_date: filterParams.end_date,
-          };
+    () => {
+      const params = {
+        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];
-        }
-      : null,
+      return ['debt-supplier-report', params];
+    },
     ([, params]) =>
       DebtSupplierApi.getDebtSupplierReport(
         params.supplier_ids,
@@ -611,25 +608,13 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
     <>
       {TabActionsElement}
       <div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
-        {!isSubmitted ? (
-          <DebtSupplierSkeleton
-            columns={getTableColumns()}
-            icon={
-              <Icon
-                icon='heroicons:funnel'
-                className='text-white'
-                width={20}
-                height={20}
-              />
-            }
-            title='No Filters Selected'
-            subtitle='Please choose filters to narrow down your results and make your search easier.'
-          />
-        ) : isLoading ? (
+        {isLoading && (
           <div className='w-full flex flex-row justify-center items-center p-4'>
             <span className='loading loading-spinner loading-xl' />
           </div>
-        ) : data.length === 0 ? (
+        )}
+
+        {!isLoading && data.length === 0 && (
           <DebtSupplierSkeleton
             columns={getTableColumns()}
             icon={
@@ -643,7 +628,10 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
             title='Data Not Yet Available'
             subtitle='Please change your filters to get the data.'
           />
-        ) : (
+        )}
+
+        {!isLoading &&
+          data.length > 0 &&
           data.map((supplierReport) => {
             return (
               <Card
@@ -658,7 +646,6 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
                 }}
                 variant='bordered'
                 collapsible={true}
-                defaultCollapsed={true}
               >
                 <Table
                   data={[
@@ -729,8 +716,7 @@ const DebtSupplierTab = ({ tabId }: DebtSupplierTabProps) => {
                 />
               </Card>
             );
-          })
-        )}
+          })}
       </div>
 
       {/* Filter Modal */}
diff --git a/src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx b/src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx
index b3f5c2ec..a0a4cabc 100644
--- a/src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx
+++ b/src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx
@@ -61,7 +61,6 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
 
   // ===== SUBMISSION STATE =====
   const [filterParams, setFilterParams] = useState<FilterParams>({});
-  const [isSubmitted, setIsSubmitted] = useState(false);
   const [dateErrorShown, setDateErrorShown] = useState(false);
   const [hasDateError, setHasDateError] = useState(false);
 
@@ -141,13 +140,11 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
         sort_by: values.sort_by || undefined,
       });
       filterModal.closeModal();
-      setIsSubmitted(true);
       setCurrentPage(1);
       setSubmitting(false);
     },
     onReset: () => {
       setFilterParams({});
-      setIsSubmitted(false);
       setCurrentPage(1);
       setHasDateError(false);
       if (dateErrorShown) {
@@ -271,24 +268,22 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
 
   // ===== DATA FETCHING =====
   const { data: purchasePerSupplier, isLoading } = useSWR(
-    isSubmitted
-      ? () => {
-          const params = {
-            area_id: filterParams.area_id,
-            supplier_id: filterParams.supplier_id,
-            product_id: filterParams.product_id,
-            product_category_id: filterParams.product_category_id,
-            start_date: filterParams.start_date,
-            end_date: filterParams.end_date,
-            sort_by: filterParams.sort_by,
-            filter_by: filterParams.filter_by,
-            page: currentPage,
-            limit: pageSize,
-          };
+    () => {
+      const params = {
+        area_id: filterParams.area_id,
+        supplier_id: filterParams.supplier_id,
+        product_id: filterParams.product_id,
+        product_category_id: filterParams.product_category_id,
+        start_date: filterParams.start_date,
+        end_date: filterParams.end_date,
+        sort_by: filterParams.sort_by,
+        filter_by: filterParams.filter_by,
+        page: currentPage,
+        limit: pageSize,
+      };
 
-          return ['logistic-purchase-report', params];
-        }
-      : null,
+      return ['logistic-purchase-report', params];
+    },
     ([, params]) =>
       LogisticApi.getLogisticPurchasePerSupplierReport(
         params.area_id,
@@ -736,21 +731,7 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
     <>
       {TabActionsElement}
       <div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
-        {!isSubmitted ? (
-          <PurchasePerSupplierSkeleton
-            columns={getTableColumns({} as LogisticPurchasePerSupplierSummary)}
-            icon={
-              <Icon
-                icon='heroicons:funnel'
-                className='text-white'
-                width={20}
-                height={20}
-              />
-            }
-            title='No Filters Selected'
-            subtitle='Please choose filters to narrow down your results and make your search easier.'
-          />
-        ) : isLoading ? (
+        {isLoading && (
           <PurchasePerSupplierSkeleton
             columns={getTableColumns({} as LogisticPurchasePerSupplierSummary)}
             icon={
@@ -764,7 +745,9 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
             title='Memuat Data Pembelian Per Supplier'
             subtitle='Silakan tunggu sebentar...'
           />
-        ) : data.length === 0 ? (
+        )}
+
+        {!isLoading && data.length === 0 && (
           <PurchasePerSupplierSkeleton
             columns={getTableColumns({} as LogisticPurchasePerSupplierSummary)}
             icon={
@@ -778,7 +761,10 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
             title='Data Not Yet Available'
             subtitle='Please change your filters to get the data.'
           />
-        ) : (
+        )}
+
+        {!isLoading &&
+          data.length > 0 &&
           data.map((supplierReport) => {
             const summary = supplierReport.summary || {
               total_qty: 0,
@@ -808,7 +794,6 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
                 }}
                 variant='bordered'
                 collapsible={true}
-                defaultCollapsed={true}
               >
                 <Table
                   data={supplierReport.rows}
@@ -837,8 +822,7 @@ const PurchasesPerSupplierTab = ({ tabId }: PurchasesPerSupplierTabProps) => {
                 />
               </Card>
             );
-          })
-        )}
+          })}
       </div>
 
       {/* Filter Modal */}
diff --git a/src/components/pages/report/marketing/tab/DailyMarketingTab.tsx b/src/components/pages/report/marketing/tab/DailyMarketingTab.tsx
index 0bf66748..7a984472 100644
--- a/src/components/pages/report/marketing/tab/DailyMarketingTab.tsx
+++ b/src/components/pages/report/marketing/tab/DailyMarketingTab.tsx
@@ -70,9 +70,6 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
   const [isExcelExportLoading, setIsExcelExportLoading] = useState(false);
   const isAnyExportLoading = isPdfExportLoading || isExcelExportLoading;
 
-  // ===== SUBMISSION STATE =====
-  const [isSubmitted, setIsSubmitted] = useState(false);
-
   // ===== SEARCH STATE =====
   const [searchValue, setSearchValue] = useState<string>('');
 
@@ -144,12 +141,10 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
         sort_by: values.sort_by || undefined,
       });
       filterModal.closeModal();
-      setIsSubmitted(true);
       setSubmitting(false);
     },
     onReset: () => {
       setFilterParams({});
-      setIsSubmitted(false);
       filterModal.closeModal();
     },
   });
@@ -223,31 +218,28 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
 
   // ===== DATA FETCHING =====
   const { data: dailyMarketings, isLoading } = useSWR(
-    isSubmitted
-      ? () => {
-          const params = new URLSearchParams();
+    () => {
+      const params = new URLSearchParams();
 
-          if (searchValue) params.set('search', searchValue);
-          if (filterParams.area_id) params.set('area_id', filterParams.area_id);
-          if (filterParams.location_id)
-            params.set('location_id', filterParams.location_id);
-          if (filterParams.warehouse_id)
-            params.set('warehouse_id', filterParams.warehouse_id);
-          if (filterParams.customer_id)
-            params.set('customer_id', filterParams.customer_id);
-          if (filterParams.start_date)
-            params.set('start_date', filterParams.start_date);
-          if (filterParams.end_date)
-            params.set('end_date', filterParams.end_date);
-          if (filterParams.filter_by)
-            params.set('filter_by', filterParams.filter_by);
-          if (filterParams.marketing_type)
-            params.set('marketing_type', filterParams.marketing_type);
-          if (filterParams.sort_by) params.set('sort_by', filterParams.sort_by);
+      if (searchValue) params.set('search', searchValue);
+      if (filterParams.area_id) params.set('area_id', filterParams.area_id);
+      if (filterParams.location_id)
+        params.set('location_id', filterParams.location_id);
+      if (filterParams.warehouse_id)
+        params.set('warehouse_id', filterParams.warehouse_id);
+      if (filterParams.customer_id)
+        params.set('customer_id', filterParams.customer_id);
+      if (filterParams.start_date)
+        params.set('start_date', filterParams.start_date);
+      if (filterParams.end_date) params.set('end_date', filterParams.end_date);
+      if (filterParams.filter_by)
+        params.set('filter_by', filterParams.filter_by);
+      if (filterParams.marketing_type)
+        params.set('marketing_type', filterParams.marketing_type);
+      if (filterParams.sort_by) params.set('sort_by', filterParams.sort_by);
 
-          return ['daily-marketing-report', params.toString()];
-        }
-      : null,
+      return ['daily-marketing-report', params.toString()];
+    },
     ([, params]) =>
       MarketingReportApi.getAllDailyMarketingFetcher(
         `${MarketingReportApi.basePath}?${params}`
@@ -660,21 +652,7 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
     <>
       {TabActionsElement}
       <div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
-        {!isSubmitted ? (
-          <DailyMarketingReportSkeleton
-            columns={getTableColumns()}
-            icon={
-              <Icon
-                icon='heroicons:funnel'
-                className='text-white'
-                width={20}
-                height={20}
-              />
-            }
-            title='No Filters Selected'
-            subtitle='Please choose filters to narrow down your results and make your search easier.'
-          />
-        ) : isLoading ? (
+        {isLoading && (
           <DailyMarketingReportSkeleton
             columns={getTableColumns()}
             icon={
@@ -688,7 +666,9 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
             title='Memuat Data Penjualan Harian'
             subtitle='Silakan tunggu sebentar...'
           />
-        ) : data.length === 0 ? (
+        )}
+
+        {!isLoading && data.length === 0 && (
           <DailyMarketingReportSkeleton
             columns={getTableColumns()}
             icon={
@@ -702,7 +682,9 @@ const DailyMarketingTab = ({ tabId }: DailyMarketingTabProps) => {
             title='Data Not Yet Available'
             subtitle='Please change your filters to get the data.'
           />
-        ) : (
+        )}
+
+        {!isLoading && data.length > 0 && (
           <Table
             data={data}
             columns={getTableColumns()}

From 8b970aeb643311ca6002d61ac5d5672b03115c78 Mon Sep 17 00:00:00 2001
From: ValdiANS <rvdans002@gmail.com>
Date: Mon, 13 Apr 2026 11:01:00 +0700
Subject: [PATCH 9/9] fix: open filter modal when component is mounted

---
 .../pages/report/marketing/tab/HppPerKandangTab.tsx           | 4 ++++
 .../tab/ProductionResultProjectFlockKandangTab.tsx            | 4 ++++
 2 files changed, 8 insertions(+)

diff --git a/src/components/pages/report/marketing/tab/HppPerKandangTab.tsx b/src/components/pages/report/marketing/tab/HppPerKandangTab.tsx
index 9e0bca2d..08f4e890 100644
--- a/src/components/pages/report/marketing/tab/HppPerKandangTab.tsx
+++ b/src/components/pages/report/marketing/tab/HppPerKandangTab.tsx
@@ -791,6 +791,10 @@ const HppPerKandangTab = ({ tabId }: HppPerKandangTabProps) => {
     [data, perWeightRangeSummary]
   );
 
+  useEffectHook(() => {
+    filterModal.openModal();
+  }, []);
+
   return (
     <>
       {TabActionsElement}
diff --git a/src/components/pages/report/production-result/tab/ProductionResultProjectFlockKandangTab.tsx b/src/components/pages/report/production-result/tab/ProductionResultProjectFlockKandangTab.tsx
index 8b5b5e9c..eb2c629c 100644
--- a/src/components/pages/report/production-result/tab/ProductionResultProjectFlockKandangTab.tsx
+++ b/src/components/pages/report/production-result/tab/ProductionResultProjectFlockKandangTab.tsx
@@ -631,6 +631,10 @@ const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
   // Render the TabActions component
   const TabActionsElement = useMemo(() => <TabActions />, [TabActions]);
 
+  useEffect(() => {
+    filterModal.openModal();
+  }, []);
+
   return (
     <>
       {TabActionsElement}