diff --git a/apps/dashboard/src/app/[locale]/(public)/i/[token]/page.tsx b/apps/dashboard/src/app/[locale]/(public)/i/[token]/page.tsx
index 5ded860d9..1df4b2bf0 100644
--- a/apps/dashboard/src/app/[locale]/(public)/i/[token]/page.tsx
+++ b/apps/dashboard/src/app/[locale]/(public)/i/[token]/page.tsx
@@ -1,3 +1,4 @@
+import { HtmlTemplate } from "@midday/invoice/templates/html";
import { verify } from "@midday/invoice/token";
import { getInvoiceQuery } from "@midday/supabase/queries";
import { createClient } from "@midday/supabase/server";
@@ -47,14 +48,17 @@ export default async function Page({ params }: { params: { token: string } }) {
try {
const { id } = await verify(params.token);
- console.log("katt", id);
const { data: invoice } = await getInvoiceQuery(supabase, id);
if (!invoice) {
notFound();
}
- return Invoice: {invoice.invoice_number}
;
+ return (
+
+
+
+ );
} catch (error) {
notFound();
}
diff --git a/apps/dashboard/src/styles/globals.css b/apps/dashboard/src/styles/globals.css
index 16552eeed..e5495f94d 100644
--- a/apps/dashboard/src/styles/globals.css
+++ b/apps/dashboard/src/styles/globals.css
@@ -245,3 +245,12 @@ input[type="time"]::-webkit-calendar-picker-indicator {
pointer-events: none;
height: 0;
}
+
+.dotted-bg {
+ background-image: radial-gradient(
+ circle at 1px 1px,
+ #232323 0.5px,
+ transparent 0
+ );
+ background-size: 6px 6px;
+}
diff --git a/bun.lockb b/bun.lockb
index 2c40a6cf1..635a372dc 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/packages/invoice/package.json b/packages/invoice/package.json
index fc4591e16..2612ec1e6 100644
--- a/packages/invoice/package.json
+++ b/packages/invoice/package.json
@@ -11,9 +11,13 @@
"exports": {
".": "./src/index.tsx",
"./token": "./src/token/index.ts",
- "./number": "./src/utils/number.ts"
+ "./number": "./src/utils/number.ts",
+ "./templates/html": "./src/templates/html/index.tsx",
+ "./templates/pdf": "./src/templates/pdf/index.tsx",
+ "./editor": "./src/editor/index.tsx"
},
"dependencies": {
+ "@midday/ui": "workspace:*",
"@react-pdf/renderer": "^4.0.0",
"date-fns": "^4.1.0",
"jose": "^5.9.6",
diff --git a/packages/invoice/src/editor/index.tsx b/packages/invoice/src/editor/index.tsx
new file mode 100644
index 000000000..605cf1b39
--- /dev/null
+++ b/packages/invoice/src/editor/index.tsx
@@ -0,0 +1,3 @@
+export function Editor() {
+ return null;
+}
diff --git a/packages/invoice/src/index.tsx b/packages/invoice/src/index.tsx
index 131b7bb7d..e98f01334 100644
--- a/packages/invoice/src/index.tsx
+++ b/packages/invoice/src/index.tsx
@@ -1,2 +1,5 @@
-export * from "./template/invoice";
+export * from "./templates/html";
+export * from "./templates/pdf";
+export * from "./editor";
+
export { renderToStream } from "@react-pdf/renderer";
diff --git a/packages/invoice/src/templates/html/components/editor-content.tsx b/packages/invoice/src/templates/html/components/editor-content.tsx
new file mode 100644
index 000000000..7ed6d0dc5
--- /dev/null
+++ b/packages/invoice/src/templates/html/components/editor-content.tsx
@@ -0,0 +1,13 @@
+import { formatEditorToHtml } from "../../../utils/format";
+
+export function EditorContent({ content }: { content?: JSON }) {
+ if (!content) {
+ return null;
+ }
+
+ return (
+
+ {formatEditorToHtml(content)}
+
+ );
+}
diff --git a/packages/invoice/src/templates/html/components/logo.tsx b/packages/invoice/src/templates/html/components/logo.tsx
new file mode 100644
index 000000000..f998634c5
--- /dev/null
+++ b/packages/invoice/src/templates/html/components/logo.tsx
@@ -0,0 +1,10 @@
+import Image from "next/image";
+
+type Props = {
+ logo: string;
+ customerName: string;
+};
+
+export function Logo({ logo, customerName }: Props) {
+ return ;
+}
diff --git a/packages/invoice/src/templates/html/components/meta.tsx b/packages/invoice/src/templates/html/components/meta.tsx
new file mode 100644
index 000000000..9821318ca
--- /dev/null
+++ b/packages/invoice/src/templates/html/components/meta.tsx
@@ -0,0 +1,55 @@
+import type { Template } from "@midday/invoice/types";
+import { format } from "date-fns";
+
+type Props = {
+ template: Template;
+ invoiceNumber: string;
+ issueDate: string;
+ dueDate: string;
+};
+
+export function Meta({ template, invoiceNumber, issueDate, dueDate }: Props) {
+ return (
+
+
+
+
+ {template.invoice_no_label}:
+
+
+ {invoiceNumber}
+
+
+
+
+
+
+
+
+
+ {template.issue_date_label}:
+
+
+ {format(new Date(issueDate), template.date_format)}
+
+
+
+
+
+
+
+
+
+
+ {template.due_date_label}:
+
+
+ {format(new Date(dueDate), template.date_format)}
+
+
+
+
+
+
+
+ {template.logo_url && (
+
+ )}
+
+
+
+
+
+
+
+
+
+ {template.from_label}
+
+
+
+
+
+ {template.customer_label}
+
+
+
+
+
+ {node.content?.map((inlineContent, inlineIndex) => {
+ if (inlineContent.type === "text") {
+ let style = "text-xs";
+ let href: string | undefined;
+
+ if (inlineContent.marks) {
+ for (const mark of inlineContent.marks) {
+ if (mark.type === "bold") {
+ style += " font-medium";
+ } else if (mark.type === "italic") {
+ style += " italic";
+ } else if (mark.type === "link") {
+ href = mark.attrs?.href;
+ style += " underline";
+ }
+ }
+ }
+
+ const content = inlineContent.text || "";
+ const isEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(content);
+
+ if (href || isEmail) {
+ const linkHref =
+ href || (isEmail ? `mailto:${content}` : content);
+ return (
+
+ {content}
+
+ );
+ }
+
+ return (
+
+ {content}
+
+ );
+ }
+ if (inlineContent.type === "hardBreak") {
+ return (
+
+ );
+ }
+ return null;
+ })}
+
+ );
+ }
+ return null;
+ })}
+
+ );
+}
+
type FormatAmountParams = {
currency: string;
amount: number;