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

package/lib/components/OrganizationChart/PersonCard.js

@@ -7,11 +7,11 @@ const react_1 = __importDefault(require("react"));
 const PersonCard = ({ name, position, experience, location, initial, noOfchildren, }) => (react_1.default.createElement("div", { className: "relative group" },
     react_1.default.createElement("div", { className: "flex flex-col items-center" },
         react_1.default.createElement("div", { className: "flex flex-col items-center mb-2" },
-            react_1.default.createElement("div", { className: `
-                        -mb-4 z-10 w-12 h-12 rounded-full bg-[#434889] flex items-center justify-center 
-                        text-white font-semibold text-lg
-                        transition-all duration-200 hover:bg-[#102377]
-                        ${noOfchildren > 0 ? 'hover:shadow-lg' : ''}
+            react_1.default.createElement("div", { className: `
+                        -mb-4 z-10 w-12 h-12 rounded-full bg-[#434889] flex items-center justify-center 
+                        text-white font-semibold text-lg
+                        transition-all duration-200 hover:bg-[#102377]
+                        ${noOfchildren > 0 ? 'hover:shadow-lg' : ''}
                     ` },
                 initial,
                 noOfchildren > 0 && (react_1.default.createElement("div", { className: "absolute -bottom-3 w-6 h-6 rounded bg-gray-400 flex items-center justify-center text-white text-sm" }, noOfchildren)))),

package/lib/components/OrganizationChart/utils.js

@@ -50,86 +50,86 @@ const transformEmployeeData = (employeeData, firstName, lastName, primaryService
     };
 };
 exports.transformEmployeeData = transformEmployeeData;
-exports.ConnectorContainer = styled_components_1.default.div `
-    position: relative;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    &.parent-vertical-line {
-        height: 40px;
-        position: relative;
-
-        &:before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 50%;
-            width: 2px;
-            height: calc(100% + 2px);
-            background-color: #D8D8D8;
-            transform: translateX(-50%);
-        }
-    }
-
-    &.child-vertical-line {
-        height: 40px;
-        position: relative;
-        margin-bottom: 4px;
-        &:before {
-            content: '';
-            position: absolute;
-            left: 50%;
-            width: 2px;
-            height: 100%;
-            background-color: #D8D8D8;
-            transform: translateX(-50%);
-        }
-
-        &:after {
-            content: '';
-            position: absolute;
-            bottom: -4px;
-            left: 50%;
-            width: 8px;
-            height: 8px;
-            border-right: 2px solid #D8D8D8;
-            border-bottom: 2px solid #D8D8D8;
-            transform: translateX(-50%) rotate(45deg);
-            background-color: transparent;
-        }
-    }
-
-    &.horizontal-line {
-        position: absolute;
-        height: 2px;
-        background-color: #D8D8D8;
-        top: 0;
-        width: 100%;
-    }
+exports.ConnectorContainer = styled_components_1.default.div `
+    position: relative;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.parent-vertical-line {
+        height: 40px;
+        position: relative;
+
+        &:before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 50%;
+            width: 2px;
+            height: calc(100% + 2px);
+            background-color: #D8D8D8;
+            transform: translateX(-50%);
+        }
+    }
+
+    &.child-vertical-line {
+        height: 40px;
+        position: relative;
+        margin-bottom: 4px;
+        &:before {
+            content: '';
+            position: absolute;
+            left: 50%;
+            width: 2px;
+            height: 100%;
+            background-color: #D8D8D8;
+            transform: translateX(-50%);
+        }
+
+        &:after {
+            content: '';
+            position: absolute;
+            bottom: -4px;
+            left: 50%;
+            width: 8px;
+            height: 8px;
+            border-right: 2px solid #D8D8D8;
+            border-bottom: 2px solid #D8D8D8;
+            transform: translateX(-50%) rotate(45deg);
+            background-color: transparent;
+        }
+    }
+
+    &.horizontal-line {
+        position: absolute;
+        height: 2px;
+        background-color: #D8D8D8;
+        top: 0;
+        width: 100%;
+    }
 `;
-exports.InfoCard = (0, styled_components_1.default)(core_1.Card) `
-    position: absolute;
-    top: 10;
-    right: 0;
-    width: fit-content;
-    max-width: 30%;
-    z-index: 1000;
-    padding: 8px;
-    margin: 16px;
-    background-color: white;
-    border-radius: 8px;
-    box-shadow: none;
-    border: 1px solid #e2e8f0;
-    max-height: 90vh;
-    overflow: auto;
-    @media (max-width: 600px) {
-        position: absolute;
-        top: 20;
-        right: auto;
-        min-width: 90%;
-    }
+exports.InfoCard = (0, styled_components_1.default)(core_1.Card) `
+    position: absolute;
+    top: 10;
+    right: 0;
+    width: fit-content;
+    max-width: 30%;
+    z-index: 1000;
+    padding: 8px;
+    margin: 16px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: none;
+    border: 1px solid #e2e8f0;
+    max-height: 90vh;
+    overflow: auto;
+    @media (max-width: 600px) {
+        position: absolute;
+        top: 20;
+        right: auto;
+        min-width: 90%;
+    }
 `;
 exports.CustomDialog = (0, core_1.styled)(Dialog_1.default)(({ theme }) => ({
     '& .MuiDialog-paper': {

package/lib/components/ProjectCard/ProgressBar.js

@@ -44,15 +44,15 @@ const ProgressBar = ({ minFloorHours, maxFloorHours, loggedHours }) => {
     };
     return (react_1.default.createElement("div", { className: `relative m-6 ${minFloorHours <= 0 ? 'pt-4' : 'pt-6'}` },
         react_1.default.createElement("div", { className: "h-8 w-full border-2 border-solid border-[#64748B] rounded-full relative flex flex-wrap bg-[#F1F5F9]" },
-            react_1.default.createElement("div", { className: `h-full w-full rounded-l-full ${isRounded ? 'rounded-r-full' : ''} 
+            react_1.default.createElement("div", { className: `h-full w-full rounded-l-full ${isRounded ? 'rounded-r-full' : ''} 
                             ${totalLoggedHours >= minFloorHours && totalLoggedHours <= maxFloorHours
                     ? 'bg-[#248384]'
                     : totalLoggedHours < minFloorHours
                         ? 'bg-[#F9BABF]'
                         : 'bg-[#A73A43]'}`, style: { width: `${totalLoggedHours !== 0 ? ((totalLoggedHours / totalBar) * 100) : 0}%` } },
-                react_1.default.createElement("div", { className: `absolute top-1/2 left-1/2 transform -translate-x-1/2 z-10 
-                            ${totalLoggedHours < (totalBar * 0.03) || totalLoggedHours > totalBar || (totalLoggedHours < (totalBar * 0.12)) ? 'translate-y-full' : '-translate-y-1/2'}
-                            ${totalLoggedHours < minFloorHours || totalLoggedHours === 0 ? 'text-black' : 'text-white'} 
+                react_1.default.createElement("div", { className: `absolute top-1/2 left-1/2 transform -translate-x-1/2 z-10 
+                            ${totalLoggedHours < (totalBar * 0.03) || totalLoggedHours > totalBar || (totalLoggedHours < (totalBar * 0.12)) ? 'translate-y-full' : '-translate-y-1/2'}
+                            ${totalLoggedHours < minFloorHours || totalLoggedHours === 0 ? 'text-black' : 'text-white'} 
                             font-bold`, style: { left: `calc(${calculatePosition()}% - 1px)` } },
                     (0, exports.formatNumberingSystem)(totalLoggedHours),
                     " hrs")),

package/lib/components/ProjectCard/ReviewRequestModal.js

@@ -35,11 +35,11 @@ const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
 const ReviewRequestModal = ({ project, requestModal, setRequestModal, expertName, freelancerId, setRequestStatus, selectedProject, setSelectedProject, clientId, refetchParoProjects, setHighlightedRatings, createOrUpdateRatingRequestMutation, }) => {
     var _a;
     const [showError, setShowError] = (0, react_1.useState)(false);
-    const [textareaValue, setTextareaValue] = (0, react_1.useState)(`Hi ${(_a = project === null || project === void 0 ? void 0 : project.client) === null || _a === void 0 ? void 0 : _a.name}, 
-I hope you are satisfied with the work I provided on ${project === null || project === void 0 ? void 0 : project.name}. Your feedback is very important to me and helps me improve my services and build my reputation on Paro. Could you please take a moment to leave a review of you experience? Your input is greatly appreciated! 
-  
-Thank you in advance for your time and feedback.
-Best regards,
+    const [textareaValue, setTextareaValue] = (0, react_1.useState)(`Hi ${(_a = project === null || project === void 0 ? void 0 : project.client) === null || _a === void 0 ? void 0 : _a.name}, 
+I hope you are satisfied with the work I provided on ${project === null || project === void 0 ? void 0 : project.name}. Your feedback is very important to me and helps me improve my services and build my reputation on Paro. Could you please take a moment to leave a review of you experience? Your input is greatly appreciated! 
+  
+Thank you in advance for your time and feedback.
+Best regards,
 ${expertName}`);
     const [loading, setLoading] = (0, react_1.useState)(false);
     const handleTextArea = (e) => {

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

@@ -6,15 +6,13 @@ 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',
+    Discovery: 'bg-orange-100 text-orange-800 border-orange-200',
+    Kickoff_Complete: 'bg-green-100 text-green-800 border-green-200',
+    In_Progress: 'bg-blue-100 text-blue-800 border-blue-200',
+    Completed: 'bg-gray-100 text-gray-800 border-gray-200',
+    Paused: 'bg-orange-100 text-orange-800 border-orange-200',
+    Cancelled: 'bg-red-100 text-red-800 border-red-200',
 };
 const STATUS_LABELS = {
     Discovery: 'DISCOVERY',
@@ -29,7 +27,9 @@ const EngagementHeader = ({ clientName, expertName, expertTitle, startDate, stat
     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("div", { className: "flex flex-wrap gap-2 mb-4" }, clientTabs.map((client) => (react_1.default.createElement("button", { key: client.id, onClick: () => onClientChange(client.id), className: `px-3 py-1.5 text-sm font-medium rounded-md transition-colors cursor-pointer ${client.id === selectedClientId
+                    ? 'bg-blue bg-blue-600 text-white'
+                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}` }, client.label)))),
             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" },
@@ -42,6 +42,9 @@ const EngagementHeader = ({ clientName, expertName, expertTitle, startDate, stat
                         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]}` })))));
+                react_1.default.createElement("div", { className: "flex items-center" },
+                    react_1.default.createElement("span", { className: `inline-flex items-center px-3 py-1 rounded-full text-sm font-medium ${STATUS_COLORS[status]}` },
+                        react_1.default.createElement("div", { className: "w-2 h-2 bg-current rounded-full mr-1.5" }),
+                        STATUS_LABELS[status]))))));
 };
 exports.EngagementHeader = EngagementHeader;

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

@@ -12,7 +12,8 @@ interface FocusAreasProps {
     onEditFocusAreas: () => void;
     updateOpportunityFocusArea: any;
     GetOpportunityInsightsDocument: any;
-    opportunityId: string;
+    selectedOpportunityId: string;
+    onSaveFocusArea: any;
 }
 export declare const FocusAreas: React.FC<FocusAreasProps>;
 export {};

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

@@ -27,30 +27,25 @@ 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",
+    CONFIRMED: 'bg-green-100 text-green-800 border-green-200',
+    IN_PROGRESS: 'bg-blue-100 text-blue-800 border-blue-200',
+    COMPLETED: 'bg-gray-100 text-gray-800 border-gray-200',
+    AT_RISK: 'bg-red-100 text-red-800 border-red-200',
 };
 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" }),
+    CONFIRMED: '✓',
+    IN_PROGRESS: '•',
+    COMPLETED: '✓',
+    AT_RISK: '!',
 };
 const PRIORITY_COLORS = {
-    HIGH: 'danger',
-    MEDIUM: 'warning',
-    LOW: 'info',
+    HIGH: 'text-red-600',
+    MEDIUM: 'text-yellow-600',
+    LOW: 'text-green-600',
 };
 // Modal Component
-const EditFocusAreaModal = ({ isOpen, focusArea, onClose, onSave, updateOpportunityFocusArea, GetOpportunityInsightsDocument, opportunityId, }) => {
+const EditFocusAreaModal = ({ isOpen, focusArea, onClose, onSave, updateOpportunityFocusArea, GetOpportunityInsightsDocument, selectedOpportunityId, onSaveFocusArea, }) => {
     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(() => {
@@ -62,7 +57,7 @@ const EditFocusAreaModal = ({ isOpen, focusArea, onClose, onSave, updateOpportun
             try {
                 updateOpportunityFocusArea({
                     variables: {
-                        opportunityId: `0063l00000nqlm2AAA`,
+                        opportunityId: selectedOpportunityId,
                         input: {
                             id: focusArea.id,
                             title,
@@ -70,10 +65,11 @@ const EditFocusAreaModal = ({ isOpen, focusArea, onClose, onSave, updateOpportun
                         }
                     },
                     refetchQueries: [
-                        { query: GetOpportunityInsightsDocument, variables: { opportunityId } }
+                        { query: GetOpportunityInsightsDocument, variables: { opportunityId: selectedOpportunityId } }
                     ]
                 });
                 (0, utils_1.showToast)('success', 'Focus area updated successfully');
+                onSaveFocusArea();
             }
             catch (error) {
                 console.error('Error updating focus area:', error);
@@ -89,25 +85,26 @@ const EditFocusAreaModal = ({ isOpen, focusArea, onClose, onSave, updateOpportun
     };
     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" },
+    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-1/2 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 Focus Area"),
+                    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: "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("input", { id: "title", type: "text", 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" })))));
+            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-gray-100 border border-gray-300 rounded-md hover:bg-gray-200 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 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")))));
 };
-const FocusAreas = ({ focusAreas, onEditFocusAreas, updateOpportunityFocusArea, GetOpportunityInsightsDocument, opportunityId, }) => {
+const FocusAreas = ({ focusAreas, updateOpportunityFocusArea, GetOpportunityInsightsDocument, selectedOpportunityId, onSaveFocusArea, }) => {
     const [editingFocusArea, setEditingFocusArea] = (0, react_1.useState)(null);
     const [isModalOpen, setIsModalOpen] = (0, react_1.useState)(false);
     const [localFocusAreas, setLocalFocusAreas] = (0, react_1.useState)(focusAreas || []);
@@ -130,27 +127,34 @@ const FocusAreas = ({ focusAreas, onEditFocusAreas, updateOpportunityFocusArea,
     };
     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: "px-6 py-4 border-b border-gray-200" },
+                react_1.default.createElement("div", { className: "flex items-center justify-between" },
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("h2", { className: "text-lg font-semibold text-gray-900 flex items-center" }, "\uD83C\uDFAF 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-shrink-0 mt-1" },
+                        react_1.default.createElement("div", { className: `flex items-center justify-center w-8 h-8 rounded-full border ${STATUS_COLORS[area.status]}` },
+                            react_1.default.createElement("span", { className: "text-sm font-medium" }, index + 1))),
                     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("h3", { className: "text-sm font-medium text-gray-900" }, area.title),
+                                react_1.default.createElement("span", { className: `inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border ${STATUS_COLORS[area.status]}` },
+                                    STATUS_ICONS[area.status],
+                                    " ",
+                                    area.status.replace('_', ' '))),
+                            react_1.default.createElement("button", { onClick: () => handleEditClick(area), className: "flex items-center space-x-1 px-2 py-1 text-xs font-medium text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded transition-colors" },
+                                react_1.default.createElement("span", null, "\u270F\uFE0F"),
+                                react_1.default.createElement("span", null, "Edit Focus Area"))),
                         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("div", { className: "flex items-center space-x-4 text-xs text-gray-500" },
                             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]}` },
+                            react_1.default.createElement("span", { className: `font-medium ${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 })));
+                            area.status === 'IN_PROGRESS' && (react_1.default.createElement("span", { className: "text-blue-600" }, "In progress")))))))))),
+        react_1.default.createElement(EditFocusAreaModal, { isOpen: isModalOpen, focusArea: editingFocusArea, onClose: handleCloseModal, onSave: handleSaveFocusArea, selectedOpportunityId: selectedOpportunityId, updateOpportunityFocusArea: updateOpportunityFocusArea, GetOpportunityInsightsDocument: GetOpportunityInsightsDocument, onSaveFocusArea: onSaveFocusArea })));
 };
 exports.FocusAreas = FocusAreas;

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

@@ -5,8 +5,27 @@ interface KeyMetricsData {
     daysSinceGoal: number;
     totalContractLength: number;
 }
+interface CommunicationData {
+    channel: string;
+    frequency: string;
+    formalChannel: string;
+    weeklyMeeting: string;
+    languages: string[];
+}
+interface BusinessContextData {
+    industry: string;
+    structure: string;
+    challenge: string;
+    opportunity: string;
+    tags: string[];
+}
 interface KeyMetricsProps {
     metrics: KeyMetricsData;
+    communication: CommunicationData;
+    businessContext: BusinessContextData;
+    updateOpportunityKeyMetrics: any;
+    GetOpportunityInsightsDocument: any;
+    selectedOpportunityId: string;
 }
 export declare const KeyMetrics: React.FC<KeyMetricsProps>;
 export {};

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

@@ -25,11 +25,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 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 EditMetricsModal = ({ isOpen, metrics, onClose, onSave, updateOpportunityKeyMetrics, GetOpportunityInsightsDocument, selectedOpportunityId }) => {
     const [formData, setFormData] = (0, react_1.useState)(metrics);
     react_1.default.useEffect(() => {
         setFormData(metrics);
@@ -73,7 +70,7 @@ const EditMetricsModal = ({ isOpen, metrics, onClose, onSave }) => {
                 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 KeyMetrics = ({ metrics, communication, businessContext }) => {
     const [isModalOpen, setIsModalOpen] = (0, react_1.useState)(false);
     const [localMetrics, setLocalMetrics] = (0, react_1.useState)(metrics);
     react_1.default.useEffect(() => {
@@ -90,10 +87,11 @@ const KeyMetrics = ({ metrics }) => {
         // 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" },
+    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" },
-            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: "flex items-center justify-between mb-4" },
+                react_1.default.createElement("h3", { className: "text-lg font-semibold text-gray-900 flex items-center" }, "\uD83D\uDCCA Engagement Metrics")),
+            react_1.default.createElement("div", { className: "grid grid-cols-2 gap-4" },
                 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")),
@@ -111,38 +109,37 @@ const KeyMetrics = ({ metrics }) => {
                     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("h4", { className: "text-sm font-medium text-gray-900 mb-3 flex items-center" }, "\uD83D\uDCAC Communication"),
+            react_1.default.createElement("div", { className: "space-y-2 text-sm text-gray-600" },
                 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("span", { className: "font-medium" }, communication.channel)),
                 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("span", { className: "font-medium" }, communication.formalChannel)),
                 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("span", { className: "font-medium" }, communication.weeklyMeeting)),
                 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("span", { className: "font-medium" }, communication.languages.join(', '))))),
         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("h4", { className: "text-sm font-medium text-gray-900 mb-3" }, "\uD83D\uDCCA Business Context"),
+            react_1.default.createElement("div", { className: "space-y-2 text-sm text-gray-600" },
                 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("span", { className: "font-medium ml-4" }, businessContext.industry)),
                 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("span", { className: "font-medium ml-4" }, businessContext.structure)),
                 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("span", { className: "font-medium ml-4" }, businessContext.challenge)),
                 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 })));
+                    react_1.default.createElement("span", { className: "font-medium ml-4" }, businessContext.opportunity)),
+                react_1.default.createElement("div", { className: "flex justify-between" },
+                    react_1.default.createElement("span", null, "Tags:"),
+                    react_1.default.createElement("div", { className: "flex items-center space-x-2 mt-4" }, businessContext.tags.map((tag) => (react_1.default.createElement("span", { className: "px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full" }, tag)))))))));
 };
 exports.KeyMetrics = KeyMetrics;

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

@@ -19,6 +19,7 @@ interface MissingInformationProps {
     } | null;
     isInternal: boolean;
     handleRouteToDocuments?: () => void;
+    onSaveMissingInformation?: any;
 }
 export declare const MissingInformation: React.FC<MissingInformationProps>;
 export {};