@paro.io/expert-shared-components 1.14.62 → 1.14.64

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

@@ -22,21 +22,19 @@ 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");
-const documentFieldCatalog_1 = require("../../lib/documentFieldCatalog");
+// ═══════════════════════════════════════════════════════════════════
+// 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.
+// ═══════════════════════════════════════════════════════════════════
 // ── GraphQL contracts (for consuming apps to use once resolvers land) ──
 exports.EXTRACTED_FIELDS_QUERY = `
   query ExtractedDocumentFields($jobId: ID!, $documentId: ID!) {
@@ -66,58 +64,69 @@ exports.SAVE_FIELD_EDIT_MUTATION = `
     }
   }
 `;
-// ── 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 ──
+// ── 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 },
+            ],
+        },
+    ],
+};
 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 [];
@@ -138,110 +147,251 @@ function getTotalFieldCount(sections) {
     return sections.reduce((sum, s) => sum + s.fields.length, 0);
 }
 // ── Component ──
-function DocumentReviewModal({ documentId, documentName, fileName, jobId: _jobId, parsedData, onSaveReviewedData, onClose, }) {
+function DocumentReviewModal({ documentId, documentName, fileName, jobId: _jobId, 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, parsedData]);
+    }, [documentId]);
     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}`;
-        clearTimeout(debounceTimers.current[timerKey]);
+        if (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);
-    }, [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]);
+    }, []);
+    // Cleanup debounce timers on unmount
     (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 (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 (
+    // 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,
+                    } },
                     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.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) => {
+                            " 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) => {
                     const flagged = isFlagged(field);
-                    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 } },
+                    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,
+                            } },
                             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: { fontSize: 12 } }, "\u2713"))));
+                            flagged ? (react_1.default.createElement("span", { style: { fontSize: 10 } }, "\u25B2")) : (react_1.default.createElement("span", { style: { color: "#4ade80", 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: 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); } }`)));
+                    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); }
+        }
+      `)));
 }
+// ── 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: "160px 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: "140px 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 } }))))))))));

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

@@ -14,8 +14,10 @@ interface DocumentTierProps {
     tier: TierDef;
     docs: DocState[];
     helpOverrides: Record<string, string>;
+    fieldCounts: Record<string, number>;
     onUpload: (idx: number) => void;
     onClear: (idx: number) => void;
+    onReview: (docId: string) => void;
 }
-export declare function DocumentTier({ tier, docs, helpOverrides, onUpload, onClear, }: DocumentTierProps): React.JSX.Element | null;
+export declare function DocumentTier({ tier, docs, helpOverrides, fieldCounts, onUpload, onClear, onReview, }: DocumentTierProps): React.JSX.Element | null;
 export {};

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DocumentTier = DocumentTier;
 const react_1 = __importDefault(require("react"));
 const DocumentCard_1 = require("./DocumentCard");
-function DocumentTier({ tier, docs, helpOverrides, onUpload, onClear, }) {
+function DocumentTier({ tier, docs, helpOverrides, fieldCounts, onUpload, onClear, onReview, }) {
     const tierDocs = tier.ids
         .map((id) => {
         const idx = docs.findIndex((d) => d.id === id);
@@ -19,5 +19,5 @@ function DocumentTier({ tier, docs, helpOverrides, onUpload, onClear, }) {
         react_1.default.createElement("div", { className: "flex items-center gap-2 mb-2" },
             react_1.default.createElement("span", { className: "text-[10px] font-bold uppercase tracking-widest font-tax-axis-mono", style: { color: tier.labelColor } }, tier.label),
             react_1.default.createElement("span", { className: "text-[10px] text-tax-axis-text-4 font-tax-axis-body" }, tier.sublabel)),
-        react_1.default.createElement("div", { className: "grid gap-1.5" }, tierDocs.map(({ doc, idx }) => (react_1.default.createElement(DocumentCard_1.DocumentCard, { key: doc.id, doc: doc, tierBorderColor: tier.borderColor, tierBadgeColor: tier.badgeColor, tierBadgeText: tier.badgeText, helpOverride: helpOverrides[doc.id], onUpload: () => onUpload(idx), onClear: () => onClear(idx) }))))));
+        react_1.default.createElement("div", { className: "grid gap-1.5" }, tierDocs.map(({ doc, idx }) => (react_1.default.createElement(DocumentCard_1.DocumentCard, { key: doc.id, doc: doc, tierBorderColor: tier.borderColor, tierBadgeColor: tier.badgeColor, tierBadgeText: tier.badgeText, helpOverride: helpOverrides[doc.id], fieldCount: fieldCounts[doc.id], onUpload: () => onUpload(idx), onClear: () => onClear(idx), onReview: () => onReview(doc.id) }))))));
 }

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

@@ -28,6 +28,7 @@ const react_1 = __importStar(require("react"));
 const documents_1 = require("../../lib/data/documents");
 const TaxAxisButton_1 = require("../shared/TaxAxisButton");
 const DocumentTier_1 = require("./DocumentTier");
+const DocumentReviewModal_1 = require("./DocumentReviewModal");
 // Stub filenames assigned when the user clicks "Upload" (mock App.jsx:1237)
 const STUB_FILENAMES = {
     "1120s": "2025_1120S.pdf",
@@ -39,6 +40,17 @@ const STUB_FILENAMES = {
     "fixed-assets": "Fixed_Assets.xlsx",
     "prior-returns": "Prior_Returns.pdf",
 };
+// Stub field counts per doc (mirrors STUB_SECTIONS in DocumentReviewModal)
+const STUB_FIELD_COUNTS = {
+    pnl: 13,
+    balance: 9,
+    "1120s": 3,
+    payroll: 3,
+    "state-return": 2,
+    cashflow: 1,
+    "fixed-assets": 1,
+    "prior-returns": 1,
+};
 // Short help text shown below each doc name when not yet uploaded
 // (mock App.jsx:1384). Overrides the longer DOC_SPECS_BASE.help.
 const HELP_OVERRIDES = {
@@ -83,8 +95,14 @@ const TIER_DEFS = [
     },
 ];
 function TaxAxisDocuments({ profile, onContinue, onBack, userContext: _userContext = "expert", }) {
+    var _a;
     const docSpecs = (0, react_1.useMemo)(() => (0, documents_1.getDocSpecs)(profile), [profile]);
     const [docs, setDocs] = (0, react_1.useState)(() => docSpecs.map((s) => (Object.assign(Object.assign({}, s), { status: "empty", fileName: null }))));
+    // Review modal state
+    const [reviewDocId, setReviewDocId] = (0, react_1.useState)(null);
+    const reviewDoc = reviewDocId
+        ? (_a = docs.find((d) => d.id === reviewDocId)) !== null && _a !== void 0 ? _a : null
+        : null;
     // Stub upload: empty -> validating -> valid after a short delay
     // (mock App.jsx:1238-1241)
     const handleUpload = (idx) => {
@@ -148,10 +166,11 @@ function TaxAxisDocuments({ profile, onContinue, onBack, userContext: _userConte
                     coveragePct,
                     "% coverage"),
                 validCount < docs.length && (react_1.default.createElement("span", { className: "text-[10px] text-tax-axis-text-4 font-tax-axis-body" }, "Upload more documents to increase strategy coverage")))),
-        TIER_DEFS.map((tier) => (react_1.default.createElement(DocumentTier_1.DocumentTier, { key: tier.key, tier: tier, docs: docs, helpOverrides: HELP_OVERRIDES, onUpload: handleUpload, onClear: handleClear }))),
+        TIER_DEFS.map((tier) => (react_1.default.createElement(DocumentTier_1.DocumentTier, { key: tier.key, tier: tier, docs: docs, helpOverrides: HELP_OVERRIDES, fieldCounts: STUB_FIELD_COUNTS, onUpload: handleUpload, onClear: handleClear, onReview: (docId) => setReviewDocId(docId) }))),
         react_1.default.createElement("div", { className: "flex gap-3 mt-6" },
             react_1.default.createElement(TaxAxisButton_1.TaxAxisButton, { variant: "secondary", onClick: onBack }, "Back"),
             react_1.default.createElement(TaxAxisButton_1.TaxAxisButton, { onClick: onContinue, disabled: requiredCount > requiredValid, className: "flex-1" }, requiredCount > requiredValid
                 ? `Upload ${requiredCount - requiredValid} more required doc${requiredCount - requiredValid > 1 ? "s" : ""}`
-                : "Run Analysis"))));
+                : "Run Analysis")),
+        reviewDoc && (react_1.default.createElement(DocumentReviewModal_1.DocumentReviewModal, { documentId: reviewDoc.id, documentName: reviewDoc.name, fileName: reviewDoc.fileName || "", jobId: "stub-job-id", onClose: () => setReviewDocId(null) }))));
 }

package/lib/tax-axis/components/extractionReview/TaxAxisExtractionReview.js

@@ -89,6 +89,22 @@ function TaxAxisExtractionReview({ onStatusChange, onConfirmAndUnlock, onBack, }
     return (react_1.default.createElement("div", null,
         react_1.default.createElement("style", null, `@keyframes spin{to{transform:rotate(360deg)}}`),
         react_1.default.createElement(PurposeBlock_1.PurposeBlock, { totalFields: totalFields, totalDocs: data_1.EXTRACTED_DATA.length }),
+        onConfirmAndUnlock && (react_1.default.createElement("div", { style: {
+                marginBottom: 16,
+                background: "linear-gradient(135deg, rgba(36,131,132,0.12), rgba(36,131,132,0.06))",
+                border: "1px solid rgba(36,131,132,0.3)",
+                borderRadius: 12,
+                padding: "18px 20px",
+            } },
+            react_1.default.createElement("div", { className: "flex items-center gap-4" },
+                react_1.default.createElement("div", { className: "flex-1" },
+                    react_1.default.createElement("div", { className: "text-[15px] font-bold text-white font-tax-axis-head mb-1" }, "Ready to view your report?"),
+                    react_1.default.createElement("div", { className: "text-[13px] text-tax-axis-text leading-relaxed font-tax-axis-body" }, totalFlags - totalEdits > 0
+                        ? (totalFlags - totalEdits) + " value" + (totalFlags - totalEdits > 1 ? "s" : "") + " still flagged. You can confirm now or correct values first."
+                        : "All extracted values look good. Confirm to unlock the Intelligence Report.")),
+                react_1.default.createElement("div", { className: "flex gap-2.5" },
+                    onBack && (react_1.default.createElement(TaxAxisButton_1.TaxAxisButton, { variant: "secondary", onClick: onBack }, "Back to Dashboard")),
+                    react_1.default.createElement(TaxAxisButton_1.TaxAxisButton, { onClick: onConfirmAndUnlock }, totalFlags - totalEdits > 0 ? "Confirm & Unlock Report" : "Confirm & View Report"))))),
         react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10, marginBottom: 12 } },
             react_1.default.createElement("div", { style: {
                     width: 8,
@@ -166,21 +182,5 @@ function TaxAxisExtractionReview({ onStatusChange, onConfirmAndUnlock, onBack, }
                     borderRadius: 4,
                     border: "1px solid #2E3160",
                 } }, d.code))))))),
-        react_1.default.createElement(RerunFooter_1.RerunFooter, { totalEdits: totalEdits, rerunning: rerunning, onRerun: handleRerun }),
-        onConfirmAndUnlock && (react_1.default.createElement("div", { style: {
-                marginTop: 16,
-                background: "linear-gradient(135deg, rgba(36,131,132,0.12), rgba(36,131,132,0.06))",
-                border: "1px solid rgba(36,131,132,0.3)",
-                borderRadius: 12,
-                padding: "18px 20px",
-            } },
-            react_1.default.createElement("div", { className: "flex items-center gap-4" },
-                react_1.default.createElement("div", { className: "flex-1" },
-                    react_1.default.createElement("div", { className: "text-[15px] font-bold text-white font-tax-axis-head mb-1" }, "Ready to view your report?"),
-                    react_1.default.createElement("div", { className: "text-[13px] text-tax-axis-text leading-relaxed font-tax-axis-body" }, totalFlags - totalEdits > 0
-                        ? (totalFlags - totalEdits) + " value" + (totalFlags - totalEdits > 1 ? "s" : "") + " still flagged. You can confirm now or correct values first."
-                        : "All extracted values look good. Confirm to unlock the Intelligence Report.")),
-                react_1.default.createElement("div", { className: "flex gap-2.5" },
-                    onBack && (react_1.default.createElement(TaxAxisButton_1.TaxAxisButton, { variant: "secondary", onClick: onBack }, "Back to Dashboard")),
-                    react_1.default.createElement(TaxAxisButton_1.TaxAxisButton, { onClick: onConfirmAndUnlock }, totalFlags - totalEdits > 0 ? "Confirm & Unlock Report" : "Confirm & View Report")))))));
+        react_1.default.createElement(RerunFooter_1.RerunFooter, { totalEdits: totalEdits, rerunning: rerunning, onRerun: handleRerun })));
 }