blob: de6eacca1358a176a960f0f6815ca4b3d3531efd (
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
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-4">
<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">Faktur Pembelian</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
|
