@paro.io/expert-shared-components 1.14.65 → 1.14.67

package/lib/tax-axis/components/documents/DocumentCard.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DocumentCard = DocumentCard;
 const react_1 = __importDefault(require("react"));
 const TaxAxisBadge_1 = require("../shared/TaxAxisBadge");
-// Inline style values per status — mock T hex values for SVG strokes and
-// rgba borders that don't have direct Tailwind token equivalents.
 const STATUS_STYLES = {
     empty: {
         iconBg: "#171B44",
@@ -19,44 +17,79 @@ const STATUS_STYLES = {
         iconBorder: "rgba(251,154,29,0.25)",
         cardBorder: "rgba(251,154,29,0.25)",
     },
+    parsing: {
+        iconBg: "rgba(36,131,132,0.08)",
+        iconBorder: "rgba(36,131,132,0.25)",
+        cardBorder: "rgba(36,131,132,0.25)",
+    },
+    failed: {
+        iconBg: "rgba(197,48,48,0.08)",
+        iconBorder: "rgba(197,48,48,0.25)",
+        cardBorder: "rgba(197,48,48,0.25)",
+    },
     valid: {
         iconBg: "rgba(15,110,86,0.08)",
         iconBorder: "rgba(15,110,86,0.25)",
         cardBorder: "rgba(15,110,86,0.25)",
     },
 };
-function DocumentCard({ doc, tierBorderColor, tierBadgeColor, tierBadgeText, helpOverride, fieldCount, onUpload, onClear, onReview, }) {
-    var _a;
+function DocumentCard({ doc, tierBorderColor, tierBadgeColor, tierBadgeText, helpOverride, fieldCount, onUpload, onClear, onRemove, onReview, }) {
+    var _a, _b, _c;
     const ss = STATUS_STYLES[doc.status];
     const leftBorder = doc.status === "valid" ? "rgba(15,110,86,0.6)" : tierBorderColor;
+    const fileInputId = `tax-axis-upload-${doc.id}`;
+    const reuploadInputId = `tax-axis-reupload-${doc.id}`;
     return (react_1.default.createElement("div", { className: "bg-tax-axis-surface overflow-hidden", style: {
             border: `1px solid ${ss.cardBorder}`,
             borderLeft: `3px solid ${leftBorder}`,
             borderRadius: "0 10px 10px 0",
             boxShadow: "0 2px 12px rgba(6,8,33,0.5)",
         } },
-        react_1.default.createElement("div", { className: "px-4 py-3 flex gap-3 items-center" },
+        react_1.default.createElement("div", { className: "px-4 py-3 flex flex-col sm:flex-row gap-3 items-start sm:items-center" },
             react_1.default.createElement("div", { className: "w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0", style: {
                     background: ss.iconBg,
                     border: `1px solid ${ss.iconBorder}`,
                 } }, doc.status === "validating" ? (react_1.default.createElement("div", { className: "w-3.5 h-3.5 rounded-full animate-spin", style: {
                     border: "2px solid transparent",
                     borderTopColor: "#FB9A1D",
-                } })) : doc.status === "valid" ? (react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" },
+                } })) : doc.status === "parsing" ? (react_1.default.createElement("div", { className: "w-3.5 h-3.5 rounded-full animate-spin", style: {
+                    border: "2px solid transparent",
+                    borderTopColor: "#248384",
+                } })) : doc.status === "failed" ? (react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" },
+                react_1.default.createElement("path", { d: "M4 4l6 6M10 4L4 10", stroke: "#C53030", strokeWidth: "2", strokeLinecap: "round" }))) : doc.status === "valid" ? (react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" },
                 react_1.default.createElement("path", { d: "M2.5 7l3.5 3.5 5.5-6", stroke: "#0F6E56", strokeWidth: "2", strokeLinecap: "round" }))) : (react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" },
                 react_1.default.createElement("circle", { cx: "7", cy: "7", r: "5", stroke: "#9498B8", strokeWidth: "1.5", strokeDasharray: "3 3" })))),
             react_1.default.createElement("div", { className: "flex-1 min-w-0" },
                 react_1.default.createElement("div", { className: "flex items-center gap-1.5" },
                     react_1.default.createElement("span", { className: "text-[13px] font-medium text-white font-tax-axis-body" }, doc.name),
-                    doc.status === "empty" && (react_1.default.createElement(TaxAxisBadge_1.TaxAxisBadge, { color: tierBadgeColor, size: "xs" }, tierBadgeText))),
+                    doc.status === "empty" && (react_1.default.createElement(TaxAxisBadge_1.TaxAxisBadge, { color: tierBadgeColor, size: "xs" }, tierBadgeText)),
+                    doc.status === "failed" && (react_1.default.createElement(TaxAxisBadge_1.TaxAxisBadge, { color: "red", size: "xs" }, "FAILED")),
+                    doc.status === "valid" && doc.qboSource && (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("span", { style: {
+                                fontSize: 9,
+                                fontWeight: 700,
+                                letterSpacing: "0.05em",
+                                padding: "1px 6px",
+                                borderRadius: 3,
+                                background: "rgba(44,160,28,0.1)",
+                                border: "1px solid rgba(44,160,28,0.2)",
+                                color: "#2CA01C",
+                            } }, "QUICKBOOKS"),
+                        react_1.default.createElement("span", { style: {
+                                fontSize: 9,
+                                fontWeight: 600,
+                                color: "#2CA01C",
+                            } }, "Synced")))),
                 react_1.default.createElement("div", { className: "text-[11px] text-tax-axis-text-3 font-tax-axis-body mt-0.5" }, doc.status === "valid" && doc.fileName
                     ? `${doc.fileName}${fieldCount ? ` \u00b7 ${fieldCount} fields extracted` : ""}`
-                    : ((_a = doc.fileName) !== null && _a !== void 0 ? _a : (helpOverride !== null && helpOverride !== void 0 ? helpOverride : doc.help)))),
-            react_1.default.createElement("div", { className: "flex items-center gap-2 flex-shrink-0" },
+                    : doc.status === "failed" && doc.parseError
+                        ? doc.parseError
+                        : ((_a = doc.fileName) !== null && _a !== void 0 ? _a : (helpOverride !== null && helpOverride !== void 0 ? helpOverride : doc.help)))),
+            react_1.default.createElement("div", { className: "flex items-center gap-2 flex-shrink-0 w-full sm:w-auto" },
                 doc.status === "valid" && (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" },
                         react_1.default.createElement("path", { d: "M2.5 7l3.5 3.5 5.5-6", stroke: "#0F6E56", strokeWidth: "2", strokeLinecap: "round" })),
-                    react_1.default.createElement("button", { onClick: onReview, className: "rounded-md px-3 py-1 text-[11px] font-semibold font-tax-axis-mono cursor-pointer flex items-center gap-1.5", style: {
+                    onReview && (react_1.default.createElement("button", { onClick: onReview, className: "rounded-md px-3 py-1 text-[11px] font-semibold font-tax-axis-mono cursor-pointer flex items-center gap-1.5", style: {
                             background: "rgba(99,102,241,0.12)",
                             border: "1px solid rgba(99,102,241,0.30)",
                             color: "#a5b4fc",
@@ -64,10 +97,34 @@ function DocumentCard({ doc, tierBorderColor, tierBadgeColor, tierBadgeText, hel
                         react_1.default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" },
                             react_1.default.createElement("rect", { x: "2", y: "1.5", width: "8", height: "9", rx: "1.5", stroke: "#a5b4fc", strokeWidth: "1.2" }),
                             react_1.default.createElement("path", { d: "M4 4.5h4M4 6.5h4M4 8.5h2", stroke: "#a5b4fc", strokeWidth: "0.9", strokeLinecap: "round" })),
-                        "Review"),
+                        "Review")),
                     react_1.default.createElement("button", { onClick: onClear, className: "bg-transparent border-none p-1 text-tax-axis-text-4 text-sm cursor-pointer" }, "\u00D7"))),
-                doc.status === "empty" && (react_1.default.createElement("button", { onClick: onUpload, className: "rounded-md px-3.5 py-1.5 text-[11px] font-semibold text-tax-axis-teal-light font-tax-axis-mono cursor-pointer", style: {
-                        background: "rgba(36,131,132,0.10)",
-                        border: "1px solid rgba(36,131,132,0.2)",
-                    } }, "Upload"))))));
+                (doc.status === "parsing" || doc.status === "validating") && (react_1.default.createElement("span", { className: "text-[10px] font-semibold font-tax-axis-mono", style: { color: doc.status === "parsing" ? "#248384" : "#FB9A1D" } }, doc.status === "parsing" ? "Parsing…" : "Uploading…")),
+                doc.status === "failed" && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("input", { id: reuploadInputId, type: "file", className: "hidden", accept: (_b = doc.accept) === null || _b === void 0 ? void 0 : _b.join(","), onChange: (event) => {
+                            var _a;
+                            const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
+                            if (file) {
+                                onUpload(file);
+                            }
+                            event.currentTarget.value = "";
+                        } }),
+                    react_1.default.createElement("label", { htmlFor: reuploadInputId, className: "rounded-md px-2.5 py-1 text-[10px] font-semibold text-tax-axis-teal-light font-tax-axis-mono cursor-pointer", style: {
+                            background: "rgba(36,131,132,0.10)",
+                            border: "1px solid rgba(36,131,132,0.2)",
+                        } }, "Re-upload"),
+                    react_1.default.createElement("button", { onClick: onRemove || onClear, className: "bg-transparent border-none p-1 text-tax-axis-text-4 text-sm cursor-pointer", title: "Remove document" }, "\u00D7"))),
+                doc.status === "empty" && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("input", { id: fileInputId, type: "file", className: "hidden", accept: (_c = doc.accept) === null || _c === void 0 ? void 0 : _c.join(","), onChange: (event) => {
+                            var _a;
+                            const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
+                            if (file) {
+                                onUpload(file);
+                            }
+                            event.currentTarget.value = "";
+                        } }),
+                    react_1.default.createElement("label", { htmlFor: fileInputId, className: "rounded-md px-3.5 py-1.5 text-[11px] font-semibold text-tax-axis-teal-light font-tax-axis-mono cursor-pointer", style: {
+                            background: "rgba(36,131,132,0.10)",
+                            border: "1px solid rgba(36,131,132,0.2)",
+                        } }, "Upload")))))));
 }

package/lib/tax-axis/components/documents/DocumentReviewModal.d.ts

@@ -6,6 +6,8 @@ export interface DocumentReviewModalProps {
     documentName: string;
     fileName: string;
     jobId: string;
+    parsedData?: Record<string, unknown> | null;
+    onSaveReviewedData?: (fields: Record<string, string>) => Promise<void>;
     onClose: () => void;
 }
-export declare function DocumentReviewModal({ documentId, documentName, fileName, jobId: _jobId, onClose, }: DocumentReviewModalProps): React.JSX.Element;
+export declare function DocumentReviewModal({ documentId, documentName, fileName, jobId: _jobId, parsedData, onSaveReviewedData, onClose, }: DocumentReviewModalProps): React.JSX.Element;

package/lib/tax-axis/components/documents/DocumentReviewModal.js

@@ -22,19 +22,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SAVE_FIELD_EDIT_MUTATION = exports.EXTRACTED_FIELDS_QUERY = void 0;
 exports.DocumentReviewModal = DocumentReviewModal;
 const react_1 = __importStar(require("react"));
 const extractedData_1 = require("../../lib/data/extractedData");
-// ═══════════════════════════════════════════════════════════════════
-// DocumentReviewModal — inspect and edit parser-extracted fields.
-// Opens from the document row "Review" button. Sections, flagged
-// fields, inline editing with debounced auto-save.
-//
-// Data: stub-backed from EXTRACTED_DATA for now. GraphQL query and
-// mutation constants are exported for future wiring by consuming apps.
-// ═══════════════════════════════════════════════════════════════════
+const documentFieldCatalog_1 = require("../../lib/documentFieldCatalog");
 // ── GraphQL contracts (for consuming apps to use once resolvers land) ──
 exports.EXTRACTED_FIELDS_QUERY = `
   query ExtractedDocumentFields($jobId: ID!, $documentId: ID!) {
@@ -64,69 +66,58 @@ exports.SAVE_FIELD_EDIT_MUTATION = `
     }
   }
 `;
-// ── Stub section data (maps EXTRACTED_DATA → grouped sections) ──
-const STUB_SECTIONS = {
-    pnl: [
-        {
-            head: "Revenue",
-            fields: [
-                { key: "pnl-gross-revenue", label: "Gross Revenue", value: "$1,847,200", sourceRef: "Line 1a", confidence: 0.95 },
-                { key: "pnl-cogs", label: "Cost of Goods Sold", value: "$412,500", sourceRef: "Line 2", confidence: 0.92 },
-                { key: "pnl-gross-profit", label: "Gross Profit", value: "$1,434,700", sourceRef: "Computed", confidence: 0.99 },
-                { key: "pnl-other-income", label: "Other Income", value: "$18,400", sourceRef: "Line 6", confidence: 0.62 },
-            ],
-        },
-        {
-            head: "Operating Expenses",
-            fields: [
-                { key: "pnl-wages", label: "Wages & Salaries", value: "$487,000", sourceRef: "Line 13", confidence: 0.94 },
-                { key: "pnl-officer-comp", label: "Officer Compensation", value: "$180,000", sourceRef: "Line 7", confidence: 0.91 },
-                { key: "pnl-rent", label: "Rent / Lease", value: "$84,000", sourceRef: "Line 15", confidence: 0.88 },
-                { key: "pnl-meals", label: "Meals & Entertainment", value: "$8,400", sourceRef: "Line 19", confidence: 0.85 },
-                { key: "pnl-prof-fees", label: "Professional Fees", value: "$24,000", sourceRef: "Line 17", confidence: 0.93 },
-                { key: "pnl-depreciation", label: "Depreciation", value: "$62,300", sourceRef: "Line 14", confidence: 0.96 },
-            ],
-        },
-        {
-            head: "Net Income",
-            fields: [
-                { key: "pnl-net-ordinary", label: "Net Ordinary Income", value: "$598,000", sourceRef: "Line 21", confidence: 0.97 },
-                { key: "pnl-tax-income", label: "Taxable Income", value: "$580,200", sourceRef: "Line 28", confidence: 0.90 },
-                { key: "pnl-net-income", label: "Net Income", value: "$142,000", sourceRef: "Line 30", confidence: 0.93 },
-            ],
-        },
-    ],
-    balance: [
-        {
-            head: "Assets",
-            fields: [
-                { key: "bs-cash", label: "Cash & Equivalents", value: "$128,400", sourceRef: "Line 1", confidence: 0.97 },
-                { key: "bs-ar", label: "Accounts Receivable", value: "$42,000", sourceRef: "Line 2", confidence: 0.94 },
-                { key: "bs-inventory", label: "Inventory", value: "$45,000", sourceRef: "Line 3", confidence: 0.91 },
-                { key: "bs-total-assets", label: "Total Assets", value: "$340,000", sourceRef: "Line 11", confidence: 0.98 },
-            ],
-        },
-        {
-            head: "Liabilities",
-            fields: [
-                { key: "bs-ap", label: "Accounts Payable", value: "$31,200", sourceRef: "Line 15", confidence: 0.93 },
-                { key: "bs-loans", label: "Loans Payable", value: "$78,000", sourceRef: "Line 17", confidence: 0.90 },
-                { key: "bs-total-liab", label: "Total Liabilities", value: "$109,200", sourceRef: "Line 22", confidence: 0.96 },
-            ],
-        },
-        {
-            head: "Equity",
-            fields: [
-                { key: "bs-retained", label: "Retained Earnings", value: "$188,800", sourceRef: "Line 24", confidence: 0.92 },
-                { key: "bs-total-equity", label: "Total Equity", value: "$230,800", sourceRef: "Line 27", confidence: 0.95 },
-            ],
-        },
-    ],
-};
+// ── Format a raw value for display ──
+function formatValue(v) {
+    if (v === null || v === undefined)
+        return "";
+    if (typeof v === "number")
+        return `$${v.toLocaleString()}`;
+    if (typeof v === "boolean")
+        return v ? "Yes" : "No";
+    return String(v);
+}
+// ── Build ReviewSection[] from real parsedData using the catalog ──
+function buildSectionsFromCatalog(documentType, fields) {
+    const catalog = documentFieldCatalog_1.DOCUMENT_FIELD_CATALOG[documentType];
+    if (!catalog) {
+        // Unknown doc type — render all non-null scalar fields in one flat section
+        const flatFields = Object.entries(fields)
+            .filter(([, v]) => v !== null && v !== undefined && typeof v !== "object")
+            .map(([key, val]) => ({
+            key,
+            label: key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()),
+            value: formatValue(val),
+            sourceRef: "",
+            confidence: 0.9,
+        }));
+        return flatFields.length > 0 ? [{ head: "Extracted Fields", fields: flatFields }] : [];
+    }
+    return catalog.sections
+        .map((section) => {
+        const sectionFields = section.fields
+            .filter((key) => {
+            const v = fields[key];
+            // Include all scalar fields from the catalog — show empty string for null/undefined.
+            // Skip only object/array values (dicts, arrays) which can't be inline-edited.
+            return typeof v !== "object" || v === null || v === undefined;
+        })
+            .map((key) => {
+            var _a, _b;
+            const def = catalog.fields[key];
+            return {
+                key,
+                label: (_a = def === null || def === void 0 ? void 0 : def.label) !== null && _a !== void 0 ? _a : key.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()),
+                value: formatValue(fields[key]),
+                sourceRef: (_b = def === null || def === void 0 ? void 0 : def.sourceRef) !== null && _b !== void 0 ? _b : "",
+                confidence: 0.9,
+            };
+        });
+        return { head: section.head, fields: sectionFields };
+    })
+        .filter((s) => s.fields.length > 0);
+}
+// ── Stub fallback when no real parsedData is available ──
 function getStubSections(documentId) {
-    if (STUB_SECTIONS[documentId])
-        return STUB_SECTIONS[documentId];
-    // Fallback: build sections from EXTRACTED_DATA if available
     const doc = extractedData_1.EXTRACTED_DATA.find((d) => d.docId === documentId);
     if (!doc)
         return [];
@@ -147,251 +138,110 @@ function getTotalFieldCount(sections) {
     return sections.reduce((sum, s) => sum + s.fields.length, 0);
 }
 // ── Component ──
-function DocumentReviewModal({ documentId, documentName, fileName, jobId: _jobId, onClose, }) {
+function DocumentReviewModal({ documentId, documentName, fileName, jobId: _jobId, parsedData, onSaveReviewedData, onClose, }) {
     const [loading, setLoading] = (0, react_1.useState)(true);
     const [sections, setSections] = (0, react_1.useState)([]);
     const [saveStatus, setSaveStatus] = (0, react_1.useState)("idle");
     const debounceTimers = (0, react_1.useRef)({});
-    // Stub fetch: simulate loading delay
     (0, react_1.useEffect)(() => {
+        var _a;
+        if (parsedData && typeof parsedData === "object") {
+            const fields = ((_a = parsedData.fields) !== null && _a !== void 0 ? _a : parsedData);
+            const documentType = parsedData.documentType || documentId;
+            setSections(buildSectionsFromCatalog(documentType, fields));
+            setLoading(false);
+            return;
+        }
+        // Fallback: stub loading delay
         const t = setTimeout(() => {
             setSections(getStubSections(documentId));
             setLoading(false);
         }, 400);
         return () => clearTimeout(t);
-    }, [documentId]);
+    }, [documentId, parsedData]);
     const handleFieldChange = (0, react_1.useCallback)((sectionIdx, fieldIdx, newValue) => {
         setSections((prev) => prev.map((sec, si) => si === sectionIdx
             ? Object.assign(Object.assign({}, sec), { fields: sec.fields.map((f, fi) => fi === fieldIdx ? Object.assign(Object.assign({}, f), { value: newValue }) : f) }) : sec));
         const timerKey = `${sectionIdx}-${fieldIdx}`;
-        if (debounceTimers.current[timerKey]) {
-            clearTimeout(debounceTimers.current[timerKey]);
-        }
+        clearTimeout(debounceTimers.current[timerKey]);
         setSaveStatus("saving");
         debounceTimers.current[timerKey] = setTimeout(() => {
-            // Stub save — replace with GraphQL mutation when resolvers are ready
             setSaveStatus("saved");
             setTimeout(() => setSaveStatus("idle"), 1500);
         }, 900);
-    }, []);
-    // Cleanup debounce timers on unmount
+    }, [sections]);
+    const handleDone = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
+        if (onSaveReviewedData && sections.length > 0) {
+            const allFields = {};
+            sections.forEach((sec) => sec.fields.forEach((f) => { allFields[f.key] = f.value; }));
+            try {
+                yield onSaveReviewedData(allFields);
+            }
+            catch ( /* non-fatal */_a) { /* non-fatal */ }
+        }
+        onClose();
+    }), [onSaveReviewedData, sections, onClose]);
     (0, react_1.useEffect)(() => {
         const timers = debounceTimers.current;
-        return () => {
-            Object.values(timers).forEach(clearTimeout);
-        };
+        return () => { Object.values(timers).forEach(clearTimeout); };
     }, []);
     const totalFields = getTotalFieldCount(sections);
     const isFlagged = (f) => f.confidence < 0.8;
-    return (
-    // Overlay
-    react_1.default.createElement("div", { onClick: onClose, style: {
-            position: "fixed",
-            inset: 0,
-            zIndex: 9999,
-            background: "rgba(0,0,0,0.65)",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-        } },
-        react_1.default.createElement("div", { onClick: (e) => e.stopPropagation(), style: {
-                width: 520,
-                maxHeight: "85vh",
-                background: "#111827",
-                border: "1px solid #1f2937",
-                borderRadius: 16,
-                display: "flex",
-                flexDirection: "column",
-                boxShadow: "0 25px 60px rgba(0,0,0,0.5)",
-            } },
-            react_1.default.createElement("div", { style: {
-                    padding: "20px 24px 16px",
-                    borderBottom: "1px solid #1f2937",
-                    display: "flex",
-                    alignItems: "flex-start",
-                    gap: 14,
-                } },
-                react_1.default.createElement("div", { style: {
-                        width: 40,
-                        height: 40,
-                        borderRadius: 10,
-                        background: "rgba(99,102,241,0.12)",
-                        border: "1px solid rgba(99,102,241,0.25)",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        flexShrink: 0,
-                    } },
+    return (react_1.default.createElement("div", { onClick: onClose, style: { position: "fixed", inset: 0, zIndex: 9999, background: "rgba(0,0,0,0.65)", display: "flex", alignItems: "center", justifyContent: "center" } },
+        react_1.default.createElement("div", { onClick: (e) => e.stopPropagation(), style: { width: 520, maxHeight: "85vh", background: "#111827", border: "1px solid #1f2937", borderRadius: 16, display: "flex", flexDirection: "column", boxShadow: "0 25px 60px rgba(0,0,0,0.5)" } },
+            react_1.default.createElement("div", { style: { padding: "20px 24px 16px", borderBottom: "1px solid #1f2937", display: "flex", alignItems: "flex-start", gap: 14 } },
+                react_1.default.createElement("div", { style: { width: 40, height: 40, borderRadius: 10, background: "rgba(99,102,241,0.12)", border: "1px solid rgba(99,102,241,0.25)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 } },
                     react_1.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none" },
                         react_1.default.createElement("rect", { x: "3", y: "2", width: "12", height: "14", rx: "2", stroke: "#818cf8", strokeWidth: "1.5" }),
                         react_1.default.createElement("path", { d: "M6 6h6M6 9h6M6 12h4", stroke: "#818cf8", strokeWidth: "1.2", strokeLinecap: "round" }))),
                 react_1.default.createElement("div", { style: { flex: 1, minWidth: 0 } },
-                    react_1.default.createElement("div", { className: "font-tax-axis-body", style: {
-                            fontSize: 15,
-                            fontWeight: 600,
-                            color: "#f3f4f6",
-                            marginBottom: 3,
-                        } },
+                    react_1.default.createElement("div", { className: "font-tax-axis-body", style: { fontSize: 15, fontWeight: 600, color: "#f3f4f6", marginBottom: 3 } },
                         documentName,
                         " \u2014 Extracted Fields"),
                     react_1.default.createElement("div", { className: "font-tax-axis-body", style: { fontSize: 12, color: "#9ca3af" } },
                         fileName,
-                        !loading && (react_1.default.createElement(react_1.default.Fragment, null,
+                        !loading && react_1.default.createElement(react_1.default.Fragment, null,
                             " ",
                             "\u00B7 ",
                             totalFields,
-                            " fields \u00B7 Review and correct parsed values")))),
-                react_1.default.createElement("button", { onClick: onClose, style: {
-                        background: "transparent",
-                        border: "none",
-                        color: "#6b7280",
-                        fontSize: 20,
-                        cursor: "pointer",
-                        padding: "2px 6px",
-                        lineHeight: 1,
-                    } }, "\u00D7")),
-            react_1.default.createElement("div", { style: {
-                    flex: 1,
-                    overflowY: "auto",
-                    padding: "16px 24px 8px",
-                } }, loading ? (react_1.default.createElement(LoadingSkeleton, null)) : (sections.map((section, si) => (react_1.default.createElement("div", { key: section.head, style: { marginBottom: 20 } },
-                react_1.default.createElement("div", { style: {
-                        display: "flex",
-                        alignItems: "center",
-                        gap: 10,
-                        marginBottom: 10,
-                    } },
-                    react_1.default.createElement("span", { className: "font-tax-axis-mono", style: {
-                            fontSize: 10,
-                            fontWeight: 700,
-                            letterSpacing: "0.08em",
-                            textTransform: "uppercase",
-                            color: "#6b7280",
-                        } }, section.head),
-                    react_1.default.createElement("div", { style: {
-                            flex: 1,
-                            height: 1,
-                            background: "#1f2937",
-                        } })),
-                react_1.default.createElement("div", { style: {
-                        background: "#0d1117",
-                        borderRadius: 10,
-                        border: "1px solid #1f2937",
-                        overflow: "hidden",
-                    } }, section.fields.map((field, fi) => {
+                            " fields \u00B7 Review and correct parsed values"))),
+                react_1.default.createElement("button", { onClick: onClose, style: { background: "transparent", border: "none", color: "#6b7280", fontSize: 20, cursor: "pointer", padding: "2px 6px", lineHeight: 1 } }, "\u00D7")),
+            react_1.default.createElement("div", { style: { flex: 1, overflowY: "auto", padding: "16px 24px 8px" } }, loading ? (react_1.default.createElement(LoadingSkeleton, null)) : sections.length === 0 ? (react_1.default.createElement("div", { style: { color: "#6b7280", fontSize: 13, textAlign: "center", padding: "32px 0" } }, "No extracted fields available for this document.")) : (sections.map((section, si) => (react_1.default.createElement("div", { key: section.head, style: { marginBottom: 20 } },
+                react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10, marginBottom: 10 } },
+                    react_1.default.createElement("span", { className: "font-tax-axis-mono", style: { fontSize: 10, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: "#6b7280" } }, section.head),
+                    react_1.default.createElement("div", { style: { flex: 1, height: 1, background: "#1f2937" } })),
+                react_1.default.createElement("div", { style: { background: "#0d1117", borderRadius: 10, border: "1px solid #1f2937", overflow: "hidden" } }, section.fields.map((field, fi) => {
                     const flagged = isFlagged(field);
-                    return (react_1.default.createElement("div", { key: field.key, style: {
-                            display: "grid",
-                            gridTemplateColumns: "140px 1fr auto",
-                            alignItems: "center",
-                            padding: "10px 14px",
-                            borderBottom: fi < section.fields.length - 1
-                                ? "1px solid #1f2937"
-                                : "none",
-                            gap: 12,
-                        } },
-                        react_1.default.createElement("span", { className: "font-tax-axis-body", style: {
-                                fontSize: 12,
-                                color: flagged ? "#fbbf24" : "#9ca3af",
-                                display: "flex",
-                                alignItems: "center",
-                                gap: 5,
-                            } },
+                    return (react_1.default.createElement("div", { key: field.key, style: { display: "grid", gridTemplateColumns: "160px 1fr auto", alignItems: "center", padding: "10px 14px", borderBottom: fi < section.fields.length - 1 ? "1px solid #1f2937" : "none", gap: 12 } },
+                        react_1.default.createElement("span", { className: "font-tax-axis-body", style: { fontSize: 12, color: flagged ? "#fbbf24" : "#9ca3af", display: "flex", alignItems: "center", gap: 5 } },
                             flagged && (react_1.default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" },
                                 react_1.default.createElement("path", { d: "M6 1L11 10H1L6 1Z", stroke: "#fbbf24", strokeWidth: "1.2", strokeLinejoin: "round" }),
                                 react_1.default.createElement("path", { d: "M6 4.5V6.5M6 8V8.01", stroke: "#fbbf24", strokeWidth: "1.1", strokeLinecap: "round" }))),
                             field.label),
-                        react_1.default.createElement("input", { type: "text", value: field.value, onChange: (e) => handleFieldChange(si, fi, e.target.value), style: {
-                                background: "#0d1117",
-                                border: `1px solid ${flagged ? "rgba(251,191,36,0.4)" : "#1f2937"}`,
-                                borderRadius: 6,
-                                padding: "7px 10px",
-                                color: "#e5e7eb",
-                                fontSize: 13,
-                                fontFamily: "monospace",
-                                outline: "none",
-                                width: "100%",
-                                boxSizing: "border-box",
-                            } }),
-                        react_1.default.createElement("span", { className: "font-tax-axis-mono", style: {
-                                fontSize: 11,
-                                color: flagged ? "#fbbf24" : "#4ade80",
-                                whiteSpace: "nowrap",
-                                display: "flex",
-                                alignItems: "center",
-                                gap: 4,
-                            } },
-                            field.sourceRef,
+                        react_1.default.createElement("input", { type: "text", value: field.value, onChange: (e) => handleFieldChange(si, fi, e.target.value), style: { background: "#0d1117", border: `1px solid ${flagged ? "rgba(251,191,36,0.4)" : "#1f2937"}`, borderRadius: 6, padding: "7px 10px", color: "#e5e7eb", fontSize: 13, fontFamily: "monospace", outline: "none", width: "100%", boxSizing: "border-box" } }),
+                        react_1.default.createElement("span", { className: "font-tax-axis-mono", style: { fontSize: 11, color: flagged ? "#fbbf24" : "#4ade80", whiteSpace: "nowrap", display: "flex", alignItems: "center", gap: 4 } },
+                            field.sourceRef || "",
                             " ",
-                            flagged ? (react_1.default.createElement("span", { style: { fontSize: 10 } }, "\u25B2")) : (react_1.default.createElement("span", { style: { color: "#4ade80", fontSize: 12 } }, "\u2713")))));
+                            flagged ? react_1.default.createElement("span", { style: { fontSize: 10 } }, "\u25B2") : react_1.default.createElement("span", { style: { fontSize: 12 } }, "\u2713"))));
                 }))))))),
-            react_1.default.createElement("div", { style: {
-                    padding: "14px 24px",
-                    borderTop: "1px solid #1f2937",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                } },
-                react_1.default.createElement("span", { className: "font-tax-axis-body", style: {
-                        fontSize: 11,
-                        color: "#6b7280",
-                        display: "flex",
-                        alignItems: "center",
-                        gap: 6,
-                    } },
+            react_1.default.createElement("div", { style: { padding: "14px 24px", borderTop: "1px solid #1f2937", display: "flex", alignItems: "center", justifyContent: "space-between" } },
+                react_1.default.createElement("span", { className: "font-tax-axis-body", style: { fontSize: 11, color: "#6b7280", display: "flex", alignItems: "center", gap: 6 } },
                     saveStatus === "idle" && (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" },
                             react_1.default.createElement("circle", { cx: "6", cy: "6", r: "5", stroke: "#6b7280", strokeWidth: "1.2" }),
                             react_1.default.createElement("path", { d: "M6 3.5V6.5L8 7.5", stroke: "#6b7280", strokeWidth: "1.1", strokeLinecap: "round" })),
                         "Changes save automatically")),
                     saveStatus === "saving" && (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement("div", { style: {
-                                width: 10,
-                                height: 10,
-                                borderRadius: "50%",
-                                border: "2px solid transparent",
-                                borderTopColor: "#818cf8",
-                                animation: "spin 0.6s linear infinite",
-                            } }),
+                        react_1.default.createElement("div", { style: { width: 10, height: 10, borderRadius: "50%", border: "2px solid transparent", borderTopColor: "#818cf8", animation: "spin 0.6s linear infinite" } }),
                         "Saving\u2026")),
-                    saveStatus === "saved" && (react_1.default.createElement("span", { style: { color: "#4ade80" } }, "Saved \u2713"))),
-                react_1.default.createElement("button", { onClick: onClose, className: "font-tax-axis-body", style: {
-                        background: "rgba(99,102,241,0.9)",
-                        border: "none",
-                        borderRadius: 8,
-                        padding: "9px 28px",
-                        color: "#fff",
-                        fontSize: 13,
-                        fontWeight: 600,
-                        cursor: "pointer",
-                    } }, "Done"))),
-        react_1.default.createElement("style", null, `
-        @keyframes spin {
-          to { transform: rotate(360deg); }
-        }
-      `)));
+                    saveStatus === "saved" && react_1.default.createElement("span", { style: { color: "#4ade80" } }, "Saved \u2713")),
+                react_1.default.createElement("button", { onClick: handleDone, className: "font-tax-axis-body", style: { background: "rgba(99,102,241,0.9)", border: "none", borderRadius: 8, padding: "9px 28px", color: "#fff", fontSize: 13, fontWeight: 600, cursor: "pointer" } }, "Done"))),
+        react_1.default.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`)));
 }
-// ── Loading skeleton ──
 function LoadingSkeleton() {
     return (react_1.default.createElement("div", null, [1, 2].map((i) => (react_1.default.createElement("div", { key: i, style: { marginBottom: 20 } },
-        react_1.default.createElement("div", { style: {
-                width: 100,
-                height: 10,
-                background: "#1f2937",
-                borderRadius: 4,
-                marginBottom: 10,
-            } }),
-        react_1.default.createElement("div", { style: {
-                background: "#0d1117",
-                borderRadius: 10,
-                border: "1px solid #1f2937",
-                padding: 14,
-            } }, [1, 2, 3].map((j) => (react_1.default.createElement("div", { key: j, style: {
-                display: "grid",
-                gridTemplateColumns: "140px 1fr 60px",
-                gap: 12,
-                marginBottom: j < 3 ? 12 : 0,
-            } },
+        react_1.default.createElement("div", { style: { width: 100, height: 10, background: "#1f2937", borderRadius: 4, marginBottom: 10 } }),
+        react_1.default.createElement("div", { style: { background: "#0d1117", borderRadius: 10, border: "1px solid #1f2937", padding: 14 } }, [1, 2, 3].map((j) => (react_1.default.createElement("div", { key: j, style: { display: "grid", gridTemplateColumns: "160px 1fr 60px", gap: 12, marginBottom: j < 3 ? 12 : 0 } },
             react_1.default.createElement("div", { style: { height: 14, background: "#1f2937", borderRadius: 4 } }),
             react_1.default.createElement("div", { style: { height: 32, background: "#1f2937", borderRadius: 6 } }),
             react_1.default.createElement("div", { style: { height: 14, background: "#1f2937", borderRadius: 4 } }))))))))));