@paro.io/expert-shared-components 1.13.11 → 1.13.12

package/lib/components/Escalations/AccountSuspensionModal.js

@@ -73,7 +73,7 @@ const AccountSuspensionModal = ({ showSuspensionModal, onClose }) => {
                                     react_1.default.createElement("b", null, "Note: "),
                                     "Warnings are counted within this level, not as a total. Suspension is triggered after 1 warning at this severity. ",
                                     react_1.default.createElement("b", null, "After 1 warning in this level"),
-                                    ": Permentant suspension")))),
+                                    ": Permanent suspension")))),
                     react_1.default.createElement("div", { className: "text-xs" },
                         react_1.default.createElement("b", null, "\u26A0\uFE0F Suspension thresholds are based on the number of warnings within each severity level, not total warnings across all levels"))),
                 react_1.default.createElement("div", { className: "mt-6 bg-gray-50 rounded-lg p-4" },

package/lib/components/Escalations/EscalationSubmitForm.js

@@ -161,7 +161,6 @@ const EscalationSubmitForm = ({ goBack, goHome, expertsOrClients, projects, docu
     const isFormValid = () => {
         const requiredProjectSelection = isExpert || (!isExpert && selectedProjects.length > 0);
         const requireEscalationTo = (isExpert || (!isExpert && clientEscalationTo !== ''));
-        console.log({ issueStartDate });
         return (selectedUser !== null &&
             issueType !== '' &&
             severity !== '' &&

package/lib/components/Escalations/MarkResolvedModal.js

@@ -98,6 +98,6 @@ const MarkResolvedModal = ({ escalationId, expertName, open, onClose, updateProj
                 react_1.default.createElement("div", { className: "flex space-x-2" },
                     react_1.default.createElement(base_ui_1.Button, { label: "Cancel", onClick: onClose, disabled: submitting })),
                 react_1.default.createElement("div", { className: "flex space-x-2" },
-                    react_1.default.createElement(base_ui_1.Button, { label: "Submit", color: "primary", onClick: handleSubmit, isLoading: submitting, disabled: expertResponsibility === '' || resolutionText === '' }))))));
+                    react_1.default.createElement(base_ui_1.Button, { label: "Submit", color: "primary", onClick: handleSubmit, isLoading: submitting, disabled: expertResponsibility === '' || !resolutionText || resolutionText.trim() === '' }))))));
 };
 exports.default = MarkResolvedModal;

package/lib/components/FileUploader/index.d.ts

@@ -11,7 +11,7 @@ interface UploadFileParams {
     updateProjectEscalation?: any;
     uploadExpertClientFiles?: any;
     createProjectEscalation?: any;
-    previousFiles?: string | string[] | [];
+    previousFiles?: string | string[];
     isExpert: boolean;
     extraData?: {
         clientId: number;

package/lib/components/ProjectIntelligence/EngagementHeader/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+interface ClientTab {
+    id: string;
+    label: string;
+    clientId: string;
+}
+interface EngagementHeaderProps {
+    clientName: string;
+    expertName: string;
+    expertTitle: string;
+    startDate: string;
+    status: 'Discovery' | 'Kickoff_Complete' | 'In_Progress' | 'Completed' | 'Paused' | 'Cancelled';
+    clientTabs: ClientTab[];
+    selectedClientId: string | null;
+    onClientChange: (opportunityId: string) => void;
+}
+export declare const EngagementHeader: React.FC<EngagementHeaderProps>;
+export {};

package/lib/components/ProjectIntelligence/EngagementHeader/index.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EngagementHeader = void 0;
+const react_1 = __importDefault(require("react"));
+const date_fns_1 = require("date-fns");
+const base_ui_1 = require("@paro.io/base-ui");
+const EscalationIssueCard_1 = require("../../Escalations/EscalationIssueCard");
+const STATUS_COLORS = {
+    Discovery: 'warning',
+    Kickoff_Complete: 'success',
+    In_Progress: 'info',
+    Completed: 'neutral',
+    Paused: 'warning',
+    Cancelled: 'danger',
+};
+const STATUS_LABELS = {
+    Discovery: 'DISCOVERY',
+    Kickoff_Complete: 'KICKOFF COMPLETE',
+    In_Progress: 'IN PROGRESS',
+    Completed: 'COMPLETED',
+    Paused: 'PAUSED',
+    Cancelled: 'CANCELLED',
+};
+const EngagementHeader = ({ clientName, expertName, expertTitle, startDate, status, clientTabs, selectedClientId, onClientChange }) => {
+    const formattedDate = startDate ? (0, date_fns_1.format)(new Date(startDate), 'MMMM dd, yyyy') : (0, date_fns_1.format)(new Date(), 'MMMM dd, yyyy');
+    return (react_1.default.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200" },
+        react_1.default.createElement("div", { className: "px-6 pt-4" },
+            react_1.default.createElement("p", { className: "text-sm font-medium text-gray-700 mb-3" }, "Select Client:"),
+            react_1.default.createElement("div", { className: "flex flex-wrap gap-2 mb-4" }, clientTabs.map((client) => (react_1.default.createElement(base_ui_1.Button, { key: client.id, label: client.label, onClick: () => onClientChange(client.id), color: "primary" })))),
+            react_1.default.createElement("hr", { className: "border-gray-200" })),
+        react_1.default.createElement("div", { className: "px-6 py-4" },
+            react_1.default.createElement("div", { className: "flex items-center justify-between" },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("h1", { className: "text-2xl font-bold text-gray-900 mb-1" },
+                        clientName,
+                        " \u00D7 ",
+                        expertName),
+                    react_1.default.createElement("p", { className: "text-gray-600" },
+                        expertTitle,
+                        " \u2022 Started ",
+                        formattedDate)),
+                react_1.default.createElement(EscalationIssueCard_1.CustomTag, { label: STATUS_LABELS[status] === 'GOOD' ? 'On track' : STATUS_LABELS[status] === 'ATTENTION_NEEDED' ? 'Needs attention' : 'Critical', customColor: `bg-${STATUS_COLORS[status]} border-${STATUS_COLORS[status]}` })))));
+};
+exports.EngagementHeader = EngagementHeader;

package/lib/components/ProjectIntelligence/FocusAreas/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+interface FocusArea {
+    id: string;
+    title: string;
+    description: string;
+    status: 'CONFIRMED' | 'IN_PROGRESS' | 'COMPLETED' | 'AT_RISK';
+    dueDate: string;
+    priority: 'HIGH' | 'MEDIUM' | 'LOW';
+}
+interface FocusAreasProps {
+    focusAreas: FocusArea[];
+    onEditFocusAreas: () => void;
+    updateOpportunityFocusArea: any;
+    GetOpportunityInsightsDocument: any;
+    opportunityId: string;
+}
+export declare const FocusAreas: React.FC<FocusAreasProps>;
+export {};

package/lib/components/ProjectIntelligence/FocusAreas/index.js

@@ -0,0 +1,156 @@
+"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.FocusAreas = void 0;
+const react_1 = __importStar(require("react"));
+const date_fns_1 = require("date-fns");
+const utils_1 = require("../../shared/utils");
+const core_1 = require("@material-ui/core");
+const base_icons_1 = require("@paro.io/base-icons");
+const base_ui_1 = require("@paro.io/base-ui");
+const EscalationIssueCard_1 = require("../../Escalations/EscalationIssueCard");
+const TeamSection_1 = require("../TeamSection");
+const STATUS_COLORS = {
+    CONFIRMED: "success",
+    IN_PROGRESS: "info",
+    COMPLETED: "neutral",
+    AT_RISK: "warning",
+};
+const STATUS_ICONS = {
+    CONFIRMED: react_1.default.createElement(base_icons_1.IconCheck, { size: "sm" }),
+    IN_PROGRESS: react_1.default.createElement(base_icons_1.IconDotsHorizontal, { size: "sm" }),
+    COMPLETED: react_1.default.createElement(base_icons_1.IconCheck, { size: "sm" }),
+    AT_RISK: react_1.default.createElement(base_icons_1.IconExclamation, { size: "sm" }),
+};
+const PRIORITY_COLORS = {
+    HIGH: 'danger',
+    MEDIUM: 'warning',
+    LOW: 'info',
+};
+// Modal Component
+const EditFocusAreaModal = ({ isOpen, focusArea, onClose, onSave, updateOpportunityFocusArea, GetOpportunityInsightsDocument, opportunityId, }) => {
+    const [title, setTitle] = (0, react_1.useState)((focusArea === null || focusArea === void 0 ? void 0 : focusArea.title) || '');
+    const [description, setDescription] = (0, react_1.useState)((focusArea === null || focusArea === void 0 ? void 0 : focusArea.description) || '');
+    react_1.default.useEffect(() => {
+        setTitle((focusArea === null || focusArea === void 0 ? void 0 : focusArea.title) || '');
+        setDescription((focusArea === null || focusArea === void 0 ? void 0 : focusArea.description) || '');
+    }, [focusArea]);
+    const handleSave = () => {
+        if (focusArea) {
+            try {
+                updateOpportunityFocusArea({
+                    variables: {
+                        opportunityId: `0063l00000nqlm2AAA`,
+                        input: {
+                            id: focusArea.id,
+                            title,
+                            description
+                        }
+                    },
+                    refetchQueries: [
+                        { query: GetOpportunityInsightsDocument, variables: { opportunityId } }
+                    ]
+                });
+                (0, utils_1.showToast)('success', 'Focus area updated successfully');
+            }
+            catch (error) {
+                console.error('Error updating focus area:', error);
+                (0, utils_1.showToast)('warning', 'Error updating focus area. Please try again.');
+            }
+            onClose();
+        }
+    };
+    const handleCancel = () => {
+        setTitle((focusArea === null || focusArea === void 0 ? void 0 : focusArea.title) || '');
+        setDescription((focusArea === null || focusArea === void 0 ? void 0 : focusArea.description) || '');
+        onClose();
+    };
+    if (!isOpen || !focusArea)
+        return null;
+    return (react_1.default.createElement(core_1.Dialog, { open: isOpen, onClose: onClose, fullWidth: true },
+        react_1.default.createElement(core_1.DialogTitle, null,
+            react_1.default.createElement("div", { className: "text-black mb-1 p-2 pl-4 absolute top-0 left-0 w-full flex flex-row justify-between items-center z-50" },
+                "Edit Focus Area",
+                react_1.default.createElement(core_1.IconButton, { onClick: onClose },
+                    react_1.default.createElement(base_icons_1.IconX, null)))),
+        react_1.default.createElement(core_1.DialogContent, null,
+            react_1.default.createElement("div", { className: "space-y-4 mt-4" },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("label", { htmlFor: "title", className: "block text-sm font-medium text-gray-700 mb-2" }, "Title"),
+                    react_1.default.createElement("textarea", { id: "title", value: title, onChange: (e) => setTitle(e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500", placeholder: "Enter focus area title..." })),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("label", { htmlFor: "description", className: "block text-sm font-medium text-gray-700 mb-2" }, "Description"),
+                    react_1.default.createElement("textarea", { id: "description", value: description, onChange: (e) => setDescription(e.target.value), rows: 4, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500", placeholder: "Enter focus area description..." }))),
+            react_1.default.createElement("div", { className: "px-6 py-4 flex justify-end space-x-3" },
+                react_1.default.createElement(base_ui_1.Button, { label: "cancel", onClick: handleCancel }),
+                react_1.default.createElement(base_ui_1.Button, { label: "save", onClick: handleSave, color: "primary" })))));
+};
+const FocusAreas = ({ focusAreas, onEditFocusAreas, updateOpportunityFocusArea, GetOpportunityInsightsDocument, opportunityId, }) => {
+    const [editingFocusArea, setEditingFocusArea] = (0, react_1.useState)(null);
+    const [isModalOpen, setIsModalOpen] = (0, react_1.useState)(false);
+    const [localFocusAreas, setLocalFocusAreas] = (0, react_1.useState)(focusAreas || []);
+    react_1.default.useEffect(() => {
+        setLocalFocusAreas(focusAreas);
+    }, [focusAreas]);
+    const handleEditClick = (focusArea) => {
+        setEditingFocusArea(focusArea);
+        setIsModalOpen(true);
+    };
+    const handleCloseModal = () => {
+        setIsModalOpen(false);
+        setEditingFocusArea(null);
+    };
+    const handleSaveFocusArea = (id, newTitle, newDescription) => {
+        setLocalFocusAreas(prev => prev.map(area => area.id === id
+            ? Object.assign(Object.assign({}, area), { title: newTitle, description: newDescription }) : area));
+        // Here you would typically call an API to update the focus area
+        console.log('Saving focus area:', id, newTitle, newDescription);
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200" },
+            react_1.default.createElement("div", { className: "flex items-center justify-between px-6 py-4 border-b border-gray-200" },
+                react_1.default.createElement(TeamSection_1.Heading, { icon: react_1.default.createElement(base_icons_1.IconTarget, { size: "sm", className: "mr-4" }), headerText: "Focus Areas" }),
+                react_1.default.createElement("p", { className: "text-sm text-gray-600 mt-1" }, "Time-sensitive tasks that need attention today/this week")),
+            react_1.default.createElement("div", { className: "p-6" },
+                react_1.default.createElement("div", { className: "space-y-4" }, localFocusAreas.map((area, index) => (react_1.default.createElement("div", { key: area.id, className: "flex items-start space-x-4 p-4 border border-gray-200 rounded-lg hover:shadow-sm transition-shadow" },
+                    react_1.default.createElement("div", { className: "flex-1 min-w-0" },
+                        react_1.default.createElement("div", { className: "flex items-center justify-between mb-1" },
+                            react_1.default.createElement("div", { className: "flex items-center space-x-2" },
+                                react_1.default.createElement("div", { className: "text-sm font-bold" }, area.title),
+                                react_1.default.createElement(EscalationIssueCard_1.CustomTag, { label: area.status.replace('_', ' '), iconLeft: STATUS_ICONS[area.status], customColor: `bg-${STATUS_COLORS[area.status]} border-${STATUS_COLORS[area.status]}` })),
+                            react_1.default.createElement(base_ui_1.Button, { label: "Edit focus area", iconLeft: react_1.default.createElement(base_icons_1.IconPencil, { size: "sm" }), onClick: () => handleEditClick(area), color: "success", size: 'sm' })),
+                        react_1.default.createElement("p", { className: "text-sm text-gray-600 mb-2" }, area.description),
+                        react_1.default.createElement("div", { className: "flex items-center text-sm font-medium space-x-2" },
+                            react_1.default.createElement("span", null, (0, date_fns_1.format)(new Date(area.dueDate), 'MMM dd, yyyy')),
+                            react_1.default.createElement("span", null, "\u2022"),
+                            react_1.default.createElement("span", { className: `text-${PRIORITY_COLORS[area.priority]}` },
+                                area.priority,
+                                " Priority"),
+                            area.status === 'IN_PROGRESS' && (react_1.default.createElement(react_1.default.Fragment, null,
+                                react_1.default.createElement("span", null, "\u2022"),
+                                react_1.default.createElement("span", { className: "text-info" }, "In progress"))))))))))),
+        react_1.default.createElement(EditFocusAreaModal, { isOpen: isModalOpen, focusArea: editingFocusArea, onClose: handleCloseModal, onSave: handleSaveFocusArea, updateOpportunityFocusArea: updateOpportunityFocusArea, GetOpportunityInsightsDocument: GetOpportunityInsightsDocument, opportunityId: opportunityId })));
+};
+exports.FocusAreas = FocusAreas;

package/lib/components/ProjectIntelligence/KeyMetrics/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface KeyMetricsData {
+    targetAchievements: number;
+    hourlyRate: number;
+    daysSinceGoal: number;
+    totalContractLength: number;
+}
+interface KeyMetricsProps {
+    metrics: KeyMetricsData;
+}
+export declare const KeyMetrics: React.FC<KeyMetricsProps>;
+export {};

package/lib/components/ProjectIntelligence/KeyMetrics/index.js

@@ -0,0 +1,148 @@
+"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.KeyMetrics = void 0;
+const react_1 = __importStar(require("react"));
+const EscalationIssueCard_1 = require("../../Escalations/EscalationIssueCard");
+const base_icons_1 = require("@paro.io/base-icons");
+const TeamSection_1 = require("../TeamSection");
+// Edit Metrics Modal Component
+const EditMetricsModal = ({ isOpen, metrics, onClose, onSave }) => {
+    const [formData, setFormData] = (0, react_1.useState)(metrics);
+    react_1.default.useEffect(() => {
+        setFormData(metrics);
+    }, [metrics]);
+    const handleSave = () => {
+        onSave(formData);
+        onClose();
+    };
+    const handleCancel = () => {
+        setFormData(metrics);
+        onClose();
+    };
+    const handleInputChange = (field, value) => {
+        const numericValue = parseFloat(value) || 0;
+        setFormData(prev => (Object.assign(Object.assign({}, prev), { [field]: numericValue })));
+    };
+    if (!isOpen)
+        return null;
+    return (react_1.default.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" },
+        react_1.default.createElement("div", { className: "bg-white rounded-lg shadow-xl w-full max-w-md mx-4" },
+            react_1.default.createElement("div", { className: "px-6 py-4 border-b border-gray-200" },
+                react_1.default.createElement("div", { className: "flex items-center justify-between" },
+                    react_1.default.createElement("h2", { className: "text-lg font-semibold text-gray-900" }, "Edit Engagement Metrics"),
+                    react_1.default.createElement("button", { onClick: onClose, className: "text-gray-400 hover:text-gray-600 transition-colors" },
+                        react_1.default.createElement("svg", { className: "w-6 h-6", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
+                            react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }))))),
+            react_1.default.createElement("div", { className: "px-6 py-4 space-y-4" },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("label", { htmlFor: "targetAchievements", className: "block text-sm font-medium text-gray-700 mb-1" }, "Target Hours/Month"),
+                    react_1.default.createElement("input", { id: "targetAchievements", type: "number", value: formData.targetAchievements, onChange: (e) => handleInputChange('targetAchievements', e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm", placeholder: "Enter target hours per month" })),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("label", { htmlFor: "hourlyRate", className: "block text-sm font-medium text-gray-700 mb-1" }, "Hourly Rate ($)"),
+                    react_1.default.createElement("input", { id: "hourlyRate", type: "number", step: "0.01", value: formData.hourlyRate, onChange: (e) => handleInputChange('hourlyRate', e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm", placeholder: "Enter hourly rate" })),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("label", { htmlFor: "daysSinceGoal", className: "block text-sm font-medium text-gray-700 mb-1" }, "Day Close Goal"),
+                    react_1.default.createElement("input", { id: "daysSinceGoal", type: "number", value: formData.daysSinceGoal, onChange: (e) => handleInputChange('daysSinceGoal', e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm", placeholder: "Enter day close goal" })),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("label", { htmlFor: "totalContractLength", className: "block text-sm font-medium text-gray-700 mb-1" }, "Total Contract Length (months)"),
+                    react_1.default.createElement("input", { id: "totalContractLength", type: "number", value: formData.totalContractLength, onChange: (e) => handleInputChange('totalContractLength', e.target.value), className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm", placeholder: "Enter contract length in months" }))),
+            react_1.default.createElement("div", { className: "px-6 py-4 border-t border-gray-200 flex justify-end space-x-3" },
+                react_1.default.createElement("button", { onClick: handleCancel, className: "px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 transition-colors" }, "Cancel"),
+                react_1.default.createElement("button", { onClick: handleSave, className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors" }, "Save Changes")))));
+};
+const KeyMetrics = ({ metrics }) => {
+    const [isModalOpen, setIsModalOpen] = (0, react_1.useState)(false);
+    const [localMetrics, setLocalMetrics] = (0, react_1.useState)(metrics);
+    react_1.default.useEffect(() => {
+        setLocalMetrics(metrics);
+    }, [metrics]);
+    const handleOpenModal = () => {
+        setIsModalOpen(true);
+    };
+    const handleCloseModal = () => {
+        setIsModalOpen(false);
+    };
+    const handleSaveMetrics = (newMetrics) => {
+        setLocalMetrics(newMetrics);
+        // Here you would typically call an API to update the metrics
+        console.log('Saving metrics:', newMetrics);
+    };
+    return (react_1.default.createElement("div", { className: "flex flex-col space-y-4" },
+        react_1.default.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-6" },
+            react_1.default.createElement(TeamSection_1.Heading, { icon: react_1.default.createElement(base_icons_1.IconViewGrid, { size: "sm", className: "mr-4" }), headerText: "Engagement Metrics" }),
+            react_1.default.createElement("div", { className: "grid grid-cols-2 gap-4 mt-2" },
+                react_1.default.createElement("div", { className: "text-center" },
+                    react_1.default.createElement("div", { className: "text-2xl font-bold text-gray-900" }, localMetrics.targetAchievements),
+                    react_1.default.createElement("div", { className: "text-sm text-gray-600" }, "Target Hours/Month")),
+                react_1.default.createElement("div", { className: "text-center" },
+                    react_1.default.createElement("div", { className: "text-2xl font-bold text-gray-900" },
+                        "$",
+                        localMetrics.hourlyRate),
+                    react_1.default.createElement("div", { className: "text-sm text-gray-600" }, "Hourly Rate")),
+                react_1.default.createElement("div", { className: "text-center" },
+                    react_1.default.createElement("div", { className: "text-2xl font-bold text-gray-900" },
+                        localMetrics.daysSinceGoal,
+                        "-5"),
+                    react_1.default.createElement("div", { className: "text-sm text-gray-600" }, "Day Close Goal")),
+                react_1.default.createElement("div", { className: "text-center" },
+                    react_1.default.createElement("div", { className: "text-2xl font-bold text-gray-900" }, localMetrics.totalContractLength),
+                    react_1.default.createElement("div", { className: "text-sm text-gray-600" }, "Total Contract Length")))),
+        react_1.default.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-4" },
+            react_1.default.createElement(TeamSection_1.Heading, { icon: react_1.default.createElement(base_icons_1.IconChat, { size: "sm", className: "mr-4" }), headerText: "Communication" }),
+            react_1.default.createElement("div", { className: "space-y-2 text-sm text-gray-600 mt-2" },
+                react_1.default.createElement("div", { className: "flex justify-between" },
+                    react_1.default.createElement("span", null, "Daily"),
+                    react_1.default.createElement("span", { className: "font-medium" }, "Microsoft Teams")),
+                react_1.default.createElement("div", { className: "flex justify-between" },
+                    react_1.default.createElement("span", null, "Formal"),
+                    react_1.default.createElement("span", { className: "font-medium" }, "Email")),
+                react_1.default.createElement("div", { className: "flex justify-between" },
+                    react_1.default.createElement("span", null, "Weekly"),
+                    react_1.default.createElement("span", { className: "font-medium" }, "Mondays 11 AM EST")),
+                react_1.default.createElement("div", { className: "flex justify-between" },
+                    react_1.default.createElement("span", null, "Languages"),
+                    react_1.default.createElement("span", { className: "font-medium" }, "English & Spanish")))),
+        react_1.default.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-4" },
+            react_1.default.createElement(TeamSection_1.Heading, { icon: react_1.default.createElement(base_icons_1.IconChartBar, { size: "sm", className: "mr-4" }), headerText: "Business Context" }),
+            react_1.default.createElement("div", { className: "space-y-2 text-sm text-gray-600 mt-2" },
+                react_1.default.createElement("div", { className: "flex justify-between" },
+                    react_1.default.createElement("span", null, "Industry:"),
+                    react_1.default.createElement("span", { className: "font-medium" }, "NetSuite software development")),
+                react_1.default.createElement("div", { className: "flex justify-between" },
+                    react_1.default.createElement("span", null, "Structure:"),
+                    react_1.default.createElement("span", { className: "font-medium" }, "US clients, Colombian delivery team")),
+                react_1.default.createElement("div", { className: "flex justify-between" },
+                    react_1.default.createElement("span", null, "Challenge:"),
+                    react_1.default.createElement("span", { className: "font-medium" }, "Manual consolidation processes")),
+                react_1.default.createElement("div", { className: "flex justify-between" },
+                    react_1.default.createElement("span", null, "Opportunity:"),
+                    react_1.default.createElement("span", { className: "font-medium" }, "NetSuite automation & efficiency"))),
+            react_1.default.createElement("div", { className: "flex items-center space-x-2 mt-4" },
+                react_1.default.createElement(EscalationIssueCard_1.CustomTag, { label: "NetSuite", customColor: `bg-info border-info` }),
+                react_1.default.createElement(EscalationIssueCard_1.CustomTag, { label: "Bilingual Team", customColor: `bg-success border-success` }))),
+        react_1.default.createElement(EditMetricsModal, { isOpen: isModalOpen, metrics: localMetrics, onClose: handleCloseModal, onSave: handleSaveMetrics })));
+};
+exports.KeyMetrics = KeyMetrics;

package/lib/components/ProjectIntelligence/MissingInformation/index.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+interface MissingInfoItem {
+    id: string;
+    title: string;
+    description: string;
+    priority: 'HIGH' | 'MEDIUM' | 'LOW';
+    category: string;
+    status?: string;
+    clientResponse?: string;
+}
+interface MissingInformationProps {
+    items: MissingInfoItem[];
+    className?: string;
+    opportunityId: string;
+    GetOpportunityInsightsDocument: any;
+    updateOpportunityMissingInformation: any;
+    documentCenterController: {
+        openDocumentCenter: ((open: boolean) => void) | null;
+    } | null;
+    isInternal: boolean;
+    handleRouteToDocuments?: () => void;
+}
+export declare const MissingInformation: React.FC<MissingInformationProps>;
+export {};

package/lib/components/ProjectIntelligence/MissingInformation/index.js

@@ -0,0 +1,218 @@
+"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;
+};
+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.MissingInformation = void 0;
+const react_1 = __importStar(require("react"));
+const utils_1 = require("../../shared/utils");
+const core_1 = require("@material-ui/core");
+const base_icons_1 = require("@paro.io/base-icons");
+const base_ui_1 = require("@paro.io/base-ui");
+const TeamSection_1 = require("../TeamSection");
+// Category options for the dropdown
+const INFORMATION_CATEGORIES = [
+    'Technical Integration Details',
+    'Financial Data Requirements',
+    'Process Documentation',
+    'Team Assessment',
+    'System Access Requirements',
+    'Compliance Information',
+    'Other'
+];
+// Priority levels for the dropdown
+const PRIORITY_LEVELS = [
+    'Urgent - Blocks current work',
+    'High - Needed this week',
+    'Medium - Needed next week',
+    'Low - Needed eventually'
+];
+// Request Information Modal Component
+const RequestInfoModal = ({ isOpen, missingInfoItem, onClose, onSubmit, documentCenterController, isInternal, handleRouteToDocuments, }) => {
+    const [submitting, setSubmitting] = (0, react_1.useState)(false);
+    const [formData, setFormData] = (0, react_1.useState)({
+        informationCategory: '',
+        priorityLevel: '',
+        specificInformation: '',
+    });
+    react_1.default.useEffect(() => {
+        if (missingInfoItem) {
+            setFormData({
+                informationCategory: missingInfoItem.category || '',
+                priorityLevel: missingInfoItem.priority === 'HIGH' ? 'Urgent - Blocks current work' :
+                    missingInfoItem.priority === 'MEDIUM' ? 'High - Needed this week' :
+                        'Medium - Needed next week',
+                specificInformation: missingInfoItem.description || '',
+            });
+        }
+    }, [missingInfoItem]);
+    const handleSubmit = () => {
+        setSubmitting(true);
+        try {
+            onSubmit(Object.assign(Object.assign({}, formData), { itemId: missingInfoItem === null || missingInfoItem === void 0 ? void 0 : missingInfoItem.id, itemTitle: missingInfoItem === null || missingInfoItem === void 0 ? void 0 : missingInfoItem.title }));
+        }
+        catch (e) {
+            console.error("Error while submitting request", e);
+        }
+        finally {
+            setSubmitting(false);
+        }
+        onClose();
+    };
+    const handleCancel = () => {
+        // Reset form data when canceling
+        if (missingInfoItem) {
+            setFormData({
+                informationCategory: missingInfoItem.category || '',
+                priorityLevel: missingInfoItem.priority === 'HIGH' ? 'Urgent - Blocks current work' :
+                    missingInfoItem.priority === 'MEDIUM' ? 'High - Needed this week' :
+                        'Medium - Needed next week',
+                specificInformation: missingInfoItem.description || '',
+            });
+        }
+        onClose();
+    };
+    const handleOpenDocumentCenter = () => {
+        if (isInternal && handleRouteToDocuments) {
+            handleRouteToDocuments && handleRouteToDocuments();
+            onClose();
+        }
+        if (!isInternal && documentCenterController && documentCenterController.openDocumentCenter) {
+            documentCenterController.openDocumentCenter(true);
+            onClose();
+        }
+    };
+    if (!isOpen || !missingInfoItem)
+        return null;
+    const isClientResponded = missingInfoItem.status === "CLIENT_RESPONDED";
+    const buttonText = isClientResponded ? "Update Request" : "Send Request";
+    const hasUploadedDocuments = missingInfoItem.clientResponse && missingInfoItem.clientResponse.includes("Client Uploaded");
+    return (react_1.default.createElement(core_1.Dialog, { open: isOpen, onClose: onClose, fullWidth: true },
+        react_1.default.createElement(core_1.DialogTitle, null,
+            react_1.default.createElement("div", { className: "text-black mb-1 p-2 pl-4 absolute top-0 left-0 w-full flex flex-row justify-between items-center z-50" },
+                isClientResponded ? "View Client Response" : "Request Additional Information",
+                react_1.default.createElement(core_1.IconButton, { onClick: onClose },
+                    react_1.default.createElement(base_icons_1.IconX, null)))),
+        react_1.default.createElement(core_1.DialogContent, null,
+            react_1.default.createElement("div", { className: "space-y-4 mt-4" },
+                isClientResponded && missingInfoItem.clientResponse && (react_1.default.createElement("div", null,
+                    react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Client Response"),
+                    react_1.default.createElement("div", { className: "w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-sm" },
+                        react_1.default.createElement("p", { className: "whitespace-pre-wrap" }, missingInfoItem.clientResponse)),
+                    hasUploadedDocuments && (react_1.default.createElement("div", { className: "mt-2" },
+                        react_1.default.createElement("button", { onClick: handleOpenDocumentCenter, className: "text-blue-600 hover:text-blue-800 font-medium flex items-center text-sm" },
+                            react_1.default.createElement("svg", { className: "w-4 h-4 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
+                                react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" })),
+                            isInternal ? 'View Documents under Documents tab' : 'View Documents in Document Center'))))),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("label", { htmlFor: "informationCategory", className: "block text-sm font-medium text-gray-700 mb-1" }, "Information Category"),
+                    react_1.default.createElement(core_1.Select, { fullWidth: true, id: "informationCategory", value: formData.informationCategory, onChange: (e) => setFormData((prev) => (Object.assign(Object.assign({}, prev), { informationCategory: e.target.value }))), displayEmpty: true, variant: "outlined", placeholder: 'Select a category' },
+                        react_1.default.createElement(core_1.MenuItem, { disabled: true, value: "" },
+                            react_1.default.createElement("em", null, `Select a category`)),
+                        INFORMATION_CATEGORIES.map((category) => (react_1.default.createElement(core_1.MenuItem, { key: category, value: category }, category))))),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("label", { htmlFor: "priorityLevel", className: "block text-sm font-medium text-gray-700 mb-1" }, "Priority Level"),
+                    react_1.default.createElement(core_1.Select, { fullWidth: true, id: "priorityLevel", value: formData.priorityLevel, onChange: (e) => setFormData((prev) => (Object.assign(Object.assign({}, prev), { priorityLevel: e.target.value }))), displayEmpty: true, variant: "outlined", placeholder: 'Select priority level' },
+                        react_1.default.createElement(core_1.MenuItem, { disabled: true, value: "" },
+                            react_1.default.createElement("em", null, `Select priority level`)),
+                        PRIORITY_LEVELS.map((level) => (react_1.default.createElement(core_1.MenuItem, { key: level, value: level }, level))))),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("label", { htmlFor: "specificInformation", className: "block text-sm font-medium text-gray-700 mb-1" }, "Specific Information Needed"),
+                    react_1.default.createElement("textarea", { id: "specificInformation", value: formData.specificInformation, onChange: (e) => setFormData(prev => (Object.assign(Object.assign({}, prev), { specificInformation: e.target.value }))), rows: 4, className: "w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm", placeholder: "Need NetSuite configuration details:\r\n\r\n1. US vs Colombian entity setup\r\n2. Consolidation process and requirements" }))),
+            react_1.default.createElement("div", { className: "px-6 py-4 flex justify-end space-x-3" },
+                react_1.default.createElement(base_ui_1.Button, { label: "cancel", onClick: handleCancel, disabled: submitting }),
+                react_1.default.createElement(base_ui_1.Button, { label: buttonText, onClick: handleSubmit, color: "primary", isLoading: submitting })))));
+};
+const MissingInformation = ({ items, className = '', opportunityId, GetOpportunityInsightsDocument, updateOpportunityMissingInformation, documentCenterController, isInternal, handleRouteToDocuments, }) => {
+    const [selectedItem, setSelectedItem] = (0, react_1.useState)(null);
+    const [isModalOpen, setIsModalOpen] = (0, react_1.useState)(false);
+    const [requestedItems, setRequestedItems] = (0, react_1.useState)({});
+    const handleRequestInfo = (item) => {
+        setSelectedItem(item);
+        setIsModalOpen(true);
+    };
+    const handleCloseModal = () => {
+        setIsModalOpen(false);
+        setSelectedItem(null);
+    };
+    const handleSubmitRequest = (requestData) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!selectedItem)
+            return;
+        try {
+            yield updateOpportunityMissingInformation({
+                variables: {
+                    opportunityId,
+                    input: {
+                        id: selectedItem.id,
+                        description: requestData.specificInformation,
+                        category: requestData.informationCategory,
+                        status: "EXPERT_REQUESTED",
+                        priority: requestData.priority || "HIGH"
+                    }
+                },
+                refetchQueries: [
+                    { query: GetOpportunityInsightsDocument, variables: { opportunityId } }
+                ]
+            });
+            (0, utils_1.showToast)('success', 'Information request submitted successfully');
+            // Update local state to reflect the change immediately
+            setRequestedItems(prev => (Object.assign(Object.assign({}, prev), { [selectedItem.id]: true })));
+            console.log('Information request submitted successfully');
+        }
+        catch (error) {
+            console.error('Error submitting information request:', error);
+            (0, utils_1.showToast)('warning', 'Error submitting information request. Please try again.');
+        }
+    });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: `bg-white rounded-lg shadow-sm border border-gray-200 p-6 ${className}` },
+            react_1.default.createElement(TeamSection_1.Heading, { icon: react_1.default.createElement(base_icons_1.IconExclamation, { size: "sm", className: "mr-4" }), headerText: "Missing Information" }),
+            react_1.default.createElement("div", { className: "space-y-4 mt-2" }, items.map((item) => {
+                const isRequested = requestedItems[item.id] || item.status === "EXPERT_REQUESTED";
+                const isClientResponded = item.status === "CLIENT_RESPONDED";
+                let displayPriority = item.priority;
+                if (isRequested) {
+                    displayPriority = "REQUESTED";
+                }
+                if (isClientResponded) {
+                    displayPriority = "CLIENT_RESPONDED";
+                }
+                return (react_1.default.createElement("div", { key: item.id, className: "border border-gray-200 rounded-lg p-4 hover:shadow-sm transition-shadow" },
+                    react_1.default.createElement("div", { className: "text-sm font-bold" }, item.title),
+                    react_1.default.createElement("p", { className: "text-sm text-gray-600 mb-2" }, item.description),
+                    react_1.default.createElement("div", { className: "flex items-center justify-between" },
+                        react_1.default.createElement("span", { className: "text-xs text-gray-500" }, item.category),
+                        isClientResponded ? (react_1.default.createElement(base_ui_1.Button, { label: "Show Response", iconRight: react_1.default.createElement(base_icons_1.IconArrowRight, { size: "sm" }), onClick: () => handleRequestInfo(item), color: "success", size: 'sm' })) : !isRequested ? (react_1.default.createElement(base_ui_1.Button, { label: "Request Info", iconRight: react_1.default.createElement(base_icons_1.IconArrowRight, { size: "sm" }), onClick: () => handleRequestInfo(item), color: "success", size: 'sm' })) : (react_1.default.createElement(base_ui_1.Button, { label: "Information Requested", iconLeft: react_1.default.createElement(base_icons_1.IconCheckCircle, { size: "sm" }), disabled: true, size: 'sm' })))));
+            }))),
+        react_1.default.createElement(RequestInfoModal, { isOpen: isModalOpen, missingInfoItem: selectedItem, onClose: handleCloseModal, onSubmit: handleSubmitRequest, documentCenterController: documentCenterController, isInternal: isInternal, handleRouteToDocuments: handleRouteToDocuments })));
+};
+exports.MissingInformation = MissingInformation;

package/lib/components/ProjectIntelligence/ProgressTracker/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ProgressTrackerProps {
+    percentage: number;
+    currentPhase: string;
+    nextSteps: string;
+}
+export declare const ProgressTracker: React.FC<ProgressTrackerProps>;
+export {};

package/lib/components/ProjectIntelligence/ProgressTracker/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressTracker = void 0;
+const react_1 = __importDefault(require("react"));
+const base_ui_1 = require("@paro.io/base-ui");
+const PHASE_TABS = [
+    { id: 'discovery', label: 'Discovery', active: true },
+    { id: 'kickoff', label: 'Kickoff', active: false },
+    { id: 'setup', label: 'Setup', active: false },
+    { id: 'active', label: 'Active', active: false },
+    { id: 'renewal', label: 'Renewal', active: false },
+];
+const ProgressTracker = ({ percentage, currentPhase, nextSteps }) => {
+    return (react_1.default.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 mt-6" },
+        react_1.default.createElement("div", { className: "px-6 py-4 border-b border-gray-200" },
+            react_1.default.createElement("div", { className: "flex space-x-2" }, PHASE_TABS.map((phase) => (react_1.default.createElement(base_ui_1.Button, { key: phase.id, disabled: !phase.active, label: phase.label, color: phase.active ? 'primary' : 'default' })))))));
+};
+exports.ProgressTracker = ProgressTracker;

package/lib/components/ProjectIntelligence/ProjectHealth/index.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+interface ProjectHealthData {
+    communicationFlow: {
+        status: 'GOOD' | 'ATTENTION_NEEDED' | 'CRITICAL';
+        description: string;
+    };
+    performanceTracking: {
+        status: 'GOOD' | 'ATTENTION_NEEDED' | 'CRITICAL';
+        description: string;
+    };
+    processHealth: {
+        status: 'GOOD' | 'ATTENTION_NEEDED' | 'CRITICAL';
+        description: string;
+    };
+    riskManagement: {
+        status: 'GOOD' | 'ATTENTION_NEEDED' | 'CRITICAL';
+        description: string;
+    };
+}
+interface ProjectHealthProps {
+    healthData: ProjectHealthData;
+    className?: string;
+}
+export declare const ProjectHealth: React.FC<ProjectHealthProps>;
+export {};

package/lib/components/ProjectIntelligence/ProjectHealth/index.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProjectHealth = void 0;
+const react_1 = __importDefault(require("react"));
+const TeamSection_1 = require("../TeamSection");
+const base_icons_1 = require("@paro.io/base-icons");
+const EscalationIssueCard_1 = require("../../Escalations/EscalationIssueCard");
+const STATUS_COLORS = {
+    GOOD: "success",
+    CRITICAL: "danger",
+    ATTENTION_NEEDED: "warning",
+};
+const STATUS_ICONS = {
+    GOOD: react_1.default.createElement(base_icons_1.IconCheck, { size: "sm" }),
+    CRITICAL: react_1.default.createElement(base_icons_1.IconX, { size: "sm" }),
+    ATTENTION_NEEDED: react_1.default.createElement(base_icons_1.IconExclamation, { size: "sm" }),
+};
+const HealthIndicator = ({ title, status, description, icon }) => {
+    return (react_1.default.createElement("div", { className: "flex items-start space-x-3 p-3 rounded-lg border border-gray-200 hover:shadow-sm transition-shadow" },
+        react_1.default.createElement("div", { className: "flex-1 min-w-0" },
+            react_1.default.createElement("div", { className: "flex items-center space-x-2 mb-1" },
+                react_1.default.createElement("span", { className: "text-sm" }, icon),
+                react_1.default.createElement("div", { className: "text-sm font-bold" }, title),
+                react_1.default.createElement(EscalationIssueCard_1.CustomTag, { label: status === 'GOOD' ? 'On track' : status === 'ATTENTION_NEEDED' ? 'Needs attention' : 'Critical', iconLeft: STATUS_ICONS[status], customColor: `bg-${STATUS_COLORS[status]} border-${STATUS_COLORS[status]}` })),
+            react_1.default.createElement("p", { className: "text-sm text-gray-600" }, description))));
+};
+const ProjectHealth = ({ healthData, className = '' }) => {
+    return (react_1.default.createElement("div", { className: `bg-white rounded-lg shadow-sm border border-gray-200 ${className}` },
+        react_1.default.createElement("div", { className: "px-6 py-4 border-b border-gray-200 mb-2" },
+            react_1.default.createElement(TeamSection_1.Heading, { icon: react_1.default.createElement(base_icons_1.IconChartBar, { size: "sm", className: "mr-4" }), headerText: "Project Health" }),
+            react_1.default.createElement("p", { className: "text-sm text-gray-600 mt-1" }, "Automated insights from client communications and project data")),
+        react_1.default.createElement("div", { className: "p-6" },
+            react_1.default.createElement("div", { className: "space-y-4" },
+                react_1.default.createElement(HealthIndicator, { title: "Communication Flow", status: healthData.communicationFlow.status, description: healthData.communicationFlow.description, icon: react_1.default.createElement(base_icons_1.IconChat, { size: "sm" }) }),
+                react_1.default.createElement(HealthIndicator, { title: "Performance Tracking", status: healthData.performanceTracking.status, description: healthData.performanceTracking.description, icon: react_1.default.createElement(base_icons_1.IconLightningBolt, { size: "sm" }) }),
+                react_1.default.createElement(HealthIndicator, { title: "Process Health", status: healthData.processHealth.status, description: healthData.processHealth.description, icon: react_1.default.createElement(base_icons_1.IconCog, { size: "sm" }) }),
+                react_1.default.createElement(HealthIndicator, { title: "Risk Management", status: healthData.riskManagement.status, description: healthData.riskManagement.description, icon: react_1.default.createElement(base_icons_1.IconExclamationCircle, { size: "sm" }) })))));
+};
+exports.ProjectHealth = ProjectHealth;

package/lib/components/ProjectIntelligence/TeamSection/index.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+interface TeamMember {
+    id: string;
+    name: string;
+    role: string;
+    avatar?: string;
+    availability?: string;
+}
+interface Expert {
+    id: string;
+    name: string;
+    title: string;
+    avatar: string;
+}
+interface TeamSectionProps {
+    clientTeam: TeamMember[];
+    expert: Expert;
+    paroTeam: TeamMember[];
+}
+export declare const Heading: ({ icon, headerText }: {
+    icon: any;
+    headerText: string;
+}) => React.JSX.Element;
+export declare const TeamSection: React.FC<TeamSectionProps>;
+export {};

package/lib/components/ProjectIntelligence/TeamSection/index.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TeamSection = exports.Heading = void 0;
+const react_1 = __importDefault(require("react"));
+const base_icons_1 = require("@paro.io/base-icons");
+const base_ui_1 = require("@paro.io/base-ui");
+const Heading = ({ icon, headerText }) => {
+    return (react_1.default.createElement("div", { className: "flex flex-row justify-start items-center" },
+        icon,
+        react_1.default.createElement("div", { className: "text-lg font-semibold" }, headerText)));
+};
+exports.Heading = Heading;
+const TeamSection = ({ clientTeam, expert, paroTeam }) => {
+    return (react_1.default.createElement("div", { className: "space-y-6" },
+        react_1.default.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-6" },
+            react_1.default.createElement(exports.Heading, { icon: react_1.default.createElement(base_icons_1.IconUserGroup, { size: "sm", className: "mr-4" }), headerText: "Client Team" }),
+            react_1.default.createElement("div", { className: "space-y-3 mt-2" }, clientTeam === null || clientTeam === void 0 ? void 0 : clientTeam.map((member) => (react_1.default.createElement("div", { key: member.id, className: "flex items-center space-x-3" },
+                react_1.default.createElement(base_ui_1.Avatar, { src: member.avatar || '', name: member.name }),
+                react_1.default.createElement("div", { className: "flex-1 min-w-0" },
+                    react_1.default.createElement("p", { className: "text-sm font-bold" }, member.name),
+                    react_1.default.createElement("p", { className: "text-sm text-gray-600" }, member.role),
+                    member.availability && (react_1.default.createElement("p", { className: "text-xs text-gray-500" }, member.availability)))))))),
+        react_1.default.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-6" },
+            react_1.default.createElement(exports.Heading, { icon: react_1.default.createElement(base_icons_1.IconStar, { size: "sm", className: "mr-4" }), headerText: "Your Expert" }),
+            react_1.default.createElement("div", { className: "flex items-center space-x-3 mt-2" },
+                react_1.default.createElement(base_ui_1.Avatar, { src: expert.avatar, name: expert.name }),
+                react_1.default.createElement("div", { className: "flex-1 min-w-0" },
+                    react_1.default.createElement("p", { className: "text-sm font-bold" }, expert.name),
+                    react_1.default.createElement("p", { className: "text-sm text-gray-600" }, expert.title)))),
+        react_1.default.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-gray-200 p-6" },
+            react_1.default.createElement(exports.Heading, { icon: react_1.default.createElement(base_icons_1.IconUsers, { size: "sm", className: "mr-4" }), headerText: "Your Paro Team" }),
+            react_1.default.createElement("div", { className: "space-y-3 mt-2" }, paroTeam === null || paroTeam === void 0 ? void 0 : paroTeam.map((member) => (react_1.default.createElement("div", { key: member.id || member.name, className: "flex items-center space-x-3" },
+                react_1.default.createElement(base_ui_1.Avatar, { src: member.avatar || '', name: member.name }),
+                react_1.default.createElement("div", { className: "flex-1 min-w-0" },
+                    react_1.default.createElement("p", { className: "text-sm font-bold" }, member.name),
+                    react_1.default.createElement("p", { className: "text-sm text-gray-600" }, member.role)))))))));
+};
+exports.TeamSection = TeamSection;

package/lib/components/ProjectIntelligence/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface ProjectIntelligenceProps {
+    checkIfOpportunityInsightsExistData: any;
+    opportunityInsightsData: any;
+    selectedOpportunityId: string | null;
+    setSelectedOpportunityId: (id: string | null) => void;
+    GetOpportunityInsightsDocument: any;
+    updateOpportunityMissingInformation: any;
+    documentCenterController?: {
+        openDocumentCenter: ((open: boolean) => void) | null;
+    } | null;
+    updateOpportunityFocusArea: any;
+    isInternal?: boolean;
+    handleRouteToDocuments?: () => void;
+}
+export declare const ProjectIntelligence: React.FC<ProjectIntelligenceProps>;
+export {};

package/lib/components/ProjectIntelligence/index.js

@@ -0,0 +1,146 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProjectIntelligence = void 0;
+const react_1 = __importDefault(require("react"));
+const EngagementHeader_1 = require("./EngagementHeader");
+const ProgressTracker_1 = require("./ProgressTracker");
+const FocusAreas_1 = require("./FocusAreas");
+const TeamSection_1 = require("./TeamSection");
+const ProjectHealth_1 = require("./ProjectHealth");
+const KeyMetrics_1 = require("./KeyMetrics");
+const MissingInformation_1 = require("./MissingInformation");
+const ProjectIntelligence = ({ checkIfOpportunityInsightsExistData, opportunityInsightsData, selectedOpportunityId, setSelectedOpportunityId, GetOpportunityInsightsDocument, updateOpportunityMissingInformation, documentCenterController = null, updateOpportunityFocusArea, isInternal = false, handleRouteToDocuments, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
+    const opportunityInsights = opportunityInsightsData === null || opportunityInsightsData === void 0 ? void 0 : opportunityInsightsData.getOpportunityInsights;
+    // Create client tabs from checkIfOpportunityInsightsExistData
+    const clientTabs = ((_a = checkIfOpportunityInsightsExistData === null || checkIfOpportunityInsightsExistData === void 0 ? void 0 : checkIfOpportunityInsightsExistData.checkIfOpportunityInsightsExist) === null || _a === void 0 ? void 0 : _a.map((insight) => ({
+        id: insight.opportunityId,
+        label: insight.clientName || `Client ${insight.clientId}`,
+        clientId: insight.clientId
+    }))) || [];
+    // Handle client tab change
+    const handleClientChange = (opportunityId) => {
+        setSelectedOpportunityId(opportunityId);
+    };
+    // Map status values from API to component expected values
+    const mapFocusAreaStatus = (status) => {
+        if (!status)
+            return 'IN_PROGRESS';
+        switch (status.toUpperCase()) {
+            case 'NEEDS_INPUT':
+                return 'AT_RISK';
+            case 'BLOCKED':
+                return 'AT_RISK';
+            case 'CONFIRMED':
+                return 'CONFIRMED';
+            case 'COMPLETED':
+                return 'COMPLETED';
+            case 'IN_PROGRESS':
+            default:
+                return 'IN_PROGRESS';
+        }
+    };
+    // Map health status from API to component expected values
+    const mapHealthStatus = (status) => {
+        if (!status)
+            return 'ATTENTION_NEEDED';
+        switch (status.toUpperCase()) {
+            case 'ON_TRACK':
+                return 'GOOD';
+            case 'NEEDS_ATTENTION':
+                return 'ATTENTION_NEEDED';
+            case 'CRITICAL':
+                return 'CRITICAL';
+            default:
+                return 'ATTENTION_NEEDED';
+        }
+    };
+    // Helper function to map API priority to component priority
+    const mapPriority = (priority) => {
+        if (!priority)
+            return 'MEDIUM';
+        if (typeof priority === 'string') {
+            switch (priority.toUpperCase()) {
+                case 'HIGH':
+                    return 'HIGH';
+                case 'LOW':
+                    return 'LOW';
+                case 'MEDIUM':
+                default:
+                    return 'MEDIUM';
+            }
+        }
+        return 'MEDIUM';
+    };
+    // Convert API focus areas to component format
+    const convertFocusAreas = () => {
+        if (!(opportunityInsights === null || opportunityInsights === void 0 ? void 0 : opportunityInsights.focusAreas))
+            return [];
+        return opportunityInsights.focusAreas.map((area, index) => ({
+            id: (area === null || area === void 0 ? void 0 : area.id) || `focus-${index}`,
+            title: (area === null || area === void 0 ? void 0 : area.title) || 'N/A',
+            description: (area === null || area === void 0 ? void 0 : area.description) || 'N/A',
+            status: mapFocusAreaStatus(area === null || area === void 0 ? void 0 : area.status),
+            dueDate: (area === null || area === void 0 ? void 0 : area.date) || new Date().toISOString(),
+            priority: mapPriority(area === null || area === void 0 ? void 0 : area.priority)
+        }));
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "w-full bg-info-light py-6 px-4 rounded-lg shadow mb-8" },
+            react_1.default.createElement("h1", { className: "text-2xl font-bold" }, (opportunityInsights === null || opportunityInsights === void 0 ? void 0 : opportunityInsights.opportunityName) || 'Client Engagement Dashboard'),
+            react_1.default.createElement("p", { className: "text-gray-600 mt-1" },
+                "Engagement dashboard for ",
+                (opportunityInsights === null || opportunityInsights === void 0 ? void 0 : opportunityInsights.opportunityName) || 'this client')),
+        react_1.default.createElement("div", { className: "max-w-[80%] mx-auto px-4 py-8" },
+            react_1.default.createElement(EngagementHeader_1.EngagementHeader, { clientName: (opportunityInsights === null || opportunityInsights === void 0 ? void 0 : opportunityInsights.opportunityName) || '', expertName: ((_b = opportunityInsights === null || opportunityInsights === void 0 ? void 0 : opportunityInsights.expertInfo) === null || _b === void 0 ? void 0 : _b.name) || '', expertTitle: ((_c = opportunityInsights === null || opportunityInsights === void 0 ? void 0 : opportunityInsights.expertInfo) === null || _c === void 0 ? void 0 : _c.role) || '', startDate: (opportunityInsights === null || opportunityInsights === void 0 ? void 0 : opportunityInsights.startDate) || '', status: (opportunityInsights === null || opportunityInsights === void 0 ? void 0 : opportunityInsights.phase) || 'In_Progress', clientTabs: clientTabs, selectedClientId: selectedOpportunityId, onClientChange: handleClientChange }),
+            react_1.default.createElement(ProgressTracker_1.ProgressTracker, { percentage: 0, currentPhase: "Kickoff Phase (Day 1 of 3)", nextSteps: "System access & team introductions" }),
+            react_1.default.createElement("div", { className: "flex flex-row space-x-4 mt-8" },
+                react_1.default.createElement("div", { className: "w-2/3 space-7-4" },
+                    react_1.default.createElement(FocusAreas_1.FocusAreas, { focusAreas: convertFocusAreas(), onEditFocusAreas: () => { }, updateOpportunityFocusArea: updateOpportunityFocusArea, GetOpportunityInsightsDocument: GetOpportunityInsightsDocument, opportunityId: selectedOpportunityId }),
+                    react_1.default.createElement(ProjectHealth_1.ProjectHealth, { healthData: {
+                            communicationFlow: {
+                                status: mapHealthStatus((_e = (_d = opportunityInsights === null || opportunityInsights === void 0 ? void 0 : opportunityInsights.opportunityHealth) === null || _d === void 0 ? void 0 : _d.communicationFlow) === null || _e === void 0 ? void 0 : _e.status),
+                                description: ((_g = (_f = opportunityInsights === null || opportunityInsights === void 0 ? void 0 : opportunityInsights.opportunityHealth) === null || _f === void 0 ? void 0 : _f.communicationFlow) === null || _g === void 0 ? void 0 : _g.description) || 'N/A'
+                            },
+                            performanceTracking: {
+                                status: mapHealthStatus((_j = (_h = opportunityInsights === null || opportunityInsights === void 0 ? void 0 : opportunityInsights.opportunityHealth) === null || _h === void 0 ? void 0 : _h.performanceTracking) === null || _j === void 0 ? void 0 : _j.status),
+                                description: ((_l = (_k = opportunityInsights === null || opportunityInsights === void 0 ? void 0 : opportunityInsights.opportunityHealth) === null || _k === void 0 ? void 0 : _k.performanceTracking) === null || _l === void 0 ? void 0 : _l.description) || 'N/A'
+                            },
+                            processHealth: {
+                                status: mapHealthStatus((_o = (_m = opportunityInsights === null || opportunityInsights === void 0 ? void 0 : opportunityInsights.opportunityHealth) === null || _m === void 0 ? void 0 : _m.processHealth) === null || _o === void 0 ? void 0 : _o.status),
+                                description: ((_q = (_p = opportunityInsights === null || opportunityInsights === void 0 ? void 0 : opportunityInsights.opportunityHealth) === null || _p === void 0 ? void 0 : _p.processHealth) === null || _q === void 0 ? void 0 : _q.description) || 'N/A'
+                            },
+                            riskManagement: {
+                                status: mapHealthStatus((_s = (_r = opportunityInsights === null || opportunityInsights === void 0 ? void 0 : opportunityInsights.opportunityHealth) === null || _r === void 0 ? void 0 : _r.riskManagement) === null || _s === void 0 ? void 0 : _s.status),
+                                description: ((_u = (_t = opportunityInsights === null || opportunityInsights === void 0 ? void 0 : opportunityInsights.opportunityHealth) === null || _t === void 0 ? void 0 : _t.riskManagement) === null || _u === void 0 ? void 0 : _u.description) || 'N/A'
+                            }
+                        }, className: "mt-8" }),
+                    react_1.default.createElement(MissingInformation_1.MissingInformation, { items: (opportunityInsights === null || opportunityInsights === void 0 ? void 0 : opportunityInsights.missingInformation) ?
+                            opportunityInsights.missingInformation.map((item, index) => ({
+                                id: (item === null || item === void 0 ? void 0 : item.id) || `missing-${index}`,
+                                title: (item === null || item === void 0 ? void 0 : item.title) || 'N/A',
+                                description: (item === null || item === void 0 ? void 0 : item.description) || 'N/A',
+                                priority: mapPriority(item === null || item === void 0 ? void 0 : item.priority),
+                                category: (item === null || item === void 0 ? void 0 : item.category) || 'N/A',
+                                status: (item === null || item === void 0 ? void 0 : item.status) || undefined,
+                                clientResponse: (item === null || item === void 0 ? void 0 : item.clientResponse) || undefined
+                            })) : [], className: "mt-8", opportunityId: selectedOpportunityId, GetOpportunityInsightsDocument: GetOpportunityInsightsDocument, updateOpportunityMissingInformation: updateOpportunityMissingInformation, documentCenterController: documentCenterController, isInternal: isInternal, handleRouteToDocuments: handleRouteToDocuments })),
+                react_1.default.createElement("div", { className: "w-1/3 space-y-4" },
+                    react_1.default.createElement(TeamSection_1.TeamSection, { clientTeam: opportunityInsights === null || opportunityInsights === void 0 ? void 0 : opportunityInsights.clientTeam, expert: {
+                            id: 'expert-1',
+                            name: ((_v = opportunityInsights === null || opportunityInsights === void 0 ? void 0 : opportunityInsights.expertInfo) === null || _v === void 0 ? void 0 : _v.name) || '',
+                            title: ((_w = opportunityInsights === null || opportunityInsights === void 0 ? void 0 : opportunityInsights.expertInfo) === null || _w === void 0 ? void 0 : _w.role) || '',
+                            avatar: ''
+                        }, paroTeam: opportunityInsights === null || opportunityInsights === void 0 ? void 0 : opportunityInsights.paroTeam }),
+                    react_1.default.createElement(KeyMetrics_1.KeyMetrics, { metrics: {
+                            targetAchievements: ((_x = opportunityInsights === null || opportunityInsights === void 0 ? void 0 : opportunityInsights.engagementMetrics) === null || _x === void 0 ? void 0 : _x.targetHours) || 0,
+                            hourlyRate: ((_y = opportunityInsights === null || opportunityInsights === void 0 ? void 0 : opportunityInsights.engagementMetrics) === null || _y === void 0 ? void 0 : _y.hourlyRate) || 0,
+                            daysSinceGoal: ((_z = opportunityInsights === null || opportunityInsights === void 0 ? void 0 : opportunityInsights.engagementMetrics) === null || _z === void 0 ? void 0 : _z.dayCloseGoal) ?
+                                parseInt(opportunityInsights.engagementMetrics.dayCloseGoal) : 0,
+                            totalContractLength: ((_0 = opportunityInsights === null || opportunityInsights === void 0 ? void 0 : opportunityInsights.engagementMetrics) === null || _0 === void 0 ? void 0 : _0.contractLength) || 0
+                        } }))))));
+};
+exports.ProjectIntelligence = ProjectIntelligence;

package/lib/index.d.ts

@@ -15,3 +15,4 @@ export { fileUploader } from './components/FileUploader';
 export { DiscussionSection } from './components/Invoices/DiscussionSection';
 export { fileDownloader } from './components/FileDownloader';
 export { Escalations } from './components/Escalations';
+export { ProjectIntelligence } from "./components/ProjectIntelligence";

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Escalations = exports.fileDownloader = exports.DiscussionSection = exports.fileUploader = exports.InvoiceCard = exports.ActiveProjectCard = exports.sharedUtils = exports.ServiceLinesTemplate = exports.HeaderNavBar = exports.DocumentCenter = exports.ProfileCompletedPercentage = exports.ExpertProfileHeader = exports.OrganizationChart = exports.FirmEmployeeSection = exports.ClientReferenceSection = exports.Reviews = exports.ReviewsTab = void 0;
+exports.ProjectIntelligence = exports.Escalations = exports.fileDownloader = exports.DiscussionSection = exports.fileUploader = exports.InvoiceCard = exports.ActiveProjectCard = exports.sharedUtils = exports.ServiceLinesTemplate = exports.HeaderNavBar = exports.DocumentCenter = exports.ProfileCompletedPercentage = exports.ExpertProfileHeader = exports.OrganizationChart = exports.FirmEmployeeSection = exports.ClientReferenceSection = exports.Reviews = exports.ReviewsTab = void 0;
 var ReviewsTab_1 = require("./components/ReviewsTab");
 Object.defineProperty(exports, "ReviewsTab", { enumerable: true, get: function () { return ReviewsTab_1.ReviewsTab; } });
 var Reviews_1 = require("./components/Reviews");
@@ -35,3 +35,5 @@ var FileDownloader_1 = require("./components/FileDownloader");
 Object.defineProperty(exports, "fileDownloader", { enumerable: true, get: function () { return FileDownloader_1.fileDownloader; } });
 var Escalations_1 = require("./components/Escalations");
 Object.defineProperty(exports, "Escalations", { enumerable: true, get: function () { return Escalations_1.Escalations; } });
+var ProjectIntelligence_1 = require("./components/ProjectIntelligence");
+Object.defineProperty(exports, "ProjectIntelligence", { enumerable: true, get: function () { return ProjectIntelligence_1.ProjectIntelligence; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paro.io/expert-shared-components",
-  "version": "1.13.11",
+  "version": "1.13.12",
   "description": "",
   "main": "lib/index.js",
   "scripts": {