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

[FEAT/FE] Depreciation Report V2 See merge request mbugroup/lti-web-client!509
2026-06-09 15:07:51 +00:00 · 2026-06-05 09:41:53 +00:00
parent 16c5c6c887 55737bb96f
commit 2f604c9966
4 changed files with 270 additions and 164 deletions
@@ -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'>
@@ -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);
        }}
      />
    </>
@@ -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');
@@ -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[];
+};