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

package/lib/components/Escalations/MarkResolvedModal.js

@@ -37,7 +37,7 @@ const base_icons_1 = require("@paro.io/base-icons");
 const base_ui_1 = require("@paro.io/base-ui");
 const core_1 = require("@material-ui/core");
 const utils_1 = require("../shared/utils");
-const MarkResolvedModal = ({ escalationId, expertName, open, onClose, updateProjectEscalation, userId, }) => {
+const MarkResolvedModal = ({ escalationId, expertName, open, onClose, updateProjectEscalation, userId, refetchEscalationDisputeStatistics, }) => {
     const [resolutionText, setResolutionText] = (0, react_1.useState)(null);
     const [submitting, setSubmitting] = (0, react_1.useState)(false);
     const [expertResponsibility, setExpertResponsibility] = (0, react_1.useState)('');
@@ -53,7 +53,9 @@ const MarkResolvedModal = ({ escalationId, expertName, open, onClose, updateProj
                         statusChangedBy: userId,
                         isExpertAtFault: expertResponsibility === 'atFault' ? true : false,
                     }
-                }
+                },
+            }).then(() => {
+                refetchEscalationDisputeStatistics && refetchEscalationDisputeStatistics();
             });
             (0, utils_1.showToast)("success", "Issue marked as resolved. You can now find it in the `Resolved` section");
         }
@@ -80,23 +82,22 @@ const MarkResolvedModal = ({ escalationId, expertName, open, onClose, updateProj
             react_1.default.createElement("div", { className: "mt-6 mb-4" },
                 react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Please provide additional details before marking this issue as resolved."),
                 react_1.default.createElement(base_ui_1.Input, { type: "text", value: resolutionText, placeholder: "Enter details here...", onChange: (e) => setResolutionText(e.target.value) })),
-            react_1.default.createElement("p", null, "Please provide additional details before marking this issue as resolved."),
             react_1.default.createElement("div", { style: { marginTop: '1em', marginBottom: '1em' } },
-                react_1.default.createElement("label", { className: "block text-sm font-normal mb-1" },
+                react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" },
                     "Expert Responsibility ",
                     react_1.default.createElement("span", { className: "text-sm text-red-800" }, "*")),
                 react_1.default.createElement("div", null,
-                    react_1.default.createElement("label", null,
+                    react_1.default.createElement("label", { className: "flex items-center space-x-2" },
                         react_1.default.createElement("input", { type: "radio", name: "expertResponsibility", value: "atFault", checked: expertResponsibility === 'atFault', onChange: () => setExpertResponsibility('atFault'), required: true }),
-                        "Expert is at fault for this issue")),
+                        react_1.default.createElement("span", null, "Expert is at fault for this issue"))),
                 react_1.default.createElement("div", null,
-                    react_1.default.createElement("label", null,
+                    react_1.default.createElement("label", { className: "flex items-center space-x-2" },
                         react_1.default.createElement("input", { type: "radio", name: "expertResponsibility", value: "notAtFault", checked: expertResponsibility === 'notAtFault', onChange: () => setExpertResponsibility('notAtFault'), required: true }),
-                        "Expert is NOT at fault"))),
+                        react_1.default.createElement("span", null, "Expert is NOT at fault for this issue")))),
             react_1.default.createElement("div", { className: "flex items-center justify-between" },
                 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 === '' }))))));
+                    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/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 {};