feat(FE=361,363): Add Submit button to PurchasesPerSupplierTab

src/components/pages/report/logistic-stock/PurchasesPerSupplierTab.tsx

@@ -41,6 +41,9 @@ const PurchasesPerSupplierTab = () => {
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
 
+  // ===== SUBMISSION STATE =====
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
   // ===== TABLE FILTER STATE =====
   const { state: tableFilterState, updateFilter } = useTableFilter({
     initial: {
@@ -63,6 +66,7 @@ const PurchasesPerSupplierTab = () => {
       setDataType(newDataType);
       updateFilter('received_date', '');
       updateFilter('po_date', '');
+      setIsSubmitted(false);
     },
     [updateFilter]
   );
@@ -92,6 +96,7 @@ const PurchasesPerSupplierTab = () => {
     (val: OptionType | OptionType[] | null) => {
       const newVal = val as OptionType;
       updateFilter('area_id', newVal?.value ? String(newVal.value) : '');
+      setIsSubmitted(false);
     },
     [updateFilter]
   );
@@ -100,6 +105,7 @@ const PurchasesPerSupplierTab = () => {
     (val: OptionType | OptionType[] | null) => {
       const newVal = val as OptionType;
       updateFilter('supplier_id', newVal?.value ? String(newVal.value) : '');
+      setIsSubmitted(false);
     },
     [updateFilter]
   );
@@ -108,6 +114,7 @@ const PurchasesPerSupplierTab = () => {
     (val: OptionType | OptionType[] | null) => {
       const newVal = val as OptionType;
       updateFilter('product_id', newVal?.value ? String(newVal.value) : '');
+      setIsSubmitted(false);
     },
     [updateFilter]
   );
@@ -118,6 +125,7 @@ const PurchasesPerSupplierTab = () => {
       updateDataType(
         (newVal?.value as 'received_date' | 'po_date') || 'received_date'
       );
+      setIsSubmitted(false);
     },
     [updateDataType]
   );
@@ -128,11 +136,9 @@ const PurchasesPerSupplierTab = () => {
     (e) => {
       const val = e.target.value;
       updateFilter('start_date', val || '');
-      if (val && dataType) {
+      setIsSubmitted(false);
-        updateFilter(dataType, val);
-      }
     },
-    [updateFilter, dataType]
+    [updateFilter]
   );
 
   const endDateChangeHandler = useCallback<
@@ -141,6 +147,7 @@ const PurchasesPerSupplierTab = () => {
     (e) => {
       const val = e.target.value;
       updateFilter('end_date', val || '');
+      setIsSubmitted(false);
     },
     [updateFilter]
   );
@@ -154,31 +161,39 @@ const PurchasesPerSupplierTab = () => {
     updateFilter('start_date', '');
     updateFilter('end_date', '');
     setDataType('received_date');
+    setIsSubmitted(false);
   }, [updateFilter]);
 
+  const handleSubmit = useCallback(() => {
+    setIsSubmitted(true);
+    setCurrentPage(1);
+  }, []);
+
   // ===== DATA FETCHING =====
   const { data: purchasePerSupplier, isLoading } = useSWR(
-    () => {
+    isSubmitted
-      const params = {
+      ? () => {
-        area_id: tableFilterState.area_id
+          const params = {
-          ? Number(tableFilterState.area_id)
+            area_id: tableFilterState.area_id
-          : undefined,
+              ? Number(tableFilterState.area_id)
-        supplier_id: tableFilterState.supplier_id
+              : undefined,
-          ? Number(tableFilterState.supplier_id)
+            supplier_id: tableFilterState.supplier_id
-          : undefined,
+              ? Number(tableFilterState.supplier_id)
-        product_id: tableFilterState.product_id
+              : undefined,
-          ? Number(tableFilterState.product_id)
+            product_id: tableFilterState.product_id
-          : undefined,
+              ? Number(tableFilterState.product_id)
-        received_date: tableFilterState.received_date || undefined,
+              : undefined,
-        po_date: tableFilterState.po_date || undefined,
+            received_date: tableFilterState.received_date || undefined,
-        start_date: tableFilterState.start_date || undefined,
+            po_date: tableFilterState.po_date || undefined,
-        end_date: tableFilterState.end_date || undefined,
+            start_date: tableFilterState.start_date || undefined,
-        page: currentPage,
+            end_date: tableFilterState.end_date || undefined,
-        limit: pageSize,
+            page: currentPage,
-      };
+            limit: pageSize,
+          };
 
-      return ['logistic-purchase-report', params];
+          return ['logistic-purchase-report', params];
-    },
+        }
+      : null,
     ([, params]) =>
       LogisticApi.getLogisticStockReport(
         params.area_id,
@@ -393,10 +408,13 @@ const PurchasesPerSupplierTab = () => {
         subtitle='Laporan > Rekapitulasi Pembelian Per Supplier'
         className={{ wrapper: 'w-full', body: 'p-1!' }}
       >
-        <div className='mb-4 flex justify-end'>
+        <div className='mb-4 flex justify-end gap-2'>
-          <Button onClick={resetFilters} className='px-4 py-2'>
+          <Button color='warning' onClick={resetFilters}>
             Reset
           </Button>
+          <Button color='primary' onClick={handleSubmit}>
+            Submit
+          </Button>
         </div>
         <div className='grid grid-cols-12 gap-4'>
           <SelectInput
@@ -493,11 +511,17 @@ const PurchasesPerSupplierTab = () => {
           />
         </div>
 
-        {isLoading ? (
+        {!isSubmitted ? (
-          <div className='mt-6 text-center text-gray-500'>Memuat data...</div>
+          <div className='mt-6 text-center text-gray-500'>
+            Silakan pilih filter dan klik tombol Submit untuk menampilkan data.
+          </div>
+        ) : 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 ? (
           <div className='mt-6 text-center text-gray-500'>
-            Tidak ada data untuk ditampilkan.
+            Tidak ada data yang dapat ditampilkan...
           </div>
         ) : (
           data.map((supplier) => {