fix: adjust ExpensesFilterSchema for location and vendor select input

src/components/pages/expense/ExpensesTable.tsx

@@ -51,7 +51,9 @@ type ExpenseTableFilters = {
   transactionDate: string;
   realizationDate: string;
   locationId: string;
+  locationName: string;
   vendorId: string;
+  vendorName: string;
   userId: string;
 };
 
@@ -235,6 +237,7 @@ const ExpensesTable = () => {
     setPage,
     setPageSize,
     toQueryString: getTableFilterQueryString,
+    reset: resetFilter,
   } = useTableFilter<ExpenseTableFilters>({
     initial: {
       page: 1,
@@ -244,7 +247,9 @@ const ExpensesTable = () => {
       transactionDate: '',
       realizationDate: '',
       locationId: '',
+      locationName: '',
       vendorId: '',
+      vendorName: '',
       userId: '',
     },
     paramMap: {
@@ -254,7 +259,9 @@ const ExpensesTable = () => {
       transactionDate: 'transaction_date',
       realizationDate: 'realization_date',
       locationId: 'location_id',
+      locationName: 'location_name',
       vendorId: 'vendor_id',
+      vendorName: 'vendor_name',
       userId: 'user_id',
     },
 
@@ -740,20 +747,31 @@ const ExpensesTable = () => {
   const handleFilterSubmit = (values: {
     transaction_date?: string | null;
     realization_date?: string | null;
-    location_id?: string | null;
-    vendor_id?: string | null;
+    location?: { value: number; label: string } | null;
+    vendor?: { value: number; label: string } | null;
   }) => {
     updateFilter('transactionDate', values.transaction_date || '');
     updateFilter('realizationDate', values.realization_date || '');
-    updateFilter('locationId', values.location_id || '');
-    updateFilter('vendorId', values.vendor_id || '');
+    updateFilter(
+      'locationId',
+      values.location?.value ? String(values.location?.value) : ''
+    );
+    updateFilter(
+      'locationName',
+      values.location?.label ? String(values.location?.label) : ''
+    );
+    updateFilter(
+      'vendorId',
+      values.vendor?.value ? String(values.vendor?.value) : ''
+    );
+    updateFilter(
+      'vendorName',
+      values.vendor?.label ? String(values.vendor?.label) : ''
+    );
   };
 
   const handleFilterReset = () => {
-    updateFilter('transactionDate', '');
-    updateFilter('realizationDate', '');
-    updateFilter('locationId', '');
-    updateFilter('vendorId', '');
+    resetFilter();
   };
 
   // track sorting
@@ -927,6 +945,8 @@ const ExpensesTable = () => {
                 'search',
                 'nameSort',
                 'userId',
+                'locationName',
+                'vendorName',
               ]}
               onClick={handleFilterModalOpen}
               className='px-3 py-2.5'
@@ -1245,6 +1265,24 @@ const ExpensesTable = () => {
         ref={filterModal.ref}
         onSubmit={handleFilterSubmit}
         onReset={handleFilterReset}
+        initialValues={{
+          location:
+            tableFilterState.locationId && tableFilterState.locationName
+              ? {
+                  value: Number(tableFilterState.locationId),
+                  label: tableFilterState.locationName,
+                }
+              : null,
+          vendor:
+            tableFilterState.vendorId && tableFilterState.vendorName
+              ? {
+                  value: Number(tableFilterState.vendorId),
+                  label: tableFilterState.vendorName,
+                }
+              : null,
+          realization_date: tableFilterState.realizationDate,
+          transaction_date: tableFilterState.transactionDate,
+        }}
       />
     </>
   );

src/components/pages/expense/filter/ExpensesFilter.ts

@@ -3,8 +3,8 @@ import * as yup from 'yup';
 export type ExpensesFilterType = {
   transaction_date: string | null;
   realization_date: string | null;
-  location_id: string | null;
-  vendor_id: string | null;
+  location: { value: number; label: string } | null;
+  vendor: { value: number; label: string } | null;
 };
 
 export const ExpensesFilterSchema = yup.object({
@@ -21,8 +21,18 @@ export const ExpensesFilterSchema = yup.object({
         return new Date(value) >= new Date(transaction_date);
       }
     ),
-  location_id: yup.string().nullable(),
-  vendor_id: yup.string().nullable(),
+  location: yup
+    .object({
+      value: yup.number().required(),
+      label: yup.string().required(),
+    })
+    .nullable(),
+  vendor: yup
+    .object({
+      value: yup.number().required(),
+      label: yup.string().required(),
+    })
+    .nullable(),
 });
 
 export type ExpensesFilterValues = yup.InferType<typeof ExpensesFilterSchema>;