feat: add PDF preview functionality and normalize email message handling

This commit is contained in:
2026-04-28 01:26:47 -04:00
parent 915ec103fc
commit bd3181fb9d
6 changed files with 293 additions and 229 deletions
+48 -60
View File
@@ -64,6 +64,22 @@ function plainTextToHtml(value: string) {
.replace(/\n/g, "<br>");
}
function normalizeEmailNoteHtml(value: string) {
const visibleText = value
.replace(/<br\s*\/?>/gi, "\n")
.replace(/<\/p>/gi, "\n")
.replace(/<[^>]*>/g, "")
.replace(/&nbsp;|\u00a0/g, " ")
.replace(/&amp;/g, "&")
.replace(/&lt;/g, "<")
.replace(/&gt;/g, ">")
.replace(/&quot;/g, '"')
.replace(/&#39;/g, "'")
.trim();
return visibleText ? value.trim() : "";
}
export default function SendEmailPage() {
const params = useParams();
const router = useRouter();
@@ -194,6 +210,11 @@ export default function SendEmailPage() {
: undefined;
}, [invoiceData]);
const normalizedCustomMessage = useMemo(
() => normalizeEmailNoteHtml(customMessage),
[customMessage],
);
// Initialize email content when invoice loads
useEffect(() => {
if (!invoice || isInitialized) return;
@@ -241,7 +262,7 @@ export default function SendEmailPage() {
invoiceId,
customSubject: subject,
customContent: emailContent,
customMessage: customMessage?.trim() || undefined,
customMessage: normalizedCustomMessage,
useHtml: true,
ccEmails: ccEmail.trim() || undefined,
bccEmails: bccEmail.trim() || undefined,
@@ -385,7 +406,7 @@ export default function SendEmailPage() {
ccEmail={ccEmail}
bccEmail={bccEmail}
content={emailContent}
customMessage={customMessage}
customMessage={normalizedCustomMessage}
invoice={invoice}
className="min-w-0 border-0"
/>
@@ -569,12 +590,11 @@ export default function SendEmailPage() {
{/* Confirmation Dialog */}
<Dialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
<DialogContent className="flex max-h-[90vh] max-w-6xl flex-col overflow-hidden">
<DialogContent>
<DialogHeader>
<DialogTitle>Send Invoice Email?</DialogTitle>
<DialogTitle>Confirm</DialogTitle>
<DialogDescription>
This will send invoice #{invoice.invoiceNumber} to{" "}
<strong>{invoice.client?.email}</strong>
Send this invoice email to <strong>{toEmail}</strong>
{ccEmail && (
<>
{" "}
@@ -587,60 +607,29 @@ export default function SendEmailPage() {
and BCC to <strong>{bccEmail}</strong>
</>
)}
.
{retryCount > 0 && (
<div className="text-muted-foreground mt-2 text-sm">
Retry attempt {retryCount} of 2
</div>
)}
?
</DialogDescription>
{retryCount > 0 && (
<p className="text-muted-foreground text-sm">
Retry attempt {retryCount} of 2
</p>
)}
</DialogHeader>
<div className="grid min-h-0 flex-1 gap-4 overflow-y-auto lg:grid-cols-2">
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2 text-base">
<Edit3 className="h-4 w-4" />
Edit Email Note
</CardTitle>
</CardHeader>
<CardContent>
<EmailComposer
subject={subject}
onSubjectChange={setSubject}
content={emailContent}
onContentChange={setEmailContent}
customMessage={customMessage}
onCustomMessageChange={setCustomMessage}
fromEmail={fromEmail}
toEmail={toEmail}
ccEmail={ccEmail}
onCcEmailChange={setCcEmail}
bccEmail={bccEmail}
onBccEmailChange={setBccEmail}
/>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2 text-base">
<Eye className="h-4 w-4" />
Email Preview
</CardTitle>
</CardHeader>
<CardContent className="p-0">
<EmailPreview
subject={subject}
fromEmail={fromEmail}
toEmail={toEmail}
ccEmail={ccEmail}
bccEmail={bccEmail}
content={emailContent}
customMessage={customMessage}
invoice={invoice}
className="min-w-0 border-0"
/>
</CardContent>
</Card>
<div className="bg-muted/30 space-y-2 border p-3 text-sm">
<div>
<span className="text-muted-foreground">Subject: </span>
<span className="font-medium">{subject}</span>
</div>
<div>
<span className="text-muted-foreground">Attachment: </span>
<span>invoice-{invoice.invoiceNumber}.pdf</span>
</div>
{normalizedCustomMessage && (
<div>
<span className="text-muted-foreground">Email note: </span>
<span>Included</span>
</div>
)}
</div>
<DialogFooter>
<Button
@@ -650,8 +639,7 @@ export default function SendEmailPage() {
Cancel
</Button>
<Button onClick={confirmSendEmail} variant="default">
<Send className="mr-2 h-4 w-4" />
Send Email
Confirm
</Button>
</DialogFooter>
</DialogContent>
+2 -2
View File
@@ -96,7 +96,7 @@ export function EmailComposer({
content: customMessage,
immediatelyRender: false,
onUpdate: ({ editor }) => {
onCustomMessageChange?.(editor.getHTML());
onCustomMessageChange?.(editor.isEmpty ? "" : editor.getHTML());
},
editorProps: {
attributes: {
@@ -109,7 +109,7 @@ export function EmailComposer({
// Update editor content when customMessage prop changes
useEffect(() => {
if (editor && customMessage !== undefined) {
const currentContent = editor.getHTML();
const currentContent = editor.isEmpty ? "" : editor.getHTML();
if (currentContent !== customMessage) {
editor.commands.setContent(customMessage);
}
+66 -56
View File
@@ -3,7 +3,6 @@
import * as React from "react";
import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { PDFViewer } from "@react-pdf/renderer";
import { Button } from "~/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import { Label } from "~/components/ui/label";
@@ -22,7 +21,6 @@ import { PageHeader } from "~/components/layout/page-header";
import { InvoiceLineItems } from "./invoice-line-items";
import { InvoiceCalendarView } from "./invoice-calendar-view";
import { EmailPreview } from "./email-preview";
import { InvoicePDF } from "~/lib/pdf-export";
import { api } from "~/trpc/react";
import { toast } from "sonner";
import {
@@ -129,6 +127,7 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
const [initialized, setInitialized] = useState(false);
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
const [activeTab, setActiveTab] = useState("details");
const [previewTab, setPreviewTab] = useState("pdf");
// Queries (Same as before)
const { data: clients, isLoading: loadingClients } =
@@ -222,6 +221,41 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
() => plainTextToHtml(formData.emailMessage.trim()),
[formData.emailMessage],
);
const pdfPreviewInput = React.useMemo(
() => ({
invoiceNumber: formData.invoiceNumber,
invoicePrefix: formData.invoicePrefix,
businessId: formData.businessId || "",
clientId: formData.clientId,
issueDate: formData.issueDate,
dueDate: formData.dueDate,
status: formData.status,
notes: formData.notes,
emailMessage: formData.emailMessage,
taxRate: formData.taxRate,
currency: formData.currency,
items: formData.items.map((item) => ({
date: item.date,
description: item.description || "Service",
hours: item.hours,
rate: item.rate,
})),
}),
[formData],
);
const { data: pdfPreview, isFetching: pdfPreviewLoading } =
api.invoices.previewPdf.useQuery(pdfPreviewInput, {
enabled:
activeTab === "preview" &&
previewTab === "pdf" &&
Boolean(formData.clientId) &&
formData.items.length > 0 &&
formData.items.every((item) => item.description.trim() !== ""),
refetchOnWindowFocus: false,
staleTime: 0,
});
const selectedClient = React.useMemo(
() => clients?.find((client) => client.id === formData.clientId),
[clients, formData.clientId],
@@ -777,7 +811,11 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
value="preview"
className="mt-6 focus-visible:outline-none"
>
<Tabs defaultValue="pdf" className="w-full">
<Tabs
value={previewTab}
onValueChange={setPreviewTab}
className="w-full"
>
<TabsList className="bg-muted grid h-auto w-full grid-cols-2 rounded-xl p-1">
<TabsTrigger
value="pdf"
@@ -802,60 +840,32 @@ export default function InvoiceForm({ invoiceId }: InvoiceFormProps) {
</CardHeader>
<CardContent className="p-0">
<div className="bg-muted/20 h-[760px] overflow-hidden border-t">
<PDFViewer
showToolbar
style={{ width: "100%", height: "100%", border: 0 }}
>
<InvoicePDF
invoice={{
invoiceNumber: formData.invoiceNumber,
invoicePrefix: formData.invoicePrefix,
issueDate: formData.issueDate,
dueDate: formData.dueDate,
status: formData.status,
totalAmount: totals.total,
taxRate: formData.taxRate,
currency: formData.currency,
notes: formData.notes,
client: selectedClient
? {
name: selectedClient.name,
email: selectedClient.email,
phone: selectedClient.phone,
addressLine1: selectedClient.addressLine1,
addressLine2: selectedClient.addressLine2,
city: selectedClient.city,
state: selectedClient.state,
postalCode: selectedClient.postalCode,
country: selectedClient.country,
}
: null,
business: selectedBusiness
? {
name: selectedBusiness.name,
nickname: selectedBusiness.nickname,
email: selectedBusiness.email,
phone: selectedBusiness.phone,
addressLine1: selectedBusiness.addressLine1,
addressLine2: selectedBusiness.addressLine2,
city: selectedBusiness.city,
state: selectedBusiness.state,
postalCode: selectedBusiness.postalCode,
country: selectedBusiness.country,
website: selectedBusiness.website,
taxId: selectedBusiness.taxId,
}
: null,
items: formData.items.map((item) => ({
date: item.date,
description: item.description,
hours: item.hours,
rate: item.rate,
amount: item.hours * item.rate,
})),
}}
{!formData.clientId ? (
<div className="text-muted-foreground flex h-full items-center justify-center p-6 text-center text-sm">
Select a client to generate the PDF preview.
</div>
) : formData.items.some(
(item) => item.description.trim() === "",
) ? (
<div className="text-muted-foreground flex h-full items-center justify-center p-6 text-center text-sm">
Add descriptions for all line items to generate the
PDF preview.
</div>
) : pdfPreviewLoading && !pdfPreview ? (
<div className="text-muted-foreground flex h-full items-center justify-center p-6 text-center text-sm">
Generating server PDF preview...
</div>
) : pdfPreview ? (
<iframe
title="Server-generated PDF preview"
src={`data:${pdfPreview.contentType};base64,${pdfPreview.base64}`}
className="h-full w-full border-0"
/>
</PDFViewer>
) : (
<div className="text-muted-foreground flex h-full items-center justify-center p-6 text-center text-sm">
PDF preview will appear here.
</div>
)}
</div>
</CardContent>
</Card>
+28 -48
View File
@@ -5,31 +5,11 @@ import {
View,
Image,
StyleSheet,
Font,
pdf,
} from "@react-pdf/renderer";
import { saveAs } from "file-saver";
import React from "react";
Font.register({
family: "Frutiger",
fonts: [
{
src: "/fonts/frutiger/Frutiger.ttf",
fontWeight: "normal",
},
{
src: "/fonts/frutiger/Frutiger_bold.ttf",
fontWeight: "bold",
},
],
});
Font.register({
family: "Frutiger-Bold",
src: "/fonts/frutiger/Frutiger_bold.ttf",
});
// Fallback download function for better browser compatibility
function downloadBlob(blob: Blob, filename: string): void {
try {
@@ -142,7 +122,7 @@ const styles = StyleSheet.create({
page: {
flexDirection: "column",
backgroundColor: "#ffffff",
fontFamily: "Frutiger",
fontFamily: "Helvetica",
fontSize: 10,
paddingTop: 40,
paddingBottom: 80,
@@ -169,7 +149,7 @@ const styles = StyleSheet.create({
},
businessName: {
fontFamily: "Frutiger-Bold",
fontFamily: "Helvetica-Bold",
fontSize: 18,
color: "#0f0f0f",
marginBottom: 4,
@@ -177,7 +157,7 @@ const styles = StyleSheet.create({
businessInfo: {
fontSize: 10,
fontFamily: "Frutiger",
fontFamily: "Helvetica",
color: "#6b7280",
lineHeight: 1.4,
marginBottom: 3,
@@ -185,7 +165,7 @@ const styles = StyleSheet.create({
businessAddress: {
fontSize: 10,
fontFamily: "Frutiger",
fontFamily: "Helvetica",
color: "#6b7280",
lineHeight: 1.4,
marginTop: 4,
@@ -198,14 +178,14 @@ const styles = StyleSheet.create({
invoiceTitle: {
fontSize: 28,
fontFamily: "Frutiger-Bold",
fontFamily: "Helvetica-Bold",
color: "#0f0f0f",
marginBottom: 8,
},
invoiceNumber: {
fontSize: 14,
fontFamily: "Frutiger-Bold",
fontFamily: "Helvetica-Bold",
color: "#374151",
marginBottom: 4,
},
@@ -214,7 +194,7 @@ const styles = StyleSheet.create({
paddingHorizontal: 8,
paddingVertical: 4,
fontSize: 11,
fontFamily: "Frutiger-Bold",
fontFamily: "Helvetica-Bold",
textAlign: "center",
},
@@ -242,13 +222,13 @@ const styles = StyleSheet.create({
sectionTitle: {
fontSize: 12,
fontFamily: "Frutiger-Bold",
fontFamily: "Helvetica-Bold",
color: "#0f0f0f",
marginBottom: 12,
},
clientName: {
fontFamily: "Frutiger-Bold",
fontFamily: "Helvetica-Bold",
fontSize: 12,
color: "#0f0f0f",
marginBottom: 2,
@@ -256,7 +236,7 @@ const styles = StyleSheet.create({
clientInfo: {
fontSize: 10,
fontFamily: "Frutiger",
fontFamily: "Helvetica",
color: "#6b7280",
lineHeight: 1.4,
marginBottom: 2,
@@ -264,7 +244,7 @@ const styles = StyleSheet.create({
clientAddress: {
fontSize: 10,
fontFamily: "Frutiger",
fontFamily: "Helvetica",
color: "#6b7280",
lineHeight: 1.4,
marginTop: 4,
@@ -278,14 +258,14 @@ const styles = StyleSheet.create({
detailLabel: {
fontSize: 11,
fontFamily: "Frutiger",
fontFamily: "Helvetica",
color: "#6b7280",
flex: 1,
},
detailValue: {
fontSize: 10,
fontFamily: "Frutiger-Bold",
fontFamily: "Helvetica-Bold",
color: "#0f0f0f",
flex: 1,
textAlign: "right",
@@ -301,21 +281,21 @@ const styles = StyleSheet.create({
notesTitle: {
fontSize: 11,
fontFamily: "Frutiger-Bold",
fontFamily: "Helvetica-Bold",
color: "#0f0f0f",
marginBottom: 6,
},
notesContent: {
fontSize: 10,
fontFamily: "Frutiger",
fontFamily: "Helvetica",
color: "#374151",
lineHeight: 1.4,
},
businessContact: {
fontSize: 9,
fontFamily: "Frutiger",
fontFamily: "Helvetica",
color: "#6b7280",
lineHeight: 1.4,
},
@@ -339,7 +319,7 @@ const styles = StyleSheet.create({
abridgedBusinessName: {
fontSize: 12,
fontFamily: "Frutiger-Bold",
fontFamily: "Helvetica-Bold",
color: "#0f0f0f",
},
@@ -351,13 +331,13 @@ const styles = StyleSheet.create({
abridgedInvoiceTitle: {
fontSize: 14,
fontFamily: "Frutiger-Bold",
fontFamily: "Helvetica-Bold",
color: "#0f0f0f",
},
abridgedInvoiceNumber: {
fontSize: 12,
fontFamily: "Frutiger-Bold",
fontFamily: "Helvetica-Bold",
color: "#374151",
},
@@ -376,7 +356,7 @@ const styles = StyleSheet.create({
tableHeaderCell: {
fontSize: 10,
fontFamily: "Frutiger-Bold",
fontFamily: "Helvetica-Bold",
color: "#374151",
paddingHorizontal: 4,
},
@@ -421,7 +401,7 @@ const styles = StyleSheet.create({
color: "#0f0f0f",
paddingHorizontal: 4,
paddingVertical: 2,
fontFamily: "Frutiger",
fontFamily: "Helvetica",
},
tableCellDate: {
@@ -437,7 +417,7 @@ const styles = StyleSheet.create({
paddingHorizontal: 2,
textAlign: "left",
flexWrap: "wrap",
fontFamily: "Frutiger",
fontFamily: "Helvetica",
},
tableCellHours: {
@@ -495,7 +475,7 @@ const styles = StyleSheet.create({
totalLabel: {
fontSize: 11,
color: "#6b7280",
fontFamily: "Frutiger",
fontFamily: "Helvetica",
},
totalAmount: {
@@ -513,7 +493,7 @@ const styles = StyleSheet.create({
finalTotalLabel: {
fontSize: 12,
fontFamily: "Frutiger-Bold",
fontFamily: "Helvetica-Bold",
color: "#0f0f0f",
},
@@ -525,7 +505,7 @@ const styles = StyleSheet.create({
itemCount: {
fontSize: 9,
fontFamily: "Frutiger",
fontFamily: "Helvetica",
color: "#9ca3af",
textAlign: "center",
marginTop: 6,
@@ -552,7 +532,7 @@ const styles = StyleSheet.create({
pageNumber: {
fontSize: 10,
fontFamily: "Frutiger",
fontFamily: "Helvetica",
color: "#6b7280",
},
});
@@ -810,7 +790,7 @@ const Footer: React.FC<{ settings: Required<PDFGenerationSettings> }> = ({
<Text
style={{
fontSize: 9,
fontFamily: "Frutiger",
fontFamily: "Helvetica",
color: "#6b7280",
marginLeft: settings.pdfShowLogo ? 8 : 0,
}}
@@ -857,7 +837,7 @@ const TotalsSection: React.FC<{
<Text
style={{
fontSize: 11,
fontFamily: "Frutiger-Bold",
fontFamily: "Helvetica-Bold",
color: "#0f0f0f",
textAlign: "center",
marginBottom: 8,
+23 -5
View File
@@ -17,6 +17,22 @@ function plainTextToHtml(value: string) {
.replace(/\n/g, "<br>");
}
function normalizeEmailNoteHtml(value: string) {
const visibleText = value
.replace(/<br\s*\/?>/gi, "\n")
.replace(/<\/p>/gi, "\n")
.replace(/<[^>]*>/g, "")
.replace(/&nbsp;|\u00a0/g, " ")
.replace(/&amp;/g, "&")
.replace(/&lt;/g, "<")
.replace(/&gt;/g, ">")
.replace(/&quot;/g, '"')
.replace(/&#39;/g, "'")
.trim();
return visibleText ? value.trim() : "";
}
export const emailRouter = createTRPCRouter({
sendInvoice: protectedProcedure
.input(
@@ -105,6 +121,12 @@ export const emailRouter = createTRPCRouter({
"Your Name";
const userEmail =
invoice.business?.email ?? ctx.session.user?.email ?? "";
const customMessage =
input.customMessage !== undefined
? normalizeEmailNoteHtml(input.customMessage)
: invoice.emailMessage
? plainTextToHtml(invoice.emailMessage)
: undefined;
// Generate branded email template
const emailTemplate = generateInvoiceEmailTemplate({
@@ -124,11 +146,7 @@ export const emailRouter = createTRPCRouter({
items: invoice.items,
},
customContent: input.customContent,
customMessage:
input.customMessage ??
(invoice.emailMessage
? plainTextToHtml(invoice.emailMessage)
: undefined),
customMessage,
userName,
userEmail,
baseUrl: process.env.NEXT_PUBLIC_APP_URL ?? "http://localhost:3000",
+126 -58
View File
@@ -6,8 +6,16 @@ import {
invoiceItems,
clients,
businesses,
platformSettings,
} from "~/server/db/schema";
import { TRPCError } from "@trpc/server";
import { generateInvoicePDFBlob } from "~/lib/pdf-export";
import type { db } from "~/server/db";
type InvoiceRouterContext = {
db: typeof db;
session: { user: { id: string } };
};
const invoiceItemSchema = z.object({
date: z.date(),
@@ -44,6 +52,55 @@ const updateStatusSchema = z.object({
status: z.enum(["draft", "sent", "paid"]),
});
async function verifyBusinessAccess(
ctx: InvoiceRouterContext,
businessId?: string | null,
) {
if (!businessId) return null;
const business = await ctx.db.query.businesses.findFirst({
where: eq(businesses.id, businessId),
});
if (!business) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Business not found",
});
}
if (business.createdById !== ctx.session.user.id) {
throw new TRPCError({
code: "FORBIDDEN",
message: "You don't have permission to use this business",
});
}
return business;
}
async function verifyClientAccess(ctx: InvoiceRouterContext, clientId: string) {
const client = await ctx.db.query.clients.findFirst({
where: eq(clients.id, clientId),
});
if (!client) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Client not found",
});
}
if (client.createdById !== ctx.session.user.id) {
throw new TRPCError({
code: "FORBIDDEN",
message: "You don't have permission to use this client",
});
}
return client;
}
const calculateInvoiceTotal = (
items: Array<z.infer<typeof invoiceItemSchema>>,
taxRate: number,
@@ -162,46 +219,10 @@ export const invoicesRouter = createTRPCRouter({
};
// Verify business exists and belongs to user (if provided)
if (cleanInvoiceData.businessId) {
const business = await ctx.db.query.businesses.findFirst({
where: eq(businesses.id, cleanInvoiceData.businessId),
});
if (!business) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Business not found",
});
}
if (business.createdById !== ctx.session.user.id) {
throw new TRPCError({
code: "FORBIDDEN",
message:
"You don't have permission to create invoices for this business",
});
}
}
await verifyBusinessAccess(ctx, cleanInvoiceData.businessId);
// Verify client exists and belongs to user
const client = await ctx.db.query.clients.findFirst({
where: eq(clients.id, cleanInvoiceData.clientId),
});
if (!client) {
throw new TRPCError({
code: "BAD_REQUEST",
message: "Client not found",
});
}
if (client.createdById !== ctx.session.user.id) {
throw new TRPCError({
code: "FORBIDDEN",
message:
"You don't have permission to create invoices for this client",
});
}
await verifyClientAccess(ctx, cleanInvoiceData.clientId);
const totalAmount = calculateInvoiceTotal(
items,
@@ -300,30 +321,12 @@ export const invoicesRouter = createTRPCRouter({
cleanInvoiceData.businessId &&
cleanInvoiceData.businessId.trim() !== ""
) {
const business = await ctx.db.query.businesses.findFirst({
where: eq(businesses.id, cleanInvoiceData.businessId),
});
if (!business || business.createdById !== ctx.session.user.id) {
throw new TRPCError({
code: "FORBIDDEN",
message: "You don't have permission to use this business",
});
}
await verifyBusinessAccess(ctx, cleanInvoiceData.businessId);
}
// If client is being updated, verify it belongs to user
if (cleanInvoiceData.clientId) {
const client = await ctx.db.query.clients.findFirst({
where: eq(clients.id, cleanInvoiceData.clientId),
});
if (!client || client.createdById !== ctx.session.user.id) {
throw new TRPCError({
code: "FORBIDDEN",
message: "You don't have permission to use this client",
});
}
await verifyClientAccess(ctx, cleanInvoiceData.clientId);
}
await ctx.db.transaction(async (tx) => {
@@ -524,4 +527,69 @@ export const invoicesRouter = createTRPCRouter({
return { success: true, deleted: ownedIds.length };
}),
previewPdf: protectedProcedure
.input(createInvoiceSchema)
.query(async ({ ctx, input }) => {
try {
const businessId =
input.businessId && input.businessId.trim() !== ""
? input.businessId
: null;
const [client, business, settings] = await Promise.all([
verifyClientAccess(ctx, input.clientId),
verifyBusinessAccess(ctx, businessId),
ctx.db.query.platformSettings.findFirst({
where: eq(platformSettings.id, "global"),
}),
]);
const totalAmount = calculateInvoiceTotal(input.items, input.taxRate);
const pdfBlob = await generateInvoicePDFBlob(
{
invoiceNumber: input.invoiceNumber,
invoicePrefix: input.invoicePrefix,
issueDate: input.issueDate,
dueDate: input.dueDate,
status: input.status,
totalAmount,
taxRate: input.taxRate,
currency: input.currency,
notes: input.notes,
client,
business,
items: input.items.map((item) => ({
date: item.date,
description: item.description,
hours: item.hours,
rate: item.rate,
amount: item.hours * item.rate,
})),
},
{
pdfTemplate: settings?.pdfTemplate as
| "classic"
| "minimal"
| undefined,
pdfAccentColor: settings?.pdfAccentColor,
pdfFooterText: settings?.pdfFooterText,
pdfShowLogo: settings?.pdfShowLogo,
pdfShowPageNumbers: settings?.pdfShowPageNumbers,
},
);
const buffer = Buffer.from(await pdfBlob.arrayBuffer());
return {
contentType: "application/pdf",
base64: buffer.toString("base64"),
};
} catch (error) {
if (error instanceof TRPCError) throw error;
throw new TRPCError({
code: "INTERNAL_SERVER_ERROR",
message: "Failed to generate PDF preview",
cause: error,
});
}
}),
});