feat(FE-363): Add data type and date range filters

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

@@ -1,6 +1,7 @@
 import { useState, useMemo } from 'react';
 import Card from '@/components/Card';
 import SelectInput, { useSelect } from '@/components/input/SelectInput';
+import DateInput from '@/components/input/DateInput';
 import { AreaApi } from '@/services/api/master-data';
 import { SupplierApi } from '@/services/api/master-data';
 import { ProductApi } from '@/services/api/master-data';
@@ -12,6 +13,11 @@ const PurchasesPerSupplierTab = () => {
   const [selectedArea, setSelectedArea] = useState<number | null>(null);
   const [selectedSupplier, setSelectedSupplier] = useState<number | null>(null);
   const [selectedProduct, setSelectedProduct] = useState<number | null>(null);
+  const [dataType, setDataType] = useState<'received_date' | 'po_date'>(
+    'received_date'
+  );
+  const [startDate, setStartDate] = useState<string | null>(null);
+  const [endDate, setEndDate] = useState<string | null>(null);
 
   const { options: areaOptions, isLoadingOptions: isLoadingAreas } = useSelect(
     AreaApi.basePath,
@@ -26,6 +32,14 @@ const PurchasesPerSupplierTab = () => {
   const { options: productOptions, isLoadingOptions: isLoadingProducts } =
     useSelect(ProductApi.basePath, 'id', 'name', 'search');
 
+  const dataTypeOptions = useMemo(
+    () => [
+      { value: 'received_date', label: 'Tanggal Terima' },
+      { value: 'po_date', label: 'Tanggal PO' },
+    ],
+    []
+  );
+
   const data = useMemo(
     () => [
       {
@@ -352,6 +366,35 @@ const PurchasesPerSupplierTab = () => {
             isLoading={isLoadingProducts}
             isClearable
           />
+          <SelectInput
+            label='Tipe Data'
+            placeholder='Pilih Tipe Data'
+            options={dataTypeOptions}
+            value={
+              dataTypeOptions?.find((option) => option.value === dataType) ||
+              null
+            }
+            // @ts-expect-error TS2345
+            onChange={(val) => setDataType(val?.value || 'received_date')}
+            isLoading={false}
+            isClearable={false}
+          />
+          <DateInput
+            label='Tanggal Awal'
+            placeholder='Pilih Tanggal Awal'
+            // @ts-expect-error TS2345
+            value={startDate}
+            // @ts-expect-error TS2345
+            onChange={setStartDate}
+          />
+          <DateInput
+            label='Tanggal Akhir'
+            placeholder='Pilih Tanggal Akhir'
+            // @ts-expect-error TS2345
+            value={endDate}
+            // @ts-expect-error TS2345
+            onChange={setEndDate}
+          />
           {/* TODO END */}
         </div>