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

package/lib/tax-axis/components/documents/qbo/QboAvailableReportsModal.js

@@ -0,0 +1,180 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QboAvailableReportsModal = QboAvailableReportsModal;
+const react_1 = __importStar(require("react"));
+const qboConstants_1 = require("./qboConstants");
+const QBO_YEAR_OPTIONS = [2023, 2024, 2025, 2026];
+function QboAvailableReportsModal({ open, companyName, reports = qboConstants_1.QBO_REPORT_OPTIONS, selectedYear, onYearChange, onCancel, onConfirm, }) {
+    const availableReports = reports.filter((r) => r.available);
+    const [selected, setSelected] = (0, react_1.useState)(() => new Set(availableReports.map((r) => r.id)));
+    const [localYear, setLocalYear] = (0, react_1.useState)(selectedYear !== null && selectedYear !== void 0 ? selectedYear : new Date().getFullYear());
+    const handleYearChange = (year) => {
+        setLocalYear(year);
+        if (onYearChange)
+            onYearChange(year);
+    };
+    if (!open)
+        return null;
+    const toggleReport = (id) => {
+        setSelected((prev) => {
+            const next = new Set(prev);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            return next;
+        });
+    };
+    return (react_1.default.createElement("div", { onClick: onCancel, 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: 480,
+                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" } },
+                react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 12 } },
+                    react_1.default.createElement("div", { style: {
+                            width: 36,
+                            height: 36,
+                            borderRadius: 8,
+                            background: "rgba(44,160,28,0.12)",
+                            border: "1px solid rgba(44,160,28,0.25)",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                        } },
+                        react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
+                            react_1.default.createElement("rect", { x: "3", y: "2", width: "10", height: "12", rx: "1.5", stroke: qboConstants_1.QBO_GREEN, strokeWidth: "1.2" }),
+                            react_1.default.createElement("path", { d: "M5.5 5.5h5M5.5 8h5M5.5 10.5h3", stroke: qboConstants_1.QBO_GREEN, strokeWidth: "0.9", strokeLinecap: "round" }))),
+                    react_1.default.createElement("div", { style: { flex: 1 } },
+                        react_1.default.createElement("div", { style: { fontSize: 15, fontWeight: 600, color: "#f3f4f6" } }, "Available Reports"),
+                        react_1.default.createElement("div", { style: { fontSize: 12, color: "#9ca3af", marginTop: 2 } },
+                            companyName,
+                            " \u00B7 Select reports to import")),
+                    react_1.default.createElement("button", { onClick: onCancel, style: {
+                            background: "transparent",
+                            border: "none",
+                            color: "#6b7280",
+                            fontSize: 18,
+                            cursor: "pointer",
+                            padding: 4,
+                            lineHeight: 1,
+                        } }, "\u00D7"))),
+            react_1.default.createElement("div", { style: { padding: "14px 24px 0", borderBottom: "1px solid #1f2937" } },
+                react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 10, paddingBottom: 14 } },
+                    react_1.default.createElement("span", { style: { fontSize: 12, color: "#9ca3af", flexShrink: 0 } }, "Tax Year"),
+                    react_1.default.createElement("div", { style: { display: "flex", gap: 6 } }, QBO_YEAR_OPTIONS.map((yr) => (react_1.default.createElement("button", { key: yr, onClick: () => handleYearChange(yr), style: Object.assign(Object.assign({ padding: "4px 12px", borderRadius: 6, fontSize: 12, fontWeight: 600, cursor: "pointer", border: "none" }, (localYear === yr
+                            ? { background: qboConstants_1.QBO_GREEN, color: "white" }
+                            : { background: "rgba(255,255,255,0.05)", color: "#9ca3af" })), { transition: "all 150ms" }) }, yr)))))),
+            react_1.default.createElement("div", { style: { padding: "16px 24px", flex: 1, overflowY: "auto" } }, reports.map((report, i) => {
+                const isAvailable = report.available;
+                const isChecked = selected.has(report.id);
+                return (react_1.default.createElement("div", { key: report.id, style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 12,
+                        padding: "12px 0",
+                        borderBottom: i < reports.length - 1 ? "1px solid #1f2937" : "none",
+                        opacity: isAvailable ? 1 : 0.5,
+                    } },
+                    react_1.default.createElement("div", { onClick: () => isAvailable && toggleReport(report.id), style: {
+                            width: 18,
+                            height: 18,
+                            borderRadius: 4,
+                            border: isChecked
+                                ? `none`
+                                : `2px solid ${isAvailable ? "#4b5563" : "#374151"}`,
+                            background: isChecked ? qboConstants_1.QBO_GREEN : "transparent",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            cursor: isAvailable ? "pointer" : "not-allowed",
+                            flexShrink: 0,
+                            transition: "all 150ms",
+                        } }, isChecked && (react_1.default.createElement("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none" },
+                        react_1.default.createElement("path", { d: "M2 5l2.5 2.5L8 3", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round" })))),
+                    react_1.default.createElement("div", { style: { flex: 1 } },
+                        react_1.default.createElement("span", { style: { fontSize: 13, fontWeight: 500, color: isAvailable ? "#e5e7eb" : "#6b7280" } }, report.label)),
+                    react_1.default.createElement("span", { style: Object.assign({ fontSize: 9, fontWeight: 700, letterSpacing: "0.05em", padding: "2px 8px", borderRadius: 4 }, (isAvailable
+                            ? {
+                                background: "rgba(44,160,28,0.1)",
+                                border: "1px solid rgba(44,160,28,0.2)",
+                                color: qboConstants_1.QBO_GREEN,
+                            }
+                            : {
+                                background: "rgba(107,114,128,0.1)",
+                                border: "1px solid rgba(107,114,128,0.2)",
+                                color: "#6b7280",
+                            })) }, isAvailable ? "AVAILABLE" : "NOT FOUND")));
+            })),
+            react_1.default.createElement("div", { style: {
+                    padding: "14px 24px",
+                    borderTop: "1px solid #1f2937",
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                } },
+                react_1.default.createElement("span", { style: { fontSize: 11, color: "#6b7280" } },
+                    selected.size,
+                    " report",
+                    selected.size !== 1 ? "s" : "",
+                    " selected"),
+                react_1.default.createElement("div", { style: { display: "flex", gap: 10 } },
+                    react_1.default.createElement("button", { onClick: onCancel, style: {
+                            background: "transparent",
+                            border: "1px solid #374151",
+                            borderRadius: 8,
+                            padding: "8px 18px",
+                            fontSize: 13,
+                            fontWeight: 500,
+                            color: "#9ca3af",
+                            cursor: "pointer",
+                        } }, "Cancel"),
+                    react_1.default.createElement("button", { onClick: () => onConfirm(Array.from(selected)), disabled: selected.size === 0, style: {
+                            background: selected.size > 0 ? qboConstants_1.QBO_GREEN : "#374151",
+                            border: "none",
+                            borderRadius: 8,
+                            padding: "8px 20px",
+                            fontSize: 13,
+                            fontWeight: 600,
+                            color: "white",
+                            cursor: selected.size > 0 ? "pointer" : "not-allowed",
+                            opacity: selected.size > 0 ? 1 : 0.5,
+                        } }, "Confirm & Import"))))));
+}

package/lib/tax-axis/components/documents/qbo/QboClientSelectorModal.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { QboCompany } from "./types";
+interface QboClientSelectorModalProps {
+    open: boolean;
+    companies: QboCompany[];
+    onCancel: () => void;
+    onSelect: (company: QboCompany) => void;
+}
+export declare function QboClientSelectorModal({ open, companies, onCancel, onSelect, }: QboClientSelectorModalProps): React.JSX.Element | null;
+export {};

package/lib/tax-axis/components/documents/qbo/QboClientSelectorModal.js

@@ -0,0 +1,155 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QboClientSelectorModal = QboClientSelectorModal;
+const react_1 = __importStar(require("react"));
+const qboConstants_1 = require("./qboConstants");
+function QboClientSelectorModal({ open, companies, onCancel, onSelect, }) {
+    const [selectedId, setSelectedId] = (0, react_1.useState)(companies.length > 0 ? companies[0].id : null);
+    if (!open)
+        return null;
+    const handleConfirm = () => {
+        const company = companies.find((c) => c.id === selectedId);
+        if (company)
+            onSelect(company);
+    };
+    return (react_1.default.createElement("div", { onClick: onCancel, 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: 440,
+                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" } },
+                react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 12 } },
+                    react_1.default.createElement("div", { style: {
+                            width: 36,
+                            height: 36,
+                            borderRadius: 8,
+                            background: "rgba(44,160,28,0.12)",
+                            border: "1px solid rgba(44,160,28,0.25)",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                        } },
+                        react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
+                            react_1.default.createElement("rect", { x: "2", y: "3", width: "12", height: "10", rx: "2", stroke: qboConstants_1.QBO_GREEN, strokeWidth: "1.5" }),
+                            react_1.default.createElement("path", { d: "M5 7h6M5 9.5h4", stroke: qboConstants_1.QBO_GREEN, strokeWidth: "1", strokeLinecap: "round" }))),
+                    react_1.default.createElement("div", { style: { flex: 1 } },
+                        react_1.default.createElement("div", { style: { fontSize: 15, fontWeight: 600, color: "#f3f4f6" } }, "Select a Company"),
+                        react_1.default.createElement("div", { style: { fontSize: 12, color: "#9ca3af", marginTop: 2 } }, "Select the QuickBooks account for this client")),
+                    react_1.default.createElement("button", { onClick: onCancel, style: {
+                            background: "transparent",
+                            border: "none",
+                            color: "#6b7280",
+                            fontSize: 18,
+                            cursor: "pointer",
+                            padding: 4,
+                            lineHeight: 1,
+                        } }, "\u00D7"))),
+            react_1.default.createElement("div", { style: { padding: "12px 24px", flex: 1, overflowY: "auto" } }, companies.map((company) => {
+                const isSelected = company.id === selectedId;
+                return (react_1.default.createElement("label", { key: company.id, style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 12,
+                        padding: "10px 12px",
+                        borderRadius: 10,
+                        cursor: "pointer",
+                        marginBottom: 4,
+                        background: isSelected ? "rgba(44,160,28,0.06)" : "transparent",
+                        border: isSelected
+                            ? "1px solid rgba(44,160,28,0.25)"
+                            : "1px solid transparent",
+                        transition: "all 150ms",
+                    } },
+                    react_1.default.createElement("div", { style: {
+                            width: 16,
+                            height: 16,
+                            borderRadius: "50%",
+                            border: isSelected
+                                ? `5px solid ${qboConstants_1.QBO_GREEN}`
+                                : "2px solid #4b5563",
+                            background: isSelected ? "white" : "transparent",
+                            flexShrink: 0,
+                            transition: "all 150ms",
+                        } }),
+                    react_1.default.createElement("input", { type: "radio", name: "qbo-company", value: company.id, checked: isSelected, onChange: () => setSelectedId(company.id), style: { display: "none" } }),
+                    react_1.default.createElement("div", { style: {
+                            width: 32,
+                            height: 32,
+                            borderRadius: 8,
+                            background: company.color,
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            fontSize: 12,
+                            fontWeight: 700,
+                            color: "white",
+                            flexShrink: 0,
+                        } }, company.initials),
+                    react_1.default.createElement("span", { style: { fontSize: 13, fontWeight: 500, color: "#e5e7eb" } }, company.name)));
+            })),
+            react_1.default.createElement("div", { style: {
+                    padding: "14px 24px",
+                    borderTop: "1px solid #1f2937",
+                    display: "flex",
+                    justifyContent: "flex-end",
+                    gap: 10,
+                } },
+                react_1.default.createElement("button", { onClick: onCancel, style: {
+                        background: "transparent",
+                        border: "1px solid #374151",
+                        borderRadius: 8,
+                        padding: "8px 18px",
+                        fontSize: 13,
+                        fontWeight: 500,
+                        color: "#9ca3af",
+                        cursor: "pointer",
+                    } }, "Cancel"),
+                react_1.default.createElement("button", { onClick: handleConfirm, disabled: !selectedId, style: {
+                        background: selectedId ? qboConstants_1.QBO_GREEN : "#374151",
+                        border: "none",
+                        borderRadius: 8,
+                        padding: "8px 20px",
+                        fontSize: 13,
+                        fontWeight: 600,
+                        color: "white",
+                        cursor: selectedId ? "pointer" : "not-allowed",
+                        opacity: selectedId ? 1 : 0.5,
+                    } }, "Continue")))));
+}

package/lib/tax-axis/components/documents/qbo/QboConnectBanner.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface QboConnectBannerProps {
+    connected: boolean;
+    companyName?: string | null;
+    onConnect: () => void;
+    onDisconnect?: () => void;
+}
+export declare function QboConnectBanner({ connected, companyName, onConnect, onDisconnect, }: QboConnectBannerProps): React.JSX.Element;
+export {};

package/lib/tax-axis/components/documents/qbo/QboConnectBanner.js

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QboConnectBanner = QboConnectBanner;
+const react_1 = __importDefault(require("react"));
+const qboConstants_1 = require("./qboConstants");
+// QuickBooks logo SVG (simplified mark)
+function QboLogo({ size = 20 }) {
+    return (react_1.default.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none" },
+        react_1.default.createElement("rect", { width: "24", height: "24", rx: "4", fill: qboConstants_1.QBO_GREEN }),
+        react_1.default.createElement("path", { d: "M12 4C7.58 4 4 7.58 4 12s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm-1.5 12.5c-2.49 0-4.5-2.01-4.5-4.5s2.01-4.5 4.5-4.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5.67-1.5 1.5.67 1.5 1.5 1.5 1.5-.67 1.5-1.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5c0 2.49-2.01 4.5-4.5 4.5zm3 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5-1.5.67-1.5 1.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5c0-2.49 2.01-4.5 4.5-4.5s4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5z", fill: "white" })));
+}
+function QboConnectBanner({ connected, companyName, onConnect, onDisconnect, }) {
+    if (connected) {
+        return (react_1.default.createElement("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-3 px-4 py-3 mb-4 rounded-lg", style: {
+                background: qboConstants_1.QBO_GREEN_BG,
+                border: `1px solid ${qboConstants_1.QBO_GREEN_BORDER}`,
+            } },
+            react_1.default.createElement(QboLogo, { size: 20 }),
+            react_1.default.createElement("div", { className: "flex-1 min-w-0" },
+                react_1.default.createElement("div", { className: "text-[13px] font-medium text-white font-tax-axis-body" }, "Connected to QuickBooks"),
+                companyName && (react_1.default.createElement("div", { className: "text-[11px] text-tax-axis-text-3 font-tax-axis-body mt-0.5" }, companyName))),
+            react_1.default.createElement("span", { className: "text-[10px] font-semibold font-tax-axis-mono px-2 py-0.5 rounded", style: { background: "rgba(44,160,28,0.15)", color: qboConstants_1.QBO_GREEN } }, "SYNCED"),
+            react_1.default.createElement("button", { onClick: onConnect, className: "flex items-center gap-1.5 rounded-md px-3 py-1.5 text-[11px] font-semibold font-tax-axis-mono flex-shrink-0 cursor-pointer border-none", style: {
+                    background: qboConstants_1.QBO_GREEN,
+                    color: "white",
+                    boxShadow: "0 2px 8px rgba(44,160,28,0.3)",
+                } },
+                "Import",
+                react_1.default.createElement("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none" },
+                    react_1.default.createElement("path", { d: "M3 1.5L6.5 5 3 8.5", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }))),
+            onDisconnect && (react_1.default.createElement("button", { onClick: onDisconnect, className: "bg-transparent border-none text-tax-axis-text-4 text-[11px] font-tax-axis-body cursor-pointer hover:text-white" }, "Disconnect"))));
+    }
+    return (react_1.default.createElement("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-3 px-4 py-3.5 mb-4 rounded-lg cursor-pointer", style: {
+            background: "linear-gradient(135deg, rgba(44,160,28,0.06) 0%, rgba(44,160,28,0.02) 100%)",
+            border: `1px solid ${qboConstants_1.QBO_GREEN_BORDER}`,
+        }, onClick: onConnect, role: "button", tabIndex: 0, onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ")
+                onConnect();
+        } },
+        react_1.default.createElement(QboLogo, { size: 24 }),
+        react_1.default.createElement("div", { className: "flex-1 min-w-0" },
+            react_1.default.createElement("div", { className: "text-[13px] font-medium text-white font-tax-axis-body" }, "Import from QuickBooks Online"),
+            react_1.default.createElement("div", { className: "text-[11px] text-tax-axis-text-3 font-tax-axis-body mt-0.5" }, "Connect a QuickBooks account to import financial documents for this client")),
+        react_1.default.createElement("div", { className: "flex items-center gap-1.5 rounded-md px-3 py-1.5 text-[11px] font-semibold font-tax-axis-mono flex-shrink-0 w-full sm:w-auto justify-center sm:justify-start", style: {
+                background: qboConstants_1.QBO_GREEN,
+                color: "white",
+                boxShadow: "0 2px 8px rgba(44,160,28,0.3)",
+            } },
+            "Connect",
+            react_1.default.createElement("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none" },
+                react_1.default.createElement("path", { d: "M3 1.5L6.5 5 3 8.5", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })))));
+}

package/lib/tax-axis/components/documents/qbo/QboDocumentMappingModal.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+interface QboDocumentMappingModalProps {
+    open: boolean;
+    companyName: string;
+    selectedReports: string[];
+    onCancel: () => void;
+    onConfirm: () => void;
+}
+export declare function QboDocumentMappingModal({ open, companyName, selectedReports, onCancel, onConfirm, }: QboDocumentMappingModalProps): React.JSX.Element | null;
+export {};

package/lib/tax-axis/components/documents/qbo/QboDocumentMappingModal.js

@@ -0,0 +1,202 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QboDocumentMappingModal = QboDocumentMappingModal;
+const react_1 = __importStar(require("react"));
+const qboConstants_1 = require("./qboConstants");
+const STATUS_COLORS = {
+    mapped: {
+        bg: "rgba(44,160,28,0.08)",
+        border: "rgba(44,160,28,0.2)",
+        text: qboConstants_1.QBO_GREEN,
+        label: "MAPPED",
+    },
+    unmapped: {
+        bg: "rgba(107,114,128,0.08)",
+        border: "rgba(107,114,128,0.2)",
+        text: "#6b7280",
+        label: "UNMAPPED",
+    },
+    review: {
+        bg: "rgba(251,154,29,0.08)",
+        border: "rgba(251,154,29,0.2)",
+        text: "#FB9A1D",
+        label: "REVIEW",
+    },
+};
+function QboDocumentMappingModal({ open, companyName, selectedReports, onCancel, onConfirm, }) {
+    const hasPL = selectedReports.includes("profit_loss");
+    const hasBS = selectedReports.includes("balance_sheet");
+    const defaultTab = hasPL ? "profit_loss" : "balance_sheet";
+    const [activeTab, setActiveTab] = (0, react_1.useState)(defaultTab);
+    if (!open)
+        return null;
+    const rows = activeTab === "profit_loss" ? qboConstants_1.PL_MAPPING_ROWS : qboConstants_1.BS_MAPPING_ROWS;
+    const mappedCount = rows.filter((r) => r.status === "mapped").length;
+    const reviewCount = rows.filter((r) => r.status === "review").length;
+    const tabs = [
+        { key: "profit_loss", label: "Profit & Loss", visible: hasPL },
+        { key: "balance_sheet", label: "Balance Sheet", visible: hasBS },
+    ];
+    return (react_1.default.createElement("div", { onClick: onCancel, 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: 720,
+                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 0" } },
+                react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 12, marginBottom: 12 } },
+                    react_1.default.createElement("div", { style: {
+                            width: 36,
+                            height: 36,
+                            borderRadius: 8,
+                            background: "rgba(44,160,28,0.12)",
+                            border: "1px solid rgba(44,160,28,0.25)",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                        } },
+                        react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
+                            react_1.default.createElement("path", { d: "M2 5h5v6H2zM9 5h5v6H9z", stroke: qboConstants_1.QBO_GREEN, strokeWidth: "1.2", strokeLinecap: "round" }),
+                            react_1.default.createElement("path", { d: "M7 8h2", stroke: qboConstants_1.QBO_GREEN, strokeWidth: "1.2", strokeLinecap: "round" }))),
+                    react_1.default.createElement("div", { style: { flex: 1 } },
+                        react_1.default.createElement("div", { style: { fontSize: 15, fontWeight: 600, color: "#f3f4f6" } }, "Document Mapping"),
+                        react_1.default.createElement("div", { style: { fontSize: 12, color: "#9ca3af", marginTop: 2 } },
+                            companyName,
+                            " \u00B7 ",
+                            mappedCount,
+                            " mapped, ",
+                            reviewCount,
+                            " needs review")),
+                    react_1.default.createElement("button", { onClick: onCancel, style: {
+                            background: "transparent",
+                            border: "none",
+                            color: "#6b7280",
+                            fontSize: 18,
+                            cursor: "pointer",
+                            padding: 4,
+                            lineHeight: 1,
+                        } }, "\u00D7")),
+                react_1.default.createElement("div", { style: { display: "flex", gap: 0, borderBottom: "1px solid #1f2937" } }, tabs.filter((t) => t.visible).map((tab) => (react_1.default.createElement("button", { key: tab.key, onClick: () => setActiveTab(tab.key), style: {
+                        background: "transparent",
+                        border: "none",
+                        borderBottom: activeTab === tab.key ? `2px solid ${qboConstants_1.QBO_GREEN}` : "2px solid transparent",
+                        padding: "8px 16px",
+                        fontSize: 13,
+                        fontWeight: activeTab === tab.key ? 600 : 400,
+                        color: activeTab === tab.key ? "#e5e7eb" : "#6b7280",
+                        cursor: "pointer",
+                        marginBottom: -1,
+                    } }, tab.label))))),
+            react_1.default.createElement("div", { style: { flex: 1, overflowY: "auto", padding: "0 24px" } },
+                react_1.default.createElement("div", { style: {
+                        display: "grid",
+                        gridTemplateColumns: "1fr 1fr 90px",
+                        gap: 12,
+                        padding: "12px 0",
+                        borderBottom: "1px solid #1f2937",
+                        position: "sticky",
+                        top: 0,
+                        background: "#111827",
+                        zIndex: 1,
+                    } },
+                    react_1.default.createElement("span", { style: { fontSize: 10, fontWeight: 700, color: "#6b7280", letterSpacing: "0.05em", textTransform: "uppercase" } }, "QuickBooks Field"),
+                    react_1.default.createElement("span", { style: { fontSize: 10, fontWeight: 700, color: "#6b7280", letterSpacing: "0.05em", textTransform: "uppercase" } }, "TaxAxis Field"),
+                    react_1.default.createElement("span", { style: { fontSize: 10, fontWeight: 700, color: "#6b7280", letterSpacing: "0.05em", textTransform: "uppercase" } }, "Status")),
+                rows.map((row, i) => {
+                    const sc = STATUS_COLORS[row.status];
+                    return (react_1.default.createElement("div", { key: i, style: {
+                            display: "grid",
+                            gridTemplateColumns: "1fr 1fr 90px",
+                            gap: 12,
+                            padding: "10px 0",
+                            borderBottom: i < rows.length - 1 ? "1px solid rgba(31,41,55,0.5)" : "none",
+                            alignItems: "center",
+                        } },
+                        react_1.default.createElement("span", { style: { fontSize: 12, color: "#d1d5db", fontFamily: "monospace" } }, row.qboField),
+                        react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 6 } },
+                            react_1.default.createElement("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none" },
+                                react_1.default.createElement("path", { d: "M1 5h8M6 2.5L8.5 5 6 7.5", stroke: "#4b5563", strokeWidth: "1", strokeLinecap: "round" })),
+                            react_1.default.createElement("span", { style: { fontSize: 12, color: "#d1d5db", fontFamily: "monospace" } }, row.taxAxisField)),
+                        react_1.default.createElement("span", { style: {
+                                fontSize: 9,
+                                fontWeight: 700,
+                                letterSpacing: "0.05em",
+                                padding: "2px 8px",
+                                borderRadius: 4,
+                                background: sc.bg,
+                                border: `1px solid ${sc.border}`,
+                                color: sc.text,
+                                textAlign: "center",
+                            } }, sc.label)));
+                })),
+            react_1.default.createElement("div", { style: {
+                    padding: "14px 24px",
+                    borderTop: "1px solid #1f2937",
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                } },
+                react_1.default.createElement("span", { style: { fontSize: 11, color: "#6b7280" } },
+                    mappedCount,
+                    " of ",
+                    rows.length,
+                    " fields mapped"),
+                react_1.default.createElement("div", { style: { display: "flex", gap: 10 } },
+                    react_1.default.createElement("button", { onClick: onCancel, style: {
+                            background: "transparent",
+                            border: "1px solid #374151",
+                            borderRadius: 8,
+                            padding: "8px 18px",
+                            fontSize: 13,
+                            fontWeight: 500,
+                            color: "#9ca3af",
+                            cursor: "pointer",
+                        } }, "Cancel"),
+                    react_1.default.createElement("button", { onClick: onConfirm, style: {
+                            background: qboConstants_1.QBO_GREEN,
+                            border: "none",
+                            borderRadius: 8,
+                            padding: "8px 20px",
+                            fontSize: 13,
+                            fontWeight: 600,
+                            color: "white",
+                            cursor: "pointer",
+                            boxShadow: "0 2px 8px rgba(44,160,28,0.3)",
+                        } }, "Confirm & Import"))))));
+}

package/lib/tax-axis/components/documents/qbo/QboImportingModal.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface QboImportingModalProps {
+    open: boolean;
+    currentStepIndex: number;
+    companyName: string;
+}
+export declare function QboImportingModal({ open, currentStepIndex, companyName, }: QboImportingModalProps): React.JSX.Element | null;
+export {};