feat(FE): Closing Finance and adjust reports expense filter request

src/components/pages/report/expense/ReportExpenseTable.tsx

@@ -12,7 +12,10 @@ import ExpenseStatusBadge from '@/components/pages/expense/ExpenseStatusBadge';
 import RealizationStatusBadge from '@/components/pages/expense/RealizationStatusBadge';
 import Table, { TABLE_DEFAULT_STYLING } from '@/components/Table';
 import { cn, formatCurrency, formatDate } from '@/lib/helper';
-import { ReportExpense } from '@/types/api/report/report-expense';
+import {
+  ReportExpense,
+  ReportExpenseSearchParams,
+} from '@/types/api/report/report-expense';
 import { Icon } from '@iconify/react';
 import { ColumnDef } from '@tanstack/react-table';
 import { useMemo, useState } from 'react';
@@ -23,16 +26,7 @@ const ReportExpenseTable = ({
   onSearch,
 }: {
   reportExpenses: ReportExpense[];
-  onSearch: (params: {
-    locationId: string | null;
-    supplierId: string | null;
-    kandangId: string | null;
-    startDate: string | null;
-    endDate: string | null;
-    category: string | null;
-    period: string | number;
-    search: string;
-  }) => void;
+  onSearch: (params: ReportExpenseSearchParams) => void;
 }) => {
   const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
     null
@@ -46,10 +40,11 @@ const ReportExpenseTable = ({
   const [selectedKandang, setSelectedKandang] = useState<OptionType | null>(
     null
   );
+  const [selectedNonstock, setSelectedNonstock] = useState<OptionType | null>(
+    null
+  );
   const [search, setSearch] = useState('');
-  const [startDate, setStartDate] = useState<string | null>(null);
-  const [endDate, setEndDate] = useState<string | null>(null);
-  const [period, setPeriod] = useState<number | string>('');
+  const [realizationDate, setRealizationDate] = useState<string | null>(null);
 
   const { options: optionsLocation, isLoadingOptions: isLoadingLocation } =
     useSelect(`/master-data/locations`, 'id', 'name');
@@ -59,6 +54,8 @@ const ReportExpenseTable = ({
     useSelect(`/master-data/kandangs`, 'id', 'name', '', {
       location_id: selectedLocation?.value.toString() || '',
     });
+  const { options: optionsNonstock, isLoadingOptions: isLoadingNonstock } =
+    useSelect(`/master-data/nonstocks`, 'id', 'name');
 
   const columns = useMemo((): ColumnDef<ReportExpense>[] => {
     return [
@@ -92,13 +89,17 @@ const ReportExpenseTable = ({
         header: 'Kategori',
         accessorKey: 'category',
       },
+      {
+        header: 'Produk',
+        accessorFn: (row) => row.pengajuan.nonstock.name,
+      },
       {
         header: 'Supplier',
         accessorFn: (row) => row.supplier.name,
       },
       {
         header: 'Lokasi',
-        accessorFn: (row) => row.location.name,
+        accessorFn: (row) => row.kandang.location.name,
       },
       {
         header: 'Kandang',
@@ -181,44 +182,31 @@ const ReportExpenseTable = ({
   const handleSearch = () => {
     onSearch({
       search,
-      period,
-      startDate,
-      endDate,
+      realizationDate,
       locationId: selectedLocation?.value.toString() ?? '',
       kandangId: selectedKandang?.value.toString() ?? '',
+      nonstockId: selectedNonstock?.value.toString() ?? '',
       supplierId: selectedSupplier?.value.toString() ?? '',
       category: selectedCategory?.value.toString() ?? '',
     });
   };
   const handleSearchInput = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearch(e.target.value);
-    onSearch({
-      search: e.target.value,
-      period,
-      startDate,
-      endDate,
-      locationId: selectedLocation?.value.toString() ?? '',
-      kandangId: selectedKandang?.value.toString() ?? '',
-      supplierId: selectedSupplier?.value.toString() ?? '',
-      category: selectedCategory?.value.toString() ?? '',
-    });
   };
   const handleReset = () => {
     setSearch('');
-    setPeriod('');
-    setStartDate('');
-    setEndDate('');
+    setRealizationDate('');
     setSelectedLocation(null);
     setSelectedKandang(null);
+    setSelectedNonstock(null);
     setSelectedSupplier(null);
     setSelectedCategory(null);
     onSearch({
       search: '',
-      period: '',
-      startDate: '',
-      endDate: '',
+      realizationDate: '',
       locationId: '',
       kandangId: '',
+      nonstockId: '',
       supplierId: '',
       category: '',
     });
@@ -283,6 +271,15 @@ const ReportExpenseTable = ({
             value={selectedSupplier}
             onChange={(option) => setSelectedSupplier(option as OptionType)}
           />
+          <SelectInput
+            isClearable
+            label='Produk'
+            options={optionsNonstock}
+            isLoading={isLoadingNonstock}
+            placeholder='Produk'
+            value={selectedNonstock}
+            onChange={(option) => setSelectedNonstock(option as OptionType)}
+          />
           <SelectInput
             isClearable
             label='Kategori'
@@ -292,7 +289,7 @@ const ReportExpenseTable = ({
                 label: 'BOP',
               },
               {
-                value: 'NON BOP',
+                value: 'NON-BOP',
                 label: 'Non BOP',
               },
             ]}
@@ -300,26 +297,12 @@ const ReportExpenseTable = ({
             value={selectedCategory}
             onChange={(option) => setSelectedCategory(option as OptionType)}
           />
-          <NumberInput
-            label='Periode'
-            value={period}
-            onChange={(e) => setPeriod(e.target.value)}
-            name='periode'
-            placeholder='Periode'
-          />
           <DateInput
-            label='Tanggal Mulai'
-            value={startDate as string}
-            onChange={(e) => setStartDate(e.target.value)}
-            name='start_date'
-            placeholder='Tanggal Mulai'
-          />
-          <DateInput
-            label='Tanggal Selesai'
-            value={endDate as string}
-            onChange={(e) => setEndDate(e.target.value)}
-            name='end_date'
-            placeholder='Tanggal Selesai'
+            label='Tanggal Realisasi'
+            value={realizationDate as string}
+            onChange={(e) => setRealizationDate(e.target.value)}
+            name='realization_date'
+            placeholder='Tanggal Realisasi'
           />
           <DebouncedTextInput
             label='Cari'