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

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
@@ -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>
@@ -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,