mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
refactor(FE): Refactor expense report page to use tab-based layout
This commit is contained in:
rstubryan
@@ -1,13 +1,9 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import ReportExpenseTable from '@/components/pages/report/expense/ReportExpenseTable';
|
import ReportExpenseTabs from '@/components/pages/report/expense/ReportExpenseTabs';
|
||||||
|
|
||||||
const ReportExpense = () => {
|
const ReportExpense = () => {
|
||||||
return (
|
return <ReportExpenseTabs />;
|
||||||
<div className='w-full p-4'>
|
|
||||||
<ReportExpenseTable />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ReportExpense;
|
export default ReportExpense;
|
||||||
|
|||||||
@@ -1,901 +0,0 @@
|
|||||||
import { useState, useMemo, useCallback } from 'react';
|
|
||||||
import { ChangeEventHandler } from 'react';
|
|
||||||
import useSWR from 'swr';
|
|
||||||
import Button from '@/components/Button';
|
|
||||||
import Card from '@/components/Card';
|
|
||||||
import DateInput from '@/components/input/DateInput';
|
|
||||||
import DebouncedTextInput from '@/components/input/DebouncedTextInput';
|
|
||||||
import SelectInput, {
|
|
||||||
OptionType,
|
|
||||||
useSelect,
|
|
||||||
} from '@/components/input/SelectInput';
|
|
||||||
import ExpenseStatusBadge from '@/components/pages/expense/ExpenseStatusBadge';
|
|
||||||
import RealizationStatusBadge from '@/components/pages/expense/RealizationStatusBadge';
|
|
||||||
import Table, { TABLE_DEFAULT_STYLING } from '@/components/Table';
|
|
||||||
import { cn, formatCurrency, formatDate } from '@/lib/helper';
|
|
||||||
import { ReportExpense } from '@/types/api/report/report-expense';
|
|
||||||
import { Icon } from '@iconify/react';
|
|
||||||
import { ColumnDef } from '@tanstack/react-table';
|
|
||||||
import { ReportExpenseApi } from '@/services/api/report';
|
|
||||||
import { isResponseSuccess } from '@/lib/api-helper';
|
|
||||||
import { useTableFilter } from '@/services/hooks/useTableFilter';
|
|
||||||
import Pagination from '@/components/Pagination';
|
|
||||||
import Dropdown from '@/components/dropdown/Dropdown';
|
|
||||||
import Menu from '@/components/menu/Menu';
|
|
||||||
import MenuItem from '@/components/menu/MenuItem';
|
|
||||||
import * as XLSX from 'xlsx';
|
|
||||||
import { generateReportExpensePDF } from './pdf/ReportExpenseExport';
|
|
||||||
import toast from 'react-hot-toast';
|
|
||||||
import {
|
|
||||||
KandangApi,
|
|
||||||
LocationApi,
|
|
||||||
NonstockApi,
|
|
||||||
SupplierApi,
|
|
||||||
} from '@/services/api/master-data';
|
|
||||||
import { Supplier } from '@/types/api/master-data/supplier';
|
|
||||||
import { Kandang } from '@/types/api/master-data/kandang';
|
|
||||||
import { Nonstock } from '@/types/api/master-data/nonstock';
|
|
||||||
|
|
||||||
const ReportExpenseTable = () => {
|
|
||||||
// ===== STATE MANAGEMENT =====
|
|
||||||
const [isPdfExportLoading, setIsPdfExportLoading] = useState(false);
|
|
||||||
const [isExcelExportLoading, setIsExcelExportLoading] = useState(false);
|
|
||||||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
|
||||||
const [pdfProgress, setPdfProgress] = useState(0);
|
|
||||||
const [excelProgress, setExcelProgress] = useState(0);
|
|
||||||
const isAnyExportLoading = isPdfExportLoading || isExcelExportLoading;
|
|
||||||
|
|
||||||
// ===== SUBMISSION STATE =====
|
|
||||||
const [isSubmitted, setIsSubmitted] = useState(false);
|
|
||||||
|
|
||||||
// ===== TABLE FILTER STATE =====
|
|
||||||
const {
|
|
||||||
state: filterState,
|
|
||||||
updateFilter,
|
|
||||||
setPage,
|
|
||||||
setPageSize,
|
|
||||||
reset: resetFilterState,
|
|
||||||
toQueryString,
|
|
||||||
} = useTableFilter({
|
|
||||||
initial: {
|
|
||||||
location_id: '',
|
|
||||||
supplier_id: '',
|
|
||||||
kandang_id: '',
|
|
||||||
nonstock_id: '',
|
|
||||||
realization_date: '',
|
|
||||||
category: '',
|
|
||||||
search: '',
|
|
||||||
},
|
|
||||||
paramMap: {
|
|
||||||
page: 'page',
|
|
||||||
pageSize: 'limit',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// ===== SELECT OPTIONS =====
|
|
||||||
const {
|
|
||||||
setInputValue: setLocationInputValue,
|
|
||||||
options: locationOptions,
|
|
||||||
isLoadingOptions: isLoadingLocationOptions,
|
|
||||||
loadMore: loadMoreLocations,
|
|
||||||
} = useSelect<Location>(LocationApi.basePath, 'id', 'name');
|
|
||||||
|
|
||||||
const {
|
|
||||||
setInputValue: setSupplierInputValue,
|
|
||||||
options: supplierOptions,
|
|
||||||
isLoadingOptions: isLoadingSupplierOptions,
|
|
||||||
loadMore: loadMoreSuppliers,
|
|
||||||
} = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name');
|
|
||||||
|
|
||||||
const {
|
|
||||||
setInputValue: setKandangInputValue,
|
|
||||||
options: kandangOptions,
|
|
||||||
isLoadingOptions: isLoadingKandangOptions,
|
|
||||||
loadMore: loadMoreKandangs,
|
|
||||||
} = useSelect<Kandang>(KandangApi.basePath, 'id', 'name');
|
|
||||||
|
|
||||||
const {
|
|
||||||
setInputValue: setNonstockInputValue,
|
|
||||||
options: nonstockOptions,
|
|
||||||
isLoadingOptions: isLoadingNonstockOptions,
|
|
||||||
loadMore: loadMoreNonstocks,
|
|
||||||
} = useSelect<Nonstock>(NonstockApi.basePath, 'id', 'name');
|
|
||||||
|
|
||||||
const categoryOptions = useMemo(
|
|
||||||
() => [
|
|
||||||
{ value: 'BOP', label: 'BOP' },
|
|
||||||
{ value: 'NON-BOP', label: 'Non BOP' },
|
|
||||||
],
|
|
||||||
[]
|
|
||||||
);
|
|
||||||
|
|
||||||
// Mendapatkan value option select dari filter state
|
|
||||||
const selectedLocation = useMemo(
|
|
||||||
() =>
|
|
||||||
locationOptions.find(
|
|
||||||
(opt) => String(opt.value) === filterState.location_id
|
|
||||||
) || null,
|
|
||||||
[locationOptions, filterState.location_id]
|
|
||||||
);
|
|
||||||
const selectedSupplier = useMemo(
|
|
||||||
() =>
|
|
||||||
supplierOptions.find(
|
|
||||||
(opt) => String(opt.value) === filterState.supplier_id
|
|
||||||
) || null,
|
|
||||||
[supplierOptions, filterState.supplier_id]
|
|
||||||
);
|
|
||||||
const selectedKandang = useMemo(
|
|
||||||
() =>
|
|
||||||
kandangOptions.find(
|
|
||||||
(opt) => String(opt.value) === filterState.kandang_id
|
|
||||||
) || null,
|
|
||||||
[kandangOptions, filterState.kandang_id]
|
|
||||||
);
|
|
||||||
const selectedNonstock = useMemo(
|
|
||||||
() =>
|
|
||||||
nonstockOptions.find(
|
|
||||||
(opt) => String(opt.value) === filterState.nonstock_id
|
|
||||||
) || null,
|
|
||||||
[nonstockOptions, filterState.nonstock_id]
|
|
||||||
);
|
|
||||||
const selectedCategory = useMemo(
|
|
||||||
() =>
|
|
||||||
categoryOptions.find((opt) => opt.value === filterState.category) || null,
|
|
||||||
[categoryOptions, filterState.category]
|
|
||||||
);
|
|
||||||
|
|
||||||
// ===== FILTER CHANGE HANDLERS =====
|
|
||||||
const locationChangeHandler = useCallback(
|
|
||||||
(val: OptionType | OptionType[] | null) => {
|
|
||||||
const option = val as OptionType;
|
|
||||||
updateFilter('location_id', option ? String(option.value) : '');
|
|
||||||
updateFilter('kandang_id', '');
|
|
||||||
setIsSubmitted(false);
|
|
||||||
},
|
|
||||||
[updateFilter]
|
|
||||||
);
|
|
||||||
|
|
||||||
const kandangChangeHandler = useCallback(
|
|
||||||
(val: OptionType | OptionType[] | null) => {
|
|
||||||
const option = val as OptionType;
|
|
||||||
updateFilter('kandang_id', option ? String(option.value) : '');
|
|
||||||
setIsSubmitted(false);
|
|
||||||
},
|
|
||||||
[updateFilter]
|
|
||||||
);
|
|
||||||
|
|
||||||
const supplierChangeHandler = useCallback(
|
|
||||||
(val: OptionType | OptionType[] | null) => {
|
|
||||||
const option = val as OptionType;
|
|
||||||
updateFilter('supplier_id', option ? String(option.value) : '');
|
|
||||||
setIsSubmitted(false);
|
|
||||||
},
|
|
||||||
[updateFilter]
|
|
||||||
);
|
|
||||||
|
|
||||||
const nonstockChangeHandler = useCallback(
|
|
||||||
(val: OptionType | OptionType[] | null) => {
|
|
||||||
const option = val as OptionType;
|
|
||||||
updateFilter('nonstock_id', option ? String(option.value) : '');
|
|
||||||
setIsSubmitted(false);
|
|
||||||
},
|
|
||||||
[updateFilter]
|
|
||||||
);
|
|
||||||
|
|
||||||
const categoryChangeHandler = useCallback(
|
|
||||||
(val: OptionType | OptionType[] | null) => {
|
|
||||||
const option = val as OptionType;
|
|
||||||
updateFilter('category', option ? String(option.value) : '');
|
|
||||||
setIsSubmitted(false);
|
|
||||||
},
|
|
||||||
[updateFilter]
|
|
||||||
);
|
|
||||||
|
|
||||||
const realizationDateChangeHandler = useCallback<
|
|
||||||
ChangeEventHandler<HTMLInputElement>
|
|
||||||
>(
|
|
||||||
(e) => {
|
|
||||||
updateFilter('realization_date', e.target.value || '');
|
|
||||||
setIsSubmitted(false);
|
|
||||||
},
|
|
||||||
[updateFilter]
|
|
||||||
);
|
|
||||||
|
|
||||||
const searchChangeHandler = useCallback(
|
|
||||||
(e: React.ChangeEvent<HTMLInputElement>) => {
|
|
||||||
updateFilter('search', e.target.value);
|
|
||||||
setIsSubmitted(false);
|
|
||||||
},
|
|
||||||
[updateFilter]
|
|
||||||
);
|
|
||||||
|
|
||||||
// ===== RESET FILTERS =====
|
|
||||||
const resetFilters = useCallback(() => {
|
|
||||||
resetFilterState();
|
|
||||||
setIsSubmitted(false);
|
|
||||||
}, [resetFilterState]);
|
|
||||||
|
|
||||||
// ===== SUBMIT HANDLER =====
|
|
||||||
const handleSubmit = useCallback(() => {
|
|
||||||
setIsSubmitted(true);
|
|
||||||
setPage(1);
|
|
||||||
}, [setPage]);
|
|
||||||
|
|
||||||
// ===== DATA FETCHING FOR TABLE =====
|
|
||||||
const { data: reportExpenseResponse, isLoading } = useSWR(
|
|
||||||
isSubmitted
|
|
||||||
? () => {
|
|
||||||
return ['report-expense', toQueryString()];
|
|
||||||
}
|
|
||||||
: null,
|
|
||||||
([, query]) => {
|
|
||||||
const endpoint = `${ReportExpenseApi.basePath}${query}`;
|
|
||||||
return ReportExpenseApi.getAllFetcher(endpoint);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const data: ReportExpense[] = useMemo(
|
|
||||||
() =>
|
|
||||||
isResponseSuccess(reportExpenseResponse)
|
|
||||||
? (reportExpenseResponse?.data as ReportExpense[]) || []
|
|
||||||
: [],
|
|
||||||
[reportExpenseResponse]
|
|
||||||
);
|
|
||||||
|
|
||||||
const meta = useMemo(
|
|
||||||
() =>
|
|
||||||
isResponseSuccess(reportExpenseResponse) && reportExpenseResponse.meta
|
|
||||||
? reportExpenseResponse.meta
|
|
||||||
: null,
|
|
||||||
[reportExpenseResponse]
|
|
||||||
);
|
|
||||||
|
|
||||||
// ===== EXPORT DATA FETCHER =====
|
|
||||||
const reportExpenseExport = useCallback(async (): Promise<
|
|
||||||
ReportExpense[] | null
|
|
||||||
> => {
|
|
||||||
const params = new URLSearchParams(toQueryString().replace('?', ''));
|
|
||||||
params.set('limit', 'limit');
|
|
||||||
params.set('page', '1');
|
|
||||||
|
|
||||||
const endpoint = `${ReportExpenseApi.basePath}?${params.toString()}`;
|
|
||||||
const response = await ReportExpenseApi.getAllFetcher(endpoint);
|
|
||||||
|
|
||||||
return isResponseSuccess(response) ? response.data : null;
|
|
||||||
}, [toQueryString]);
|
|
||||||
|
|
||||||
// ===== EXPORT HANDLERS =====
|
|
||||||
const handleExportPdf = useCallback(async () => {
|
|
||||||
if (isPdfExportLoading) return;
|
|
||||||
setIsPdfExportLoading(true);
|
|
||||||
setPdfProgress(0);
|
|
||||||
|
|
||||||
await new Promise((resolve) =>
|
|
||||||
requestAnimationFrame(() => resolve(undefined))
|
|
||||||
);
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Stage 1: Fetching data (0-20%)
|
|
||||||
setPdfProgress(10);
|
|
||||||
await new Promise((resolve) => setTimeout(resolve, 50));
|
|
||||||
|
|
||||||
const allData = await reportExpenseExport();
|
|
||||||
if (!allData || allData.length === 0) {
|
|
||||||
toast.error('Tidak ada data untuk diekspor.');
|
|
||||||
setIsPdfExportLoading(false);
|
|
||||||
setPdfProgress(0);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Stage 2: Data fetched - langsung loncat ke progress tinggi
|
|
||||||
setPdfProgress(30);
|
|
||||||
await new Promise((resolve) => setTimeout(resolve, 50));
|
|
||||||
const progressInterval = setInterval(() => {
|
|
||||||
setPdfProgress((prev) => {
|
|
||||||
// Increment kecil dan random antara 0.5-2%
|
|
||||||
const increment = Math.random() * 1.5 + 0.5;
|
|
||||||
const newProgress = Math.min(prev + increment, 50);
|
|
||||||
return newProgress;
|
|
||||||
});
|
|
||||||
}, 300); // Update setiap 300ms
|
|
||||||
|
|
||||||
const pdfParams = {
|
|
||||||
location_name: selectedLocation?.label,
|
|
||||||
supplier_name: selectedSupplier?.label,
|
|
||||||
kandang_name: selectedKandang?.label,
|
|
||||||
nonstock_name: selectedNonstock?.label,
|
|
||||||
category: selectedCategory?.label,
|
|
||||||
realization_date: filterState.realization_date,
|
|
||||||
search: filterState.search,
|
|
||||||
};
|
|
||||||
|
|
||||||
setDropdownOpen(false);
|
|
||||||
|
|
||||||
// Stage 3: Langsung loncat ke 80-85% untuk menghindari stuck
|
|
||||||
const baseProgress = 80 + Math.floor(Math.random() * 16); // Random 80-85%
|
|
||||||
setPdfProgress(baseProgress);
|
|
||||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
|
||||||
|
|
||||||
// Stage 4: Berikan jeda untuk UI update
|
|
||||||
await new Promise((resolve) =>
|
|
||||||
requestAnimationFrame(() => resolve(undefined))
|
|
||||||
);
|
|
||||||
|
|
||||||
// Proses PDF yang sebenarnya
|
|
||||||
await generateReportExpensePDF(allData, pdfParams);
|
|
||||||
|
|
||||||
clearInterval(progressInterval);
|
|
||||||
|
|
||||||
// Stage 5: Finalizing (98-100%)
|
|
||||||
setPdfProgress(99);
|
|
||||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
|
||||||
|
|
||||||
setPdfProgress(100);
|
|
||||||
toast.success('PDF berhasil dibuat dan diunduh.');
|
|
||||||
|
|
||||||
// Reset progress setelah selesai
|
|
||||||
setTimeout(() => setPdfProgress(0), 500);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('PDF Export Error:', error);
|
|
||||||
toast.error('Gagal membuat PDF. Silakan coba lagi.');
|
|
||||||
setPdfProgress(0);
|
|
||||||
} finally {
|
|
||||||
setIsPdfExportLoading(false);
|
|
||||||
}
|
|
||||||
}, [
|
|
||||||
reportExpenseExport,
|
|
||||||
selectedLocation,
|
|
||||||
selectedSupplier,
|
|
||||||
selectedKandang,
|
|
||||||
selectedNonstock,
|
|
||||||
selectedCategory,
|
|
||||||
filterState.realization_date,
|
|
||||||
filterState.search,
|
|
||||||
]);
|
|
||||||
|
|
||||||
const handleExportExcel = useCallback(async () => {
|
|
||||||
if (isExcelExportLoading) return;
|
|
||||||
setIsExcelExportLoading(true);
|
|
||||||
setExcelProgress(0);
|
|
||||||
setDropdownOpen(false);
|
|
||||||
|
|
||||||
await new Promise((resolve) =>
|
|
||||||
requestAnimationFrame(() => resolve(undefined))
|
|
||||||
);
|
|
||||||
|
|
||||||
try {
|
|
||||||
// Stage 1: Fetching data (0-20%)
|
|
||||||
setExcelProgress(15);
|
|
||||||
await new Promise((resolve) => setTimeout(resolve, 50));
|
|
||||||
|
|
||||||
const allDataForExport = await reportExpenseExport();
|
|
||||||
|
|
||||||
if (!allDataForExport || allDataForExport.length === 0) {
|
|
||||||
toast.error('Tidak ada data untuk diekspor.');
|
|
||||||
setIsExcelExportLoading(false);
|
|
||||||
setExcelProgress(0);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Stage 2: Data fetched (20-40%)
|
|
||||||
setExcelProgress(30);
|
|
||||||
await new Promise((resolve) => setTimeout(resolve, 50));
|
|
||||||
|
|
||||||
// Stage 3: Grouping data (40-60%)
|
|
||||||
setExcelProgress(50);
|
|
||||||
const groupedBySupplier: Record<string, ReportExpense[]> = {};
|
|
||||||
allDataForExport.forEach((item) => {
|
|
||||||
const supplierName = item.supplier?.name || 'Unknown Supplier';
|
|
||||||
if (!groupedBySupplier[supplierName]) {
|
|
||||||
groupedBySupplier[supplierName] = [];
|
|
||||||
}
|
|
||||||
groupedBySupplier[supplierName].push(item);
|
|
||||||
});
|
|
||||||
|
|
||||||
await new Promise((resolve) => setTimeout(resolve, 50));
|
|
||||||
|
|
||||||
// Stage 4: Creating workbook (60-80%)
|
|
||||||
setExcelProgress(70);
|
|
||||||
const workbook = XLSX.utils.book_new();
|
|
||||||
|
|
||||||
const supplierEntries = Object.entries(groupedBySupplier);
|
|
||||||
const totalSuppliers = supplierEntries.length;
|
|
||||||
|
|
||||||
for (let i = 0; i < supplierEntries.length; i++) {
|
|
||||||
const [supplierName, supplierData] = supplierEntries[i];
|
|
||||||
|
|
||||||
// Update progress per supplier
|
|
||||||
const progressIncrement = (20 / totalSuppliers) * (i + 1);
|
|
||||||
setExcelProgress(70 + progressIncrement);
|
|
||||||
|
|
||||||
const totals = supplierData.reduce(
|
|
||||||
(acc, item) => ({
|
|
||||||
qty_pengajuan: acc.qty_pengajuan + (item.pengajuan?.qty || 0),
|
|
||||||
total_pengajuan:
|
|
||||||
acc.total_pengajuan +
|
|
||||||
(item.pengajuan?.qty || 0) * (item.pengajuan?.price || 0),
|
|
||||||
qty_realisasi: acc.qty_realisasi + (item.realisasi?.qty || 0),
|
|
||||||
total_realisasi:
|
|
||||||
acc.total_realisasi +
|
|
||||||
(item.realisasi?.qty || 0) * (item.realisasi?.price || 0),
|
|
||||||
}),
|
|
||||||
{
|
|
||||||
qty_pengajuan: 0,
|
|
||||||
total_pengajuan: 0,
|
|
||||||
qty_realisasi: 0,
|
|
||||||
total_realisasi: 0,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const excelData = supplierData.map((item, index) => ({
|
|
||||||
No: index + 1,
|
|
||||||
'No. PO': item.po_number || '',
|
|
||||||
'No. Referensi': item.reference_number || '',
|
|
||||||
'Tanggal Realisasi': item.realization_date
|
|
||||||
? formatDate(item.realization_date, 'DD MMM YYYY')
|
|
||||||
: '',
|
|
||||||
'Tanggal Transaksi': item.transaction_date
|
|
||||||
? formatDate(item.transaction_date, 'DD MMM YYYY')
|
|
||||||
: '',
|
|
||||||
Kategori: item.category || '',
|
|
||||||
Produk: item.pengajuan?.nonstock?.name || '',
|
|
||||||
Lokasi: item.kandang?.location?.name || '',
|
|
||||||
Kandang: item.kandang?.name || '',
|
|
||||||
'Qty Pengajuan': item.pengajuan?.qty || 0,
|
|
||||||
'Harga Pengajuan': item.pengajuan?.price || 0,
|
|
||||||
'Total Pengajuan':
|
|
||||||
(item.pengajuan?.qty || 0) * (item.pengajuan?.price || 0),
|
|
||||||
'Qty Realisasi': item.realisasi?.qty || 0,
|
|
||||||
'Harga Realisasi': item.realisasi?.price || 0,
|
|
||||||
'Total Realisasi':
|
|
||||||
(item.realisasi?.qty || 0) * (item.realisasi?.price || 0),
|
|
||||||
'Status Pencairan': item.latest_approval?.step_name || '',
|
|
||||||
}));
|
|
||||||
|
|
||||||
excelData.push({
|
|
||||||
No: 'Total' as unknown as number,
|
|
||||||
'No. PO': '',
|
|
||||||
'No. Referensi': '',
|
|
||||||
'Tanggal Realisasi': '',
|
|
||||||
'Tanggal Transaksi': '',
|
|
||||||
Kategori: '',
|
|
||||||
Produk: '',
|
|
||||||
Lokasi: '',
|
|
||||||
Kandang: '',
|
|
||||||
'Qty Pengajuan': totals.qty_pengajuan,
|
|
||||||
'Harga Pengajuan': 0,
|
|
||||||
'Total Pengajuan': totals.total_pengajuan,
|
|
||||||
'Qty Realisasi': totals.qty_realisasi,
|
|
||||||
'Harga Realisasi': 0,
|
|
||||||
'Total Realisasi': totals.total_realisasi,
|
|
||||||
'Status Pencairan': '',
|
|
||||||
});
|
|
||||||
|
|
||||||
const worksheet = XLSX.utils.json_to_sheet(excelData);
|
|
||||||
const colWidths = [
|
|
||||||
{ wch: 5 }, // No
|
|
||||||
{ wch: 20 }, // No. PO
|
|
||||||
{ wch: 20 }, // No. Referensi
|
|
||||||
{ wch: 15 }, // Tanggal Realisasi
|
|
||||||
{ wch: 15 }, // Tanggal Transaksi
|
|
||||||
{ wch: 15 }, // Kategori
|
|
||||||
{ wch: 30 }, // Produk
|
|
||||||
{ wch: 20 }, // Lokasi
|
|
||||||
{ wch: 15 }, // Kandang
|
|
||||||
{ wch: 15 }, // Qty Pengajuan
|
|
||||||
{ wch: 15 }, // Harga Pengajuan
|
|
||||||
{ wch: 20 }, // Total Pengajuan
|
|
||||||
{ wch: 15 }, // Qty Realisasi
|
|
||||||
{ wch: 15 }, // Harga Realisasi
|
|
||||||
{ wch: 20 }, // Total Realisasi
|
|
||||||
{ wch: 20 }, // Status Pencairan
|
|
||||||
];
|
|
||||||
worksheet['!cols'] = colWidths;
|
|
||||||
|
|
||||||
const sheetName = supplierName.slice(0, 31);
|
|
||||||
XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
|
|
||||||
|
|
||||||
// Small delay to allow UI update
|
|
||||||
if (i < supplierEntries.length - 1) {
|
|
||||||
await new Promise((resolve) => setTimeout(resolve, 10));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Stage 5: Writing file (90-100%)
|
|
||||||
setExcelProgress(95);
|
|
||||||
await new Promise((resolve) => setTimeout(resolve, 50));
|
|
||||||
|
|
||||||
const filename = `Laporan-BOP-${formatDate(new Date(), 'YYYY-MM-DD-HHmm')}.xlsx`;
|
|
||||||
XLSX.writeFile(workbook, filename);
|
|
||||||
|
|
||||||
setExcelProgress(100);
|
|
||||||
toast.success('Excel berhasil dibuat dan diunduh.');
|
|
||||||
|
|
||||||
// Reset progress
|
|
||||||
setTimeout(() => setExcelProgress(0), 500);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Excel Export Error:', error);
|
|
||||||
toast.error('Gagal membuat Excel. Silakan coba lagi.');
|
|
||||||
setExcelProgress(0);
|
|
||||||
} finally {
|
|
||||||
setIsExcelExportLoading(false);
|
|
||||||
}
|
|
||||||
}, [isExcelExportLoading, reportExpenseExport]);
|
|
||||||
|
|
||||||
// ===== PAGINATION HANDLERS =====
|
|
||||||
const handlePageChange = (page: number) => {
|
|
||||||
setPage(page);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleRowChange = (pageSize: number) => {
|
|
||||||
setPageSize(pageSize);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleNextPage = () => {
|
|
||||||
if (meta && filterState.page < meta.total_pages) {
|
|
||||||
setPage(filterState.page + 1);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handlePrevPage = () => {
|
|
||||||
if (filterState.page > 1) {
|
|
||||||
setPage(filterState.page - 1);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// ===== TABLE COLUMNS DEFINITION =====
|
|
||||||
const columns = useMemo((): ColumnDef<ReportExpense>[] => {
|
|
||||||
return [
|
|
||||||
{
|
|
||||||
header: 'No',
|
|
||||||
accessorFn: (_, index) =>
|
|
||||||
(filterState.page - 1) * filterState.pageSize + index + 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'No. PO',
|
|
||||||
accessorKey: 'po_number',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'No. Referensi',
|
|
||||||
accessorKey: 'reference_number',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Tanggal Realisasi',
|
|
||||||
accessorKey: 'realization_date',
|
|
||||||
cell: ({ row }) => {
|
|
||||||
return formatDate(row.original?.realization_date, 'DD MMM, YYYY');
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Tanggal Transaksi',
|
|
||||||
accessorKey: 'transaction_date',
|
|
||||||
cell: ({ row }) => {
|
|
||||||
return formatDate(row.original?.transaction_date, 'DD MMM, YYYY');
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Kategori',
|
|
||||||
accessorKey: 'category',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Produk',
|
|
||||||
accessorFn: (row) => row.pengajuan?.nonstock?.name,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Supplier',
|
|
||||||
accessorFn: (row) => row.supplier?.name,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Lokasi',
|
|
||||||
accessorFn: (row) => row.kandang?.location?.name,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Kandang',
|
|
||||||
accessorFn: (row) => row.kandang?.name,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Pengajuan',
|
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
header: 'Qty',
|
|
||||||
id: 'qty_pengajuan',
|
|
||||||
accessorFn: (row) => row.pengajuan?.qty,
|
|
||||||
cell: ({ row }) =>
|
|
||||||
row.original.pengajuan?.qty?.toLocaleString('id-ID') || '0',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Harga',
|
|
||||||
id: 'harga_pengajuan',
|
|
||||||
accessorFn: (row) => row.pengajuan?.price,
|
|
||||||
cell: ({ row }) =>
|
|
||||||
formatCurrency(row.original.pengajuan?.price || 0),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Total',
|
|
||||||
id: 'total_pengajuan',
|
|
||||||
accessorFn: (row) =>
|
|
||||||
(row.pengajuan?.qty || 0) * (row.pengajuan?.price || 0),
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const total =
|
|
||||||
(row.original.pengajuan?.qty || 0) *
|
|
||||||
(row.original.pengajuan?.price || 0);
|
|
||||||
return formatCurrency(total);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Realisasi',
|
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
header: 'Qty',
|
|
||||||
id: 'qty_realisasi',
|
|
||||||
accessorFn: (row) => row.realisasi?.qty,
|
|
||||||
cell: ({ row }) =>
|
|
||||||
row.original.realisasi?.qty?.toLocaleString('id-ID') || '0',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Harga',
|
|
||||||
id: 'harga_realisasi',
|
|
||||||
accessorFn: (row) => row.realisasi?.price,
|
|
||||||
cell: ({ row }) =>
|
|
||||||
formatCurrency(row.original.realisasi?.price || 0),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Total',
|
|
||||||
id: 'total_realisasi',
|
|
||||||
accessorFn: (row) =>
|
|
||||||
(row.realisasi?.qty || 0) * (row.realisasi?.price || 0),
|
|
||||||
cell: ({ row }) => {
|
|
||||||
const total =
|
|
||||||
(row.original.realisasi?.qty || 0) *
|
|
||||||
(row.original.realisasi?.price || 0);
|
|
||||||
return formatCurrency(total);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Status Pencairan',
|
|
||||||
cell: (props) => (
|
|
||||||
<RealizationStatusBadge
|
|
||||||
approval={props.row.original?.latest_approval}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
header: 'Status BOP',
|
|
||||||
cell: (props) => (
|
|
||||||
<ExpenseStatusBadge approval={props.row.original?.latest_approval} />
|
|
||||||
),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
}, [filterState.page, filterState.pageSize]);
|
|
||||||
|
|
||||||
// ===== RENDER =====
|
|
||||||
return (
|
|
||||||
<div className='flex flex-col gap-4'>
|
|
||||||
{isAnyExportLoading && (
|
|
||||||
<div className='flex flex-col gap-2'>
|
|
||||||
<progress
|
|
||||||
className='progress progress-primary w-full'
|
|
||||||
value={
|
|
||||||
isPdfExportLoading
|
|
||||||
? pdfProgress
|
|
||||||
: isExcelExportLoading
|
|
||||||
? excelProgress
|
|
||||||
: 0
|
|
||||||
}
|
|
||||||
max='100'
|
|
||||||
></progress>
|
|
||||||
{((isPdfExportLoading && pdfProgress > 0) ||
|
|
||||||
(isExcelExportLoading && excelProgress > 0)) && (
|
|
||||||
<div className='text-sm text-center text-gray-600'>
|
|
||||||
<div className='font-semibold'>
|
|
||||||
{(() => {
|
|
||||||
const currentProgress = isPdfExportLoading
|
|
||||||
? pdfProgress
|
|
||||||
: excelProgress;
|
|
||||||
const exportType = isPdfExportLoading ? 'PDF' : 'Excel';
|
|
||||||
|
|
||||||
if (currentProgress < 20)
|
|
||||||
return 'Mengambil data dari server...';
|
|
||||||
if (currentProgress < 30) return 'Memproses data laporan...';
|
|
||||||
if (currentProgress < 40)
|
|
||||||
return `Menyiapkan struktur dokumen ${exportType}...`;
|
|
||||||
if (currentProgress < 50)
|
|
||||||
return 'Mengelompokkan data per supplier...';
|
|
||||||
if (currentProgress < 70)
|
|
||||||
return 'Merender tabel dan kalkulasi...';
|
|
||||||
if (currentProgress < 96)
|
|
||||||
return `Memformat dokumen ${exportType}...`;
|
|
||||||
if (currentProgress < 100)
|
|
||||||
return 'Menyelesaikan dan mengunduh...';
|
|
||||||
return 'Selesai!';
|
|
||||||
})()}{' '}
|
|
||||||
{Math.round(isPdfExportLoading ? pdfProgress : excelProgress)}%
|
|
||||||
</div>
|
|
||||||
{((isPdfExportLoading && pdfProgress >= 35 && pdfProgress < 90) ||
|
|
||||||
(isExcelExportLoading &&
|
|
||||||
excelProgress >= 35 &&
|
|
||||||
excelProgress < 90)) && (
|
|
||||||
<div className='text-xs text-gray-500 mt-1'>
|
|
||||||
{(isPdfExportLoading ? pdfProgress : excelProgress) < 96
|
|
||||||
? 'Proses ini membutuhkan waktu lebih lama untuk data dalam jumlah besar. Mohon bersabar...'
|
|
||||||
: 'Sedang memproses baris data. Hampir selesai...'}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<Card
|
|
||||||
title='Laporan Biaya Operasional'
|
|
||||||
variant='bordered'
|
|
||||||
className={{
|
|
||||||
wrapper: 'w-full',
|
|
||||||
}}
|
|
||||||
footer={
|
|
||||||
<div className='flex flex-col gap-6'>
|
|
||||||
<div className='flex flex-row items-center justify-end gap-2'>
|
|
||||||
<div className='flex flex-row items-center gap-2'>
|
|
||||||
<Button className='min-w-24' onClick={handleSubmit}>
|
|
||||||
Cari
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
className='min-w-24'
|
|
||||||
color='warning'
|
|
||||||
onClick={resetFilters}
|
|
||||||
>
|
|
||||||
Reset
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Dropdown
|
|
||||||
trigger={
|
|
||||||
<Button
|
|
||||||
color='success'
|
|
||||||
className='min-w-24'
|
|
||||||
isLoading={isAnyExportLoading}
|
|
||||||
onClick={() => {
|
|
||||||
setDropdownOpen(!dropdownOpen);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Export
|
|
||||||
</Button>
|
|
||||||
}
|
|
||||||
align='end'
|
|
||||||
direction='bottom'
|
|
||||||
open={dropdownOpen}
|
|
||||||
>
|
|
||||||
<Menu className='w-32'>
|
|
||||||
<MenuItem title='Excel' onClick={handleExportExcel} />
|
|
||||||
<MenuItem title='PDF' onClick={handleExportPdf} />
|
|
||||||
</Menu>
|
|
||||||
</Dropdown>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<div className='grid grid-cols-2 md:grid-cols-4 gap-4'>
|
|
||||||
<SelectInput
|
|
||||||
isClearable
|
|
||||||
label='Lokasi'
|
|
||||||
options={locationOptions}
|
|
||||||
isLoading={isLoadingLocationOptions}
|
|
||||||
placeholder='Lokasi'
|
|
||||||
value={selectedLocation}
|
|
||||||
onChange={locationChangeHandler}
|
|
||||||
onInputChange={setLocationInputValue}
|
|
||||||
onMenuScrollToBottom={loadMoreLocations}
|
|
||||||
/>
|
|
||||||
<SelectInput
|
|
||||||
isClearable
|
|
||||||
label='Kandang'
|
|
||||||
options={kandangOptions}
|
|
||||||
isLoading={isLoadingKandangOptions}
|
|
||||||
placeholder='Kandang'
|
|
||||||
value={selectedKandang}
|
|
||||||
onChange={kandangChangeHandler}
|
|
||||||
onInputChange={setKandangInputValue}
|
|
||||||
onMenuScrollToBottom={loadMoreKandangs}
|
|
||||||
/>
|
|
||||||
<SelectInput
|
|
||||||
isClearable
|
|
||||||
label='Supplier'
|
|
||||||
options={supplierOptions}
|
|
||||||
isLoading={isLoadingSupplierOptions}
|
|
||||||
placeholder='Supplier'
|
|
||||||
value={selectedSupplier}
|
|
||||||
onChange={supplierChangeHandler}
|
|
||||||
onInputChange={setSupplierInputValue}
|
|
||||||
onMenuScrollToBottom={loadMoreSuppliers}
|
|
||||||
/>
|
|
||||||
<SelectInput
|
|
||||||
isClearable
|
|
||||||
label='Produk'
|
|
||||||
options={nonstockOptions}
|
|
||||||
isLoading={isLoadingNonstockOptions}
|
|
||||||
placeholder='Produk'
|
|
||||||
value={selectedNonstock}
|
|
||||||
onChange={nonstockChangeHandler}
|
|
||||||
onInputChange={setNonstockInputValue}
|
|
||||||
onMenuScrollToBottom={loadMoreNonstocks}
|
|
||||||
/>
|
|
||||||
<SelectInput
|
|
||||||
isClearable
|
|
||||||
label='Kategori'
|
|
||||||
options={categoryOptions}
|
|
||||||
placeholder='Kategori'
|
|
||||||
value={selectedCategory}
|
|
||||||
onChange={categoryChangeHandler}
|
|
||||||
/>
|
|
||||||
<DateInput
|
|
||||||
label='Tanggal Realisasi'
|
|
||||||
value={filterState.realization_date}
|
|
||||||
onChange={realizationDateChangeHandler}
|
|
||||||
name='realization_date'
|
|
||||||
placeholder='Tanggal Realisasi'
|
|
||||||
/>
|
|
||||||
<DebouncedTextInput
|
|
||||||
label='Cari'
|
|
||||||
name='search'
|
|
||||||
value={filterState.search}
|
|
||||||
onChange={searchChangeHandler}
|
|
||||||
placeholder='Cari'
|
|
||||||
startAdornment={<Icon icon='mdi:magnify' width={24} height={24} />}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* ===== TABLE CONTENT ===== */}
|
|
||||||
{!isSubmitted ? (
|
|
||||||
<div className='mt-6 text-center text-gray-500'>
|
|
||||||
Silakan pilih filter dan klik tombol Cari untuk menampilkan data.
|
|
||||||
</div>
|
|
||||||
) : isLoading ? (
|
|
||||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
|
||||||
<span className='loading loading-spinner loading-xl' />
|
|
||||||
</div>
|
|
||||||
) : data.length === 0 ? (
|
|
||||||
<div className='mt-6 text-center text-gray-500'>
|
|
||||||
Tidak ada data yang dapat ditampilkan...
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Table<ReportExpense>
|
|
||||||
columns={columns}
|
|
||||||
data={data}
|
|
||||||
pageSize={10}
|
|
||||||
className={{
|
|
||||||
containerClassName: 'mb-0',
|
|
||||||
headerRowClassName: cn(
|
|
||||||
TABLE_DEFAULT_STYLING,
|
|
||||||
'whitespace-nowrap'
|
|
||||||
),
|
|
||||||
bodyRowClassName: cn(TABLE_DEFAULT_STYLING, 'whitespace-nowrap'),
|
|
||||||
paginationClassName: 'hidden',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{meta && (
|
|
||||||
<div className='mt-6'>
|
|
||||||
<Pagination
|
|
||||||
currentPage={meta.page}
|
|
||||||
totalItems={meta.total_results}
|
|
||||||
onPageChange={handlePageChange}
|
|
||||||
onRowChange={handleRowChange}
|
|
||||||
onNextPage={handleNextPage}
|
|
||||||
onPrevPage={handlePrevPage}
|
|
||||||
rowOptions={[10, 25, 50, 100]}
|
|
||||||
itemsPerPage={meta.limit}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ReportExpenseTable;
|
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import Tabs from '@/components/Tabs';
|
||||||
|
|
||||||
|
import { useReportTabStore } from '@/stores/report/report-tab.store';
|
||||||
|
import ReportExpenseTab from './tab/ReportExpenseTab';
|
||||||
|
|
||||||
|
const ReportExpenseTabs = () => {
|
||||||
|
const [activeTabId, setActiveTabId] = useState<string>('1');
|
||||||
|
const tabActions = useReportTabStore((state) => state.tabActions);
|
||||||
|
|
||||||
|
const tabs = [
|
||||||
|
{
|
||||||
|
id: '1',
|
||||||
|
label: 'Laporan Biaya Operasional',
|
||||||
|
content: <ReportExpenseTab tabId={'1'} />,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className='w-full'>
|
||||||
|
<Tabs
|
||||||
|
tabs={tabs}
|
||||||
|
variant='boxed'
|
||||||
|
activeTabId={activeTabId}
|
||||||
|
onTabChange={setActiveTabId}
|
||||||
|
className={{
|
||||||
|
tabHeaderWrapper:
|
||||||
|
'justify-between items-center p-3 border-b border-base-content/10',
|
||||||
|
tab: 'w-fit',
|
||||||
|
content: 'p-0 m-0',
|
||||||
|
}}
|
||||||
|
sideContent={tabActions[activeTabId] || null}
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ReportExpenseTabs;
|
||||||
+1
@@ -2,6 +2,7 @@ import { ReportExpense } from '@/types/api/report/report-expense';
|
|||||||
import { formatCurrency, formatDate } from '@/lib/helper';
|
import { formatCurrency, formatDate } from '@/lib/helper';
|
||||||
import jsPDF from 'jspdf';
|
import jsPDF from 'jspdf';
|
||||||
import autoTable, { UserOptions } from 'jspdf-autotable';
|
import autoTable, { UserOptions } from 'jspdf-autotable';
|
||||||
|
|
||||||
interface jsPDFWithAutoTable extends jsPDF {
|
interface jsPDFWithAutoTable extends jsPDF {
|
||||||
lastAutoTable: {
|
lastAutoTable: {
|
||||||
finalY: number;
|
finalY: number;
|
||||||
@@ -0,0 +1,109 @@
|
|||||||
|
import * as XLSX from 'xlsx';
|
||||||
|
import { ReportExpense } from '@/types/api/report/report-expense';
|
||||||
|
import { formatCurrency, formatDate } from '@/lib/helper';
|
||||||
|
|
||||||
|
export const generateReportExpenseExcel = async (
|
||||||
|
data: ReportExpense[]
|
||||||
|
): Promise<void> => {
|
||||||
|
// Group by supplier
|
||||||
|
const groupedBySupplier: Record<string, ReportExpense[]> = {};
|
||||||
|
data.forEach((item) => {
|
||||||
|
const supplierName = item.supplier?.name || 'Unknown Supplier';
|
||||||
|
if (!groupedBySupplier[supplierName]) {
|
||||||
|
groupedBySupplier[supplierName] = [];
|
||||||
|
}
|
||||||
|
groupedBySupplier[supplierName].push(item);
|
||||||
|
});
|
||||||
|
|
||||||
|
const workbook = XLSX.utils.book_new();
|
||||||
|
|
||||||
|
Object.entries(groupedBySupplier).forEach(([supplierName, supplierData]) => {
|
||||||
|
const totals = supplierData.reduce(
|
||||||
|
(acc, item) => ({
|
||||||
|
qty_pengajuan: acc.qty_pengajuan + (item.pengajuan?.qty || 0),
|
||||||
|
total_pengajuan:
|
||||||
|
acc.total_pengajuan +
|
||||||
|
(item.pengajuan?.qty || 0) * (item.pengajuan?.price || 0),
|
||||||
|
qty_realisasi: acc.qty_realisasi + (item.realisasi?.qty || 0),
|
||||||
|
total_realisasi:
|
||||||
|
acc.total_realisasi +
|
||||||
|
(item.realisasi?.qty || 0) * (item.realisasi?.price || 0),
|
||||||
|
}),
|
||||||
|
{
|
||||||
|
qty_pengajuan: 0,
|
||||||
|
total_pengajuan: 0,
|
||||||
|
qty_realisasi: 0,
|
||||||
|
total_realisasi: 0,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const excelData = supplierData.map((item, index) => ({
|
||||||
|
No: index + 1,
|
||||||
|
'No. PO': item.po_number || '',
|
||||||
|
'No. Referensi': item.reference_number || '',
|
||||||
|
'Tanggal Realisasi': item.realization_date
|
||||||
|
? formatDate(item.realization_date, 'DD MMM YYYY')
|
||||||
|
: '',
|
||||||
|
'Tanggal Transaksi': item.transaction_date
|
||||||
|
? formatDate(item.transaction_date, 'DD MMM YYYY')
|
||||||
|
: '',
|
||||||
|
Kategori: item.category || '',
|
||||||
|
Produk: item.pengajuan?.nonstock?.name || '',
|
||||||
|
Lokasi: item.kandang?.location?.name || '',
|
||||||
|
Kandang: item.kandang?.name || '',
|
||||||
|
'Qty Pengajuan': item.pengajuan?.qty || 0,
|
||||||
|
'Harga Pengajuan': item.pengajuan?.price || 0,
|
||||||
|
'Total Pengajuan':
|
||||||
|
(item.pengajuan?.qty || 0) * (item.pengajuan?.price || 0),
|
||||||
|
'Qty Realisasi': item.realisasi?.qty || 0,
|
||||||
|
'Harga Realisasi': item.realisasi?.price || 0,
|
||||||
|
'Total Realisasi':
|
||||||
|
(item.realisasi?.qty || 0) * (item.realisasi?.price || 0),
|
||||||
|
'Status Pencairan': item.latest_approval?.step_name || '',
|
||||||
|
}));
|
||||||
|
|
||||||
|
excelData.push({
|
||||||
|
No: 'Total' as unknown as number,
|
||||||
|
'No. PO': '',
|
||||||
|
'No. Referensi': '',
|
||||||
|
'Tanggal Realisasi': '',
|
||||||
|
'Tanggal Transaksi': '',
|
||||||
|
Kategori: '',
|
||||||
|
Produk: '',
|
||||||
|
Lokasi: '',
|
||||||
|
Kandang: '',
|
||||||
|
'Qty Pengajuan': totals.qty_pengajuan,
|
||||||
|
'Harga Pengajuan': 0,
|
||||||
|
'Total Pengajuan': totals.total_pengajuan,
|
||||||
|
'Qty Realisasi': totals.qty_realisasi,
|
||||||
|
'Harga Realisasi': 0,
|
||||||
|
'Total Realisasi': totals.total_realisasi,
|
||||||
|
'Status Pencairan': '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const worksheet = XLSX.utils.json_to_sheet(excelData);
|
||||||
|
const colWidths = [
|
||||||
|
{ wch: 5 },
|
||||||
|
{ wch: 20 },
|
||||||
|
{ wch: 20 },
|
||||||
|
{ wch: 15 },
|
||||||
|
{ wch: 15 },
|
||||||
|
{ wch: 15 },
|
||||||
|
{ wch: 30 },
|
||||||
|
{ wch: 20 },
|
||||||
|
{ wch: 15 },
|
||||||
|
{ wch: 15 },
|
||||||
|
{ wch: 15 },
|
||||||
|
{ wch: 20 },
|
||||||
|
{ wch: 15 },
|
||||||
|
{ wch: 20 },
|
||||||
|
];
|
||||||
|
worksheet['!cols'] = colWidths;
|
||||||
|
|
||||||
|
const sheetName = supplierName.slice(0, 31);
|
||||||
|
XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
|
||||||
|
});
|
||||||
|
|
||||||
|
const filename = `Laporan-BOP-${formatDate(new Date(), 'YYYY-MM-DD-HHmm')}.xlsx`;
|
||||||
|
XLSX.writeFile(workbook, filename);
|
||||||
|
};
|
||||||
@@ -0,0 +1,73 @@
|
|||||||
|
import { OptionType } from '@/components/input/SelectInput';
|
||||||
|
import * as yup from 'yup';
|
||||||
|
|
||||||
|
export type ReportExpenseFilterProps = {
|
||||||
|
location_id: string | null;
|
||||||
|
supplier_id: string | null;
|
||||||
|
kandang_id: string | null;
|
||||||
|
nonstock_id: string | null;
|
||||||
|
realization_date: string | null;
|
||||||
|
category: string | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type ReportExpenseFilterFormType = {
|
||||||
|
location_id: OptionType | null;
|
||||||
|
supplier_id: OptionType | null;
|
||||||
|
kandang_id: OptionType | null;
|
||||||
|
nonstock_id: OptionType | null;
|
||||||
|
realization_date: string | null;
|
||||||
|
category: OptionType | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ReportExpenseFilterSchema = yup.object({
|
||||||
|
location_id: yup
|
||||||
|
.mixed<OptionType>()
|
||||||
|
.nullable()
|
||||||
|
.test('is-not-empty', 'Lokasi wajib dipilih', (value) => {
|
||||||
|
if (Array.isArray(value)) {
|
||||||
|
return value.length > 0;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}),
|
||||||
|
supplier_id: yup
|
||||||
|
.mixed<OptionType>()
|
||||||
|
.nullable()
|
||||||
|
.test('is-not-empty', 'Supplier wajib dipilih', (value) => {
|
||||||
|
if (Array.isArray(value)) {
|
||||||
|
return value.length > 0;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}),
|
||||||
|
kandang_id: yup
|
||||||
|
.mixed<OptionType>()
|
||||||
|
.nullable()
|
||||||
|
.test('is-not-empty', 'Kandang wajib dipilih', (value) => {
|
||||||
|
if (Array.isArray(value)) {
|
||||||
|
return value.length > 0;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}),
|
||||||
|
nonstock_id: yup
|
||||||
|
.mixed<OptionType>()
|
||||||
|
.nullable()
|
||||||
|
.test('is-not-empty', 'Produk wajib dipilih', (value) => {
|
||||||
|
if (Array.isArray(value)) {
|
||||||
|
return value.length > 0;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}),
|
||||||
|
realization_date: yup.string().nullable(),
|
||||||
|
category: yup
|
||||||
|
.mixed<OptionType>()
|
||||||
|
.nullable()
|
||||||
|
.test('is-not-empty', 'Kategori wajib dipilih', (value) => {
|
||||||
|
if (Array.isArray(value)) {
|
||||||
|
return value.length > 0;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
}),
|
||||||
|
}) as yup.ObjectSchema<ReportExpenseFilterFormType>;
|
||||||
|
|
||||||
|
export type ReportExpenseFilterValues = yup.InferType<
|
||||||
|
typeof ReportExpenseFilterSchema
|
||||||
|
>;
|
||||||
@@ -1,365 +0,0 @@
|
|||||||
import { StyleSheet } from '@react-pdf/renderer';
|
|
||||||
|
|
||||||
const pdfStyles = StyleSheet.create({
|
|
||||||
page: {
|
|
||||||
fontSize: 18,
|
|
||||||
fontFamily: 'Helvetica',
|
|
||||||
padding: 20,
|
|
||||||
backgroundColor: '#FFFFFF',
|
|
||||||
},
|
|
||||||
header: {
|
|
||||||
marginBottom: 20,
|
|
||||||
},
|
|
||||||
logo: {
|
|
||||||
width: 120,
|
|
||||||
height: 30,
|
|
||||||
marginBottom: 8,
|
|
||||||
},
|
|
||||||
companyInfo: {
|
|
||||||
fontSize: 18,
|
|
||||||
fontWeight: 'bold',
|
|
||||||
marginBottom: 4,
|
|
||||||
color: '#1f74bf',
|
|
||||||
},
|
|
||||||
address: {
|
|
||||||
fontSize: 7,
|
|
||||||
color: '#666666',
|
|
||||||
maxWidth: 400,
|
|
||||||
marginBottom: 10,
|
|
||||||
},
|
|
||||||
divider: {
|
|
||||||
borderBottomWidth: 1,
|
|
||||||
borderBottomColor: '#000000',
|
|
||||||
borderBottomStyle: 'solid',
|
|
||||||
marginBottom: 15,
|
|
||||||
},
|
|
||||||
titleSection: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
marginBottom: 20,
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'flex-start',
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
fontSize: 18,
|
|
||||||
fontWeight: 'bold',
|
|
||||||
flex: 3,
|
|
||||||
color: '#1f74bf',
|
|
||||||
},
|
|
||||||
poInfo: {
|
|
||||||
flex: 1,
|
|
||||||
fontSize: 7,
|
|
||||||
textAlign: 'right',
|
|
||||||
},
|
|
||||||
sectionTitle: {
|
|
||||||
fontSize: 14,
|
|
||||||
fontWeight: 'bold',
|
|
||||||
marginBottom: 8,
|
|
||||||
color: '#1f74bf',
|
|
||||||
},
|
|
||||||
table: {
|
|
||||||
borderWidth: 1,
|
|
||||||
borderColor: '#000000',
|
|
||||||
marginBottom: 15,
|
|
||||||
},
|
|
||||||
tableRow: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
},
|
|
||||||
tableHeader: {
|
|
||||||
backgroundColor: '#F5F5F5',
|
|
||||||
},
|
|
||||||
tableCell: {
|
|
||||||
flex: 1,
|
|
||||||
borderRightWidth: 1,
|
|
||||||
borderRightColor: '#000000',
|
|
||||||
borderRightStyle: 'solid',
|
|
||||||
padding: 3,
|
|
||||||
fontSize: 7,
|
|
||||||
},
|
|
||||||
tableCellLast: {
|
|
||||||
flex: 1,
|
|
||||||
padding: 3,
|
|
||||||
fontSize: 7,
|
|
||||||
},
|
|
||||||
tableCellHeader: {
|
|
||||||
flex: 1,
|
|
||||||
borderRightWidth: 1,
|
|
||||||
borderRightColor: '#000000',
|
|
||||||
borderRightStyle: 'solid',
|
|
||||||
padding: 3,
|
|
||||||
fontSize: 7,
|
|
||||||
fontWeight: 'bold',
|
|
||||||
backgroundColor: '#F5F5F5',
|
|
||||||
},
|
|
||||||
tableCellHeaderLast: {
|
|
||||||
flex: 1,
|
|
||||||
padding: 3,
|
|
||||||
fontSize: 7,
|
|
||||||
fontWeight: 'bold',
|
|
||||||
backgroundColor: '#F5F5F5',
|
|
||||||
},
|
|
||||||
tableCellRight: {
|
|
||||||
flex: 1,
|
|
||||||
borderRightWidth: 1,
|
|
||||||
borderRightColor: '#000000',
|
|
||||||
borderRightStyle: 'solid',
|
|
||||||
padding: 3,
|
|
||||||
fontSize: 7,
|
|
||||||
textAlign: 'right',
|
|
||||||
},
|
|
||||||
tableCellRightLast: {
|
|
||||||
flex: 1,
|
|
||||||
padding: 3,
|
|
||||||
fontSize: 7,
|
|
||||||
textAlign: 'right',
|
|
||||||
},
|
|
||||||
tableCellNarrow: {
|
|
||||||
width: '1%',
|
|
||||||
minWidth: 20,
|
|
||||||
borderRightWidth: 1,
|
|
||||||
borderRightColor: '#000000',
|
|
||||||
borderRightStyle: 'solid',
|
|
||||||
padding: 3,
|
|
||||||
fontSize: 7,
|
|
||||||
textAlign: 'center',
|
|
||||||
},
|
|
||||||
tableCellNarrowHeader: {
|
|
||||||
width: '1%',
|
|
||||||
minWidth: 20,
|
|
||||||
borderRightWidth: 1,
|
|
||||||
borderRightColor: '#000000',
|
|
||||||
borderRightStyle: 'solid',
|
|
||||||
padding: 3,
|
|
||||||
fontSize: 7,
|
|
||||||
fontWeight: 'bold',
|
|
||||||
backgroundColor: '#F5F5F5',
|
|
||||||
textAlign: 'center',
|
|
||||||
},
|
|
||||||
tableCellWrap: {
|
|
||||||
flex: 1,
|
|
||||||
maxWidth: 80,
|
|
||||||
borderRightWidth: 1,
|
|
||||||
borderRightColor: '#000000',
|
|
||||||
borderRightStyle: 'solid',
|
|
||||||
padding: 3,
|
|
||||||
fontSize: 7,
|
|
||||||
flexWrap: 'wrap',
|
|
||||||
},
|
|
||||||
tableCellWrapHeader: {
|
|
||||||
flex: 1,
|
|
||||||
maxWidth: 80,
|
|
||||||
borderRightWidth: 1,
|
|
||||||
borderRightColor: '#000000',
|
|
||||||
borderRightStyle: 'solid',
|
|
||||||
padding: 3,
|
|
||||||
fontSize: 7,
|
|
||||||
fontWeight: 'bold',
|
|
||||||
backgroundColor: '#F5F5F5',
|
|
||||||
},
|
|
||||||
// Nested header styles
|
|
||||||
tableHeaderGroup: {
|
|
||||||
borderRightWidth: 1,
|
|
||||||
borderRightColor: '#000000',
|
|
||||||
borderRightStyle: 'solid',
|
|
||||||
borderBottomWidth: 1,
|
|
||||||
borderBottomColor: '#000000',
|
|
||||||
borderBottomStyle: 'solid',
|
|
||||||
backgroundColor: '#F5F5F5',
|
|
||||||
},
|
|
||||||
tableHeaderGroupLast: {
|
|
||||||
borderBottomWidth: 1,
|
|
||||||
borderBottomColor: '#000000',
|
|
||||||
borderBottomStyle: 'solid',
|
|
||||||
backgroundColor: '#F5F5F5',
|
|
||||||
},
|
|
||||||
tableHeaderGroupTitle: {
|
|
||||||
padding: 3,
|
|
||||||
fontSize: 7,
|
|
||||||
fontWeight: 'bold',
|
|
||||||
textAlign: 'center',
|
|
||||||
borderBottomWidth: 1,
|
|
||||||
borderBottomColor: '#000000',
|
|
||||||
borderBottomStyle: 'solid',
|
|
||||||
},
|
|
||||||
tableSubHeaderRow: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
},
|
|
||||||
// Specific width columns
|
|
||||||
tableCellXSmall: {
|
|
||||||
width: 30,
|
|
||||||
borderRightWidth: 1,
|
|
||||||
borderRightColor: '#000000',
|
|
||||||
borderRightStyle: 'solid',
|
|
||||||
padding: 3,
|
|
||||||
fontSize: 7,
|
|
||||||
},
|
|
||||||
tableCellXSmallHeader: {
|
|
||||||
width: 30,
|
|
||||||
borderRightWidth: 1,
|
|
||||||
borderRightColor: '#000000',
|
|
||||||
borderRightStyle: 'solid',
|
|
||||||
padding: 3,
|
|
||||||
fontSize: 7,
|
|
||||||
fontWeight: 'bold',
|
|
||||||
backgroundColor: '#F5F5F5',
|
|
||||||
},
|
|
||||||
tableCellSmall: {
|
|
||||||
width: 40,
|
|
||||||
borderRightWidth: 1,
|
|
||||||
borderRightColor: '#000000',
|
|
||||||
borderRightStyle: 'solid',
|
|
||||||
padding: 3,
|
|
||||||
fontSize: 7,
|
|
||||||
},
|
|
||||||
tableCellSmallHeader: {
|
|
||||||
width: 40,
|
|
||||||
borderRightWidth: 1,
|
|
||||||
borderRightColor: '#000000',
|
|
||||||
borderRightStyle: 'solid',
|
|
||||||
padding: 3,
|
|
||||||
fontSize: 7,
|
|
||||||
fontWeight: 'bold',
|
|
||||||
backgroundColor: '#F5F5F5',
|
|
||||||
},
|
|
||||||
tableCellMedium: {
|
|
||||||
width: 60,
|
|
||||||
borderRightWidth: 1,
|
|
||||||
borderRightColor: '#000000',
|
|
||||||
borderRightStyle: 'solid',
|
|
||||||
padding: 3,
|
|
||||||
fontSize: 7,
|
|
||||||
},
|
|
||||||
tableCellMediumHeader: {
|
|
||||||
width: 60,
|
|
||||||
borderRightWidth: 1,
|
|
||||||
borderRightColor: '#000000',
|
|
||||||
borderRightStyle: 'solid',
|
|
||||||
padding: 3,
|
|
||||||
fontSize: 7,
|
|
||||||
fontWeight: 'bold',
|
|
||||||
backgroundColor: '#F5F5F5',
|
|
||||||
},
|
|
||||||
tableCellRightXSmall: {
|
|
||||||
width: 30,
|
|
||||||
borderRightWidth: 1,
|
|
||||||
borderRightColor: '#000000',
|
|
||||||
borderRightStyle: 'solid',
|
|
||||||
padding: 3,
|
|
||||||
fontSize: 7,
|
|
||||||
textAlign: 'right',
|
|
||||||
},
|
|
||||||
tableCellRightSmall: {
|
|
||||||
width: 40,
|
|
||||||
borderRightWidth: 1,
|
|
||||||
borderRightColor: '#000000',
|
|
||||||
borderRightStyle: 'solid',
|
|
||||||
padding: 3,
|
|
||||||
fontSize: 7,
|
|
||||||
textAlign: 'right',
|
|
||||||
},
|
|
||||||
tableCellRightMedium: {
|
|
||||||
width: 60,
|
|
||||||
borderRightWidth: 1,
|
|
||||||
borderRightColor: '#000000',
|
|
||||||
borderRightStyle: 'solid',
|
|
||||||
padding: 3,
|
|
||||||
fontSize: 7,
|
|
||||||
textAlign: 'right',
|
|
||||||
},
|
|
||||||
tableBorderBottom: {
|
|
||||||
borderBottomWidth: 1,
|
|
||||||
borderBottomColor: '#000000',
|
|
||||||
borderBottomStyle: 'solid',
|
|
||||||
},
|
|
||||||
grandTotalRow: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
borderTopWidth: 1,
|
|
||||||
borderTopColor: '#000000',
|
|
||||||
borderTopStyle: 'solid',
|
|
||||||
},
|
|
||||||
grandTotalLabel: {
|
|
||||||
flex: 3,
|
|
||||||
padding: 3,
|
|
||||||
fontSize: 7,
|
|
||||||
fontWeight: 'bold',
|
|
||||||
textAlign: 'right',
|
|
||||||
borderRightWidth: 1,
|
|
||||||
borderRightColor: '#000000',
|
|
||||||
borderRightStyle: 'solid',
|
|
||||||
},
|
|
||||||
grandTotalValue: {
|
|
||||||
flex: 1,
|
|
||||||
padding: 3,
|
|
||||||
fontSize: 7,
|
|
||||||
fontWeight: 'bold',
|
|
||||||
textAlign: 'right',
|
|
||||||
borderRightWidth: 0,
|
|
||||||
},
|
|
||||||
allocationSection: {
|
|
||||||
marginBottom: 8,
|
|
||||||
},
|
|
||||||
allocationTable: {
|
|
||||||
borderWidth: 1,
|
|
||||||
borderColor: '#000000',
|
|
||||||
},
|
|
||||||
innerTable: {
|
|
||||||
marginTop: 5,
|
|
||||||
borderWidth: 1,
|
|
||||||
borderColor: '#000000',
|
|
||||||
},
|
|
||||||
innerRow: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
borderBottomWidth: 1,
|
|
||||||
borderBottomColor: '#000000',
|
|
||||||
borderBottomStyle: 'solid',
|
|
||||||
},
|
|
||||||
innerCell: {
|
|
||||||
flex: 1,
|
|
||||||
borderRightWidth: 1,
|
|
||||||
borderRightColor: '#000000',
|
|
||||||
borderRightStyle: 'solid',
|
|
||||||
padding: 3,
|
|
||||||
fontSize: 7,
|
|
||||||
},
|
|
||||||
innerCellLast: {
|
|
||||||
flex: 1,
|
|
||||||
padding: 3,
|
|
||||||
fontSize: 7,
|
|
||||||
},
|
|
||||||
innerCellRight: {
|
|
||||||
flex: 1,
|
|
||||||
borderRightWidth: 1,
|
|
||||||
borderRightColor: '#000000',
|
|
||||||
borderRightStyle: 'solid',
|
|
||||||
padding: 3,
|
|
||||||
fontSize: 7,
|
|
||||||
textAlign: 'right',
|
|
||||||
},
|
|
||||||
innerCellRightLast: {
|
|
||||||
flex: 1,
|
|
||||||
padding: 3,
|
|
||||||
fontSize: 7,
|
|
||||||
textAlign: 'right',
|
|
||||||
},
|
|
||||||
footer: {
|
|
||||||
marginTop: 30,
|
|
||||||
flexDirection: 'row',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'flex-start',
|
|
||||||
},
|
|
||||||
footerCompany: {
|
|
||||||
fontSize: 18,
|
|
||||||
fontWeight: 'bold',
|
|
||||||
textAlign: 'right',
|
|
||||||
flex: 1,
|
|
||||||
color: '#1f74bf',
|
|
||||||
},
|
|
||||||
specialInstructionTable: {
|
|
||||||
width: '60%',
|
|
||||||
maxWidth: 300,
|
|
||||||
borderWidth: 1,
|
|
||||||
borderColor: '#000000',
|
|
||||||
flex: 1,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export default pdfStyles;
|
|
||||||
@@ -0,0 +1,51 @@
|
|||||||
|
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>
|
||||||
|
| {
|
||||||
|
header: string;
|
||||||
|
columns: Array<{
|
||||||
|
header: string;
|
||||||
|
accessorKey?: string;
|
||||||
|
cell?: (props: {
|
||||||
|
row: { original: ReportExpense };
|
||||||
|
}) => React.ReactNode;
|
||||||
|
}>;
|
||||||
|
};
|
||||||
|
|
||||||
|
const ReportExpenseSkeleton = ({
|
||||||
|
columns,
|
||||||
|
icon,
|
||||||
|
title,
|
||||||
|
subtitle,
|
||||||
|
}: {
|
||||||
|
columns: ReportExpenseColumn[];
|
||||||
|
icon: React.ReactNode;
|
||||||
|
title: string;
|
||||||
|
subtitle: string;
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className='relative size-full'>
|
||||||
|
<Table
|
||||||
|
data={[]}
|
||||||
|
columns={columns}
|
||||||
|
isLoading={true}
|
||||||
|
className={{
|
||||||
|
skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
|
||||||
|
headerColumnClassName: 'whitespace-nowrap',
|
||||||
|
containerClassName: 'mb-0 overflow-hidden',
|
||||||
|
tableWrapperClassName: 'overflow-hidden',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div className='absolute inset-0 flex items-center justify-center'>
|
||||||
|
<DataStateSkeleton icon={icon} title={title} description={subtitle} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ReportExpenseSkeleton;
|
||||||
@@ -0,0 +1,755 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import React, { useState, useCallback, useEffect, useMemo } from 'react';
|
||||||
|
import useSWR from 'swr';
|
||||||
|
import { Icon } from '@iconify/react';
|
||||||
|
import Button from '@/components/Button';
|
||||||
|
import Dropdown from '@/components/dropdown/Dropdown';
|
||||||
|
import SelectInput, { useSelect } from '@/components/input/SelectInput';
|
||||||
|
import DateInput from '@/components/input/DateInput';
|
||||||
|
import { useFormik } from 'formik';
|
||||||
|
import {
|
||||||
|
ReportExpenseFilterSchema,
|
||||||
|
type ReportExpenseFilterValues,
|
||||||
|
} from '@/components/pages/report/expense/filter/ReportExpenseFilter';
|
||||||
|
import ExpenseStatusBadge from '@/components/pages/expense/ExpenseStatusBadge';
|
||||||
|
import RealizationStatusBadge from '@/components/pages/expense/RealizationStatusBadge';
|
||||||
|
import Table from '@/components/Table';
|
||||||
|
import { cn, formatCurrency, formatDate } from '@/lib/helper';
|
||||||
|
import { ReportExpense } from '@/types/api/report/report-expense';
|
||||||
|
import { ReportExpenseApi } from '@/services/api/report';
|
||||||
|
import { isResponseSuccess } from '@/lib/api-helper';
|
||||||
|
import { useReportTabStore } from '@/stores/report/report-tab.store';
|
||||||
|
import Modal, { useModal } from '@/components/Modal';
|
||||||
|
import Pagination from '@/components/Pagination';
|
||||||
|
import ReportExpenseSkeleton from '@/components/pages/report/expense/skeleton/ReportExpenseSkeleton';
|
||||||
|
import { generateReportExpensePDF } from '../export/ReportExpenseExportPDF';
|
||||||
|
import { generateReportExpenseExcel } from '../export/ReportExpenseExportXLSX';
|
||||||
|
import toast from 'react-hot-toast';
|
||||||
|
import {
|
||||||
|
KandangApi,
|
||||||
|
LocationApi,
|
||||||
|
NonstockApi,
|
||||||
|
SupplierApi,
|
||||||
|
} from '@/services/api/master-data';
|
||||||
|
import { Supplier } from '@/types/api/master-data/supplier';
|
||||||
|
import { Kandang } from '@/types/api/master-data/kandang';
|
||||||
|
import { Nonstock } from '@/types/api/master-data/nonstock';
|
||||||
|
import { ColumnDef } from '@tanstack/react-table';
|
||||||
|
import { httpClient } from '@/services/http/client';
|
||||||
|
import { BaseApiResponse } from '@/types/api/api-general';
|
||||||
|
|
||||||
|
interface ReportExpenseTabProps {
|
||||||
|
tabId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FilterParams {
|
||||||
|
location_id?: string;
|
||||||
|
supplier_id?: string;
|
||||||
|
kandang_id?: string;
|
||||||
|
nonstock_id?: string;
|
||||||
|
realization_date?: string;
|
||||||
|
category?: string;
|
||||||
|
search?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ReportExpenseTab = ({ tabId }: ReportExpenseTabProps) => {
|
||||||
|
// ===== STATE MANAGEMENT =====
|
||||||
|
const [isPdfExportLoading, setIsPdfExportLoading] = useState(false);
|
||||||
|
const [isExcelExportLoading, setIsExcelExportLoading] = useState(false);
|
||||||
|
const isAnyExportLoading = isPdfExportLoading || isExcelExportLoading;
|
||||||
|
|
||||||
|
// ===== SUBMISSION STATE =====
|
||||||
|
const [isSubmitted, setIsSubmitted] = useState(false);
|
||||||
|
const [filterParams, setFilterParams] = useState<FilterParams>({});
|
||||||
|
|
||||||
|
// ===== PAGINATION STATE =====
|
||||||
|
const [page, setPage] = useState(1);
|
||||||
|
const [pageSize, setPageSize] = useState(10);
|
||||||
|
|
||||||
|
const filterModal = useModal();
|
||||||
|
|
||||||
|
// ===== OPTIONS =====
|
||||||
|
const {
|
||||||
|
setInputValue: setLocationInputValue,
|
||||||
|
options: locationOptions,
|
||||||
|
isLoadingOptions: isLoadingLocations,
|
||||||
|
loadMore: loadMoreLocations,
|
||||||
|
} = useSelect<Kandang>(LocationApi.basePath, 'id', 'name', 'search');
|
||||||
|
|
||||||
|
const {
|
||||||
|
setInputValue: setSupplierInputValue,
|
||||||
|
options: supplierOptions,
|
||||||
|
isLoadingOptions: isLoadingSuppliers,
|
||||||
|
loadMore: loadMoreSuppliers,
|
||||||
|
} = useSelect<Supplier>(SupplierApi.basePath, 'id', 'name', 'search');
|
||||||
|
|
||||||
|
const {
|
||||||
|
setInputValue: setKandangInputValue,
|
||||||
|
options: kandangOptions,
|
||||||
|
isLoadingOptions: isLoadingKandangs,
|
||||||
|
loadMore: loadMoreKandangs,
|
||||||
|
} = useSelect<Kandang>(KandangApi.basePath, 'id', 'name', 'search');
|
||||||
|
|
||||||
|
const {
|
||||||
|
setInputValue: setNonstockInputValue,
|
||||||
|
options: nonstockOptions,
|
||||||
|
isLoadingOptions: isLoadingNonstocks,
|
||||||
|
loadMore: loadMoreNonstocks,
|
||||||
|
} = useSelect<Nonstock>(NonstockApi.basePath, 'id', 'name', 'search');
|
||||||
|
|
||||||
|
const categoryOptions = useMemo(
|
||||||
|
() => [
|
||||||
|
{ value: 'BOP', label: 'BOP' },
|
||||||
|
{ value: 'NON-BOP', label: 'Non BOP' },
|
||||||
|
],
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
// ===== FORMIK SETUP =====
|
||||||
|
const formik = useFormik<ReportExpenseFilterValues>({
|
||||||
|
initialValues: {
|
||||||
|
location_id: null,
|
||||||
|
supplier_id: null,
|
||||||
|
kandang_id: null,
|
||||||
|
nonstock_id: null,
|
||||||
|
realization_date: null,
|
||||||
|
category: null,
|
||||||
|
},
|
||||||
|
validationSchema: ReportExpenseFilterSchema,
|
||||||
|
onSubmit: (values) => {
|
||||||
|
setFilterParams({
|
||||||
|
location_id: values.location_id?.value
|
||||||
|
? String(values.location_id.value)
|
||||||
|
: undefined,
|
||||||
|
supplier_id: values.supplier_id?.value
|
||||||
|
? String(values.supplier_id.value)
|
||||||
|
: undefined,
|
||||||
|
kandang_id: values.kandang_id?.value
|
||||||
|
? String(values.kandang_id.value)
|
||||||
|
: undefined,
|
||||||
|
nonstock_id: values.nonstock_id?.value
|
||||||
|
? String(values.nonstock_id.value)
|
||||||
|
: undefined,
|
||||||
|
realization_date: values.realization_date || undefined,
|
||||||
|
category: values.category?.value
|
||||||
|
? String(values.category.value)
|
||||||
|
: undefined,
|
||||||
|
});
|
||||||
|
filterModal.closeModal();
|
||||||
|
setIsSubmitted(true);
|
||||||
|
setPage(1);
|
||||||
|
},
|
||||||
|
onReset: () => {
|
||||||
|
setFilterParams({});
|
||||||
|
setIsSubmitted(false);
|
||||||
|
setPage(1);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// ===== FILTER VALUES =====
|
||||||
|
const locationValue = useMemo(
|
||||||
|
() => formik.values.location_id,
|
||||||
|
[formik.values.location_id]
|
||||||
|
);
|
||||||
|
const supplierValue = useMemo(
|
||||||
|
() => formik.values.supplier_id,
|
||||||
|
[formik.values.supplier_id]
|
||||||
|
);
|
||||||
|
const kandangValue = useMemo(
|
||||||
|
() => formik.values.kandang_id,
|
||||||
|
[formik.values.kandang_id]
|
||||||
|
);
|
||||||
|
const nonstockValue = useMemo(
|
||||||
|
() => formik.values.nonstock_id,
|
||||||
|
[formik.values.nonstock_id]
|
||||||
|
);
|
||||||
|
const categoryValue = useMemo(
|
||||||
|
() => formik.values.category,
|
||||||
|
[formik.values.category]
|
||||||
|
);
|
||||||
|
|
||||||
|
// ===== ACTIVE FILTERS COUNT =====
|
||||||
|
const activeFiltersCount = useMemo(() => {
|
||||||
|
let count = 0;
|
||||||
|
if (filterParams.location_id) count += 1;
|
||||||
|
if (filterParams.supplier_id) count += 1;
|
||||||
|
if (filterParams.kandang_id) count += 1;
|
||||||
|
if (filterParams.nonstock_id) count += 1;
|
||||||
|
if (filterParams.realization_date) count += 1;
|
||||||
|
if (filterParams.category) count += 1;
|
||||||
|
return count;
|
||||||
|
}, [filterParams]);
|
||||||
|
|
||||||
|
const hasFilters = activeFiltersCount > 0;
|
||||||
|
|
||||||
|
// ===== DATA FETCHING =====
|
||||||
|
const { data: reportExpenseResponse, isLoading } = useSWR(
|
||||||
|
isSubmitted
|
||||||
|
? () => {
|
||||||
|
const params = new URLSearchParams();
|
||||||
|
if (filterParams.location_id)
|
||||||
|
params.append('location_id', filterParams.location_id);
|
||||||
|
if (filterParams.supplier_id)
|
||||||
|
params.append('supplier_id', filterParams.supplier_id);
|
||||||
|
if (filterParams.kandang_id)
|
||||||
|
params.append('kandang_id', filterParams.kandang_id);
|
||||||
|
if (filterParams.nonstock_id)
|
||||||
|
params.append('nonstock_id', filterParams.nonstock_id);
|
||||||
|
if (filterParams.realization_date)
|
||||||
|
params.append('realization_date', filterParams.realization_date);
|
||||||
|
if (filterParams.category)
|
||||||
|
params.append('category', filterParams.category);
|
||||||
|
params.append('page', String(page));
|
||||||
|
params.append('limit', String(pageSize));
|
||||||
|
|
||||||
|
return [`${ReportExpenseApi.basePath}?${params.toString()}`];
|
||||||
|
}
|
||||||
|
: null,
|
||||||
|
([url]: string[]) => httpClient<BaseApiResponse<ReportExpense[]>>(url)
|
||||||
|
);
|
||||||
|
|
||||||
|
const data: ReportExpense[] = useMemo(
|
||||||
|
() =>
|
||||||
|
isResponseSuccess(reportExpenseResponse)
|
||||||
|
? (reportExpenseResponse.data as ReportExpense[]) || []
|
||||||
|
: [],
|
||||||
|
[reportExpenseResponse]
|
||||||
|
);
|
||||||
|
|
||||||
|
const meta = useMemo(
|
||||||
|
() =>
|
||||||
|
isResponseSuccess(reportExpenseResponse) && reportExpenseResponse.meta
|
||||||
|
? reportExpenseResponse.meta
|
||||||
|
: null,
|
||||||
|
[reportExpenseResponse]
|
||||||
|
);
|
||||||
|
|
||||||
|
// ===== EXPORT DATA FETCHER =====
|
||||||
|
const reportExpenseExport = useCallback(async (): Promise<
|
||||||
|
ReportExpense[] | null
|
||||||
|
> => {
|
||||||
|
const params = new URLSearchParams();
|
||||||
|
if (filterParams.location_id)
|
||||||
|
params.append('location_id', filterParams.location_id);
|
||||||
|
if (filterParams.supplier_id)
|
||||||
|
params.append('supplier_id', filterParams.supplier_id);
|
||||||
|
if (filterParams.kandang_id)
|
||||||
|
params.append('kandang_id', filterParams.kandang_id);
|
||||||
|
if (filterParams.nonstock_id)
|
||||||
|
params.append('nonstock_id', filterParams.nonstock_id);
|
||||||
|
if (filterParams.realization_date)
|
||||||
|
params.append('realization_date', filterParams.realization_date);
|
||||||
|
if (filterParams.category) params.append('category', filterParams.category);
|
||||||
|
params.append('limit', '100');
|
||||||
|
params.append('page', '1');
|
||||||
|
|
||||||
|
const response = await httpClient<BaseApiResponse<ReportExpense[]>>(
|
||||||
|
`${ReportExpenseApi.basePath}?${params.toString()}`
|
||||||
|
);
|
||||||
|
|
||||||
|
return isResponseSuccess(response) ? response.data : null;
|
||||||
|
}, [filterParams]);
|
||||||
|
|
||||||
|
// ===== EXPORT HANDLERS =====
|
||||||
|
const handleExportExcel = useCallback(async () => {
|
||||||
|
setIsExcelExportLoading(true);
|
||||||
|
try {
|
||||||
|
const allDataForExport = await reportExpenseExport();
|
||||||
|
|
||||||
|
if (!allDataForExport || allDataForExport.length === 0) {
|
||||||
|
toast.error('Tidak ada data untuk diekspor.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
await generateReportExpenseExcel(allDataForExport);
|
||||||
|
toast.success('Excel berhasil dibuat dan diunduh.');
|
||||||
|
} catch {
|
||||||
|
toast.error('Gagal membuat Excel. Silakan coba lagi.');
|
||||||
|
} finally {
|
||||||
|
setIsExcelExportLoading(false);
|
||||||
|
}
|
||||||
|
}, [reportExpenseExport]);
|
||||||
|
|
||||||
|
const handleExportPDF = useCallback(async () => {
|
||||||
|
setIsPdfExportLoading(true);
|
||||||
|
try {
|
||||||
|
const allData = await reportExpenseExport();
|
||||||
|
if (!allData || allData.length === 0) {
|
||||||
|
toast.error('Tidak ada data untuk diekspor.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const pdfParams = {
|
||||||
|
location_name: locationValue?.label,
|
||||||
|
supplier_name: supplierValue?.label,
|
||||||
|
realization_date: formik.values.realization_date || undefined,
|
||||||
|
};
|
||||||
|
|
||||||
|
await generateReportExpensePDF(allData, pdfParams);
|
||||||
|
|
||||||
|
toast.success('PDF berhasil dibuat dan diunduh.');
|
||||||
|
} catch {
|
||||||
|
toast.error('Gagal membuat PDF. Silakan coba lagi.');
|
||||||
|
} finally {
|
||||||
|
setIsPdfExportLoading(false);
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
reportExpenseExport,
|
||||||
|
locationValue,
|
||||||
|
supplierValue,
|
||||||
|
kandangValue,
|
||||||
|
nonstockValue,
|
||||||
|
categoryValue,
|
||||||
|
formik.values.realization_date,
|
||||||
|
]);
|
||||||
|
|
||||||
|
// ===== REGISTER TAB ACTIONS TO STORE =====
|
||||||
|
const setTabActions = useReportTabStore((state) => state.setTabActions);
|
||||||
|
const clearTabActions = useReportTabStore((state) => state.clearTabActions);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setTabActions(
|
||||||
|
tabId,
|
||||||
|
<div className='flex flex-row gap-3'>
|
||||||
|
<Button
|
||||||
|
variant='outline'
|
||||||
|
color='none'
|
||||||
|
onClick={() => filterModal.openModal()}
|
||||||
|
className={cn(
|
||||||
|
'px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft transition-all',
|
||||||
|
{
|
||||||
|
'border-primary-gradient text-primary': hasFilters,
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Icon icon='heroicons:funnel' width={20} height={20} />
|
||||||
|
Filter
|
||||||
|
{hasFilters && (
|
||||||
|
<span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
|
||||||
|
{activeFiltersCount}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<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'
|
||||||
|
isLoading={isAnyExportLoading}
|
||||||
|
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={handleExportExcel}
|
||||||
|
isLoading={isExcelExportLoading}
|
||||||
|
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={handleExportPDF}
|
||||||
|
isLoading={isPdfExportLoading}
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}, [
|
||||||
|
tabId,
|
||||||
|
hasFilters,
|
||||||
|
activeFiltersCount,
|
||||||
|
isAnyExportLoading,
|
||||||
|
handleExportExcel,
|
||||||
|
handleExportPDF,
|
||||||
|
setTabActions,
|
||||||
|
]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
return () => {
|
||||||
|
clearTabActions(tabId);
|
||||||
|
};
|
||||||
|
}, [tabId, clearTabActions]);
|
||||||
|
|
||||||
|
// ===== TABLE COLUMNS DEFINITION =====
|
||||||
|
const columns = useMemo((): ColumnDef<ReportExpense>[] => {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
header: 'No',
|
||||||
|
cell: (props) => (page - 1) * pageSize + props.row.index + 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'No. PO',
|
||||||
|
accessorKey: 'po_number',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'No. Referensi',
|
||||||
|
accessorKey: 'reference_number',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Tanggal Realisasi',
|
||||||
|
accessorKey: 'realization_date',
|
||||||
|
cell: ({ row }) => {
|
||||||
|
return formatDate(row.original?.realization_date, 'DD MMM, YYYY');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Tanggal Transaksi',
|
||||||
|
accessorKey: 'transaction_date',
|
||||||
|
cell: ({ row }) => {
|
||||||
|
return formatDate(row.original?.transaction_date, 'DD MMM, YYYY');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Kategori',
|
||||||
|
accessorKey: 'category',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Produk',
|
||||||
|
accessorFn: (row) => row.pengajuan?.nonstock?.name,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Supplier',
|
||||||
|
accessorFn: (row) => row.supplier?.name,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Lokasi',
|
||||||
|
accessorFn: (row) => row.kandang?.location?.name,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Kandang',
|
||||||
|
accessorFn: (row) => row.kandang?.name,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Pengajuan',
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
header: 'Qty',
|
||||||
|
id: 'qty_pengajuan',
|
||||||
|
accessorFn: (row) => row.pengajuan?.qty,
|
||||||
|
cell: ({ row }) =>
|
||||||
|
row.original.pengajuan?.qty?.toLocaleString('id-ID') || '0',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Harga',
|
||||||
|
id: 'harga_pengajuan',
|
||||||
|
accessorFn: (row) => row.pengajuan?.price,
|
||||||
|
cell: ({ row }) =>
|
||||||
|
formatCurrency(row.original.pengajuan?.price || 0),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Total',
|
||||||
|
id: 'total_pengajuan',
|
||||||
|
accessorFn: (row) =>
|
||||||
|
(row.pengajuan?.qty || 0) * (row.pengajuan?.price || 0),
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const total =
|
||||||
|
(row.original.pengajuan?.qty || 0) *
|
||||||
|
(row.original.pengajuan?.price || 0);
|
||||||
|
return formatCurrency(total);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Realisasi',
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
header: 'Qty',
|
||||||
|
id: 'qty_realisasi',
|
||||||
|
accessorFn: (row) => row.realisasi?.qty,
|
||||||
|
cell: ({ row }) =>
|
||||||
|
row.original.realisasi?.qty?.toLocaleString('id-ID') || '0',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Harga',
|
||||||
|
id: 'harga_realisasi',
|
||||||
|
accessorFn: (row) => row.realisasi?.price,
|
||||||
|
cell: ({ row }) =>
|
||||||
|
formatCurrency(row.original.realisasi?.price || 0),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Total',
|
||||||
|
id: 'total_realisasi',
|
||||||
|
accessorFn: (row) =>
|
||||||
|
(row.realisasi?.qty || 0) * (row.realisasi?.price || 0),
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const total =
|
||||||
|
(row.original.realisasi?.qty || 0) *
|
||||||
|
(row.original.realisasi?.price || 0);
|
||||||
|
return formatCurrency(total);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Status Pencairan',
|
||||||
|
cell: (props) => (
|
||||||
|
<RealizationStatusBadge
|
||||||
|
approval={props.row.original?.latest_approval}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
header: 'Status BOP',
|
||||||
|
cell: (props) => (
|
||||||
|
<ExpenseStatusBadge approval={props.row.original?.latest_approval} />
|
||||||
|
),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
}, [page, pageSize]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className='w-full p-0 sm:p-3 flex flex-col gap-3'>
|
||||||
|
{!isSubmitted ? (
|
||||||
|
<ReportExpenseSkeleton
|
||||||
|
columns={columns}
|
||||||
|
icon={
|
||||||
|
<Icon
|
||||||
|
icon='heroicons:funnel'
|
||||||
|
className='text-white'
|
||||||
|
width={20}
|
||||||
|
height={20}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
title='No Filters Selected'
|
||||||
|
subtitle='Please choose filters to narrow down your results and make your search easier.'
|
||||||
|
/>
|
||||||
|
) : isLoading ? (
|
||||||
|
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||||
|
<span className='loading loading-spinner loading-xl' />
|
||||||
|
</div>
|
||||||
|
) : !data || data.length === 0 ? (
|
||||||
|
<ReportExpenseSkeleton
|
||||||
|
columns={columns}
|
||||||
|
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.'
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Table
|
||||||
|
data={data}
|
||||||
|
columns={columns}
|
||||||
|
pageSize={pageSize}
|
||||||
|
page={meta?.page || 1}
|
||||||
|
totalItems={meta?.total_results || 0}
|
||||||
|
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',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{meta && (
|
||||||
|
<div className='max-w-sm ml-auto'>
|
||||||
|
<Pagination
|
||||||
|
totalItems={meta.total_results || 0}
|
||||||
|
itemsPerPage={meta.limit || 0}
|
||||||
|
currentPage={meta.page || 0}
|
||||||
|
onPrevPage={() =>
|
||||||
|
setPage((currPage) =>
|
||||||
|
currPage > 1 ? currPage - 1 : currPage
|
||||||
|
)
|
||||||
|
}
|
||||||
|
onNextPage={() =>
|
||||||
|
setPage((currPage) =>
|
||||||
|
meta && meta.total_pages && currPage < meta.total_pages
|
||||||
|
? currPage + 1
|
||||||
|
: currPage
|
||||||
|
)
|
||||||
|
}
|
||||||
|
onPageChange={(pageNumber) => setPage(pageNumber)}
|
||||||
|
rowOptions={[10, 20, 50, 100]}
|
||||||
|
onRowChange={setPageSize}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Filter Modal */}
|
||||||
|
<Modal
|
||||||
|
ref={filterModal.ref}
|
||||||
|
className={{
|
||||||
|
modal: 'p-0',
|
||||||
|
modalBox: 'p-0 rounded-[0.875rem] xl:max-w-4/12 max-w-sm',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Modal Header */}
|
||||||
|
<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={formik.handleSubmit} onReset={formik.handleReset}>
|
||||||
|
{/* Modal Body */}
|
||||||
|
<div className='p-4 flex flex-col gap-3'>
|
||||||
|
<SelectInput
|
||||||
|
label='Lokasi'
|
||||||
|
placeholder='Pilih Lokasi'
|
||||||
|
options={locationOptions}
|
||||||
|
isLoading={isLoadingLocations}
|
||||||
|
value={locationValue}
|
||||||
|
onChange={(val) => {
|
||||||
|
formik.setFieldValue('location_id', val);
|
||||||
|
formik.setFieldValue('kandang_id', null);
|
||||||
|
}}
|
||||||
|
onInputChange={setLocationInputValue}
|
||||||
|
onMenuScrollToBottom={loadMoreLocations}
|
||||||
|
isClearable
|
||||||
|
className={{ wrapper: 'w-full' }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<SelectInput
|
||||||
|
label='Kandang'
|
||||||
|
placeholder='Pilih Kandang'
|
||||||
|
options={kandangOptions}
|
||||||
|
isLoading={isLoadingKandangs}
|
||||||
|
value={kandangValue}
|
||||||
|
onChange={(val) => {
|
||||||
|
formik.setFieldValue('kandang_id', val);
|
||||||
|
}}
|
||||||
|
onInputChange={setKandangInputValue}
|
||||||
|
onMenuScrollToBottom={loadMoreKandangs}
|
||||||
|
isClearable
|
||||||
|
isDisabled={!formik.values.location_id}
|
||||||
|
className={{ wrapper: 'w-full' }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<SelectInput
|
||||||
|
label='Supplier'
|
||||||
|
placeholder='Pilih Supplier'
|
||||||
|
options={supplierOptions}
|
||||||
|
isLoading={isLoadingSuppliers}
|
||||||
|
value={supplierValue}
|
||||||
|
onChange={(val) => {
|
||||||
|
formik.setFieldValue('supplier_id', val);
|
||||||
|
}}
|
||||||
|
onInputChange={setSupplierInputValue}
|
||||||
|
onMenuScrollToBottom={loadMoreSuppliers}
|
||||||
|
isClearable
|
||||||
|
className={{ wrapper: 'w-full' }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<SelectInput
|
||||||
|
label='Produk'
|
||||||
|
placeholder='Pilih Produk'
|
||||||
|
options={nonstockOptions}
|
||||||
|
isLoading={isLoadingNonstocks}
|
||||||
|
value={nonstockValue}
|
||||||
|
onChange={(val) => {
|
||||||
|
formik.setFieldValue('nonstock_id', val);
|
||||||
|
}}
|
||||||
|
onInputChange={setNonstockInputValue}
|
||||||
|
onMenuScrollToBottom={loadMoreNonstocks}
|
||||||
|
isClearable
|
||||||
|
className={{ wrapper: 'w-full' }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<SelectInput
|
||||||
|
label='Kategori'
|
||||||
|
placeholder='Pilih Kategori'
|
||||||
|
options={categoryOptions}
|
||||||
|
value={categoryValue}
|
||||||
|
onChange={(val) => {
|
||||||
|
formik.setFieldValue('category', val);
|
||||||
|
}}
|
||||||
|
isClearable
|
||||||
|
className={{ wrapper: 'w-full' }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<DateInput
|
||||||
|
label='Tanggal Realisasi'
|
||||||
|
name='realization_date'
|
||||||
|
value={formik.values.realization_date || ''}
|
||||||
|
onChange={(e) => {
|
||||||
|
formik.setFieldValue(
|
||||||
|
'realization_date',
|
||||||
|
e.target.value || null
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
className={{ wrapper: 'w-full' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Modal Footer */}
|
||||||
|
<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>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ReportExpenseTab;
|
||||||
Reference in New Issue
Block a user