-
-
- {/* Payment Method */}
-
- {/* Payment Due */}
-
-
-
-
(
-
+ {/* Invoice Type */}
+
+
+
(
+
+ )}
+ />
+ {errors.invoiceType && (
+ {errors.invoiceType.message}
)}
- />
- {errors?.notes && (
- {errors?.notes?.message}
- )}
-
+
+ {/* Currency Select */}
+
+
+ (
+
+ {SUPPORTED_CURRENCIES.map((currency) => (
+
+ ))}
+
+ )}
+ />
+ {errors.currency && (
+ {errors.currency.message}
+ )}
+
+
+ {/* Seller Information */}
+
+
+ {/* Buyer Information */}
+
+
+ {/* Invoice Items */}
+
+
+ {/* Total field (now with currency) */}
+
+
+
+
+
+ {currency}
+
+
(
+
+ )}
+ />
+
+ {errors.total &&
{errors.total.message}}
+
+
+ {/* Payment Method */}
+
+
+ (
+
+ )}
+ />
+ {errors.paymentMethod && (
+ {errors.paymentMethod.message}
+ )}
+
+
+ {/* Payment Due */}
+
+
+ (
+
+ )}
+ />
+ {errors.paymentDue && (
+ {errors.paymentDue.message}
+ )}
+
+
+
+
+ (
+
+ )}
+ />
+ {errors?.notes && (
+ {errors?.notes?.message}
+ )}
+
+
+
);
}
diff --git a/src/app/components/invoice-pdf-download-link.tsx b/src/app/components/invoice-pdf-download-link.tsx
index 28616a1..f1fd787 100644
--- a/src/app/components/invoice-pdf-download-link.tsx
+++ b/src/app/components/invoice-pdf-download-link.tsx
@@ -1,21 +1,25 @@
import { PDFDownloadLink } from "@react-pdf/renderer";
import type { InvoiceData } from "@/app/schema";
-import dayjs from "dayjs";
import { InvoicePdfTemplate } from "./invoice-pdf-template";
import { loglib } from "@loglib/tracker";
+import { cn } from "@/lib/utils";
export function InvoicePDFDownloadLink({
invoiceData,
}: {
invoiceData: InvoiceData;
}) {
- const invoiceDate = dayjs().format("DD-MM-YYYY");
+ const filename = `invoice-${
+ invoiceData.language
+ }-${invoiceData.invoiceNumber.replace("/", "-")}.pdf`;
return (
}
- fileName={`invoice-${invoiceDate}.pdf`}
- className="mb-4 lg:mb-0 w-full lg:w-[180px] text-center px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
+ fileName={filename}
+ className={cn(
+ "mb-4 w-full rounded-lg bg-slate-900 px-4 py-2 text-center text-sm font-medium text-slate-50 shadow-sm shadow-black/5 outline-offset-2 hover:bg-slate-900/90 focus-visible:border-indigo-500 focus-visible:ring focus-visible:ring-indigo-200 focus-visible:ring-opacity-50 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90 lg:mb-0 lg:w-[180px]"
+ )}
onClick={() => {
loglib.track("download_invoice");
}}
diff --git a/src/app/components/invoice-pdf-template/index.tsx b/src/app/components/invoice-pdf-template/index.tsx
index f4bebe8..b397890 100644
--- a/src/app/components/invoice-pdf-template/index.tsx
+++ b/src/app/components/invoice-pdf-template/index.tsx
@@ -169,6 +169,11 @@ export const styles = StyleSheet.create({
fontSize: 8,
color: "#000",
},
+ center: {
+ display: "flex",
+ justifyContent: "center",
+ alignItems: "center",
+ },
} as const);
// PDF Document component
@@ -187,8 +192,10 @@ export const InvoicePdfTemplate = ({
const language = invoiceData.language;
const t = translations[language];
+ const invoiceDocTitle = `${PROD_WEBSITE_URL} - ${t.invoiceNumber} ${invoiceData.invoiceNumber}`;
+
return (
-
+
@@ -239,10 +246,10 @@ export const InvoicePdfTemplate = ({
{/* Footer */}
-
+
Created with{" "}
{PROD_WEBSITE_URL}
diff --git a/src/app/components/invoice-pdf-template/invoice-items-table.tsx b/src/app/components/invoice-pdf-template/invoice-items-table.tsx
index c92369c..dc726ff 100644
--- a/src/app/components/invoice-pdf-template/invoice-items-table.tsx
+++ b/src/app/components/invoice-pdf-template/invoice-items-table.tsx
@@ -18,46 +18,48 @@ export function InvoiceItemsTable({
{/* Table header */}
-
+
{t.invoiceItemsTable.no}
-
+
{t.invoiceItemsTable.nameOfGoodsService}
-
+
{t.invoiceItemsTable.typeOfGTU}
-
+
{t.invoiceItemsTable.amount}
-
+
{t.invoiceItemsTable.unit}
-
+
{t.invoiceItemsTable.netPrice}
-
+
{t.invoiceItemsTable.vat}
-
+
{t.invoiceItemsTable.netAmount}
-
+
{t.invoiceItemsTable.vatAmount}
-
+
{t.invoiceItemsTable.preTaxAmount}
diff --git a/src/app/components/invoice-pdf-template/translations/index.ts b/src/app/components/invoice-pdf-template/translations/index.ts
index adbeb46..8379847 100644
--- a/src/app/components/invoice-pdf-template/translations/index.ts
+++ b/src/app/components/invoice-pdf-template/translations/index.ts
@@ -79,7 +79,7 @@ export const translations = {
unit: "Unit",
netPrice: "Net price",
vat: "VAT",
- netAmount: "Net Amount",
+ netAmount: "Net\n Amount",
vatAmount: "VAT Amount",
preTaxAmount: "Pre-tax amount",
sum: "SUM",
@@ -127,9 +127,9 @@ export const translations = {
typeOfGTU: "Typ GTU",
amount: "Ilość",
unit: "Jm",
- netPrice: "Cena netto",
+ netPrice: "Cena\n netto",
vat: "VAT",
- netAmount: "Kwota netto",
+ netAmount: "Kwota\n netto",
vatAmount: "Kwota VAT",
preTaxAmount: "Kwota brutto",
sum: "SUMA",
diff --git a/src/app/components/invoice-pdf-viewer.tsx b/src/app/components/invoice-pdf-viewer.tsx
index fb83e0e..379c9d2 100644
--- a/src/app/components/invoice-pdf-viewer.tsx
+++ b/src/app/components/invoice-pdf-viewer.tsx
@@ -4,7 +4,7 @@ export function InvoicePDFViewer({ children }: { children: React.ReactNode }) {
return (
{/* @ts-expect-error PR with fix?: https://github.com/diegomura/react-pdf/pull/2888 */}
diff --git a/src/app/globals.css b/src/app/globals.css
index 13d40b8..b5d3bcf 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,21 +2,7 @@
@tailwind components;
@tailwind utilities;
-:root {
- --background: #ffffff;
- --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --background: #0a0a0a;
- --foreground: #ededed;
- }
-}
-
body {
- color: var(--foreground);
- background: var(--background);
font-family: Arial, Helvetica, sans-serif;
}
@@ -25,3 +11,9 @@ body {
text-wrap: balance;
}
}
+
+@layer base {
+ :root {
+ --radius: 0.5rem;
+ }
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 16a927d..7cca80d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import { NuqsAdapter } from "nuqs/adapters/next/app";
import Loglib from "@loglib/tracker/react";
import "./globals.css";
+import { Toaster } from "sonner";
export const metadata: Metadata = {
title: "Free PDF Invoice Generator",
@@ -63,8 +64,10 @@ export default function RootLayout({
+