@adoptai/genui-components 0.1.32

package/dist/composites/reconciliation-view/resolver.cjs

@@ -0,0 +1,917 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var htmlToImage = require('html-to-image');
+var jsxRuntime = require('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__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "6px", minWidth: "180px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between", paddingBottom: "4px", borderBottom: `1px solid ${BORDER}` }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: onShowAll,
+          style: { background: "none", border: "none", cursor: "pointer", fontSize: "11px", color: ACCENT, fontWeight: 500, padding: 0 },
+          children: "Show all"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer", fontSize: "12px", color: "var(--foreground)" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.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] = react.useState(false);
+  const [view, setView] = react.useState("main");
+  const contentRef = react.useRef(null);
+  const menuRef = react.useRef(null);
+  const btnRef = react.useRef(null);
+  const close = react.useCallback(() => {
+    setOpen(false);
+    setView("main");
+  }, []);
+  react.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 = react.useCallback(async () => {
+    if (!contentRef.current) return;
+    try {
+      const url = await htmlToImage.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 = react.useCallback(() => {
+    onDownloadCSV == null ? void 0 : onDownloadCSV();
+    close();
+  }, [onDownloadCSV, close]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: contentRef, style: { width: "100%" }, children }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: "4px", position: "relative", zIndex: 10, flexShrink: 0 }, children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("svg", { width: "20", height: "6", viewBox: "0 0 20 6", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "3", cy: "3", r: "2", style: { fill: DOT_COLOR, transition: "fill 0.15s" } }),
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "3", r: "2", style: { fill: DOT_COLOR, transition: "fill 0.15s" } }),
+            /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "17", cy: "3", r: "2", style: { fill: DOT_COLOR, transition: "fill 0.15s" } })
+          ] })
+        }
+      ),
+      open && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column" }, children: [
+            columnConfig && /* @__PURE__ */ jsxRuntime.jsx(MenuButton, { label: "Customize columns", onClick: () => setView("columns") }),
+            onDownloadCSV && /* @__PURE__ */ jsxRuntime.jsx(MenuButton, { label: "Download CSV", onClick: handleCSV }),
+            /* @__PURE__ */ jsxRuntime.jsx(MenuButton, { label: "Download PNG", onClick: handleDownloadPNG })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => setView("main"),
+                style: { background: "none", border: "none", cursor: "pointer", fontSize: "11px", color: MUTED, marginBottom: "6px", padding: 0 },
+                children: "\u2190 Back"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ColumnSettingsPanel,
+              {
+                columns: columnConfig.columns,
+                hidden: columnConfig.hidden,
+                onToggle: columnConfig.onToggle,
+                onShowAll: columnConfig.onShowAll,
+                onHideAll: columnConfig.onHideAll
+              }
+            )
+          ] })
+        }
+      )
+    ] })
+  ] });
+}
+function MenuButton({ label, onClick }) {
+  return /* @__PURE__ */ jsxRuntime.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
+    }
+  );
+}
+
+// src/shared/downloadCSV.ts
+function escapeCSV(value) {
+  const str = value == null ? "" : String(value);
+  if (str.includes(",") || str.includes('"') || str.includes("\n")) {
+    return `"${str.replace(/"/g, '""')}"`;
+  }
+  return str;
+}
+function downloadCSV(columns, rows, filename) {
+  const header = columns.map((c) => escapeCSV(c.label)).join(",");
+  const body = rows.map((row) => columns.map((c) => escapeCSV(row[c.key])).join(",")).join("\n");
+  const csv = `${header}
+${body}`;
+  const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename.endsWith(".csv") ? filename : `${filename}.csv`;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+var DEFAULT_TOKENS = {
+  BORDER,
+  MUTED,
+  PAPER,
+  ACCENT,
+  ACCENT_SOFT,
+  SECONDARY,
+  CHART_PALETTE: [...CHART_PALETTE]
+};
+var GenUIThemeContext = react.createContext(DEFAULT_TOKENS);
+function useTheme() {
+  return react.useContext(GenUIThemeContext);
+}
+var INNER_BORDER = "#f2f2f2";
+var MATCH_GREEN = "#15803d";
+var DIFF_RED = "#dc2626";
+var fmt = (v, currency) => new Intl.NumberFormat("en-US", { style: "currency", currency: currency || "USD", minimumFractionDigits: 2 }).format(v);
+function MatchStatusDot({ matched }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      style: {
+        width: "6px",
+        height: "6px",
+        borderRadius: "9999px",
+        background: matched ? MATCH_GREEN : ACCENT,
+        display: "inline-block",
+        flexShrink: 0,
+        opacity: 0.8
+      }
+    }
+  );
+}
+function DiffCell({ diff, currency }) {
+  const isZero = Math.abs(diff) < 5e-3;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "td",
+    {
+      style: {
+        padding: "7px 10px",
+        fontSize: "12px",
+        textAlign: "right",
+        fontVariantNumeric: "tabular-nums",
+        fontWeight: isZero ? 400 : 600,
+        color: isZero ? MATCH_GREEN : DIFF_RED,
+        borderBottom: `1px solid ${INNER_BORDER}`,
+        letterSpacing: "-0.01em"
+      },
+      children: isZero ? /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: "4px" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 5.5L4 7.5L8 3", stroke: MATCH_GREEN, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+        fmt(diff, currency)
+      ] }) : fmt(diff, currency)
+    }
+  );
+}
+function ReconciliationViewResolver(p) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
+  const { BORDER: BORDER3, MUTED: MUTED2, PAPER: PAPER2, ACCENT: ACCENT2 } = useTheme();
+  const sourceA = (_a = p.sourceA) != null ? _a : { label: "Source A" };
+  const sourceB = (_b = p.sourceB) != null ? _b : { label: "Source B" };
+  const [activeTab, setActiveTab] = react.useState("matched");
+  const balanceA = (_d = (_c = p.summary) == null ? void 0 : _c.balanceA) != null ? _d : 0;
+  const balanceB = (_f = (_e = p.summary) == null ? void 0 : _e.balanceB) != null ? _f : 0;
+  const difference = (_h = (_g = p.summary) == null ? void 0 : _g.difference) != null ? _h : balanceA - balanceB;
+  const csvCols = [
+    { key: "type", label: "Type" },
+    { key: "date", label: "Date" },
+    { key: "description", label: "Description" },
+    { key: "amountA", label: sourceA.label },
+    { key: "amountB", label: sourceB.label },
+    { key: "diff", label: "Diff" },
+    { key: "reference", label: "Ref" }
+  ];
+  const csvRows = [
+    ...((_i = p.matched) != null ? _i : []).map((m) => {
+      var _a2;
+      return {
+        type: "Matched",
+        date: m.date,
+        description: m.description,
+        amountA: m.amountA,
+        amountB: m.amountB,
+        diff: m.amountA - m.amountB,
+        reference: (_a2 = m.reference) != null ? _a2 : ""
+      };
+    }),
+    ...((_j = p.unmatchedA) != null ? _j : []).map((u) => {
+      var _a2;
+      return {
+        type: `Unmatched ${sourceA.label}`,
+        date: u.date,
+        description: u.description,
+        amountA: u.amount,
+        amountB: "",
+        diff: "",
+        reference: (_a2 = u.reference) != null ? _a2 : ""
+      };
+    }),
+    ...((_k = p.unmatchedB) != null ? _k : []).map((u) => {
+      var _a2;
+      return {
+        type: `Unmatched ${sourceB.label}`,
+        date: u.date,
+        description: u.description,
+        amountA: "",
+        amountB: u.amount,
+        diff: "",
+        reference: (_a2 = u.reference) != null ? _a2 : ""
+      };
+    })
+  ];
+  const tabs = [
+    { key: "matched", label: "Matched", count: ((_l = p.matched) != null ? _l : []).length, accent: MATCH_GREEN },
+    { key: "unmatchedA", label: sourceA.label, count: ((_m = p.unmatchedA) != null ? _m : []).length, accent: ACCENT2 },
+    { key: "unmatchedB", label: sourceB.label, count: ((_n = p.unmatchedB) != null ? _n : []).length, accent: ACCENT2 }
+  ];
+  const totalItems = ((_o = p.matched) != null ? _o : []).length + ((_p = p.unmatchedA) != null ? _p : []).length + ((_q = p.unmatchedB) != null ? _q : []).length;
+  const matchRate = totalItems > 0 ? Math.round(((_r = p.matched) != null ? _r : []).length / totalItems * 100) : 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ComponentActions,
+    {
+      filename: (_s = p.title) != null ? _s : "reconciliation-view",
+      onDownloadCSV: () => {
+        var _a2;
+        return downloadCSV(csvCols, csvRows, (_a2 = p.title) != null ? _a2 : "reconciliation-view");
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { width: "100%", display: "flex", flexDirection: "column", gap: "0" }, children: [
+        p.title && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            style: {
+              fontFamily: "var(--font-serif)",
+              fontSize: "16px",
+              fontWeight: 600,
+              color: "var(--foreground)",
+              letterSpacing: "-0.005em",
+              margin: "0 0 12px 0",
+              lineHeight: 1.2
+            },
+            children: p.title
+          }
+        ),
+        p.summary && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "repeat(auto-fit, minmax(90px, 1fr))",
+              gap: "0",
+              marginBottom: "14px",
+              borderRadius: "10px",
+              border: `1px solid ${BORDER3}`,
+              overflow: "hidden"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "10px 12px", background: PAPER2 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "10px",
+                      fontWeight: 500,
+                      color: MUTED2,
+                      textTransform: "uppercase",
+                      letterSpacing: "0.04em",
+                      marginBottom: "4px"
+                    },
+                    children: sourceA.label
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "15px",
+                      fontWeight: 600,
+                      color: "var(--foreground)",
+                      fontVariantNumeric: "tabular-nums",
+                      letterSpacing: "-0.01em"
+                    },
+                    children: fmt(balanceA, p.currency)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  style: {
+                    padding: "10px 12px",
+                    background: PAPER2,
+                    borderLeft: `1px solid ${BORDER3}`,
+                    borderRight: `1px solid ${BORDER3}`
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        style: {
+                          fontSize: "10px",
+                          fontWeight: 500,
+                          color: MUTED2,
+                          textTransform: "uppercase",
+                          letterSpacing: "0.04em",
+                          marginBottom: "4px"
+                        },
+                        children: sourceB.label
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        style: {
+                          fontSize: "15px",
+                          fontWeight: 600,
+                          color: "var(--foreground)",
+                          fontVariantNumeric: "tabular-nums",
+                          letterSpacing: "-0.01em"
+                        },
+                        children: fmt(balanceB, p.currency)
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  style: {
+                    padding: "10px 12px",
+                    background: difference === 0 ? "#f0fdf4" : "#fef2f2"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        style: {
+                          fontSize: "10px",
+                          fontWeight: 500,
+                          color: difference === 0 ? MATCH_GREEN : DIFF_RED,
+                          textTransform: "uppercase",
+                          letterSpacing: "0.04em",
+                          marginBottom: "4px",
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "6px"
+                        },
+                        children: [
+                          "Difference",
+                          /* @__PURE__ */ jsxRuntime.jsxs(
+                            "span",
+                            {
+                              style: {
+                                fontSize: "9px",
+                                fontWeight: 700,
+                                padding: "1px 5px",
+                                borderRadius: "9999px",
+                                background: difference === 0 ? "#dcfce7" : "#fee2e2",
+                                color: difference === 0 ? MATCH_GREEN : DIFF_RED
+                              },
+                              children: [
+                                matchRate,
+                                "% match"
+                              ]
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "div",
+                      {
+                        style: {
+                          fontSize: "15px",
+                          fontWeight: 700,
+                          color: difference === 0 ? MATCH_GREEN : DIFF_RED,
+                          fontVariantNumeric: "tabular-nums",
+                          letterSpacing: "-0.01em"
+                        },
+                        children: fmt(difference, p.currency)
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: "1px",
+              background: BORDER3,
+              borderRadius: "8px 8px 0 0",
+              overflow: "hidden",
+              borderTop: `1px solid ${BORDER3}`,
+              borderLeft: `1px solid ${BORDER3}`,
+              borderRight: `1px solid ${BORDER3}`,
+              borderBottom: `1px solid ${BORDER3}`
+            },
+            children: tabs.map((tab, i) => {
+              var _a2;
+              const isActive = activeTab === tab.key;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: () => setActiveTab(tab.key),
+                  style: {
+                    flex: 1,
+                    padding: "10px 14px",
+                    borderTop: "none",
+                    borderLeft: "none",
+                    borderRight: "none",
+                    borderBottom: "none",
+                    cursor: "pointer",
+                    fontSize: "11px",
+                    fontWeight: 600,
+                    fontFamily: "var(--font-sans)",
+                    background: isActive ? "white" : PAPER2,
+                    color: isActive ? "var(--foreground)" : MUTED2,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: "6px",
+                    transition: "all 0.15s ease",
+                    position: "relative",
+                    borderRadius: i === 0 ? "8px 0 0 0" : i === tabs.length - 1 ? "0 8px 0 0" : "0"
+                  },
+                  children: [
+                    isActive && /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        style: {
+                          position: "absolute",
+                          bottom: 0,
+                          left: "16px",
+                          right: "16px",
+                          height: "2px",
+                          background: (_a2 = tab.accent) != null ? _a2 : ACCENT2,
+                          borderRadius: "2px 2px 0 0"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(MatchStatusDot, { matched: tab.key === "matched" }),
+                    tab.label,
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        style: {
+                          fontSize: "10px",
+                          fontWeight: 700,
+                          padding: "0px 5px",
+                          borderRadius: "9999px",
+                          background: isActive ? tab.key === "matched" ? "#dcfce7" : "#fff7ed" : "#e5e5e5",
+                          color: isActive ? tab.key === "matched" ? MATCH_GREEN : ACCENT2 : MUTED2,
+                          lineHeight: "16px"
+                        },
+                        children: tab.count
+                      }
+                    )
+                  ]
+                },
+                tab.key
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              borderRadius: "0 0 10px 10px",
+              borderTop: "none",
+              borderLeft: `1px solid ${BORDER3}`,
+              borderRight: `1px solid ${BORDER3}`,
+              borderBottom: `1px solid ${BORDER3}`,
+              overflow: "hidden",
+              background: "white"
+            },
+            children: [
+              activeTab === "matched" && (((_t = p.matched) != null ? _t : []).length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { message: "All items reconciled \u2014 no matched pairs to display" }) : /* @__PURE__ */ jsxRuntime.jsxs("table", { style: { width: "100%", borderCollapse: "collapse" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: ["", "Date", "Description", sourceA.label, sourceB.label, "Diff", "Ref"].map(
+                  (h, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                    "th",
+                    {
+                      style: {
+                        fontSize: "10px",
+                        fontWeight: 600,
+                        color: MUTED2,
+                        padding: i === 0 ? "9px 0 9px 10px" : "9px 10px",
+                        textAlign: i >= 3 && i <= 5 ? "right" : "left",
+                        borderBottom: `1px solid ${BORDER3}`,
+                        background: PAPER2,
+                        textTransform: "uppercase",
+                        letterSpacing: "0.05em",
+                        whiteSpace: "nowrap",
+                        width: i === 0 ? "20px" : i === 2 ? "auto" : void 0
+                      },
+                      children: h
+                    },
+                    `${h}-${i}`
+                  )
+                ) }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: ((_u = p.matched) != null ? _u : []).map((m, ri) => {
+                  var _a2;
+                  const diff = m.amountA - m.amountB;
+                  const isZero = Math.abs(diff) < 5e-3;
+                  return /* @__PURE__ */ jsxRuntime.jsxs(
+                    "tr",
+                    {
+                      style: {
+                        background: ri % 2 === 0 ? "white" : "#fafafa",
+                        transition: "background 0.1s ease"
+                      },
+                      onMouseEnter: (e) => {
+                        e.currentTarget.style.background = PAPER2;
+                      },
+                      onMouseLeave: (e) => {
+                        e.currentTarget.style.background = ri % 2 === 0 ? "white" : "#fafafa";
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "td",
+                          {
+                            style: {
+                              padding: "7px 0 7px 10px",
+                              borderBottom: `1px solid ${INNER_BORDER}`,
+                              width: "20px"
+                            },
+                            children: /* @__PURE__ */ jsxRuntime.jsx(MatchStatusDot, { matched: isZero })
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "td",
+                          {
+                            style: {
+                              padding: "7px 10px",
+                              fontSize: "11px",
+                              borderBottom: `1px solid ${INNER_BORDER}`,
+                              whiteSpace: "nowrap",
+                              color: MUTED2,
+                              fontVariantNumeric: "tabular-nums"
+                            },
+                            children: m.date
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "td",
+                          {
+                            style: {
+                              padding: "7px 10px",
+                              fontSize: "12px",
+                              borderBottom: `1px solid ${INNER_BORDER}`,
+                              color: "var(--foreground)",
+                              fontWeight: 500
+                            },
+                            children: m.description
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "td",
+                          {
+                            style: {
+                              padding: "7px 10px",
+                              fontSize: "12px",
+                              textAlign: "right",
+                              fontVariantNumeric: "tabular-nums",
+                              borderBottom: `1px solid ${INNER_BORDER}`,
+                              color: "var(--foreground)"
+                            },
+                            children: fmt(m.amountA, p.currency)
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "td",
+                          {
+                            style: {
+                              padding: "7px 10px",
+                              fontSize: "12px",
+                              textAlign: "right",
+                              fontVariantNumeric: "tabular-nums",
+                              borderBottom: `1px solid ${INNER_BORDER}`,
+                              color: "var(--foreground)"
+                            },
+                            children: fmt(m.amountB, p.currency)
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(DiffCell, { diff, currency: p.currency }),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "td",
+                          {
+                            style: {
+                              padding: "7px 10px",
+                              fontSize: "10px",
+                              color: MUTED2,
+                              fontFamily: "monospace",
+                              borderBottom: `1px solid ${INNER_BORDER}`,
+                              letterSpacing: "0.02em"
+                            },
+                            children: (_a2 = m.reference) != null ? _a2 : "\u2014"
+                          }
+                        )
+                      ]
+                    },
+                    ri
+                  );
+                }) })
+              ] })),
+              (activeTab === "unmatchedA" || activeTab === "unmatchedB") && (() => {
+                var _a2, _b2;
+                const items = activeTab === "unmatchedA" ? (_a2 = p.unmatchedA) != null ? _a2 : [] : (_b2 = p.unmatchedB) != null ? _b2 : [];
+                const sourceLabel = activeTab === "unmatchedA" ? sourceA.label : sourceB.label;
+                if (items.length === 0)
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    EmptyState,
+                    {
+                      message: `No unmatched items in ${sourceLabel}`
+                    }
+                  );
+                return /* @__PURE__ */ jsxRuntime.jsxs("table", { style: { width: "100%", borderCollapse: "collapse" }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: ["", "Date", "Description", "Amount", "Ref"].map(
+                    (h, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                      "th",
+                      {
+                        style: {
+                          fontSize: "10px",
+                          fontWeight: 600,
+                          color: MUTED2,
+                          padding: i === 0 ? "9px 0 9px 10px" : "9px 10px",
+                          textAlign: i === 3 ? "right" : "left",
+                          borderBottom: `1px solid ${BORDER3}`,
+                          background: PAPER2,
+                          textTransform: "uppercase",
+                          letterSpacing: "0.05em",
+                          width: i === 0 ? "20px" : i === 2 ? "auto" : void 0
+                        },
+                        children: h
+                      },
+                      `${h}-${i}`
+                    )
+                  ) }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: items.map((item, ri) => {
+                    var _a3;
+                    return /* @__PURE__ */ jsxRuntime.jsxs(
+                      "tr",
+                      {
+                        style: {
+                          background: ri % 2 === 0 ? "white" : "#fafafa",
+                          transition: "background 0.1s ease"
+                        },
+                        onMouseEnter: (e) => {
+                          e.currentTarget.style.background = PAPER2;
+                        },
+                        onMouseLeave: (e) => {
+                          e.currentTarget.style.background = ri % 2 === 0 ? "white" : "#fafafa";
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "td",
+                            {
+                              style: {
+                                padding: "7px 0 7px 10px",
+                                borderBottom: `1px solid ${INNER_BORDER}`,
+                                width: "20px",
+                                borderLeft: `3px solid ${ACCENT2}`
+                              },
+                              children: /* @__PURE__ */ jsxRuntime.jsx(
+                                "span",
+                                {
+                                  style: {
+                                    width: "6px",
+                                    height: "6px",
+                                    borderRadius: "2px",
+                                    background: ACCENT2,
+                                    display: "inline-block",
+                                    opacity: 0.6
+                                  }
+                                }
+                              )
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "td",
+                            {
+                              style: {
+                                padding: "7px 10px",
+                                fontSize: "11px",
+                                borderBottom: `1px solid ${INNER_BORDER}`,
+                                whiteSpace: "nowrap",
+                                color: MUTED2,
+                                fontVariantNumeric: "tabular-nums"
+                              },
+                              children: item.date
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "td",
+                            {
+                              style: {
+                                padding: "7px 10px",
+                                fontSize: "12px",
+                                borderBottom: `1px solid ${INNER_BORDER}`,
+                                color: "var(--foreground)",
+                                fontWeight: 500
+                              },
+                              children: item.description
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "td",
+                            {
+                              style: {
+                                padding: "7px 10px",
+                                fontSize: "12px",
+                                textAlign: "right",
+                                fontVariantNumeric: "tabular-nums",
+                                borderBottom: `1px solid ${INNER_BORDER}`,
+                                color: ACCENT2,
+                                fontWeight: 600
+                              },
+                              children: fmt(item.amount, p.currency)
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "td",
+                            {
+                              style: {
+                                padding: "7px 10px",
+                                fontSize: "10px",
+                                color: MUTED2,
+                                fontFamily: "monospace",
+                                borderBottom: `1px solid ${INNER_BORDER}`,
+                                letterSpacing: "0.02em"
+                              },
+                              children: (_a3 = item.reference) != null ? _a3 : "\u2014"
+                            }
+                          )
+                        ]
+                      },
+                      ri
+                    );
+                  }) })
+                ] });
+              })()
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function EmptyState({ message }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        padding: "32px 24px",
+        textAlign: "center",
+        color: MUTED,
+        fontSize: "12px",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: "8px"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", opacity: 0.35, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", stroke: MUTED, strokeWidth: "1.5" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 12h8", stroke: MUTED, strokeWidth: "1.5", strokeLinecap: "round" })
+        ] }),
+        message
+      ]
+    }
+  );
+}
+
+exports.ReconciliationViewResolver = ReconciliationViewResolver;
+//# sourceMappingURL=resolver.cjs.map
+//# sourceMappingURL=resolver.cjs.map