npm - @paro.io/expert-shared-components - Versions diffs - 1.12.37 → 1.12.39 - Mend

@paro.io/expert-shared-components 1.12.37 → 1.12.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/lib/components/Escalations/AccountSuspensionModal.js CHANGED Viewed

@@ -37,7 +37,7 @@ const AccountSuspensionModal = ({ showSuspensionModal, onClose }) => {
                                     " Forgot to log time, personal emergency, availability changes, minor communication delays"))),
                         react_1.default.createElement("div", { className: "flex items-start" },
                             react_1.default.createElement("div", { className: "bg-orange-500 rounded-full p-2 mr-4 relative z-10" },
-                                react_1.default.createElement(base_icons_1.IconExclamation, { className: "h-5 w-5 text-white" })),
+                                react_1.default.createElement(base_icons_1.IconExclamationCircle, { className: "h-5 w-5 text-white" })),
                             react_1.default.createElement("div", { className: "flex-1 pb-8" },
                                 react_1.default.createElement("div", { className: "flex justify-between items-start mb-2" },
                                     react_1.default.createElement("h4", { className: "font-semibold text-orange-800" }, "Level 2: Medium Severity"),

package/lib/components/Escalations/CustomTag.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const CustomTag: (label: any) => React.JSX.Element;
+export default CustomTag;

package/lib/components/Escalations/CustomTag.js ADDED Viewed

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const getBackgroundColor = (type) => {
+    switch (type) {
+        case 'Critical':
+            return 'danger';
+        case 'High':
+            return 'warning';
+        case 'Medium':
+            return 'info';
+        case 'Low':
+            return 'default';
+        default:
+            return 'default';
+    }
+};
+const CustomTag = (label) => {
+    const color = getBackgroundColor(label);
+    return (react_1.default.createElement("div", { className: `border box-border text-center px-4 pb-0.5 pt-1 text-sm inline-block break-words text-white cursor-pointer rounded-full bg-${color} border-${color}` }, label));
+};
+exports.default = CustomTag;

package/lib/components/Escalations/EscalationChat.js CHANGED Viewed

@@ -37,6 +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 DiscussionSection_1 = require("../Invoices/DiscussionSection");
+const EscalationIssueCard_1 = require("./EscalationIssueCard");
 const EscalationChat = ({ activeChatIssue, showEscalationChat, setShowEscalationChat }) => {
     const [uploadFiles, setUploadFiles] = (0, react_1.useState)([]);
     const [uploadingFile, setUploadingFile] = (0, react_1.useState)(false);
@@ -56,7 +57,7 @@ const EscalationChat = ({ activeChatIssue, showEscalationChat, setShowEscalation
                         react_1.default.createElement("h1", { className: "text-md font-bold mr-2" },
                             "Escalation Chat #",
                             activeChatIssue.caseId),
-                        react_1.default.createElement(base_ui_1.Tag, { label: activeChatIssue.status, color: "info" })),
+                        react_1.default.createElement(EscalationIssueCard_1.CustomTag, { label: activeChatIssue.status })),
                     react_1.default.createElement("p", { className: "text-xs" },
                         activeChatIssue.title,
                         " - ",

package/lib/components/Escalations/EscalationIssueCard.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import React from 'react';
+import { EscalationChatDetails } from "./EscalationTabsContent";
+export declare const CustomTag: ({ label }: {
+    label: any;
+}) => React.JSX.Element;
+type EscalationIssueCardProps = {
+    issues: any[];
+    isExpert: boolean;
+    openEscalationChat: (details: EscalationChatDetails) => void;
+    showRespondButton?: boolean;
+    setSelectedIssueId?: (id: number) => void;
+    showMarkResolvedButton?: boolean;
+};
+declare const EscalationIssueCard: React.FC<EscalationIssueCardProps>;
+export default EscalationIssueCard;

package/lib/components/Escalations/EscalationIssueCard.js ADDED Viewed

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomTag = void 0;
+const react_1 = __importDefault(require("react"));
+const base_ui_1 = require("@paro.io/base-ui");
+const getBackgroundColor = (type) => {
+    switch (type) {
+        case 'Critical':
+            return 'danger';
+        case 'High':
+            return 'warning';
+        case 'Medium':
+            return 'info';
+        case 'Low':
+            return 'default';
+        default:
+            return 'default';
+    }
+};
+const CustomTag = ({ label }) => {
+    const color = getBackgroundColor(label);
+    return (react_1.default.createElement("div", { className: `border box-border text-center px-4 pb-0.5 pt-1 text-sm inline-block break-words ${color === 'default' ? 'text-black' : 'text-white'} rounded-full bg-${color} border-${color} ml-2` }, label.toUpperCase()));
+};
+exports.CustomTag = CustomTag;
+const EscalationIssueCard = ({ issues, isExpert, openEscalationChat, showRespondButton = false, setSelectedIssueId, showMarkResolvedButton = false, }) => {
+    if (!issues.length)
+        return react_1.default.createElement("div", null, "No issues.");
+    return (react_1.default.createElement("div", { className: "space-y-4" }, issues.map((issue) => {
+        const project = issue.projectName && Array.isArray(issue.projectName) && issue.projectName.length > 0
+            ? `${issue.projectName[0]}${issue.projectName.length > 1 ? ` +${issue.projectName.length - 1} more` : ''} `
+            : '';
+        const docs = [...issue.expertSupportingDocuments, ...issue.clientSupportingDocuments];
+        return (react_1.default.createElement("div", { key: issue.id, className: "border border-gray-200 rounded-lg bg-white p-4" },
+            react_1.default.createElement("div", { className: "flex items-center justify-between mb-3" },
+                react_1.default.createElement("div", { className: "flex-1 ml-2" },
+                    react_1.default.createElement("div", { className: "font-bold" }, issue.problem),
+                    react_1.default.createElement("div", { className: "text-xs text-gray-500 font-bold" },
+                        project,
+                        " \u2022 Case #",
+                        issue.id)),
+                react_1.default.createElement("div", { className: "flex flex-row gap-2" },
+                    react_1.default.createElement(exports.CustomTag, { label: issue.severityLevel }),
+                    react_1.default.createElement(exports.CustomTag, { label: issue.issueType }))),
+            react_1.default.createElement("div", { className: "bg-gray-50 rounded-md p-3 mb-4 border" },
+                react_1.default.createElement("div", { className: "flex items-center justify-between mb-2" }, issue.updateLabel ? (react_1.default.createElement("div", { className: "text-sm text-gray-500" },
+                    "Updated By: ",
+                    react_1.default.createElement("span", { className: "font-bold" }, issue.updateLabel),
+                    " \u2022 Updated on: ",
+                    react_1.default.createElement("span", { className: "font-bold" }, issue.updateTime))) : (react_1.default.createElement("div", { className: "text-sm text-gray-500" },
+                    "Submitted by: ",
+                    react_1.default.createElement("span", { className: "font-bold" }, issue.submittedBy),
+                    " \u2022 Submitted on: ",
+                    react_1.default.createElement("span", { className: "font-bold" }, issue.createdAt)))),
+                react_1.default.createElement("div", { className: "text-sm text-gray-600 mb-3" }, issue.expectedOutcome)),
+            docs && docs.length > 0 && (react_1.default.createElement("div", { className: "flex flex-wrap gap-2 m-1 mb-3" },
+                react_1.default.createElement("span", { className: "font-bold" }, "Supporting Documents: "),
+                docs.map((d, idx) => (react_1.default.createElement(exports.CustomTag, { key: idx, label: d }))))),
+            react_1.default.createElement("div", { className: "flex flex-wrap gap-2" },
+                react_1.default.createElement(base_ui_1.Button, { onClick: () => openEscalationChat({
+                        title: issue.problem,
+                        project: issue.projectName,
+                        id: issue.id,
+                        status: issue.status
+                    }), label: "Chat", color: "primary" }),
+                showRespondButton && setSelectedIssueId && (react_1.default.createElement(base_ui_1.Button, { label: "Respond to Escalation", onClick: () => setSelectedIssueId(issue.id), color: 'primary' })),
+                showMarkResolvedButton && !isExpert && (react_1.default.createElement(base_ui_1.Button, { onClick: issue.markResolved, label: "Mark as Resolved", color: "primary" })))));
+    })));
+};
+exports.default = EscalationIssueCard;

package/lib/components/Escalations/EscalationReportBanner.js CHANGED Viewed

@@ -11,7 +11,7 @@ const EscalationReportBanner = ({ onReport }) => {
         react_1.default.createElement("div", { className: "flex items-center justify-between" },
             react_1.default.createElement("div", { className: "flex items-center" },
                 react_1.default.createElement("div", { className: "bg-white bg-opacity-20 rounded-full p-2 mr-4" },
-                    react_1.default.createElement(base_icons_1.IconExclamation, null)),
+                    react_1.default.createElement(base_icons_1.IconExclamation, { className: "text-white" })),
                 react_1.default.createElement("div", null,
                     react_1.default.createElement("h3", { className: "text-xl font-bold text-white" }, "Having Issues with Your Expert?"),
                     react_1.default.createElement("p", { className: "text-red-100 text-sm mt-1" }, "Report communication problems, quality concerns, or missed deadlines. We'll resolve it within 4-8 hours."))),

package/lib/components/Escalations/EscalationRespondForm.js CHANGED Viewed

@@ -30,17 +30,17 @@ const responseTypes = [
     {
         label: "Acknowledge issue and provide resolution plan",
         description: "Explain circumstances and apologize",
-        value: "acknowledge",
+        value: "Acknowledged",
     },
     {
         label: "Dispute issue and provide counter-evidence",
         description: "Challenge the client's concerns with documentation",
-        value: "dispute",
+        value: "Disputed",
     },
     {
         label: "Request clarification",
         description: "Ask for more details about the issue",
-        value: "clarification",
+        value: "Clarification",
     },
 ];
 const EscalationRespondForm = ({ goBack, selectedIssue, goHome }) => {
@@ -53,15 +53,23 @@ const EscalationRespondForm = ({ goBack, selectedIssue, goHome }) => {
         const files = Array.from(event.target.files);
         setUploadFiles(prev => [...prev, ...files]);
     };
+    const submitResponse = () => {
+        const responseData = {
+            responseType: selectedType,
+            responseText: responseInput,
+            uploadedFiles: uploadFiles.map(file => file.name),
+            selectedIssue: selectedIssue
+        };
+        console.log("Collected Response Data:", responseData);
+        goHome();
+    };
     return (react_1.default.createElement("div", null,
         react_1.default.createElement("button", { onClick: goBack, className: "flex items-center text-blue-600 mb-6" },
             react_1.default.createElement(base_icons_1.IconChevronLeft, { size: "xs" }),
             " Back"),
         react_1.default.createElement("div", { className: "mb-6" },
             react_1.default.createElement("h2", { className: "text-xl font-bold" }, "Respond to Issue"),
-            react_1.default.createElement("p", { className: "text-gray-600 mt-1" }, selectedIssue === 'respond-to-issue-critical' ?
-                "Ineo Systrans USA, Inc - Missing Deadlines - Poor Quality Work" :
-                "Gene Baker CPA - Lack of Updates - Poor Communication")),
+            react_1.default.createElement("p", { className: "text-gray-600 mt-1" }, selectedIssue.problem)),
         react_1.default.createElement("div", { className: "border rounded-lg overflow-hidden mb-6" },
             react_1.default.createElement("div", { className: "bg-gray-50 p-3 border-b" },
                 react_1.default.createElement("h3", { className: "font-medium" }, "Response Type")),
@@ -81,7 +89,7 @@ const EscalationRespondForm = ({ goBack, selectedIssue, goHome }) => {
                                         : "text-gray-500 text-xs mt-1" }, type.description))))))),
                     react_1.default.createElement("div", null,
                         react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Your Response"),
-                        react_1.default.createElement(base_ui_1.Input, { type: "text", value: responseInput, placeholder: "Address the client's concerns...", onChange: (e) => setResponseInput(e.target.value) })),
+                        react_1.default.createElement(base_ui_1.Input, { type: "text", value: responseInput, placeholder: "Address the concern...", onChange: (e) => setResponseInput(e.target.value) })),
                     react_1.default.createElement("div", null,
                         react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Supporting Documents (Optional)"),
                         react_1.default.createElement("div", { className: "border border-dashed border-gray-300 rounded-md p-6 text-center" },
@@ -98,6 +106,6 @@ const EscalationRespondForm = ({ goBack, selectedIssue, goHome }) => {
                                 react_1.default.createElement("p", { className: "mt-1" }, "Your response will be visible to the client and Paro support team. Be professional and focus on resolution.")))),
                     react_1.default.createElement("div", { className: "flex justify-end space-x-3" },
                         react_1.default.createElement(base_ui_1.Button, { label: "Cancel", onClick: goBack }),
-                        react_1.default.createElement(base_ui_1.Button, { label: "Submit Response", color: "primary", onClick: goHome })))))));
+                        react_1.default.createElement(base_ui_1.Button, { label: "Submit Response", color: "primary", onClick: submitResponse })))))));
 };
 exports.default = EscalationRespondForm;

package/lib/components/Escalations/EscalationSubmitForm.js CHANGED Viewed

@@ -33,11 +33,12 @@ const core_1 = require("@material-ui/core");
 const LogTimeModalAuthenticated_1 = require("../ProjectCard/LogTimeModalAuthenticated");
 const dayjs_1 = __importDefault(require("dayjs"));
 const issueTypeOptions = [
-    { value: 'Communication Issues', label: 'Communication Issues' },
+    { value: 'CommunicationIssues', label: 'Communication Issues' },
     { value: 'Professionalism', label: 'Professionalism' },
-    { value: 'Project Abandonment', label: 'Project Abandonment' },
-    { value: 'Delayed Deliverables or Deadlines due to Missing Information/Documentation', label: 'Delayed Deliverables or Deadlines due to Missing Information/Documentation' },
-    { value: 'Billing Concern', label: 'Billing Concern' },
+    { value: 'ProjectAbandonment', label: 'Project Abandonment' },
+    { value: 'DelayedDeliverables', label: 'Delayed Deliverables or Deadlines due to Missing Information/Documentation' },
+    { value: 'BillingConcern', label: 'Billing Concern' },
+    { value: 'ScopeCreep', label: 'Scope Creep/Unauthorized Requests' },
     { value: 'Other', label: 'Other' },
 ];
 const EscalationSubmitForm = ({ goBack, goHome, experts, projects, isExpert = false }) => {
@@ -51,7 +52,7 @@ const EscalationSubmitForm = ({ goBack, goHome, experts, projects, isExpert = fa
     const [projectOptions, setProjectOptions] = (0, react_1.useState)([]);
     const [selectedProjects, setSelectedProjects] = (0, react_1.useState)([]);
     const [issueType, setIssueType] = (0, react_1.useState)('');
-    const [priority, setPriority] = (0, react_1.useState)('');
+    const [severity, setSeverity] = (0, react_1.useState)('');
     const [startDate, setStartDate] = (0, react_1.useState)(undefined);
     const [isDateInvalid, setIsDateInvalid] = (0, react_1.useState)(false);
     const fileInputRef = (0, react_1.useRef)(null);
@@ -90,7 +91,7 @@ const EscalationSubmitForm = ({ goBack, goHome, experts, projects, isExpert = fa
         const requiredProjectSelection = isExpert || (!isExpert && selectedProjects.length > 0);
         return (selectedExpert !== null &&
             issueType !== '' &&
-            priority !== '' &&
+            severity !== '' &&
             problemInput.trim() !== '' &&
             outcomeInput.trim() !== '' &&
             isChecked &&
@@ -104,9 +105,9 @@ const EscalationSubmitForm = ({ goBack, goHome, experts, projects, isExpert = fa
             selectedExpert,
             selectedProjects,
             issueType,
-            priority,
+            severity,
             startDate,
-            problemDescription: problemInput,
+            problem: problemInput,
             expectedOutcome: outcomeInput,
             supportingDocs: uploadFiles.map(f => f.name),
         };
@@ -172,12 +173,21 @@ const EscalationSubmitForm = ({ goBack, goHome, experts, projects, isExpert = fa
                         react_1.default.createElement(core_1.Select, { fullWidth: true, value: issueType, onChange: e => setIssueType(e.target.value), displayEmpty: true, variant: "outlined" },
                             react_1.default.createElement(core_1.MenuItem, { disabled: true, value: "" },
                                 react_1.default.createElement("em", null, "Select issue type...")),
-                            issueTypeOptions.map(option => (react_1.default.createElement(core_1.MenuItem, { key: option.value, value: option.value }, option.label))))),
+                            issueTypeOptions
+                                .filter(option => {
+                                if (isExpert) {
+                                    return option.label !== 'Billing Concern';
+                                }
+                                else {
+                                    return option.label !== 'Scope Creep/Unauthorized Requests';
+                                }
+                            })
+                                .map(option => (react_1.default.createElement(core_1.MenuItem, { key: option.value, value: option.value }, option.label))))),
                     react_1.default.createElement("div", null,
-                        react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Priority Level"),
-                        react_1.default.createElement(core_1.Select, { fullWidth: true, value: priority, onChange: e => setPriority(e.target.value), displayEmpty: true, variant: "outlined" },
+                        react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Severity Level"),
+                        react_1.default.createElement(core_1.Select, { fullWidth: true, value: severity, onChange: e => setSeverity(e.target.value), displayEmpty: true, variant: "outlined" },
                             react_1.default.createElement(core_1.MenuItem, { disabled: true, value: "" },
-                                react_1.default.createElement("em", null, "Select priority...")),
+                                react_1.default.createElement("em", null, "Select severity...")),
                             react_1.default.createElement(core_1.MenuItem, { value: "Critical" }, "Critical"),
                             react_1.default.createElement(core_1.MenuItem, { value: "High" }, "High"),
                             react_1.default.createElement(core_1.MenuItem, { value: "Medium" }, "Medium"),

package/lib/components/Escalations/EscalationTabs.js CHANGED Viewed

@@ -9,22 +9,22 @@ const EscalationTabs = ({ activeTab, setActiveTab, activeIssues = 0, inProgressI
     return (react_1.default.createElement("div", { className: "border-b border-gray-200 mb-6" },
         react_1.default.createElement("nav", { className: "flex space-x-8" },
             react_1.default.createElement("button", { onClick: () => setActiveTab('action-required'), className: `py-2 px-1 border-b-2 font-medium text-sm flex items-center ${activeTab === 'action-required'
-                    ? 'border-[#EF5360] text-[#EF5360]'
+                    ? 'border-[#A73A43] text-[#A73A43]'
                     : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}` },
-                react_1.default.createElement("div", { className: "bg-[#EF5360] w-2 h-2 rounded-full mr-2" }),
+                react_1.default.createElement("div", { className: "bg-[#A73A43] w-2 h-2 rounded-full mr-2" }),
                 "Action Required",
-                react_1.default.createElement("div", { className: "bg-red-100 text-[#EF5360] font-bold rounded-full px-2 py-1 text-xs ml-2" }, activeIssues)),
+                react_1.default.createElement("div", { className: "bg-[#F9BABF] text-[#A73A43] font-bold rounded-full px-2 py-1 text-xs ml-2" }, activeIssues)),
             react_1.default.createElement("button", { onClick: () => setActiveTab('in-progress'), className: `py-2 px-1 border-b-2 font-medium text-sm flex items-center ${activeTab === 'in-progress'
-                    ? 'border-blue-500 text-blue-600'
+                    ? 'border-[#115484] text-[#115484]'
                     : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}` },
-                react_1.default.createElement("div", { className: "bg-blue-500 w-2 h-2 rounded-full mr-2" }),
+                react_1.default.createElement("div", { className: "bg-[#115484] w-2 h-2 rounded-full mr-2" }),
                 "In Progress",
-                react_1.default.createElement("div", { className: "bg-blue-100 text-blue-800 font-bold rounded-full px-2 py-1 text-xs ml-2" }, inProgressIssues)),
+                react_1.default.createElement("div", { className: "bg-[#A3C9E5] text-[#115484] font-bold rounded-full px-2 py-1 text-xs ml-2" }, inProgressIssues)),
             react_1.default.createElement("button", { onClick: () => setActiveTab('resolved'), className: `py-2 px-1 border-b-2 font-medium text-sm flex items-center ${activeTab === 'resolved'
-                    ? 'border-green-500 text-green-600'
+                    ? 'border-[#12756F] text-[#12756F]'
                     : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'}` },
-                react_1.default.createElement("div", { className: "bg-green-500 w-2 h-2 rounded-full mr-2" }),
+                react_1.default.createElement("div", { className: "bg-[#12756F] w-2 h-2 rounded-full mr-2" }),
                 "Resolved",
-                react_1.default.createElement("div", { className: "bg-green-100 text-green-800 font-bold rounded-full px-2 py-1 text-xs ml-2" }, resolvedIssues)))));
+                react_1.default.createElement("div", { className: "bg-[#A3DCD8] text-[#12756F] font-bold rounded-full px-2 py-1 text-xs ml-2" }, resolvedIssues)))));
 };
 exports.default = EscalationTabs;

package/lib/components/Escalations/EscalationTabsContent.d.ts CHANGED Viewed

@@ -1,17 +1,17 @@
-type EscalationChatDetails = {
+export type EscalationChatDetails = {
     title: string;
     project: string;
-    caseId: string;
+    id: string;
     status: string;
 };
 interface EscalationTabProps {
     activeTab: string;
     openEscalationChat: (details: EscalationChatDetails) => void;
-    setSelectedIssue: (issue: string) => void;
+    setSelectedIssueId: (issue: number) => void;
     activeIssues: any[];
     inProgressIssues: any[];
     resolvedIssues: any[];
     isExpert: boolean;
 }
-declare const EscalationTabsContent: ({ activeTab, openEscalationChat, setSelectedIssue, activeIssues, inProgressIssues, resolvedIssues, isExpert, }: EscalationTabProps) => JSX.Element;
+declare const EscalationTabsContent: ({ activeTab, openEscalationChat, setSelectedIssueId, activeIssues, inProgressIssues, resolvedIssues, isExpert, }: EscalationTabProps) => JSX.Element;
 export default EscalationTabsContent;

package/lib/components/Escalations/EscalationTabsContent.js CHANGED Viewed

@@ -1,120 +1,89 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const base_ui_1 = require("@paro.io/base-ui");
 const react_1 = __importDefault(require("react"));
+const EscalationIssueCard_1 = __importStar(require("./EscalationIssueCard"));
+const base_ui_1 = require("@paro.io/base-ui");
 ;
-const getBackgroundColor = (type) => {
-    switch (type) {
-        case 'Critical':
-            return 'danger';
-        case 'High':
-            return 'warning';
-        case 'Medium':
-            return 'info';
-        case 'Low':
-            return 'default';
-        default:
-            return 'default';
-    }
-};
-const EscalationTabsContent = ({ activeTab, openEscalationChat, setSelectedIssue, activeIssues, inProgressIssues, resolvedIssues, isExpert, }) => {
+const EscalationTabsContent = ({ activeTab, openEscalationChat, setSelectedIssueId, activeIssues, inProgressIssues, resolvedIssues, isExpert, }) => {
     if (activeTab === 'action-required') {
         return (react_1.default.createElement("div", null,
             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" }, "Issues Requiring Your Response"),
-                react_1.default.createElement("div", { className: "text-sm text-gray-500" }, "Ordered by urgency")),
-            activeIssues.length > 0 ? react_1.default.createElement("div", { className: "space-y-4" }, activeIssues.map((issue) => (react_1.default.createElement("div", { key: issue.caseId, className: "border border-gray-200 rounded-lg bg-white p-4" },
-                react_1.default.createElement("div", { className: "flex items-center" },
-                    react_1.default.createElement(base_ui_1.Tag, { label: issue.tag, color: getBackgroundColor(issue.tag) }),
-                    react_1.default.createElement("div", { className: "flex-1 ml-2" },
-                        react_1.default.createElement("div", { className: "font-bold" }, issue.title),
-                        react_1.default.createElement("div", { className: "text-xs text-gray-500" },
-                            issue.project,
-                            " \u2022 Case #",
-                            issue.caseId))),
-                react_1.default.createElement("div", { className: "bg-gray-50 rounded-md p-3 mb-4 border" },
-                    react_1.default.createElement("div", { className: "flex items-center justify-between mb-2" },
-                        react_1.default.createElement("div", { className: "text-xs text-gray-500" }, issue.submitted)),
-                    react_1.default.createElement("div", { className: "text-sm text-gray-600 italic" }, issue.message)),
-                react_1.default.createElement("div", { className: "flex flex-wrap gap-2" },
-                    react_1.default.createElement(base_ui_1.Button, { label: "Chat", onClick: () => openEscalationChat({
-                            title: issue.title,
-                            project: issue.project,
-                            caseId: issue.caseId,
-                            status: issue.status
-                        }), color: "primary" }),
-                    react_1.default.createElement(base_ui_1.Button, { label: "Respond to Escalation", onClick: () => setSelectedIssue(issue.respondKey), color: 'info', className: "bg-info hover:bg-white text-white hover:text-info-dark" }))))))
-                :
-                    react_1.default.createElement("div", null, "No Active issues.")));
+                react_1.default.createElement("h3", { className: "text-lg font-semibold text-gray-900" }, "Issues Requiring Your Response")),
+            react_1.default.createElement(EscalationIssueCard_1.default, { issues: activeIssues, isExpert: isExpert, openEscalationChat: openEscalationChat, showRespondButton: true, setSelectedIssueId: setSelectedIssueId })));
     }
     if (activeTab === 'in-progress') {
         return (react_1.default.createElement("div", null,
             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" }, "Issues In Progress"),
-                react_1.default.createElement("div", { className: "text-sm text-gray-500" }, "Being handled by our team")),
-            inProgressIssues.length > 0 ? react_1.default.createElement("div", { className: "space-y-4" }, inProgressIssues.map((issue) => (react_1.default.createElement("div", { key: issue.caseId, className: "border border-gray-200 rounded-lg bg-white p-4" },
-                react_1.default.createElement("div", { className: "flex items-start justify-between mb-3" },
-                    react_1.default.createElement("div", { className: "flex items-center" },
-                        react_1.default.createElement(base_ui_1.Tag, { label: issue.tag, color: getBackgroundColor(issue.tag) }),
-                        react_1.default.createElement("div", { className: "flex-1 ml-2" },
-                            react_1.default.createElement("div", { className: "font-bold" }, issue.title),
-                            react_1.default.createElement("div", { className: "text-xs text-gray-500" },
-                                issue.project,
-                                " \u2022 Case #",
-                                issue.caseId),
-                            issue.extra))),
-                react_1.default.createElement("div", { className: "bg-gray-50 rounded-md p-3 mb-4 border" },
-                    react_1.default.createElement("div", { className: "flex items-center justify-between mb-2" },
-                        react_1.default.createElement("span", { className: "text-sm font-medium" }, issue.updateLabel),
-                        react_1.default.createElement("div", { className: "text-xs text-gray-500" }, issue.updateTime)),
-                    react_1.default.createElement("div", { className: "text-sm text-gray-600 italic mb-3" }, issue.message)),
-                react_1.default.createElement("div", { className: "flex flex-wrap gap-2" },
-                    react_1.default.createElement(base_ui_1.Button, { onClick: () => openEscalationChat({
-                            title: issue.title,
-                            project: issue.project,
-                            caseId: issue.caseId,
-                            status: issue.status
-                        }), label: "Chat", color: "primary" }),
-                    !isExpert && react_1.default.createElement(base_ui_1.Button, { onClick: issue.markResolved, label: "Mark as Resolved", color: "info", className: "bg-info hover:bg-none text-white hover:text-info-dark" })))))) :
-                react_1.default.createElement("div", null, "No inProgress issues.")));
+                react_1.default.createElement("h3", { className: "text-lg font-semibold text-gray-900" }, "Issues In Progress")),
+            react_1.default.createElement(EscalationIssueCard_1.default, { issues: inProgressIssues, isExpert: isExpert, openEscalationChat: openEscalationChat, showMarkResolvedButton: true })));
     }
     if (activeTab === 'resolved') {
         return (react_1.default.createElement("div", null,
             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" }, "Recently Resolved Issues"),
-                react_1.default.createElement("button", { className: "text-sm text-gray-500 hover:text-gray-700 flex items-center" },
-                    react_1.default.createElement("span", null, "View All History"))),
-            resolvedIssues.length > 0 ? react_1.default.createElement("div", { className: "space-y-3" }, resolvedIssues.map((issue) => (react_1.default.createElement("div", { key: issue.caseId, className: "border border-green-200 rounded-lg bg-green-50 p-4" },
-                react_1.default.createElement("div", { className: "flex items-start justify-between" },
-                    react_1.default.createElement("div", { className: "flex items-start" },
-                        react_1.default.createElement("div", null,
-                            react_1.default.createElement("h4", { className: "font-medium text-gray-900 mb-1" }, issue.title),
-                            react_1.default.createElement("div", { className: "flex items-center text-sm text-gray-600 mb-2" },
-                                react_1.default.createElement("span", null, issue.person),
-                                react_1.default.createElement("span", { className: "mx-2" }, "\u2022"),
-                                react_1.default.createElement("span", null, issue.project),
-                                react_1.default.createElement("span", { className: "mx-2" }, "\u2022"),
-                                react_1.default.createElement("span", null,
-                                    "Case #",
-                                    issue.caseId)),
-                            react_1.default.createElement("p", { className: "text-sm text-gray-600 mb-3" }, issue.description),
-                            react_1.default.createElement("div", { className: "flex items-center text-sm text-gray-600 mb-2" },
-                                react_1.default.createElement("span", { className: "text-xs text-gray-500" },
-                                    "Resolved ",
-                                    issue.resolvedDate),
-                                react_1.default.createElement("span", { className: "mx-2" }, "\u2022"),
-                                react_1.default.createElement("span", { className: "text-xs text-gray-500" },
-                                    "Resolved By ",
-                                    issue.resolvedBy)))),
-                    react_1.default.createElement(base_ui_1.Button, { onClick: () => openEscalationChat({
-                            title: issue.chatTitle,
-                            project: issue.project,
-                            caseId: issue.caseId,
-                            status: issue.chatStatus
-                        }), label: "Chat", color: "primary" }))))))
+                react_1.default.createElement("h3", { className: "text-lg font-semibold text-gray-900" }, "Recently Resolved Issues")),
+            resolvedIssues.length > 0 ? react_1.default.createElement("div", { className: "space-y-3" }, resolvedIssues.map((issue) => {
+                const project = issue.projectName && Array.isArray(issue.projectName) && issue.projectName.length > 0
+                    ? `${issue.projectName[0]}${issue.projectName.length > 1 ? ` +${issue.projectName.length - 1} more` : ''} `
+                    : '';
+                return (react_1.default.createElement("div", { key: issue.id, className: "border border-green-200 rounded-lg bg-green-50 p-4" },
+                    react_1.default.createElement("div", { className: "flex items-start justify-between" },
+                        react_1.default.createElement("div", { className: "flex items-start" },
+                            react_1.default.createElement("div", null,
+                                react_1.default.createElement("div", { className: "flex flex-row justify-between" },
+                                    react_1.default.createElement("h4", { className: "font-medium text-gray-900 mb-1" },
+                                        issue.problem,
+                                        " ",
+                                        react_1.default.createElement(EscalationIssueCard_1.CustomTag, { label: issue.severityLevel }))),
+                                react_1.default.createElement("div", { className: "flex items-center text-sm text-gray-600 mb-2" },
+                                    react_1.default.createElement("span", null, issue.person),
+                                    react_1.default.createElement("span", { className: "mx-2" }, "\u2022"),
+                                    react_1.default.createElement("span", null, project),
+                                    react_1.default.createElement("span", { className: "mx-2" }, "\u2022"),
+                                    react_1.default.createElement("span", null,
+                                        "Case #",
+                                        issue.id)),
+                                react_1.default.createElement("p", { className: "text-sm text-gray-600 mb-3" }, issue.description),
+                                react_1.default.createElement("div", { className: "flex items-center text-sm text-gray-600 mb-2" },
+                                    react_1.default.createElement("span", { className: "text-xs text-gray-500" },
+                                        "Resolved ",
+                                        issue.resolvedDate),
+                                    react_1.default.createElement("span", { className: "mx-2" }, "\u2022"),
+                                    react_1.default.createElement("span", { className: "text-xs text-gray-500" },
+                                        "Resolved By ",
+                                        issue.resolvedBy)))),
+                        react_1.default.createElement(base_ui_1.Button, { onClick: () => openEscalationChat({
+                                title: issue.chatTitle,
+                                project: issue.projectName,
+                                id: issue.id,
+                                status: issue.chatStatus
+                            }), label: "Chat", color: "primary" }))));
+            }))
                 :
                     react_1.default.createElement("div", null, "No resolved issues.")));
     }

package/lib/components/Escalations/Escalations.js CHANGED Viewed

@@ -38,17 +38,18 @@ const EscalationChat_1 = __importDefault(require("./EscalationChat"));
 const AccountSuspensionBanner_1 = __importDefault(require("./AccountSuspensionBanner"));
 const AccountSuspensionModal_1 = __importDefault(require("./AccountSuspensionModal"));
 const base_icons_1 = require("@paro.io/base-icons");
+const EscalationIssueCard_1 = require("./EscalationIssueCard");
 const Escalations = ({ experts, projects, isExpert = false, activeIssues, inProgressIssues, resolvedIssues, }) => {
     const [activeSection, setActiveSection] = (0, react_1.useState)('support');
     const [selectedProject, setSelectedProject] = (0, react_1.useState)(null);
-    const [selectedIssue, setSelectedIssue] = (0, react_1.useState)(null);
+    const [selectedIssueId, setSelectedIssueId] = (0, react_1.useState)(null); // using selectedIssueId 0 for new escalation submission
     const [showEscalationChat, setShowEscalationChat] = (0, react_1.useState)(false);
     const [activeChatIssue, setActiveChatIssue] = (0, react_1.useState)(null); // update required
     const [activeEscalationTab, setActiveEscalationTab] = (0, react_1.useState)('action-required');
     const [showSuspensionModal, setShowSuspensionModal] = (0, react_1.useState)(false);
     const goBack = () => {
-        if (selectedIssue) {
-            setSelectedIssue(null);
+        if (selectedIssueId !== null) {
+            setSelectedIssueId(null);
         }
         else if (selectedProject) {
             setSelectedProject(null);
@@ -58,7 +59,7 @@ const Escalations = ({ experts, projects, isExpert = false, activeIssues, inProg
         }
     };
     const goHome = () => {
-        setSelectedIssue(null);
+        setSelectedIssueId(null);
         setSelectedProject(null);
         setActiveSection('support');
     };
@@ -68,11 +69,13 @@ const Escalations = ({ experts, projects, isExpert = false, activeIssues, inProg
     };
     return (react_1.default.createElement("div", { className: "bg-white w-full" },
         react_1.default.createElement("div", { className: isExpert ? "p-6" : "mx-auto p-6 border-solid border-t-2" },
-            activeSection === 'support' && !selectedIssue && react_1.default.createElement("div", null,
+            activeSection === 'support' && selectedIssueId === null && react_1.default.createElement("div", null,
                 react_1.default.createElement("div", { className: "flex justify-between items-center mb-1 mt-2" },
                     react_1.default.createElement("h2", { className: "text-xl font-bold" }, "Support & Escalation Management"),
                     activeIssues.length && react_1.default.createElement("div", { className: "flex items-center space-x-2" },
-                        react_1.default.createElement(base_ui_1.Tag, { label: `${activeIssues.length} Active Issues`, color: "danger" }))),
+                        react_1.default.createElement("div", { className: `border box-border text-center px-4 pb-0.5 pt-1 text-sm inline-block break-words text-white rounded-full bg-danger border-danger` },
+                            activeIssues.length,
+                            " ACTIVE ISSUES"))),
                 react_1.default.createElement("div", { className: "border-b pb-4 mb-6" },
                     react_1.default.createElement("p", { className: "text-gray-600" }, `Manage escalations with integrated chat between you, your ${isExpert ? 'client' : 'expert'}, and Paro support. All conversations are organized by priority and status.`)),
                 react_1.default.createElement("div", { className: "bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6" },
@@ -106,17 +109,17 @@ const Escalations = ({ experts, projects, isExpert = false, activeIssues, inProg
                             react_1.default.createElement("h4", { className: "font-medium text-gray-900 mb-2" }, "Priority Levels & Response Times"),
                             react_1.default.createElement("div", { className: "space-y-2 text-sm" },
                                 react_1.default.createElement("div", { className: "flex items-center gap-x-2" },
-                                    react_1.default.createElement(base_ui_1.Tag, { label: "Critical", color: "danger" }),
+                                    react_1.default.createElement(EscalationIssueCard_1.CustomTag, { label: "Critical" }),
                                     react_1.default.createElement("span", null, "All work blocked")),
                                 react_1.default.createElement("div", { className: "flex items-center gap-x-2" },
-                                    react_1.default.createElement(base_ui_1.Tag, { label: "High", color: "warning" }),
+                                    react_1.default.createElement(EscalationIssueCard_1.CustomTag, { label: "High" }),
                                     react_1.default.createElement("span", null, "Progress blocked")),
                                 react_1.default.createElement("div", { className: "flex items-center gap-x-2" },
-                                    react_1.default.createElement(base_ui_1.Tag, { label: "Medium", color: "info" }),
+                                    react_1.default.createElement(EscalationIssueCard_1.CustomTag, { label: "Medium" }),
                                     react_1.default.createElement("span", null, "Timeline impacted")),
                                 react_1.default.createElement("div", { className: "flex items-center gap-x-2" },
-                                    react_1.default.createElement(base_ui_1.Tag, { label: "Low", color: "neutral" }),
-                                    react_1.default.createElement("span", null, "Minor impact")))))),
+                                    react_1.default.createElement(EscalationIssueCard_1.CustomTag, { label: "Low" }),
+                                    react_1.default.createElement("span", null, "Minor issues")))))),
                 isExpert &&
                     react_1.default.createElement("div", { className: "rounded-lg p-2 mb-4 shadow-lg" },
                         react_1.default.createElement("div", { className: "flex items-center justify-between" },
@@ -127,15 +130,15 @@ const Escalations = ({ experts, projects, isExpert = false, activeIssues, inProg
                                     react_1.default.createElement("div", { className: "mr-4" },
                                         react_1.default.createElement("h3", { className: "font-semibold text-sm mb-1" }, "Need Support with a Client?"),
                                         react_1.default.createElement("p", { className: "text-xs" }, "Report payment, scope, or communication activeIssues")))),
-                            react_1.default.createElement(base_ui_1.Button, { label: "Report issue", onClick: () => setSelectedIssue('submit-escalation'), iconLeft: react_1.default.createElement(base_icons_1.IconExclamation, { size: "sm", className: "text-white" }), color: "info", className: "bg-info hover:bg-white text-white hover:text-info-dark" }))),
+                            react_1.default.createElement(base_ui_1.Button, { label: "Report issue", onClick: () => setSelectedIssueId(0), iconLeft: react_1.default.createElement(base_icons_1.IconExclamation, { size: "sm", className: "text-white" }), color: "primary" }))),
                 isExpert &&
                     react_1.default.createElement(AccountSuspensionBanner_1.default, { setShowSuspensionModal: setShowSuspensionModal, suspended: false }),
                 !isExpert &&
-                    react_1.default.createElement(EscalationReportBanner_1.default, { onReport: () => setSelectedIssue('submit-escalation') }),
+                    react_1.default.createElement(EscalationReportBanner_1.default, { onReport: () => setSelectedIssueId(0) }),
                 react_1.default.createElement(EscalationTabs_1.default, { activeTab: activeEscalationTab, setActiveTab: setActiveEscalationTab, activeIssues: activeIssues.length, inProgressIssues: inProgressIssues.length, resolvedIssues: resolvedIssues.length }),
-                react_1.default.createElement(EscalationTabsContent_1.default, { activeTab: activeEscalationTab, openEscalationChat: openEscalationChat, setSelectedIssue: setSelectedIssue, activeIssues: activeIssues, inProgressIssues: inProgressIssues, resolvedIssues: resolvedIssues, isExpert: isExpert })),
-            activeSection === 'support' && (selectedIssue === 'respond-to-issue-critical' || selectedIssue === 'respond-to-issue-medium') && (react_1.default.createElement(EscalationRespondForm_1.default, { goBack: goBack, selectedIssue: selectedIssue, goHome: goHome })),
-            activeSection === 'support' && selectedIssue === 'submit-escalation' && (react_1.default.createElement(EscalationSubmitForm_1.default, { goBack: goBack, goHome: goHome, experts: experts, projects: projects, isExpert: isExpert })),
+                react_1.default.createElement(EscalationTabsContent_1.default, { activeTab: activeEscalationTab, openEscalationChat: openEscalationChat, setSelectedIssueId: setSelectedIssueId, activeIssues: activeIssues, inProgressIssues: inProgressIssues, resolvedIssues: resolvedIssues, isExpert: isExpert })),
+            activeSection === 'support' && activeIssues.filter((issue) => issue.id === selectedIssueId).length > 0 && (react_1.default.createElement(EscalationRespondForm_1.default, { goBack: goBack, selectedIssue: activeIssues.filter((issue) => issue.id === selectedIssueId), goHome: goHome })),
+            activeSection === 'support' && selectedIssueId === 0 && (react_1.default.createElement(EscalationSubmitForm_1.default, { goBack: goBack, goHome: goHome, experts: experts, projects: projects, isExpert: isExpert })),
             showEscalationChat && activeChatIssue && (react_1.default.createElement(EscalationChat_1.default, { activeChatIssue: activeChatIssue, showEscalationChat: showEscalationChat, setShowEscalationChat: setShowEscalationChat })),
             showSuspensionModal &&
                 react_1.default.createElement(AccountSuspensionModal_1.default, { showSuspensionModal: showSuspensionModal, onClose: () => setShowSuspensionModal(false) }))));

package/package.json CHANGED Viewed

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