@paro.io/expert-shared-components 1.11.2 → 1.11.3

package/lib/components/DiscussionThread/DiscussionThread.d.ts

@@ -8,7 +8,6 @@ interface ChatMessages {
         firstName: string;
         lastName: string;
         userTypeId: number;
-        avatar: string | null;
     };
     messageText: string;
     visibility: "ALL" | "INTERNAL_ONLY" | "CLIENT_INTERNAL_ONLY" | "EXPERT_INTERNAL_ONLY";
@@ -20,6 +19,7 @@ interface DiscussionThreadProps {
     currentUser: any;
     initialThreads: ChatMessages[] | [];
     createDisputeChatMessage: any;
+    disputeId: number;
 }
-export declare const DiscussionThread: ({ currentUser, initialThreads, createDisputeChatMessage, }: DiscussionThreadProps) => React.JSX.Element;
+export declare const DiscussionThread: ({ currentUser, initialThreads, createDisputeChatMessage, disputeId, }: DiscussionThreadProps) => React.JSX.Element;
 export {};

package/lib/components/DiscussionThread/DiscussionThread.js

@@ -22,52 +22,75 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 });
 exports.DiscussionThread = void 0;
 const react_1 = __importStar(require("react"));
 const base_ui_1 = require("@paro.io/base-ui");
-const DiscussionThread = ({ currentUser, initialThreads, createDisputeChatMessage, }) => {
+const DiscussionThread = ({ currentUser, initialThreads, createDisputeChatMessage, disputeId, }) => {
     const [messages, setMessages] = (0, react_1.useState)(initialThreads);
+    const [sending, setSending] = (0, react_1.useState)(false);
     const [comment, setComment] = (0, react_1.useState)("");
     const threadsEndRef = (0, react_1.useRef)(null);
-    const [invalid, setInvalid] = (0, react_1.useState)(false);
+    const didMountRef = (0, react_1.useRef)(false);
     // Auto scroll to bottom when messages change
     (0, react_1.useEffect)(() => {
-        var _a;
-        (_a = threadsEndRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
-    }, [messages]);
-    const handleSend = () => {
-        setInvalid(false);
-        if (comment) {
-            createDisputeChatMessage();
-            handleSendMessage();
-            setComment("");
+        if (didMountRef.current) {
+            if (threadsEndRef.current) {
+                threadsEndRef.current.scrollIntoView({ behavior: "smooth" });
+            }
         }
         else {
-            setInvalid(true);
+            didMountRef.current = true;
         }
-    };
-    const handleSendMessage = () => {
-        const newMsg = {
-            messageId: 0, // update required
-            disputeId: messages[0].disputeId,
-            sender: {
-                id: currentUser.id,
-                email: currentUser.email,
-                firstName: currentUser.name.split(' ')[0] || '',
-                lastName: currentUser.name.split(' ')[1] || '',
-                userTypeId: currentUser.userTypeId,
-                avatar: currentUser.avatar,
-            },
-            messageText: comment,
-            visibility: "ALL",
-            createdAt: new Date().toISOString(),
-            updatedAt: new Date().toISOString(),
-            isDeleted: false,
-        };
-        setMessages([...messages, newMsg]);
-        setComment("");
-    };
+    }, [messages]);
+    const handleSend = () => __awaiter(void 0, void 0, void 0, function* () {
+        setSending(true);
+        try {
+            if (comment) {
+                const chatInput = {
+                    disputeId: disputeId,
+                    messageText: comment,
+                    senderId: currentUser === null || currentUser === void 0 ? void 0 : currentUser.userId,
+                    visibility: "ALL"
+                };
+                yield createDisputeChatMessage({
+                    variables: {
+                        input: chatInput
+                    }
+                }).then((res) => {
+                    const newMsg = {
+                        messageId: res.data.createDisputeChatMessage.messageId,
+                        disputeId: res.data.createDisputeChatMessage.disputeId,
+                        sender: res.data.createDisputeChatMessage.sender,
+                        messageText: res.data.createDisputeChatMessage.messageText,
+                        visibility: res.data.createDisputeChatMessage.visibility,
+                        createdAt: res.data.createDisputeChatMessage.createdAt,
+                        updatedAt: res.data.createDisputeChatMessage.updatedAt,
+                        isDeleted: res.data.createDisputeChatMessage.isDeleted,
+                    };
+                    setMessages([...messages, newMsg]);
+                    setComment("");
+                }).catch((error) => {
+                    console.error("Error creating dispute chat message:", error);
+                });
+            }
+        }
+        catch (error) {
+            console.error("Error sending message:", error);
+        }
+        finally {
+            setSending(false);
+        }
+    });
     const handleKeyPress = (e) => {
         if (e.key === "Enter" && !e.shiftKey) {
             e.preventDefault();
@@ -87,17 +110,17 @@ const DiscussionThread = ({ currentUser, initialThreads, createDisputeChatMessag
             .toUpperCase()
             .substring(0, 2);
     };
-    return (react_1.default.createElement("div", { className: "flex flex-col w-full rounded-lg bg-white px-4 h-auto" },
+    return (react_1.default.createElement("div", { className: "flex flex-col w-full rounded-lg bg-white h-auto" },
         react_1.default.createElement("div", { className: `py-3 flex items-center` },
             react_1.default.createElement("div", { className: "font-semibold text-gray-800 capitalize" }, "Discussion Thread")),
-        react_1.default.createElement("div", { className: "flex-1 max-h-[30vh] overflow-y-auto border rounded-md p-2" },
+        messages.length ? react_1.default.createElement("div", { className: "flex-1 max-h-[30vh] overflow-y-auto border rounded-md p-2" },
             messages.map((message) => {
-                var _a;
-                const isCurrentUser = currentUser.id === message.sender.id;
+                const isCurrentUser = currentUser.userId === message.sender.id;
                 const userName = message.sender.firstName + message.sender.lastName;
                 const timestamp = message.updatedAt ? message.updatedAt : message.createdAt;
                 return (react_1.default.createElement("div", { key: message.messageId, className: `flex mb-4 ${isCurrentUser ? 'justify-end' : 'justify-start'}` },
-                    !isCurrentUser && (react_1.default.createElement("div", { className: "flex-shrink-0 mr-2" }, ((_a = message.sender) === null || _a === void 0 ? void 0 : _a.avatar) ? (react_1.default.createElement("img", { src: message.sender.avatar, alt: userName, className: "h-8 w-8 rounded-full" })) : (react_1.default.createElement("div", { className: "h-8 w-8 rounded-full bg-gray-400 flex items-center justify-center text-white text-xs font-medium bg-[#5f4508]" }, getInitials(userName || 'User'))))),
+                    !isCurrentUser && (react_1.default.createElement("div", { className: "flex-shrink-0 mr-2" },
+                        react_1.default.createElement("div", { className: "h-8 w-8 rounded-full bg-gray-400 flex items-center justify-center text-white text-xs font-medium bg-[#5f4508]" }, getInitials(userName || 'User')))),
                     react_1.default.createElement("div", { className: `ml-1 min-w-min max-w-[75%] break-words` },
                         !isCurrentUser && (react_1.default.createElement("div", { className: "text-xs text-gray-500 font-medium mb-1" }, userName || 'Unknown User')),
                         react_1.default.createElement("div", { className: `px-4 py-2 rounded-lg ${isCurrentUser
@@ -105,10 +128,10 @@ const DiscussionThread = ({ currentUser, initialThreads, createDisputeChatMessag
                                 : 'bg-[#f9d8a7] border rounded-bl-none'}` }, message.messageText),
                         react_1.default.createElement("div", { className: "text-xs text-gray-500 mt-1" }, formatTime(timestamp)))));
             }),
-            react_1.default.createElement("div", { ref: threadsEndRef })),
+            react_1.default.createElement("div", { ref: threadsEndRef })) : react_1.default.createElement(react_1.default.Fragment, null),
         react_1.default.createElement("div", { className: "py-3" },
             react_1.default.createElement("div", { className: "flex items-center" },
                 react_1.default.createElement("textarea", { value: comment, onChange: (e) => setComment(e.target.value), onKeyDown: handleKeyPress, placeholder: "Type your message here...", className: "flex-1 border rounded-lg px-3 py-2 resize-none focus:outline-none focus:ring-2 focus:ring-blue-500", rows: 1 }),
-                react_1.default.createElement(base_ui_1.Button, { label: "Send", onClick: handleSend, disabled: !comment.trim(), color: "primary", className: "ml-2 px-4 py-2" })))));
+                react_1.default.createElement(base_ui_1.Button, { label: "Send", onClick: handleSend, disabled: !comment.trim(), isLoading: sending, color: "primary", className: "ml-2 px-4 py-2" })))));
 };
 exports.DiscussionThread = DiscussionThread;

package/lib/components/Invoices/InvoiceCard.d.ts

@@ -1,5 +1,9 @@
-export declare const InvoiceCard: ({ clientInvoice, createDisputeChatMessage, user }: {
-    clientInvoice: any;
+interface InvoiceCardProps {
+    clientInvoice?: any;
     createDisputeChatMessage: any;
     user: any;
-}) => JSX.Element;
+    chatMessages: any[];
+    updateClientInvoiceMutation: any;
+}
+export declare const InvoiceCard: ({ clientInvoice, createDisputeChatMessage, user, chatMessages, updateClientInvoiceMutation }: InvoiceCardProps) => JSX.Element;
+export {};

package/lib/components/Invoices/InvoiceCard.js

@@ -22,6 +22,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InvoiceCard = void 0;
 const react_1 = __importStar(require("react"));
@@ -30,6 +42,8 @@ const base_ui_2 = require("@paro.io/base-ui");
 const core_1 = require("@material-ui/core");
 const base_icons_1 = require("@paro.io/base-icons");
 const DiscussionThread_1 = require("../DiscussionThread");
+const dayjs_1 = __importDefault(require("dayjs"));
+const utils_1 = require("../shared/utils");
 const useStyles = (0, core_1.makeStyles)((theme) => ({
     root: {
         width: "100%",
@@ -80,6 +94,9 @@ const ACCEPTED_FILE_TYPES = [
     'application/pdf',
     'application/msword',
     'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    'image/jpeg',
+    'image/png',
+    'text/csv',
 ];
 const validateFileUpload = (file) => {
     if (!file) {
@@ -88,18 +105,22 @@ const validateFileUpload = (file) => {
     if (!ACCEPTED_FILE_TYPES.includes(file.type)) {
         return false;
     }
-    if (file.size > 5242880) { //5MB size
-        return false;
-    }
     return true;
 };
-const InvoiceCard = ({ clientInvoice, createDisputeChatMessage, user }) => {
+const InvoiceCard = ({ clientInvoice, createDisputeChatMessage, user, chatMessages, updateClientInvoiceMutation }) => {
+    var _a, _b, _c, _d, _e, _f;
     const [expandRow, setExpandRow] = (0, react_1.useState)(null);
     const classes = useStyles();
-    const [projects, setProjects] = (0, react_1.useState)(clientInvoice.disputeProjects);
+    const [projects, setProjects] = (0, react_1.useState)(clientInvoice === null || clientInvoice === void 0 ? void 0 : clientInvoice.disputeProjects);
     const [editingRowId, setEditingRowId] = (0, react_1.useState)(null);
     const [editedExplanation, setEditedExplanation] = (0, react_1.useState)('');
-    const [discussion, setDiscussion] = (0, react_1.useState)('');
+    const [updatedDispute, setUpdateDispute] = (0, react_1.useState)(false);
+    const [updatingDispute, setUpdatingDispute] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (JSON.stringify(clientInvoice === null || clientInvoice === void 0 ? void 0 : clientInvoice.disputeProjects) !== JSON.stringify(projects)) {
+            setUpdateDispute(true);
+        }
+    }, [projects]);
     const fileInputRef = (0, react_1.useRef)(null);
     const handleChange = (e, field) => {
         const updatedProject = field === "clientDocumentLinks" ? projects.map((project) => {
@@ -127,32 +148,68 @@ const InvoiceCard = ({ clientInvoice, createDisputeChatMessage, user }) => {
             fileInputRef.current.value = '';
         }
     };
-    return (react_1.default.createElement(base_ui_1.Card, { className: `mx-2 my-4 md:mx-8 flex md:flex items-center justify-between rounded flex-col` },
-        react_1.default.createElement("div", { key: clientInvoice.invoice.id, className: "bg-[#0F172A] text-white mb-1 p-4 relative top-0 left-0 w-full rounded flex flex-row justify-evenly" },
+    const handleEditExplanation = (projectId) => __awaiter(void 0, void 0, void 0, function* () {
+        setProjects((prev) => prev.map((p) => p.projectId === projectId
+            ? Object.assign(Object.assign({}, p), { clientExplanation: editedExplanation }) : p));
+        setEditingRowId(null);
+    });
+    const handleSubmitDispute = () => __awaiter(void 0, void 0, void 0, function* () {
+        setUpdatingDispute(true);
+        try {
+            yield updateClientInvoiceMutation({
+                variables: {
+                    input: {
+                        disputeId: projects[0].id,
+                        projectDisputes: projects.map((project) => ({
+                            projectId: project.projectId,
+                            disputeReasonCode: project.disputeReasonCode,
+                            disputeType: project.disputeType,
+                            disputeHours: project.disputeHours,
+                            disputeAmount: project.disputeAmount,
+                            clientExplanation: project.clientExplanation,
+                            clientDocumentLinks: project.clientDocumentLinks,
+                        })),
+                    }
+                }
+            }).then(() => {
+                (0, utils_1.showToast)('success', 'Dispute updation successfull!');
+            });
+        }
+        catch (error) {
+            console.error("Failed to update dispute", error);
+            (0, utils_1.showToast)('warning', 'Failed to update dispute');
+        }
+        finally {
+            setUpdatingDispute(false);
+            setUpdateDispute(false);
+        }
+    });
+    return (react_1.default.createElement(base_ui_1.Card, { className: `mx-1 my-4 md:mx-8 flex md:flex items-center justify-between rounded flex-col` },
+        react_1.default.createElement("div", { key: (_a = clientInvoice === null || clientInvoice === void 0 ? void 0 : clientInvoice.invoice) === null || _a === void 0 ? void 0 : _a.id, className: "bg-[#0F172A] text-white mb-1 p-4 relative top-0 left-0 w-full rounded flex flex-row justify-between" },
             react_1.default.createElement("b", null,
-                "Dispute Invoice #",
-                clientInvoice.invoice.id),
+                "Dispute Invoice #", (_b = clientInvoice === null || clientInvoice === void 0 ? void 0 : clientInvoice.invoice) === null || _b === void 0 ? void 0 :
+                _b.id),
             react_1.default.createElement("p", null,
-                "Disputed: ",
+                "Dispute Date: ", clientInvoice === null || clientInvoice === void 0 ? void 0 :
                 clientInvoice.disputeDate),
             react_1.default.createElement("p", null,
-                "Invoice Date: ",
-                clientInvoice.invoice.dateGenerated)),
-        react_1.default.createElement("div", { className: "flex flex-row justify-start items-center gap-2" },
-            clientInvoice && // for in progress
-                react_1.default.createElement(base_ui_1.Tag, { color: "warning", label: "In Progress", variant: "subtle" }),
-            clientInvoice && // for resolved
-                react_1.default.createElement(base_ui_1.Tag, { color: "success", label: "Resolved", variant: "subtle" }),
-            clientInvoice && // for submitted
-                react_1.default.createElement(base_ui_1.Tag, { color: "danger", label: "Submitted", variant: "subtle" }),
-            clientInvoice && // for acion taken
-                react_1.default.createElement(base_ui_1.Tag, { color: "success", label: "Invoice reduced", variant: "subtle" }),
-            clientInvoice && // for editable upto 
-                react_1.default.createElement(base_ui_1.Tag, { color: "warning", label: "Editable until May 30", variant: "subtle" }),
-            clientInvoice && // for under review 
-                react_1.default.createElement(base_ui_1.Tag, { color: "info", label: "Under Review", variant: "subtle" }),
-            react_1.default.createElement("div", { className: "flex ml-2 items-center" }, "Last updated: date")),
+                "Invoice Date: ", (_c = clientInvoice === null || clientInvoice === void 0 ? void 0 : clientInvoice.invoice) === null || _c === void 0 ? void 0 :
+                _c.dateGenerated),
+            react_1.default.createElement("p", null,
+                "Expert Name: ",
+                ((_d = clientInvoice === null || clientInvoice === void 0 ? void 0 : clientInvoice.freelancer) === null || _d === void 0 ? void 0 : _d.firstName) + " " + ((_e = clientInvoice === null || clientInvoice === void 0 ? void 0 : clientInvoice.freelancer) === null || _e === void 0 ? void 0 : _e.lastName))),
         react_1.default.createElement("div", { className: "w-[95%] m-2" },
+            react_1.default.createElement("div", { className: "flex flex-row justify-start items-center gap-4 mr-auto mb-2" },
+                react_1.default.createElement("div", null,
+                    (clientInvoice === null || clientInvoice === void 0 ? void 0 : clientInvoice.status) === 'InProgress' &&
+                        react_1.default.createElement(base_ui_1.Tag, { color: "warning", label: "In Progress", variant: "subtle" }),
+                    (clientInvoice === null || clientInvoice === void 0 ? void 0 : clientInvoice.status) === 'Resolved' &&
+                        react_1.default.createElement(base_ui_1.Tag, { color: "success", label: "Resolved", variant: "subtle" }),
+                    (clientInvoice === null || clientInvoice === void 0 ? void 0 : clientInvoice.status) === 'UnderReview' &&
+                        react_1.default.createElement(base_ui_1.Tag, { color: "info", label: "Under Review", variant: "subtle" })),
+                react_1.default.createElement("div", { className: "flex items-center" },
+                    "Last updated: ",
+                    (0, dayjs_1.default)(clientInvoice === null || clientInvoice === void 0 ? void 0 : clientInvoice.disputeUpdatedDate).format("YYYY-MM-DD"))),
             react_1.default.createElement(core_1.Table, { className: classes.table, "aria-labelledby": "tableTitle", size: 'medium', "aria-label": "enhanced table" },
                 react_1.default.createElement(core_1.TableHead, { className: classes.tableHead },
                     react_1.default.createElement(core_1.TableRow, null,
@@ -161,51 +218,46 @@ const InvoiceCard = ({ clientInvoice, createDisputeChatMessage, user }) => {
                         }),
                         react_1.default.createElement(core_1.TableCell, { className: classes.tableCell }))), projects === null || projects === void 0 ? void 0 :
                 projects.map((row) => {
-                    var _a, _b;
-                    return (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(core_1.TableRow, { key: row.projectId },
-                            react_1.default.createElement(core_1.TableCell, { align: "left", className: classes.tableCell }, (_a = row.project) === null || _a === void 0 ? void 0 : _a.name),
+                    var _a;
+                    return (react_1.default.createElement(react_1.default.Fragment, { key: row.projectId },
+                        react_1.default.createElement(core_1.TableRow, null,
+                            react_1.default.createElement(core_1.TableCell, { align: "left", className: classes.tableCell }, ((_a = row.project) === null || _a === void 0 ? void 0 : _a.name) || "N/A"),
                             react_1.default.createElement(core_1.TableCell, { align: "left", className: classes.tableCell }, row.disputeType),
-                            react_1.default.createElement(core_1.TableCell, { align: "left", className: classes.tableCell }, row.hours),
+                            react_1.default.createElement(core_1.TableCell, { align: "left", className: classes.tableCell }, row.disputeHours),
                             react_1.default.createElement(core_1.TableCell, { align: "left", className: classes.tableCell }, row.disputeAmount),
                             react_1.default.createElement(core_1.TableCell, { align: "left", className: classes.tableCell }, row.disputeReasonCode),
                             react_1.default.createElement(core_1.TableCell, { align: "left", className: classes.tableCell },
-                                react_1.default.createElement(core_1.IconButton, { onClick: () => { setExpandRow(expandRow === row.projectId ? null : row.projectId); } }, expandRow === row.projectId ? react_1.default.createElement(base_icons_1.IconChevronUp, null) : react_1.default.createElement(base_icons_1.IconChevronDown, null)))),
-                        expandRow &&
-                            react_1.default.createElement(core_1.TableRow, null,
-                                react_1.default.createElement(core_1.TableCell, { colSpan: headCells.length + 1, style: { paddingBottom: 0, paddingTop: 0 } },
-                                    react_1.default.createElement(core_1.Collapse, { in: expandRow === row.projectId, timeout: "auto", unmountOnExit: true },
-                                        react_1.default.createElement(react_1.default.Fragment, null,
-                                            react_1.default.createElement(base_ui_1.Card, { className: `bg-[#F8F9FA] m-2 md:mx-8 flex md:flex items-start justify-between rounded flex-col w-[95%] p-6` },
-                                                react_1.default.createElement("b", { className: "mb-2 flex flex-row justify-start items-center" },
-                                                    "Explanation:",
-                                                    editingRowId === row.projectId ? (react_1.default.createElement(react_1.default.Fragment, null,
-                                                        react_1.default.createElement(base_ui_2.Input, { label: "", type: "text", className: "w-96 mx-4 overflow-ellipsis", value: editedExplanation, onChange: (e) => setEditedExplanation(e.target.value), placeholder: "Please provide an explanation", isInvalid: !editedExplanation, isInvalidText: "Please provide an explanation" }),
-                                                        react_1.default.createElement(base_ui_2.Button, { label: "Save", size: "md", color: "success", className: "ml-2 mt-1", onClick: () => {
-                                                                setProjects((prev) => prev.map((p) => p.projectId === row.projectId
-                                                                    ? Object.assign(Object.assign({}, p), { clientExplanation: editedExplanation }) : p));
-                                                                setEditingRowId(null);
-                                                            } }))) : (react_1.default.createElement(base_ui_2.Button, { label: "Edit", iconLeft: react_1.default.createElement(base_icons_1.IconPencil, { size: 'sm' }), onClick: () => {
-                                                            setEditedExplanation(row.clientExplanation);
-                                                            setEditingRowId(row.projectId);
-                                                        }, size: "sm", color: "info", className: "ml-6" }))),
-                                                react_1.default.createElement("p", null, row.clientExplanation),
-                                                react_1.default.createElement("b", { className: "flex flex-row flex-wrap justify-start items-center mt-2" },
-                                                    "Supporting Documents:",
-                                                    react_1.default.createElement("input", { id: "upload-file", type: "file", multiple: true, accept: ".pdf,.doc,.docx", style: { display: 'none' }, ref: fileInputRef, onChange: handleUpload }),
-                                                    react_1.default.createElement(base_ui_2.Button, { label: "Add File", iconLeft: react_1.default.createElement(base_icons_1.IconPlus, { size: 'sm' }), onClick: () => { fileInputRef.current && fileInputRef.current.click(); }, size: 'sm', color: "info", className: "mx-2" }),
-                                                    row.clientDocumentLinks && ((_b = row.clientDocumentLinks) === null || _b === void 0 ? void 0 : _b.map((f) => {
-                                                        return react_1.default.createElement("div", { className: "mx-2" },
-                                                            react_1.default.createElement(base_ui_1.Tag, { variant: "subtle", color: "success", label: f, iconRight: react_1.default.createElement(base_icons_1.IconXCircle, null), onClick: () => {
-                                                                    const updatedFiles = projects.map((p) => {
-                                                                        const updatedFiles = p.files.filter((file) => file !== f);
-                                                                        return Object.assign(Object.assign({}, p), { files: updatedFiles });
-                                                                    });
-                                                                    setProjects(updatedFiles);
-                                                                } }));
-                                                    })))),
-                                            react_1.default.createElement("div", { className: "flex flex-row w-[95%] m-2 ml-4 justify-start" },
-                                                react_1.default.createElement(DiscussionThread_1.DiscussionThread, { key: row.projectId, currentUser: user, initialThreads: clientInvoice.chatMessages, createDisputeChatMessage: createDisputeChatMessage }))))))));
-                })))));
+                                react_1.default.createElement(core_1.IconButton, { onClick: () => setExpandRow(expandRow === row.projectId ? null : row.projectId) }, expandRow === row.projectId ? react_1.default.createElement(base_icons_1.IconChevronUp, null) : react_1.default.createElement(base_icons_1.IconChevronDown, null)))),
+                        expandRow === row.projectId && (react_1.default.createElement(core_1.TableRow, { key: `expanded-${row.projectId}` },
+                            react_1.default.createElement(core_1.TableCell, { colSpan: headCells.length + 1, style: { paddingBottom: 0, paddingTop: 0 } },
+                                react_1.default.createElement(core_1.Collapse, { in: true, timeout: "auto", unmountOnExit: true },
+                                    react_1.default.createElement(react_1.default.Fragment, null,
+                                        react_1.default.createElement(base_ui_1.Card, { className: "bg-[#F8F9FA] m-2 flex items-start justify-between rounded flex-col w-full p-6" },
+                                            react_1.default.createElement("b", { className: "mb-2 flex flex-row justify-start items-center" },
+                                                "Explanation:",
+                                                editingRowId === row.projectId ? (react_1.default.createElement(react_1.default.Fragment, null,
+                                                    react_1.default.createElement(base_ui_2.Input, { label: "", type: "text", className: "w-96 mx-4 overflow-ellipsis", value: editedExplanation, onChange: (e) => setEditedExplanation(e.target.value), placeholder: "Please provide an explanation", isInvalid: !editedExplanation, isInvalidText: "Please provide an explanation" }),
+                                                    react_1.default.createElement(base_ui_2.Button, { label: "Save", size: "md", color: "success", className: "ml-2 mt-1", onClick: () => { handleEditExplanation(row.projectId); } }))) : (react_1.default.createElement(base_ui_2.Button, { label: "Edit", iconLeft: react_1.default.createElement(base_icons_1.IconPencil, { size: "sm" }), onClick: () => {
+                                                        setEditedExplanation(row.clientExplanation);
+                                                        setEditingRowId(row.projectId);
+                                                    }, size: "sm", color: "info", className: "ml-6" }))),
+                                            react_1.default.createElement("p", null, row.clientExplanation),
+                                            react_1.default.createElement("b", { className: "flex flex-row flex-wrap justify-start items-center mt-2" },
+                                                "Supporting Documents:",
+                                                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: handleUpload }),
+                                                react_1.default.createElement(base_ui_2.Button, { label: "Add File", 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(); }, size: "sm", color: "info", className: "mx-2" }),
+                                                (Array.isArray(row.clientDocumentLinks)
+                                                    ? row.clientDocumentLinks
+                                                    : []).map((f, index) => (react_1.default.createElement("div", { key: index, className: "mx-2" },
+                                                    react_1.default.createElement(base_ui_1.Tag, { variant: "subtle", color: "success", label: f, iconRight: react_1.default.createElement(base_icons_1.IconXCircle, null), onClick: () => {
+                                                            const updatedProjects = projects.map((p) => p.projectId === row.projectId
+                                                                ? Object.assign(Object.assign({}, p), { clientDocumentLinks: p.clientDocumentLinks.filter((file) => file !== f) }) : p);
+                                                            setProjects(updatedProjects);
+                                                        } })))))))))))));
+                })),
+            updatedDispute && react_1.default.createElement("div", { className: "flex justify-end ml-auto mt-2" },
+                react_1.default.createElement(base_ui_2.Button, { label: "Update Dispute", color: "primary", isLoading: updatingDispute, onClick: () => handleSubmitDispute() })),
+            (clientInvoice === null || clientInvoice === void 0 ? void 0 : clientInvoice.chatEnabled) && react_1.default.createElement("div", { className: "flex flex-row w-full my-2 justify-start" },
+                react_1.default.createElement(DiscussionThread_1.DiscussionThread, { disputeId: (_f = projects[0]) === null || _f === void 0 ? void 0 : _f.id, currentUser: user, initialThreads: chatMessages, createDisputeChatMessage: createDisputeChatMessage })))));
 };
 exports.InvoiceCard = InvoiceCard;

package/package.json

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