gitea-admin/lti-web-client
1
0
Fork 0
mirror of https://gitlab.com/mbugroup/lti-web-client.git synced 2026-05-22 22:35:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(FE): Closing Finance and adjust reports expense filter request

Browse Source
This commit is contained in:
randy-ar
2025-12-16 17:52:59 +07:00
parent 9c09395677
commit b02b458034
15 changed files with 1476 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/pages/report/expense/ReportExpenseTable.tsx
+37 -54
View File
@@ -12,7 +12,10 @@ 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 {
ReportExpense,
ReportExpenseSearchParams,
} from '@/types/api/report/report-expense';
import { Icon } from '@iconify/react';
import { ColumnDef } from '@tanstack/react-table';
import { useMemo, useState } from 'react';
@@ -23,16 +26,7 @@ const ReportExpenseTable = ({
onSearch,
}: {
reportExpenses: ReportExpense[];
onSearch: (params: {
locationId: string | null;
supplierId: string | null;
kandangId: string | null;
startDate: string | null;
endDate: string | null;
category: string | null;
period: string | number;
search: string;
}) => void;
onSearch: (params: ReportExpenseSearchParams) => void;
}) => {
const [selectedLocation, setSelectedLocation] = useState<OptionType | null>(
null
@@ -46,10 +40,11 @@ const ReportExpenseTable = ({
const [selectedKandang, setSelectedKandang] = useState<OptionType | null>(
null
);
const [selectedNonstock, setSelectedNonstock] = useState<OptionType | null>(
null
);
const [search, setSearch] = useState('');
const [startDate, setStartDate] = useState<string | null>(null);
const [endDate, setEndDate] = useState<string | null>(null);
const [period, setPeriod] = useState<number | string>('');
const [realizationDate, setRealizationDate] = useState<string | null>(null);
const { options: optionsLocation, isLoadingOptions: isLoadingLocation } =
useSelect(`/master-data/locations`, 'id', 'name');
@@ -59,6 +54,8 @@ const ReportExpenseTable = ({
useSelect(`/master-data/kandangs`, 'id', 'name', '', {
location_id: selectedLocation?.value.toString() || '',
});
const { options: optionsNonstock, isLoadingOptions: isLoadingNonstock } =
useSelect(`/master-data/nonstocks`, 'id', 'name');
const columns = useMemo((): ColumnDef<ReportExpense>[] => {
return [
@@ -92,13 +89,17 @@ const ReportExpenseTable = ({
header: 'Kategori',
accessorKey: 'category',
},
{
header: 'Produk',
accessorFn: (row) => row.pengajuan.nonstock.name,
},
{
header: 'Supplier',
accessorFn: (row) => row.supplier.name,
},
{
header: 'Lokasi',
accessorFn: (row) => row.location.name,
accessorFn: (row) => row.kandang.location.name,
},
{
header: 'Kandang',
@@ -181,44 +182,31 @@ const ReportExpenseTable = ({
const handleSearch = () => {
onSearch({
search,
period,
startDate,
endDate,
realizationDate,
locationId: selectedLocation?.value.toString() ?? '',
kandangId: selectedKandang?.value.toString() ?? '',
nonstockId: selectedNonstock?.value.toString() ?? '',
supplierId: selectedSupplier?.value.toString() ?? '',
category: selectedCategory?.value.toString() ?? '',
});
};
const handleSearchInput = (e: React.ChangeEvent<HTMLInputElement>) => {
setSearch(e.target.value);
onSearch({
search: e.target.value,
period,
startDate,
endDate,
locationId: selectedLocation?.value.toString() ?? '',
kandangId: selectedKandang?.value.toString() ?? '',
supplierId: selectedSupplier?.value.toString() ?? '',
category: selectedCategory?.value.toString() ?? '',
});
};
const handleReset = () => {
setSearch('');
setPeriod('');
setStartDate('');
setEndDate('');
setRealizationDate('');
setSelectedLocation(null);
setSelectedKandang(null);
setSelectedNonstock(null);
setSelectedSupplier(null);
setSelectedCategory(null);
onSearch({
search: '',
period: '',
startDate: '',
endDate: '',
realizationDate: '',
locationId: '',
kandangId: '',
nonstockId: '',
supplierId: '',
category: '',
});
@@ -283,6 +271,15 @@ const ReportExpenseTable = ({
value={selectedSupplier}
onChange={(option) => setSelectedSupplier(option as OptionType)}
/>
<SelectInput
isClearable
label='Produk'
options={optionsNonstock}
isLoading={isLoadingNonstock}
placeholder='Produk'
value={selectedNonstock}
onChange={(option) => setSelectedNonstock(option as OptionType)}
/>
<SelectInput
isClearable
label='Kategori'
@@ -292,7 +289,7 @@ const ReportExpenseTable = ({
label: 'BOP',
},
{
value: 'NON BOP',
value: 'NON-BOP',
label: 'Non BOP',
},
]}
@@ -300,26 +297,12 @@ const ReportExpenseTable = ({
value={selectedCategory}
onChange={(option) => setSelectedCategory(option as OptionType)}
/>
<NumberInput
label='Periode'
value={period}
onChange={(e) => setPeriod(e.target.value)}
name='periode'
placeholder='Periode'
/>
<DateInput
label='Tanggal Mulai'
value={startDate as string}
onChange={(e) => setStartDate(e.target.value)}
name='start_date'
placeholder='Tanggal Mulai'
/>
<DateInput
label='Tanggal Selesai'
value={endDate as string}
onChange={(e) => setEndDate(e.target.value)}
name='end_date'
placeholder='Tanggal Selesai'
label='Tanggal Realisasi'
value={realizationDate as string}
onChange={(e) => setRealizationDate(e.target.value)}
name='realization_date'
placeholder='Tanggal Realisasi'
/>
<DebouncedTextInput
label='Cari'
src/components/pages/report/expense/pdf/ReportExpenseExport.tsx
+250 -79
View File
@@ -6,6 +6,7 @@ import { useMemo, useState } from 'react';
import { formatCurrency, formatDate } from '@/lib/helper';
import pdfStyles from '@/components/pages/report/expense/pdf/styles/ReportExpenseStyles';
import toast from 'react-hot-toast';
import ExpenseStatusBadge from '@/components/pages/expense/ExpenseStatusBadge';
interface ReportExpenseExportProps {
data: ReportExpense[];
@@ -134,58 +135,208 @@ const PDFDocument = ({ data }: { data: ReportExpense[] }) => {
{/* Table */}
<View style={pdfStyles.table}>
{/* Table Header */}
{/* Header Row 1: Group Headers */}
<View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
<View style={pdfStyles.tableCellHeader}>
<View
style={[
pdfStyles.tableCellNarrowHeader,
{ borderBottomWidth: 0 },
]}
>
<Text>No</Text>
</View>
<View style={pdfStyles.tableCellHeader}>
<View
style={[
pdfStyles.tableCellWrapHeader,
{ borderBottomWidth: 0 },
]}
>
<Text>No. PO</Text>
</View>
<View style={pdfStyles.tableCellHeader}>
<View
style={[
pdfStyles.tableCellWrapHeader,
{ borderBottomWidth: 0 },
]}
>
<Text>No. Referensi</Text>
</View>
<View style={pdfStyles.tableCellHeader}>
<View
style={[
pdfStyles.tableCellMediumHeader,
{ borderBottomWidth: 0 },
]}
>
<Text>Tgl Realisasi</Text>
</View>
<View style={pdfStyles.tableCellHeader}>
<View
style={[
pdfStyles.tableCellMediumHeader,
{ borderBottomWidth: 0 },
]}
>
<Text>Tgl Transaksi</Text>
</View>
<View style={pdfStyles.tableCellHeader}>
<View
style={[
pdfStyles.tableCellXSmallHeader,
{ borderBottomWidth: 0 },
]}
>
<Text>Kategori</Text>
</View>
<View style={pdfStyles.tableCellHeader}>
<View
style={[
pdfStyles.tableCellHeader,
{ borderBottomWidth: 0 },
]}
>
<Text>Produk</Text>
</View>
<View
style={[
pdfStyles.tableCellSmallHeader,
{ borderBottomWidth: 0 },
]}
>
<Text>Lokasi</Text>
</View>
<View style={pdfStyles.tableCellHeader}>
<View
style={[
pdfStyles.tableCellSmallHeader,
{ borderBottomWidth: 0 },
]}
>
<Text>Kandang</Text>
</View>
<View style={pdfStyles.tableCellHeader}>
<Text>Qty Pengajuan</Text>
{/* Pengajuan Group - spans 3 columns: XSmall + Medium + Medium */}
<View
style={[
pdfStyles.tableCellXSmallHeader,
{ borderBottomWidth: 0, borderRightWidth: 0 },
]}
>
<Text></Text>
</View>
<View style={pdfStyles.tableCellHeader}>
<Text>Harga Pengajuan</Text>
<View
style={[
pdfStyles.tableCellMediumHeader,
{
borderBottomWidth: 0,
borderRightWidth: 0,
textAlign: 'center',
},
]}
>
<Text>Pengajuan</Text>
</View>
<View style={pdfStyles.tableCellHeader}>
<Text>Total Pengajuan</Text>
<View
style={[
pdfStyles.tableCellMediumHeader,
{ borderBottomWidth: 0 },
]}
>
<Text></Text>
</View>
<View style={pdfStyles.tableCellHeader}>
<Text>Qty Realisasi</Text>
{/* Realisasi Group - spans 3 columns: XSmall + Medium + Medium */}
<View
style={[
pdfStyles.tableCellXSmallHeader,
{ borderBottomWidth: 0, borderRightWidth: 0 },
]}
>
<Text></Text>
</View>
<View style={pdfStyles.tableCellHeader}>
<Text>Harga Realisasi</Text>
<View
style={[
pdfStyles.tableCellMediumHeader,
{
borderBottomWidth: 0,
borderRightWidth: 0,
textAlign: 'center',
},
]}
>
<Text>Realisasi</Text>
</View>
<View style={pdfStyles.tableCellHeader}>
<Text>Total Realisasi</Text>
<View
style={[
pdfStyles.tableCellMediumHeader,
{ borderBottomWidth: 0 },
]}
>
<Text></Text>
</View>
<View style={pdfStyles.tableCellHeader}>
<Text>Status Pencairan</Text>
</View>
<View style={pdfStyles.tableCellHeaderLast}>
<View
style={[
pdfStyles.tableCellMediumHeader,
{ borderBottomWidth: 0 },
]}
>
<Text>Status BOP</Text>
</View>
</View>
{/* Header Row 2: Sub Headers */}
<View style={[pdfStyles.tableRow, pdfStyles.tableHeader]}>
<View style={pdfStyles.tableCellNarrowHeader}>
<Text></Text>
</View>
<View style={pdfStyles.tableCellWrapHeader}>
<Text></Text>
</View>
<View style={pdfStyles.tableCellWrapHeader}>
<Text></Text>
</View>
<View style={pdfStyles.tableCellMediumHeader}>
<Text></Text>
</View>
<View style={pdfStyles.tableCellMediumHeader}>
<Text></Text>
</View>
<View style={pdfStyles.tableCellXSmallHeader}>
<Text></Text>
</View>
<View style={pdfStyles.tableCellHeader}>
<Text></Text>
</View>
<View style={pdfStyles.tableCellSmallHeader}>
<Text></Text>
</View>
<View style={pdfStyles.tableCellSmallHeader}>
<Text></Text>
</View>
{/* Pengajuan sub-headers */}
<View style={pdfStyles.tableCellXSmallHeader}>
<Text>Qty</Text>
</View>
<View style={pdfStyles.tableCellMediumHeader}>
<Text>Harga</Text>
</View>
<View style={pdfStyles.tableCellMediumHeader}>
<Text>Total</Text>
</View>
{/* Realisasi sub-headers */}
<View style={pdfStyles.tableCellXSmallHeader}>
<Text>Qty</Text>
</View>
<View style={pdfStyles.tableCellMediumHeader}>
<Text>Harga</Text>
</View>
<View style={pdfStyles.tableCellMediumHeader}>
<Text>Total</Text>
</View>
<View style={pdfStyles.tableCellMediumHeader}>
<Text></Text>
</View>
</View>
{/* Table Body */}
{items.map((item, index) => {
const pengajuanTotal =
@@ -195,74 +346,60 @@ const PDFDocument = ({ data }: { data: ReportExpense[] }) => {
return (
<View key={index} style={pdfStyles.tableRow}>
<View style={pdfStyles.tableCell}>
<View style={pdfStyles.tableCellNarrow}>
<Text>{index + 1}</Text>
</View>
<View style={pdfStyles.tableCell}>
<View style={pdfStyles.tableCellWrap}>
<Text>{item.po_number}</Text>
</View>
<View style={pdfStyles.tableCell}>
<View style={pdfStyles.tableCellWrap}>
<Text>{item.reference_number}</Text>
</View>
<View style={pdfStyles.tableCell}>
<View style={pdfStyles.tableCellMedium}>
<Text>
{formatDate(item.realization_date, 'DD MMM YY')}
</Text>
</View>
<View style={pdfStyles.tableCell}>
<View style={pdfStyles.tableCellMedium}>
<Text>
{formatDate(item.transaction_date, 'DD MMM YY')}
</Text>
</View>
<View style={pdfStyles.tableCell}>
<Text>{item.category}</Text>
<View style={pdfStyles.tableCellXSmall}>
<Text>{item.category.split('-').join(' ')}</Text>
</View>
<View style={pdfStyles.tableCell}>
<Text>{item.location.name}</Text>
<Text>{item.pengajuan.nonstock.name}</Text>
</View>
<View style={pdfStyles.tableCell}>
<View style={pdfStyles.tableCellSmall}>
<Text>{item.kandang.location.name}</Text>
</View>
<View style={pdfStyles.tableCellSmall}>
<Text>{item.kandang.name}</Text>
</View>
<View style={pdfStyles.tableCellRight}>
<View style={pdfStyles.tableCellRightXSmall}>
<Text>
{item.pengajuan.qty.toLocaleString('id-ID')}
</Text>
</View>
<View style={pdfStyles.tableCellRight}>
<View style={pdfStyles.tableCellRightMedium}>
<Text>{formatCurrency(item.pengajuan.price)}</Text>
</View>
<View style={pdfStyles.tableCellRight}>
<View style={pdfStyles.tableCellRightMedium}>
<Text>{formatCurrency(pengajuanTotal)}</Text>
</View>
<View style={pdfStyles.tableCellRight}>
<View style={pdfStyles.tableCellRightXSmall}>
<Text>
{item.realisasi.qty.toLocaleString('id-ID')}
</Text>
</View>
<View style={pdfStyles.tableCellRight}>
<View style={pdfStyles.tableCellRightMedium}>
<Text>{formatCurrency(item.realisasi.price)}</Text>
</View>
<View style={pdfStyles.tableCellRight}>
<View style={pdfStyles.tableCellRightMedium}>
<Text>{formatCurrency(realisasiTotal)}</Text>
</View>
<View style={pdfStyles.tableCell}>
<Text
style={{
fontSize: 7,
backgroundColor:
item.latest_approval.step_number === 3
? '#dcfce7'
: '#fef3c7',
padding: 2,
borderRadius: 2,
}}
>
{item.latest_approval.step_number === 3
? 'Lunas'
: 'Belum Lunas'}
</Text>
</View>
<View style={pdfStyles.tableCellLast}>
<View style={pdfStyles.tableCellMedium}>
<Text
style={{
fontSize: 7,
@@ -276,7 +413,7 @@ const PDFDocument = ({ data }: { data: ReportExpense[] }) => {
borderRadius: 2,
}}
>
{item.latest_approval.action}
{item.latest_approval.step_name}
</Text>
</View>
</View>
@@ -285,78 +422,112 @@ const PDFDocument = ({ data }: { data: ReportExpense[] }) => {
{/* Supplier Subtotal Row */}
<View style={pdfStyles.grandTotalRow}>
{/* Empty cells for columns before subtotal */}
<View
style={[pdfStyles.tableCell, { borderRightWidth: 0 }]}
style={[
pdfStyles.tableCellNarrow,
{ borderRightWidth: 0 },
]}
>
<Text></Text>
</View>
<View
style={[pdfStyles.tableCell, { borderRightWidth: 0 }]}
style={[pdfStyles.tableCellWrap, { borderRightWidth: 0 }]}
>
<Text></Text>
</View>
<View
style={[pdfStyles.tableCell, { borderRightWidth: 0 }]}
style={[pdfStyles.tableCellWrap, { borderRightWidth: 0 }]}
>
<Text></Text>
</View>
<View
style={[pdfStyles.tableCell, { borderRightWidth: 0 }]}
style={[
pdfStyles.tableCellMedium,
{ borderRightWidth: 0 },
]}
>
<Text></Text>
</View>
<View
style={[pdfStyles.tableCell, { borderRightWidth: 0 }]}
style={[
pdfStyles.tableCellMedium,
{ borderRightWidth: 0 },
]}
>
<Text></Text>
</View>
<View
style={[pdfStyles.tableCell, { borderRightWidth: 0 }]}
style={[
pdfStyles.tableCellXSmall,
{ borderRightWidth: 0 },
]}
>
<Text></Text>
</View>
<View
style={[pdfStyles.tableCell, { borderRightWidth: 0 }]}
style={[
pdfStyles.tableCellXSmall,
{ borderRightWidth: 0 },
]}
>
<Text></Text>
</View>
<View
style={[pdfStyles.tableCell, { borderRightWidth: 0 }]}
style={[
pdfStyles.tableCellSmall,
{ borderRightWidth: 0 },
]}
>
<Text></Text>
</View>
<View
style={[pdfStyles.tableCell, { borderRightWidth: 0 }]}
style={[
pdfStyles.tableCellSmall,
{ borderRightWidth: 0 },
]}
>
<Text></Text>
</View>
<View style={pdfStyles.tableCellRight}>
{/* Pengajuan Subtotal */}
<View
style={[
pdfStyles.tableCellRightXSmall,
{ borderRightWidth: 0 },
]}
>
<Text></Text>
</View>
<View style={pdfStyles.tableCellRightMedium}>
<Text style={{ fontWeight: 'bold' }}>Subtotal</Text>
</View>
<View style={pdfStyles.tableCellRight}>
<View style={pdfStyles.tableCellRightMedium}>
<Text style={{ fontWeight: 'bold' }}>
{formatCurrency(supplierTotals.pengajuan)}
</Text>
</View>
{/* Realisasi Subtotal */}
<View
style={[pdfStyles.tableCell, { borderRightWidth: 0 }]}
style={[
pdfStyles.tableCellRightXSmall,
{ borderRightWidth: 0 },
]}
>
<Text></Text>
</View>
<View style={pdfStyles.tableCellRight}>
<View style={pdfStyles.tableCellRightMedium}>
<Text style={{ fontWeight: 'bold' }}>Subtotal</Text>
</View>
<View style={pdfStyles.tableCellRight}>
<View style={pdfStyles.tableCellRightMedium}>
<Text style={{ fontWeight: 'bold' }}>
{formatCurrency(supplierTotals.realisasi)}
</Text>
</View>
<View
style={[pdfStyles.tableCell, { borderRightWidth: 0 }]}
>
<Text></Text>
</View>
<View style={pdfStyles.tableCellLast}>
{/* Empty cell for Status BOP */}
<View style={pdfStyles.tableCellMedium}>
<Text></Text>
</View>
</View>
src/components/pages/report/expense/pdf/styles/ReportExpenseStyles.tsx
+154 -1
View File
@@ -112,6 +112,159 @@ const pdfStyles = StyleSheet.create({
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',
@@ -142,7 +295,7 @@ const pdfStyles = StyleSheet.create({
borderRightWidth: 0,
},
allocationSection: {
marginBottom: 15,
marginBottom: 8,
},
allocationTable: {
borderWidth: 1,