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

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.10",
+  "version": "1.13.12",
   "description": "",
   "main": "lib/index.js",
   "scripts": {