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

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.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-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/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,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 __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 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(base_ui_1.Tag, { label: activeChatIssue.status, color: "info" })),
+                    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/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, null)),
+                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,103 @@
+"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: "acknowledge",
+    },
+    {
+        label: "Dispute issue and provide counter-evidence",
+        description: "Challenge the client's concerns with documentation",
+        value: "dispute",
+    },
+    {
+        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]);
+    };
+    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("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 client's concerns...", 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: goHome })))))));
+};
+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;

package/lib/components/Escalations/EscalationSubmitForm.js

@@ -0,0 +1,207 @@
+"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 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 LogTimeModalAuthenticated_1 = require("../ProjectCard/LogTimeModalAuthenticated");
+const dayjs_1 = __importDefault(require("dayjs"));
+const issueTypeOptions = [
+    { value: 'Communication Issues', 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: 'Other', label: 'Other' },
+];
+const EscalationSubmitForm = ({ goBack, goHome, experts, projects, isExpert = false }) => {
+    const [isChecked, setIsChecked] = (0, react_1.useState)(false);
+    const [problemInput, setProblemInput] = (0, react_1.useState)('');
+    const [outcomeInput, setOutcomeInput] = (0, react_1.useState)('');
+    const [uploadFiles, setUploadFiles] = (0, react_1.useState)([]);
+    const [uploadingFile, setUploadingFile] = (0, react_1.useState)(false);
+    const [expertOptions, setExpertOptions] = (0, react_1.useState)([]);
+    const [selectedExpert, setSelectedExpert] = (0, react_1.useState)(null);
+    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 [startDate, setStartDate] = (0, react_1.useState)(undefined);
+    const [isDateInvalid, setIsDateInvalid] = (0, react_1.useState)(false);
+    const fileInputRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (experts && experts.length > 0) {
+            const options = experts.map((expert) => ({
+                label: isExpert ? expert.name : expert.freelancerName,
+                value: isExpert ? expert.id : expert.freelancerId,
+            }));
+            setExpertOptions(options);
+        }
+    }, [experts]);
+    (0, react_1.useEffect)(() => {
+        if (projects && projects.length > 0) {
+            const options = projects
+                .filter((p) => {
+                if (isExpert) {
+                    return p.client.id === Number(selectedExpert);
+                }
+                else {
+                    return p.freelancer.id === Number(selectedExpert);
+                }
+            })
+                .map((p) => ({
+                label: isExpert ? p.name : p.name,
+                value: isExpert ? p : p,
+            }));
+            setProjectOptions(options);
+        }
+    }, [projects, selectedExpert]);
+    const handleFileUpload = (event) => {
+        const files = Array.from(event.target.files);
+        setUploadFiles(prev => [...prev, ...files]);
+    };
+    const isFormValid = () => {
+        const requiredProjectSelection = isExpert || (!isExpert && selectedProjects.length > 0);
+        return (selectedExpert !== null &&
+            issueType !== '' &&
+            priority !== '' &&
+            problemInput.trim() !== '' &&
+            outcomeInput.trim() !== '' &&
+            isChecked &&
+            startDate !== undefined &&
+            requiredProjectSelection);
+    };
+    const handleSubmit = () => {
+        if (!isFormValid())
+            return;
+        const formData = {
+            selectedExpert,
+            selectedProjects,
+            issueType,
+            priority,
+            startDate,
+            problemDescription: problemInput,
+            expectedOutcome: outcomeInput,
+            supportingDocs: uploadFiles.map(f => f.name),
+        };
+        console.log('Escalation Submitted:', formData);
+        // Redirect or perform additional logic
+        goHome();
+    };
+    const validateDate = (date) => {
+        const minDate = LogTimeModalAuthenticated_1.constants.MIN_DATE;
+        const maxDate = new Date();
+        const isValid = date ? date.setHours(0, 0, 0, 0) < minDate.setHours(0, 0, 0, 0) || date.setHours(0, 0, 0, 0) > maxDate.setHours(0, 0, 0, 0) : true;
+        setIsDateInvalid(isValid);
+        return !isValid;
+    };
+    return (react_1.default.createElement("div", { className: 'w-full max-w-full' },
+        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" }, "Report Issue with Your Expert"),
+            react_1.default.createElement("p", { className: "text-gray-600 mt-1" }, "Provide details about the issue you're experiencing and we'll resolve it within 4-8 hours")),
+        react_1.default.createElement("div", { className: "bg-red-50 border border-red-200 rounded-lg p-4 mb-6" },
+            react_1.default.createElement("div", { className: "flex items-start" },
+                react_1.default.createElement("span", { className: "mr-3" }, "!"),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("p", { className: "font-medium text-red-800" }, "Common Issues We Can Help With"),
+                    react_1.default.createElement("ul", { className: "mt-1 text-sm text-red-700 list-disc list-inside space-y-1" },
+                        react_1.default.createElement("li", null, `Communication delays (${isExpert ? 'client' : 'expert'} not responding)`),
+                        !isExpert && react_1.default.createElement("li", null, "Missed deadlines or project delays"),
+                        !isExpert && react_1.default.createElement("li", null, "Quality concerns with deliverables"),
+                        react_1.default.createElement("li", null, "Scope changes or unexpected requests"),
+                        react_1.default.createElement("li", null, "Billing or payment disputes"))))),
+        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" }, "Issue Details")),
+            react_1.default.createElement("div", { className: "p-4 space-y-4" },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, `Which ${isExpert ? 'client' : 'expert'} are you experiencing the issue with?`),
+                    react_1.default.createElement(core_1.Select, { fullWidth: true, value: selectedExpert !== null && selectedExpert !== void 0 ? selectedExpert : '', onChange: e => setSelectedExpert(e.target.value === '' ? null : Number(e.target.value)), displayEmpty: true, variant: "outlined", placeholder: `Select a ${isExpert ? 'Client' : 'Expert'}` },
+                        react_1.default.createElement(core_1.MenuItem, { disabled: true, value: "" },
+                            react_1.default.createElement("em", null, `Select a ${isExpert ? 'Client' : 'Expert'}`)),
+                        expertOptions.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" }, "Which Project(s)?"),
+                    react_1.default.createElement(core_1.Select, { multiple: true, fullWidth: true, value: selectedProjects, onChange: (e) => {
+                            const value = e.target.value;
+                            setSelectedProjects(Array.isArray(value) ? value : [value]);
+                        }, variant: "outlined", displayEmpty: true, renderValue: (selected) => {
+                            if (selected.length === 0) {
+                                return react_1.default.createElement("span", { className: "text-gray-400" }, "Select project(s)");
+                            }
+                            return projectOptions
+                                .filter(opt => selected.includes(opt.value))
+                                .map(opt => opt.label)
+                                .join(', ');
+                        }, placeholder: `Select a Project(s)` },
+                        react_1.default.createElement(core_1.MenuItem, { disabled: true, value: "" },
+                            react_1.default.createElement("em", null, "Select a Project(s)...")),
+                        projectOptions.map(option => (react_1.default.createElement(core_1.MenuItem, { key: option.value, value: option.value }, option.label))))),
+                react_1.default.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4" },
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "Issue Type"),
+                        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))))),
+                    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(core_1.MenuItem, { disabled: true, value: "" },
+                                react_1.default.createElement("em", null, "Select priority...")),
+                            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"),
+                            react_1.default.createElement(core_1.MenuItem, { value: "Low" }, "Low")))),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "When did this issue start?"),
+                    react_1.default.createElement(LogTimeModalAuthenticated_1.SelectDate, { timeLogDate: startDate, setTimeLogDate: setStartDate, isInvalid: false, setIsDateInvalid: setIsDateInvalid, validateDate: validateDate, maxDate: (0, dayjs_1.default)(new Date()).format("MM-DD-YYYY") })),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("label", { className: "block text-sm font-medium text-gray-700 mb-1" }, "What's the problem?"),
+                    react_1.default.createElement(base_ui_1.Input, { type: "text", value: problemInput, placeholder: "Describe the issue...", onChange: (e) => setProblemInput(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" }, "What outcome are you looking for?"),
+                    react_1.default.createElement(base_ui_1.Input, { type: "text", value: outcomeInput, placeholder: "What would you like to see happen?", onChange: (e) => setOutcomeInput(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 screenshots, emails, or documents"),
+                        react_1.default.createElement("input", { ref: fileInputRef, type: "file", multiple: true, accept: ".pdf,.doc,.docx,.jpeg,.png,.gif,.csv", hidden: true, 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", isLoading: uploadingFile, size: "sm" }),
+                        uploadFiles.length > 0 && (react_1.default.createElement("ul", { className: "mt-2 text-sm text-gray-600 list-disc list-inside" }, uploadFiles.map(f => react_1.default.createElement("li", { key: f.name }, f.name)))))),
+                react_1.default.createElement("div", { className: "bg-[#EFF6FF] p-3 rounded" },
+                    react_1.default.createElement(base_ui_1.Checkbox, { id: "checkbox-1", label: `I understand this will notify my ${isExpert ? 'client' : 'expert'} and the Paro support team`, name: "acknowledge", isChecked: isChecked, onChange: () => setIsChecked(prev => !prev) })),
+                react_1.default.createElement("div", { className: "flex justify-end space-x-3 pt-4" },
+                    react_1.default.createElement(base_ui_1.Button, { label: "Cancel", onClick: goBack }),
+                    react_1.default.createElement(base_ui_1.Button, { label: "Submit issue", onClick: handleSubmit, color: "primary", disabled: !isFormValid() }))))));
+};
+exports.default = EscalationSubmitForm;

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

@@ -0,0 +1,9 @@
+interface EscalationTabProps {
+    activeTab: string;
+    setActiveTab: (activeTab: string) => void;
+    activeIssues: number;
+    inProgressIssues: number;
+    resolvedIssues: number;
+}
+declare const EscalationTabs: ({ activeTab, setActiveTab, activeIssues, inProgressIssues, resolvedIssues, }: EscalationTabProps) => JSX.Element;
+export default EscalationTabs;

package/lib/components/Escalations/EscalationTabs.js

@@ -0,0 +1,30 @@
+"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 EscalationTabs = ({ activeTab, setActiveTab, activeIssues = 0, inProgressIssues = 0, resolvedIssues = 0, }) => {
+    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-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" }),
+                "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("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-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" }),
+                "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("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-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" }),
+                "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)))));
+};
+exports.default = EscalationTabs;