feat: date filter type

src/components/pages/report/DailyMarketingReportContent.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ChangeEventHandler, useState } from 'react';
+import { ChangeEventHandler, useEffect, useState } from 'react';
 import { pdf } from '@react-pdf/renderer';
 import toast from 'react-hot-toast';
 
@@ -28,7 +28,10 @@ import {
 import { Warehouse } from '@/types/api/master-data/warehouse';
 import { Customer } from '@/types/api/master-data/customer';
 import { MarketingReportApi } from '@/services/api/report/marketing-report';
-import { MARKETING_TYPE_OPTIONS } from '@/config/constant';
+import {
+  MARKETING_DATE_FILTER_TYPE_OPTIONS,
+  MARKETING_TYPE_OPTIONS,
+} from '@/config/constant';
 import { httpClient } from '@/services/http/client';
 import { BaseApiResponse } from '@/types/api/api-general';
 import {
@@ -150,6 +153,15 @@ const DailyMarketingReportContent = () => {
     updateFilter('end_date', e.target.value ? e.target.value : '');
   };
 
+  const [selectedMarketingDateFilterType, setSelectedMarketingDateFilterType] =
+    useState<OptionType | null>(null);
+  const marketingDateFilterTypeChangeHandler = (
+    val: OptionType | OptionType[] | null
+  ) => {
+    setSelectedMarketingDateFilterType(val as OptionType);
+    updateFilter('filter_by', val ? ((val as OptionType).value as string) : '');
+  };
+
   const [selectedMarketingType, setSelectedMarketingType] =
     useState<OptionType | null>(null);
   const marketingTypeChangeHandler = (
@@ -252,6 +264,23 @@ const DailyMarketingReportContent = () => {
     resetFilter();
   };
 
+  useEffect(() => {
+    if (
+      tableFilterState.filter_by === 'realization_date' ||
+      tableFilterState.filter_by === 'so_date'
+    ) {
+      setSelectedMarketingDateFilterType({
+        label:
+          tableFilterState.filter_by === 'realization_date'
+            ? 'Tanggal Realisasi'
+            : 'Tanggal SO',
+        value: tableFilterState.filter_by,
+      });
+    } else {
+      setSelectedMarketingDateFilterType(null);
+    }
+  }, [tableFilterState.filter_by]);
+
   return (
     <div className='w-full border border-gray-200 p-4'>
       <div>
@@ -341,6 +370,18 @@ const DailyMarketingReportContent = () => {
         </div>
 
         <div className='grid grid-cols-12 gap-4'>
+          <SelectInput
+            label='Filter Tanggal'
+            placeholder='Pilih Filter Tanggal'
+            options={MARKETING_DATE_FILTER_TYPE_OPTIONS}
+            value={selectedMarketingDateFilterType}
+            onChange={marketingDateFilterTypeChangeHandler}
+            isClearable
+            className={{
+              wrapper: 'col-span-12 sm:col-span-6 lg:col-span-4',
+            }}
+          />
+
           <SelectInput
             label='Tipe Marketing'
             placeholder='Pilih Tipe Marketing'