mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
Merge branch 'feat/depreciation-report' into 'development'
[FEAT/FE] Depreciation Report See merge request mbugroup/lti-web-client!408
This commit is contained in:
Rivaldi A N S
@@ -4,7 +4,8 @@ import { useState } from 'react';
|
||||
import Tabs from '@/components/Tabs';
|
||||
|
||||
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
|
||||
import ReportExpenseTab from './tab/ReportExpenseTab';
|
||||
import ReportExpenseTab from '@/components/pages/report/expense/tab/ReportExpenseTab';
|
||||
import ReportDepreciationTab from '@/components/pages/report/expense/tab/ReportDepreciationTab';
|
||||
|
||||
const ReportExpenseTabs = () => {
|
||||
const [activeTabId, setActiveTabId] = useState<string>('1');
|
||||
@@ -16,6 +17,11 @@ const ReportExpenseTabs = () => {
|
||||
label: 'Laporan Biaya Operasional',
|
||||
content: <ReportExpenseTab tabId={'1'} />,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
label: 'Laporan Depresiasi',
|
||||
content: <ReportDepreciationTab tabId={'2'} />,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
|
||||
@@ -1,27 +1,26 @@
|
||||
import React from 'react';
|
||||
import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
|
||||
import Table from '@/components/Table';
|
||||
import { ReportExpense } from '@/types/api/report/report-expense';
|
||||
import { ColumnDef } from '@tanstack/react-table';
|
||||
|
||||
type ReportExpenseColumn =
|
||||
| ColumnDef<ReportExpense>
|
||||
type ReportSkeletonColumn<TData extends object> =
|
||||
| ColumnDef<TData>
|
||||
| {
|
||||
header: string;
|
||||
columns: Array<{
|
||||
header: string;
|
||||
accessorKey?: string;
|
||||
cell?: (props: { row: { original: ReportExpense } }) => React.ReactNode;
|
||||
cell?: (props: { row: { original: TData } }) => React.ReactNode;
|
||||
}>;
|
||||
};
|
||||
|
||||
const ReportExpenseSkeleton = ({
|
||||
const ReportExpenseSkeleton = <TData extends object>({
|
||||
columns,
|
||||
icon,
|
||||
title,
|
||||
subtitle,
|
||||
}: {
|
||||
columns: ReportExpenseColumn[];
|
||||
columns: ReportSkeletonColumn<TData>[];
|
||||
icon: React.ReactNode;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
|
||||
@@ -0,0 +1,270 @@
|
||||
'use client';
|
||||
|
||||
import { RefObject, useMemo, useState } from 'react';
|
||||
import { useFormik } from 'formik';
|
||||
import * as yup from 'yup';
|
||||
|
||||
import { Icon } from '@iconify/react';
|
||||
import Modal from '@/components/Modal';
|
||||
import Button from '@/components/Button';
|
||||
import DateInput from '@/components/input/DateInput';
|
||||
import SelectInput, {
|
||||
OptionType,
|
||||
useSelect,
|
||||
} from '@/components/input/SelectInput';
|
||||
|
||||
import { AreaApi, LocationApi } from '@/services/api/master-data';
|
||||
import { ProjectFlockApi } from '@/services/api/production';
|
||||
import { Area } from '@/types/api/master-data/area';
|
||||
import { Location } from '@/types/api/master-data/location';
|
||||
import { ProjectFlock } from '@/types/api/production/project-flock';
|
||||
|
||||
export type ReportDepreciationFilterValues = {
|
||||
area_id: string | null;
|
||||
location_id: string | null;
|
||||
project_flock_id: string | null;
|
||||
period: string | null;
|
||||
};
|
||||
|
||||
export const ReportDepreciationFilterSchema = yup.object({
|
||||
area_id: yup.string().nullable(),
|
||||
location_id: yup.string().nullable(),
|
||||
project_flock_id: yup.string().nullable(),
|
||||
period: yup.string().nullable().required('Periode wajib dipilih'),
|
||||
}) as yup.ObjectSchema<ReportDepreciationFilterValues>;
|
||||
|
||||
interface ReportDepreciationFilterModalProps {
|
||||
ref: RefObject<HTMLDialogElement | null>;
|
||||
initialValues?: ReportDepreciationFilterValues;
|
||||
onSubmit?: (values: Partial<ReportDepreciationFilterValues>) => void;
|
||||
onReset?: () => void;
|
||||
}
|
||||
|
||||
const defaultInitialValues: ReportDepreciationFilterValues = {
|
||||
area_id: null,
|
||||
location_id: null,
|
||||
project_flock_id: null,
|
||||
period: null,
|
||||
};
|
||||
|
||||
const ReportDepreciationFilterModal = ({
|
||||
ref,
|
||||
initialValues,
|
||||
onSubmit,
|
||||
onReset,
|
||||
}: ReportDepreciationFilterModalProps) => {
|
||||
const [selectedAreaId, setSelectedAreaId] = useState<string | undefined>(
|
||||
initialValues?.area_id || undefined
|
||||
);
|
||||
const [selectedLocationId, setSelectedLocationId] = useState<
|
||||
string | undefined
|
||||
>(initialValues?.location_id || undefined);
|
||||
|
||||
const closeModalHandler = () => {
|
||||
ref.current?.close();
|
||||
};
|
||||
|
||||
const {
|
||||
setInputValue: setAreaInputValue,
|
||||
options: areaOptions,
|
||||
isLoadingOptions: isLoadingAreaOptions,
|
||||
loadMore: loadMoreAreas,
|
||||
} = useSelect<Area>(AreaApi.basePath, 'id', 'name', 'search');
|
||||
|
||||
const {
|
||||
setInputValue: setLocationInputValue,
|
||||
options: locationOptions,
|
||||
isLoadingOptions: isLoadingLocationOptions,
|
||||
loadMore: loadMoreLocations,
|
||||
} = useSelect<Location>(LocationApi.basePath, 'id', 'name', 'search', {
|
||||
area_id: selectedAreaId || '',
|
||||
});
|
||||
|
||||
const {
|
||||
setInputValue: setProjectFlockInputValue,
|
||||
options: projectFlockOptions,
|
||||
isLoadingOptions: isLoadingProjectFlockOptions,
|
||||
loadMore: loadMoreProjectFlocks,
|
||||
} = useSelect<ProjectFlock>(
|
||||
ProjectFlockApi.basePath,
|
||||
'id',
|
||||
'flock_name',
|
||||
'search',
|
||||
{
|
||||
location_id: selectedLocationId || '',
|
||||
}
|
||||
);
|
||||
|
||||
const formik = useFormik<ReportDepreciationFilterValues>({
|
||||
initialValues: initialValues || defaultInitialValues,
|
||||
validationSchema: ReportDepreciationFilterSchema,
|
||||
onSubmit: async (values) => {
|
||||
onSubmit?.(values);
|
||||
closeModalHandler();
|
||||
},
|
||||
onReset: (_) => {
|
||||
onReset?.();
|
||||
closeModalHandler();
|
||||
},
|
||||
});
|
||||
|
||||
const areaValue = useMemo(() => {
|
||||
if (!formik.values.area_id) return null;
|
||||
return (
|
||||
areaOptions.find((opt) => String(opt.value) === formik.values.area_id) ||
|
||||
null
|
||||
);
|
||||
}, [formik.values.area_id, areaOptions]);
|
||||
|
||||
const locationValue = useMemo(() => {
|
||||
if (!formik.values.location_id) return null;
|
||||
return (
|
||||
locationOptions.find(
|
||||
(opt) => String(opt.value) === formik.values.location_id
|
||||
) || null
|
||||
);
|
||||
}, [formik.values.location_id, locationOptions]);
|
||||
|
||||
const projectFlockValue = useMemo(() => {
|
||||
if (!formik.values.project_flock_id) return null;
|
||||
return (
|
||||
projectFlockOptions.find(
|
||||
(opt) => String(opt.value) === formik.values.project_flock_id
|
||||
) || null
|
||||
);
|
||||
}, [formik.values.project_flock_id, projectFlockOptions]);
|
||||
|
||||
const areaChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||
const areaId = val && !Array.isArray(val) ? String(val.value) : null;
|
||||
|
||||
setSelectedAreaId(areaId || undefined);
|
||||
formik.setFieldValue('area_id', areaId);
|
||||
formik.setFieldValue('location_id', null);
|
||||
formik.setFieldValue('project_flock_id', null);
|
||||
setSelectedLocationId(undefined);
|
||||
};
|
||||
|
||||
const locationChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||
const locationId = val && !Array.isArray(val) ? String(val.value) : null;
|
||||
|
||||
setSelectedLocationId(locationId || undefined);
|
||||
formik.setFieldValue('location_id', locationId);
|
||||
formik.setFieldValue('project_flock_id', null);
|
||||
};
|
||||
|
||||
const projectFlockChangeHandler = (val: OptionType | OptionType[] | null) => {
|
||||
const projectFlockId =
|
||||
val && !Array.isArray(val) ? String(val.value) : null;
|
||||
|
||||
formik.setFieldValue('project_flock_id', projectFlockId);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal
|
||||
ref={ref}
|
||||
className={{
|
||||
modalBox: 'p-0 rounded-xl xl:max-w-4/12 max-w-sm',
|
||||
}}
|
||||
>
|
||||
<form
|
||||
onSubmit={formik.handleSubmit}
|
||||
onReset={formik.handleReset}
|
||||
className='w-full flex flex-col'
|
||||
>
|
||||
<div className='p-4 flex items-center justify-between gap-2 border-b border-base-content/10'>
|
||||
<div className='flex items-center gap-2 text-primary'>
|
||||
<Icon icon='heroicons:funnel' width={20} height={20} />
|
||||
<h3 className='text-sm font-medium'>Filter Data</h3>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type='button'
|
||||
variant='ghost'
|
||||
color='none'
|
||||
onClick={closeModalHandler}
|
||||
className='p-0 text-base-content/50 hover:text-base-content'
|
||||
>
|
||||
<Icon icon='heroicons:x-mark' width={20} height={20} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className='p-4 flex flex-col gap-1.5'>
|
||||
<SelectInput
|
||||
label='Area'
|
||||
placeholder='Pilih Area'
|
||||
options={areaOptions}
|
||||
value={areaValue}
|
||||
onChange={areaChangeHandler}
|
||||
onInputChange={setAreaInputValue}
|
||||
onMenuScrollToBottom={loadMoreAreas}
|
||||
isLoading={isLoadingAreaOptions}
|
||||
isClearable
|
||||
isSearchable={true}
|
||||
className={{ wrapper: 'w-full' }}
|
||||
/>
|
||||
|
||||
<SelectInput
|
||||
label='Lokasi'
|
||||
placeholder='Pilih Lokasi'
|
||||
options={locationOptions}
|
||||
value={locationValue}
|
||||
onChange={locationChangeHandler}
|
||||
onInputChange={setLocationInputValue}
|
||||
onMenuScrollToBottom={loadMoreLocations}
|
||||
isLoading={isLoadingLocationOptions}
|
||||
isClearable
|
||||
isSearchable={true}
|
||||
className={{ wrapper: 'w-full' }}
|
||||
/>
|
||||
|
||||
<SelectInput
|
||||
label='Project Flock'
|
||||
placeholder='Pilih Project Flock'
|
||||
options={projectFlockOptions}
|
||||
value={projectFlockValue}
|
||||
onChange={projectFlockChangeHandler}
|
||||
onInputChange={setProjectFlockInputValue}
|
||||
onMenuScrollToBottom={loadMoreProjectFlocks}
|
||||
isLoading={isLoadingProjectFlockOptions}
|
||||
isClearable
|
||||
isSearchable={true}
|
||||
className={{ wrapper: 'w-full' }}
|
||||
/>
|
||||
|
||||
<DateInput
|
||||
label='Periode'
|
||||
name='period'
|
||||
placeholder='Pilih Periode'
|
||||
value={formik.values.period || ''}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur}
|
||||
isError={formik.touched.period && !!formik.errors.period}
|
||||
errorMessage={formik.errors.period}
|
||||
required
|
||||
isNestedModal
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='p-4 flex justify-between gap-4 border-t border-base-content/10 bg-gray-50'>
|
||||
<Button
|
||||
type='reset'
|
||||
variant='soft'
|
||||
className='rounded-lg text-base-content/65 bg-transparent border-none hover:bg-base-content/10 hover:text-base-content/65 transition-colors px-3 py-2'
|
||||
>
|
||||
Reset Filter
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type='submit'
|
||||
className='min-w-40 text-sm rounded-lg py-3 text-white font-semibold'
|
||||
disabled={!formik.isValid || formik.isSubmitting}
|
||||
>
|
||||
Apply Filter
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReportDepreciationFilterModal;
|
||||
@@ -0,0 +1,257 @@
|
||||
'use client';
|
||||
|
||||
import React, { useEffect, useMemo } from 'react';
|
||||
import useSWR from 'swr';
|
||||
import { ColumnDef } from '@tanstack/react-table';
|
||||
|
||||
import { Icon } from '@iconify/react';
|
||||
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';
|
||||
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 { useTableFilter } from '@/services/hooks/useTableFilter';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
import { formatCurrency, formatDate, formatNumber } from '@/lib/helper';
|
||||
|
||||
interface ReportDepreciationTabProps {
|
||||
tabId: string;
|
||||
}
|
||||
|
||||
const ReportDepreciationTab = ({ tabId }: ReportDepreciationTabProps) => {
|
||||
const {
|
||||
state: tableFilterState,
|
||||
updateFilter,
|
||||
setPage,
|
||||
setPageSize,
|
||||
toQueryString: getTableFilterQueryString,
|
||||
reset: resetFilter,
|
||||
} = useTableFilter({
|
||||
initial: {
|
||||
area_id: '',
|
||||
location_id: '',
|
||||
project_flock_id: '',
|
||||
period: formatDate(Date.now(), 'YYYY-MM-DD'),
|
||||
},
|
||||
paramMap: {
|
||||
pageSize: 'limit',
|
||||
area_id: 'area_id',
|
||||
location_id: 'location_id',
|
||||
project_flock_id: 'project_flock_id',
|
||||
period: 'period',
|
||||
},
|
||||
});
|
||||
|
||||
const { data: depreciationsResponse, isLoading: isLoadingDepreciations } =
|
||||
useSWR(
|
||||
`${DepreciationReportApi.basePath}${getTableFilterQueryString()}`,
|
||||
DepreciationReportApi.getAllFetcher
|
||||
);
|
||||
|
||||
const depreciations = isResponseSuccess(depreciationsResponse)
|
||||
? depreciationsResponse.data
|
||||
: [];
|
||||
|
||||
const filterModal = useModal();
|
||||
const { ref: filterModalRef } = filterModal;
|
||||
|
||||
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 tabActionsElement = useMemo(
|
||||
() => (
|
||||
<div className='flex flex-row gap-3'>
|
||||
<ButtonFilter
|
||||
values={tableFilterState}
|
||||
excludeFields={['page', 'pageSize']}
|
||||
onClick={() => filterModal.openModal()}
|
||||
variant='outline'
|
||||
className='px-3 py-2.5'
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
[tableFilterState]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
setTabActions(tabId, tabActionsElement);
|
||||
}, [setTabActions, tabActionsElement, tabId]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
clearTabActions(tabId);
|
||||
};
|
||||
}, [clearTabActions, tabId]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
|
||||
{isLoadingDepreciations && (
|
||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||
<span className='loading loading-spinner loading-xl' />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoadingDepreciations && depreciations.length === 0 && (
|
||||
<ReportExpenseSkeleton
|
||||
columns={depreciationKandangColumns}
|
||||
icon={
|
||||
<Icon
|
||||
icon='heroicons:chart-bar'
|
||||
className='text-white'
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
}
|
||||
title='Data Not Yet Available'
|
||||
subtitle='Please change your filters to get the data.'
|
||||
/>
|
||||
)}
|
||||
|
||||
{!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',
|
||||
}}
|
||||
/>
|
||||
</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}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ReportDepreciationFilterModal
|
||||
ref={filterModalRef}
|
||||
initialValues={tableFilterState}
|
||||
onReset={resetFilter}
|
||||
onSubmit={(values) => {
|
||||
updateFilter('area_id', values.area_id ?? '');
|
||||
updateFilter('location_id', values.location_id ?? '');
|
||||
updateFilter('project_flock_id', values.project_flock_id ?? '');
|
||||
updateFilter(
|
||||
'period',
|
||||
values.period ? formatDate(values.period, 'YYYY-MM-DD') : ''
|
||||
);
|
||||
|
||||
console.log({ values });
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReportDepreciationTab;
|
||||
@@ -23,7 +23,7 @@ import RealizationStatusBadge from '@/components/pages/expense/RealizationStatus
|
||||
import Table from '@/components/Table';
|
||||
import { formatCurrency, formatDate } from '@/lib/helper';
|
||||
import { ReportExpense } from '@/types/api/report/report-expense';
|
||||
import { ReportExpenseApi } from '@/services/api/report';
|
||||
import { ReportExpenseApi } from '@/services/api/report/expense-report';
|
||||
import { isResponseSuccess } from '@/lib/api-helper';
|
||||
import { useTabActionsStore } from '@/stores/tab-actions/tab-actions.store';
|
||||
import Modal, { useModal } from '@/components/Modal';
|
||||
|
||||
@@ -1,7 +1,10 @@
|
||||
import { BaseApiService } from '@/services/api/base';
|
||||
import { httpClientFetcher } from '@/services/http/client';
|
||||
import { BaseApiResponse } from '@/types/api/api-general';
|
||||
import { ReportExpense } from '@/types/api/report/report-expense';
|
||||
import {
|
||||
ReportDepreciation,
|
||||
ReportExpense,
|
||||
} from '@/types/api/report/report-expense';
|
||||
|
||||
export class ReportExpenseApiService extends BaseApiService<
|
||||
ReportExpense,
|
||||
@@ -20,3 +23,9 @@ export class ReportExpenseApiService extends BaseApiService<
|
||||
}
|
||||
|
||||
export const ReportExpenseApi = new ReportExpenseApiService('/reports/expense');
|
||||
|
||||
export const DepreciationReportApi = new BaseApiService<
|
||||
ReportDepreciation,
|
||||
unknown,
|
||||
unknown
|
||||
>('/reports/expense/depreciation');
|
||||
+38
@@ -52,3 +52,41 @@ export type ReportExpenseSearchParams = {
|
||||
category: string | null;
|
||||
search: string;
|
||||
};
|
||||
|
||||
export type ReportDepreciation = {
|
||||
project_flock_id: number;
|
||||
farm_name: string;
|
||||
period: string;
|
||||
depreciation_percent_effective: number;
|
||||
depreciation_value: number;
|
||||
pullet_cost_day_n_total: number;
|
||||
hpp?: number;
|
||||
components: {
|
||||
kandang: {
|
||||
kandang_id: number;
|
||||
hpp?: number;
|
||||
transfer_id: number;
|
||||
cutover_date: string;
|
||||
kandang_name: string;
|
||||
manual_input_id: number;
|
||||
depreciation_value: number;
|
||||
start_schedule_day: number;
|
||||
depreciation_percent: number;
|
||||
source_project_flock_id: number;
|
||||
day_n: number;
|
||||
transfer_date: string;
|
||||
pullet_cost_day_n: number;
|
||||
depreciation_source: string;
|
||||
project_flock_kandang_id: number;
|
||||
transfer_qty: number;
|
||||
house_type: string;
|
||||
origin_date: string;
|
||||
}[];
|
||||
kandang_count: number;
|
||||
};
|
||||
};
|
||||
|
||||
export type ReportDepreciationSearchParams = {
|
||||
farm: string | null;
|
||||
period: string | null;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user