@paro.io/expert-shared-components 1.14.56 → 1.14.59

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

@@ -45,7 +45,7 @@ function DocumentCard({ doc, tierBorderColor, tierBadgeColor, tierBadgeText, hel
             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}`,
@@ -63,13 +63,29 @@ function DocumentCard({ doc, tierBorderColor, tierBadgeColor, tierBadgeText, hel
                 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 === "failed" && (react_1.default.createElement(TaxAxisBadge_1.TaxAxisBadge, { color: "red", size: "xs" }, "FAILED"))),
+                    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` : ""}`
                     : 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" },
+            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" })),

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

@@ -28,5 +28,16 @@ export interface TaxAxisDocumentsProps extends TaxAxisScreenProps {
     parsedFieldCounts?: Record<string, number>;
     jobId?: string;
     onSaveReviewedField?: (documentId: string, reviewedData: Record<string, unknown>) => Promise<void>;
+    qboConnected?: boolean;
+    qboCompanyName?: string | null;
+    qboAuthorizeUrl?: string;
+    onImportQboReport?: (sessionId: string, realmId: string, reportType: string, accountingMethod: string) => Promise<any>;
+    onQboConnected?: (companyName: string) => void;
+    onQboDisconnected?: () => void;
+    onQboImport?: (mappedDocs: {
+        slot: string;
+        fileName: string;
+    }[]) => void;
+    qboClientConfirmed?: boolean;
 }
-export declare function TaxAxisDocuments({ profile, entityType, onContinue, onBack, onUploadDocument, onDeleteDocument, fetchUploadedDocuments, parsedFieldCounts, jobId, onSaveReviewedField, userContext: _userContext, }: TaxAxisDocumentsProps): React.JSX.Element;
+export declare function TaxAxisDocuments({ profile, entityType, onContinue, onBack, onUploadDocument, onDeleteDocument, fetchUploadedDocuments, parsedFieldCounts, jobId, onSaveReviewedField, userContext: _userContext, qboConnected, qboCompanyName, qboAuthorizeUrl, onImportQboReport, onQboConnected, onQboDisconnected, onQboImport, qboClientConfirmed, }: TaxAxisDocumentsProps): React.JSX.Element;

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

@@ -38,6 +38,13 @@ const documents_1 = require("../../lib/data/documents");
 const TaxAxisButton_1 = require("../shared/TaxAxisButton");
 const DocumentTier_1 = require("./DocumentTier");
 const DocumentReviewModal_1 = require("./DocumentReviewModal");
+const QboConnectBanner_1 = require("./qbo/QboConnectBanner");
+const QboPermissionsModal_1 = require("./qbo/QboPermissionsModal");
+const QboClientSelectorModal_1 = require("./qbo/QboClientSelectorModal");
+const QboAvailableReportsModal_1 = require("./qbo/QboAvailableReportsModal");
+const QboDocumentMappingModal_1 = require("./qbo/QboDocumentMappingModal");
+const QboImportingModal_1 = require("./qbo/QboImportingModal");
+const useQboFlow_1 = require("./qbo/useQboFlow");
 const TIER_DEFS = [
     {
         key: "required",
@@ -70,8 +77,8 @@ const TIER_DEFS = [
         ids: [],
     },
 ];
-function TaxAxisDocuments({ profile, entityType, onContinue, onBack, onUploadDocument, onDeleteDocument, fetchUploadedDocuments, parsedFieldCounts, jobId = "stub-job-id", onSaveReviewedField, userContext: _userContext = "expert", }) {
-    var _a, _b, _c, _d, _e;
+function TaxAxisDocuments({ profile, entityType, onContinue, onBack, onUploadDocument, onDeleteDocument, fetchUploadedDocuments, parsedFieldCounts, jobId = "stub-job-id", onSaveReviewedField, userContext: _userContext = "expert", qboConnected = false, qboCompanyName, qboAuthorizeUrl, onImportQboReport, onQboConnected, onQboDisconnected, onQboImport, qboClientConfirmed, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const docSpecs = (0, react_1.useMemo)(() => (0, documents_1.getDocSpecs)(entityType !== null && entityType !== void 0 ? entityType : undefined), [entityType]);
     // Build tier defs dynamically from the doc spec list so they're always in sync.
     const tierDefs = (0, react_1.useMemo)(() => {
@@ -87,6 +94,52 @@ function TaxAxisDocuments({ profile, entityType, onContinue, onBack, onUploadDoc
     const [parsedDataByDocType, setParsedDataByDocType] = (0, react_1.useState)({});
     // reviewedData keyed by documentType — populated after CPA saves corrections; takes priority over parsedData in modal
     const [reviewedDataByDocType, setReviewedDataByDocType] = (0, react_1.useState)({});
+    // FIX A: handler for QBO import completion — updates doc card state and refreshes parsedData
+    const handleQboImportComplete = (0, react_1.useCallback)((mappedDocs) => {
+        setDocs((prev) => prev.map((d) => {
+            const match = mappedDocs.find((m) => m.slot === (d.documentType || d.id));
+            if (!match)
+                return d;
+            return Object.assign(Object.assign({}, d), { status: "valid", qboSource: true, fileName: match.fileName, parseError: null });
+        }));
+        // Refresh parsedData so the review modal has data immediately after import
+        if (fetchUploadedDocuments) {
+            fetchUploadedDocuments().then((uploaded) => {
+                const parsedByType = {};
+                for (const doc of uploaded) {
+                    if (doc.documentType && doc.parsedData) {
+                        parsedByType[doc.documentType] = doc.parsedData;
+                    }
+                }
+                if (Object.keys(parsedByType).length > 0) {
+                    setParsedDataByDocType((prev) => (Object.assign(Object.assign({}, prev), parsedByType)));
+                }
+            }).catch(() => { });
+        }
+        if (onQboImport)
+            onQboImport(mappedDocs);
+    }, [onQboImport, fetchUploadedDocuments]);
+    // QBO connect flow
+    const qboFlow = (0, useQboFlow_1.useQboFlow)({
+        qboConnected,
+        qboCompanyName,
+        qboAuthorizeUrl,
+        onImportQboReport,
+        fetchUploadedDocuments,
+        sessionId: jobId,
+        profileYear: (profile === null || profile === void 0 ? void 0 : profile.year) ? Number(profile.year) : undefined,
+        onQboConnected,
+        onQboDisconnected,
+        onQboImportComplete: handleQboImportComplete,
+    });
+    const showQboBanner = !!qboAuthorizeUrl || qboConnected;
+    // FIX B: gate document list behind QBO client confirmation or manual skip
+    const [clientConfirmed, setClientConfirmed] = (0, react_1.useState)(!!(qboClientConfirmed || qboConnected || !showQboBanner));
+    // Sync when qboConnected prop updates (e.g. localStorage restore in parent)
+    (0, react_1.useEffect)(() => {
+        if (qboConnected)
+            setClientConfirmed(true);
+    }, [qboConnected]);
     // On mount, restore card state from any already-uploaded documents in this session.
     // This runs whenever the user re-enters the DOCUMENT_UPLOAD step (e.g. after an
     // eval failure) so previously uploaded files appear as valid/failed instead of empty.
@@ -314,51 +367,55 @@ function TaxAxisDocuments({ profile, entityType, onContinue, onBack, onUploadDoc
         react_1.default.createElement("div", { className: "text-center mb-5 pt-5" },
             react_1.default.createElement("h1", { className: "text-[28px] font-bold text-white font-tax-axis-head mb-1.5" }, "Source Documents"),
             react_1.default.createElement("p", { className: "text-sm text-tax-axis-text-2 font-tax-axis-body" }, "Upload documents to run the full analysis.")),
-        react_1.default.createElement("div", { className: "py-3.5 px-[18px] mb-4 text-xs leading-relaxed font-tax-axis-body", style: {
-                background: "#171B44",
-                borderLeft: "3px solid #248384",
-                borderRadius: "0 8px 8px 0",
-                color: "#E6E8F5",
-            } }, "The minimum to run an analysis is the current-year P&L and Balance Sheet. However, accuracy and strategy coverage improve significantly with additional documents \u2014 particularly the federal tax return, fixed asset schedule, and W-2 forms."),
-        react_1.default.createElement("div", { className: "bg-tax-axis-surface border border-tax-axis-border rounded-[10px] px-[18px] py-3.5 mb-4" },
-            react_1.default.createElement("div", { className: "text-[10px] font-bold text-tax-axis-text-3 uppercase tracking-widest mb-2.5 font-tax-axis-mono" }, "Analysis Coverage"),
-            react_1.default.createElement("div", { className: "flex justify-between mb-1.5" },
-                react_1.default.createElement("span", { className: "text-xs text-tax-axis-text-2 font-tax-axis-body" },
-                    "Documents uploaded:",
-                    " ",
-                    react_1.default.createElement("strong", { className: "text-white" },
-                        validCount,
-                        " / ",
-                        docs.length)),
-                react_1.default.createElement("span", { className: "text-xs text-tax-axis-text-2 font-tax-axis-body" },
-                    "Strategies covered:",
-                    " ",
-                    react_1.default.createElement("strong", { className: "text-tax-axis-teal-light" },
-                        strategiesCovered,
-                        " / 25"))),
-            react_1.default.createElement("div", { className: "h-1.5 bg-tax-axis-surface-2 rounded-sm overflow-hidden mb-1.5" },
-                react_1.default.createElement("div", { className: "h-full rounded-sm transition-[width] duration-[400ms]", style: {
-                        width: `${coveragePct}%`,
-                        background: "linear-gradient(90deg, #248384, #A1E5E6)",
-                    } })),
-            react_1.default.createElement("div", { className: "flex justify-between" },
-                react_1.default.createElement("span", { className: "text-[10px] text-tax-axis-text-4 font-tax-axis-mono" },
-                    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")))),
-        continueError && (react_1.default.createElement("div", { className: "py-3 px-4 mb-4 text-xs leading-relaxed font-tax-axis-body rounded-lg", style: {
-                background: "rgba(197,48,48,0.08)",
-                border: "1px solid rgba(197,48,48,0.3)",
-                color: "#FEB2B2",
-            } }, continueError)),
-        tierDefs.map((tier) => (react_1.default.createElement(DocumentTier_1.DocumentTier, { key: tier.key, tier: tier, docs: docs, helpOverrides: {}, fieldCounts: parsedFieldCounts, onUpload: handleUpload, onClear: handleClear, onRemove: handleRemove, 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: handleContinue, className: "flex-1", disabled: busyCount > 0 }, busyCount > 0
-                ? "Processing..."
-                : failedCount > 0
-                    ? `Continue (${failedCount} failed)`
-                    : "Continue")),
+        showQboBanner && (react_1.default.createElement(QboConnectBanner_1.QboConnectBanner, { connected: qboConnected, companyName: qboCompanyName, onConnect: qboConnected ? qboFlow.openImport : qboFlow.openPermissions, onDisconnect: qboFlow.handleDisconnect })),
+        showQboBanner && !clientConfirmed && (react_1.default.createElement("div", { className: "text-center mt-3 mb-4" },
+            react_1.default.createElement("button", { onClick: () => setClientConfirmed(true), className: "text-[12px] text-tax-axis-text-3 font-tax-axis-body bg-transparent border-none cursor-pointer", style: { textDecoration: "underline", textUnderlineOffset: "2px" } }, "Skip and upload manually"))),
+        clientConfirmed && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: "py-3.5 px-[18px] mb-4 text-xs leading-relaxed font-tax-axis-body", style: {
+                    background: "#171B44",
+                    borderLeft: "3px solid #248384",
+                    borderRadius: "0 8px 8px 0",
+                    color: "#E6E8F5",
+                } }, "The minimum to run an analysis is the current-year P&L and Balance Sheet. However, accuracy and strategy coverage improve significantly with additional documents \u2014 particularly the federal tax return, fixed asset schedule, and W-2 forms."),
+            react_1.default.createElement("div", { className: "bg-tax-axis-surface border border-tax-axis-border rounded-[10px] px-[18px] py-3.5 mb-4" },
+                react_1.default.createElement("div", { className: "text-[10px] font-bold text-tax-axis-text-3 uppercase tracking-widest mb-2.5 font-tax-axis-mono" }, "Analysis Coverage"),
+                react_1.default.createElement("div", { className: "flex flex-col gap-1 sm:flex-row sm:justify-between mb-1.5" },
+                    react_1.default.createElement("span", { className: "text-xs text-tax-axis-text-2 font-tax-axis-body" },
+                        "Documents uploaded:",
+                        " ",
+                        react_1.default.createElement("strong", { className: "text-white" },
+                            validCount,
+                            " / ",
+                            docs.length)),
+                    react_1.default.createElement("span", { className: "text-xs text-tax-axis-text-2 font-tax-axis-body" },
+                        "Strategies covered:",
+                        " ",
+                        react_1.default.createElement("strong", { className: "text-tax-axis-teal-light" },
+                            strategiesCovered,
+                            " / 25"))),
+                react_1.default.createElement("div", { className: "h-1.5 bg-tax-axis-surface-2 rounded-sm overflow-hidden mb-1.5" },
+                    react_1.default.createElement("div", { className: "h-full rounded-sm transition-[width] duration-[400ms]", style: {
+                            width: `${coveragePct}%`,
+                            background: "linear-gradient(90deg, #248384, #A1E5E6)",
+                        } })),
+                react_1.default.createElement("div", { className: "flex flex-col gap-1 sm:flex-row sm:justify-between" },
+                    react_1.default.createElement("span", { className: "text-[10px] text-tax-axis-text-4 font-tax-axis-mono" },
+                        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")))),
+            continueError && (react_1.default.createElement("div", { className: "py-3 px-4 mb-4 text-xs leading-relaxed font-tax-axis-body rounded-lg", style: {
+                    background: "rgba(197,48,48,0.08)",
+                    border: "1px solid rgba(197,48,48,0.3)",
+                    color: "#FEB2B2",
+                } }, continueError)),
+            tierDefs.map((tier) => (react_1.default.createElement(DocumentTier_1.DocumentTier, { key: tier.key, tier: tier, docs: docs, helpOverrides: {}, fieldCounts: parsedFieldCounts, onUpload: handleUpload, onClear: handleClear, onRemove: handleRemove, 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: handleContinue, className: "flex-1", disabled: busyCount > 0 }, busyCount > 0
+                    ? "Processing..."
+                    : failedCount > 0
+                        ? `Continue (${failedCount} failed)`
+                        : "Continue")))),
         reviewDoc && (react_1.default.createElement(DocumentReviewModal_1.DocumentReviewModal, { documentId: reviewDoc.id, documentName: reviewDoc.name, fileName: reviewDoc.fileName || "", jobId: jobId, parsedData: reviewParsedData, onSaveReviewedData: onSaveReviewedField
                 ? (fields) => __awaiter(this, void 0, void 0, function* () {
                     const docId = uploadedDocIds[docs.indexOf(reviewDoc)];
@@ -368,5 +425,10 @@ function TaxAxisDocuments({ profile, entityType, onContinue, onBack, onUploadDoc
                     const docTypeKey = reviewDoc.documentType || reviewDoc.id;
                     setReviewedDataByDocType((prev) => (Object.assign(Object.assign({}, prev), { [docTypeKey]: fields })));
                 })
-                : undefined, onClose: () => setReviewDocId(null) }))));
+                : undefined, onClose: () => setReviewDocId(null) })),
+        react_1.default.createElement(QboPermissionsModal_1.QboPermissionsModal, { open: qboFlow.modalStep === "permissions", onCancel: qboFlow.closeModal, onContinue: qboFlow.handlePermissionsContinue }),
+        react_1.default.createElement(QboClientSelectorModal_1.QboClientSelectorModal, { open: qboFlow.modalStep === "client_selector", companies: qboFlow.companies, onCancel: qboFlow.closeModal, onSelect: qboFlow.handleCompanySelected }),
+        react_1.default.createElement(QboAvailableReportsModal_1.QboAvailableReportsModal, { open: qboFlow.modalStep === "available_reports", companyName: ((_f = qboFlow.selectedCompany) === null || _f === void 0 ? void 0 : _f.name) || "", selectedYear: qboFlow.selectedYear, onYearChange: qboFlow.setSelectedYear, onCancel: qboFlow.closeModal, onConfirm: qboFlow.handleReportsConfirmed }),
+        react_1.default.createElement(QboDocumentMappingModal_1.QboDocumentMappingModal, { open: qboFlow.modalStep === "mapping", companyName: ((_g = qboFlow.selectedCompany) === null || _g === void 0 ? void 0 : _g.name) || "", selectedReports: qboFlow.selectedReports, onCancel: qboFlow.closeModal, onConfirm: qboFlow.handleMappingConfirm }),
+        react_1.default.createElement(QboImportingModal_1.QboImportingModal, { open: qboFlow.modalStep === "importing", currentStepIndex: qboFlow.importStepIndex, companyName: ((_h = qboFlow.selectedCompany) === null || _h === void 0 ? void 0 : _h.name) || "" })));
 }

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

@@ -0,0 +1,13 @@
+import React from "react";
+import type { QboReportOption } from "./types";
+interface QboAvailableReportsModalProps {
+    open: boolean;
+    companyName: string;
+    reports?: QboReportOption[];
+    selectedYear?: number;
+    onYearChange?: (year: number) => void;
+    onCancel: () => void;
+    onConfirm: (selectedReportIds: string[]) => void;
+}
+export declare function QboAvailableReportsModal({ open, companyName, reports, selectedYear, onYearChange, onCancel, onConfirm, }: QboAvailableReportsModalProps): React.JSX.Element | null;
+export {};

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")))));
+}