Merge branch 'feat/depreciation-report-v2' into 'development'

[FEAT/FE] Depreciation Report V2

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

src/components/pages/marketing/DeliveryOrderFormModal.tsx

@@ -847,7 +847,8 @@ const DeliveryOrderFormModal = ({}: { initialValues?: Marketing }) => {
                           }
                         }}
                         className='p-3  shadow-button-soft text-base-100 rounded-lg text-sm font-semibold'
-                        disabled={deliveryRejected}
+                        disabled={deliveryRejected || isLoading}
+                        isLoading={isLoading}
                       >
                         {marketing?.data?.latest_approval?.step_number === 1 &&
                           'Approve'}

src/components/pages/marketing/MarketingFilter.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { RefObject, useCallback, useMemo } from 'react';
+import { RefObject, useCallback, useMemo, useState } from 'react';
 import { useFormik } from 'formik';
 import { Icon } from '@iconify/react';
 import Modal from '@/components/Modal';
@@ -9,6 +9,8 @@ import SelectInput, {
   OptionType,
   useSelect,
 } from '@/components/input/SelectInput';
+import DateInput from '@/components/input/DateInput';
+import SelectInputRadio from '@/components/input/SelectInputRadio';
 import { MARKETING_APPROVAL_LINE } from '@/config/approval-line';
 import {
   MarketingFilterFormValues,
@@ -17,12 +19,17 @@ import {
 import { MarketingFilter } from '@/types/api/marketing/marketing';
 import SelectInputCheckbox from '@/components/input/SelectInputCheckbox';
 import { MarketingApi } from '@/services/api/marketing/marketing';
-import { CustomerApi, ProductApi } from '@/services/api/master-data';
+import {
+  CustomerApi,
+  ProductApi,
+  WarehouseApi,
+} from '@/services/api/master-data';
 import { isResponseSuccess } from '@/lib/api-helper';
 import { BaseMarketing, BaseSalesOrder } from '@/types/api/marketing/marketing';
 import { ProjectFlockApi } from '@/services/api/production';
 import { ProjectFlock } from '@/types/api/production/project-flock';
 import { Product } from '@/types/api/master-data/product';
+import { Warehouse } from '@/types/api/master-data/warehouse';
 
 interface MarketingFilterModal {
   ref: RefObject<HTMLDialogElement | null>;
@@ -34,6 +41,10 @@ interface MarketingFilterModal {
     customer: OptionType<number> | null;
     project_flock: OptionType<number> | null;
     project_flock_kandang: OptionType<number> | null;
+    warehouse: OptionType<number> | null;
+    start_date: string;
+    end_date: string;
+    filter_by: OptionType<string> | null;
   };
 }
 
@@ -79,6 +90,13 @@ const MarketingFilterModal = ({
     'search'
   );
 
+  const {
+    options: warehouseOptions,
+    isLoadingOptions: isLoadingWarehouseOptions,
+    setInputValue: setWarehouseInputValue,
+    loadMore: loadMoreWarehouses,
+  } = useSelect<Warehouse>(WarehouseApi.basePath, 'id', 'name', 'search');
+
   const statusOptions = [
     ...MARKETING_APPROVAL_LINE.map((item) => ({
       value: item.step_name.split(' ').join('_').toUpperCase(),
@@ -87,6 +105,13 @@ const MarketingFilterModal = ({
     { value: 'DITOLAK', label: 'Ditolak' },
   ];
 
+  const filterByOptions = [
+    { value: 'so_date', label: 'Tanggal SO' },
+    { value: 'created_at', label: 'Tanggal Dibuat' },
+  ];
+
+  const [hasDateError, setHasDateError] = useState(false);
+
   const formik = useFormik<MarketingFilterFormValues>({
     initialValues: initialValues || {
       product_ids: [],
@@ -94,6 +119,10 @@ const MarketingFilterModal = ({
       customer: null,
       project_flock: null,
       project_flock_kandang: null,
+      warehouse: null,
+      start_date: '',
+      end_date: '',
+      filter_by: null,
     },
     validationSchema: MarketingFilterSchema,
 
@@ -111,6 +140,12 @@ const MarketingFilterModal = ({
           Number(values.project_flock_kandang?.value) || undefined,
         project_flock_kandang_name:
           values.project_flock_kandang?.label || undefined,
+        warehouse_id: Number(values.warehouse?.value) || undefined,
+        warehouse_name: values.warehouse?.label || undefined,
+        start_date: values.start_date || undefined,
+        end_date: values.end_date || undefined,
+        filter_by: values.filter_by?.value || undefined,
+        filter_by_name: values.filter_by?.label || undefined,
       };
 
       onSubmit?.(formattedValues);
@@ -133,12 +168,37 @@ const MarketingFilterModal = ({
         customer: null,
         project_flock: null,
         project_flock_kandang: null,
+        warehouse: null,
+        start_date: '',
+        end_date: '',
+        filter_by: null,
       },
     });
+    setHasDateError(false);
     onReset?.();
     closeModalHandler();
   }, [resetForm, onReset, closeModalHandler]);
 
+  const handleStartDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    formik.setFieldValue('start_date', value);
+    if (value && formik.values.end_date) {
+      setHasDateError(new Date(formik.values.end_date) < new Date(value));
+    } else {
+      setHasDateError(false);
+    }
+  };
+
+  const handleEndDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    formik.setFieldValue('end_date', value);
+    if (value && formik.values.start_date) {
+      setHasDateError(new Date(value) < new Date(formik.values.start_date));
+    } else {
+      setHasDateError(false);
+    }
+  };
+
   const productChangeHandler = (val: OptionType | OptionType[] | null) => {
     formik.setFieldValue('product_ids', val as OptionType[]);
   };
@@ -207,6 +267,44 @@ const MarketingFilterModal = ({
 
         {/* Modal Body */}
         <div className='p-4 flex flex-col gap-1.5'>
+          <div>
+            <label className='block text-xs font-semibold text-base-content py-2'>
+              Tanggal
+            </label>
+            <div className='flex flex-row gap-1.5 items-center justify-between'>
+              <DateInput
+                name='start_date'
+                value={formik.values.start_date || ''}
+                onChange={handleStartDateChange}
+                className={{ wrapper: 'w-full' }}
+                isNestedModal
+              />
+              <hr className='w-full max-w-3 h-px border-base-content/10' />
+              <DateInput
+                name='end_date'
+                value={formik.values.end_date || ''}
+                onChange={handleEndDateChange}
+                className={{ wrapper: 'w-full' }}
+                isNestedModal
+                isError={hasDateError}
+              />
+            </div>
+          </div>
+
+          <SelectInputRadio
+            label='Filter Berdasarkan'
+            placeholder='Pilih Filter Berdasarkan'
+            options={filterByOptions}
+            value={formik.values.filter_by ?? null}
+            onChange={(val) =>
+              formik.setFieldValue(
+                'filter_by',
+                !Array.isArray(val) ? (val ?? null) : null
+              )
+            }
+            isClearable
+          />
+
           {/* select multiple product */}
           <SelectInputCheckbox
             label='Product'
@@ -272,6 +370,22 @@ const MarketingFilterModal = ({
             }
             isDisabled={!formik.values.project_flock}
           />
+          <SelectInput
+            label='Gudang'
+            isClearable
+            placeholder='Pilih Gudang'
+            options={warehouseOptions}
+            isLoading={isLoadingWarehouseOptions}
+            value={formik.values.warehouse}
+            onChange={(val) =>
+              formik.setFieldValue(
+                'warehouse',
+                !Array.isArray(val) ? (val as OptionType<number> | null) : null
+              )
+            }
+            onInputChange={setWarehouseInputValue}
+            onMenuScrollToBottom={loadMoreWarehouses}
+          />
         </div>
 
         {/* Modal Footer */}
@@ -288,6 +402,7 @@ const MarketingFilterModal = ({
           <Button
             type='submit'
             className='p-3 rounded-lg w-fit sm:w-full max-w-40 text-base-100 text-sm'
+            disabled={hasDateError}
           >
             Apply Filter
           </Button>

src/components/pages/marketing/MarketingTable.tsx

@@ -203,6 +203,12 @@ const MarketingTable = () => {
       project_flock_name: '',
       project_flock_kandang_id: '',
       project_flock_kandang_name: '',
+      warehouse_id: '',
+      warehouse_name: '',
+      start_date: '',
+      end_date: '',
+      filter_by: '',
+      filter_by_name: '',
       sort_by: '',
       order_by: '',
     },
@@ -214,6 +220,10 @@ const MarketingTable = () => {
       customer_id: 'customer_id',
       project_flock_id: 'project_flock_id',
       project_flock_kandang_id: 'project_flock_kandang_id',
+      warehouse_id: 'warehouse_id',
+      start_date: 'start_date',
+      end_date: 'end_date',
+      filter_by: 'filter_by',
       sort_by: 'sort_by',
       order_by: 'sort_order',
     },
@@ -223,6 +233,8 @@ const MarketingTable = () => {
       'customer_name',
       'project_flock_name',
       'project_flock_kandang_name',
+      'warehouse_name',
+      'filter_by_name',
     ],
 
     persist: true,
@@ -293,6 +305,16 @@ const MarketingTable = () => {
       values.project_flock_kandang_name ?? '',
       true
     );
+    updateFilter(
+      'warehouse_id',
+      values.warehouse_id ? values.warehouse_id.toString() : '',
+      true
+    );
+    updateFilter('warehouse_name', values.warehouse_name ?? '', true);
+    updateFilter('start_date', values.start_date ?? '', true);
+    updateFilter('end_date', values.end_date ?? '', true);
+    updateFilter('filter_by', values.filter_by ?? '', true);
+    updateFilter('filter_by_name', values.filter_by_name ?? '', true);
   };
 
   const [isLoadingExportingToExcel, setIsLoadingExportingToExcel] =
@@ -311,6 +333,12 @@ const MarketingTable = () => {
     updateFilter('project_flock_name', '', true);
     updateFilter('project_flock_kandang_id', '', true);
     updateFilter('project_flock_kandang_name', '', true);
+    updateFilter('warehouse_id', '', true);
+    updateFilter('warehouse_name', '', true);
+    updateFilter('start_date', '', true);
+    updateFilter('end_date', '', true);
+    updateFilter('filter_by', '', true);
+    updateFilter('filter_by_name', '', true);
   };
 
   const approveClickHandler = () => {
@@ -433,6 +461,20 @@ const MarketingTable = () => {
           label: tableFilterState.project_flock_kandang_name,
         }
       : null,
+    warehouse: tableFilterState.warehouse_id
+      ? {
+          value: Number(tableFilterState.warehouse_id),
+          label: tableFilterState.warehouse_name,
+        }
+      : null,
+    start_date: tableFilterState.start_date,
+    end_date: tableFilterState.end_date,
+    filter_by: tableFilterState.filter_by
+      ? {
+          value: tableFilterState.filter_by,
+          label: tableFilterState.filter_by_name,
+        }
+      : null,
   };
 
   const approveMarketingHandler = async (notes: string) => {
@@ -707,7 +749,7 @@ const MarketingTable = () => {
       },
       {
         accessorKey: 'so_date',
-        header: 'Tanggal',
+        header: 'Tanggal SO',
         cell: (props) => {
           return formatDate(props.row.original.so_date, 'DD MMM yyyy');
         },
@@ -753,18 +795,17 @@ const MarketingTable = () => {
         cell: (props) => props.row.original.customer.name,
       },
       {
-        accessorKey: 'grand_total',
-        accessorFn: (row) =>
-          row.sales_order
-            ?.map((product) => product.total_price)
-            .reduce((a, b) => a + b, 0) ?? 0,
-        header: 'Grand Total',
+        accessorKey: 'grand_total_so',
+        header: 'Grand Total SO',
         cell: (props) => {
-          return formatCurrency(
-            props.row.original?.sales_order
-              ?.map((product) => product.total_price)
-              .reduce((a, b) => a + b, 0) ?? 0
-          );
+          return formatCurrency(props.row.original?.grand_total_so);
+        },
+      },
+      {
+        accessorKey: 'grand_total_do',
+        header: 'Grand Total DO',
+        cell: (props) => {
+          return formatCurrency(props.row.original?.grand_total_do);
         },
       },
       {
@@ -911,6 +952,8 @@ const MarketingTable = () => {
                 'customer_name',
                 'project_flock_name',
                 'project_flock_kandang_name',
+                'warehouse_name',
+                'filter_by_name',
                 'sort_by',
                 'order_by',
               ]}

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

@@ -1,4 +1,4 @@
-import { array, mixed, object } from 'yup';
+import { array, mixed, object, string } from 'yup';
 import { OptionType } from '@/components/input/SelectInput';
 
 export const MarketingFilterSchema = object({
@@ -7,6 +7,10 @@ export const MarketingFilterSchema = object({
   customer: mixed<OptionType<number>>().nullable(),
   project_flock: mixed<OptionType<number>>().nullable(),
   project_flock_kandang: mixed<OptionType<number>>().nullable(),
+  warehouse: mixed<OptionType<number>>().nullable(),
+  start_date: string().optional(),
+  end_date: string().optional(),
+  filter_by: mixed<OptionType<string>>().nullable(),
 });
 
 export type MarketingFilterFormValues = {
@@ -15,4 +19,8 @@ export type MarketingFilterFormValues = {
   customer: OptionType<number> | null;
   project_flock: OptionType<number> | null;
   project_flock_kandang: OptionType<number> | null;
+  warehouse: OptionType<number> | null;
+  start_date: string;
+  end_date: string;
+  filter_by: OptionType<string> | null;
 };

src/components/pages/production/chickin/form/tabs/ChickLogsView.tsx

@@ -2,16 +2,17 @@ import Alert from '@/components/Alert';
 import Button from '@/components/Button';
 import Card from '@/components/Card';
 import RequirePermission from '@/components/helper/RequirePermission';
+import DateInput from '@/components/input/DateInput';
 import PillBadge from '@/components/PillBadge';
 import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
 import { formatDate, formatNumber } from '@/lib/helper';
 import { ChickinApi } from '@/services/api/production/chickin';
+import { useChickinStore } from '@/stores/production/chickin/chickin.store';
 import { BaseApproval } from '@/types/api/api-general';
 import { ProjectFlockKandang } from '@/types/api/production/project-flock-kandang';
 import { Icon } from '@iconify/react';
 import { useState } from 'react';
 import toast from 'react-hot-toast';
-import { useChickinStore } from '@/stores/production/chickin/chickin.store';
 
 const ChickinLogsView = ({
   initialValues,
@@ -23,6 +24,9 @@ const ChickinLogsView = ({
   rawDataApprovals: BaseApproval[];
 }) => {
   const [chickinErrorMessage, setChickinErrorMessage] = useState('');
+  const [editingChickinId, setEditingChickinId] = useState<number | null>(null);
+  const [editDate, setEditDate] = useState('');
+  const [isEditLoading, setIsEditLoading] = useState(false);
   const { openChickinApproveModal, openChickinDeleteModal } = useChickinStore();
 
   const handleClickApprove = () => {
@@ -44,6 +48,23 @@ const ChickinLogsView = ({
     });
   };
 
+  const handleSaveChickinDate = async () => {
+    setIsEditLoading(true);
+    const res = await ChickinApi.updateChickinDate(
+      initialValues.id as number,
+      formatDate(editDate, 'YYYY-MM-DD')
+    );
+    setIsEditLoading(false);
+    if (isResponseSuccess(res)) {
+      toast.success(res?.message as string);
+      setEditingChickinId(null);
+      afterSubmit && afterSubmit();
+    }
+    if (isResponseError(res)) {
+      toast.error(res?.message as string);
+    }
+  };
+
   const handleDeleteChickin = (chickinId: number) => {
     openChickinDeleteModal(chickinId, async () => {
       const deleteRes = await ChickinApi.delete(chickinId);
@@ -133,9 +154,54 @@ const ChickinLogsView = ({
                       <Icon icon={'mdi:calendar'} width={14} height={14} />{' '}
                       <span>Tanggal Chick In</span>
                     </div>
-                    <div className='text-end text-gray-500'>
-                      {formatDate(chickin.chick_in_date, 'DD MMM YYYY')}
-                    </div>
+                    {editingChickinId === chickin.id ? (
+                      <div className='flex flex-col gap-2 items-end w-1/2'>
+                        <DateInput
+                          name='edit_chick_in_date'
+                          value={editDate}
+                          isNestedModal
+                          onChange={(e) => setEditDate(e.target.value)}
+                        />
+                        <div className='flex flex-row gap-1'>
+                          <Button
+                            color='none'
+                            className='btn-xs btn-ghost text-gray-500'
+                            onClick={() => setEditingChickinId(null)}
+                            disabled={isEditLoading}
+                          >
+                            Batal
+                          </Button>
+                          <Button
+                            color='success'
+                            className='btn-xs text-base-100'
+                            onClick={handleSaveChickinDate}
+                            isLoading={isEditLoading}
+                            disabled={!editDate || isEditLoading}
+                          >
+                            Simpan
+                          </Button>
+                        </div>
+                      </div>
+                    ) : (
+                      <div className='flex flex-row gap-2 items-center'>
+                        <span className='text-gray-500'>
+                          {formatDate(chickin.chick_in_date, 'DD MMM YYYY')}
+                        </span>
+                        <button
+                          className='btn btn-ghost btn-xs p-0 text-gray-400 hover:text-primary'
+                          onClick={() => {
+                            setEditingChickinId(chickin.id);
+                            setEditDate(chickin.chick_in_date);
+                          }}
+                        >
+                          <Icon
+                            icon='mdi:pencil-outline'
+                            width={13}
+                            height={13}
+                          />
+                        </button>
+                      </div>
+                    )}
                   </div>
 
                   {/* Kandang */}

src/components/pages/production/recording/form/RecordingForm.tsx

@@ -463,13 +463,16 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
   }, [selectedKandang]);
 
   // ===== TRANSITION RESTRICTION LOGIC =====
-  const isTransitionPeriod = useMemo(() => {
-    return (
-      initialValues?.is_transition ??
-      projectFlockKandangLookup?.is_transition ??
-      false
-    );
-  }, [initialValues, projectFlockKandangLookup]);
+  // const isTransitionPeriod = useMemo(() => {
+  //   return (
+  //     initialValues?.is_transition ??
+  //     projectFlockKandangLookup?.is_transition ??
+  //     false
+  //   );
+  // }, [initialValues, projectFlockKandangLookup]);
+
+  // set to false by request: 30 May 2026, 09:11
+  const isTransitionPeriod = false;
 
   const recordingRestriction = useMemo(() => {
     let isLaying: boolean;
@@ -483,10 +486,13 @@ const RecordingForm = ({ type = 'add', initialValues }: RecordingFormProps) => {
         false;
     }
 
-    const isTransition =
-      initialValues?.is_transition ??
-      projectFlockKandangLookup?.is_transition ??
-      false;
+    // const isTransition =
+    //   initialValues?.is_transition ??
+    //   projectFlockKandangLookup?.is_transition ??
+    //   false;
+
+    // set to false by request: 30 May 2026, 09:11
+    const isTransition = false;
 
     const currentIsLaying =
       type === 'edit'

src/components/pages/production/recording/recording-utils.ts

@@ -11,63 +11,72 @@ export const getRecordingRestriction = (
   isTransition: boolean,
   currentIsLaying?: boolean
 ): RecordingRestriction => {
-  if (isTransition && !isLaying) {
-    const isLayingKandangInTransition = currentIsLaying === true;
+  // if (isTransition && !isLaying) {
+  //   const isLayingKandangInTransition = currentIsLaying === true;
 
-    if (isLayingKandangInTransition) {
-      return {
-        canEditStock: false,
-        canEditDepletion: true,
-        canEditEgg: true,
-        isLocked: false,
-        lockReason: undefined,
-      };
-    } else {
-      return {
-        canEditStock: true,
-        canEditDepletion: false,
-        canEditEgg: false,
-        isLocked: false,
-        lockReason: undefined,
-      };
-    }
-  }
+  //   if (isLayingKandangInTransition) {
+  //     return {
+  //       canEditStock: false,
+  //       canEditDepletion: true,
+  //       canEditEgg: true,
+  //       isLocked: false,
+  //       lockReason: undefined,
+  //     };
+  //   } else {
+  //     return {
+  //       canEditStock: true,
+  //       canEditDepletion: false,
+  //       canEditEgg: false,
+  //       isLocked: false,
+  //       lockReason: undefined,
+  //     };
+  //   }
+  // }
 
-  if (!isLaying && !isTransition && currentIsLaying) {
-    return {
-      canEditStock: false,
-      canEditDepletion: false,
-      canEditEgg: false,
-      isLocked: true,
-      lockReason:
-        'Recording Growing telah terkunci karena Project Flock sudah masuk fase Laying',
-    };
-  }
+  // if (!isLaying && !isTransition && currentIsLaying) {
+  //   return {
+  //     canEditStock: false,
+  //     canEditDepletion: false,
+  //     canEditEgg: false,
+  //     isLocked: true,
+  //     lockReason:
+  //       'Recording Growing telah terkunci karena Project Flock sudah masuk fase Laying',
+  //   };
+  // }
 
-  if (!isLaying && !isTransition) {
-    return {
-      canEditStock: true,
-      canEditDepletion: true,
-      canEditEgg: false,
-      isLocked: false,
-      lockReason: undefined,
-    };
-  }
-  if (isLaying && !isTransition) {
-    return {
-      canEditStock: true,
-      canEditDepletion: true,
-      canEditEgg: true,
-      isLocked: false,
-      lockReason: undefined,
-    };
-  }
+  // if (!isLaying && !isTransition) {
+  //   return {
+  //     canEditStock: true,
+  //     canEditDepletion: true,
+  //     canEditEgg: false,
+  //     isLocked: false,
+  //     lockReason: undefined,
+  //   };
+  // }
+  // if (isLaying && !isTransition) {
+  //   return {
+  //     canEditStock: true,
+  //     canEditDepletion: true,
+  //     canEditEgg: true,
+  //     isLocked: false,
+  //     lockReason: undefined,
+  //   };
+  // }
 
+  // return {
+  //   canEditStock: false,
+  //   canEditDepletion: false,
+  //   canEditEgg: false,
+  //   isLocked: true,
+  //   lockReason: 'Kondisi transisi tidak valid',
+  // };
+
+  // remove recording transition restriction by request: 30 May 2026, 09:11
   return {
-    canEditStock: false,
-    canEditDepletion: false,
-    canEditEgg: false,
-    isLocked: true,
-    lockReason: 'Kondisi transisi tidak valid',
+    canEditStock: true,
+    canEditDepletion: true,
+    canEditEgg: true,
+    isLocked: false,
+    lockReason: undefined,
   };
 };

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

@@ -8,6 +8,7 @@ import { Icon } from '@iconify/react';
 import Modal from '@/components/Modal';
 import Button from '@/components/Button';
 import DateInput from '@/components/input/DateInput';
+import NumberInput from '@/components/input/NumberInput';
 import SelectInput, {
   OptionType,
   useSelect,
@@ -24,13 +25,20 @@ export type ReportDepreciationFilterValues = {
   location?: OptionType<string>;
   projectFlock?: OptionType<string>;
   period: string | null;
+  totalDays: number;
 };
 
 export const ReportDepreciationFilterSchema = yup.object({
   area: yup.mixed<OptionType<string>>().optional(),
   location: yup.mixed<OptionType<string>>().optional(),
-  projectFlock: yup.mixed<OptionType<string>>().optional(),
+  projectFlock: yup
+    .mixed<OptionType<string>>()
+    .required('Project Flock wajib dipilih'),
   period: yup.string().nullable().required('Periode wajib dipilih'),
+  totalDays: yup
+    .number()
+    .min(1, 'Minimal 1 hari')
+    .required('Total Hari wajib diisi'),
 });
 
 interface ReportDepreciationFilterModalProps {
@@ -47,6 +55,7 @@ const defaultInitialValues: (
   location: undefined,
   projectFlock: undefined,
   period: initialValues?.period ?? null,
+  totalDays: initialValues?.totalDays ?? 10,
 });
 
 const ReportDepreciationFilterModal = ({
@@ -196,6 +205,14 @@ const ReportDepreciationFilterModal = ({
             isClearable
             isSearchable={true}
             className={{ wrapper: 'w-full' }}
+            isError={
+              formik.touched.projectFlock && !!formik.errors.projectFlock
+            }
+            errorMessage={
+              formik.touched.projectFlock
+                ? (formik.errors.projectFlock as string)
+                : undefined
+            }
           />
 
           <DateInput
@@ -210,6 +227,31 @@ const ReportDepreciationFilterModal = ({
             required
             isNestedModal
           />
+
+          <NumberInput
+            label='Total Hari'
+            name='totalDays'
+            placeholder='Masukkan total hari'
+            value={formik.values.totalDays}
+            onChange={(e) => {
+              const val = Number(e.target.value);
+              formik.setFieldValue(
+                'totalDays',
+                isNaN(val) || val < 1 ? 1 : Math.floor(val)
+              );
+            }}
+            onBlur={formik.handleBlur}
+            decimalScale={0}
+            allowNegative={false}
+            thousandSeparator=''
+            isError={formik.touched.totalDays && !!formik.errors.totalDays}
+            errorMessage={
+              formik.touched.totalDays
+                ? (formik.errors.totalDays as string)
+                : undefined
+            }
+            className={{ wrapper: 'w-full' }}
+          />
         </div>
 
         <div className='p-4 flex justify-between gap-4 border-t border-base-content/10 bg-gray-50'>

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

@@ -1,13 +1,11 @@
 'use client';
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import useSWR from 'swr';
 import { ColumnDef } from '@tanstack/react-table';
 
 import { Icon } from '@iconify/react';
-import Button from '@/components/Button';
 import Card from '@/components/Card';
-import Pagination from '@/components/Pagination';
 import Table from '@/components/Table';
 import ButtonFilter from '@/components/helper/ButtonFilter';
 import ReportExpenseSkeleton from '@/components/pages/report/expense/skeleton/ReportExpenseSkeleton';
@@ -15,11 +13,14 @@ import { useModal } from '@/components/Modal';
 import ReportDepreciationFilterModal from '@/components/pages/report/expense/tab/ReportDepreciationFilterModal';
 
 import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
-import { ReportDepreciation } from '@/types/api/report/report-expense';
-import { DepreciationReportApi } from '@/services/api/report/expense-report';
+import {
+  DepreciationV2Response,
+  ReportDepreciationV2Item,
+} from '@/types/api/report/report-expense';
+import { DepreciationReportV2Api } from '@/services/api/report/expense-report';
 import { useTableFilter } from '@/services/hooks/useTableFilter';
 import { OptionType } from '@/components/input/SelectInput';
-import { isResponseSuccess } from '@/lib/api-helper';
+import { httpClientFetcher } from '@/services/http/client';
 import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
 
 interface ReportDepreciationTabProps {
@@ -30,8 +31,6 @@ const ReportDepreciationTab = ({ tabId }: ReportDepreciationTabProps) => {
   const {
     state: tableFilterState,
     updateFilter,
-    setPage,
-    setPageSize,
     toQueryString: getTableFilterQueryString,
     reset: resetFilter,
   } = useTableFilter<{
@@ -39,107 +38,121 @@ const ReportDepreciationTab = ({ tabId }: ReportDepreciationTabProps) => {
     location?: OptionType<string>;
     projectFlock?: OptionType<string>;
     period: string;
+    totalDays: number;
   }>({
     initial: {
       area: undefined,
       location: undefined,
       projectFlock: undefined,
       period: formatDate(Date.now(), 'YYYY-MM-DD'),
+      totalDays: 10,
     },
     paramMap: {
-      pageSize: 'limit',
       area: 'area_id',
       location: 'location_id',
       projectFlock: 'project_flock_id',
       period: 'period',
+      totalDays: 'limit',
     },
     persist: true,
-    storeName: 'report-depreciation-table',
+    storeName: 'report-depreciation-v2-table',
   });
 
-  const [forceRecompute, setForceRecompute] = useState(false);
+  const swrKey = tableFilterState.projectFlock
+    ? `${DepreciationReportV2Api.basePath}${getTableFilterQueryString()}`
+    : null;
 
-  const {
-    data: depreciationsResponse,
-    isLoading: isLoadingDepreciations,
-    isValidating,
-    mutate,
-  } = useSWR(
-    `${DepreciationReportApi.basePath}${getTableFilterQueryString()}&force_recompute=${forceRecompute}`,
-    DepreciationReportApi.getAllFetcher
-  );
+  const { data: depreciationsResponse, isLoading: isLoadingDepreciations } =
+    useSWR<DepreciationV2Response>(swrKey, httpClientFetcher);
 
-  const handleRefresh = useCallback(() => {
-    setForceRecompute(true);
-  }, [mutate]);
-
-  const depreciations = isResponseSuccess(depreciationsResponse)
-    ? depreciationsResponse.data
-    : [];
+  const depreciationMeta =
+    depreciationsResponse?.status === 'success'
+      ? depreciationsResponse.meta
+      : null;
+  const depreciationData =
+    depreciationsResponse?.status === 'success'
+      ? depreciationsResponse.data
+      : [];
 
   const filterModal = useModal();
   const { ref: filterModalRef } = filterModal;
 
+  const initialOpenRef = useRef(false);
+  useEffect(() => {
+    if (!initialOpenRef.current) {
+      initialOpenRef.current = true;
+      if (!tableFilterState.projectFlock) {
+        filterModal.openModal();
+      }
+    }
+  }, []);
+
   const setTabActions = useTabActionsStore((state) => state.setTabActions);
   const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
 
-  const depreciationKandangColumns: ColumnDef<
-    ReportDepreciation['components']['kandang'][0]
-  >[] = [
-    {
-      accessorKey: 'kandang_name',
-      header: 'Kandang',
-    },
-    {
-      accessorKey: 'house_type',
-      header: 'Tipe Kandang',
-      cell: ({ row }) => row.original.house_type.toUpperCase(),
-    },
-    {
-      accessorKey: 'depreciation_percent',
-      header: 'Persentase Depresiasi',
-      cell: ({ row }) => row.original.depreciation_percent + '%',
-    },
-    {
-      accessorKey: 'depreciation_value',
-      header: 'Nilai Depresiasi',
-      cell: ({ row }) => formatCurrency(row.original.depreciation_value),
-    },
-    {
-      accessorKey: 'depreciation_source',
-      header: 'Asal Depresiasi',
-      cell: ({ row }) => row.original.depreciation_source.toUpperCase(),
-    },
-    {
-      accessorKey: 'cutover_date',
-      header: 'Tanggal Cutover',
-      cell: ({ row }) => formatDate(row.original.cutover_date, 'DD MMM YYYY'),
-    },
-    {
-      accessorKey: 'origin_date',
-      header: 'Tanggal Origin',
-      cell: ({ row }) => formatDate(row.original.origin_date, 'DD MMM YYYY'),
-    },
-  ];
+  const depreciationColumns: ColumnDef<ReportDepreciationV2Item>[] = useMemo(
+    () => [
+      {
+        accessorKey: 'date',
+        header: 'Tanggal',
+        cell: ({ row }) => formatDate(row.original.date, 'DD MMM YYYY'),
+      },
+      {
+        accessorKey: 'day_n',
+        header: 'Hari ke-',
+      },
+      {
+        accessorKey: 'chickin_date',
+        header: 'Tanggal Chick-in',
+        cell: ({ row }) => formatDate(row.original.chickin_date, 'DD MMM YYYY'),
+      },
+      {
+        accessorKey: 'depreciation_value',
+        header: 'Nilai Depresiasi',
+        cell: ({ row }) => formatCurrency(row.original.depreciation_value),
+      },
+      {
+        accessorKey: 'pullet_cost_day_n_total',
+        header: 'Total Harga Pullet Hari ke-N',
+        cell: ({ row }) =>
+          formatCurrency(
+            row.original.pullet_cost_day_n_total,
+            'IDR',
+            'id-ID',
+            0,
+            10
+          ),
+      },
+      {
+        accessorKey: 'multiplication_percentage',
+        header: 'Persentase Multiplikasi',
+        cell: ({ row }) =>
+          formatNumber(
+            row.original.multiplication_percentage * 100,
+            'en-US',
+            0,
+            4
+          ) + '%',
+      },
+      {
+        accessorKey: 'total_value_pullet_after_depreciation',
+        header: 'Total Nilai Pullet Setelah Depresiasi',
+        cell: ({ row }) =>
+          formatCurrency(
+            row.original.total_value_pullet_after_depreciation,
+            'IDR',
+            'id-ID',
+            0,
+            10
+          ),
+      },
+    ],
+    []
+  );
 
   const tabActionsElement = useMemo(
     () => (
       <div className='flex flex-row gap-3'>
-        <Button
-          variant='outline'
-          color='none'
-          onClick={handleRefresh}
-          disabled={isValidating}
-          className='rounded-lg max-h-10 font-semibold text-sm gap-1.5 text-base-content/50 border border-base-content/10 shadow-button-soft px-3 py-2.5'
-        >
-          <Icon
-            icon='heroicons:arrow-path'
-            width={20}
-            height={20}
-            className={isValidating ? 'animate-spin' : ''}
-          />
-          Refresh
-        </Button>
         <ButtonFilter
           values={tableFilterState}
           excludeFields={['page', 'pageSize']}
@@ -149,7 +162,7 @@ const ReportDepreciationTab = ({ tabId }: ReportDepreciationTabProps) => {
         />
       </div>
     ),
-    [tableFilterState, handleRefresh, isValidating]
+    [tableFilterState]
   );
 
   useEffect(() => {
@@ -171,9 +184,9 @@ const ReportDepreciationTab = ({ tabId }: ReportDepreciationTabProps) => {
           </div>
         )}
 
-        {!isLoadingDepreciations && depreciations.length === 0 && (
+        {!isLoadingDepreciations && !tableFilterState.projectFlock && (
           <ReportExpenseSkeleton
-            columns={depreciationKandangColumns}
+            columns={depreciationColumns}
             icon={
               <Icon
                 icon='heroicons:chart-bar'
@@ -182,90 +195,75 @@ const ReportDepreciationTab = ({ tabId }: ReportDepreciationTabProps) => {
                 height={20}
               />
             }
-            title='Data Not Yet Available'
-            subtitle='Please change your filters to get the data.'
+            title='Pilih Project Flock'
+            subtitle='Silakan pilih Project Flock pada filter untuk melihat data depresiasi.'
           />
         )}
 
-        {!isLoadingDepreciations && depreciations.length > 0 && (
-          <>
-            {depreciations.map((depreciationItem, idx) => (
-              <Card
-                key={idx}
-                title={depreciationItem.farm_name}
-                subtitle={`Period: ${formatDate(depreciationItem.period, 'DD MMM YYYY')} | Depresiasi Efektif: ${formatNumber(depreciationItem.depreciation_percent_effective, 'en-US', 0, 10)}% | Nilai Depresiasi: ${formatCurrency(depreciationItem.depreciation_value)} | Total Pullet Cost: ${formatCurrency(depreciationItem.pullet_cost_day_n_total, 'IDR', 'id-ID', 0, 10)}`}
-                className={{
-                  wrapper: 'w-full rounded-lg border-none',
-                  body: 'p-0',
-                  title:
-                    'px-2 py-1.5 font-normal text-sm bg-primary text-white',
-                  subtitle:
-                    'px-2 pb-1.5 bg-primary text-white text-xs font-normal',
-                  collapsible: 'rounded-lg',
-                }}
-                variant='bordered'
-                collapsible={true}
-              >
-                <Table
-                  data={depreciationItem.components.kandang}
-                  columns={depreciationKandangColumns}
-                  pageSize={tableFilterState.pageSize}
-                  page={
-                    isResponseSuccess(depreciationsResponse)
-                      ? depreciationsResponse?.meta?.page
-                      : 0
-                  }
-                  totalItems={
-                    isResponseSuccess(depreciationsResponse)
-                      ? depreciationsResponse?.meta?.total_results
-                      : 0
-                  }
-                  onPageChange={setPage}
-                  onPageSizeChange={setPageSize}
-                  isLoading={isLoadingDepreciations}
-                  className={{
-                    containerClassName: 'w-full mb-0!',
-                    tableWrapperClassName:
-                      'overflow-x-auto rounded-tr-none rounded-tl-none',
-                    tableClassName: 'w-full table-auto text-sm',
-                    headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
-                    headerColumnClassName:
-                      'px-4 py-3 text-xs font-semibold text-gray-700 text-left border border-gray-200',
-                    bodyRowClassName:
-                      'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200',
-                    bodyColumnClassName:
-                      'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
-                    tableFooterClassName:
-                      'bg-gray-100 font-semibold border border-gray-200',
-                    footerRowClassName: 'border-t-2 border-gray-300',
-                    footerColumnClassName:
-                      'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
-                    paginationClassName: 'hidden',
-                  }}
+        {!isLoadingDepreciations &&
+          tableFilterState.projectFlock &&
+          depreciationData.length === 0 && (
+            <ReportExpenseSkeleton
+              columns={depreciationColumns}
+              icon={
+                <Icon
+                  icon='heroicons:chart-bar'
+                  className='text-white'
+                  width={20}
+                  height={20}
                 />
-              </Card>
-            ))}
-
-            <Pagination
-              totalItems={
-                isResponseSuccess(depreciationsResponse)
-                  ? (depreciationsResponse?.meta?.total_results ?? 0)
-                  : 0
               }
-              itemsPerPage={tableFilterState.pageSize}
-              currentPage={
-                isResponseSuccess(depreciationsResponse)
-                  ? (depreciationsResponse?.meta?.page ?? 0)
-                  : 0
-              }
-              onPrevPage={() => setPage(tableFilterState.page - 1)}
-              onNextPage={() => setPage(tableFilterState.page + 1)}
-              onPageChange={setPage}
-              rowOptions={[10, 20, 50, 100]}
-              onRowChange={setPageSize}
+              title='Data Not Yet Available'
+              subtitle='Please change your filters to get the data.'
             />
-          </>
-        )}
+          )}
+
+        {!isLoadingDepreciations &&
+          depreciationData.length > 0 &&
+          depreciationMeta && (
+            <Card
+              title={depreciationMeta.farm_name}
+              subtitle={`Periode: ${formatDate(depreciationMeta.period, 'DD MMM YYYY')}`}
+              className={{
+                wrapper: 'w-full rounded-lg border-none',
+                body: 'p-0',
+                title: 'px-2 py-1.5 font-normal text-sm bg-primary text-white',
+                subtitle:
+                  'px-2 pb-1.5 bg-primary text-white text-xs font-normal',
+                collapsible: 'rounded-lg',
+              }}
+              variant='bordered'
+              collapsible={true}
+            >
+              <Table
+                data={depreciationData}
+                columns={depreciationColumns}
+                pageSize={depreciationData.length}
+                page={1}
+                totalItems={depreciationData.length}
+                isLoading={isLoadingDepreciations}
+                className={{
+                  containerClassName: 'w-full mb-0!',
+                  tableWrapperClassName:
+                    'overflow-x-auto rounded-tr-none rounded-tl-none',
+                  tableClassName: 'w-full table-auto text-sm',
+                  headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
+                  headerColumnClassName:
+                    'px-4 py-3 text-xs font-semibold text-gray-700 text-left border border-gray-200',
+                  bodyRowClassName:
+                    'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200',
+                  bodyColumnClassName:
+                    'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+                  tableFooterClassName:
+                    'bg-gray-100 font-semibold border border-gray-200',
+                  footerRowClassName: 'border-t-2 border-gray-300',
+                  footerColumnClassName:
+                    'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+                  paginationClassName: 'hidden',
+                }}
+              />
+            </Card>
+          )}
       </div>
 
       <ReportDepreciationFilterModal
@@ -281,8 +279,7 @@ const ReportDepreciationTab = ({ tabId }: ReportDepreciationTabProps) => {
             values.period ? formatDate(values.period, 'YYYY-MM-DD') : '',
             true
           );
-
-          setForceRecompute(false);
+          updateFilter('totalDays', values.totalDays ?? 10, true);
         }}
       />
     </>

src/services/api/marketing/marketing.ts

@@ -45,8 +45,11 @@ export class SalesOrderService extends BaseApiService<
           notes: notes || `${action} marketing ${id}`,
         },
       });
-    } catch (error) {
-      throw error;
+    } catch (error: unknown) {
+      if (axios.isAxiosError<BaseApiResponse<{ message: string }>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
     }
   }
 
@@ -68,8 +71,11 @@ export class SalesOrderService extends BaseApiService<
           notes: notes || `${action} marketing ${ids.join(', ')}`,
         },
       });
-    } catch (error) {
-      throw error;
+    } catch (error: unknown) {
+      if (axios.isAxiosError<BaseApiResponse<{ message: string }>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
     }
   }
 
@@ -110,8 +116,11 @@ export class SalesOrderService extends BaseApiService<
           notes: notes || `Delivery marketing ${id}`,
         },
       });
-    } catch (error) {
-      throw error;
+    } catch (error: unknown) {
+      if (axios.isAxiosError<BaseApiResponse<{ message: string }>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
     }
   }
 }
@@ -142,8 +151,11 @@ class MarketingExportService extends BaseApiService<
           notes: notes,
         },
       });
-    } catch (error) {
-      throw error;
+    } catch (error: unknown) {
+      if (axios.isAxiosError<BaseApiResponse<Marketing[] | Marketing>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
     }
   }
 

src/services/api/production/chickin.ts

@@ -6,6 +6,7 @@ import {
 import { BaseApiService } from '@/services/api/base';
 import { BaseApiResponse } from '@/types/api/api-general';
 import { httpClient } from '@/services/http/client';
+import axios from 'axios';
 
 export class ChickinService extends BaseApiService<
   Chickin,
@@ -16,6 +17,29 @@ export class ChickinService extends BaseApiService<
     super(basePath);
   }
 
+  async updateChickinDate(
+    projectFlockKandangId: number,
+    chickInDate: string
+  ): Promise<BaseApiResponse<{ message: string }> | undefined> {
+    try {
+      return await httpClient<BaseApiResponse<{ message: string }>>(
+        `${this.basePath}/chick-in-date`,
+        {
+          method: 'PATCH',
+          body: {
+            project_flock_kandang_id: projectFlockKandangId,
+            chick_in_date: chickInDate,
+          },
+        }
+      );
+    } catch (error: unknown) {
+      if (axios.isAxiosError<BaseApiResponse<{ message: string }>>(error)) {
+        return error.response?.data;
+      }
+      return undefined;
+    }
+  }
+
   /**
    * Approve single marketing data
    */

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

@@ -4,6 +4,7 @@ import { httpClient, httpClientFetcher } from '@/services/http/client';
 import { BaseApiResponse } from '@/types/api/api-general';
 import {
   ReportDepreciation,
+  ReportDepreciationV2Item,
   ReportExpense,
 } from '@/types/api/report/report-expense';
 
@@ -57,3 +58,9 @@ export const DepreciationReportApi = new BaseApiService<
   unknown,
   unknown
 >('/reports/expense/depreciation');
+
+export const DepreciationReportV2Api = new BaseApiService<
+  ReportDepreciationV2Item,
+  unknown,
+  unknown
+>('/reports/expense/v2/depreciation');

src/types/api/marketing/marketing.d.ts

@@ -23,6 +23,8 @@ export type BaseMarketing = {
   latest_approval: BaseApproval;
   sales_order: BaseSalesOrder[];
   delivery_order: BaseDeliveryOrder[];
+  grand_total_do: number;
+  grand_total_so: number;
 };
 
 export type BaseSalesOrder = {
@@ -104,6 +106,12 @@ export type MarketingFilter = {
   project_flock_name?: string;
   project_flock_kandang_id?: number;
   project_flock_kandang_name?: string;
+  start_date?: string;
+  end_date?: string;
+  filter_by?: string;
+  filter_by_name?: string;
+  warehouse_id?: number;
+  warehouse_name?: string;
 };
 
 /**

src/types/api/report/report-expense.d.ts

@@ -90,3 +90,63 @@ export type ReportDepreciationSearchParams = {
   farm: string | null;
   period: string | null;
 };
+
+export type ReportDepreciationV2KandangItem = {
+  kandang_id: number;
+  kandang_name: string;
+  transfer_id: number;
+  depreciation_percent: number;
+  pullet_cost_day_n: number;
+  depreciation_value: number;
+  chickin_date: string;
+  project_flock_kandang_id: number;
+  depreciation_source: string;
+  transfer_date: string;
+  source_project_flock_id: number;
+  house_type: string;
+  multiplication_percentage: number;
+  cutover_date: string;
+  origin_date: string;
+  standard_effective_date: string;
+  population: number;
+  transfer_qty: number;
+  total_value_pullet_after_depreciation: number;
+  manual_input_id: number;
+  start_schedule_day: number;
+  day_n: number;
+};
+
+export type ReportDepreciationV2Item = {
+  date: string;
+  depreciation_percent_effective: number;
+  depreciation_value: number;
+  pullet_cost_day_n_total: number;
+  multiplication_percentage: number;
+  day_n: number;
+  chickin_date: string;
+  total_value_pullet_after_depreciation: number;
+  standard_effective_date: string;
+  total_population: number;
+  components: {
+    kandang_count: number;
+    total_population: number;
+    kandang: ReportDepreciationV2KandangItem[];
+  };
+};
+
+export type DepreciationV2Meta = {
+  project_flock_id: number;
+  farm_name: string;
+  location_id: number;
+  period: string;
+  limit: number;
+  total_days: number;
+};
+
+export type DepreciationV2Response = {
+  code: number;
+  status: string;
+  message: string;
+  meta: DepreciationV2Meta;
+  data: ReportDepreciationV2Item[];
+};