@formepdf/next 0.6.0 → 0.6.1
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,26 +1,14 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Document, Page, View, Text,
|
|
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
|
-
}
|
|
2
|
+
import { Document, Page, View, Text, Table, Row, Cell, Fixed } from '@formepdf/react';
|
|
16
3
|
export default function Invoice(data) {
|
|
17
|
-
const
|
|
4
|
+
const items = data.items || [];
|
|
5
|
+
const subtotal = items.reduce((sum, item) => sum + item.quantity * item.unitPrice, 0);
|
|
18
6
|
const tax = subtotal * (data.taxRate || 0);
|
|
19
7
|
const total = subtotal + tax;
|
|
20
|
-
return (_jsx(Document, { title: `Invoice ${data.invoiceNumber}`, author: data.company.name, children: _jsxs(Page, { size: "Letter", margin:
|
|
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, borderTopWidth: 1, borderColor: '#e2e8f0' }, children: [_jsx(Text, { style: { fontSize: 8, color: '#94a3b8' }, children: data.company.name }), _jsxs(Text, { style: { fontSize: 8, color: '#94a3b8' }, children: ["Page ", '{{pageNumber}}', " of ", '{{totalPages}}'] })] }) }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 32 }, children: [_jsxs(View, { children: [_jsx(View, { style: { width: 48, height: 48, backgroundColor: '#2563eb', borderRadius: 8, marginBottom: 12, justifyContent: 'center', alignItems: 'center' }, children: _jsx(Text, { style: { fontSize: 18, fontWeight: 700, color: '#ffffff', textAlign: 'center', lineHeight: 1.2 }, children: data.company.initials }) }), _jsx(Text, { style: { fontSize: 16, fontWeight: 700, color: '#1e293b' }, children: data.company.name }), _jsx(Text, { style: { fontSize: 9, color: '#64748b', marginTop: 4 }, children: data.company.address }), _jsx(Text, { style: { fontSize: 9, color: '#64748b' }, children: data.company.cityStateZip }), _jsx(Text, { style: { fontSize: 9, color: '#64748b' }, children: data.company.email })] }), _jsxs(View, { style: { alignItems: 'flex-end' }, children: [_jsx(Text, { style: { fontSize: 32, fontWeight: 700, color: '#2563eb' }, children: "INVOICE" }), _jsxs(Text, { style: { fontSize: 10, color: '#64748b', marginTop: 8 }, children: ["Invoice No: ", data.invoiceNumber] }), _jsxs(Text, { style: { fontSize: 10, color: '#64748b', marginTop: 2 }, children: ["Date: ", data.date] }), _jsxs(Text, { style: { fontSize: 10, color: '#64748b', marginTop: 2 }, children: ["Due: ", data.dueDate] })] })] }), _jsxs(View, { style: { flexDirection: 'row', gap: 32, marginBottom: 24 }, children: [_jsxs(View, { style: { flexGrow: 1 }, children: [_jsx(Text, { style: { fontSize: 9, fontWeight: 700, color: '#2563eb', textTransform: 'uppercase', letterSpacing: 1, marginBottom: 8 }, children: "Bill To" }), _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: '#1e293b' }, children: data.billTo.name }), _jsx(Text, { style: { fontSize: 9, color: '#64748b', marginTop: 2 }, children: data.billTo.company }), _jsx(Text, { style: { fontSize: 9, color: '#64748b', marginTop: 2 }, children: data.billTo.address }), _jsx(Text, { style: { fontSize: 9, color: '#64748b', marginTop: 2 }, children: data.billTo.cityStateZip }), _jsx(Text, { style: { fontSize: 9, color: '#64748b', marginTop: 2 }, children: data.billTo.email })] }), _jsxs(View, { style: { flexGrow: 1 }, children: [_jsx(Text, { style: { fontSize: 9, fontWeight: 700, color: '#2563eb', textTransform: 'uppercase', letterSpacing: 1, marginBottom: 8 }, children: "Ship To" }), _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: '#1e293b' }, children: data.shipTo.name }), _jsx(Text, { style: { fontSize: 9, color: '#64748b', marginTop: 2 }, children: data.shipTo.address }), _jsx(Text, { style: { fontSize: 9, color: '#64748b', marginTop: 2 }, children: data.shipTo.cityStateZip })] })] }), _jsxs(Table, { columns: [
|
|
21
9
|
{ width: { fraction: 0.45 } },
|
|
22
10
|
{ width: { fraction: 0.15 } },
|
|
23
11
|
{ width: { fraction: 0.2 } },
|
|
24
|
-
{ width: { fraction: 0.2 } }
|
|
25
|
-
], children: [_jsxs(Row, { header: true, style: { backgroundColor:
|
|
12
|
+
{ width: { fraction: 0.2 } }
|
|
13
|
+
], children: [_jsxs(Row, { header: true, style: { backgroundColor: '#2563eb' }, children: [_jsx(Cell, { style: { padding: 10 }, children: _jsx(Text, { style: { fontSize: 9, fontWeight: 700, color: '#ffffff' }, children: "Description" }) }), _jsx(Cell, { style: { padding: 10 }, children: _jsx(Text, { style: { fontSize: 9, fontWeight: 700, color: '#ffffff', textAlign: 'center' }, children: "Qty" }) }), _jsx(Cell, { style: { padding: 10 }, children: _jsx(Text, { style: { fontSize: 9, fontWeight: 700, color: '#ffffff', textAlign: 'right' }, children: "Unit Price" }) }), _jsx(Cell, { style: { padding: 10 }, children: _jsx(Text, { style: { fontSize: 9, fontWeight: 700, color: '#ffffff', textAlign: 'right' }, children: "Amount" }) })] }), items.map((item, i) => (_jsxs(Row, { style: { backgroundColor: i % 2 === 0 ? '#ffffff' : '#f8fafc' }, children: [_jsx(Cell, { style: { padding: 10 }, children: _jsx(Text, { style: { fontSize: 9, color: '#1e293b' }, children: item.description }) }), _jsx(Cell, { style: { padding: 10 }, children: _jsx(Text, { style: { fontSize: 9, color: '#475569', textAlign: 'center' }, children: item.quantity }) }), _jsx(Cell, { style: { padding: 10 }, children: _jsxs(Text, { style: { fontSize: 9, color: '#475569', textAlign: 'right' }, children: ["$", item.unitPrice.toFixed(2)] }) }), _jsx(Cell, { style: { padding: 10 }, children: _jsxs(Text, { style: { fontSize: 9, color: '#1e293b', textAlign: 'right' }, children: ["$", (item.quantity * item.unitPrice).toFixed(2)] }) })] }, i)))] }), _jsx(View, { style: { flexDirection: 'row', justifyContent: 'flex-end', marginTop: 16 }, children: _jsxs(View, { style: { width: 200 }, children: [_jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', padding: 8 }, children: [_jsx(Text, { style: { fontSize: 9, color: '#64748b' }, children: "Subtotal" }), _jsxs(Text, { style: { fontSize: 9, color: '#1e293b' }, children: ["$", subtotal.toFixed(2)] })] }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', padding: 8 }, children: [_jsxs(Text, { style: { fontSize: 9, color: '#64748b' }, children: ["Tax (", (data.taxRate * 100).toFixed(0), "%)"] }), _jsxs(Text, { style: { fontSize: 9, color: '#1e293b' }, children: ["$", tax.toFixed(2)] })] }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', padding: 12, backgroundColor: '#2563eb', borderRadius: 4, marginTop: 4 }, children: [_jsx(Text, { style: { fontSize: 11, fontWeight: 700, color: '#ffffff' }, children: "Total Due" }), _jsxs(Text, { style: { fontSize: 11, fontWeight: 700, color: '#ffffff' }, children: ["$", total.toFixed(2)] })] })] }) }), _jsxs(View, { style: { marginTop: 32, padding: 16, backgroundColor: '#f8fafc', borderRadius: 4 }, children: [_jsx(Text, { style: { fontSize: 9, fontWeight: 700, color: '#1e293b', marginBottom: 8 }, children: "Payment Terms" }), _jsx(Text, { style: { fontSize: 9, color: '#64748b' }, children: data.paymentTerms })] }), data.notes && (_jsxs(View, { style: { marginTop: 16 }, children: [_jsx(Text, { style: { fontSize: 9, fontWeight: 700, color: '#1e293b', marginBottom: 4 }, children: "Notes" }), _jsx(Text, { style: { fontSize: 9, color: '#64748b' }, children: data.notes })] }))] }) }));
|
|
26
14
|
}
|
|
@@ -1,22 +1,9 @@
|
|
|
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
|
-
}
|
|
16
3
|
export default function Receipt(data) {
|
|
17
4
|
const items = data.items || [];
|
|
18
5
|
const subtotal = items.reduce((sum, item) => sum + item.price * (item.quantity || 1), 0);
|
|
19
6
|
const tax = subtotal * (data.taxRate || 0);
|
|
20
7
|
const total = subtotal + tax;
|
|
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:
|
|
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: '#1e293b' }, children: data.store.name }), _jsx(Text, { style: { fontSize: 9, color: '#64748b', marginTop: 4 }, children: data.store.address }), _jsx(Text, { style: { fontSize: 9, color: '#64748b', marginTop: 2 }, children: data.store.cityStateZip }), _jsx(Text, { style: { fontSize: 9, color: '#64748b', marginTop: 2 }, children: data.store.phone })] }), _jsx(View, { style: { borderTopWidth: 1, borderColor: '#e2e8f0', marginBottom: 16 } }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 16 }, children: [_jsxs(Text, { style: { fontSize: 9, color: '#64748b' }, children: ["Receipt #", data.receiptNumber] }), _jsx(Text, { style: { fontSize: 9, color: '#64748b' }, children: data.date })] }), items.map((item, i) => (_jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', paddingTop: 6, paddingBottom: 6 }, children: [_jsxs(View, { style: { flexDirection: 'row', gap: 8, flexGrow: 1 }, children: [_jsx(Text, { style: { fontSize: 9, color: '#1e293b' }, children: item.name }), (item.quantity || 1) > 1 && (_jsxs(Text, { style: { fontSize: 9, color: '#94a3b8' }, children: ["x", item.quantity] }))] }), _jsxs(Text, { style: { fontSize: 9, color: '#1e293b' }, children: ["$", (item.price * (item.quantity || 1)).toFixed(2)] })] }, i))), _jsx(View, { style: { borderTopWidth: 1, borderColor: '#e2e8f0', marginTop: 12, marginBottom: 12 } }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', paddingTop: 4, paddingBottom: 4 }, children: [_jsx(Text, { style: { fontSize: 9, color: '#64748b' }, children: "Subtotal" }), _jsxs(Text, { style: { fontSize: 9, color: '#1e293b' }, children: ["$", subtotal.toFixed(2)] })] }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', paddingTop: 4, paddingBottom: 4 }, children: [_jsxs(Text, { style: { fontSize: 9, color: '#64748b' }, children: ["Tax (", (data.taxRate * 100).toFixed(1), "%)"] }), _jsxs(Text, { style: { fontSize: 9, color: '#1e293b' }, children: ["$", tax.toFixed(2)] })] }), _jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', paddingTop: 12, paddingBottom: 12, borderTopWidth: 2, borderColor: '#1e293b', marginTop: 4 }, children: [_jsx(Text, { style: { fontSize: 12, fontWeight: 700, color: '#1e293b' }, children: "Total" }), _jsxs(Text, { style: { fontSize: 12, fontWeight: 700, color: '#1e293b' }, children: ["$", total.toFixed(2)] })] }), _jsxs(View, { style: { marginTop: 16, paddingTop: 12, paddingBottom: 12, borderTopWidth: 1, borderColor: '#e2e8f0' }, children: [_jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between' }, children: [_jsx(Text, { style: { fontSize: 9, color: '#64748b' }, children: "Payment Method" }), _jsx(Text, { style: { fontSize: 9, color: '#1e293b' }, children: data.paymentMethod })] }), data.cardLastFour && (_jsxs(View, { style: { flexDirection: 'row', justifyContent: 'space-between', marginTop: 4 }, children: [_jsx(Text, { style: { fontSize: 9, color: '#64748b' }, children: "Card" }), _jsxs(Text, { style: { fontSize: 9, color: '#1e293b' }, children: ["****", data.cardLastFour] })] }))] }), _jsxs(View, { style: { alignItems: 'center', marginTop: 32 }, children: [_jsx(Text, { style: { fontSize: 10, color: '#64748b' }, children: "Thank you for your purchase!" }), _jsx(Text, { style: { fontSize: 8, color: '#94a3b8', marginTop: 8 }, children: data.store.website })] })] }) }));
|
|
22
9
|
}
|
package/dist/templates/report.js
CHANGED
|
@@ -1,19 +1,27 @@
|
|
|
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 } from '@formepdf/react';
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
|
|
2
|
+
import { Document, Page, View, Text, Svg, Table, Row, Cell, Fixed, PageBreak, StyleSheet } from '@formepdf/react';
|
|
3
|
+
const styles = StyleSheet.create({
|
|
4
|
+
sectionTitle: { fontSize: 20, fontWeight: 700, color: '#0f172a', marginBottom: 12 },
|
|
5
|
+
bodyText: { fontSize: 10, color: '#334155', lineHeight: 1.6, marginBottom: 12 },
|
|
6
|
+
introText: { fontSize: 10, color: '#334155', lineHeight: 1.6, marginBottom: 16 },
|
|
7
|
+
headerFooterText: { fontSize: 8, color: '#94a3b8' },
|
|
8
|
+
headerBar: { flexDirection: 'row', justifyContent: 'space-between', paddingBottom: 8, borderBottomWidth: 1, borderColor: '#e2e8f0', marginBottom: 16 },
|
|
9
|
+
footerBar: { flexDirection: 'row', justifyContent: 'space-between', paddingTop: 8, borderTopWidth: 1, borderColor: '#e2e8f0' },
|
|
10
|
+
tableHeaderCell: { padding: 8 },
|
|
11
|
+
tableHeaderText: { fontSize: 9, fontWeight: 700, color: '#ffffff', textAlign: 'right' },
|
|
12
|
+
tableCell: { padding: 8 },
|
|
13
|
+
tableCellText: { fontSize: 9, color: '#334155', textAlign: 'right' },
|
|
14
|
+
chartTitle: { fontSize: 10, fontWeight: 700, color: '#334155', marginBottom: 6 },
|
|
15
|
+
recCard: { flexDirection: 'row', gap: 24, marginBottom: 16, padding: 16, backgroundColor: '#f8fafc', borderRadius: 4, borderLeftWidth: 3, borderColor: '#0f172a' },
|
|
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
|
+
});
|
|
16
23
|
// ── Chart SVG generators ─────────────────────────────────────────────
|
|
24
|
+
const CHART_COLORS = ['#3b82f6', '#0f172a', '#64748b', '#94a3b8', '#cbd5e1'];
|
|
17
25
|
function renderBarChart(tableData) {
|
|
18
26
|
const totals = tableData.map((r) => ({
|
|
19
27
|
label: r.region,
|
|
@@ -27,23 +35,27 @@ function renderBarChart(tableData) {
|
|
|
27
35
|
const barW = Math.min(32, (w - 20) / totals.length - 8);
|
|
28
36
|
const gap = (w - barW * totals.length) / (totals.length + 1);
|
|
29
37
|
let svg = '';
|
|
38
|
+
// Grid lines
|
|
30
39
|
for (let i = 0; i <= 4; i++) {
|
|
31
40
|
const y = barAreaTop + (barAreaH / 4) * i;
|
|
32
|
-
svg += `<line x1="0" y1="${y}" x2="${w}" y2="${y}" stroke="
|
|
41
|
+
svg += `<line x1="0" y1="${y}" x2="${w}" y2="${y}" stroke="#e2e8f0" stroke-width="0.5"/>`;
|
|
33
42
|
}
|
|
43
|
+
// Bars and labels
|
|
34
44
|
totals.forEach((t, i) => {
|
|
35
45
|
const x = gap + i * (barW + gap);
|
|
36
46
|
const barH = (t.value / maxVal) * barAreaH;
|
|
37
47
|
const y = barAreaBottom - barH;
|
|
38
48
|
svg += `<rect x="${x}" y="${y}" width="${barW}" height="${barH}" fill="${CHART_COLORS[i % CHART_COLORS.length]}" rx="2"/>`;
|
|
49
|
+
// Region label below bar
|
|
39
50
|
const labelX = x + barW / 2;
|
|
40
51
|
svg += `<rect x="${labelX - 2}" y="${barAreaBottom + 4}" width="4" height="4" fill="${CHART_COLORS[i % CHART_COLORS.length]}" rx="1"/>`;
|
|
41
52
|
});
|
|
42
53
|
return svg;
|
|
43
54
|
}
|
|
55
|
+
/** Approximate a circular arc as cubic bezier segments. */
|
|
44
56
|
function arcPath(cx, cy, r, startAngle, endAngle) {
|
|
45
57
|
let path = '';
|
|
46
|
-
const step = Math.PI / 2;
|
|
58
|
+
const step = Math.PI / 2; // max 90 degrees per segment
|
|
47
59
|
let a1 = startAngle;
|
|
48
60
|
while (a1 < endAngle - 0.001) {
|
|
49
61
|
const a2 = Math.min(a1 + step, endAngle);
|
|
@@ -61,28 +73,7 @@ function arcPath(cx, cy, r, startAngle, endAngle) {
|
|
|
61
73
|
}
|
|
62
74
|
return path;
|
|
63
75
|
}
|
|
64
|
-
function
|
|
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
|
-
}
|
|
76
|
+
function f(n) { return n.toFixed(2); }
|
|
86
77
|
function renderDonutChart(tableData) {
|
|
87
78
|
const totals = tableData.map((r) => ({
|
|
88
79
|
label: r.region,
|
|
@@ -92,7 +83,7 @@ function renderDonutChart(tableData) {
|
|
|
92
83
|
const sum = totals.reduce((s, t) => s + t.value, 0);
|
|
93
84
|
const cx = 55, cy = 75, r = 48, innerR = 28;
|
|
94
85
|
let svg = '';
|
|
95
|
-
let angle = -Math.PI / 2;
|
|
86
|
+
let angle = -Math.PI / 2; // start at top
|
|
96
87
|
totals.forEach((t, i) => {
|
|
97
88
|
const sliceAngle = (t.value / sum) * Math.PI * 2;
|
|
98
89
|
if (sliceAngle < 0.01) {
|
|
@@ -108,6 +99,31 @@ function renderDonutChart(tableData) {
|
|
|
108
99
|
});
|
|
109
100
|
return svg;
|
|
110
101
|
}
|
|
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
|
+
}
|
|
111
127
|
function renderLineChart(tableData) {
|
|
112
128
|
const quarters = ['q1', 'q2', 'q3', 'q4'];
|
|
113
129
|
const qTotals = quarters.map(q => tableData.reduce((sum, r) => sum + parseFloat(r[q].replace(/[$,]/g, '')), 0));
|
|
@@ -117,41 +133,47 @@ function renderLineChart(tableData) {
|
|
|
117
133
|
const padL = 16, padR = 16, padT = 12, padB = 24;
|
|
118
134
|
const plotW = w - padL - padR, plotH = h - padT - padB;
|
|
119
135
|
let svg = '';
|
|
136
|
+
// Grid lines
|
|
120
137
|
for (let i = 0; i <= 4; i++) {
|
|
121
138
|
const y = padT + (plotH / 4) * i;
|
|
122
|
-
svg += `<line x1="${padL}" y1="${y}" x2="${w - padR}" y2="${y}" stroke="
|
|
139
|
+
svg += `<line x1="${padL}" y1="${y}" x2="${w - padR}" y2="${y}" stroke="#e2e8f0" stroke-width="0.5"/>`;
|
|
123
140
|
}
|
|
141
|
+
// Plot points
|
|
124
142
|
const points = qTotals.map((v, i) => ({
|
|
125
143
|
x: padL + (plotW / (quarters.length - 1)) * i,
|
|
126
144
|
y: padT + plotH - ((v - minVal) / (maxVal - minVal)) * plotH,
|
|
127
145
|
}));
|
|
146
|
+
// Fill area under the line
|
|
128
147
|
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`;
|
|
129
|
-
svg += `<path d="${areaPath}" fill="
|
|
148
|
+
svg += `<path d="${areaPath}" fill="#3b82f6" fill-opacity="0.08"/>`;
|
|
149
|
+
// Line
|
|
130
150
|
const linePath = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${f(p.x)} ${f(p.y)}`).join(' ');
|
|
131
|
-
svg += `<path d="${linePath}" fill="none" stroke="
|
|
151
|
+
svg += `<path d="${linePath}" fill="none" stroke="#3b82f6" stroke-width="2"/>`;
|
|
152
|
+
// Dots
|
|
132
153
|
points.forEach(p => {
|
|
133
|
-
svg += `<circle cx="${f(p.x)}" cy="${f(p.y)}" r="3.5" fill="
|
|
154
|
+
svg += `<circle cx="${f(p.x)}" cy="${f(p.y)}" r="3.5" fill="#ffffff" stroke="#3b82f6" stroke-width="2"/>`;
|
|
134
155
|
});
|
|
135
|
-
|
|
136
|
-
|
|
156
|
+
// Quarter markers on x-axis
|
|
157
|
+
points.forEach((p) => {
|
|
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"/>`;
|
|
137
159
|
});
|
|
138
160
|
return svg;
|
|
139
161
|
}
|
|
140
162
|
// ── Template ─────────────────────────────────────────────────────────
|
|
141
163
|
export default function Report(data) {
|
|
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:
|
|
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: '#0f172a', padding: 32, borderRadius: 4, marginBottom: 32 }, children: [_jsx(Text, { style: { fontSize: 32, fontWeight: 700, color: '#ffffff' }, children: data.title }), _jsx(Text, { style: { fontSize: 14, color: '#94a3b8', 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: '#64748b' }, children: "Prepared by" }), _jsx(Text, { style: { fontSize: 12, fontWeight: 700, color: '#1e293b', marginTop: 4 }, children: data.author }), _jsx(Text, { style: { fontSize: 10, color: '#64748b', marginTop: 2 }, children: data.department })] }), _jsxs(View, { style: { alignItems: 'flex-end' }, children: [_jsx(Text, { style: { fontSize: 10, color: '#64748b' }, children: "Date" }), _jsx(Text, { style: { fontSize: 12, fontWeight: 700, color: '#1e293b', marginTop: 4 }, children: data.date }), _jsx(Text, { style: { fontSize: 10, color: '#64748b', marginTop: 2 }, children: data.classification })] })] })] }) }), _jsxs(Page, { size: "Letter", margin: 54, children: [_jsx(Fixed, { position: "header", children: _jsxs(View, { style: styles.headerBar, children: [_jsx(Text, { style: styles.headerFooterText, children: data.company }), _jsx(Text, { style: styles.headerFooterText, children: data.title })] }) }), _jsx(Fixed, { position: "footer", children: _jsxs(View, { style: styles.footerBar, children: [_jsx(Text, { style: styles.headerFooterText, children: data.classification }), _jsxs(Text, { style: styles.headerFooterText, children: ["Page ", '{{pageNumber}}', " of ", '{{totalPages}}'] })] }) }), _jsx(Text, { style: styles.sectionTitle, children: "Table of Contents" }), data.sections.map((section, i) => (_jsx(View, { href: `#${section.title}`, style: { flexDirection: 'row', justifyContent: 'space-between', paddingVertical: 6, borderBottomWidth: 1, borderColor: '#f1f5f9' }, children: _jsxs(Text, { style: { fontSize: 10, color: '#2563eb', textDecoration: 'underline' }, children: [i + 1, ". ", section.title] }) }, i))), _jsx(PageBreak, {}), _jsxs(Text, { bookmark: data.sections[0].title, style: styles.sectionTitle, children: ["1. ", data.sections[0].title] }), (data.sections[0].paragraphs || []).map((p, i) => (_jsx(Text, { style: styles.bodyText, 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: '#f8fafc', borderRadius: 4, borderWidth: 1, borderColor: '#e2e8f0' }, children: [_jsx(Text, { style: { fontSize: 20, fontWeight: 700, color: '#0f172a' }, children: metric.value }), _jsx(Text, { style: { fontSize: 9, color: '#64748b', marginTop: 4 }, children: metric.label })] }, i))) })), _jsx(PageBreak, {}), _jsxs(Text, { bookmark: data.sections[1].title, style: styles.sectionTitle, children: ["2. ", data.sections[1].title] }), _jsx(Text, { style: styles.introText, children: data.sections[1].intro }), _jsxs(Table, { columns: [
|
|
144
166
|
{ width: { fraction: 0.28 } },
|
|
145
167
|
{ width: { fraction: 0.18 } },
|
|
146
168
|
{ width: { fraction: 0.18 } },
|
|
147
169
|
{ width: { fraction: 0.18 } },
|
|
148
170
|
{ width: { fraction: 0.18 } }
|
|
149
|
-
], children: [_jsxs(Row, { header: true, style: { backgroundColor:
|
|
171
|
+
], children: [_jsxs(Row, { header: true, style: { backgroundColor: '#0f172a' }, children: [_jsx(Cell, { style: styles.tableHeaderCell, children: _jsx(Text, { style: { fontSize: 9, fontWeight: 700, color: '#ffffff' }, children: "Region" }) }), _jsx(Cell, { style: styles.tableHeaderCell, children: _jsx(Text, { style: styles.tableHeaderText, children: "Q1" }) }), _jsx(Cell, { style: styles.tableHeaderCell, children: _jsx(Text, { style: styles.tableHeaderText, children: "Q2" }) }), _jsx(Cell, { style: styles.tableHeaderCell, children: _jsx(Text, { style: styles.tableHeaderText, children: "Q3" }) }), _jsx(Cell, { style: styles.tableHeaderCell, children: _jsx(Text, { style: styles.tableHeaderText, children: "Q4" }) })] }), tableData.map((row, i) => (_jsxs(Row, { style: { backgroundColor: i % 2 === 0 ? '#ffffff' : '#f8fafc' }, children: [_jsx(Cell, { style: styles.tableCell, children: _jsx(Text, { style: { fontSize: 9, color: '#334155', fontWeight: 700 }, children: row.region }) }), _jsx(Cell, { style: styles.tableCell, children: _jsx(Text, { style: styles.tableCellText, children: row.q1 }) }), _jsx(Cell, { style: styles.tableCell, children: _jsx(Text, { style: styles.tableCellText, children: row.q2 }) }), _jsx(Cell, { style: styles.tableCell, children: _jsx(Text, { style: styles.tableCellText, children: row.q3 }) }), _jsx(Cell, { style: styles.tableCell, children: _jsx(Text, { style: styles.tableCellText, children: row.q4 }) })] }, i)))] }), _jsx(PageBreak, {}), _jsxs(Text, { bookmark: data.sections[2].title, style: styles.sectionTitle, children: ["3. ", data.sections[2].title] }), _jsx(Text, { style: styles.introText, children: data.sections[2].intro }), _jsxs(View, { style: { flexDirection: 'row', gap: 16, marginBottom: 24 }, children: [_jsxs(View, { style: { flexGrow: 1 }, children: [_jsx(Text, { style: styles.chartTitle, children: "Revenue by Region" }), _jsxs(View, { style: { backgroundColor: '#f8fafc', borderRadius: 4, borderWidth: 1, borderColor: '#e2e8f0', 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: '#64748b' }, children: row.region })] }, i))) })] })] }), _jsxs(View, { style: { flexGrow: 1 }, children: [_jsx(Text, { style: styles.chartTitle, children: "Market Share" }), _jsxs(View, { style: { backgroundColor: '#f8fafc', borderRadius: 4, borderWidth: 1, borderColor: '#e2e8f0', 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) => {
|
|
150
172
|
const total = tableData.reduce((s, r) => s + parseFloat(r.q1.replace(/[$,]/g, '')) + parseFloat(r.q2.replace(/[$,]/g, ''))
|
|
151
173
|
+ parseFloat(r.q3.replace(/[$,]/g, '')) + parseFloat(r.q4.replace(/[$,]/g, '')), 0);
|
|
152
174
|
const rowTotal = parseFloat(row.q1.replace(/[$,]/g, '')) + parseFloat(row.q2.replace(/[$,]/g, ''))
|
|
153
175
|
+ parseFloat(row.q3.replace(/[$,]/g, '')) + parseFloat(row.q4.replace(/[$,]/g, ''));
|
|
154
176
|
const pct = ((rowTotal / total) * 100).toFixed(0);
|
|
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:
|
|
156
|
-
}) })] })] })] }), _jsx(Text, { style:
|
|
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: '#64748b' }, children: [row.region, " ", pct, "%"] })] }, i));
|
|
178
|
+
}) })] })] })] }), _jsx(Text, { style: styles.chartTitle, children: "Quarterly Growth Trend" }), _jsxs(View, { style: { backgroundColor: '#f8fafc', borderRadius: 4, borderWidth: 1, borderColor: '#e2e8f0', paddingVertical: 12, 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: '#64748b', textAlign: 'center' }, children: q }, i))) })] }), _jsx(PageBreak, {}), _jsxs(Text, { bookmark: data.sections[3].title, style: styles.sectionTitle, children: ["4. ", data.sections[3].title] }), _jsx(Text, { style: styles.introText, children: data.sections[3].intro }), (data.sections[3].items || []).map((item, i) => (_jsxs(View, { style: styles.recCard, children: [_jsx(View, { style: styles.recBadge, children: _jsx(Text, { style: styles.recBadgeText, children: i + 1 }) }), _jsxs(View, { style: { flexGrow: 1, flexShrink: 1 }, children: [_jsx(Text, { style: styles.recTitle, children: item.title }), _jsx(Text, { style: styles.recBody, children: item.description }), _jsxs(View, { style: { flexDirection: 'row', gap: 16, marginTop: 8 }, children: [_jsxs(View, { style: { flexDirection: 'row', gap: 4 }, children: [_jsx(Text, { style: styles.recLabel, children: "Priority:" }), _jsx(Text, { style: styles.recValue, children: item.priority })] }), _jsxs(View, { style: { flexDirection: 'row', gap: 4 }, children: [_jsx(Text, { style: styles.recLabel, children: "Timeline:" }), _jsx(Text, { style: styles.recValue, children: item.timeline })] })] })] })] }, i)))] })] }));
|
|
157
179
|
}
|
|
@@ -1,15 +1,5 @@
|
|
|
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
|
-
};
|
|
13
3
|
export default function ShippingLabel(data) {
|
|
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:
|
|
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: '#64748b', textTransform: 'uppercase', letterSpacing: 1, marginBottom: 4 }, children: "From" }), _jsx(Text, { style: { fontSize: 8, color: '#334155' }, children: data.from.name }), _jsx(Text, { style: { fontSize: 8, color: '#334155' }, children: data.from.address }), _jsx(Text, { style: { fontSize: 8, color: '#334155' }, children: data.from.cityStateZip })] }), _jsx(View, { style: { borderTopWidth: 2, borderColor: '#0f172a', marginBottom: 12 } }), _jsxs(View, { style: { padding: 12, marginBottom: 12 }, children: [_jsx(Text, { style: { fontSize: 7, fontWeight: 700, color: '#64748b', textTransform: 'uppercase', letterSpacing: 1, marginBottom: 8 }, children: "To" }), _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: '#0f172a' }, children: data.to.name }), _jsx(Text, { style: { fontSize: 10, color: '#0f172a', marginTop: 4 }, children: data.to.address }), data.to.address2 && (_jsx(Text, { style: { fontSize: 10, color: '#0f172a' }, children: data.to.address2 })), _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: '#0f172a', marginTop: 2 }, children: data.to.cityStateZip })] }), _jsxs(View, { style: { marginBottom: 8, padding: 8 }, children: [_jsx(View, { style: { alignItems: 'center', marginBottom: 8 }, children: _jsxs(View, { style: { flexDirection: 'row', gap: 2 }, children: [_jsx(View, { style: { width: 2, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 3, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 2, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 3, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 2, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 3, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 2, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 3, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 2, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 3, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 2, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 2, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 3, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 2, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 1, height: 40, backgroundColor: '#0f172a' } }), _jsx(View, { style: { width: 3, height: 40, backgroundColor: '#0f172a' } })] }) }), _jsx(Text, { style: { fontSize: 8, fontWeight: 700, color: '#0f172a', letterSpacing: 2, textAlign: 'center' }, children: data.tracking })] }), _jsx(View, { style: { borderTopWidth: 1, borderColor: '#cbd5e1', 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: '#64748b', textTransform: 'uppercase', letterSpacing: 1 }, children: "Weight" }), _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: '#0f172a', 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: '#64748b', textTransform: 'uppercase', letterSpacing: 1 }, children: "Dimensions" }), _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: '#0f172a', 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: '#64748b', textTransform: 'uppercase', letterSpacing: 1 }, children: "Service" }), _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: '#0f172a', 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', paddingVertical: 6, paddingHorizontal: 12, borderWidth: 2, borderColor: '#dc2626', borderRadius: 2 }, children: _jsx(Text, { style: { fontSize: 10, fontWeight: 700, color: '#dc2626', textTransform: 'uppercase' }, children: stamp }) }, i))) }))] }) }));
|
|
15
5
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@formepdf/next",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.1",
|
|
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.6.
|
|
16
|
-
"@formepdf/core": "0.6.
|
|
15
|
+
"@formepdf/react": "0.6.1",
|
|
16
|
+
"@formepdf/core": "0.6.1"
|
|
17
17
|
},
|
|
18
18
|
"peerDependencies": {
|
|
19
19
|
"next": ">=14.0.0"
|