@paro.io/expert-shared-components 1.12.36 → 1.12.38

package/lib/components/Escalations/AccountSuspensionModal.js

@@ -0,0 +1,112 @@
+"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 base_icons_1 = require("@paro.io/base-icons");
+const core_1 = require("@material-ui/core");
+const AccountSuspensionModal = ({ showSuspensionModal, onClose }) => {
+    return (react_1.default.createElement(core_1.Dialog, { open: showSuspensionModal, onClose: onClose, "aria-labelledby": "responsive-dialog-title", maxWidth: "sm", scroll: "paper" },
+        react_1.default.createElement("div", { className: "bg-[#0F172A] text-white mb-1 p-1 pl-4 absolute top-0 left-0 w-full flex flex-row justify-between items-center z-50" },
+            react_1.default.createElement("b", null, "Automated Suspension Process"),
+            react_1.default.createElement(core_1.IconButton, { onClick: () => onClose() },
+                react_1.default.createElement(base_icons_1.IconX, { className: "text-white" }))),
+        react_1.default.createElement("div", { className: "bg-white rounded-lg mt-14 max-h-[90vh] overflow-y-auto" },
+            react_1.default.createElement("div", { className: "p-6" },
+                react_1.default.createElement("div", { className: "mb-6" },
+                    react_1.default.createElement("div", { className: "bg-red-50 border border-red-200 rounded-lg p-4" },
+                        react_1.default.createElement("div", { className: "flex items-start" },
+                            react_1.default.createElement(base_icons_1.IconBriefcase, { className: "h-5 w-5 text-red-500 mt-0.5 mr-2 flex-shrink-0" }),
+                            react_1.default.createElement("div", null,
+                                react_1.default.createElement("p", { className: "font-medium text-red-800" }, "Critical Information"),
+                                react_1.default.createElement("p", { className: "text-sm text-red-700 mt-1" }, "Escalations require timely attention to maintain client relationships and project success. Multiple unresolved issues may result in account warnings and potential suspension."))))),
+                react_1.default.createElement("div", { className: "space-y-6" },
+                    react_1.default.createElement("div", { className: "relative" },
+                        react_1.default.createElement("div", { className: "absolute left-4 top-8 bottom-0 w-0.5 bg-gray-200" }),
+                        react_1.default.createElement("div", { className: "flex items-start" },
+                            react_1.default.createElement("div", { className: "bg-green-500 rounded-full p-2 mr-4 relative z-10" },
+                                react_1.default.createElement(base_icons_1.IconCheckCircle, { 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-green-800" }, "Level 1: Light Issues"),
+                                    react_1.default.createElement("div", { className: "text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full" }, "Coaching Only")),
+                                react_1.default.createElement("p", { className: "text-sm text-gray-600 mb-2" }, "Email coaching and guidance. No account restrictions."),
+                                react_1.default.createElement("div", { className: "text-xs text-gray-500" },
+                                    react_1.default.createElement("strong", null, "Examples:"),
+                                    " 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.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"),
+                                    react_1.default.createElement("div", { className: "text-xs bg-orange-100 text-orange-700 px-2 py-1 rounded-full" }, "3 Warnings System")),
+                                react_1.default.createElement("p", { className: "text-sm text-gray-600 mb-2" },
+                                    react_1.default.createElement("span", { className: "font-medium text-orange-800" }, "After 3 warnings: 30-day suspension"),
+                                    " + mandatory retraining before reinstatement"),
+                                react_1.default.createElement("div", { className: "text-xs text-gray-500" },
+                                    react_1.default.createElement("strong", null, "Examples:"),
+                                    " Poor client communication, missed project deadlines, quality concerns, repeated light violations"))),
+                        react_1.default.createElement("div", { className: "flex items-start" },
+                            react_1.default.createElement("div", { className: "bg-red-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("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-red-800" }, "Level 3: High Severity"),
+                                    react_1.default.createElement("div", { className: "text-xs bg-red-100 text-red-700 px-2 py-1 rounded-full" }, "2 Warnings System")),
+                                react_1.default.createElement("p", { className: "text-sm text-gray-600 mb-2" },
+                                    react_1.default.createElement("span", { className: "font-medium text-red-800" }, "After 2 warnings: 60-day suspension"),
+                                    " + comprehensive retraining required"),
+                                react_1.default.createElement("div", { className: "text-xs text-gray-500" },
+                                    react_1.default.createElement("strong", null, "Examples:"),
+                                    " Significant project failures, client relationship damage, contract violations, repeated medium violations"))),
+                        react_1.default.createElement("div", { className: "flex items-start" },
+                            react_1.default.createElement("div", { className: "bg-black rounded-full p-2 mr-4 relative z-10" },
+                                react_1.default.createElement(base_icons_1.IconX, { className: "h-5 w-5 text-white" })),
+                            react_1.default.createElement("div", { className: "flex-1" },
+                                react_1.default.createElement("div", { className: "flex justify-between items-start mb-2" },
+                                    react_1.default.createElement("h4", { className: "font-semibold text-gray-900" }, "Level 4: Critical Severity"),
+                                    react_1.default.createElement("div", { className: "text-xs bg-gray-800 text-white px-2 py-1 rounded-full" }, "One Time Offense")),
+                                react_1.default.createElement("p", { className: "text-sm text-gray-600 mb-2" },
+                                    react_1.default.createElement("span", { className: "font-medium text-gray-900" }, "Immediate permanent suspension and account removal")),
+                                react_1.default.createElement("div", { className: "text-xs text-gray-500" },
+                                    react_1.default.createElement("strong", null, "Examples:"),
+                                    " Project abandonment, terms of service violations, non-circumvention breaches, fraudulent activity, severe misconduct"))))),
+                react_1.default.createElement("div", { className: "mt-6 bg-blue-50 rounded-lg p-4" },
+                    react_1.default.createElement("h4", { className: "font-medium text-blue-900 mb-2" }, "Progressive Warning System"),
+                    react_1.default.createElement("div", { className: "space-y-3" },
+                        react_1.default.createElement("div", { className: "flex items-center text-sm" },
+                            react_1.default.createElement("div", { className: "w-3 h-3 bg-yellow-400 rounded-full mr-3" }),
+                            react_1.default.createElement("span", null,
+                                react_1.default.createElement("strong", null, "Medium (3 warnings):"),
+                                " Expert coaching and performance improvement plan")),
+                        react_1.default.createElement("div", { className: "flex items-center text-sm" },
+                            react_1.default.createElement("div", { className: "w-3 h-3 bg-orange-500 rounded-full mr-3" }),
+                            react_1.default.createElement("span", null,
+                                react_1.default.createElement("strong", null, "High (2 warnings):"),
+                                " Escalated coaching with enhanced monitoring")),
+                        react_1.default.createElement("div", { className: "flex items-center text-sm" },
+                            react_1.default.createElement("div", { className: "w-3 h-3 bg-red-500 rounded-full mr-3" }),
+                            react_1.default.createElement("span", null,
+                                react_1.default.createElement("strong", null, "Final warning:"),
+                                " Automatic suspension with mandatory training")),
+                        react_1.default.createElement("div", { className: "flex items-center text-sm" },
+                            react_1.default.createElement("div", { className: "w-3 h-3 bg-black rounded-full mr-3" }),
+                            react_1.default.createElement("span", null,
+                                react_1.default.createElement("strong", null, "Critical offense:"),
+                                " Immediate permanent account removal")),
+                        react_1.default.createElement("div", { className: "flex items-center text-sm" },
+                            react_1.default.createElement("div", { className: "w-3 h-3 bg-gray-400 rounded-full mr-3" }),
+                            react_1.default.createElement("span", null,
+                                react_1.default.createElement("strong", null, "Reset:"),
+                                " Warnings reset after 6 months of good standing")))),
+                react_1.default.createElement("div", { className: "mt-6 bg-gray-50 rounded-lg p-4" },
+                    react_1.default.createElement("h4", { className: "font-medium text-gray-900 mb-2" }, "Important Reminders"),
+                    react_1.default.createElement("ul", { className: "text-sm text-gray-600 space-y-1" },
+                        react_1.default.createElement("li", null, "\u2022 All escalations are tracked and contribute to your warning count"),
+                        react_1.default.createElement("li", null, "\u2022 Training completion is required before suspension can be lifted"),
+                        react_1.default.createElement("li", null, "\u2022 Warnings are cumulative across all severity levels"),
+                        react_1.default.createElement("li", null, "\u2022 All actions are logged and affect your expert rating")))))));
+};
+exports.default = AccountSuspensionModal;

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

@@ -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

@@ -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.d.ts

@@ -0,0 +1,6 @@
+declare const EscalationChat: ({ activeChatIssue, showEscalationChat, setShowEscalationChat }: {
+    activeChatIssue: any;
+    showEscalationChat: boolean;
+    setShowEscalationChat: (showEscalationChat: boolean) => void;
+}) => JSX.Element;
+export default EscalationChat;

package/lib/components/Escalations/EscalationChat.js

@@ -0,0 +1,90 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+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);
+    const fileInputRef = (0, react_1.useRef)(null);
+    const handleFileUpload = (event) => {
+        const files = Array.from(event.target.files);
+        setUploadFiles(prev => [...prev, ...files]);
+    };
+    const removeFile = (index) => {
+        setUploadFiles(prev => prev.filter((_, i) => i !== index));
+    };
+    return (react_1.default.createElement(core_1.Dialog, { open: showEscalationChat, onClose: () => setShowEscalationChat(false), maxWidth: 'sm' },
+        react_1.default.createElement(core_1.DialogTitle, null,
+            react_1.default.createElement("div", { className: "bg-[#B1BDD1] text-black mb-1 p-2 pl-4 absolute top-0 left-0 w-full flex flex-row justify-between items-center z-50" },
+                react_1.default.createElement("div", { className: "flex flex-col items-start" },
+                    react_1.default.createElement("div", { className: "flex flex-row items-center" },
+                        react_1.default.createElement("h1", { className: "text-md font-bold mr-2" },
+                            "Escalation Chat #",
+                            activeChatIssue.caseId),
+                        react_1.default.createElement(EscalationIssueCard_1.CustomTag, { label: activeChatIssue.status })),
+                    react_1.default.createElement("p", { className: "text-xs" },
+                        activeChatIssue.title,
+                        " - ",
+                        activeChatIssue.project)),
+                react_1.default.createElement("div", { className: "flex items-center space-x-4" },
+                    react_1.default.createElement(core_1.IconButton, { onClick: () => setShowEscalationChat(false) },
+                        react_1.default.createElement(base_icons_1.IconX, null))))),
+        react_1.default.createElement(core_1.DialogContent, null,
+            react_1.default.createElement("div", { className: "bg-white rounded-lg w-full overflow-hidden flex flex-col p-2 mt-12" },
+                react_1.default.createElement(DiscussionSection_1.DiscussionSection //update required
+                , { disputeId: '1', currentUser: {}, messages: [], onCreateMessage: (variables) => __awaiter(void 0, void 0, void 0, function* () {
+                        return Promise.resolve();
+                    }), isInternal: false }),
+                react_1.default.createElement("div", { className: "bg-white mt-2" },
+                    react_1.default.createElement("div", { className: "space-y-3" },
+                        react_1.default.createElement("div", { className: "flex items-center justify-between" },
+                            react_1.default.createElement("div", { className: "flex items-center space-x-2" },
+                                react_1.default.createElement("input", { id: "upload-file", type: "file", multiple: true, accept: ".pdf,.doc,.docx,.jpeg,.png,.gif,.csv", style: { display: 'none' }, ref: fileInputRef, onChange: handleFileUpload }),
+                                react_1.default.createElement(base_ui_1.Button, { label: "Attach Files", iconLeft: react_1.default.createElement(base_icons_1.IconPlus, { size: "sm" }), onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, color: "info", className: "mx-2", isLoading: uploadingFile }),
+                                uploadFiles.length > 0 && (react_1.default.createElement("div", { className: "text-sm text-gray-600" },
+                                    uploadFiles.length,
+                                    " file(s) selected"))),
+                            react_1.default.createElement("div", { className: "flex space-x-2" },
+                                react_1.default.createElement(base_ui_1.Button, { label: "cancel", onClick: () => setShowEscalationChat(false) }))),
+                        uploadFiles.length > 0 && (react_1.default.createElement("div", { className: "space-y-1" }, uploadFiles.map((file, index) => (react_1.default.createElement("div", { key: index, className: "flex items-center justify-between bg-gray-50 px-2 py-1 rounded text-sm" },
+                            react_1.default.createElement("span", null, file.name),
+                            react_1.default.createElement(core_1.IconButton, { onClick: () => removeFile(index) },
+                                react_1.default.createElement(base_icons_1.IconX, { size: "sm" })))))))))))));
+};
+exports.default = EscalationChat;

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

@@ -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

@@ -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.d.ts

@@ -0,0 +1,4 @@
+declare const EscalationReportBanner: ({ onReport }: {
+    onReport: () => void;
+}) => JSX.Element;
+export default EscalationReportBanner;

package/lib/components/Escalations/EscalationReportBanner.js

@@ -0,0 +1,20 @@
+"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 base_icons_1 = require("@paro.io/base-icons");
+const base_ui_1 = require("@paro.io/base-ui");
+const EscalationReportBanner = ({ onReport }) => {
+    return (react_1.default.createElement("div", { className: "bg-[#EF5360] rounded-lg p-2 mb-4 shadow-lg" },
+        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, { 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."))),
+            react_1.default.createElement(base_ui_1.Button, { label: "Report issue now", onClick: onReport, size: "sm", color: "danger", className: "bg-white hover:bg-warning text-danger-dark hover:text-white" }))));
+};
+exports.default = EscalationReportBanner;

package/lib/components/Escalations/EscalationRespondForm.d.ts

@@ -0,0 +1,6 @@
+declare const EscalationRespondForm: ({ goBack, selectedIssue, goHome }: {
+    goBack: () => void;
+    selectedIssue: any;
+    goHome: () => void;
+}) => JSX.Element;
+export default EscalationRespondForm;

package/lib/components/Escalations/EscalationRespondForm.js

@@ -0,0 +1,111 @@
+"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 });
+const react_1 = __importStar(require("react"));
+const base_icons_1 = require("@paro.io/base-icons");
+const base_ui_1 = require("@paro.io/base-ui");
+const responseTypes = [
+    {
+        label: "Acknowledge issue and provide resolution plan",
+        description: "Explain circumstances and apologize",
+        value: "Acknowledged",
+    },
+    {
+        label: "Dispute issue and provide counter-evidence",
+        description: "Challenge the client's concerns with documentation",
+        value: "Disputed",
+    },
+    {
+        label: "Request clarification",
+        description: "Ask for more details about the issue",
+        value: "Clarification",
+    },
+];
+const EscalationRespondForm = ({ goBack, selectedIssue, goHome }) => {
+    const [selectedType, setSelectedType] = (0, react_1.useState)(responseTypes[0].value);
+    const [responseInput, setResponseInput] = (0, react_1.useState)('');
+    const [uploadFiles, setUploadFiles] = (0, react_1.useState)([]);
+    const [uploadingFile, setUploadingFile] = (0, react_1.useState)(false);
+    const fileInputRef = (0, react_1.useRef)(null);
+    const handleFileUpload = (event) => {
+        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.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")),
+            react_1.default.createElement("div", { className: "p-4" },
+                react_1.default.createElement("div", { className: "space-y-4" },
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("div", { className: "space-y-3" }, responseTypes.map((type) => (react_1.default.createElement("label", { key: type.value, className: "flex items-start cursor-pointer" },
+                            react_1.default.createElement("input", { type: "radio", name: "responseType", className: "mt-1 mr-3", checked: selectedType === type.value, onChange: () => setSelectedType(type.value) }),
+                            react_1.default.createElement("div", { className: selectedType === type.value
+                                    ? "bg-gray-700 text-white px-3 py-2 rounded-md text-sm font-medium"
+                                    : "border border-gray-300 text-gray-700 px-3 py-2 rounded-md text-sm font-medium" },
+                                react_1.default.createElement("div", null,
+                                    selectedType === type.value ? "✓ " : "",
+                                    type.label),
+                                react_1.default.createElement("div", { className: selectedType === type.value
+                                        ? "text-gray-300 text-xs mt-1"
+                                        : "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 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" },
+                            react_1.default.createElement("p", { className: "text-sm text-gray-600" }, "Upload any supporting documentation"),
+                            react_1.default.createElement("input", { id: "upload-file", type: "file", multiple: true, accept: ".pdf,.doc,.docx,.jpeg,.png,.gif,.csv", style: { display: 'none' }, ref: fileInputRef, onChange: handleFileUpload }),
+                            react_1.default.createElement(base_ui_1.Button, { label: "Attach Files", iconLeft: react_1.default.createElement(base_icons_1.IconPlus, { size: "sm" }), onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, color: "info", className: "mx-2", isLoading: uploadingFile, size: "sm" }),
+                            uploadFiles.length > 0 && (react_1.default.createElement("div", { className: "text-sm text-gray-600 mt-2" },
+                                react_1.default.createElement("ul", { className: "list-disc list-inside" }, uploadFiles.map((f) => (react_1.default.createElement("li", { key: f.name }, f.name)))))))),
+                    react_1.default.createElement("div", { className: "bg-blue-50 border border-blue-200 rounded-md p-3" },
+                        react_1.default.createElement("div", { className: "flex items-center" },
+                            react_1.default.createElement(base_icons_1.IconInfoCircle, { size: "md" }),
+                            react_1.default.createElement("div", { className: "text-sm text-blue-800 ml-2" },
+                                react_1.default.createElement("p", { className: "font-medium" }, "Response Guidelines"),
+                                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: submitResponse })))))));
+};
+exports.default = EscalationRespondForm;

package/lib/components/Escalations/EscalationSubmitForm.d.ts

@@ -0,0 +1,9 @@
+interface EscalationSubmitProps {
+    goBack: () => void;
+    goHome: () => void;
+    experts: any[];
+    projects: any[];
+    isExpert: boolean;
+}
+declare const EscalationSubmitForm: ({ goBack, goHome, experts, projects, isExpert }: EscalationSubmitProps) => JSX.Element;
+export default EscalationSubmitForm;