feat: filter improvement

src/components/pages/marketing/MarketingFilter.tsx

@@ -20,6 +20,8 @@ import { MarketingApi } from '@/services/api/marketing/marketing';
 import { CustomerApi } from '@/services/api/master-data';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { BaseMarketing, BaseSalesOrder } from '@/types/api/marketing/marketing';
+import { ProjectFlockApi } from '@/services/api/production';
+import { ProjectFlock } from '@/types/api/production/project-flock';
 
 interface MarketingFilterModal {
   ref: RefObject<HTMLDialogElement | null>;
@@ -78,6 +80,19 @@ const MarketingFilterModal = ({
     has_marketing: 'true',
   });
 
+  const {
+    options: projectFlockOptions,
+    rawData: projectFlocksRawData,
+    isLoadingOptions: isLoadingProjectFlockOptions,
+    setInputValue: setProjectFlockInputValue,
+    loadMore: loadMoreProjectFlocks,
+  } = useSelect<ProjectFlock>(
+    ProjectFlockApi.basePath,
+    'id',
+    'flock_name',
+    'search'
+  );
+
   const statusOptions = [
     ...MARKETING_APPROVAL_LINE.map((item) => ({
       value: item.step_name.split(' ').join('_').toUpperCase(),
@@ -91,6 +106,8 @@ const MarketingFilterModal = ({
       product_ids: [],
       status: null,
       customer: null,
+      project_flock: null,
+      project_flock_kandang: null,
     },
     validationSchema: MarketingFilterSchema,
 
@@ -99,6 +116,9 @@ const MarketingFilterModal = ({
         product_ids: values.product_ids.map((item) => Number(item.value)),
         status: values.status?.value.toString() || '',
         customer_id: Number(values.customer?.value),
+        project_flock_id: Number(values.project_flock?.value) || undefined,
+        project_flock_kandang_id:
+          Number(values.project_flock_kandang?.value) || undefined,
       };
 
       onSubmit?.(formattedValues);
@@ -126,6 +146,27 @@ const MarketingFilterModal = ({
     formik.setFieldValue('status', val as OptionType);
   };
 
+  const projectFlockKandangOptions = useMemo(() => {
+    if (
+      !formik.values.project_flock ||
+      !projectFlocksRawData ||
+      !isResponseSuccess(projectFlocksRawData)
+    ) {
+      return [];
+    }
+
+    const selectedProjectFlock = projectFlocksRawData.data.find(
+      (item) => item.id === formik.values.project_flock?.value
+    );
+
+    return (
+      selectedProjectFlock?.kandangs?.map((item) => ({
+        value: item.project_flock_kandang_id,
+        label: item.name,
+      })) || []
+    );
+  }, [formik.values.project_flock, projectFlocksRawData]);
+
   return (
     <Modal
       ref={ref}
@@ -192,6 +233,37 @@ const MarketingFilterModal = ({
             onInputChange={setCustomersInputValue}
             onMenuScrollToBottom={loadMoreCustomers}
           />
+          <SelectInput
+            label='Project Flock'
+            isClearable
+            placeholder='Pilih Project Flock'
+            options={projectFlockOptions}
+            isLoading={isLoadingProjectFlockOptions}
+            value={formik.values.project_flock}
+            onChange={(val) => {
+              formik.setFieldValue(
+                'project_flock',
+                !Array.isArray(val) ? (val as OptionType<number> | null) : null
+              );
+              formik.setFieldValue('project_flock_kandang', null);
+            }}
+            onInputChange={setProjectFlockInputValue}
+            onMenuScrollToBottom={loadMoreProjectFlocks}
+          />
+          <SelectInput
+            label='Kandang'
+            isClearable
+            placeholder='Pilih Kandang'
+            options={projectFlockKandangOptions}
+            value={formik.values.project_flock_kandang}
+            onChange={(val) =>
+              formik.setFieldValue(
+                'project_flock_kandang',
+                !Array.isArray(val) ? (val as OptionType<number> | null) : null
+              )
+            }
+            isDisabled={!formik.values.project_flock}
+          />
         </div>
 
         {/* Modal Footer */}

src/components/pages/marketing/MarketingTable.tsx

@@ -224,6 +224,8 @@ const MarketingTable = () => {
       product_ids: '',
       status: '',
       customer_id: '',
+      project_flock_id: '',
+      project_flock_kandang_id: '',
     },
     paramMap: {
       page: 'page',
@@ -231,6 +233,8 @@ const MarketingTable = () => {
       product_ids: 'product_ids',
       status: 'status',
       customer_id: 'customer_id',
+      project_flock_id: 'project_flock_id',
+      project_flock_kandang_id: 'project_flock_kandang_id',
     },
 
     persist: true,
@@ -260,6 +264,18 @@ const MarketingTable = () => {
       values.customer_id ? values.customer_id.toString() : '',
       true
     );
+    updateFilter(
+      'project_flock_id',
+      values.project_flock_id ? values.project_flock_id.toString() : '',
+      true
+    );
+    updateFilter(
+      'project_flock_kandang_id',
+      values.project_flock_kandang_id
+        ? values.project_flock_kandang_id.toString()
+        : '',
+      true
+    );
   };
 
   const [isLoadingExportingToExcel, setIsLoadingExportingToExcel] =
@@ -269,6 +285,8 @@ const MarketingTable = () => {
     updateFilter('product_ids', '', true);
     updateFilter('status', '', true);
     updateFilter('customer_id', '', true);
+    updateFilter('project_flock_id', '', true);
+    updateFilter('project_flock_kandang_id', '', true);
   };
 
   const approveClickHandler = () => {

src/components/pages/marketing/filter/MarketingFilter.ts

@@ -5,10 +5,14 @@ export const MarketingFilterSchema = object({
   product_ids: array().of(mixed<OptionType<number>>().required()).required(),
   status: mixed<OptionType<string>>().nullable(),
   customer: mixed<OptionType<number>>().nullable(),
+  project_flock: mixed<OptionType<number>>().nullable(),
+  project_flock_kandang: mixed<OptionType<number>>().nullable(),
 });
 
 export type MarketingFilterFormValues = {
   product_ids: OptionType<number>[];
   status: OptionType<string> | null;
   customer: OptionType<number> | null;
+  project_flock: OptionType<number> | null;
+  project_flock_kandang: OptionType<number> | null;
 };