wip

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 <div>Invoice: {invoice.invoice_number}</div>;
+    return (
+      <div className="flex justify-center items-center h-screen dotted-bg">
+        <HtmlTemplate {...invoice} />
+      </div>
+    );
   } catch (error) {
     notFound();
   }

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;
+}

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",

packages/invoice/src/editor/index.tsx

@@ -0,0 +1,3 @@
+export function Editor() {
+  return null;
+}

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";

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 (
+    <div className="font-mono text-[11px] leading-5">
+      {formatEditorToHtml(content)}
+    </div>
+  );
+}

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 <Image src={logo} alt={customerName} width={78} height={78} />;
+}

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 (
+    <div className="grid grid-cols-3 gap-4 items-center">
+      <div className="flex space-x-1 items-center">
+        <div className="flex items-center flex-shrink-0 space-x-1">
+          <span className="truncate font-mono text-[11px] text-[#878787]">
+            {template.invoice_no_label}:
+          </span>
+          <span className="text-[11px] font-mono flex-shrink-0">
+            {invoiceNumber}
+          </span>
+        </div>
+      </div>
+
+      <div>
+        <div>
+          <div className="flex space-x-1 items-center">
+            <div className="flex items-center flex-shrink-0 space-x-1">
+              <span className="truncate font-mono text-[11px] text-[#878787]">
+                {template.issue_date_label}:
+              </span>
+              <span className="text-[11px] font-mono flex-shrink-0">
+                {format(new Date(issueDate), template.date_format)}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div>
+          <div className="flex space-x-1 items-center">
+            <div className="flex items-center flex-shrink-0 space-x-1">
+              <span className="truncate font-mono text-[11px] text-[#878787]">
+                {template.due_date_label}:
+              </span>
+              <span className="text-[11px] font-mono flex-shrink-0">
+                {format(new Date(dueDate), template.date_format)}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

packages/invoice/src/templates/html/index.tsx

@@ -0,0 +1,68 @@
+import { ScrollArea } from "@midday/ui/scroll-area";
+import type { TemplateProps } from "../types";
+import { CustomerDetails } from "./components/customer-details";
+import { EditorContent } from "./components/editor-content";
+import { FromDetails } from "./components/from-details";
+import { Logo } from "./components/logo";
+import { Meta } from "./components/meta";
+
+export function HtmlTemplate({
+  invoice_number,
+  issue_date,
+  due_date,
+  template,
+  line_items,
+  customer_details,
+  from_details,
+  payment_details,
+  note_details,
+  currency,
+  customer_name,
+  vat,
+  tax,
+  amount,
+  size = "a4",
+}: TemplateProps) {
+  const width = size === "letter" ? 816 : 595;
+  const height = size === "letter" ? 1056 : 842;
+
+  return (
+    <ScrollArea
+      className="bg-background border border-border shadow-2xl"
+      style={{ width, height }}
+      hideScrollbar
+    >
+      <div className="p-8 h-full flex flex-col">
+        <div className="flex flex-col">
+          {template.logo_url && (
+            <Logo logo={template.logo_url} customerName={customer_name || ""} />
+          )}
+        </div>
+
+        <div className="mt-8">
+          <Meta
+            template={template}
+            invoiceNumber={invoice_number}
+            issueDate={issue_date}
+            dueDate={due_date}
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-6 mt-8">
+          <div>
+            <p className="text-[11px] text-[#878787] font-mono mb-2 block">
+              {template.from_label}
+            </p>
+            <EditorContent content={from_details} />
+          </div>
+          <div>
+            <p className="text-[11px] text-[#878787] font-mono mb-2 block">
+              {template.customer_label}
+            </p>
+            <EditorContent content={customer_details} />
+          </div>
+        </div>
+      </div>
+    </ScrollArea>
+  );
+}

packages/invoice/src/components/editor-content.tsx → packages/invoice/src/templates/pdf/components/editor-content.tsx

@@ -1,10 +1,10 @@
 import { View } from "@react-pdf/renderer";
-import { formatEditorContent } from "../utils/format";
+import { formatEditorToPdf } from "../../../utils/format";
 
 export function EditorContent({ content }: { content?: JSON }) {
   if (!content) {
     return null;
   }
 
-  return <View style={{ marginTop: 10 }}>{formatEditorContent(content)}</View>;
+  return <View style={{ marginTop: 10 }}>{formatEditorToPdf(content)}</View>;
 }

packages/invoice/src/template/invoice.tsx → packages/invoice/src/templates/pdf/index.tsx

@@ -1,12 +1,13 @@
 import { Document, Font, Image, Page, Text, View } from "@react-pdf/renderer";
 import QRCodeUtil from "qrcode";
-import { EditorContent } from "../components/editor-content";
-import { LineItems } from "../components/line-items";
-import { Meta } from "../components/meta";
-import { Note } from "../components/note";
-import { PaymentDetails } from "../components/payment-details";
-import { QRCode } from "../components/qr-code";
-import { Summary } from "../components/summary";
+import type { TemplateProps } from "../types";
+import { EditorContent } from "./components/editor-content";
+import { LineItems } from "./components/line-items";
+import { Meta } from "./components/meta";
+import { Note } from "./components/note";
+import { PaymentDetails } from "./components/payment-details";
+import { QRCode } from "./components/qr-code";
+import { Summary } from "./components/summary";
 
 const CDN_URL = "https://cdn.midday.ai";
 
@@ -24,51 +25,7 @@ Font.register({
   ],
 });
 
-export type Template = {
-  logo_url?: string;
-  from_label: string;
-  customer_label: string;
-  invoice_no_label: string;
-  issue_date_label: string;
-  due_date_label: string;
-  date_format: string;
-  payment_label: string;
-  note_label: string;
-  description_label: string;
-  quantity_label: string;
-  price_label: string;
-  total_label: string;
-  tax_label: string;
-  vat_label: string;
-};
-
-export type LineItem = {
-  name: string;
-  quantity: number;
-  price: number;
-  invoice_number?: string;
-  issue_date?: string;
-  due_date?: string;
-};
-
-type Props = {
-  invoice_number: string;
-  issue_date: string;
-  due_date: string;
-  template: Template;
-  line_items: LineItem[];
-  customer_details?: JSON;
-  payment_details?: JSON;
-  from_details?: JSON;
-  note_details?: JSON;
-  currency: string;
-  amount: number;
-  vat?: number;
-  tax?: number;
-  size?: "letter" | "a4";
-};
-
-export async function InvoiceTemplate({
+export async function PdfTemplate({
   invoice_number,
   issue_date,
   due_date,
@@ -82,8 +39,8 @@ export async function InvoiceTemplate({
   vat,
   tax,
   amount,
-  size = "letter",
-}: Props) {
+  size = "a4",
+}: TemplateProps) {
   const qrCode = await QRCodeUtil.toDataURL(
     "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
     {

packages/invoice/src/templates/types.ts

@@ -0,0 +1,44 @@
+export type Template = {
+  logo_url?: string;
+  from_label: string;
+  customer_label: string;
+  invoice_no_label: string;
+  issue_date_label: string;
+  due_date_label: string;
+  date_format: string;
+  payment_label: string;
+  note_label: string;
+  description_label: string;
+  quantity_label: string;
+  price_label: string;
+  total_label: string;
+  tax_label: string;
+  vat_label: string;
+};
+
+export type LineItem = {
+  name: string;
+  quantity: number;
+  price: number;
+  invoice_number?: string;
+  issue_date?: string;
+  due_date?: string;
+};
+
+export type TemplateProps = {
+  invoice_number: string;
+  issue_date: string;
+  due_date: string;
+  template: Template;
+  line_items: LineItem[];
+  customer_details?: JSON;
+  payment_details?: JSON;
+  from_details?: JSON;
+  note_details?: JSON;
+  currency: string;
+  amount: number;
+  customer_name?: string;
+  vat?: number;
+  tax?: number;
+  size?: "letter" | "a4";
+};