blob: eaf7b7e0cbd6783bb9e9b4c34d4ac97949d5e192 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
|
import Spinner from '@/core/components/elements/Spinner/Spinner'
import useInvoice from '../hooks/useInvoice'
import { downloadInvoice, downloadTaxInvoice } from '../utils/invoices'
import Divider from '@/core/components/elements/Divider/Divider'
import VariantGroupCard from '@/lib/variant/components/VariantGroupCard'
import currencyFormat from '@/core/utils/currencyFormat'
const Invoice = ({ id }) => {
const { invoice } = useInvoice({ id })
if (invoice.isLoading) {
return (
<div className='flex justify-center my-6'>
<Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
</div>
)
}
const address = invoice.data?.customer
let fullAddress = []
if (address?.street) fullAddress.push(address.street)
if (address?.subDistrict?.name) fullAddress.push(address.subDistrict.name)
if (address?.district?.name) fullAddress.push(address.district.name)
if (address?.city?.name) fullAddress.push(address.city.name)
fullAddress = fullAddress.join(', ')
return (
invoice.data?.name && (
<>
<div className='flex flex-col gap-y-4 p-4'>
<DescriptionRow label='No Invoice'>{invoice.data?.name}</DescriptionRow>
<DescriptionRow label='Status Transaksi'>
{invoice.data?.amountResidual > 0 ? (
<span className='badge-solid-red'>Belum Lunas</span>
) : (
<span className='badge-solid-green'>Lunas</span>
)}
</DescriptionRow>
<DescriptionRow label='Purchase Order'>
{invoice.data?.purchaseOrderName || '-'}
</DescriptionRow>
<DescriptionRow label='Ketentuan Pembayaran'>{invoice.data?.paymentTerm}</DescriptionRow>
{invoice.data?.amountResidual > 0 && invoice.invoiceDate != invoice.invoiceDateDue && (
<DescriptionRow label='Tanggal Jatuh Tempo'>
{invoice.data?.invoiceDateDue}
</DescriptionRow>
)}
<DescriptionRow label='Nama Sales'>{invoice.data?.sales}</DescriptionRow>
<DescriptionRow label='Tanggal Invoice'>{invoice.data?.invoiceDate}</DescriptionRow>
<div className='flex items-center'>
<p className='text-gray_r-11 leading-none'>Invoice</p>
<button
type='button'
className='btn-light py-1.5 px-3 ml-auto'
onClick={() => downloadInvoice(invoice.data)}
>
Download
</button>
</div>
<div className='flex items-center'>
<p className='text-gray_r-11 leading-none'>Faktur Pajak</p>
<button
type='button'
className='btn-light py-1.5 px-3 ml-auto'
onClick={() => downloadTaxInvoice(invoice.data)}
disabled={!invoice.data?.efaktur}
>
Download
</button>
</div>
</div>
<Divider />
<div className='p-4 font-medium'>Detail Penagihan</div>
<div className='flex flex-col gap-y-4 p-4 border-t border-gray_r-6'>
<DescriptionRow label='Nama'>{address?.name}</DescriptionRow>
<DescriptionRow label='Email'>{address?.email || '-'}</DescriptionRow>
<DescriptionRow label='No Telepon'>{address?.mobile || '-'}</DescriptionRow>
<DescriptionRow label='Alamat'>{fullAddress}</DescriptionRow>
</div>
<Divider />
<div className='font-medium p-4'>Detail Produk</div>
<div className='p-4 pt-0 flex flex-col gap-y-3'>
<VariantGroupCard variants={invoice.data?.products} buyMore />
<div className='flex justify-between mt-3 font-medium'>
<p>Total Belanja</p>
<p>{currencyFormat(invoice.data?.amountTotal)}</p>
</div>
</div>
</>
)
)
}
const DescriptionRow = ({ children, label }) => (
<div className='grid grid-cols-2'>
<span className='text-gray_r-11'>{label}</span>
<span className='text-right'>{children}</span>
</div>
)
export default Invoice
|
