@adoptai/genui-components 0.1.32

package/dist/composites/invoice-detail/resolver.js

@@ -0,0 +1,1084 @@
+"use client";
+import { createContext, useContext, useState, useRef, useCallback, useEffect } from 'react';
+import { toPng } from 'html-to-image';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/shared/theme.ts
+var BORDER = "#dedede";
+var MUTED = "#777777";
+var PAPER = "#f6f6f6";
+var ACCENT = "#ff5000";
+var ACCENT_SOFT = "#cc4000";
+var SECONDARY = "#0364ff";
+var CHART_PALETTE = [
+  "#ff5000",
+  "#0364ff",
+  "#16a34a",
+  "#dc2626",
+  "#7c3aed",
+  "#0891b2",
+  "#f59e0b",
+  "#6366f1",
+  "#ec4899",
+  "#84cc16",
+  "#e11d48",
+  "#0ea5e9"
+];
+function ColumnSettingsPanel({ columns, hidden, onToggle, onShowAll, onHideAll }) {
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "6px", minWidth: "180px" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", paddingBottom: "4px", borderBottom: `1px solid ${BORDER}` }, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onShowAll,
+          style: { background: "none", border: "none", cursor: "pointer", fontSize: "11px", color: ACCENT, fontWeight: 500, padding: 0 },
+          children: "Show all"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onHideAll,
+          style: { background: "none", border: "none", cursor: "pointer", fontSize: "11px", color: MUTED, fontWeight: 500, padding: 0 },
+          children: "Hide all"
+        }
+      )
+    ] }),
+    columns.map((col) => /* @__PURE__ */ jsxs(
+      "label",
+      {
+        style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer", fontSize: "12px", color: "var(--foreground)" },
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: !hidden.has(col.key),
+              onChange: () => onToggle(col.key),
+              style: { accentColor: ACCENT, width: "14px", height: "14px", margin: 0, cursor: "pointer" }
+            }
+          ),
+          col.label
+        ]
+      },
+      col.key
+    ))
+  ] });
+}
+var DOT_COLOR = "#aaaaaa";
+var DOT_HOVER = "#555555";
+function ComponentActions({ children, onDownloadCSV, columnConfig, filename = "component" }) {
+  const [open, setOpen] = useState(false);
+  const [view, setView] = useState("main");
+  const contentRef = useRef(null);
+  const menuRef = useRef(null);
+  const btnRef = useRef(null);
+  const close = useCallback(() => {
+    setOpen(false);
+    setView("main");
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e) => {
+      var _a, _b;
+      if ((_a = menuRef.current) == null ? void 0 : _a.contains(e.target)) return;
+      if ((_b = btnRef.current) == null ? void 0 : _b.contains(e.target)) return;
+      close();
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open, close]);
+  const handleDownloadPNG = useCallback(async () => {
+    if (!contentRef.current) return;
+    try {
+      const url = await toPng(contentRef.current, { backgroundColor: "white", pixelRatio: 2 });
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `${filename}.png`;
+      a.click();
+    } catch (e) {
+    }
+    close();
+  }, [filename, close]);
+  const handleCSV = useCallback(() => {
+    onDownloadCSV == null ? void 0 : onDownloadCSV();
+    close();
+  }, [onDownloadCSV, close]);
+  return /* @__PURE__ */ jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsx("div", { ref: contentRef, style: { width: "100%" }, children }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: "4px", position: "relative", zIndex: 10, flexShrink: 0 }, children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref: btnRef,
+          onClick: () => {
+            setOpen((o) => !o);
+            setView("main");
+          },
+          "aria-label": "Component actions",
+          style: {
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            padding: "4px 8px",
+            display: "flex",
+            gap: "3px",
+            alignItems: "center",
+            borderRadius: "6px",
+            transition: "background 0.15s"
+          },
+          onMouseEnter: (e) => {
+            e.currentTarget.style.background = "#f2f2f2";
+            e.currentTarget.querySelectorAll("circle").forEach((c) => c.style.fill = DOT_HOVER);
+          },
+          onMouseLeave: (e) => {
+            e.currentTarget.style.background = "none";
+            e.currentTarget.querySelectorAll("circle").forEach((c) => c.style.fill = DOT_COLOR);
+          },
+          children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "6", viewBox: "0 0 20 6", children: [
+            /* @__PURE__ */ jsx("circle", { cx: "3", cy: "3", r: "2", style: { fill: DOT_COLOR, transition: "fill 0.15s" } }),
+            /* @__PURE__ */ jsx("circle", { cx: "10", cy: "3", r: "2", style: { fill: DOT_COLOR, transition: "fill 0.15s" } }),
+            /* @__PURE__ */ jsx("circle", { cx: "17", cy: "3", r: "2", style: { fill: DOT_COLOR, transition: "fill 0.15s" } })
+          ] })
+        }
+      ),
+      open && /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: menuRef,
+          style: {
+            position: "absolute",
+            bottom: "100%",
+            right: 0,
+            marginBottom: "4px",
+            background: "white",
+            border: `1px solid ${BORDER}`,
+            borderRadius: "0.75rem",
+            boxShadow: "0 4px 12px rgba(0,0,0,0.06)",
+            zIndex: 50,
+            padding: view === "columns" ? "10px" : "4px",
+            minWidth: view === "columns" ? "200px" : "160px"
+          },
+          children: view === "main" ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
+            columnConfig && /* @__PURE__ */ jsx(MenuButton, { label: "Customize columns", onClick: () => setView("columns") }),
+            onDownloadCSV && /* @__PURE__ */ jsx(MenuButton, { label: "Download CSV", onClick: handleCSV }),
+            /* @__PURE__ */ jsx(MenuButton, { label: "Download PNG", onClick: handleDownloadPNG })
+          ] }) : /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => setView("main"),
+                style: { background: "none", border: "none", cursor: "pointer", fontSize: "11px", color: MUTED, marginBottom: "6px", padding: 0 },
+                children: "\u2190 Back"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ColumnSettingsPanel,
+              {
+                columns: columnConfig.columns,
+                hidden: columnConfig.hidden,
+                onToggle: columnConfig.onToggle,
+                onShowAll: columnConfig.onShowAll,
+                onHideAll: columnConfig.onHideAll
+              }
+            )
+          ] })
+        }
+      )
+    ] })
+  ] });
+}
+function MenuButton({ label, onClick }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick,
+      style: {
+        background: "none",
+        border: "none",
+        cursor: "pointer",
+        padding: "8px 12px",
+        fontSize: "12.5px",
+        color: "var(--foreground)",
+        textAlign: "left",
+        borderRadius: "8px",
+        transition: "background 0.15s",
+        whiteSpace: "nowrap"
+      },
+      onMouseEnter: (e) => e.currentTarget.style.background = "#f2f2f2",
+      onMouseLeave: (e) => e.currentTarget.style.background = "none",
+      children: label
+    }
+  );
+}
+function renderInline(text) {
+  const parts = [];
+  let rest = text;
+  let k = 0;
+  const nextIndex = (needle) => {
+    const idx = rest.indexOf(needle);
+    return idx >= 0 ? idx : Infinity;
+  };
+  while (rest.length > 0) {
+    const boldIdx = nextIndex("**");
+    const codeIdx = nextIndex("`");
+    const linkIdx = nextIndex("[");
+    let italicIdx = rest.indexOf("*");
+    if (italicIdx === boldIdx) italicIdx = rest.indexOf("*", italicIdx + 2);
+    const italicIdxN = italicIdx >= 0 ? italicIdx : Infinity;
+    const nextSpecial = Math.min(boldIdx, codeIdx, linkIdx, italicIdxN);
+    if (nextSpecial === Infinity) {
+      parts.push(/* @__PURE__ */ jsx("span", { children: rest }, k++));
+      break;
+    }
+    if (nextSpecial > 0) {
+      parts.push(/* @__PURE__ */ jsx("span", { children: rest.slice(0, nextSpecial) }, k++));
+      rest = rest.slice(nextSpecial);
+    }
+    if (rest.startsWith("**")) {
+      const end = rest.indexOf("**", 2);
+      if (end > 2) {
+        parts.push(
+          /* @__PURE__ */ jsx("strong", { style: { fontWeight: 600, color: "var(--foreground)" }, children: renderInline(rest.slice(2, end)) }, k++)
+        );
+        rest = rest.slice(end + 2);
+        continue;
+      }
+    }
+    if (rest.startsWith("`")) {
+      const end = rest.indexOf("`", 1);
+      if (end > 1) {
+        parts.push(
+          /* @__PURE__ */ jsx(
+            "code",
+            {
+              style: {
+                fontSize: "0.9em",
+                padding: "1px 5px",
+                borderRadius: "4px",
+                background: "#f0f0f0",
+                fontFamily: "monospace",
+                color: ACCENT
+              },
+              children: rest.slice(1, end)
+            },
+            k++
+          )
+        );
+        rest = rest.slice(end + 1);
+        continue;
+      }
+    }
+    if (rest.startsWith("[")) {
+      const closeText = rest.indexOf("]");
+      if (closeText > 0 && rest[closeText + 1] === "(") {
+        const closeUrl = rest.indexOf(")", closeText + 2);
+        if (closeUrl > closeText + 1) {
+          const label = rest.slice(1, closeText);
+          const url = rest.slice(closeText + 2, closeUrl);
+          parts.push(
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: url,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: { color: SECONDARY, textDecoration: "none" },
+                children: renderInline(label)
+              },
+              k++
+            )
+          );
+          rest = rest.slice(closeUrl + 1);
+          continue;
+        }
+      }
+    }
+    if (rest.startsWith("*")) {
+      const end = rest.indexOf("*", 1);
+      if (end > 1) {
+        parts.push(
+          /* @__PURE__ */ jsx("em", { style: { fontStyle: "italic" }, children: renderInline(rest.slice(1, end)) }, k++)
+        );
+        rest = rest.slice(end + 1);
+        continue;
+      }
+    }
+    parts.push(/* @__PURE__ */ jsx("span", { children: rest[0] }, k++));
+    rest = rest.slice(1);
+  }
+  return parts;
+}
+function MarkdownBlock({ content }) {
+  var _a;
+  const lines = content.split("\n");
+  const elements = [];
+  let key = 0;
+  let i = 0;
+  while (i < lines.length) {
+    const trimmed = lines[i].trim();
+    if (!trimmed) {
+      i++;
+      continue;
+    }
+    const headingMatch = trimmed.match(/^(#{1,4})\s+(.+)/);
+    if (headingMatch) {
+      const level = headingMatch[1].length;
+      const cfg = {
+        1: { size: "15px", weight: 600, serif: true, mt: "0" },
+        2: { size: "14px", weight: 600, serif: true, mt: "14px" },
+        3: { size: "12px", weight: 600, serif: false, mt: "12px" },
+        4: { size: "11px", weight: 600, serif: false, mt: "10px" }
+      };
+      const s = (_a = cfg[level]) != null ? _a : cfg[3];
+      elements.push(
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontSize: s.size,
+              fontWeight: s.weight,
+              fontFamily: s.serif ? "var(--font-serif)" : "var(--font-sans)",
+              color: "var(--foreground)",
+              letterSpacing: s.serif ? "-0.005em" : "0",
+              marginTop: s.mt,
+              marginBottom: "6px",
+              lineHeight: 1.3
+            },
+            children: renderInline(headingMatch[2])
+          },
+          key++
+        )
+      );
+      i++;
+      continue;
+    }
+    if (trimmed.startsWith("- ") || trimmed.startsWith("* ")) {
+      const items = [];
+      while (i < lines.length) {
+        const li = lines[i].trim();
+        if (!li.startsWith("- ") && !li.startsWith("* ")) break;
+        items.push(li.slice(2));
+        i++;
+      }
+      elements.push(
+        /* @__PURE__ */ jsx("div", { style: { margin: "4px 0 8px 0", paddingLeft: "4px" }, children: items.map((text, idx) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: "8px",
+              marginBottom: "5px",
+              alignItems: "baseline"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    width: "4px",
+                    height: "4px",
+                    borderRadius: "9999px",
+                    background: ACCENT,
+                    opacity: 0.5,
+                    flexShrink: 0,
+                    marginTop: "7px"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: renderInline(text) })
+            ]
+          },
+          idx
+        )) }, key++)
+      );
+      continue;
+    }
+    const numMatch = trimmed.match(/^(\d+)\.\s+(.+)/);
+    if (numMatch) {
+      const items = [];
+      while (i < lines.length) {
+        const li = lines[i].trim();
+        const m = li.match(/^(\d+)\.\s+(.+)/);
+        if (!m) break;
+        items.push({ num: m[1], text: m[2] });
+        i++;
+      }
+      elements.push(
+        /* @__PURE__ */ jsx("div", { style: { margin: "4px 0 8px 0", paddingLeft: "4px" }, children: items.map((item, idx) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: "8px",
+              marginBottom: "6px",
+              alignItems: "baseline"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: "10px",
+                    fontWeight: 700,
+                    color: ACCENT,
+                    opacity: 0.7,
+                    minWidth: "14px",
+                    textAlign: "right",
+                    fontVariantNumeric: "tabular-nums",
+                    flexShrink: 0
+                  },
+                  children: item.num
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children: renderInline(item.text) })
+            ]
+          },
+          idx
+        )) }, key++)
+      );
+      continue;
+    }
+    elements.push(
+      /* @__PURE__ */ jsx("p", { style: { margin: "0 0 8px 0", lineHeight: 1.65 }, children: renderInline(trimmed) }, key++)
+    );
+    i++;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: elements });
+}
+function Markdown({
+  content,
+  inline = false
+}) {
+  if (!content) return null;
+  if (inline) {
+    return /* @__PURE__ */ jsx("span", { style: { whiteSpace: "pre-wrap" }, children: renderInline(content) });
+  }
+  return /* @__PURE__ */ jsx(MarkdownBlock, { content });
+}
+var DEFAULT_TOKENS = {
+  BORDER,
+  MUTED,
+  PAPER,
+  ACCENT,
+  ACCENT_SOFT,
+  SECONDARY,
+  CHART_PALETTE: [...CHART_PALETTE]
+};
+var GenUIThemeContext = createContext(DEFAULT_TOKENS);
+function useTheme() {
+  return useContext(GenUIThemeContext);
+}
+var STATUS_COLORS = {
+  draft: { bg: "#fff7ed", color: "#92400e" },
+  sent: { bg: "#eff6ff", color: "#1d4ed8" },
+  paid: { bg: "#dcfce7", color: "#15803d" },
+  partial: { bg: "#f5f3ff", color: "#7c3aed" },
+  overdue: { bg: "#fef2f2", color: "#dc2626" },
+  void: { bg: "#f2f2f2", color: "#777777" }
+};
+var fmt = (v, currency) => new Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: currency || "USD",
+  minimumFractionDigits: 2
+}).format(v);
+var formatDate = (d) => {
+  try {
+    return new Intl.DateTimeFormat("en-US", { dateStyle: "medium" }).format(
+      new Date(d)
+    );
+  } catch (e) {
+    return d;
+  }
+};
+function InvoiceDetailResolver(p) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+  const { BORDER: BORDER2, MUTED: MUTED2, PAPER: PAPER2 } = useTheme();
+  const statusStyle = (_a = STATUS_COLORS[p.status]) != null ? _a : STATUS_COLORS.void;
+  const isOverdue = p.status === "overdue";
+  return /* @__PURE__ */ jsx(ComponentActions, { filename: `invoice-${p.invoiceNumber}`, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        width: "100%",
+        borderRadius: "0.75rem",
+        border: `1px solid ${BORDER2}`,
+        boxShadow: "0 1px 2px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.04)",
+        overflow: "hidden",
+        background: "white"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: "16px 20px"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "11px",
+                      fontWeight: 600,
+                      color: MUTED2,
+                      textTransform: "uppercase",
+                      letterSpacing: "0.06em"
+                    },
+                    children: "Invoice"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontFamily: "monospace",
+                      fontSize: "16px",
+                      fontWeight: 700,
+                      color: "var(--foreground)"
+                    },
+                    children: p.invoiceNumber
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: "10px",
+                    fontWeight: 600,
+                    padding: "2px 10px",
+                    borderRadius: "9999px",
+                    background: statusStyle.bg,
+                    color: statusStyle.color,
+                    textTransform: "uppercase",
+                    letterSpacing: "0.04em"
+                  },
+                  children: p.status
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { height: "1px", background: BORDER2 } }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              padding: "14px 20px",
+              gap: "20px"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: { display: "flex", flexDirection: "column", gap: "2px" },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "14px",
+                          fontWeight: 600,
+                          color: "var(--foreground)"
+                        },
+                        children: (_c = (_b = p.client) == null ? void 0 : _b.name) != null ? _c : ""
+                      }
+                    ),
+                    ((_d = p.client) == null ? void 0 : _d.address) && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "12px",
+                          color: MUTED2,
+                          whiteSpace: "pre-line"
+                        },
+                        children: /* @__PURE__ */ jsx(Markdown, { inline: true, content: (_e = p.client) == null ? void 0 : _e.address })
+                      }
+                    ),
+                    ((_f = p.client) == null ? void 0 : _f.email) && /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: MUTED2 }, children: (_g = p.client) == null ? void 0 : _g.email })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "6px",
+                    textAlign: "right"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            fontSize: "11px",
+                            color: MUTED2,
+                            textTransform: "uppercase",
+                            letterSpacing: "0.04em"
+                          },
+                          children: "Issue Date"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("div", { style: { fontSize: "12px", color: "var(--foreground)" }, children: formatDate(p.issueDate) })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          style: {
+                            fontSize: "11px",
+                            color: MUTED2,
+                            textTransform: "uppercase",
+                            letterSpacing: "0.04em"
+                          },
+                          children: "Due Date"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: {
+                            fontSize: "12px",
+                            color: isOverdue ? "#dc2626" : "var(--foreground)",
+                            fontWeight: isOverdue ? 600 : void 0
+                          },
+                          children: formatDate(p.dueDate)
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { height: "1px", background: BORDER2 } }),
+        /* @__PURE__ */ jsx("div", { style: { overflowX: "auto" }, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse" }, children: [
+          /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: ["Description", "Qty", "Unit Price", "Amount"].map(
+            (h, i) => /* @__PURE__ */ jsx(
+              "th",
+              {
+                style: {
+                  fontSize: "11px",
+                  fontWeight: 500,
+                  color: MUTED2,
+                  padding: "8px 16px",
+                  textAlign: i === 0 ? "left" : "right",
+                  borderBottom: `1px solid ${BORDER2}`,
+                  background: PAPER2,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.02em"
+                },
+                children: h
+              },
+              h
+            )
+          ) }) }),
+          /* @__PURE__ */ jsx("tbody", { children: ((_h = p.lineItems) != null ? _h : []).map((item, ri) => /* @__PURE__ */ jsxs(
+            "tr",
+            {
+              style: { background: ri % 2 === 0 ? "white" : "#fafafa" },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    style: {
+                      padding: "8px 16px",
+                      fontSize: "13px",
+                      borderBottom: `1px solid #f2f2f2`
+                    },
+                    children: /* @__PURE__ */ jsx(Markdown, { inline: true, content: item.description })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    style: {
+                      padding: "8px 16px",
+                      fontSize: "13px",
+                      textAlign: "right",
+                      fontVariantNumeric: "tabular-nums",
+                      borderBottom: `1px solid #f2f2f2`
+                    },
+                    children: item.quantity
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    style: {
+                      padding: "8px 16px",
+                      fontSize: "13px",
+                      textAlign: "right",
+                      fontVariantNumeric: "tabular-nums",
+                      borderBottom: `1px solid #f2f2f2`
+                    },
+                    children: fmt(item.unitPrice, p.currency)
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    style: {
+                      padding: "8px 16px",
+                      fontSize: "13px",
+                      textAlign: "right",
+                      fontVariantNumeric: "tabular-nums",
+                      fontWeight: 500,
+                      borderBottom: `1px solid #f2f2f2`
+                    },
+                    children: fmt(item.amount, p.currency)
+                  }
+                )
+              ]
+            },
+            ri
+          )) })
+        ] }) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "flex-end",
+              padding: "14px 20px",
+              gap: "6px"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    width: "240px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: MUTED2 }, children: "Subtotal" }),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "13px",
+                          fontVariantNumeric: "tabular-nums"
+                        },
+                        children: fmt(p.subtotal, p.currency)
+                      }
+                    )
+                  ]
+                }
+              ),
+              ((_i = p.discount) != null ? _i : 0) > 0 && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    width: "240px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: MUTED2 }, children: "Discount" }),
+                    /* @__PURE__ */ jsxs(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "13px",
+                          fontVariantNumeric: "tabular-nums",
+                          color: "#dc2626"
+                        },
+                        children: [
+                          "\u2212",
+                          fmt((_j = p.discount) != null ? _j : 0, p.currency)
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              ((_k = p.taxAmount) != null ? _k : 0) > 0 && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    width: "240px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: MUTED2 }, children: (_l = p.taxLabel) != null ? _l : "Tax" }),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "13px",
+                          fontVariantNumeric: "tabular-nums"
+                        },
+                        children: fmt((_m = p.taxAmount) != null ? _m : 0, p.currency)
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    width: "240px",
+                    height: "1px",
+                    background: BORDER2,
+                    margin: "2px 0"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    width: "240px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "13px",
+                          fontWeight: 700,
+                          color: "var(--foreground)"
+                        },
+                        children: "Total"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "14px",
+                          fontWeight: 700,
+                          fontVariantNumeric: "tabular-nums",
+                          color: "var(--foreground)"
+                        },
+                        children: fmt(p.total, p.currency)
+                      }
+                    )
+                  ]
+                }
+              ),
+              ((_n = p.amountPaid) != null ? _n : 0) > 0 && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    width: "240px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: MUTED2 }, children: "Amount Paid" }),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "13px",
+                          fontVariantNumeric: "tabular-nums",
+                          color: "#15803d"
+                        },
+                        children: fmt((_o = p.amountPaid) != null ? _o : 0, p.currency)
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    justifyContent: "space-between",
+                    width: "240px"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "13px",
+                          fontWeight: 700,
+                          color: "var(--foreground)"
+                        },
+                        children: "Amount Due"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "14px",
+                          fontWeight: 700,
+                          fontVariantNumeric: "tabular-nums",
+                          color: isOverdue ? "#dc2626" : "var(--foreground)"
+                        },
+                        children: fmt(p.amountDue, p.currency)
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        p.payments && ((_p = p.payments) != null ? _p : []).length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { style: { height: "1px", background: BORDER2 } }),
+          /* @__PURE__ */ jsxs("div", { style: { padding: "14px 20px" }, children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  fontSize: "12px",
+                  fontWeight: 600,
+                  textTransform: "uppercase",
+                  letterSpacing: "0.04em",
+                  color: "var(--foreground)",
+                  marginBottom: "8px"
+                },
+                children: "Payment History"
+              }
+            ),
+            /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse" }, children: [
+              /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: ["Date", "Method", "Amount", "Reference"].map((h, i) => /* @__PURE__ */ jsx(
+                "th",
+                {
+                  style: {
+                    fontSize: "11px",
+                    fontWeight: 500,
+                    color: MUTED2,
+                    padding: "6px 12px",
+                    textAlign: i === 2 ? "right" : "left",
+                    borderBottom: `1px solid ${BORDER2}`,
+                    textTransform: "uppercase",
+                    letterSpacing: "0.02em"
+                  },
+                  children: h
+                },
+                h
+              )) }) }),
+              /* @__PURE__ */ jsx("tbody", { children: ((_q = p.payments) != null ? _q : []).map((pmt, i) => {
+                var _a2;
+                return /* @__PURE__ */ jsxs("tr", { children: [
+                  /* @__PURE__ */ jsx(
+                    "td",
+                    {
+                      style: {
+                        padding: "6px 12px",
+                        fontSize: "12px",
+                        borderBottom: `1px solid #f2f2f2`
+                      },
+                      children: formatDate(pmt.date)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "td",
+                    {
+                      style: {
+                        padding: "6px 12px",
+                        fontSize: "12px",
+                        borderBottom: `1px solid #f2f2f2`
+                      },
+                      children: pmt.method
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "td",
+                    {
+                      style: {
+                        padding: "6px 12px",
+                        fontSize: "12px",
+                        textAlign: "right",
+                        fontVariantNumeric: "tabular-nums",
+                        color: "#15803d",
+                        fontWeight: 600,
+                        borderBottom: `1px solid #f2f2f2`
+                      },
+                      children: fmt(pmt.amount, p.currency)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "td",
+                    {
+                      style: {
+                        padding: "6px 12px",
+                        fontSize: "12px",
+                        color: MUTED2,
+                        borderBottom: `1px solid #f2f2f2`
+                      },
+                      children: (_a2 = pmt.reference) != null ? _a2 : "\u2014"
+                    }
+                  )
+                ] }, i);
+              }) })
+            ] })
+          ] })
+        ] }),
+        (p.terms || p.notes) && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              background: PAPER2,
+              padding: "12px 16px",
+              borderTop: `1px solid ${BORDER2}`,
+              display: "flex",
+              flexDirection: "column",
+              gap: "6px"
+            },
+            children: [
+              p.terms && /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "11px",
+                      fontWeight: 700,
+                      color: "var(--foreground)"
+                    },
+                    children: "Terms:"
+                  }
+                ),
+                " ",
+                /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: MUTED2 }, children: /* @__PURE__ */ jsx(Markdown, { content: p.terms }) })
+              ] }),
+              p.notes && /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "11px",
+                      fontWeight: 700,
+                      color: "var(--foreground)"
+                    },
+                    children: "Notes:"
+                  }
+                ),
+                " ",
+                /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: MUTED2 }, children: /* @__PURE__ */ jsx(Markdown, { content: p.notes }) })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+export { InvoiceDetailResolver };
+//# sourceMappingURL=resolver.js.map
+//# sourceMappingURL=resolver.js.map