[] = [
+ {
+ id: 'no',
+ header: 'No',
+ cell: (props) => props.row.index + 1,
+ footer: () => Total
,
+ },
+ {
+ id: 'do_date_or_payment_date',
+ header: 'Tanggal DO/Bayar',
+ accessorKey: 'do_date',
+ cell: (props) => {
+ const value = props.row.original.do_date;
+ return formatDate(value, 'DD MMM YYYY');
+ },
+ },
+ {
+ id: 'realization_date',
+ header: 'Tanggal Realisasi',
+ accessorKey: 'realization_date',
+ cell: (props) => {
+ const value = props.row.original.realization_date;
+ return formatDate(value, 'DD MMM YYYY');
+ },
+ },
+ {
+ id: 'aging',
+ header: 'Aging',
+ accessorKey: 'aging',
+ cell: (props) => {
+ const value = props.row.original.aging;
+ return {formatNumber(value)} hari
;
+ },
+ },
+ {
+ id: 'reference',
+ header: 'Referensi',
+ accessorKey: 'reference',
+ cell: (props) => {
+ const value = props.row.original.reference;
+ return value || '-';
+ },
+ },
+ {
+ id: 'vehicle_plate',
+ header: 'Nomor Polisi',
+ accessorKey: 'vehicle_plate',
+ cell: (props) => {
+ const value = props.row.original.vehicle_plate;
+ return value || '-';
+ },
+ },
+ {
+ id: 'qty',
+ header: 'Ekor/Qty',
+ accessorKey: 'qty',
+ cell: (props) => {
+ const value = props.row.original.qty;
+ return {formatNumber(value)}
;
+ },
+ footer: () => (
+
+ {formatNumber(summary.total_qty) || '-'}
+
+ ),
+ },
+ {
+ id: 'weight',
+ header: 'Berat (Kg)',
+ accessorKey: 'weight',
+ cell: (props) => {
+ const value = props.row.original.weight;
+ return {formatNumber(value)}
;
+ },
+ footer: () => (
+
+ {formatNumber(summary.total_weight) || '-'}
+
+ ),
+ },
+ {
+ id: 'average_weight',
+ header: 'AVG',
+ accessorKey: 'average_weight',
+ cell: (props) => {
+ const value = props.row.original.average_weight;
+ return {formatNumber(value)}
;
+ },
+ footer: () => (
+ -
+ ),
+ },
+ {
+ id: 'price',
+ header: 'Harga Awal',
+ accessorKey: 'price',
+ cell: (props) => {
+ const value = props.row.original.price;
+ return {formatCurrency(value)}
;
+ },
+ footer: () => (
+
+ {formatCurrency(summary.total_initial_amount) || '-'}
+
+ ),
+ },
+ {
+ id: 'credit_note',
+ header: 'CN',
+ accessorKey: 'credit_note',
+ cell: (props) => {
+ const value = props.row.original.credit_note;
+ return {formatCurrency(value)}
;
+ },
+ footer: () => (
+
+ {formatCurrency(summary.total_credit_note) || '-'}
+
+ ),
+ },
+ {
+ id: 'final_price',
+ header: 'Harga Akhir',
+ accessorKey: 'final_price',
+ cell: (props) => {
+ const value = props.row.original.final_price;
+ return {formatCurrency(value)}
;
+ },
+ footer: () => (
+
+ {formatCurrency(summary.total_final_amount) || '-'}
+
+ ),
+ },
+ {
+ id: 'ppn',
+ header: 'PPN (%)',
+ accessorKey: 'ppn',
+ cell: (props) => {
+ const value = props.row.original.ppn;
+ return {formatNumber(value)}%
;
+ },
+ footer: () => (
+ -
+ ),
+ },
+ {
+ id: 'total',
+ header: 'Total',
+ accessorKey: 'total',
+ cell: (props) => {
+ const value = props.row.original.total;
+ return {formatCurrency(value)}
;
+ },
+ footer: () => (
+
+ {formatCurrency(summary.total_grand_amount) || '-'}
+
+ ),
+ },
+ {
+ id: 'payment',
+ header: 'Pembayaran',
+ accessorKey: 'payment',
+ cell: (props) => {
+ const value = props.row.original.payment;
+ return {formatCurrency(value)}
;
+ },
+ footer: () => (
+
+ {formatCurrency(summary.total_payment) || '-'}
+
+ ),
+ },
+ {
+ id: 'accounts_receivable',
+ header: 'Saldo Piutang',
+ accessorKey: 'accounts_receivable',
+ cell: (props) => {
+ const value = props.row.original.accounts_receivable;
+ return {formatCurrency(value)}
;
+ },
+ footer: () => (
+
+ {formatCurrency(summary.total_accounts_receivable) || '-'}
+
+ ),
+ },
+ {
+ id: 'notes',
+ header: 'Keterangan',
+ accessorKey: 'notes',
+ cell: (props) => {
+ const value = props.row.original.notes;
+ return value || '-';
+ },
+ },
+ {
+ id: 'pickup_info',
+ header: 'Pengambilan',
+ accessorKey: 'pickup_info',
+ cell: (props) => {
+ const value = props.row.original.pickup_info;
+ return value || '-';
+ },
+ },
+ {
+ id: 'sales_marketing',
+ header: 'Sales/Marketing',
+ accessorKey: 'sales_marketing',
+ cell: (props) => {
+ const value = props.row.original.sales_marketing;
+ return value || '-';
+ },
+ },
+ ];
+ return tableColumns;
+ };
+
+ return (
+
+
+
+
+
+
+ Export
+
+ }
+ align='end'
+ >
+
+
+
+
+
+ (tableFilterState.customer_id || [])
+ .map(String)
+ .includes(String(opt.value))
+ )}
+ onChange={customerChangeHandler}
+ isLoading={isLoadingCustomers}
+ isClearable
+ />
+
+ (tableFilterState.sales || [])
+ .map(String)
+ .includes(String(opt.value))
+ )}
+ onChange={salesChangeHandler}
+ isLoading={false}
+ isClearable
+ />
+ option.value === tableFilterState.date_type
+ ) || null
+ }
+ onChange={dataTypeChangeHandler}
+ isLoading={false}
+ isClearable={false}
+ />
+
+
+
+ {!isSubmitted ? (
+
+ Silakan pilih filter dan klik tombol Submit untuk menampilkan data.
+
+ ) : isLoading ? (
+
+
+
+ ) : data.length === 0 ? (
+
+ Tidak ada data yang dapat ditampilkan...
+
+ ) : (
+ data.map((customerReport) => {
+ const summary = customerReport.summary || {
+ total_qty: 0,
+ total_weight: 0,
+ total_initial_amount: 0,
+ total_credit_note: 0,
+ total_final_amount: 0,
+ total_ppn: 0,
+ total_grand_amount: 0,
+ total_payment: 0,
+ total_accounts_receivable: 0,
+ };
+
+ const totalAccountsReceivable = summary.total_accounts_receivable;
+ const tableColumns = getTableColumns(summary);
+
+ return (
+
+ 0}
+ className={{
+ containerClassName: 'w-full',
+ tableWrapperClassName: 'overflow-x-auto mt-4',
+ tableClassName: 'w-full table-auto text-sm',
+ headerRowClassName: 'border-b border-b-gray-200 bg-gray-50',
+ headerColumnClassName:
+ 'px-4 py-3 text-xs font-semibold text-gray-700 text-left border border-gray-200',
+ bodyRowClassName:
+ 'hover:bg-gray-50 transition-colors border-b border-l border-r border-b-gray-200 border-l-gray-200 border-r-gray-200',
+ bodyColumnClassName:
+ 'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+ tableFooterClassName:
+ 'bg-gray-100 font-semibold border border-gray-200',
+ footerRowClassName: 'border-t-2 border-gray-300',
+ footerColumnClassName:
+ 'px-4 py-3 text-xs text-gray-900 whitespace-nowrap',
+ paginationClassName: 'hidden',
+ }}
+ />
+
+ );
+ })
+ )}
+
+ {meta && data.length > 0 && (
+
+ )}
+
+ );
+};
+
+export default CustomerPaymentTab;