@formepdf/next 0.5.0 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,14 +1,26 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Document, Page, View, Text, Table, Row, Cell, Fixed } from '@formepdf/react';
|
|
2
|
+
import { Document, Page, View, Text, Image, Table, Row, Cell, Fixed } from '@formepdf/react';
|
|
3
|
+
const c = {
|
|
4
|
+
slate900: '#0f172a',
|
|
5
|
+
slate700: '#334155',
|
|
6
|
+
slate500: '#64748b',
|
|
7
|
+
slate400: '#94a3b8',
|
|
8
|
+
slate200: '#e2e8f0',
|
|
9
|
+
slate100: '#f1f5f9',
|
|
10
|
+
slate50: '#f8fafc',
|
|
11
|
+
white: '#ffffff',
|
|
12
|
+
};
|
|
13
|
+
function fmt(n) {
|
|
14
|
+
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(n);
|
|
15
|
+
}
|
|
3
16
|
export default function Invoice(data) {
|
|
4
|
-
const
|
|
5
|
-
const subtotal = items.reduce((sum, item) => sum + item.quantity * item.unitPrice, 0);
|
|
17
|
+
const subtotal = data.items.reduce((sum, item) => sum + item.quantity * item.unitPrice, 0);
|
|
6
18
|
const tax = subtotal * (data.taxRate || 0);
|
|
7
19
|
const total = subtotal + tax;
|
|
8
|
-
return (_jsx(Document, { title: `Invoice ${data.invoiceNumber}`, author: data.company.name, children: _jsxs(Page, { size: "Letter", margin: 48, children: [_jsx(Fixed, { position: "footer", children: _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', paddingTop: 8,
|
|
20
|
+
return (_jsx(Document, { title: `Invoice ${data.invoiceNumber}`, author: data.company.name, children: _jsxs(Page, { size: "Letter", margin: [48, 48, 64, 48], children: [_jsx(Fixed, { position: "footer", children: _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', paddingTop: 8, borderTop: `1px solid ${c.slate200}` }, children: [_jsx(Text, { style: { fontSize: 8, color: c.slate400 }, children: data.company.name }), _jsxs(Text, { style: { fontSize: 8, color: c.slate400 }, children: ["Page ", '{{pageNumber}}', " of ", '{{totalPages}}'] })] }) }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 36 }, children: [_jsxs(View, { children: [data.company.logo ? (_jsx(Image, { src: data.company.logo, width: 44, height: 44, style: { marginBottom: 10 } })) : data.company.initials ? (_jsx(View, { style: { width: 44, height: 44, backgroundColor: c.slate900, borderRadius: 6, marginBottom: 10, justifyContent: 'center', alignItems: 'center' }, children: _jsx(Text, { style: { fontSize: 16, fontWeight: 700, color: c.white, textAlign: 'center' }, children: data.company.initials }) })) : null, _jsx(Text, { style: { fontSize: 14, fontWeight: 700, color: c.slate900 }, children: data.company.name }), _jsx(Text, { style: { fontSize: 9, color: c.slate500, marginTop: 3 }, children: data.company.address }), _jsx(Text, { style: { fontSize: 9, color: c.slate500 }, children: data.company.cityStateZip }), _jsx(Text, { style: { fontSize: 9, color: c.slate500 }, children: data.company.email })] }), _jsxs(View, { style: { alignItems: 'flex-end' }, children: [_jsx(Text, { style: { fontSize: 28, fontWeight: 700, color: c.slate900, letterSpacing: -0.5 }, children: "INVOICE" }), _jsxs(View, { style: { marginTop: 10 }, children: [_jsxs(View, { style: { flexDirection: 'row', marginBottom: 3 }, children: [_jsx(Text, { style: { fontSize: 9, color: c.slate500, width: 70, textAlign: 'right' }, children: "Invoice No." }), _jsx(Text, { style: { fontSize: 9, fontWeight: 600, color: c.slate900, width: 110, textAlign: 'right' }, children: data.invoiceNumber })] }), _jsxs(View, { style: { flexDirection: 'row', marginBottom: 3 }, children: [_jsx(Text, { style: { fontSize: 9, color: c.slate500, width: 70, textAlign: 'right' }, children: "Date" }), _jsx(Text, { style: { fontSize: 9, color: c.slate700, width: 110, textAlign: 'right' }, children: data.date })] }), _jsxs(View, { style: { flexDirection: 'row' }, children: [_jsx(Text, { style: { fontSize: 9, color: c.slate500, width: 70, textAlign: 'right' }, children: "Due Date" }), _jsx(Text, { style: { fontSize: 9, color: c.slate700, width: 110, textAlign: 'right' }, children: data.dueDate })] })] })] })] }), _jsxs(View, { style: { flexDirection: 'row', gap: 32, marginBottom: 28 }, children: [_jsxs(View, { style: { flexGrow: 1 }, children: [_jsx(Text, { style: { fontSize: 8, fontWeight: 700, color: c.slate400, textTransform: 'uppercase', letterSpacing: 1, marginBottom: 6 }, children: "Bill To" }), _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: c.slate900 }, children: data.billTo.name }), _jsx(Text, { style: { fontSize: 9, color: c.slate500, marginTop: 2 }, children: data.billTo.company }), _jsx(Text, { style: { fontSize: 9, color: c.slate500, marginTop: 1 }, children: data.billTo.address }), _jsx(Text, { style: { fontSize: 9, color: c.slate500 }, children: data.billTo.cityStateZip }), _jsx(Text, { style: { fontSize: 9, color: c.slate500, marginTop: 1 }, children: data.billTo.email })] }), _jsxs(View, { style: { flexGrow: 1 }, children: [_jsx(Text, { style: { fontSize: 8, fontWeight: 700, color: c.slate400, textTransform: 'uppercase', letterSpacing: 1, marginBottom: 6 }, children: "Ship To" }), _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: c.slate900 }, children: data.shipTo.name }), _jsx(Text, { style: { fontSize: 9, color: c.slate500, marginTop: 2 }, children: data.shipTo.address }), _jsx(Text, { style: { fontSize: 9, color: c.slate500 }, children: data.shipTo.cityStateZip })] })] }), _jsxs(Table, { columns: [
|
|
9
21
|
{ width: { fraction: 0.45 } },
|
|
10
22
|
{ width: { fraction: 0.15 } },
|
|
11
23
|
{ width: { fraction: 0.2 } },
|
|
12
|
-
{ width: { fraction: 0.2 } }
|
|
13
|
-
], children: [_jsxs(Row, { header: true, style: { backgroundColor:
|
|
24
|
+
{ width: { fraction: 0.2 } },
|
|
25
|
+
], children: [_jsxs(Row, { header: true, style: { backgroundColor: c.slate100, borderBottom: `1px solid ${c.slate200}` }, children: [_jsx(Cell, { style: { padding: '8 10' }, children: _jsx(Text, { style: { fontSize: 8, fontWeight: 700, color: c.slate500, letterSpacing: 0.5 }, children: "DESCRIPTION" }) }), _jsx(Cell, { style: { padding: '8 10' }, children: _jsx(Text, { style: { fontSize: 8, fontWeight: 700, color: c.slate500, letterSpacing: 0.5, textAlign: 'center' }, children: "QTY" }) }), _jsx(Cell, { style: { padding: '8 10' }, children: _jsx(Text, { style: { fontSize: 8, fontWeight: 700, color: c.slate500, letterSpacing: 0.5, textAlign: 'right' }, children: "UNIT PRICE" }) }), _jsx(Cell, { style: { padding: '8 10' }, children: _jsx(Text, { style: { fontSize: 8, fontWeight: 700, color: c.slate500, letterSpacing: 0.5, textAlign: 'right' }, children: "AMOUNT" }) })] }), data.items.map((item, i) => (_jsxs(Row, { style: { backgroundColor: i % 2 === 0 ? c.white : c.slate50, borderBottom: `1px solid ${c.slate200}` }, children: [_jsx(Cell, { style: { padding: 10 }, children: _jsx(Text, { style: { fontSize: 9, color: c.slate900 }, children: item.description }) }), _jsx(Cell, { style: { padding: 10 }, children: _jsx(Text, { style: { fontSize: 9, color: c.slate700, textAlign: 'center' }, children: item.quantity }) }), _jsx(Cell, { style: { padding: 10 }, children: _jsx(Text, { style: { fontSize: 9, color: c.slate700, textAlign: 'right' }, children: fmt(item.unitPrice) }) }), _jsx(Cell, { style: { padding: 10 }, children: _jsx(Text, { style: { fontSize: 9, fontWeight: 600, color: c.slate900, textAlign: 'right' }, children: fmt(item.quantity * item.unitPrice) }) })] }, i)))] }), _jsx(View, { style: { flexDirection: 'row', justifyContent: 'flex-end', marginTop: 16 }, children: _jsxs(View, { style: { width: 220 }, children: [_jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', padding: '6 0' }, children: [_jsx(Text, { style: { fontSize: 9, color: c.slate500 }, children: "Subtotal" }), _jsx(Text, { style: { fontSize: 9, color: c.slate700 }, children: fmt(subtotal) })] }), data.taxRate > 0 && (_jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', padding: '6 0' }, children: [_jsxs(Text, { style: { fontSize: 9, color: c.slate500 }, children: ["Tax (", (data.taxRate * 100).toFixed(0), "%)"] }), _jsx(Text, { style: { fontSize: 9, color: c.slate700 }, children: fmt(tax) })] })), _jsx(View, { style: { borderTop: `2px solid ${c.slate900}`, marginTop: 4 } }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', padding: '10 0' }, children: [_jsx(Text, { style: { fontSize: 12, fontWeight: 700, color: c.slate900 }, children: "Total Due" }), _jsx(Text, { style: { fontSize: 13, fontWeight: 700, color: c.slate900 }, children: fmt(total) })] })] }) }), (data.paymentTerms || data.notes) && (_jsxs(View, { style: { marginTop: 36, borderTop: `1px solid ${c.slate200}`, paddingTop: 16 }, children: [data.paymentTerms && (_jsxs(View, { style: { marginBottom: data.notes ? 12 : 0 }, children: [_jsx(Text, { style: { fontSize: 8, fontWeight: 700, color: c.slate400, textTransform: 'uppercase', letterSpacing: 1, marginBottom: 4 }, children: "Payment Terms" }), _jsx(Text, { style: { fontSize: 9, color: c.slate500, lineHeight: 1.5 }, children: data.paymentTerms })] })), data.notes && (_jsxs(View, { children: [_jsx(Text, { style: { fontSize: 8, fontWeight: 700, color: c.slate400, textTransform: 'uppercase', letterSpacing: 1, marginBottom: 4 }, children: "Notes" }), _jsx(Text, { style: { fontSize: 9, color: c.slate500, lineHeight: 1.5 }, children: data.notes })] }))] }))] }) }));
|
|
14
26
|
}
|
|
@@ -1,9 +1,22 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Document, Page, View, Text } from '@formepdf/react';
|
|
3
|
+
const c = {
|
|
4
|
+
slate900: '#0f172a',
|
|
5
|
+
slate700: '#334155',
|
|
6
|
+
slate500: '#64748b',
|
|
7
|
+
slate400: '#94a3b8',
|
|
8
|
+
slate200: '#e2e8f0',
|
|
9
|
+
slate100: '#f1f5f9',
|
|
10
|
+
slate50: '#f8fafc',
|
|
11
|
+
white: '#ffffff',
|
|
12
|
+
};
|
|
13
|
+
function fmt(n) {
|
|
14
|
+
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(n);
|
|
15
|
+
}
|
|
3
16
|
export default function Receipt(data) {
|
|
4
17
|
const items = data.items || [];
|
|
5
18
|
const subtotal = items.reduce((sum, item) => sum + item.price * (item.quantity || 1), 0);
|
|
6
19
|
const tax = subtotal * (data.taxRate || 0);
|
|
7
20
|
const total = subtotal + tax;
|
|
8
|
-
return (_jsx(Document, { title: `Receipt ${data.receiptNumber}`, author: data.store.name, children: _jsxs(Page, { size: "Letter", margin: { top: 72, right: 120, bottom: 72, left: 120 }, children: [_jsxs(View, { style: { alignItems: 'center', marginBottom: 24 }, children: [_jsx(Text, { style: { fontSize: 20, fontWeight: 700, color:
|
|
21
|
+
return (_jsx(Document, { title: `Receipt ${data.receiptNumber}`, author: data.store.name, children: _jsxs(Page, { size: "Letter", margin: { top: 72, right: 120, bottom: 72, left: 120 }, children: [_jsxs(View, { style: { alignItems: 'center', marginBottom: 24 }, children: [_jsx(Text, { style: { fontSize: 20, fontWeight: 700, color: c.slate900 }, children: data.store.name }), _jsx(Text, { style: { fontSize: 9, color: c.slate500, marginTop: 4 }, children: data.store.address }), _jsx(Text, { style: { fontSize: 9, color: c.slate500, marginTop: 2 }, children: data.store.cityStateZip }), _jsx(Text, { style: { fontSize: 9, color: c.slate500, marginTop: 2 }, children: data.store.phone })] }), _jsx(View, { style: { borderTop: `1px solid ${c.slate200}`, marginBottom: 16 } }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 16 }, children: [_jsxs(Text, { style: { fontSize: 9, color: c.slate500 }, children: ["Receipt #", data.receiptNumber] }), _jsx(Text, { style: { fontSize: 9, color: c.slate500 }, children: data.date })] }), items.map((item, i) => (_jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', padding: '6 0' }, children: [_jsxs(View, { style: { flexDirection: 'row', gap: 8, flexGrow: 1 }, children: [_jsx(Text, { style: { fontSize: 9, color: c.slate900 }, children: item.name }), (item.quantity || 1) > 1 && (_jsxs(Text, { style: { fontSize: 9, color: c.slate400 }, children: ["x", item.quantity] }))] }), _jsx(Text, { style: { fontSize: 9, color: c.slate900 }, children: fmt(item.price * (item.quantity || 1)) })] }, i))), _jsx(View, { style: { borderTop: `1px solid ${c.slate200}`, margin: '12 0' } }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', padding: '4 0' }, children: [_jsx(Text, { style: { fontSize: 9, color: c.slate500 }, children: "Subtotal" }), _jsx(Text, { style: { fontSize: 9, color: c.slate700 }, children: fmt(subtotal) })] }), data.taxRate > 0 && (_jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', padding: '4 0' }, children: [_jsxs(Text, { style: { fontSize: 9, color: c.slate500 }, children: ["Tax (", (data.taxRate * 100).toFixed(1), "%)"] }), _jsx(Text, { style: { fontSize: 9, color: c.slate700 }, children: fmt(tax) })] })), _jsx(View, { style: { borderTop: `2px solid ${c.slate900}`, marginTop: 4 } }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', padding: '10 0' }, children: [_jsx(Text, { style: { fontSize: 12, fontWeight: 700, color: c.slate900 }, children: "Total" }), _jsx(Text, { style: { fontSize: 13, fontWeight: 700, color: c.slate900 }, children: fmt(total) })] }), _jsxs(View, { style: { marginTop: 16, paddingTop: 12, borderTop: `1px solid ${c.slate200}` }, children: [_jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between' }, children: [_jsx(Text, { style: { fontSize: 9, color: c.slate500 }, children: "Payment Method" }), _jsx(Text, { style: { fontSize: 9, color: c.slate900 }, children: data.paymentMethod })] }), data.cardLastFour && (_jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 4 }, children: [_jsx(Text, { style: { fontSize: 9, color: c.slate500 }, children: "Card" }), _jsxs(Text, { style: { fontSize: 9, color: c.slate900 }, children: ["****", data.cardLastFour] })] }))] }), _jsxs(View, { style: { alignItems: 'center', marginTop: 32 }, children: [_jsx(Text, { style: { fontSize: 10, color: c.slate500 }, children: "Thank you for your purchase!" }), data.store.website && (_jsx(Text, { style: { fontSize: 8, color: c.slate400, marginTop: 8 }, children: data.store.website }))] })] }) }));
|
|
9
22
|
}
|
package/dist/templates/report.js
CHANGED
|
@@ -1,27 +1,19 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Document, Page, View, Text, Svg, Table, Row, Cell, Fixed, PageBreak
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
recBadge: { width: 24, height: 24, backgroundColor: '#0f172a', borderRadius: 12, justifyContent: 'center', alignItems: 'center' },
|
|
17
|
-
recBadgeText: { fontSize: 10, fontWeight: 700, color: '#ffffff', lineHeight: 1.2 },
|
|
18
|
-
recTitle: { fontSize: 11, fontWeight: 700, color: '#0f172a', marginBottom: 4 },
|
|
19
|
-
recBody: { fontSize: 9, color: '#475569', lineHeight: 1.5 },
|
|
20
|
-
recLabel: { fontSize: 8, fontWeight: 700, color: '#64748b' },
|
|
21
|
-
recValue: { fontSize: 8, color: '#334155' },
|
|
22
|
-
});
|
|
2
|
+
import { Document, Page, View, Text, Svg, Table, Row, Cell, Fixed, PageBreak } from '@formepdf/react';
|
|
3
|
+
const c = {
|
|
4
|
+
slate900: '#0f172a',
|
|
5
|
+
slate700: '#334155',
|
|
6
|
+
slate500: '#64748b',
|
|
7
|
+
slate400: '#94a3b8',
|
|
8
|
+
slate200: '#e2e8f0',
|
|
9
|
+
slate100: '#f1f5f9',
|
|
10
|
+
slate50: '#f8fafc',
|
|
11
|
+
white: '#ffffff',
|
|
12
|
+
blue500: '#3b82f6',
|
|
13
|
+
};
|
|
14
|
+
const CHART_COLORS = [c.blue500, c.slate900, c.slate500, c.slate400, '#cbd5e1'];
|
|
15
|
+
function f(n) { return n.toFixed(2); }
|
|
23
16
|
// ── Chart SVG generators ─────────────────────────────────────────────
|
|
24
|
-
const CHART_COLORS = ['#3b82f6', '#0f172a', '#64748b', '#94a3b8', '#cbd5e1'];
|
|
25
17
|
function renderBarChart(tableData) {
|
|
26
18
|
const totals = tableData.map((r) => ({
|
|
27
19
|
label: r.region,
|
|
@@ -35,27 +27,23 @@ function renderBarChart(tableData) {
|
|
|
35
27
|
const barW = Math.min(32, (w - 20) / totals.length - 8);
|
|
36
28
|
const gap = (w - barW * totals.length) / (totals.length + 1);
|
|
37
29
|
let svg = '';
|
|
38
|
-
// Grid lines
|
|
39
30
|
for (let i = 0; i <= 4; i++) {
|
|
40
31
|
const y = barAreaTop + (barAreaH / 4) * i;
|
|
41
|
-
svg += `<line x1="0" y1="${y}" x2="${w}" y2="${y}" stroke="
|
|
32
|
+
svg += `<line x1="0" y1="${y}" x2="${w}" y2="${y}" stroke="${c.slate200}" stroke-width="0.5"/>`;
|
|
42
33
|
}
|
|
43
|
-
// Bars and labels
|
|
44
34
|
totals.forEach((t, i) => {
|
|
45
35
|
const x = gap + i * (barW + gap);
|
|
46
36
|
const barH = (t.value / maxVal) * barAreaH;
|
|
47
37
|
const y = barAreaBottom - barH;
|
|
48
38
|
svg += `<rect x="${x}" y="${y}" width="${barW}" height="${barH}" fill="${CHART_COLORS[i % CHART_COLORS.length]}" rx="2"/>`;
|
|
49
|
-
// Region label below bar
|
|
50
39
|
const labelX = x + barW / 2;
|
|
51
40
|
svg += `<rect x="${labelX - 2}" y="${barAreaBottom + 4}" width="4" height="4" fill="${CHART_COLORS[i % CHART_COLORS.length]}" rx="1"/>`;
|
|
52
41
|
});
|
|
53
42
|
return svg;
|
|
54
43
|
}
|
|
55
|
-
/** Approximate a circular arc as cubic bezier segments. */
|
|
56
44
|
function arcPath(cx, cy, r, startAngle, endAngle) {
|
|
57
45
|
let path = '';
|
|
58
|
-
const step = Math.PI / 2;
|
|
46
|
+
const step = Math.PI / 2;
|
|
59
47
|
let a1 = startAngle;
|
|
60
48
|
while (a1 < endAngle - 0.001) {
|
|
61
49
|
const a2 = Math.min(a1 + step, endAngle);
|
|
@@ -73,7 +61,28 @@ function arcPath(cx, cy, r, startAngle, endAngle) {
|
|
|
73
61
|
}
|
|
74
62
|
return path;
|
|
75
63
|
}
|
|
76
|
-
function
|
|
64
|
+
function arcPathReverse(cx, cy, r, startAngle, endAngle) {
|
|
65
|
+
const step = Math.PI / 2;
|
|
66
|
+
const segments = [];
|
|
67
|
+
let a = startAngle;
|
|
68
|
+
while (a < endAngle - 0.001) {
|
|
69
|
+
const a2 = Math.min(a + step, endAngle);
|
|
70
|
+
segments.push({ a1: a, a2 });
|
|
71
|
+
a = a2;
|
|
72
|
+
}
|
|
73
|
+
let path = '';
|
|
74
|
+
for (let i = segments.length - 1; i >= 0; i--) {
|
|
75
|
+
const { a1, a2 } = segments[i];
|
|
76
|
+
const alpha = a2 - a1;
|
|
77
|
+
const k = (4 / 3) * Math.tan(alpha / 4);
|
|
78
|
+
const x1 = cx + r * Math.cos(a1), y1 = cy + r * Math.sin(a1);
|
|
79
|
+
const x2 = cx + r * Math.cos(a2), y2 = cy + r * Math.sin(a2);
|
|
80
|
+
const cp1x = x1 - k * r * Math.sin(a1), cp1y = y1 + k * r * Math.cos(a1);
|
|
81
|
+
const cp2x = x2 + k * r * Math.sin(a2), cp2y = y2 - k * r * Math.cos(a2);
|
|
82
|
+
path += `C ${f(cp2x)} ${f(cp2y)} ${f(cp1x)} ${f(cp1y)} ${f(x1)} ${f(y1)} `;
|
|
83
|
+
}
|
|
84
|
+
return path;
|
|
85
|
+
}
|
|
77
86
|
function renderDonutChart(tableData) {
|
|
78
87
|
const totals = tableData.map((r) => ({
|
|
79
88
|
label: r.region,
|
|
@@ -83,7 +92,7 @@ function renderDonutChart(tableData) {
|
|
|
83
92
|
const sum = totals.reduce((s, t) => s + t.value, 0);
|
|
84
93
|
const cx = 55, cy = 75, r = 48, innerR = 28;
|
|
85
94
|
let svg = '';
|
|
86
|
-
let angle = -Math.PI / 2;
|
|
95
|
+
let angle = -Math.PI / 2;
|
|
87
96
|
totals.forEach((t, i) => {
|
|
88
97
|
const sliceAngle = (t.value / sum) * Math.PI * 2;
|
|
89
98
|
if (sliceAngle < 0.01) {
|
|
@@ -99,31 +108,6 @@ function renderDonutChart(tableData) {
|
|
|
99
108
|
});
|
|
100
109
|
return svg;
|
|
101
110
|
}
|
|
102
|
-
/** Reverse arc: draws from endAngle back to startAngle using line-to after the first point. */
|
|
103
|
-
function arcPathReverse(cx, cy, r, startAngle, endAngle) {
|
|
104
|
-
const step = Math.PI / 2;
|
|
105
|
-
const segments = [];
|
|
106
|
-
let a = startAngle;
|
|
107
|
-
while (a < endAngle - 0.001) {
|
|
108
|
-
const a2 = Math.min(a + step, endAngle);
|
|
109
|
-
segments.push({ a1: a, a2 });
|
|
110
|
-
a = a2;
|
|
111
|
-
}
|
|
112
|
-
// Reverse and draw each segment backwards
|
|
113
|
-
let path = '';
|
|
114
|
-
for (let i = segments.length - 1; i >= 0; i--) {
|
|
115
|
-
const { a1, a2 } = segments[i];
|
|
116
|
-
const alpha = a2 - a1;
|
|
117
|
-
const k = (4 / 3) * Math.tan(alpha / 4);
|
|
118
|
-
const x1 = cx + r * Math.cos(a1), y1 = cy + r * Math.sin(a1);
|
|
119
|
-
const x2 = cx + r * Math.cos(a2), y2 = cy + r * Math.sin(a2);
|
|
120
|
-
const cp1x = x1 - k * r * Math.sin(a1), cp1y = y1 + k * r * Math.cos(a1);
|
|
121
|
-
const cp2x = x2 + k * r * Math.sin(a2), cp2y = y2 - k * r * Math.cos(a2);
|
|
122
|
-
// Draw from (x2,y2) to (x1,y1) with swapped control points
|
|
123
|
-
path += `C ${f(cp2x)} ${f(cp2y)} ${f(cp1x)} ${f(cp1y)} ${f(x1)} ${f(y1)} `;
|
|
124
|
-
}
|
|
125
|
-
return path;
|
|
126
|
-
}
|
|
127
111
|
function renderLineChart(tableData) {
|
|
128
112
|
const quarters = ['q1', 'q2', 'q3', 'q4'];
|
|
129
113
|
const qTotals = quarters.map(q => tableData.reduce((sum, r) => sum + parseFloat(r[q].replace(/[$,]/g, '')), 0));
|
|
@@ -133,47 +117,41 @@ function renderLineChart(tableData) {
|
|
|
133
117
|
const padL = 16, padR = 16, padT = 12, padB = 24;
|
|
134
118
|
const plotW = w - padL - padR, plotH = h - padT - padB;
|
|
135
119
|
let svg = '';
|
|
136
|
-
// Grid lines
|
|
137
120
|
for (let i = 0; i <= 4; i++) {
|
|
138
121
|
const y = padT + (plotH / 4) * i;
|
|
139
|
-
svg += `<line x1="${padL}" y1="${y}" x2="${w - padR}" y2="${y}" stroke="
|
|
122
|
+
svg += `<line x1="${padL}" y1="${y}" x2="${w - padR}" y2="${y}" stroke="${c.slate200}" stroke-width="0.5"/>`;
|
|
140
123
|
}
|
|
141
|
-
// Plot points
|
|
142
124
|
const points = qTotals.map((v, i) => ({
|
|
143
125
|
x: padL + (plotW / (quarters.length - 1)) * i,
|
|
144
126
|
y: padT + plotH - ((v - minVal) / (maxVal - minVal)) * plotH,
|
|
145
127
|
}));
|
|
146
|
-
// Fill area under the line
|
|
147
128
|
const areaPath = `M ${f(points[0].x)} ${f(padT + plotH)} L ${points.map(p => `${f(p.x)} ${f(p.y)}`).join(' L ')} L ${f(points[points.length - 1].x)} ${f(padT + plotH)} Z`;
|
|
148
|
-
svg += `<path d="${areaPath}" fill="
|
|
149
|
-
// Line
|
|
129
|
+
svg += `<path d="${areaPath}" fill="${c.blue500}" fill-opacity="0.08"/>`;
|
|
150
130
|
const linePath = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${f(p.x)} ${f(p.y)}`).join(' ');
|
|
151
|
-
svg += `<path d="${linePath}" fill="none" stroke="
|
|
152
|
-
// Dots
|
|
131
|
+
svg += `<path d="${linePath}" fill="none" stroke="${c.blue500}" stroke-width="2"/>`;
|
|
153
132
|
points.forEach(p => {
|
|
154
|
-
svg += `<circle cx="${f(p.x)}" cy="${f(p.y)}" r="3.5" fill="
|
|
133
|
+
svg += `<circle cx="${f(p.x)}" cy="${f(p.y)}" r="3.5" fill="${c.white}" stroke="${c.blue500}" stroke-width="2"/>`;
|
|
155
134
|
});
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
svg += `<line x1="${f(p.x)}" y1="${f(padT + plotH)}" x2="${f(p.x)}" y2="${f(padT + plotH + 4)}" stroke="#94a3b8" stroke-width="1"/>`;
|
|
135
|
+
points.forEach(p => {
|
|
136
|
+
svg += `<line x1="${f(p.x)}" y1="${f(padT + plotH)}" x2="${f(p.x)}" y2="${f(padT + plotH + 4)}" stroke="${c.slate400}" stroke-width="1"/>`;
|
|
159
137
|
});
|
|
160
138
|
return svg;
|
|
161
139
|
}
|
|
162
140
|
// ── Template ─────────────────────────────────────────────────────────
|
|
163
141
|
export default function Report(data) {
|
|
164
|
-
const tableData = data.sections[1].tableData
|
|
165
|
-
return (_jsxs(Document, { title: data.title, author: data.author, children: [_jsx(Page, { size: "Letter", margin: 72, children: _jsxs(View, { style: { flexGrow: 1, justifyContent: 'center' }, children: [_jsxs(View, { style: { backgroundColor:
|
|
142
|
+
const tableData = data.sections[1].tableData;
|
|
143
|
+
return (_jsxs(Document, { title: data.title, author: data.author, children: [_jsx(Page, { size: "Letter", margin: 72, children: _jsxs(View, { style: { flexGrow: 1, justifyContent: 'center' }, children: [_jsxs(View, { style: { backgroundColor: c.slate900, padding: 32, borderRadius: 4, marginBottom: 32 }, children: [_jsx(Text, { style: { fontSize: 32, fontWeight: 700, color: c.white }, children: data.title }), _jsx(Text, { style: { fontSize: 14, color: c.slate400, marginTop: 12 }, children: data.subtitle })] }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 24 }, children: [_jsxs(View, { children: [_jsx(Text, { style: { fontSize: 10, color: c.slate500 }, children: "Prepared by" }), _jsx(Text, { style: { fontSize: 12, fontWeight: 700, color: c.slate900, marginTop: 4 }, children: data.author }), _jsx(Text, { style: { fontSize: 10, color: c.slate500, marginTop: 2 }, children: data.department })] }), _jsxs(View, { style: { alignItems: 'flex-end' }, children: [_jsx(Text, { style: { fontSize: 10, color: c.slate500 }, children: "Date" }), _jsx(Text, { style: { fontSize: 12, fontWeight: 700, color: c.slate900, marginTop: 4 }, children: data.date }), _jsx(Text, { style: { fontSize: 10, color: c.slate500, marginTop: 2 }, children: data.classification })] })] })] }) }), _jsxs(Page, { size: "Letter", margin: 54, children: [_jsx(Fixed, { position: "header", children: _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', paddingBottom: 8, borderBottom: `1px solid ${c.slate200}`, marginBottom: 16 }, children: [_jsx(Text, { style: { fontSize: 8, color: c.slate400 }, children: data.company }), _jsx(Text, { style: { fontSize: 8, color: c.slate400 }, children: data.title })] }) }), _jsx(Fixed, { position: "footer", children: _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', paddingTop: 8, borderTop: `1px solid ${c.slate200}` }, children: [_jsx(Text, { style: { fontSize: 8, color: c.slate400 }, children: data.classification }), _jsxs(Text, { style: { fontSize: 8, color: c.slate400 }, children: ["Page ", '{{pageNumber}}', " of ", '{{totalPages}}'] })] }) }), _jsx(Text, { style: { fontSize: 20, fontWeight: 700, color: c.slate900, marginBottom: 12 }, children: "Table of Contents" }), data.sections.map((section, i) => (_jsx(View, { href: `#${section.title}`, style: { flexDirection: 'row', justifyContent: 'space-between', padding: '6 0', borderBottom: `1px solid ${c.slate100}` }, children: _jsxs(Text, { style: { fontSize: 10, color: c.slate700 }, children: [i + 1, ". ", section.title] }) }, i))), _jsx(PageBreak, {}), _jsxs(Text, { bookmark: data.sections[0].title, style: { fontSize: 20, fontWeight: 700, color: c.slate900, marginBottom: 12 }, children: ["1. ", data.sections[0].title] }), data.sections[0].paragraphs.map((p, i) => (_jsx(Text, { style: { fontSize: 10, color: c.slate700, lineHeight: 1.6, marginBottom: 12 }, children: p }, i))), data.keyMetrics && (_jsx(View, { style: { flexDirection: 'row', gap: 12, marginTop: 8, marginBottom: 24 }, children: data.keyMetrics.map((metric, i) => (_jsxs(View, { style: { flexGrow: 1, padding: 16, backgroundColor: c.slate50, borderRadius: 4, border: `1px solid ${c.slate200}` }, children: [_jsx(Text, { style: { fontSize: 20, fontWeight: 700, color: c.slate900 }, children: metric.value }), _jsx(Text, { style: { fontSize: 9, color: c.slate500, marginTop: 4 }, children: metric.label })] }, i))) })), _jsx(PageBreak, {}), _jsxs(Text, { bookmark: data.sections[1].title, style: { fontSize: 20, fontWeight: 700, color: c.slate900, marginBottom: 12 }, children: ["2. ", data.sections[1].title] }), _jsx(Text, { style: { fontSize: 10, color: c.slate700, lineHeight: 1.6, marginBottom: 16 }, children: data.sections[1].intro }), _jsxs(Table, { columns: [
|
|
166
144
|
{ width: { fraction: 0.28 } },
|
|
167
145
|
{ width: { fraction: 0.18 } },
|
|
168
146
|
{ width: { fraction: 0.18 } },
|
|
169
147
|
{ width: { fraction: 0.18 } },
|
|
170
148
|
{ width: { fraction: 0.18 } }
|
|
171
|
-
], children: [_jsxs(Row, { header: true, style: { backgroundColor:
|
|
149
|
+
], children: [_jsxs(Row, { header: true, style: { backgroundColor: c.slate100, borderBottom: `1px solid ${c.slate200}` }, children: [_jsx(Cell, { style: { padding: 8 }, children: _jsx(Text, { style: { fontSize: 8, fontWeight: 700, color: c.slate500, letterSpacing: 0.5 }, children: "REGION" }) }), _jsx(Cell, { style: { padding: 8 }, children: _jsx(Text, { style: { fontSize: 8, fontWeight: 700, color: c.slate500, letterSpacing: 0.5, textAlign: 'right' }, children: "Q1" }) }), _jsx(Cell, { style: { padding: 8 }, children: _jsx(Text, { style: { fontSize: 8, fontWeight: 700, color: c.slate500, letterSpacing: 0.5, textAlign: 'right' }, children: "Q2" }) }), _jsx(Cell, { style: { padding: 8 }, children: _jsx(Text, { style: { fontSize: 8, fontWeight: 700, color: c.slate500, letterSpacing: 0.5, textAlign: 'right' }, children: "Q3" }) }), _jsx(Cell, { style: { padding: 8 }, children: _jsx(Text, { style: { fontSize: 8, fontWeight: 700, color: c.slate500, letterSpacing: 0.5, textAlign: 'right' }, children: "Q4" }) })] }), tableData.map((row, i) => (_jsxs(Row, { style: { backgroundColor: i % 2 === 0 ? c.white : c.slate50, borderBottom: `1px solid ${c.slate200}` }, children: [_jsx(Cell, { style: { padding: 8 }, children: _jsx(Text, { style: { fontSize: 9, fontWeight: 600, color: c.slate900 }, children: row.region }) }), _jsx(Cell, { style: { padding: 8 }, children: _jsx(Text, { style: { fontSize: 9, color: c.slate700, textAlign: 'right' }, children: row.q1 }) }), _jsx(Cell, { style: { padding: 8 }, children: _jsx(Text, { style: { fontSize: 9, color: c.slate700, textAlign: 'right' }, children: row.q2 }) }), _jsx(Cell, { style: { padding: 8 }, children: _jsx(Text, { style: { fontSize: 9, color: c.slate700, textAlign: 'right' }, children: row.q3 }) }), _jsx(Cell, { style: { padding: 8 }, children: _jsx(Text, { style: { fontSize: 9, color: c.slate700, textAlign: 'right' }, children: row.q4 }) })] }, i)))] }), _jsx(PageBreak, {}), _jsxs(Text, { bookmark: data.sections[2].title, style: { fontSize: 20, fontWeight: 700, color: c.slate900, marginBottom: 12 }, children: ["3. ", data.sections[2].title] }), _jsx(Text, { style: { fontSize: 10, color: c.slate700, lineHeight: 1.6, marginBottom: 16 }, children: data.sections[2].intro }), _jsxs(View, { style: { flexDirection: 'row', gap: 16, marginBottom: 24 }, children: [_jsxs(View, { style: { flexGrow: 1 }, children: [_jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: c.slate700, marginBottom: 6 }, children: "Revenue by Region" }), _jsxs(View, { style: { backgroundColor: c.slate50, borderRadius: 4, border: `1px solid ${c.slate200}`, padding: 8 }, children: [_jsx(Svg, { width: 230, height: 150, viewBox: "0 0 230 150", content: renderBarChart(tableData) }), _jsx(View, { style: { gap: 3, marginTop: 8 }, children: tableData.map((row, i) => (_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 4 }, children: [_jsx(View, { style: { width: 8, height: 8, borderRadius: 2, backgroundColor: CHART_COLORS[i % CHART_COLORS.length] } }), _jsx(Text, { style: { fontSize: 7, color: c.slate500 }, children: row.region })] }, i))) })] })] }), _jsxs(View, { style: { flexGrow: 1 }, children: [_jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: c.slate700, marginBottom: 6 }, children: "Market Share" }), _jsxs(View, { style: { backgroundColor: c.slate50, borderRadius: 4, border: `1px solid ${c.slate200}`, padding: 8 }, children: [_jsx(View, { style: { alignItems: 'center' }, children: _jsx(Svg, { width: 110, height: 150, viewBox: "0 0 110 150", content: renderDonutChart(tableData) }) }), _jsx(View, { style: { gap: 3, marginTop: 8 }, children: tableData.map((row, i) => {
|
|
172
150
|
const total = tableData.reduce((s, r) => s + parseFloat(r.q1.replace(/[$,]/g, '')) + parseFloat(r.q2.replace(/[$,]/g, ''))
|
|
173
151
|
+ parseFloat(r.q3.replace(/[$,]/g, '')) + parseFloat(r.q4.replace(/[$,]/g, '')), 0);
|
|
174
152
|
const rowTotal = parseFloat(row.q1.replace(/[$,]/g, '')) + parseFloat(row.q2.replace(/[$,]/g, ''))
|
|
175
153
|
+ parseFloat(row.q3.replace(/[$,]/g, '')) + parseFloat(row.q4.replace(/[$,]/g, ''));
|
|
176
154
|
const pct = ((rowTotal / total) * 100).toFixed(0);
|
|
177
|
-
return (_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 3 }, children: [_jsx(View, { style: { width: 8, height: 8, borderRadius: 2, backgroundColor: CHART_COLORS[i % CHART_COLORS.length] } }), _jsxs(Text, { style: { fontSize: 7, color:
|
|
178
|
-
}) })] })] })] }), _jsx(Text, { style:
|
|
155
|
+
return (_jsxs(View, { style: { flexDirection: 'row', alignItems: 'center', gap: 3 }, children: [_jsx(View, { style: { width: 8, height: 8, borderRadius: 2, backgroundColor: CHART_COLORS[i % CHART_COLORS.length] } }), _jsxs(Text, { style: { fontSize: 7, color: c.slate500 }, children: [row.region, " ", pct, "%"] })] }, i));
|
|
156
|
+
}) })] })] })] }), _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: c.slate700, marginBottom: 6 }, children: "Quarterly Growth Trend" }), _jsxs(View, { style: { backgroundColor: c.slate50, borderRadius: 4, border: `1px solid ${c.slate200}`, padding: '12 0', marginBottom: 24 }, children: [_jsx(Svg, { width: 484, height: 140, viewBox: "0 0 484 140", content: renderLineChart(tableData) }), _jsx(View, { style: { position: 'relative', height: 14, marginTop: 4 }, children: ['Q1', 'Q2', 'Q3', 'Q4'].map((q, i) => (_jsx(Text, { style: { position: 'absolute', left: 16 + (452 / 3) * i - 12, width: 24, fontSize: 8, color: c.slate500, textAlign: 'center' }, children: q }, i))) })] }), _jsx(PageBreak, {}), _jsxs(Text, { bookmark: data.sections[3].title, style: { fontSize: 20, fontWeight: 700, color: c.slate900, marginBottom: 12 }, children: ["4. ", data.sections[3].title] }), _jsx(Text, { style: { fontSize: 10, color: c.slate700, lineHeight: 1.6, marginBottom: 16 }, children: data.sections[3].intro }), data.sections[3].items.map((item, i) => (_jsxs(View, { style: { flexDirection: 'row', gap: 24, marginBottom: 16, padding: 16, backgroundColor: c.slate50, borderRadius: 4, borderLeft: `3px solid ${c.slate900}` }, children: [_jsx(View, { style: { width: 24, height: 24, backgroundColor: c.slate900, borderRadius: 12, justifyContent: 'center', alignItems: 'center' }, children: _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: c.white, lineHeight: 1.2 }, children: i + 1 }) }), _jsxs(View, { style: { flexGrow: 1, flexShrink: 1 }, children: [_jsx(Text, { style: { fontSize: 11, fontWeight: 700, color: c.slate900, marginBottom: 4 }, children: item.title }), _jsx(Text, { style: { fontSize: 9, color: c.slate500, lineHeight: 1.5 }, children: item.description }), _jsxs(View, { style: { flexDirection: 'row', gap: 16, marginTop: 8 }, children: [_jsxs(View, { style: { flexDirection: 'row', gap: 4 }, children: [_jsx(Text, { style: { fontSize: 8, fontWeight: 700, color: c.slate500 }, children: "Priority:" }), _jsx(Text, { style: { fontSize: 8, color: c.slate700 }, children: item.priority })] }), _jsxs(View, { style: { flexDirection: 'row', gap: 4 }, children: [_jsx(Text, { style: { fontSize: 8, fontWeight: 700, color: c.slate500 }, children: "Timeline:" }), _jsx(Text, { style: { fontSize: 8, color: c.slate700 }, children: item.timeline })] })] })] })] }, i)))] })] }));
|
|
179
157
|
}
|
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Document, Page, View, Text } from '@formepdf/react';
|
|
3
|
+
const c = {
|
|
4
|
+
slate900: '#0f172a',
|
|
5
|
+
slate700: '#334155',
|
|
6
|
+
slate500: '#64748b',
|
|
7
|
+
slate400: '#94a3b8',
|
|
8
|
+
slate300: '#cbd5e1',
|
|
9
|
+
slate200: '#e2e8f0',
|
|
10
|
+
white: '#ffffff',
|
|
11
|
+
red600: '#dc2626',
|
|
12
|
+
};
|
|
3
13
|
export default function ShippingLabel(data) {
|
|
4
|
-
return (_jsx(Document, { title: `Shipping Label - ${data.tracking}`, children: _jsxs(Page, { size: { width: 288, height: 432 }, margin: 16, children: [_jsxs(View, { style: { marginBottom: 12, padding: 8 }, children: [_jsx(Text, { style: { fontSize: 7, fontWeight: 700, color:
|
|
14
|
+
return (_jsx(Document, { title: `Shipping Label - ${data.tracking}`, children: _jsxs(Page, { size: { width: 288, height: 432 }, margin: 16, children: [_jsxs(View, { style: { marginBottom: 12, padding: 8 }, children: [_jsx(Text, { style: { fontSize: 7, fontWeight: 700, color: c.slate500, textTransform: 'uppercase', letterSpacing: 1, marginBottom: 4 }, children: "From" }), _jsx(Text, { style: { fontSize: 8, color: c.slate700 }, children: data.from.name }), _jsx(Text, { style: { fontSize: 8, color: c.slate700 }, children: data.from.address }), _jsx(Text, { style: { fontSize: 8, color: c.slate700 }, children: data.from.cityStateZip })] }), _jsx(View, { style: { borderTop: `2px solid ${c.slate900}`, marginBottom: 12 } }), _jsxs(View, { style: { padding: 12, marginBottom: 12 }, children: [_jsx(Text, { style: { fontSize: 7, fontWeight: 700, color: c.slate500, textTransform: 'uppercase', letterSpacing: 1, marginBottom: 8 }, children: "To" }), _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: c.slate900 }, children: data.to.name }), _jsx(Text, { style: { fontSize: 10, color: c.slate900, marginTop: 4 }, children: data.to.address }), data.to.address2 && (_jsx(Text, { style: { fontSize: 10, color: c.slate900 }, children: data.to.address2 })), _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: c.slate900, marginTop: 2 }, children: data.to.cityStateZip })] }), _jsxs(View, { style: { marginBottom: 8, padding: 8 }, children: [_jsx(View, { style: { alignItems: 'center', marginBottom: 8 }, children: _jsx(View, { style: { flexDirection: 'row', gap: 2 }, children: [2, 1, 3, 1, 2, 3, 1, 2, 1, 3, 2, 1, 3, 1, 2, 1, 3, 2, 1, 2, 3, 1, 2, 1, 3].map((w, i) => (_jsx(View, { style: { width: w, height: 40, backgroundColor: c.slate900 } }, i))) }) }), _jsx(Text, { style: { fontSize: 8, fontWeight: 700, color: c.slate900, letterSpacing: 2, textAlign: 'center' }, children: data.tracking })] }), _jsx(View, { style: { borderTop: `1px solid ${c.slate300}`, marginBottom: 8 } }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', padding: 8 }, children: [_jsxs(View, { style: { flex: 1 }, children: [_jsx(Text, { style: { fontSize: 7, color: c.slate500, textTransform: 'uppercase', letterSpacing: 1 }, children: "Weight" }), _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: c.slate900, marginTop: 2 }, children: data.weight })] }), _jsxs(View, { style: { flex: 2, justifyContent: 'center', alignItems: 'center' }, children: [_jsx(Text, { style: { width: '100%', textAlign: 'center', fontSize: 7, color: c.slate500, textTransform: 'uppercase', letterSpacing: 1 }, children: "Dimensions" }), _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: c.slate900, marginTop: 2 }, children: data.dimensions })] }), _jsxs(View, { style: { flex: 1, justifyContent: 'center', alignItems: 'flex-end' }, children: [_jsx(Text, { style: { width: '100%', textAlign: 'right', fontSize: 7, color: c.slate500, textTransform: 'uppercase', letterSpacing: 1 }, children: "Service" }), _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: c.slate900, marginTop: 2 }, children: data.service })] })] }), data.stamps && data.stamps.length > 0 && (_jsx(View, { style: { flexDirection: 'row', gap: 8, marginTop: 8, padding: 8 }, children: data.stamps.map((stamp, i) => (_jsx(View, { style: { flex: 1, textAlign: 'center', padding: '6 12', borderWidth: 2, borderColor: c.red600, borderRadius: 2 }, children: _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: c.red600, textTransform: 'uppercase' }, children: stamp }) }, i))) }))] }) }));
|
|
5
15
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@formepdf/next",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.0",
|
|
4
4
|
"description": "PDF route handlers and responses for Next.js App Router",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
"dist"
|
|
13
13
|
],
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@formepdf/react": "0.
|
|
16
|
-
"@formepdf/core": "0.
|
|
15
|
+
"@formepdf/react": "0.6.0",
|
|
16
|
+
"@formepdf/core": "0.6.0"
|
|
17
17
|
},
|
|
18
18
|
"peerDependencies": {
|
|
19
19
|
"next": ">=14.0.0"
|