Merge branch 'fix/production-result-report-filter' into 'development'

[FIX/FE] Production Result Report

See merge request mbugroup/lti-web-client!395

src/components/pages/report/expense/tab/ReportExpenseTab.tsx

@@ -33,18 +33,18 @@ import { generateReportExpensePDF } from '../export/ReportExpenseExportPDF';
 import { generateReportExpenseExcel } from '../export/ReportExpenseExportXLSX';
 import toast from 'react-hot-toast';
 import {
-  KandangApi,
   LocationApi,
   NonstockApi,
   SupplierApi,
 } from '@/services/api/master-data';
 import { Supplier } from '@/types/api/master-data/supplier';
-import { Kandang } from '@/types/api/master-data/kandang';
 import { Nonstock } from '@/types/api/master-data/nonstock';
 import { ColumnDef } from '@tanstack/react-table';
 import { httpClient } from '@/services/http/client';
 import { BaseApiResponse } from '@/types/api/api-general';
 import ButtonFilter from '@/components/helper/ButtonFilter';
+import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
+import { ProjectFlockKandangApi } from '@/services/api/production/project-flock-kandang';
 
 interface ReportExpenseTabProps {
   tabId: string;
@@ -136,7 +136,7 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
     options: locationOptions,
     isLoadingOptions: isLoadingLocations,
     loadMore: loadMoreLocations,
-  } = useSelect<Kandang>(LocationApi.basePath, 'id', 'name', 'search');
+  } = useSelect<Location>(LocationApi.basePath, 'id', 'name', 'search');
 
   const {
     setInputValue: setSupplierInputValue,
@@ -146,14 +146,14 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
   } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name', 'search');
 
   const {
-    setInputValue: setKandangInputValue,
-    options: kandangOptions,
-    isLoadingOptions: isLoadingKandangs,
-    loadMore: loadMoreKandangs,
-  } = useSelect<Kandang>(
-    KandangApi.basePath,
+    setInputValue: setProjectFlockKandangInputValue,
+    options: projectFlockKandangOptions,
+    isLoadingOptions: isLoadingProjectFlockKandangs,
+    loadMore: loadMoreProjectFlockKandangs,
+  } = useSelect<ProjectFlockKandang>(
+    ProjectFlockKandangApi.basePath,
     'id',
-    'name',
+    'name_with_period',
     'search',
     formik.values.location_id?.value
       ? { location_id: String(formik.values.location_id.value) }
@@ -643,14 +643,14 @@ const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
             <SelectInput
               label='Kandang'
               placeholder='Pilih Kandang'
-              options={kandangOptions}
-              isLoading={isLoadingKandangs}
+              options={projectFlockKandangOptions}
+              isLoading={isLoadingProjectFlockKandangs}
               value={kandangValue}
               onChange={(val) => {
                 formik.setFieldValue('kandang_id', val);
               }}
-              onInputChange={setKandangInputValue}
-              onMenuScrollToBottom={loadMoreKandangs}
+              onInputChange={setProjectFlockKandangInputValue}
+              onMenuScrollToBottom={loadMoreProjectFlockKandangs}
               isClearable
               isDisabled={!formik.values.location_id}
               className={{ wrapper: 'w-full' }}

src/components/pages/report/production-result/filter/ProductionResultFilter.ts

@@ -43,15 +43,7 @@ export const ProductionResultFilterSchema = yup.object({
       }
       return !!value;
     }),
-  kandang_id: yup
-    .mixed<OptionType>()
-    .required('Kandang wajib dipilih')
-    .test('is-not-empty', 'Kandang wajib dipilih', (value) => {
-      if (Array.isArray(value)) {
-        return value.length > 0;
-      }
-      return !!value;
-    }),
+  kandang_id: yup.mixed<OptionType>().nullable(),
 }) as yup.ObjectSchema<ProductionResultFilterFormType>;
 
 export type ProductionResultFilterValues = yup.InferType<

src/components/pages/report/production-result/tab/ProductionResultProjectFlockKandangTab.tsx

@@ -46,6 +46,7 @@ import Modal, { useModal } from '@/components/Modal';
 import { formatNumber } from '@/lib/helper';
 import Pagination from '@/components/Pagination';
 import ProductionResultSkeleton from '@/components/pages/report/production-result/skeleton/ProductionResultSkeleton';
+import { ProjectFlock } from '@/types/api/production/project-flock';
 
 interface ProductionResultTabProps {
   tabId: string;
@@ -238,6 +239,17 @@ const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
           ? String(values.kandang_id.value)
           : undefined,
       });
+
+      const selectedProjectFlockKandangRawData = isResponseSuccess(
+        projectFlockKandangsRawData
+      )
+        ? projectFlockKandangsRawData.data.find(
+            (item) => item.id === values.kandang_id?.value
+          )
+        : undefined;
+
+      setSelectedProjectFlockKandang(selectedProjectFlockKandangRawData);
+
       filterModal.closeModal();
       setIsSubmitted(true);
       setPage(1);
@@ -255,6 +267,9 @@ const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
     formik.validateForm();
   };
 
+  const [selectedProjectFlockKandang, setSelectedProjectFlockKandang] =
+    useState<ProjectFlockKandang | undefined>();
+
   // ===== OPTIONS =====
   const {
     setInputValue: setAreaInputValue,
@@ -279,7 +294,7 @@ const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
     options: projectFlockOptions,
     isLoadingOptions: isLoadingProjectFlocks,
     loadMore: loadMoreProjectFlocks,
-  } = useSelect<BaseKandang>(
+  } = useSelect<ProjectFlock>(
     ProjectFlockApi.basePath,
     'id',
     'flock_name',
@@ -300,10 +315,11 @@ const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
     options: projectFlockKandangOptions,
     isLoadingOptions: isLoadingProjectFlockKandangs,
     loadMore: loadMoreProjectFlockKandangs,
-  } = useSelect<BaseKandang>(
+    rawData: projectFlockKandangsRawData,
+  } = useSelect<ProjectFlockKandang>(
     ProjectFlockKandangApi.basePath,
     'id',
-    'kandang.name',
+    'name_with_period',
     'search',
     {
       area_id: formik.values.area_id?.value
@@ -359,13 +375,15 @@ const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
     ([url]: string[]) => httpClient<BaseApiResponse<ProjectFlockKandang[]>>(url)
   );
 
-  const projectFlockKandangs = useMemo(
-    () =>
-      isResponseSuccess(projectFlockKandangsData)
-        ? projectFlockKandangsData.data
-        : null,
-    [projectFlockKandangsData]
-  );
+  const projectFlockKandangs = useMemo(() => {
+    if (selectedProjectFlockKandang) {
+      return [selectedProjectFlockKandang];
+    }
+
+    return isResponseSuccess(projectFlockKandangsData)
+      ? projectFlockKandangsData.data
+      : null;
+  }, [projectFlockKandangsData, selectedProjectFlockKandang]);
 
   const projectFlockKandangMetadata = useMemo(
     () =>
@@ -804,7 +822,6 @@ const ProductionResultContent = ({ tabId }: ProductionResultTabProps) => {
             />
 
             <SelectInput
-              required
               label='Kandang'
               placeholder='Pilih Kandang'
               options={projectFlockKandangOptions}