mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
fix: adjust ReportDepreciationTab content
This commit is contained in:
ValdiANS
@@ -1,271 +1,121 @@
|
||||
'use client';
|
||||
|
||||
import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { Icon } from '@iconify/react';
|
||||
import React, { useEffect, useMemo } from 'react';
|
||||
import useSWR from 'swr';
|
||||
import { ColumnDef } from '@tanstack/react-table';
|
||||
import Button from '@/components/Button';
|
||||
import Dropdown from '@/components/dropdown/Dropdown';
|
||||
import Modal, { useModal } from '@/components/Modal';
|
||||
|
||||
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 SelectInput, { OptionType } from '@/components/input/SelectInput';
|
||||
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 { formatCurrency } from '@/lib/helper';
|
||||
import {
|
||||
ReportDepreciation,
|
||||
ReportDepreciationSearchParams,
|
||||
} from '@/types/api/report/report-expense';
|
||||
import toast from 'react-hot-toast';
|
||||
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 DUMMY_DEPRECIATION_DATA: ReportDepreciation[] = [
|
||||
{
|
||||
id: 'DEP-001',
|
||||
flock: 'Flock A-01',
|
||||
totalCostPullet: 185000000,
|
||||
totalDepresiasi: 38500000,
|
||||
periode: 'Periode 1',
|
||||
farm: 'Farm Sukamaju',
|
||||
jumlahKandang: 4,
|
||||
},
|
||||
{
|
||||
id: 'DEP-002',
|
||||
flock: 'Flock A-02',
|
||||
totalCostPullet: 192500000,
|
||||
totalDepresiasi: 40125000,
|
||||
periode: 'Periode 1',
|
||||
farm: 'Farm Sukamaju',
|
||||
jumlahKandang: 5,
|
||||
},
|
||||
{
|
||||
id: 'DEP-003',
|
||||
flock: 'Flock B-01',
|
||||
totalCostPullet: 176800000,
|
||||
totalDepresiasi: 36200000,
|
||||
periode: 'Periode 2',
|
||||
farm: 'Farm Cibitung',
|
||||
jumlahKandang: 3,
|
||||
},
|
||||
{
|
||||
id: 'DEP-004',
|
||||
flock: 'Flock B-02',
|
||||
totalCostPullet: 201400000,
|
||||
totalDepresiasi: 42250000,
|
||||
periode: 'Periode 2',
|
||||
farm: 'Farm Cibitung',
|
||||
jumlahKandang: 4,
|
||||
},
|
||||
{
|
||||
id: 'DEP-005',
|
||||
flock: 'Flock C-01',
|
||||
totalCostPullet: 210900000,
|
||||
totalDepresiasi: 43950000,
|
||||
periode: 'Periode 3',
|
||||
farm: 'Farm Karawang',
|
||||
jumlahKandang: 6,
|
||||
},
|
||||
{
|
||||
id: 'DEP-006',
|
||||
flock: 'Flock C-02',
|
||||
totalCostPullet: 205750000,
|
||||
totalDepresiasi: 43100000,
|
||||
periode: 'Periode 3',
|
||||
farm: 'Farm Karawang',
|
||||
jumlahKandang: 5,
|
||||
},
|
||||
{
|
||||
id: 'DEP-007',
|
||||
flock: 'Flock D-01',
|
||||
totalCostPullet: 188300000,
|
||||
totalDepresiasi: 39000000,
|
||||
periode: 'Periode 4',
|
||||
farm: 'Farm Subang',
|
||||
jumlahKandang: 4,
|
||||
},
|
||||
{
|
||||
id: 'DEP-008',
|
||||
flock: 'Flock D-02',
|
||||
totalCostPullet: 197600000,
|
||||
totalDepresiasi: 40875000,
|
||||
periode: 'Periode 4',
|
||||
farm: 'Farm Subang',
|
||||
jumlahKandang: 5,
|
||||
},
|
||||
];
|
||||
|
||||
const INITIAL_FILTERS: ReportDepreciationSearchParams = {
|
||||
farm: null,
|
||||
period: null,
|
||||
};
|
||||
|
||||
const ReportDepreciationTab = ({ tabId }: ReportDepreciationTabProps) => {
|
||||
const [filterParams, setFilterParams] =
|
||||
useState<ReportDepreciationSearchParams>(INITIAL_FILTERS);
|
||||
const [draftFilters, setDraftFilters] =
|
||||
useState<ReportDepreciationSearchParams>(INITIAL_FILTERS);
|
||||
const [page, setPage] = useState(1);
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
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 handleFilterModalOpenRef = useRef(() => {});
|
||||
const filterModal = useModal();
|
||||
const { ref: filterModalRef } = filterModal;
|
||||
|
||||
const setTabActions = useTabActionsStore((state) => state.setTabActions);
|
||||
const clearTabActions = useTabActionsStore((state) => state.clearTabActions);
|
||||
|
||||
const farmOptions = useMemo<OptionType[]>(
|
||||
() =>
|
||||
Array.from(new Set(DUMMY_DEPRECIATION_DATA.map((item) => item.farm))).map(
|
||||
(farm) => ({
|
||||
value: farm,
|
||||
label: farm,
|
||||
})
|
||||
),
|
||||
[]
|
||||
);
|
||||
|
||||
const periodOptions = useMemo<OptionType[]>(
|
||||
() =>
|
||||
Array.from(
|
||||
new Set(DUMMY_DEPRECIATION_DATA.map((item) => item.periode))
|
||||
).map((period) => ({
|
||||
value: period,
|
||||
label: period,
|
||||
})),
|
||||
[]
|
||||
);
|
||||
|
||||
const draftFarmValue = useMemo(
|
||||
() => filterToOption(farmOptions, draftFilters.farm),
|
||||
[draftFilters.farm, farmOptions]
|
||||
);
|
||||
|
||||
const draftPeriodValue = useMemo(
|
||||
() => filterToOption(periodOptions, draftFilters.period),
|
||||
[draftFilters.period, periodOptions]
|
||||
);
|
||||
|
||||
const filteredData = useMemo(() => {
|
||||
return DUMMY_DEPRECIATION_DATA.filter((item) => {
|
||||
const matchFarm = filterParams.farm
|
||||
? item.farm === filterParams.farm
|
||||
: true;
|
||||
const matchPeriod = filterParams.period
|
||||
? item.periode === filterParams.period
|
||||
: true;
|
||||
|
||||
return matchFarm && matchPeriod;
|
||||
});
|
||||
}, [filterParams]);
|
||||
|
||||
const totalPages = useMemo(
|
||||
() => Math.max(1, Math.ceil(filteredData.length / pageSize)),
|
||||
[filteredData.length, pageSize]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (page > totalPages) {
|
||||
setPage(totalPages);
|
||||
}
|
||||
}, [page, totalPages]);
|
||||
|
||||
const paginatedData = useMemo(() => {
|
||||
const startIndex = (page - 1) * pageSize;
|
||||
return filteredData.slice(startIndex, startIndex + pageSize);
|
||||
}, [filteredData, page, pageSize]);
|
||||
|
||||
handleFilterModalOpenRef.current = () => {
|
||||
setDraftFilters(filterParams);
|
||||
filterModal.openModal();
|
||||
};
|
||||
|
||||
const handleApplyFilters = (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setFilterParams(draftFilters);
|
||||
setPage(1);
|
||||
filterModal.closeModal();
|
||||
};
|
||||
|
||||
const handleResetFilters = () => {
|
||||
setDraftFilters(INITIAL_FILTERS);
|
||||
setFilterParams(INITIAL_FILTERS);
|
||||
setPage(1);
|
||||
filterModal.closeModal();
|
||||
};
|
||||
|
||||
const handleExport = useCallback((type: 'excel' | 'pdf') => {
|
||||
toast.success(
|
||||
`Export ${type.toUpperCase()} belum terhubung API. Saat ini tabel memakai dummy data.`
|
||||
);
|
||||
}, []);
|
||||
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={filterParams}
|
||||
onClick={() => handleFilterModalOpenRef.current()}
|
||||
values={tableFilterState}
|
||||
excludeFields={['page', 'pageSize']}
|
||||
onClick={() => filterModal.openModal()}
|
||||
variant='outline'
|
||||
className='px-3 py-2.5'
|
||||
/>
|
||||
|
||||
<Dropdown
|
||||
align='end'
|
||||
direction='bottom'
|
||||
className={{
|
||||
content:
|
||||
'mt-1 rounded-xl border border-base-content/5 shadow-sm overflow-hidden',
|
||||
}}
|
||||
trigger={
|
||||
<Button
|
||||
variant='outline'
|
||||
color='none'
|
||||
className='px-3 py-2.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
|
||||
>
|
||||
<div className='flex flex-row items-center gap-1.5'>
|
||||
<Icon
|
||||
icon='heroicons:cloud-arrow-down'
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
<span>Export</span>
|
||||
<div className='w-px self-stretch bg-base-content/10' />
|
||||
<Icon icon='heroicons:chevron-down' width={14} height={14} />
|
||||
</div>
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
variant='ghost'
|
||||
color='none'
|
||||
onClick={() => handleExport('excel')}
|
||||
className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
|
||||
>
|
||||
<Icon icon='heroicons:table-cells' width={20} height={20} />
|
||||
Export to Excel
|
||||
</Button>
|
||||
<Button
|
||||
variant='ghost'
|
||||
color='none'
|
||||
onClick={() => handleExport('pdf')}
|
||||
className='w-full p-3 justify-start text-sm text-base-content/50 font-semibold text-nowrap'
|
||||
>
|
||||
<Icon icon='heroicons:document' width={20} height={20} />
|
||||
Export to PDF
|
||||
</Button>
|
||||
</Dropdown>
|
||||
</div>
|
||||
),
|
||||
[filterParams, handleExport]
|
||||
[tableFilterState]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -278,44 +128,18 @@ const ReportDepreciationTab = ({ tabId }: ReportDepreciationTabProps) => {
|
||||
};
|
||||
}, [clearTabActions, tabId]);
|
||||
|
||||
const columns = useMemo((): ColumnDef<ReportDepreciation>[] => {
|
||||
return [
|
||||
{
|
||||
header: 'Flock',
|
||||
accessorKey: 'flock',
|
||||
},
|
||||
{
|
||||
header: 'Total Cost Pullet',
|
||||
accessorKey: 'totalCostPullet',
|
||||
cell: ({ row }) => formatCurrency(row.original.totalCostPullet),
|
||||
},
|
||||
{
|
||||
header: 'Total Depresiasi',
|
||||
accessorKey: 'totalDepresiasi',
|
||||
cell: ({ row }) => formatCurrency(row.original.totalDepresiasi),
|
||||
},
|
||||
{
|
||||
header: 'Periode',
|
||||
accessorKey: 'periode',
|
||||
},
|
||||
{
|
||||
header: 'Farm',
|
||||
accessorKey: 'farm',
|
||||
},
|
||||
{
|
||||
header: 'Jumlah Kandang',
|
||||
accessorKey: 'jumlahKandang',
|
||||
cell: ({ row }) => row.original.jumlahKandang.toLocaleString('id-ID'),
|
||||
},
|
||||
];
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
|
||||
{filteredData.length === 0 && (
|
||||
{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={columns}
|
||||
columns={depreciationKandangColumns}
|
||||
icon={
|
||||
<Icon
|
||||
icon='heroicons:chart-bar'
|
||||
@@ -329,139 +153,105 @@ const ReportDepreciationTab = ({ tabId }: ReportDepreciationTabProps) => {
|
||||
/>
|
||||
)}
|
||||
|
||||
{filteredData.length > 0 && (
|
||||
{!isLoadingDepreciations && depreciations.length > 0 && (
|
||||
<>
|
||||
<Table
|
||||
data={paginatedData}
|
||||
columns={columns}
|
||||
pageSize={pageSize}
|
||||
page={page}
|
||||
totalItems={filteredData.length}
|
||||
onPageChange={setPage}
|
||||
onPageSizeChange={setPageSize}
|
||||
className={{
|
||||
containerClassName: 'w-full mb-0!',
|
||||
tableWrapperClassName: 'overflow-x-auto',
|
||||
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 text-nowrap',
|
||||
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',
|
||||
paginationClassName: 'hidden',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className='max-w-sm ml-auto'>
|
||||
<Pagination
|
||||
totalItems={filteredData.length}
|
||||
itemsPerPage={pageSize}
|
||||
currentPage={page}
|
||||
onPrevPage={() =>
|
||||
setPage((currentPage) =>
|
||||
currentPage > 1 ? currentPage - 1 : currentPage
|
||||
)
|
||||
}
|
||||
onNextPage={() =>
|
||||
setPage((currentPage) =>
|
||||
currentPage < totalPages ? currentPage + 1 : currentPage
|
||||
)
|
||||
}
|
||||
onPageChange={setPage}
|
||||
rowOptions={[10, 20, 50, 100]}
|
||||
onRowChange={(value) => {
|
||||
setPageSize(value);
|
||||
setPage(1);
|
||||
{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',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
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>
|
||||
|
||||
<Modal
|
||||
ref={filterModal.ref}
|
||||
className={{
|
||||
modal: 'p-0',
|
||||
modalBox: 'p-0 rounded-[0.875rem] xl:max-w-4/12 max-w-sm',
|
||||
<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 });
|
||||
}}
|
||||
>
|
||||
<div className='flex items-center justify-between gap-2 border-b border-base-content/10 p-4'>
|
||||
<div className='flex items-center gap-2 text-primary'>
|
||||
<Icon icon='heroicons:funnel' width={20} height={20} />
|
||||
<h3 className='font-medium text-sm'>Filter Data</h3>
|
||||
</div>
|
||||
<Button
|
||||
variant='link'
|
||||
onClick={filterModal.closeModal}
|
||||
className='text-base-content/50 hover:text-base-content transition-colors cursor-pointer'
|
||||
>
|
||||
<Icon icon='heroicons:x-mark' width={20} height={20} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleApplyFilters} onReset={handleResetFilters}>
|
||||
<div className='p-4 flex flex-col gap-3'>
|
||||
<SelectInput
|
||||
label='Farm'
|
||||
placeholder='Pilih Farm'
|
||||
options={farmOptions}
|
||||
value={draftFarmValue}
|
||||
onChange={(val) =>
|
||||
setDraftFilters((current) => ({
|
||||
...current,
|
||||
farm: (val as OptionType | null)?.value?.toString() || null,
|
||||
}))
|
||||
}
|
||||
isClearable
|
||||
className={{ wrapper: 'w-full' }}
|
||||
/>
|
||||
|
||||
<SelectInput
|
||||
label='Periode'
|
||||
placeholder='Pilih Periode'
|
||||
options={periodOptions}
|
||||
value={draftPeriodValue}
|
||||
onChange={(val) =>
|
||||
setDraftFilters((current) => ({
|
||||
...current,
|
||||
period: (val as OptionType | null)?.value?.toString() || null,
|
||||
}))
|
||||
}
|
||||
isClearable
|
||||
className={{ wrapper: 'w-full' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='flex justify-between items-center gap-4 p-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'
|
||||
>
|
||||
Apply Filter
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const filterToOption = (
|
||||
options: OptionType[],
|
||||
value: string | null
|
||||
): OptionType | null => {
|
||||
if (!value) return null;
|
||||
return options.find((option) => option.value === value) || null;
|
||||
};
|
||||
|
||||
export default ReportDepreciationTab;
|
||||
|
||||
Reference in New Issue
Block a user