Merge branch 'fix/data-refactor-and-ui-adjustment' into 'development'

[FIX/FE] Data Refactor and UI Adjustment (Recording, Purchase, Finance, Marketing & Sales Report)

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

src/components/pages/production/recording/RecordingTable.tsx

@@ -5,7 +5,7 @@ import { RefObject } from 'react';
 import useSWR from 'swr';
 import { Icon } from '@iconify/react';
 import { SortingState, CellContext } from '@tanstack/react-table';
-import { cn, formatDate } from '@/lib/helper';
+import { cn, formatDate, formatNumber } from '@/lib/helper';
 import RequirePermission from '@/components/helper/RequirePermission';
 import { useModal } from '@/components/Modal';
 import Modal from '@/components/Modal';
@@ -656,20 +656,30 @@ const RecordingTable = () => {
               );
             },
             cell: ({ row }) => {
+              const recording = row.original;
+              const isDisabled = isRecordingApproved(recording);
+
+              const handleToggleSelection = (e: unknown) => {
+                if (!isDisabled) {
+                  row.getToggleSelectedHandler()(e);
+                }
+              };
+
               return (
-                <div>
+                <div className={cn({ 'opacity-50': isDisabled })}>
                   <CheckboxInput
                     name='row'
                     checked={row.getIsSelected()}
                     indeterminate={row.getIsSomeSelected()}
-                    onChange={row.getToggleSelectedHandler()}
+                    onChange={handleToggleSelection}
+                    disabled={isDisabled}
                   />
                 </div>
               );
             },
           },
           {
-            header: '#',
+            header: 'No',
             cell: (props) =>
               tableFilterState.pageSize * (tableFilterState.page - 1) +
               props.row.index +
@@ -680,6 +690,10 @@ const RecordingTable = () => {
             cell: (props) =>
               props.row.original.project_flock?.flock_name || '-',
           },
+          {
+            header: 'Periode',
+            cell: (props) => props.row.original.project_flock?.period || '-',
+          },
           {
             header: 'Kategori',
             cell: (props) => {
@@ -696,7 +710,21 @@ const RecordingTable = () => {
           },
           {
             header: 'Umur (hari)',
-            cell: (props) => props.row.original.day,
+            cell: (props) => {
+              return (
+                <>
+                  <span>
+                    {props.row.original.day} (Minggu ke-
+                    {props.row.original.project_flock.production_standart.week})
+                  </span>
+                </>
+              );
+            },
+          },
+          {
+            accessorKey: 'warehouse.name',
+            header: 'Gudang',
+            cell: (props) => props.row.original.warehouse?.name,
           },
           {
             accessorKey: 'record_date',
@@ -705,10 +733,263 @@ const RecordingTable = () => {
               formatDate(props.row.original.record_datetime, 'DD MMMM YYYY'),
           },
           {
-            header: 'Populasi Awal',
+            header: 'Populasi Akhir',
             cell: (props) =>
-              props.row.original.project_flock?.total_chick_qty?.toLocaleString() ||
+              props.row.original.project_flock?.total_chick_qty != null
-              '-',
+                ? formatNumber(props.row.original.project_flock.total_chick_qty)
+                : '-',
+          },
+          {
+            id: 'fcr',
+            header: 'FCR',
+            columns: [
+              {
+                id: 'fcr_actual',
+                header: 'Actual',
+                cell: (props) => {
+                  const value = props.row.original.fcr_value;
+                  return (
+                    <div className='text-center'>
+                      {value !== null && value !== undefined
+                        ? formatNumber(value)
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+              {
+                id: 'fcr_standard',
+                header: 'Standard',
+                cell: (props) => {
+                  const value = props.row.original.project_flock?.fcr?.fcr_std;
+                  return (
+                    <div className='text-center text-gray-600'>
+                      {value !== null && value !== undefined
+                        ? formatNumber(value)
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+            ],
+          },
+          {
+            id: 'feed_intake',
+            header: 'Feed Intake (KG)',
+            columns: [
+              {
+                id: 'feed_intake_actual',
+                header: 'Actual',
+                cell: (props) => {
+                  const value = props.row.original.feed_intake;
+                  return (
+                    <div className='text-center'>
+                      {value !== null && value !== undefined
+                        ? formatNumber(value)
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+              {
+                id: 'feed_intake_standard',
+                header: 'Standard',
+                cell: (props) => {
+                  const value =
+                    props.row.original.project_flock?.production_standart
+                      ?.feed_intake_std;
+                  return (
+                    <div className='text-center text-gray-600'>
+                      {value !== null && value !== undefined
+                        ? formatNumber(value)
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+            ],
+          },
+          {
+            id: 'mortality',
+            header: 'Mortality',
+            columns: [
+              {
+                id: 'cum_depletion_rate_actual',
+                header: 'Cum Depletion Rate',
+                cell: (props) => {
+                  const value = props.row.original.cum_depletion_rate;
+                  return (
+                    <div className='text-center'>
+                      {value !== null && value !== undefined
+                        ? `${value.toFixed(2)}%`
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+              {
+                id: 'max_depletion_std',
+                header: 'Max Depletion Std',
+                cell: (props) => {
+                  const value =
+                    props.row.original.project_flock?.production_standart
+                      ?.max_depletion_std;
+                  return (
+                    <div className='text-center text-gray-600'>
+                      {value !== null && value !== undefined
+                        ? `${value.toFixed(2)}%`
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+              {
+                id: 'total_depletion',
+                header: 'Total Depletion',
+                cell: (props) => {
+                  const value = props.row.original.total_depletion_qty;
+                  return (
+                    <div className='text-center'>
+                      {value !== null && value !== undefined
+                        ? formatNumber(value)
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+            ],
+          },
+          {
+            id: 'egg_production',
+            header: 'Egg Production',
+            columns: [
+              {
+                id: 'egg_mass_actual',
+                header: 'Egg Mass Actual',
+                cell: (props) => {
+                  const value = props.row.original.egg_mass;
+                  return (
+                    <div className='text-center'>
+                      {value !== null && value !== undefined
+                        ? formatNumber(value)
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+              {
+                id: 'egg_mass_standard',
+                header: 'Egg Mass Standar',
+                cell: (props) => {
+                  const value =
+                    props.row.original.project_flock?.production_standart
+                      ?.egg_mass_std;
+                  return (
+                    <div className='text-center text-gray-600'>
+                      {value !== null && value !== undefined
+                        ? formatNumber(value)
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+              {
+                id: 'egg_weight_actual',
+                header: 'Egg Weight Actual',
+                cell: (props) => {
+                  const value = props.row.original.egg_weight;
+                  return (
+                    <div className='text-center'>
+                      {value !== null && value !== undefined
+                        ? formatNumber(value)
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+              {
+                id: 'egg_weight_standard',
+                header: 'Egg Weight Standar',
+                cell: (props) => {
+                  const value =
+                    props.row.original.project_flock?.production_standart
+                      ?.egg_weight_std;
+                  return (
+                    <div className='text-center text-gray-600'>
+                      {value !== null && value !== undefined
+                        ? formatNumber(value)
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+            ],
+          },
+          {
+            id: 'hen_performance',
+            header: 'Hen Performance',
+            columns: [
+              {
+                id: 'hen_day_actual',
+                header: 'Hen Day Actual',
+                cell: (props) => {
+                  const value = props.row.original.hen_day;
+                  return (
+                    <div className='text-center'>
+                      {value !== null && value !== undefined
+                        ? `${value.toFixed(2)}%`
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+              {
+                id: 'hen_day_standard',
+                header: 'Hen Day Standar',
+                cell: (props) => {
+                  const value =
+                    props.row.original.project_flock?.production_standart
+                      ?.hen_day_std;
+                  return (
+                    <div className='text-center text-gray-600'>
+                      {value !== null && value !== undefined
+                        ? `${value.toFixed(2)}%`
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+              {
+                id: 'hen_house_actual',
+                header: 'Hen House Actual',
+                cell: (props) => {
+                  const value = props.row.original.hen_house;
+                  return (
+                    <div className='text-center'>
+                      {value !== null && value !== undefined
+                        ? `${value.toFixed(2)}%`
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+              {
+                id: 'hen_house_standard',
+                header: 'Hen House Standar',
+                cell: (props) => {
+                  const value =
+                    props.row.original.project_flock?.production_standart
+                      ?.hen_house_std;
+                  return (
+                    <div className='text-center text-gray-600'>
+                      {value !== null && value !== undefined
+                        ? `${value.toFixed(2)}%`
+                        : '-'}
+                    </div>
+                  );
+                },
+              },
+            ],
           },
           {
             header: 'Status Approval',
@@ -874,14 +1155,15 @@ const RecordingTable = () => {
             'mb-20':
               isResponseSuccess(recordings) && recordings?.data?.length === 0,
           }),
-          tableWrapperClassName: 'overflow-x-auto min-h-full!',
+          tableWrapperClassName: 'overflow-x-auto',
-          tableClassName: 'font-inter w-full table-auto min-h-full!',
+          tableClassName: 'w-full table-auto text-sm',
           headerRowClassName: 'border-b border-b-gray-200',
           headerColumnClassName:
-            'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+            'px-4 py-3 text-xs font-semibold text-gray-500 whitespace-nowrap border-l border-l-gray-200 border-r border-r-gray-200 border-t border-t-gray-200 border-gray-200 border-b-0',
-          bodyRowClassName: 'border-b border-b-gray-200',
+          bodyRowClassName:
+            'hover:bg-gray-50 transition-colors border-b border-gray-200 first:border-t first:border-t-gray-200 border-l border-l-gray-200 border-r border-r-gray-200',
           bodyColumnClassName:
-            'px-6 py-3 last:flex last:flex-row last:justify-end',
+            'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
         }}
       />
 

src/components/pages/production/recording/form/RecordingForm.schema.ts

@@ -7,6 +7,7 @@ import {
 } from '@/types/api/production/recording';
 
 type RecordingGrowingFormSchemaType = {
+  record_date: string;
   project_flock_kandang: {
     value: number;
     label: string;
@@ -85,6 +86,9 @@ const EggObjectSchema: Yup.ObjectSchema<EggSchema> = Yup.object({
 
 export const RecordingGrowingFormSchema: Yup.ObjectSchema<RecordingGrowingFormSchemaType> =
   Yup.object({
+    record_date: Yup.string()
+      .required('Tanggal recording wajib diisi!')
+      .typeError('Tanggal recording wajib diisi!'),
     project_flock_kandang: Yup.object({
       value: Yup.number().min(1).required(),
       label: Yup.string().required(),
@@ -179,6 +183,9 @@ type RecordingFormData = Partial<Recording> & {
 export const getRecordingGrowingFormInitialValues = (
   initialValues?: RecordingFormData
 ): RecordingGrowingFormValues => ({
+  record_date: initialValues?.record_datetime
+    ? new Date(initialValues.record_datetime).toISOString().split('T')[0]
+    : new Date().toISOString().split('T')[0],
   project_flock_kandang: initialValues?.project_flock_kandang_id
     ? {
         value: initialValues.project_flock_kandang_id,

src/components/pages/production/transfer-to-laying/TransferToLayingsTable.tsx

@@ -179,12 +179,16 @@ const TransferToLayingsTable = () => {
     setInputValue: setFlockSourceInputValue,
     options: flockSourceOptions,
     isLoadingOptions: isLoadingFlockSourceOptions,
+    loadMore: loadMoreFlockSource,
+    hasMore: hasMoreFlockSource,
   } = useSelect<Flock>(FlockApi.basePath, 'id', 'name');
 
   const {
     setInputValue: setFlockDestinationInputValue,
     options: flockDestinationOptions,
     isLoadingOptions: isLoadingFlockDestinationOptions,
+    loadMore: loadMoreFlockDestination,
+    hasMore: hasMoreFlockDestination,
   } = useSelect<Flock>(FlockApi.basePath, 'id', 'name');
 
   // Flocks value
@@ -595,6 +599,7 @@ const TransferToLayingsTable = () => {
               value={selectedFlockSource}
               onChange={flockSourceChangeHandler}
               onInputChange={setFlockSourceInputValue}
+              onMenuScrollToBottom={loadMoreFlockSource}
               isClearable
               className={{
                 wrapper: 'col-span-12 sm:col-span-3',
@@ -608,6 +613,7 @@ const TransferToLayingsTable = () => {
               value={selectedFlockDestination}
               onChange={flockDestinationChangeHandler}
               onInputChange={setFlockDestinationInputValue}
+              onMenuScrollToBottom={loadMoreFlockDestination}
               isClearable
               className={{
                 wrapper: 'col-span-12 sm:col-span-3',

src/components/pages/production/transfer-to-laying/form/TransferToLayingForm.tsx

@@ -270,6 +270,8 @@ const TransferToLayingForm = ({
     options: flockSourceOptions,
     isLoadingOptions: isLoadingFlockSourceOptions,
     rawData: flockSources,
+    loadMore: loadMoreFlockSource,
+    hasMore: hasMoreFlockSource,
   } = useSelect<ProjectFlock>(
     '/production/project-flocks',
     'id',
@@ -360,6 +362,8 @@ const TransferToLayingForm = ({
     options: flockDestinationOptions,
     isLoadingOptions: isLoadingFlockDestinationOptions,
     rawData: flockDestinations,
+    loadMore: loadMoreFlockDestination,
+    hasMore: hasMoreFlockDestination,
   } = useSelect<ProjectFlock>(
     '/production/project-flocks',
     'id',
@@ -573,6 +577,7 @@ const TransferToLayingForm = ({
                 onChange={flockSourceChangeHandler}
                 isLoading={isLoadingFlockSourceOptions}
                 onInputChange={setFlockSourceInputValue}
+                onMenuScrollToBottom={loadMoreFlockSource}
                 isError={
                   formik.touched.flockSource &&
                   Boolean(typeof formik.errors.flockSource === 'string')
@@ -591,6 +596,7 @@ const TransferToLayingForm = ({
                 onChange={flockDestinationChangeHandler}
                 isLoading={isLoadingFlockDestinationOptions}
                 onInputChange={setFlockDestinationInputValue}
+                onMenuScrollToBottom={loadMoreFlockDestination}
                 isError={
                   formik.touched.flockDestination &&
                   Boolean(typeof formik.errors.flockDestination === 'string')

src/components/pages/production/uniformity/UniformityTable.tsx

@@ -37,7 +37,10 @@ import DateInput from '@/components/input/DateInput';
 import { LocationApi } from '@/services/api/master-data';
 import { ProjectFlockApi } from '@/services/api/production';
 import { Kandang } from '@/types/api/master-data/kandang';
-import { ProjectFlockKandangLookup } from '@/types/api/production/project-flock';
+import {
+  ProjectFlockKandangLookup,
+  ProjectFlock,
+} from '@/types/api/production/project-flock';
 import {
   getStatusColor,
   getStatusIndicatorColor,
@@ -229,63 +232,37 @@ const UniformityTable = () => {
     useState<number | undefined>(undefined);
   const [filterStartDate, setFilterStartDate] = useState('');
   const [filterEndDate, setFilterEndDate] = useState('');
-  const [projectFlockSearchValue, setProjectFlockSearchValue] = useState('');
+  const [filterProjectFlockLocationId, setFilterProjectFlockLocationId] =
+    useState<string>('');
   const [filterErrors, setFilterErrors] = useState<Record<string, string>>({});
 
   const {
     setInputValue: setFilterLocationInputValue,
     options: filterLocationOptions,
     isLoadingOptions: isLoadingFilterLocations,
-  } = useSelect(LocationApi.basePath, 'id', 'name', 'search', {
+    loadMore: loadMoreFilterLocations,
-    limit: '100',
+    hasMore: hasMoreFilterLocations,
-  });
+  } = useSelect(LocationApi.basePath, 'id', 'name', 'search');
 
   // ===== FETCH PROJECT FLOCKS DATA FOR FILTER =====
-  const filterProjectFlocksUrl = useMemo(() => {
-    const params = new URLSearchParams({
-      search: projectFlockSearchValue || '',
-      limit: '100',
-    });
-    if (filterLocation) {
-      params.append('location_id', filterLocation.value.toString());
-    }
-    return `${ProjectFlockApi.basePath}?${params.toString()}`;
-  }, [projectFlockSearchValue, filterLocation]);
-
   const {
-    data: filterProjectFlocksData,
+    setInputValue: setFilterProjectFlockSearchValue,
-    isLoading: isLoadingFilterProjectFlocks,
+    options: filterProjectFlockOptions,
-  } = useSWR(filterProjectFlocksUrl, ProjectFlockApi.getAllFetcher);
+    rawData: filterProjectFlocksRawData,
-
+    isLoadingOptions: isLoadingFilterProjectFlocks,
-  const filterProjectFlocksDataList = useMemo(
+    loadMore: loadMoreFilterProjectFlocks,
-    () =>
+    hasMore: hasMoreFilterProjectFlocks,
-      isResponseSuccess(filterProjectFlocksData)
+  } = useSelect(ProjectFlockApi.basePath, 'id', 'flock_name', 'search', {
-        ? filterProjectFlocksData.data
+    location_id: filterProjectFlockLocationId,
-        : undefined,
+  });
-    [filterProjectFlocksData]
-  );
-
-  const filterProjectFlockOptions = useMemo(() => {
-    let options: OptionType[] = [];
-
-    if (isResponseSuccess(filterProjectFlocksData)) {
-      const flockOptions =
-        filterProjectFlocksData?.data.map((projectFlock) => ({
-          value: projectFlock.id,
-          label: projectFlock.flock_name || '',
-        })) || [];
-      options = options.concat(flockOptions);
-    }
-
-    return options;
-  }, [filterProjectFlocksData]);
 
   // ===== KANDANG OPTIONS FOR FILTER =====
   const filterKandangOptions = useMemo(() => {
     let options: OptionType[] = [];
 
-    if (filterProjectFlock && filterProjectFlocksDataList) {
+    if (filterProjectFlock && isResponseSuccess(filterProjectFlocksRawData)) {
-      const selectedProjectFlockData = filterProjectFlocksDataList.find(
+      const data = filterProjectFlocksRawData.data as unknown as ProjectFlock[];
+      const selectedProjectFlockData = data.find(
         (pf) => pf.id === filterProjectFlock.value
       );
 
@@ -301,7 +278,7 @@ const UniformityTable = () => {
     }
 
     return options;
-  }, [filterProjectFlock, filterProjectFlocksDataList]);
+  }, [filterProjectFlock, filterProjectFlocksRawData]);
 
   // ===== PROJECT FLOCK KANDANG LOOKUP =====
   const projectFlockKandangLookupUrl = useMemo(() => {
@@ -394,9 +371,13 @@ const UniformityTable = () => {
   // ===== FILTER HANDLERS =====
   const handleFilterLocationChange = useCallback(
     (val: OptionType | OptionType[] | null) => {
-      setFilterLocation(val as OptionType | null);
+      const location = val as OptionType | null;
+      setFilterLocation(location);
       setFilterProjectFlock(null);
       setFilterKandang(null);
+      setFilterProjectFlockLocationId(
+        location ? location.value.toString() : ''
+      );
     },
     []
   );
@@ -1206,6 +1187,7 @@ const UniformityTable = () => {
                   options={filterLocationOptions}
                   onInputChange={setFilterLocationInputValue}
                   isLoading={isLoadingFilterLocations}
+                  onMenuScrollToBottom={loadMoreFilterLocations}
                   className={{ wrapper: 'w-full' }}
                 />
                 {filterErrors.location && (
@@ -1225,8 +1207,9 @@ const UniformityTable = () => {
                     setFilterErrors((prev) => ({ ...prev, project_flock: '' }));
                   }}
                   options={filterProjectFlockOptions}
-                  onInputChange={setProjectFlockSearchValue}
+                  onInputChange={setFilterProjectFlockSearchValue}
                   isLoading={isLoadingFilterProjectFlocks}
+                  onMenuScrollToBottom={loadMoreFilterProjectFlocks}
                   isDisabled={!filterLocation}
                   className={{ wrapper: 'w-full' }}
                 />

src/components/pages/production/uniformity/chart/UniformityStat.tsx

@@ -1,4 +1,4 @@
-import Badge from '../../../../Badge';
+import Badge from '@/components/Badge';
 import Card from '@/components/Card';
 import { Icon } from '@iconify/react';
 import { formatNumber } from '@/lib/helper';

src/components/pages/production/uniformity/form/UniformityForm.tsx

@@ -36,7 +36,10 @@ import {
   VerifyUniformityPayload,
 } from '@/types/api/production/uniformity';
 import { type BaseApiResponse } from '@/types/api/api-general';
-import { ProjectFlockKandangLookup } from '@/types/api/production/project-flock';
+import {
+  ProjectFlockKandangLookup,
+  ProjectFlock,
+} from '@/types/api/production/project-flock';
 import { Kandang } from '@/types/api/master-data/kandang';
 import UniformityPreviewForm from '@/components/pages/production/uniformity/form/UniformityPreviewForm';
 import UniformityResultForm from '@/components/pages/production/uniformity/form/UniformityResultForm';
@@ -88,7 +91,9 @@ const UniformityForm = ({
     null
   );
 
-  const [projectFlockSearchValue, setProjectFlockSearchValue] = useState('');
+  const [selectedProjectFlockLocationId, setSelectedProjectFlockLocationId] =
+    useState<string>('');
+
   const [selectedProjectFlock, setSelectedProjectFlock] =
     useState<OptionType | null>(null);
 
@@ -100,50 +105,21 @@ const UniformityForm = ({
     setInputValue: setLocationSelectInputValue,
     options: locationOptions,
     isLoadingOptions: isLoadingLocations,
-  } = useSelect(LocationApi.basePath, 'id', 'name', 'search', {
+    loadMore: loadMoreLocations,
-    page: '1',
+    hasMore: hasMoreLocations,
-    limit: '100',
+  } = useSelect(LocationApi.basePath, 'id', 'name', 'search');
+
+  const {
+    setInputValue: setProjectFlockSearchValue,
+    options: projectFlockOptions,
+    rawData: projectFlocksRawData,
+    isLoadingOptions: isLoadingProjectFlocks,
+    loadMore: loadMoreProjectFlocks,
+    hasMore: hasMoreProjectFlocks,
+  } = useSelect(ProjectFlockApi.basePath, 'id', 'flock_name', 'search', {
+    location_id: selectedProjectFlockLocationId,
   });
 
-  // ===== FETCH PROJECT FLOCKS DATA =====
-  const projectFlocksUrl = useMemo(() => {
-    const params = new URLSearchParams({
-      search: projectFlockSearchValue || '',
-      page: '1',
-      limit: '100',
-    });
-    if (selectedLocation) {
-      params.append('location_id', selectedLocation.value.toString());
-    }
-    return `${ProjectFlockApi.basePath}?${params.toString()}`;
-  }, [projectFlockSearchValue, selectedLocation]);
-
-  const { data: projectFlocksData, isLoading: isLoadingProjectFlocks } = useSWR(
-    projectFlocksUrl,
-    ProjectFlockApi.getAllFetcher
-  );
-
-  const projectFlocksDataList =
-    projectFlocksData?.status === 'success'
-      ? projectFlocksData.data
-      : undefined;
-
-  // ===== PROJECT FLOCK OPTIONS =====
-  const projectFlockOptions = useMemo(() => {
-    let options: OptionType[] = [];
-
-    if (isResponseSuccess(projectFlocksData)) {
-      const flockOptions =
-        projectFlocksData?.data.map((projectFlock) => ({
-          value: projectFlock.id,
-          label: projectFlock.flock_name || '',
-        })) || [];
-      options = options.concat(flockOptions);
-    }
-
-    return options;
-  }, [projectFlocksData]);
-
   // ===== APPROVED PROJECT FLOCK KANDANGS =====
   const approvedProjectFlockKandangsUrl = useMemo(() => {
     const params = new URLSearchParams({
@@ -168,8 +144,9 @@ const UniformityForm = ({
   const kandangOptions = useMemo(() => {
     let options: OptionType[] = [];
 
-    if (selectedProjectFlock && projectFlocksDataList) {
+    if (selectedProjectFlock && isResponseSuccess(projectFlocksRawData)) {
-      const selectedProjectFlockData = projectFlocksDataList.find(
+      const data = projectFlocksRawData.data as unknown as ProjectFlock[];
+      const selectedProjectFlockData = data.find(
         (pf) => pf.id === selectedProjectFlock.value
       );
 
@@ -196,7 +173,7 @@ const UniformityForm = ({
     return options;
   }, [
     selectedProjectFlock,
-    projectFlocksDataList,
+    projectFlocksRawData,
     approvedProjectFlockKandangs,
     formType,
   ]);
@@ -313,6 +290,10 @@ const UniformityForm = ({
       formik.setFieldValue('location_id', locationId);
 
       setSelectedLocation(location);
+      setSelectedProjectFlock(null);
+      setSelectedProjectFlockLocationId(
+        location ? location.value.toString() : ''
+      );
     },
     []
   );
@@ -513,6 +494,7 @@ const UniformityForm = ({
               options={locationOptions}
               onInputChange={setLocationSelectInputValue}
               isLoading={isLoadingLocations}
+              onMenuScrollToBottom={loadMoreLocations}
               isError={
                 formik.touched.location_id && Boolean(formik.errors.location_id)
               }
@@ -530,6 +512,7 @@ const UniformityForm = ({
               options={projectFlockOptions}
               onInputChange={setProjectFlockSearchValue}
               isLoading={isLoadingProjectFlocks}
+              onMenuScrollToBottom={loadMoreProjectFlocks}
               isDisabled={!formik.values.location_id}
               isError={
                 formik.touched.project_flock_id &&

src/components/pages/purchase/form/order/PurchaseOrderAcceptApprovalForm.tsx

@@ -156,8 +156,11 @@ const PurchaseOrderAcceptApprovalForm = ({
     setInputValue: setExpeditionsSelectInputValue,
     options: expeditionVendors,
     isLoadingOptions: isLoadingExpeditions,
+    loadMore: loadMoreExpeditions,
+    hasMore: hasMoreExpeditions,
   } = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name', 'search', {
     category: 'BOP',
+    flag: 'EKSPEDISI',
   });
 
   // ===== FORM CONFIGURATION =====
@@ -183,8 +186,8 @@ const PurchaseOrderAcceptApprovalForm = ({
               purchase_item_id: formItem.purchase_item_id || 0,
               received_date: formItem.received_date || '',
               travel_number: formItem.travel_number || '',
-              vehicle_number: formItem.vehicle_number || '',
+              vehicle_number: formItem.vehicle_number || null,
-              expedition_vendor_id: formItem.expedition_vendor_id || 0,
+              expedition_vendor_id: formItem.expedition_vendor_id || null,
               received_qty:
                 typeof formItem.received_qty === 'string'
                   ? parseFloat(formItem.received_qty) || 0
@@ -192,10 +195,13 @@ const PurchaseOrderAcceptApprovalForm = ({
               transport_per_item:
                 typeof formItem.transport_per_item === 'string'
                   ? parseFloat(formItem.transport_per_item) || 0
-                  : formItem.transport_per_item || 0,
+                  : formItem.transport_per_item || null,
             };
           }) || [],
-        travel_documents: values.travel_documents || [],
+        travel_documents:
+          values.travel_documents
+            ?.filter((file): file is File => file instanceof File)
+            .filter(Boolean) || undefined,
       };
 
       switch (type) {
@@ -403,22 +409,13 @@ const PurchaseOrderAcceptApprovalForm = ({
                   Dokumen Surat Jalan
                   <span className='text-error'>*</span>
                 </th>
-                <th>
+                <th>Nomor Kendaraan</th>
-                  Nomor Kendaraan
+                <th>Vendor Ekspedisi</th>
-                  <span className='text-error'>*</span>
-                </th>
-                <th>
-                  Vendor Ekspedisi
-                  <span className='text-error'>*</span>
-                </th>
                 <th>
                   Jumlah Diterima
                   <span className='text-error'>*</span>
                 </th>
-                <th>
+                <th>Transport/Item</th>
-                  Transport/Item
-                  <span className='text-error'>*</span>
-                </th>
               </tr>
             </thead>
             <tbody>
@@ -536,7 +533,6 @@ const PurchaseOrderAcceptApprovalForm = ({
                     </td>
                     <td>
                       <TextInput
-                        required
                         name={`items.${idx}.vehicle_number`}
                         type='text'
                         value={formItem?.vehicle_number || ''}
@@ -562,7 +558,6 @@ const PurchaseOrderAcceptApprovalForm = ({
                     </td>
                     <td>
                       <SelectInput
-                        required
                         isClearable={true}
                         value={formItem?.expedition_vendor}
                         key={`expedition-vendor-${idx}`}
@@ -570,6 +565,8 @@ const PurchaseOrderAcceptApprovalForm = ({
                           expeditionVendorChangeHandler(idx, val)
                         }
                         options={getExpeditionVendorOptions()}
+                        isLoading={isLoadingExpeditions}
+                        onMenuScrollToBottom={loadMoreExpeditions}
                         isError={
                           isRepeaterInputError(idx, 'expedition_vendor_id')
                             .isError
@@ -629,7 +626,6 @@ const PurchaseOrderAcceptApprovalForm = ({
                     </td>
                     <td>
                       <NumberInput
-                        required
                         name={`items.${idx}.transport_per_item`}
                         value={formItem?.transport_per_item || ''}
                         onChange={(e) =>
@@ -680,7 +676,6 @@ const PurchaseOrderAcceptApprovalForm = ({
 
         <div className={'col-span-2 my-2'}>
           <FileInput
-            required
             name='travel_documents'
             label='Dokumen Surat Jalan'
             accept='.pdf,.jpg,.jpeg,.png'

src/components/pages/purchase/form/order/PurchaseOrderForm.schema.ts

@@ -38,16 +38,16 @@ type PurchaseRequestAcceptApprovalFormSchemaType = {
     purchase_item_id: number;
     received_date: string;
     travel_number: string;
-    vehicle_number: string;
+    vehicle_number?: string | null;
     expedition_vendor?: {
       value: number;
       label: string;
     } | null;
-    expedition_vendor_id: number;
+    expedition_vendor_id?: number | null;
     received_qty: number | string;
-    transport_per_item: number | string;
+    transport_per_item?: number | string | null;
   }[];
-  travel_documents: File[];
+  travel_documents?: (File | null | undefined)[] | null;
 };
 
 export type PurchaseStaffApprovalItemSchema = {
@@ -75,14 +75,14 @@ export type PurchaseAcceptApprovalItemSchema = {
   purchase_item_id: number;
   received_date: string;
   travel_number: string;
-  vehicle_number: string;
+  vehicle_number?: string | null;
   expedition_vendor?: {
     value: number;
     label: string;
   } | null;
-  expedition_vendor_id: number;
+  expedition_vendor_id?: number | null;
   received_qty: number | string;
-  transport_per_item: number | string;
+  transport_per_item?: number | string | null;
 };
 
 export type PurchaseDeleteItemsSchema = {
@@ -184,24 +184,19 @@ const PurchaseAcceptApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseAcceptApp
       .required('No. Surat jalan wajib diisi!')
       .typeError('No. Surat jalan wajib diisi!'),
     vehicle_number: Yup.string()
-      .required('Nomor kendaraan wajib diisi!')
+      .nullable()
-      .typeError('Nomor kendaraan wajib diisi!'),
+      .optional()
+      .typeError('Nomor kendaraan harus berupa plat nomor!'),
     expedition_vendor: Yup.object({
       value: Yup.number().min(1).required(),
       label: Yup.string().required(),
-    }).nullable(),
+    })
+      .nullable()
+      .optional(),
     expedition_vendor_id: Yup.number()
-      .min(1, 'Vendor ekspedisi wajib diisi!')
+      .nullable()
-      .required('Vendor ekspedisi wajib diisi!')
+      .optional()
-      .test(
+      .typeError('Vendor ekspedisi harus berupa angka!'),
-        'is-valid-expedition-vendor',
-        'Vendor ekspedisi harus dipilih!',
-        function (value) {
-          if (!this.parent.expedition_vendor) return true;
-          return Boolean(value && value > 0);
-        }
-      )
-      .typeError('Vendor ekspedisi harus dipilih!'),
     received_qty: Yup.mixed<string | number>()
       .required('Jumlah diterima wajib diisi!')
       .test(
@@ -217,13 +212,14 @@ const PurchaseAcceptApprovalItemObjectSchema: Yup.ObjectSchema<PurchaseAcceptApp
       )
       .typeError('Jumlah diterima harus berupa angka!'),
     transport_per_item: Yup.mixed<string | number>()
-      .required('Biaya transport per item wajib diisi!')
+      .nullable()
+      .optional()
       .test(
         'is-valid-transport-per-item',
         'Biaya transport per item harus berupa angka lebih dari atau sama dengan 0!',
         function (value) {
           if (value === '' || value === null || value === undefined)
-            return false;
+            return true;
           const numValue =
             typeof value === 'string' ? parseFloat(value) : value;
           return !isNaN(numValue) && numValue >= 0;
@@ -389,16 +385,17 @@ export const PurchaseRequestAcceptApprovalFormSchema: Yup.ObjectSchema<PurchaseR
     travel_documents: Yup.array()
       .of(
         Yup.mixed<File>()
-          .required('Dokumen surat jalan wajib diupload!')
+          .nullable()
+          .optional()
           .test('fileSize', 'Ukuran dokumen maksimal 5 MB', (value) => {
             if (!value) return true;
             if (value instanceof File) return value.size <= 5 * 1024 * 1024;
             return true;
           })
       )
-      .required('Dokumen surat jalan wajib diupload!')
+      .nullable()
-      .min(1, 'Minimal upload 1 dokumen surat jalan!')
+      .optional()
-      .typeError('Dokumen surat jalan wajib diupload!'),
+      .typeError('Dokumen surat jalan harus berupa array!'),
   });
 
 export const PurchaseRequestAcceptApprovalFormInitialValues: PurchaseRequestAcceptApprovalFormSchemaType =

src/components/pages/purchase/form/request/PurchaseRequestForm.tsx

@@ -63,11 +63,9 @@ const PurchaseRequestForm = ({
     useState('');
   const [formErrorList, setFormErrorList] = useState<string[]>([]);
 
-  // ===== TYPE DEFINITIONS =====
+  const [selectedArea, setSelectedArea] = useState('');
-  interface ProductOptionType {
+  const [selectedLocation, setSelectedLocation] = useState('');
-    value: number;
+  const [disabledLocation, setDisabledLocation] = useState(true);
-    label: string;
-  }
 
   // ===== UTILITY FUNCTIONS =====
   const isRepeaterInputError = (
@@ -160,11 +158,35 @@ const PurchaseRequestForm = ({
     isLoadingOptions: isLoadingAreas,
   } = useSelect(AreaApi.basePath, 'id', 'name', 'search');
 
+  const {
+    options: locationOptions,
+    isLoadingOptions: isLoadingLocations,
+    loadMore: loadMoreLocations,
+    hasMore: hasMoreLocations,
+  } = useSelect(LocationApi.basePath, 'id', 'name', '', {
+    area_id:
+      selectedArea != ''
+        ? selectedArea
+        : ((initialValues?.area?.id ?? '') as string),
+  });
+
   const {
     inputValue: warehouseSelectInputValue,
     setInputValue: setWarehouseSelectInputValue,
+    options: warehouseOptions,
     isLoadingOptions: isLoadingWarehouses,
-  } = useSelect(WarehouseApi.basePath, 'id', 'name', 'search');
+    loadMore: loadMoreWarehouses,
+    hasMore: hasMoreWarehouses,
+  } = useSelect(WarehouseApi.basePath, 'id', 'name', 'search', {
+    area_id:
+      selectedArea != ''
+        ? selectedArea
+        : ((initialValues?.area?.id ?? '') as string),
+    location_id:
+      selectedLocation != ''
+        ? selectedLocation
+        : ((initialValues?.location?.id ?? '') as string),
+  });
 
   // ===== FORM CONFIGURATION =====
   const formikInitialValues = useMemo<PurchaseRequestFormValues>(
@@ -267,70 +289,6 @@ const PurchaseRequestForm = ({
     return data;
   }, [supplierData]);
 
-  const locationsUrl = useMemo(() => {
-    const params = new URLSearchParams({
-      search: locationSelectInputValue,
-      ...(formik.values.area_id && formik.values.area_id > 0
-        ? { area_id: formik.values.area_id.toString() }
-        : {}),
-    });
-    return `${LocationApi.basePath}?${params.toString()}`;
-  }, [locationSelectInputValue, formik.values.area_id]);
-
-  const { data: locations, isLoading: isLoadingLocations } = useSWR(
-    locationsUrl,
-    LocationApi.getAllFetcher
-  );
-
-  const locationOptions = useMemo(() => {
-    if (!isResponseSuccess(locations)) return [];
-    return (
-      locations?.data.map((location) => ({
-        value: location.id,
-        label: location.name,
-      })) || []
-    );
-  }, [locations]);
-
-  const warehousesUrl = useMemo(() => {
-    const params = new URLSearchParams({ search: warehouseSelectInputValue });
-
-    if (formik.values.area_id && formik.values.area_id > 0) {
-      params.append('area_id', formik.values.area_id.toString());
-    }
-
-    if (formik.values.location_id && formik.values.location_id > 0) {
-      params.append('location_id', formik.values.location_id.toString());
-    }
-
-    return `${WarehouseApi.basePath}?${params.toString()}`;
-  }, [
-    warehouseSelectInputValue,
-    formik.values.area_id,
-    formik.values.location_id,
-  ]);
-
-  const { data: warehouses } = useSWR(
-    warehousesUrl,
-    WarehouseApi.getAllFetcher
-  );
-
-  const warehouseOptions = useMemo(() => {
-    if (!isResponseSuccess(warehouses)) return [];
-
-    return (
-      warehouses?.data.map((w) => ({
-        value: w.id,
-        label: w.name,
-        area: w.area?.name,
-        location:
-          'type' in w && (w.type === 'LOKASI' || w.type === 'KANDANG')
-            ? w.location?.name
-            : undefined,
-      })) || []
-    );
-  }, [warehouses]);
-
   const addPurchaseItem = () => {
     const newItems = [
       ...(formik.values.items || []),
@@ -407,6 +365,18 @@ const PurchaseRequestForm = ({
     }
   }, [formik.values.supplier_id]);
 
+  useEffect(() => {
+    if (type !== 'add' && initialValues) {
+      if (initialValues.area?.id) {
+        setSelectedArea(initialValues.area.id.toString());
+        setDisabledLocation(false);
+      }
+      if (initialValues.location?.id) {
+        setSelectedLocation(initialValues.location.id.toString());
+      }
+    }
+  }, [type, initialValues]);
+
   // ===== FORM HANDLERS =====
   const handleSupplierChange = useCallback(
     (val: OptionType | OptionType[] | null) => {
@@ -445,6 +415,16 @@ const PurchaseRequestForm = ({
       formik.setFieldValue('area_id', (area as OptionType)?.value || 0);
       formik.setFieldTouched('area', true);
       formik.setFieldValue('area', area);
+
+      setSelectedArea((area as OptionType)?.value as string);
+      setSelectedLocation('');
+      const disabled = (area as OptionType)?.value == null;
+      setDisabledLocation(disabled);
+
+      formik.setFieldTouched('location_id', false);
+      formik.setFieldValue('location_id', 0);
+      formik.setFieldTouched('location', false);
+      formik.setFieldValue('location', null);
     },
     []
   );
@@ -456,6 +436,8 @@ const PurchaseRequestForm = ({
       formik.setFieldValue('location_id', (location as OptionType)?.value || 0);
       formik.setFieldTouched('location', true);
       formik.setFieldValue('location', location);
+
+      setSelectedLocation((location as OptionType)?.value as string);
     },
     []
   );
@@ -596,10 +578,15 @@ const PurchaseRequestForm = ({
                 placeholder='Pilih Lokasi...'
                 value={formik.values.location}
                 onChange={handleLocationChange}
-                options={locationOptions}
+                options={
+                  selectedArea != '' || initialValues?.area?.id
+                    ? locationOptions
+                    : []
+                }
                 onInputChange={setLocationSelectInputValue}
                 isLoading={isLoadingLocations}
-                isDisabled={type === 'detail'}
+                onMenuScrollToBottom={loadMoreLocations}
+                isDisabled={type === 'detail' || disabledLocation}
                 isClearable={type !== 'detail'}
               />
 
@@ -713,6 +700,7 @@ const PurchaseRequestForm = ({
                           options={warehouseOptions}
                           onInputChange={setWarehouseSelectInputValue}
                           isLoading={isLoadingWarehouses}
+                          onMenuScrollToBottom={loadMoreWarehouses}
                           isError={
                             isRepeaterInputError(idx, 'warehouse_id').isError
                           }
@@ -732,9 +720,9 @@ const PurchaseRequestForm = ({
                           required
                           value={item.product ?? undefined}
                           onChange={(val) => {
-                            const product = val as ProductOptionType | null;
+                            const product = val as OptionType | null;
                             const productId =
-                              (product as ProductOptionType)?.value || 0;
+                              (product as OptionType)?.value || 0;
 
                             formik.setFieldTouched(
                               `items.${idx}.product`,

src/components/pages/report/finance/export/CustomerPaymentExportPDF.tsx

@@ -177,10 +177,12 @@ interface CustomerPaymentExportPDFParams {
   data: CustomerPaymentReport[];
   params?: {
     customer_name?: string;
-    sales?: string;
+    // TODO: Uncomment when BE is ready
+    // sales?: string;
     start_date?: string;
     end_date?: string;
-    filter_by?: string;
+    // TODO: Uncomment when BE is ready
+    // filter_by?: string;
   };
 }
 
@@ -195,9 +197,10 @@ const getParameterText = (
     paramsText.push('Semua Customer');
   }
 
-  if (params?.sales) {
+  // TODO: Uncomment when BE is ready
-    paramsText.push(`Sales: ${params.sales}`);
+  // if (params?.sales) {
-  }
+  //   paramsText.push(`Sales: ${params.sales}`);
+  // }
 
   if (params?.start_date && params?.end_date) {
     const startDate = formatDate(params.start_date, 'DD MMM YYYY');
@@ -242,9 +245,10 @@ const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
                     : '-'}
                 </Text>
               </View>
-              <View style={pdfStyles.parameterBadge}>
+              {/* TODO: Uncomment when BE is ready */}
+              {/* <View style={pdfStyles.parameterBadge}>
                 <Text>Filter Tanggal: Tanggal DO</Text>
-              </View>
+              </View> */}
               <View style={pdfStyles.parameterBadge}>
                 <Text>
                   Customer: {params.params?.customer_name || 'Semua Customer'}
@@ -280,7 +284,7 @@ const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
               <View style={[pdfStyles.tableCellHeader, { flex: 0.8 }]}>
                 <Text>Aging</Text>
               </View>
-              <View style={[pdfStyles.tableCellHeader, { flex: 1 }]}>
+              <View style={[pdfStyles.tableCellHeader, { flex: 1.5 }]}>
                 <Text>Referensi</Text>
               </View>
               <View style={[pdfStyles.tableCellHeader, { flex: 1.2 }]}>
@@ -298,15 +302,9 @@ const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
                 <Text>Harga Awal</Text>
               </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1 }]}>
-                <Text>CN</Text>
-              </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
                 <Text>Harga Akhir</Text>
               </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 0.8 }]}>
-                <Text>Pajak</Text>
-              </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
                 <Text>Total</Text>
               </View>
@@ -343,13 +341,15 @@ const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
                 </View>
                 <View style={[pdfStyles.tableCellCenter, { flex: 1.2 }]}>
                   <Text>
-                    {item.do_date ? formatDate(item.do_date, 'DD MMM YY') : '-'}
+                    {item.trans_date
+                      ? formatDate(item.trans_date, 'DD MMM YY')
+                      : '-'}
                   </Text>
                 </View>
                 <View style={[pdfStyles.tableCellCenter, { flex: 1.2 }]}>
                   <Text>
-                    {item.realization_date
+                    {item.delivery_date
-                      ? formatDate(item.realization_date, 'DD MMM YY')
+                      ? formatDate(item.delivery_date, 'DD MMM YY')
                       : '-'}
                   </Text>
                 </View>
@@ -358,11 +358,15 @@ const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
                     {item.aging_day ? formatNumber(item.aging_day) : '-'} hari
                   </Text>
                 </View>
-                <View style={[pdfStyles.tableCell, { flex: 1 }]}>
+                <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
                   <Text>{item.reference || '-'}</Text>
                 </View>
                 <View style={[pdfStyles.tableCell, { flex: 1.2 }]}>
-                  <Text>{item.vehicle_plate || '-'}</Text>
+                  <Text>
+                    {Array.isArray(item.vehicle_numbers)
+                      ? item.vehicle_numbers.join(', ')
+                      : item.vehicle_numbers || '-'}
+                  </Text>
                 </View>
                 <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
                   <Text>{formatNumber(item.qty)}</Text>
@@ -376,20 +380,14 @@ const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
                 <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
                   <Text>{formatCurrency(item.price)}</Text>
                 </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
-                  <Text>{formatCurrency(item.credit_note)}</Text>
-                </View>
                 <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
                   <Text>{formatCurrency(item.final_price)}</Text>
                 </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
+                <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                  <Text>{formatNumber(item.ppn)}%</Text>
+                  <Text>{formatCurrency(item.total_price)}</Text>
                 </View>
                 <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                  <Text>{formatCurrency(item.total)}</Text>
+                  <Text>{formatCurrency(item.payment_amount)}</Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                  <Text>{formatCurrency(item.payment)}</Text>
                 </View>
                 <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
                   <Text style={pdfStyles.textError}>
@@ -397,30 +395,32 @@ const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
                   </Text>
                 </View>
                 <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
-                  {item.notes ? (
+                  {item.status ? (
-                    <Text>{item.notes}</Text>
-                  ) : (
                     <View
                       style={[
                         pdfStyles.badge,
-                        item.accounts_receivable === 0
+                        item.status === 'LUNAS'
                           ? pdfStyles.badgeLunas
                           : pdfStyles.badgeBelumLunas,
                       ]}
                     >
                       <Text>
-                        {item.accounts_receivable === 0
+                        {item.status === 'LUNAS' ? 'Lunas' : 'Belum Lunas'}
-                          ? 'Lunas'
-                          : 'Belum Lunas'}
                       </Text>
                     </View>
+                  ) : (
+                    <Text>-</Text>
                   )}
                 </View>
                 <View style={[pdfStyles.tableCell, { flex: 1 }]}>
-                  <Text>{item.pickup_info || '-'}</Text>
+                  <Text>
+                    {Array.isArray(item.pickup_info)
+                      ? item.pickup_info.join(', ')
+                      : item.pickup_info || '-'}
+                  </Text>
                 </View>
                 <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
-                  <Text>{item.sales_marketing || '-'}</Text>
+                  <Text>{item.sales_person || '-'}</Text>
                 </View>
               </View>
             ))}
@@ -440,7 +440,7 @@ const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
                 <View style={[pdfStyles.tableCell, { flex: 0.8 }]}>
                   <Text></Text>
                 </View>
-                <View style={[pdfStyles.tableCell, { flex: 1 }]}>
+                <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
                   <Text></Text>
                 </View>
                 <View style={[pdfStyles.tableCell, { flex: 1.2 }]}>
@@ -458,25 +458,13 @@ const createPDFDocument = (params: CustomerPaymentExportPDFParams) => {
                   <Text></Text>
                 </View>
                 <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                  <Text>
+                  <Text></Text>
-                    {formatCurrency(
-                      customerReport.summary.total_initial_amount
-                    )}
-                  </Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
-                  <Text>
-                    {formatCurrency(customerReport.summary.total_credit_note)}
-                  </Text>
                 </View>
                 <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
                   <Text>
                     {formatCurrency(customerReport.summary.total_final_amount)}
                   </Text>
                 </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
-                  <Text></Text>
-                </View>
                 <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
                   <Text>
                     {formatCurrency(customerReport.summary.total_grand_amount)}

src/components/pages/report/finance/export/CustomerPaymentExportXLSX.tsx

@@ -24,30 +24,30 @@ export const generateCustomerPaymentExcel = (
     const excelData: { [key: string]: string | number }[] = customerData.map(
       (item, index) => ({
         No: index + 1,
-        'Tanggal DO/Bayar': item.do_date
+        'Tanggal DO/Bayar': item.trans_date
-          ? formatDate(item.do_date, 'DD MMM YYYY')
+          ? formatDate(item.trans_date, 'DD MMM YYYY')
           : '',
-        'Tanggal Realisasi': item.realization_date
+        'Tanggal Realisasi': item.delivery_date
-          ? formatDate(item.realization_date, 'DD MMM YYYY')
+          ? formatDate(item.delivery_date, 'DD MMM YYYY')
           : '',
         Aging: formatNumber(item.aging_day || 0),
         Referensi: item.reference || '',
-        'Nomor Polisi': Array.isArray(item.vehicle_plate)
+        'Nomor Polisi': Array.isArray(item.vehicle_numbers)
-          ? item.vehicle_plate.join(', ')
+          ? item.vehicle_numbers.join(', ')
           : '',
         'Ekor/Qty': formatNumber(item.qty || 0),
         'Berat (Kg)': formatNumber(item.weight || 0),
         AVG: formatNumber(item.average_weight || 0),
         'Harga Awal': formatCurrency(item.price || 0),
-        CN: formatCurrency(item.credit_note || 0),
         'Harga Akhir': formatCurrency(item.final_price || 0),
-        'PPN (%)': formatNumber(item.ppn || 0),
+        Total: formatCurrency(item.total_price || 0),
-        Total: formatCurrency(item.total || 0),
+        Pembayaran: formatCurrency(item.payment_amount || 0),
-        Pembayaran: formatCurrency(item.payment || 0),
         'Saldo Piutang': formatCurrency(item.accounts_receivable || 0),
-        Keterangan: item.notes || '',
+        Keterangan: item.status || '',
-        Pengambilan: item.pickup_info || '',
+        Pengambilan: Array.isArray(item.pickup_info)
-        'Sales/Marketing': item.sales_marketing || '',
+          ? item.pickup_info.join(', ')
+          : '',
+        'Sales/Marketing': item.sales_person || '',
       })
     );
 
@@ -62,14 +62,10 @@ export const generateCustomerPaymentExcel = (
         'Ekor/Qty': formatNumber(customerReport.summary.total_qty || 0),
         'Berat (Kg)': formatNumber(customerReport.summary.total_weight || 0),
         AVG: '',
-        'Harga Awal': formatCurrency(
+        'Harga Awal': '',
-          customerReport.summary.total_initial_amount || 0
-        ),
-        CN: formatCurrency(customerReport.summary.total_credit_note || 0),
         'Harga Akhir': formatCurrency(
           customerReport.summary.total_final_amount || 0
         ),
-        'PPN (%)': '',
         Total: formatCurrency(customerReport.summary.total_grand_amount || 0),
         Pembayaran: formatCurrency(customerReport.summary.total_payment || 0),
         'Saldo Piutang': formatCurrency(
@@ -94,9 +90,7 @@ export const generateCustomerPaymentExcel = (
       { wch: 12 }, // Berat
       { wch: 10 }, // AVG
       { wch: 15 }, // Harga Awal
-      { wch: 10 }, // CN
       { wch: 15 }, // Harga Akhir
-      { wch: 10 }, // PPN
       { wch: 15 }, // Total
       { wch: 15 }, // Pembayaran
       { wch: 15 }, // Saldo Piutang

src/components/pages/report/finance/tab/CustomerPaymentTab.tsx

@@ -47,6 +47,8 @@ const CustomerPaymentTab = () => {
   const [filterCustomer, setFilterCustomer] = useState<typeof customerOptions>(
     []
   );
+  // TODO: Uncomment when BE is ready
+  // const [filterSales, setFilterSales] = useState<typeof salesOptions>([]);
   const [filterSales, setFilterSales] = useState<typeof salesOptions>([]);
   const [filterStartDate, setFilterStartDate] = useState('');
   const [filterEndDate, setFilterEndDate] = useState('');
@@ -61,6 +63,7 @@ const CustomerPaymentTab = () => {
     hasMore: hasMoreCustomers,
   } = useSelect(CustomerApi.basePath, 'id', 'name', 'search');
 
+  // TODO: Uncomment when BE is ready
   const {
     options: salesOptions,
     setInputValue: setSalesInputValue,
@@ -135,23 +138,18 @@ const CustomerPaymentTab = () => {
       count += 1;
     }
 
-    // Sales filter
+    // TODO: Uncomment when BE is ready
-    if (filterSales.length > 0) {
+    // // Sales filter
-      count += 1;
+    // if (filterSales.length > 0) {
-    }
+    //   count += 1;
-
+    // }
-    // Filter by (always count if submitted)
-    if (isSubmitted) {
-      count += 1;
-    }
 
     return count;
   }, [
     filterStartDate,
     filterEndDate,
     filterCustomer,
-    filterSales,
+    // filterSales,
-    isSubmitted,
   ]);
 
   const hasFilters = activeFiltersCount > 0;
@@ -165,11 +163,12 @@ const CustomerPaymentTab = () => {
               filterCustomer.length > 0
                 ? filterCustomer.map((v) => String(v.value)).join(',')
                 : undefined,
-            sales_id:
+            // TODO: Uncomment when BE is ready
-              filterSales.length > 0
+            // sales_id:
-                ? filterSales.map((v) => String(v.value)).join(',')
+            //   filterSales.length > 0
-                : undefined,
+            //     ? filterSales.map((v) => String(v.value)).join(',')
-            filter_by: 'do_date' as const,
+            //     : undefined,
+            // filter_by: 'do_date' as const,
             start_date: filterStartDate || undefined,
             end_date: filterEndDate || undefined,
             page: currentPage,
@@ -182,8 +181,8 @@ const CustomerPaymentTab = () => {
     ([, params]) =>
       FinanceApi.getCustomerPaymentReport(
         params.customer_id,
-        params.sales_id,
+        undefined, // TODO: Change to params.sales_id when BE is ready
-        params.filter_by,
+        undefined, // TODO: Change to params.filter_by when BE is ready
         params.start_date,
         params.end_date,
         params.page,
@@ -208,11 +207,11 @@ const CustomerPaymentTab = () => {
         filterCustomer.length > 0
           ? filterCustomer.map((v) => String(v.value)).join(',')
           : undefined,
-      sales_id:
+      // TODO: Uncomment when BE is ready
-        filterSales.length > 0
+      // sales_id:
-          ? filterSales.map((v) => String(v.value)).join(',')
+      //   filterSales.length > 0
-          : undefined,
+      //     ? filterSales.map((v) => String(v.value)).join(',')
-      filter_by: 'do_date' as const,
+      //     : undefined,
       start_date: filterStartDate || undefined,
       end_date: filterEndDate || undefined,
       limit: 100,
@@ -221,8 +220,8 @@ const CustomerPaymentTab = () => {
 
     const response = await FinanceApi.getCustomerPaymentReport(
       params.customer_id,
-      params.sales_id,
+      undefined, // TODO: Change to params.sales_id when BE is ready
-      params.filter_by,
+      undefined, // TODO: Change to params.filter_by when BE is ready
       params.start_date,
       params.end_date,
       params.page,
@@ -279,13 +278,15 @@ const CustomerPaymentTab = () => {
             filterCustomer.length > 0
               ? filterCustomer.map((c) => c.label).join(', ')
               : undefined,
-          sales:
+          // TODO: Uncomment when BE is ready
-            filterSales.length > 0
+          // sales:
-              ? filterSales.map((s) => s.label).join(', ')
+          //   filterSales.length > 0
-              : undefined,
+          //     ? filterSales.map((s) => s.label).join(', ')
+          //     : undefined,
           start_date: filterStartDate || undefined,
           end_date: filterEndDate || undefined,
-          filter_by: 'do_date',
+          // TODO: Uncomment when BE is ready
+          // filter_by: 'do_date' as const,
         },
       });
       toast.success('PDF berhasil dibuat dan diunduh.');
@@ -303,36 +304,39 @@ const CustomerPaymentTab = () => {
       {
         id: 'no',
         header: 'No',
-        cell: (props) => props.row.index + 1,
+        cell: (props) => props.row.index,
         footer: () => <div className='font-semibold text-gray-900'>Total</div>,
       },
       {
         id: 'do_date_or_payment_date',
-        header: 'Tanggal DO/Bayar',
+        header: 'Tanggal Jual/Bayar',
-        accessorKey: 'do_date',
+        accessorKey: 'trans_date',
+        enableSorting: false,
         cell: (props) => {
-          const value = props.row.original.do_date;
+          const value = props.row.original.trans_date;
-          return formatDate(value, 'DD MMM YYYY');
+          return value ? formatDate(value, 'DD MMM YYYY') : '-';
         },
       },
       {
         id: 'realization_date',
         header: 'Tanggal Realisasi',
-        accessorKey: 'realization_date',
+        accessorKey: 'delivery_date',
+        enableSorting: false,
         cell: (props) => {
-          const value = props.row.original.realization_date;
+          const value = props.row.original.delivery_date;
-          return formatDate(value, 'DD MMM YYYY');
+          return value ? formatDate(value, 'DD MMM YYYY') : '-';
         },
       },
       {
         id: 'aging',
         header: 'Aging',
         accessorKey: 'aging_day',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.aging_day;
           return (
             <div className='text-center'>
-              {value ? formatNumber(value) : '-'} hari
+              {value && value > 0 ? `${formatNumber(value)} hari` : '-'}
             </div>
           );
         },
@@ -341,6 +345,7 @@ const CustomerPaymentTab = () => {
         id: 'reference',
         header: 'Referensi',
         accessorKey: 'reference',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.reference;
           return value || '-';
@@ -349,16 +354,18 @@ const CustomerPaymentTab = () => {
       {
         id: 'vehicle_plate',
         header: 'Nomor Polisi',
-        accessorKey: 'vehicle_plate',
+        accessorKey: 'vehicle_numbers',
+        enableSorting: false,
         cell: (props) => {
-          const value = props.row.original.vehicle_plate;
+          const value = props.row.original.vehicle_numbers;
-          return value || '-';
+          return Array.isArray(value) ? value.join(', ') : value || '-';
         },
       },
       {
         id: 'qty',
-        header: 'Ekor/Qty',
+        header: 'Qty',
         accessorKey: 'qty',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.qty;
           return <div className='text-right'>{formatNumber(value)}</div>;
@@ -373,6 +380,7 @@ const CustomerPaymentTab = () => {
         id: 'weight',
         header: 'Berat (Kg)',
         accessorKey: 'weight',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.weight;
           return <div className='text-right'>{formatNumber(value)}</div>;
@@ -387,6 +395,7 @@ const CustomerPaymentTab = () => {
         id: 'average_weight',
         header: 'AVG',
         accessorKey: 'average_weight',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.average_weight;
           return <div className='text-right'>{formatNumber(value)}</div>;
@@ -399,34 +408,20 @@ const CustomerPaymentTab = () => {
         id: 'price',
         header: 'Harga Awal',
         accessorKey: 'price',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.price;
           return <div className='text-right'>{formatCurrency(value)}</div>;
         },
         footer: () => (
-          <div className='text-right font-semibold text-gray-900'>
+          <div className='text-right font-semibold text-gray-900'>-</div>
-            {formatCurrency(summary.total_initial_amount) || '-'}
-          </div>
-        ),
-      },
-      {
-        id: 'credit_note',
-        header: 'CN',
-        accessorKey: 'credit_note',
-        cell: (props) => {
-          const value = props.row.original.credit_note;
-          return <div className='text-right'>{formatCurrency(value)}</div>;
-        },
-        footer: () => (
-          <div className='text-right font-semibold text-gray-900'>
-            {formatCurrency(summary.total_credit_note) || '-'}
-          </div>
         ),
       },
       {
         id: 'final_price',
         header: 'Harga Akhir',
         accessorKey: 'final_price',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.final_price;
           return <div className='text-right'>{formatCurrency(value)}</div>;
@@ -437,24 +432,13 @@ const CustomerPaymentTab = () => {
           </div>
         ),
       },
-      {
-        id: 'ppn',
-        header: 'PPN (%)',
-        accessorKey: 'ppn',
-        cell: (props) => {
-          const value = props.row.original.ppn;
-          return <div className='text-right'>{formatNumber(value)}%</div>;
-        },
-        footer: () => (
-          <div className='text-right font-semibold text-gray-900'>-</div>
-        ),
-      },
       {
         id: 'total',
         header: 'Total',
-        accessorKey: 'total',
+        accessorKey: 'total_price',
+        enableSorting: false,
         cell: (props) => {
-          const value = props.row.original.total;
+          const value = props.row.original.total_price;
           return <div className='text-right'>{formatCurrency(value)}</div>;
         },
         footer: () => (
@@ -466,9 +450,10 @@ const CustomerPaymentTab = () => {
       {
         id: 'payment',
         header: 'Pembayaran',
-        accessorKey: 'payment',
+        accessorKey: 'payment_amount',
+        enableSorting: false,
         cell: (props) => {
-          const value = props.row.original.payment;
+          const value = props.row.original.payment_amount;
           return <div className='text-right'>{formatCurrency(value)}</div>;
         },
         footer: () => (
@@ -481,14 +466,25 @@ const CustomerPaymentTab = () => {
         id: 'accounts_receivable',
         header: 'Saldo Piutang',
         accessorKey: 'accounts_receivable',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.accounts_receivable;
           return (
-            <div className='text-right text-error'>{formatCurrency(value)}</div>
+            <div
+              className={`text-right font-semibold ${
+                value < 0 ? 'text-error' : ''
+              }`}
+            >
+              {formatCurrency(value)}
+            </div>
           );
         },
         footer: () => (
-          <div className='text-right font-semibold text-gray-900'>
+          <div
+            className={`text-right font-semibold ${
+              summary.total_accounts_receivable < 0 ? 'text-error' : ''
+            }`}
+          >
             {formatCurrency(summary.total_accounts_receivable) || '-'}
           </div>
         ),
@@ -496,9 +492,10 @@ const CustomerPaymentTab = () => {
       {
         id: 'notes',
         header: 'Keterangan',
-        accessorKey: 'notes',
+        accessorKey: 'status',
+        enableSorting: false,
         cell: (props) => {
-          const value = props.row.original.notes;
+          const value = props.row.original.status;
 
           if (!value) {
             return '-';
@@ -513,7 +510,7 @@ const CustomerPaymentTab = () => {
                 status: getPaymentStatusIndicatorColor(value),
               }}
             >
-              {getPaymentStatusText(value)}
+              <span>{getPaymentStatusText(value)}</span>
             </Badge>
           );
         },
@@ -522,17 +519,19 @@ const CustomerPaymentTab = () => {
         id: 'pickup_info',
         header: 'Pengambilan',
         accessorKey: 'pickup_info',
+        enableSorting: false,
         cell: (props) => {
           const value = props.row.original.pickup_info;
-          return value || '-';
+          return Array.isArray(value) ? value.join(', ') : value || '-';
         },
       },
       {
         id: 'sales_marketing',
         header: 'Sales/Marketing',
-        accessorKey: 'sales_marketing',
+        accessorKey: 'sales_person',
+        enableSorting: false,
         cell: (props) => {
-          const value = props.row.original.sales_marketing;
+          const value = props.row.original.sales_person;
           return value || '-';
         },
       },
@@ -664,7 +663,8 @@ const CustomerPaymentTab = () => {
                 />
               </div>
 
-              <div>
+              {/* TODO: Uncomment when BE is ready */}
+              {/* <div>
                 <SelectInputCheckbox
                   label='Sales'
                   placeholder='Pilih Sales'
@@ -679,9 +679,10 @@ const CustomerPaymentTab = () => {
                   onMenuScrollToBottom={loadMoreSales}
                   className={{ wrapper: 'w-full' }}
                 />
-              </div>
+              </div> */}
 
-              <div>
+              {/* TODO: Uncomment when BE is ready */}
+              {/* <div>
                 <SelectInput
                   label='Filter Berdasarkan'
                   placeholder='Pilih Filter Berdasarkan'
@@ -690,7 +691,7 @@ const CustomerPaymentTab = () => {
                   isDisabled={true}
                   className={{ wrapper: 'w-full' }}
                 />
-              </div>
+              </div> */}
             </div>
 
             {/* Action Buttons */}
@@ -730,10 +731,7 @@ const CustomerPaymentTab = () => {
             const summary = customerReport.summary || {
               total_qty: 0,
               total_weight: 0,
-              total_initial_amount: 0,
-              total_credit_note: 0,
               total_final_amount: 0,
-              total_ppn: 0,
               total_grand_amount: 0,
               total_payment: 0,
               total_accounts_receivable: 0,
@@ -745,19 +743,27 @@ const CustomerPaymentTab = () => {
               <Card
                 key={customerReport.customer.id}
                 title={customerReport.customer.name}
+                subtitle={`(${customerReport.customer.address})`}
                 className={{
                   wrapper: 'w-full rounded-2xl',
                   body: 'p-0',
                   title:
                     'py-1.5 px-3 bg-[#0069E0] text-white text-lg font-normal',
+                  subtitle:
+                    'px-3 pb-1 bg-[#0069E0] text-white text-sm font-normal',
                 }}
                 variant='bordered'
                 collapsible={true}
               >
                 <Table
-                  data={customerReport.rows}
+                  data={[
+                    {
+                      accounts_receivable: customerReport.initial_balance,
+                    } as CustomerPaymentReport['rows'][0],
+                    ...customerReport.rows,
+                  ]}
                   columns={tableColumns}
-                  pageSize={10}
+                  pageSize={customerReport.rows.length + 1}
                   renderFooter={customerReport.rows.length > 0}
                   className={{
                     containerClassName: 'w-full',
@@ -777,6 +783,36 @@ const CustomerPaymentTab = () => {
                       'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
                     paginationClassName: 'hidden',
                   }}
+                  renderCustomRow={(row) => {
+                    if (row.index === 0) {
+                      return (
+                        <tr
+                          className='hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200'
+                          key={row.index}
+                        >
+                          <td
+                            className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap'
+                            colSpan={13}
+                          ></td>
+                          <td className='px-4 py-3 text-xs whitespace-nowrap'>
+                            <div
+                              className={`text-right ${
+                                row.original.accounts_receivable < 0
+                                  ? 'text-error'
+                                  : ''
+                              }`}
+                            >
+                              {formatCurrency(row.original.accounts_receivable)}
+                            </div>
+                          </td>
+                          <td
+                            className='px-4 py-3 text-xs text-gray-900 whitespace-nowrap'
+                            colSpan={4}
+                          ></td>
+                        </tr>
+                      );
+                    }
+                  }}
                 />
               </Card>
             );

src/components/pages/report/sale/export/HppPerkandangExport.tsx

@@ -226,7 +226,7 @@ const createPDFDocument = (
                 <Text>Rentang BW</Text>
               </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1 }]}>
-                <Text>Sisa Ekor</Text>
+                <Text>Sisa Butir</Text>
               </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1 }]}>
                 <Text>Sisa Kg</Text>
@@ -234,12 +234,6 @@ const createPDFDocument = (
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
                 <Text>Rata-Rata Bobot (Kg)</Text>
               </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1 }]}>
-                <Text>Produksi Telur (Butir)</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1 }]}>
-                <Text>Produksi Telur (Kg)</Text>
-              </View>
               <View style={[pdfStyles.tableCellHeader, { flex: 1.5 }]}>
                 <Text>Feed (Supplier)</Text>
               </View>
@@ -249,12 +243,6 @@ const createPDFDocument = (
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
                 <Text>Rata-Rata Harga DOC</Text>
               </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
-                <Text>Nilai Nominal Telur</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1 }]}>
-                <Text>HPP Ayam</Text>
-              </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
                 <Text>HPP Telur (RP/KG)</Text>
               </View>
@@ -278,23 +266,15 @@ const createPDFDocument = (
                   <View style={[pdfStyles.tableCellCenter, { flex: 1.2 }]}>
                     <Text>{group.label}</Text>
                   </View>
-                  <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
-                    <Text>{formatNumber(group.remaining_chicken_birds)}</Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
-                    <Text>
-                      {formatNumber(group.remaining_chicken_weight_kg)}
-                    </Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                    <Text>{formatNumber(group.avg_weight_kg)}</Text>
-                  </View>
                   <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
                     <Text>{formatNumber(group.egg_production_pieces)}</Text>
                   </View>
                   <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
                     <Text>{formatNumber(group.egg_production_kg)}</Text>
                   </View>
+                  <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
+                    <Text>{formatNumber(group.avg_weight_kg)}</Text>
+                  </View>
                   <View style={[pdfStyles.tableCell, { flex: 1.5 }]}>
                     <Text>
                       {group.feed_suppliers
@@ -318,17 +298,11 @@ const createPDFDocument = (
                   <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
                     <Text>{formatCurrency(group.average_doc_price_rp)}</Text>
                   </View>
-                  <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                    <Text>{formatCurrency(group.egg_value_rp)}</Text>
-                  </View>
-                  <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
-                    <Text>{formatCurrency(group.hpp_rp)}</Text>
-                  </View>
                   <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
                     <Text>{formatCurrency(group.egg_hpp_rp_per_kg)}</Text>
                   </View>
                   <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                    <Text>{formatCurrency(group.remaining_value_rp)}</Text>
+                    <Text>{formatCurrency(group.egg_value_rp)}</Text>
                   </View>
                 </View>
               )
@@ -356,16 +330,10 @@ const createPDFDocument = (
                 <Text>Rata-Rata Bobot (Kg)</Text>
               </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 0.8 }]}>
-                <Text>Sisa Ekor</Text>
+                <Text>Sisa Butir</Text>
               </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 0.8 }]}>
-                <Text>Sisa Kg (Ayam)</Text>
+                <Text>Sisa Kg (Telur)</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 0.8 }]}>
-                <Text>Produksi Telur (Butir)</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 0.8 }]}>
-                <Text>Produksi Telur (Kg)</Text>
               </View>
               <View style={[pdfStyles.tableCellHeader, { flex: 1.2 }]}>
                 <Text>Feed (Supplier)</Text>
@@ -376,12 +344,6 @@ const createPDFDocument = (
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
                 <Text>Rata-Rata Harga DOC</Text>
               </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 1.2 }]}>
-                <Text>Nilai Nominal Telur</Text>
-              </View>
-              <View style={[pdfStyles.tableCellHeaderRight, { flex: 0.8 }]}>
-                <Text>HPP Ayam</Text>
-              </View>
               <View style={[pdfStyles.tableCellHeaderRight, { flex: 1 }]}>
                 <Text>HPP Telur (RP/KG)</Text>
               </View>
@@ -416,12 +378,6 @@ const createPDFDocument = (
                 <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
                   <Text>{formatNumber(item.avg_weight_kg)}</Text>
                 </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
-                  <Text>{formatNumber(item.remaining_chicken_birds)}</Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
-                  <Text>{formatNumber(item.remaining_chicken_weight_kg)}</Text>
-                </View>
                 <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
                   <Text>{formatNumber(item.egg_production_pieces)}</Text>
                 </View>
@@ -451,17 +407,11 @@ const createPDFDocument = (
                 <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
                   <Text>{formatCurrency(item.average_doc_price_rp)}</Text>
                 </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                  <Text>{formatCurrency(item.egg_value_rp)}</Text>
-                </View>
-                <View style={[pdfStyles.tableCellRight, { flex: 0.8 }]}>
-                  <Text>{formatCurrency(item.hpp_rp)}</Text>
-                </View>
                 <View style={[pdfStyles.tableCellRight, { flex: 1 }]}>
                   <Text>{formatCurrency(item.egg_hpp_rp_per_kg)}</Text>
                 </View>
                 <View style={[pdfStyles.tableCellRight, { flex: 1.2 }]}>
-                  <Text>{formatCurrency(item.remaining_value_rp)}</Text>
+                  <Text>{formatCurrency(item.egg_value_rp)}</Text>
                 </View>
               </View>
             ))}

src/components/pages/report/sale/tab/HppPerKandangTab.tsx

@@ -335,10 +335,8 @@ const HppPerKandangTab = () => {
             ? `${formatNumber(item.weight_range.weight_min)} - ${formatNumber(item.weight_range.weight_max)}`
             : '',
           'Rata-Rata Bobot (KG)': item.avg_weight_kg || 0,
-          'Sisa Ayam (Ekor)': item.remaining_chicken_birds || 0,
+          'Sisa Telur (Butir)': item.egg_production_pieces || 0,
-          'Sisa Ayam (KG)': item.remaining_chicken_weight_kg || 0,
+          'Sisa Telur (KG)': item.egg_production_kg || 0,
-          'Produksi Telur (Butir)': item.egg_production_pieces || 0,
-          'Produksi Telur (KG)': item.egg_production_kg || 0,
           'Feed (Supplier)':
             item.feed_suppliers
               ?.map((s: { alias?: string; name: string }) => s.alias || s.name)
@@ -348,10 +346,8 @@ const HppPerKandangTab = () => {
               ?.map((s: { alias?: string; name: string }) => s.alias || s.name)
               .join(' | ') || '',
           'Rata-Rata Harga DOC (RP)': item.average_doc_price_rp || 0,
-          'Nilai Nominal Telur (RP)': item.egg_value_rp || 0,
-          'HPP Ayam (RP)': item.hpp_rp || 0,
           'HPP Telur (RP/KG)': item.egg_hpp_rp_per_kg || 0,
-          'Nilai Nominal Sisa Ayam (RP)': item.remaining_value_rp || 0,
+          'Nilai Nominal Sisa Telur (RP)': item.egg_value_rp || 0,
         })
       );
 
@@ -360,20 +356,14 @@ const HppPerKandangTab = () => {
         Kandang: 'ALL',
         'Rentang Bobot': '-',
         'Rata-Rata Bobot (KG)': summaryTotal?.average_weight_kg || 0,
-        'Sisa Ayam (Ekor)': summaryTotal?.total_remaining_chicken_birds || 0,
+        'Sisa Telur (Butir)': summaryTotal?.total_egg_production_pieces || 0,
-        'Sisa Ayam (KG)': summaryTotal?.total_remaining_chicken_weight_kg || 0,
+        'Sisa Telur (KG)': summaryTotal?.total_egg_production_kg || 0,
-        'Produksi Telur (Butir)':
-          summaryTotal?.total_egg_production_pieces || 0,
-        'Produksi Telur (KG)': summaryTotal?.total_egg_production_kg || 0,
         'Feed (Supplier)': allFeedSuppliers,
         'DOC (Supplier)': allDocSuppliers,
         'Rata-Rata Harga DOC (RP)':
           summaryTotal?.total_average_doc_price_rp || 0,
-        'Nilai Nominal Telur (RP)': summaryTotal?.total_egg_value_rp || 0,
-        'HPP Ayam (RP)': summaryTotal?.total_hpp_rp || 0,
         'HPP Telur (RP/KG)': summaryTotal?.average_egg_hpp_rp_per_kg || 0,
-        'Nilai Nominal Sisa Ayam (RP)':
+        'Nilai Nominal Sisa Telur (RP)': summaryTotal?.total_egg_value_rp || 0,
-          summaryTotal?.total_remaining_value_rp || 0,
       });
 
       const worksheet = XLSX.utils.json_to_sheet(excelData);
@@ -383,17 +373,13 @@ const HppPerKandangTab = () => {
         { wch: 30 }, // Kandang
         { wch: 15 }, // Rentang Bobot
         { wch: 18 }, // Rata-Rata Bobot (KG)
-        { wch: 15 }, // Sisa Ayam (Ekor)
+        { wch: 15 }, // Sisa Telur (Butir)
-        { wch: 15 }, // Sisa Ayam (KG)
+        { wch: 15 }, // Sisa Telur (KG)
-        { wch: 18 }, // Produksi Telur (Butir)
-        { wch: 18 }, // Produksi Telur (KG)
         { wch: 20 }, // Feed (Supplier)
         { wch: 20 }, // DOC (Supplier)
         { wch: 20 }, // Rata-Rata Harga DOC (RP)
-        { wch: 20 }, // Nilai Nominal Telur (RP)
-        { wch: 15 }, // HPP Ayam (RP)
         { wch: 18 }, // HPP Telur (RP/KG)
-        { wch: 25 }, // Nilai Nominal Sisa Ayam (RP)
+        { wch: 25 }, // Nilai Nominal Sisa Telur (RP)
       ];
       worksheet['!cols'] = colWidths;
 
@@ -533,37 +519,9 @@ const HppPerKandangTab = () => {
           </div>
         ),
       },
-      {
-        id: 'remaining_chicken_birds',
-        header: 'Sisa Ayam (Ekor)',
-        accessorKey: 'remaining_chicken_birds',
-        cell: (props) => {
-          const value = props.row.original.remaining_chicken_birds;
-          return <div className='text-right'>{formatNumber(value)}</div>;
-        },
-        footer: () => (
-          <div className='text-right font-semibold text-gray-900'>
-            {formatNumber(summaryTotal?.total_remaining_chicken_birds || 0)}
-          </div>
-        ),
-      },
-      {
-        id: 'remaining_chicken_weight_kg',
-        header: 'Sisa Ayam (KG)',
-        accessorKey: 'remaining_chicken_weight_kg',
-        cell: (props) => {
-          const value = props.row.original.remaining_chicken_weight_kg;
-          return <div className='text-right'>{formatNumber(value)}</div>;
-        },
-        footer: () => (
-          <div className='text-right font-semibold text-gray-900'>
-            {formatNumber(summaryTotal?.total_remaining_chicken_weight_kg || 0)}
-          </div>
-        ),
-      },
       {
         id: 'egg_production_pieces',
-        header: 'Produksi Telur (Butir)',
+        header: 'Sisa Telur (Butir)',
         accessorKey: 'egg_production_pieces',
         cell: (props) => {
           const value = props.row.original.egg_production_pieces;
@@ -577,7 +535,7 @@ const HppPerKandangTab = () => {
       },
       {
         id: 'egg_production_kg',
-        header: 'Produksi Telur (KG)',
+        header: 'Sisa Telur (KG)',
         accessorKey: 'egg_production_kg',
         cell: (props) => {
           const value = props.row.original.egg_production_kg;
@@ -585,7 +543,7 @@ const HppPerKandangTab = () => {
         },
         footer: () => (
           <div className='text-right font-semibold text-gray-900'>
-            {formatNumber(summaryTotal?.total_remaining_chicken_weight_kg || 0)}
+            {formatNumber(summaryTotal?.total_egg_production_kg || 0)}
           </div>
         ),
       },
@@ -639,34 +597,6 @@ const HppPerKandangTab = () => {
           </div>
         ),
       },
-      {
-        id: 'egg_value_rp',
-        header: 'Nilai Nominal Telur (RP)',
-        accessorKey: 'egg_value_rp',
-        cell: (props) => {
-          const value = props.row.original.egg_value_rp;
-          return <div className='text-right'>{formatCurrency(value)}</div>;
-        },
-        footer: () => (
-          <div className='text-right font-semibold text-gray-900'>
-            {formatCurrency(summaryTotal?.total_egg_value_rp || 0)}
-          </div>
-        ),
-      },
-      {
-        id: 'hpp_rp',
-        header: 'HPP Ayam (RP)',
-        accessorKey: 'hpp_rp',
-        cell: (props) => {
-          const value = props.row.original.hpp_rp;
-          return <div className='text-right'>{formatCurrency(value)}</div>;
-        },
-        footer: () => (
-          <div className='text-right font-semibold text-gray-900'>
-            {formatCurrency(summaryTotal?.total_hpp_rp || 0)}
-          </div>
-        ),
-      },
       {
         id: 'egg_hpp_rp_per_kg',
         header: 'HPP Telur (RP/KG)',
@@ -682,16 +612,16 @@ const HppPerKandangTab = () => {
         ),
       },
       {
-        id: 'remaining_value_rp',
+        id: 'egg_value_rp',
-        header: 'Nilai Nominal Sisa Ayam (RP)',
+        header: 'Nilai Nominal Sisa Telur (RP)',
-        accessorKey: 'remaining_value_rp',
+        accessorKey: 'egg_value_rp',
         cell: (props) => {
-          const value = props.row.original.remaining_value_rp;
+          const value = props.row.original.egg_value_rp;
           return <div className='text-right'>{formatCurrency(value)}</div>;
         },
         footer: () => (
           <div className='text-right font-semibold text-gray-900'>
-            {formatCurrency(summaryTotal?.total_remaining_value_rp || 0)}
+            {formatCurrency(summaryTotal?.total_egg_value_rp || 0)}
           </div>
         ),
       },
@@ -725,7 +655,7 @@ const HppPerKandangTab = () => {
             key={'rekapitulasi-row'}
           >
             <td
-              colSpan={15}
+              colSpan={11}
               className='px-4 py-3 text-gray-900 text-center font-semibold'
             >
               Rekapitulasi per rentang bobot
@@ -747,12 +677,6 @@ const HppPerKandangTab = () => {
                   <td className='text-right'>
                     {formatNumber(item.avg_weight_kg)}
                   </td>
-                  <td className='text-right'>
-                    {formatNumber(item.remaining_chicken_birds)}
-                  </td>
-                  <td className='text-right'>
-                    {formatNumber(item.remaining_chicken_weight_kg)}
-                  </td>
                   <td className='text-right'>
                     {formatNumber(item.egg_production_pieces)}
                   </td>
@@ -772,15 +696,11 @@ const HppPerKandangTab = () => {
                   <td className='text-right'>
                     {formatCurrency(item.average_doc_price_rp)}
                   </td>
-                  <td className='text-right'>
-                    {formatCurrency(item.egg_value_rp)}
-                  </td>
-                  <td className='text-right'>{formatCurrency(item.hpp_rp)}</td>
                   <td className='text-right'>
                     {formatCurrency(item.egg_hpp_rp_per_kg)}
                   </td>
                   <td className='text-right'>
-                    {formatCurrency(item.remaining_value_rp)}
+                    {formatCurrency(item.egg_value_rp)}
                   </td>
                 </tr>
               );

src/config/route-permission.ts

@@ -121,6 +121,7 @@ export const ROUTE_PERMISSIONS: Record<string, string[]> = {
   '/report/finance/': [
     'lti.repport.finance.list',
     'lti.repport.debtsupplier.list',
+    'lti.repport.customerpayment.list',
   ],
 
   // Inventory

src/services/api/report/finance-report.ts

@@ -1,7 +1,6 @@
 import { BaseApiService } from '@/services/api/base';
 import { BaseApiResponse } from '@/types/api/api-general';
 import { CustomerPaymentReport } from '@/types/api/report/customer-payment';
-import { DebtSupplier } from '@/types/api/report/debt-supplier';
 
 export class FinanceApiService extends BaseApiService<
   CustomerPaymentReport,
@@ -14,8 +13,11 @@ export class FinanceApiService extends BaseApiService<
 
   async getCustomerPaymentReport(
     customer_id?: string,
+    // TODO: Uncomment when BE is ready
+    // sales_id?: string,
+    // filter_by?: 'do_date',
     sales_id?: string,
-    filter_by?: 'do_date',
+    filter_by?: 'do_date' | undefined,
     start_date?: string,
     end_date?: string,
     page?: number,
@@ -27,8 +29,9 @@ export class FinanceApiService extends BaseApiService<
         method: 'GET',
         params: {
           customer_id: customer_id,
-          sales_id: sales_id,
+          // TODO: Uncomment when BE is ready
-          filter_by: filter_by,
+          // sales_id: sales_id,
+          // filter_by: filter_by,
           start_date: start_date,
           end_date: end_date,
           page: page,
@@ -39,8 +42,8 @@ export class FinanceApiService extends BaseApiService<
   }
 }
 
-// export const FinanceApi = new FinanceApiService('reports');
+export const FinanceApi = new FinanceApiService('reports');
 
-export const FinanceApi = new FinanceApiService(
+// export const FinanceApi = new FinanceApiService(
-  'http://localhost:4010/api/reports/finance'
+//   'http://localhost:4010/api/reports/finance'
-);
+// );

src/types/api/production/project-flock.d.ts

@@ -6,6 +6,7 @@ import { Location } from '@/types/api/master-data/location';
 import { BaseApproval, BaseMetadata } from '@/types/api/api-general';
 import { Nonstock } from '@/types/api/master-data/nonstock';
 import { ProductionStandard } from '@/types/api/master-data/production-standard';
+import { Warehouse } from '@/types/api/master-data/warehouse';
 
 export type BaseProjectFlock = {
   id: number;
@@ -71,6 +72,7 @@ export type ProjectFlockKandangLookup = {
   kandang_id: number;
   kandang: Kandang;
   project_flock: ProjectFlock;
+  warehouse: Warehouse;
   quantity: number;
   available_quantity?: number;
   population: number;

src/types/api/purchase/purchase.d.ts

@@ -120,12 +120,12 @@ export type CreateAcceptApprovalRequestPayload = {
     purchase_item_id: number;
     received_date: string;
     travel_number: string;
-    vehicle_number: string;
+    vehicle_number?: string | null;
-    expedition_vendor_id: number;
+    expedition_vendor_id?: number | null;
     received_qty: number;
-    transport_per_item: number;
+    transport_per_item?: number | null;
   }[];
-  travel_documents?: File[];
+  travel_documents?: File[] | null;
 };
 
 export type DeletePurchaseRequestItemPayload = {

src/types/api/report/customer-payment.d.ts

@@ -2,34 +2,30 @@ import { BaseCustomer } from '@/types/api/master-data/customer';
 import { BaseMetadata } from '@/types/api/api-general';
 
 export type CustomerPaymentRow = {
-  id: number;
+  transaction_type: string;
-  do_date: string;
+  transaction_id: number;
-  realization_date: string;
+  trans_date: string;
-  aging_day: number | null;
+  delivery_date: string | null;
   reference: string;
-  vehicle_plate: string[];
+  vehicle_numbers: string[];
   qty: number;
   weight: number;
   average_weight: number;
   price: number;
-  credit_note: number;
   final_price: number;
-  ppn: number;
+  total_price: number;
-  total: number;
+  payment_amount: number;
-  payment: number;
   accounts_receivable: number;
-  notes: string;
+  aging_day: number | null;
-  pickup_info: string;
+  status: string;
-  sales_marketing: string;
+  pickup_info: string[];
+  sales_person: string;
 };
 
 export type CustomerPaymentSummary = {
   total_qty: number;
   total_weight: number;
-  total_initial_amount: number;
-  total_credit_note: number;
   total_final_amount: number;
-  total_ppn: number;
   total_grand_amount: number;
   total_payment: number;
   total_accounts_receivable: number;
@@ -37,6 +33,7 @@ export type CustomerPaymentSummary = {
 
 export type CustomerPaymentReport = BaseMetadata & {
   customer: BaseCustomer;
+  initial_balance: number;
   rows: CustomerPaymentRow[];
   summary: CustomerPaymentSummary;
 };

src/types/api/report/hpp-per-kandang.d.ts

@@ -9,30 +9,22 @@ export type HppPerKandangRow = {
     weight_min: number;
     weight_max: number;
   };
-  remaining_chicken_birds: number;
-  remaining_chicken_weight_kg: number;
   avg_weight_kg: number;
   egg_production_pieces: number;
   egg_production_kg: number;
   egg_hpp_rp_per_kg: number;
   egg_value_rp: number;
-  feed_suppliers: Supplier[];
+  feed_suppliers: Supplier[] | null;
-  doc_suppliers: Supplier[];
+  doc_suppliers: Supplier[] | null;
   average_doc_price_rp: number;
-  hpp_rp: number;
-  remaining_value_rp: number;
 };
 
 export type HppPerKandangSummaryTotal = {
-  total_remaining_chicken_birds: number;
-  total_remaining_chicken_weight_kg: number;
   average_weight_kg: number;
-  total_remaining_value_rp: number;
   total_egg_production_pieces: number;
   total_egg_production_kg: number;
   average_egg_hpp_rp_per_kg: number;
   total_egg_value_rp: number;
-  total_hpp_rp: number;
   total_average_doc_price_rp: number;
 };
 
@@ -43,8 +35,6 @@ export type HppPerKandangPerWeightRange = {
     weight_max: number;
   };
   label: string;
-  remaining_chicken_birds: number;
-  remaining_chicken_weight_kg: number;
   avg_weight_kg: number;
   egg_production_pieces: number;
   egg_production_kg: number;
@@ -53,8 +43,6 @@ export type HppPerKandangPerWeightRange = {
   feed_suppliers: Supplier[];
   doc_suppliers: Supplier[];
   average_doc_price_rp: number;
-  hpp_rp: number;
-  remaining_value_rp: number;
 };
 
 export type HppPerKandangSummary = {