source: src/sections/invoice/invoice-ee-pdf.tsx@ 87c9f1e

main
Last change on this file since 87c9f1e was 87c9f1e, checked in by Naum Shapkarovski <naumshapkarovski@…>, 5 weeks ago

update the seed script. update the prisma schema, use mapping
  • Property mode set to 100644
File size: 13.0 KB
Line 
1import { useMemo } from 'react';
2import { Page, View, Text, Image, Document, Font, StyleSheet } from '@react-pdf/renderer';
3// utils
4import { fDate } from 'src/utils/format-time';
5import { fCurrency } from 'src/utils/format-number';
6// types
7import { Invoice } from 'src/schemas';
8import { createFullAddress } from 'src/utils/create-full-address';
9import { getQuantityType } from 'src/utils/get-invoice-quantity-type';
10// import signatureImage from 'src/assets/png/signature.png';
11
12// ----------------------------------------------------------------------
13
14Font.register({
15 family: 'Roboto',
16 fonts: [{ src: '/fonts/Roboto-Regular.ttf' }, { src: '/fonts/Roboto-Bold.ttf' }],
17});
18
19const useStyles = () =>
20 useMemo(
21 () =>
22 StyleSheet.create({
23 col4: { width: '25%' },
24 col8: { width: '75%' },
25 col6: { width: '50%' },
26 mb4: { marginBottom: 4 },
27 mb8: { marginBottom: 8 },
28 mb40: { marginBottom: 40 },
29 h3: { fontSize: 16, fontWeight: 700 },
30 h4: { fontSize: 13, fontWeight: 700 },
31 body1: { fontSize: 11 },
32 body2: { fontSize: 10 },
33 subtitle1: { fontSize: 11, fontWeight: 700 },
34 subtitle2: { fontSize: 10, fontWeight: 700 },
35 alignRight: { textAlign: 'right' },
36 page: {
37 fontSize: 9,
38 lineHeight: 1.6,
39 fontFamily: 'Roboto',
40 backgroundColor: '#FFFFFF',
41 textTransform: 'capitalize',
42 padding: '40px 24px 120px 24px',
43 },
44 footer: {
45 left: 0,
46 right: 0,
47 bottom: 0,
48 padding: 24,
49 margin: 'auto',
50 borderTopWidth: 1,
51 borderStyle: 'solid',
52 position: 'absolute',
53 borderColor: '#DFE3E8',
54 },
55 bankInfo: {
56 alignItems: 'stretch', // Keeps original alignment from your structure
57 flexDirection: 'column',
58 },
59 bankRow: {
60 flexDirection: 'row',
61 alignItems: 'center',
62 justifyContent: 'space-between', // Ensures the key is left and value is right aligned
63 gap: 24,
64 },
65 bankKey: {
66 color: '#808080', // Light gray for the key
67 },
68 bankValue: {
69 textAlign: 'right', // Aligns the value to the right
70 },
71 signatures: {
72 left: 0,
73 right: 0,
74 bottom: 0,
75 padding: 24,
76 margin: 'auto',
77 borderStyle: 'solid',
78 position: 'absolute',
79 },
80 gridContainer: {
81 flexDirection: 'row',
82 justifyContent: 'space-between',
83 },
84 table: {
85 display: 'flex',
86 width: 'auto',
87 },
88 tableHead: {
89 padding: '5px 5px',
90 flexDirection: 'row',
91 },
92 tableRow: {
93 padding: '5px 5px',
94 flexDirection: 'row',
95 borderBottomWidth: 1,
96 borderStyle: 'solid',
97 borderColor: '#DFE3E8',
98 },
99 noBorder: {
100 paddingTop: 8,
101 paddingBottom: 0,
102 borderBottomWidth: 0,
103 },
104 tableCell_1: {
105 width: '5%',
106 },
107 tableCell_2: {
108 width: '50%',
109 paddingRight: 16,
110 },
111 tableCell_3: {
112 width: '15%',
113 },
114 }),
115 []
116 );
117
118// ----------------------------------------------------------------------
119
120type Props = {
121 invoice: Invoice;
122 currentStatus: string;
123};
124
125export default function InvoiceEEPDF({ invoice, currentStatus }: Props) {
126 const {
127 items,
128 dueDate,
129 discount,
130 invoiceTo,
131 issueDate,
132 totalAmount,
133 invoiceFrom,
134 invoiceNumber,
135 subTotal,
136 currency,
137 quantityType,
138 } = invoice;
139
140 const styles = useStyles();
141
142 return (
143 <Document>
144 <Page size="A4" style={styles.page}>
145 <View style={[styles.gridContainer, styles.mb40]}>
146 <Image source="/logo/logo_single.png" style={{ width: 48, height: 48 }} />
147
148 <View style={{ alignItems: 'stretch', flexDirection: 'column' }}>
149 <Text style={styles.h3}>Invoice No. {invoiceNumber}</Text>
150 <Text style={styles.body2}>{invoiceFrom.name}</Text>
151 {currency === 'EUR' ? (
152 <>
153 <View style={styles.bankRow}>
154 <Text style={styles.bankKey}>WISE EUROPE SA:</Text>
155 <Text style={styles.bankValue}>
156 {invoiceFrom.bankAccounts?.eur?.accountNumber}
157 </Text>
158 </View>
159 <View style={styles.bankRow}>
160 <Text style={styles.bankKey}>IBAN:</Text>
161 <Text style={styles.bankValue}>{invoiceFrom.bankAccounts?.eur?.iban}</Text>
162 </View>
163 <View style={styles.bankRow}>
164 <Text style={styles.bankKey}>SWIFT/BIC:</Text>
165 <Text style={styles.bankValue}>{invoiceFrom.bankAccounts?.eur?.bicSwift}</Text>
166 </View>
167 </>
168 ) : (
169 <>
170 <View style={styles.bankRow}>
171 <Text style={styles.bankKey}>WISE EUROPE SA:</Text>
172 <Text style={styles.bankValue}>
173 {invoiceFrom.bankAccounts?.usd?.accountNumber}
174 </Text>
175 </View>
176 <View style={styles.bankRow}>
177 <Text style={styles.bankKey}>ROUTING NUMBER:</Text>
178 <Text style={styles.bankValue}>
179 {invoiceFrom.bankAccounts?.usd?.routingNumber}
180 </Text>
181 </View>
182 <View style={styles.bankRow}>
183 <Text style={styles.bankKey}>SWIFT/BIC:</Text>
184 <Text style={styles.bankValue}>{invoiceFrom.bankAccounts?.usd?.bicSwift}</Text>
185 </View>
186 </>
187 )}
188 </View>
189 </View>
190
191 <View style={[styles.gridContainer, styles.mb40, { gap: 16 }]}>
192 <View
193 style={[
194 styles.col6,
195 { border: 1, borderColor: '#DFE3E8', borderRadius: 5, padding: 4 },
196 ]}
197 >
198 <Text style={[styles.subtitle1, styles.mb4]}>Invoice from</Text>
199 <Text style={[styles.body2, { fontWeight: 700 }]}>{invoiceFrom.name}</Text>
200 <Text style={styles.body2}>{createFullAddress(invoiceFrom.address)}</Text>
201 <Text style={styles.body2}>{invoiceFrom.phoneNumber}</Text>
202 <View style={{ marginTop: 5 }} />
203 <Text style={{ ...styles.body2, textTransform: 'lowercase' }}>{invoiceFrom.email}</Text>
204 </View>
205
206 <View
207 style={[
208 styles.col6,
209 { border: 1, borderColor: '#DFE3E8', borderRadius: 5, padding: 4 },
210 ]}
211 >
212 <Text style={[styles.subtitle1, styles.mb4]}>Invoice to</Text>
213 <Text style={[styles.body2, { fontWeight: 700 }]}>{invoiceTo.name}</Text>
214 {invoiceTo.companyId && (
215 <Text style={[styles.body2]}>Company ID: {invoiceTo.companyId}</Text>
216 )}
217 <Text style={styles.body2}>{createFullAddress(invoiceTo.address)}</Text>
218 <Text style={styles.body2}>{invoiceTo.phoneNumber}</Text>
219 <View style={{ marginTop: 5 }} />
220 <Text style={{ ...styles.body2, textTransform: 'lowercase' }}>{invoiceTo.email}</Text>
221 </View>
222 </View>
223
224 <View style={[styles.gridContainer, styles.mb40]}>
225 <View style={styles.col6}>
226 <Text style={[styles.subtitle1, styles.mb4]}>Invoice Number</Text>
227 <Text style={styles.body2}>{invoiceNumber}</Text>
228 </View>
229 <View style={styles.col6}>
230 <Text style={[styles.subtitle1, styles.mb4]}>Date Issued</Text>
231 <Text style={styles.body2}>{fDate(issueDate)}</Text>
232 </View>
233 <View style={styles.col6}>
234 <Text style={[styles.subtitle1, styles.mb4]}>Due date</Text>
235 <Text style={styles.body2}>{fDate(dueDate)}</Text>
236 </View>
237 </View>
238
239 <Text style={[styles.subtitle1, styles.mb8]}>Invoice Details</Text>
240
241 <View style={styles.table}>
242 <View>
243 <View style={[styles.tableHead, { backgroundColor: 'black', color: 'white' }]}>
244 <View style={styles.tableCell_1}>
245 <Text style={styles.subtitle1}>#</Text>
246 </View>
247
248 <View style={styles.tableCell_2}>
249 <Text style={styles.subtitle1}>Description</Text>
250 </View>
251
252 <View style={styles.tableCell_3}>
253 <Text style={styles.subtitle1}>{getQuantityType(invoice)}</Text>
254 </View>
255
256 <View style={styles.tableCell_3}>
257 <Text style={styles.subtitle1}>Unit price</Text>
258 </View>
259
260 <View style={styles.tableCell_3}>
261 <Text style={styles.subtitle1}>VAT</Text>
262 </View>
263
264 <View style={[styles.tableCell_3, styles.alignRight]}>
265 <Text style={styles.subtitle1}>Total</Text>
266 </View>
267 </View>
268 </View>
269
270 <View>
271 {items.map((item, index) => (
272 <View style={styles.tableRow} key={item.title}>
273 <View style={styles.tableCell_1}>
274 <Text>{index + 1}</Text>
275 </View>
276
277 <View style={styles.tableCell_2}>
278 <Text style={styles.subtitle2}>{item.title}</Text>
279 <Text>{item.description}</Text>
280 </View>
281
282 <View style={styles.tableCell_3}>
283 <Text>{item.quantity}</Text>
284 </View>
285
286 <View style={styles.tableCell_3}>
287 <Text>{item.price}</Text>
288 </View>
289
290 <View style={styles.tableCell_3}>
291 <Text>0%&nbsp;&nbsp;[1]</Text>
292 </View>
293
294 <View style={[styles.tableCell_3, styles.alignRight]}>
295 <Text>{fCurrency(item.price * item.quantity, currency)}</Text>
296 </View>
297 </View>
298 ))}
299
300 <View style={[styles.tableRow, styles.noBorder]}>
301 <View style={styles.tableCell_1} />
302 <View style={styles.tableCell_2} />
303 <View style={styles.tableCell_3} />
304 <View style={styles.tableCell_3}>
305 <Text>Subtotal</Text>
306 </View>
307 <View style={[styles.tableCell_3, styles.alignRight]}>
308 <Text>{fCurrency(subTotal, currency)}</Text>
309 </View>
310 </View>
311
312 <View style={[styles.tableRow, styles.noBorder]}>
313 <View style={styles.tableCell_1} />
314 <View style={styles.tableCell_2} />
315 <View style={styles.tableCell_3} />
316 <View style={styles.tableCell_3}>
317 <Text>VAT&nbsp;&nbsp;[1]</Text>
318 </View>
319 <View style={[styles.tableCell_3, styles.alignRight]}>
320 <Text>0,00</Text>
321 </View>
322 </View>
323
324 {!!discount && (
325 <View style={[styles.tableRow, styles.noBorder]}>
326 <View style={styles.tableCell_1} />
327 <View style={styles.tableCell_2} />
328 <View style={styles.tableCell_3} />
329 <View style={styles.tableCell_3}>
330 <Text>Discount</Text>
331 </View>
332 <View style={[styles.tableCell_3, styles.alignRight]}>
333 <Text>{fCurrency(-discount, currency)}</Text>
334 </View>
335 </View>
336 )}
337
338 {/* <View style={[styles.tableRow, styles.noBorder]}>
339 <View style={styles.tableCell_1} />
340 <View style={styles.tableCell_2} />
341 <View style={styles.tableCell_3} />
342 <View style={styles.tableCell_3}>
343 <Text>Taxes</Text>
344 </View>
345 <View style={[styles.tableCell_3, styles.alignRight]}>
346 <Text>{fCurrency(taxes)}</Text>
347 </View>
348 </View> */}
349
350 <View style={[styles.tableRow, styles.noBorder]}>
351 <View style={styles.tableCell_1} />
352 <View style={styles.tableCell_2} />
353 <View style={styles.tableCell_3} />
354 <View style={styles.tableCell_3}>
355 <Text style={styles.h4}>Total</Text>
356 </View>
357 <View style={[styles.tableCell_3, styles.alignRight]}>
358 <Text style={styles.h4}>{fCurrency(totalAmount, currency)}</Text>
359 </View>
360 </View>
361 </View>
362 </View>
363
364 <View style={[styles.gridContainer, styles.footer]} fixed>
365 <View style={styles.col8}>
366 <Text style={styles.subtitle2}>VAT references</Text>
367 <Text>[1] - Reverse charge 0%</Text>
368 </View>
369 <View style={[styles.col4, styles.alignRight]}>
370 <Text style={[styles.subtitle2]}>Have a question?</Text>
371 <Text style={{ textTransform: 'lowercase' }}>{invoiceFrom.email}</Text>
372 </View>
373 </View>
374 </Page>
375 </Document>
376 );
377}
Note: See TracBrowser for help on using the repository browser.