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

package/lib/components/FileUploader/index.d.ts

@@ -0,0 +1,10 @@
+interface UploadFileParams {
+    file: File;
+    documentName: string;
+    disputeId?: number;
+    projectId: number;
+    documentUploadUrl: string;
+    uploadExpertClientDisputeFilesData: any;
+}
+export declare const fileUploader: ({ file, documentName, disputeId, projectId, documentUploadUrl, uploadExpertClientDisputeFilesData, }: UploadFileParams) => Promise<boolean>;
+export {};

package/lib/components/FileUploader/index.js

@@ -0,0 +1,70 @@
+"use strict";
+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.fileUploader = void 0;
+const UploadClient_1 = __importDefault(require("../shared/UploadClient"));
+const utils_1 = require("../shared/utils");
+const CHUNK_SIZE = 5 * 1024 * 1024;
+const fileUploader = (_a) => __awaiter(void 0, [_a], void 0, function* ({ file, documentName, disputeId, projectId, documentUploadUrl, uploadExpertClientDisputeFilesData, }) {
+    var _b;
+    const fileExtension = file.name.split('.').pop() || '';
+    const fileNameWithExtension = `${documentName}.${fileExtension}`;
+    const isLargeFile = file.size >= CHUNK_SIZE;
+    try {
+        // Read file as base64
+        const fileForUpload = yield new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => { var _a; return resolve(((_a = reader.result) === null || _a === void 0 ? void 0 : _a.toString()) || ''); };
+            reader.onerror = reject;
+            reader.readAsDataURL(file);
+        });
+        // Upload large file via multipart
+        if (isLargeFile) {
+            (0, utils_1.showToast)('warning', 'Uploading a large file — this may take longer than usual. Thank you for your patience!');
+            const uploadClient = new UploadClient_1.default({
+                fileSelected: file,
+                fileName: fileNameWithExtension,
+                projectId,
+                documentUploadUrl,
+            });
+            yield uploadClient.triggerMultipartUpload();
+        }
+        const inputData = {
+            disputeId: disputeId ? disputeId : projectId, // initially we don't have disputeId. clarify and update
+            fileName: documentName,
+            data: isLargeFile ? '' : fileForUpload,
+            fileSize: file.size,
+        };
+        console.log({ inputData, disputeId, projectId });
+        // Upload metadata to backend
+        const response = yield uploadExpertClientDisputeFilesData({
+            variables: {
+                input: inputData,
+            },
+        });
+        if ((_b = response === null || response === void 0 ? void 0 : response.data) === null || _b === void 0 ? void 0 : _b.uploadExpertClientDisputeFilesData) {
+            (0, utils_1.showToast)('success', 'Supporting document uploaded successfully!');
+            return true;
+        }
+        else {
+            (0, utils_1.showToast)('warning', 'Failed to upload supporting document');
+            return false;
+        }
+    }
+    catch (error) {
+        (0, utils_1.showToast)('warning', 'Error uploading file. Please try again.');
+        return false;
+    }
+});
+exports.fileUploader = fileUploader;

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

@@ -0,0 +1,7 @@
+interface DecisionSectionProps {
+    dispute: any;
+    onUpdateDispute: (variables: any) => Promise<any>;
+    onRefetch: () => Promise<void>;
+}
+export declare const DecisionSection: ({ dispute, onUpdateDispute, }: DecisionSectionProps) => JSX.Element;
+export {};

package/lib/components/Invoices/DecisionSection.js

@@ -0,0 +1,95 @@
+"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());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DecisionSection = void 0;
+const react_1 = __importStar(require("react"));
+const base_ui_1 = require("@paro.io/base-ui");
+const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
+const RESOLUTION_OPTIONS = [
+    { value: 'Resolved', label: 'Approve Dispute' },
+    { value: 'Resolved', label: 'Decline Dispute' },
+    { value: 'Resolved', label: 'Partial Approval' },
+];
+const DecisionSection = ({ dispute, onUpdateDispute, }) => {
+    const [resolution, setResolution] = (0, react_1.useState)('');
+    const [amount, setAmount] = (0, react_1.useState)('');
+    const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
+    const handleSubmit = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (!resolution)
+            return;
+        setIsSubmitting(true);
+        try {
+            yield onUpdateDispute({
+                variables: {
+                    input: {
+                        disputeId: dispute.disputeId,
+                        status: resolution,
+                        approvedAmount: amount ? parseFloat(amount) : undefined,
+                    },
+                },
+            });
+            react_hot_toast_1.default.success('Thank you for resolving the dispute');
+        }
+        catch (error) {
+            console.error('Failed to update dispute:', error);
+            react_hot_toast_1.default.error('Failed to update dispute');
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    });
+    return (react_1.default.createElement("div", { className: "space-y-6" },
+        react_1.default.createElement("div", { className: "flex items-center justify-between" },
+            react_1.default.createElement("div", { className: "text-lg font-bold text-[#333333]" }, "Make Decision")),
+        react_1.default.createElement("div", { className: "p-6 space-y-6", style: { backgroundColor: '#F8F9FA' } },
+            react_1.default.createElement("div", { className: "grid grid-cols-2 gap-6" },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("label", { className: "block text-sm text-[#666666] font-bold mb-2" }, "Resolution:"),
+                    react_1.default.createElement("div", { className: "w-full" },
+                        react_1.default.createElement("select", { value: resolution, onChange: (e) => setResolution(e.target.value), className: "w-full px-3 py-2 border border-[#CCCCCC] rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#248384] bg-white" },
+                            react_1.default.createElement("option", { value: "" }, "Select Resolution"),
+                            RESOLUTION_OPTIONS.map((option) => (react_1.default.createElement("option", { key: option.value, value: option.value }, option.label)))))),
+                resolution === 'PARTIAL' && (react_1.default.createElement("div", null,
+                    react_1.default.createElement("label", { className: "block text-sm text-[#666666] font-bold mb-2" }, "Approved Amount:"),
+                    react_1.default.createElement("div", { className: "relative" },
+                        react_1.default.createElement("span", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-[#333333]" }, "$"),
+                        react_1.default.createElement("input", { type: "number", value: amount, onChange: (e) => setAmount(e.target.value), className: "w-full pl-8 pr-3 py-2 border border-[#CCCCCC] rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[#248384]", placeholder: "Enter amount" }))))),
+            react_1.default.createElement("div", { className: "flex justify-end space-x-4" },
+                react_1.default.createElement(base_ui_1.Button, { label: "Decline Dispute", color: "error", onClick: () => setResolution('DECLINED'), disabled: isSubmitting, size: "md" }),
+                react_1.default.createElement(base_ui_1.Button, { label: "Approve & Resolve", color: "primary", onClick: handleSubmit, isLoading: isSubmitting, disabled: !resolution || (resolution === 'PARTIAL' && !amount), size: "md" })))));
+};
+exports.DecisionSection = DecisionSection;

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

@@ -0,0 +1,19 @@
+interface Message {
+    id: string;
+    sender: {
+        firstName: string;
+        lastName: string;
+        role: string;
+        userTypeId: number;
+    };
+    messageText: string;
+    createdAt: string;
+}
+interface DiscussionSectionProps {
+    disputeId: string;
+    currentUser: any;
+    messages: Message[];
+    onCreateMessage: (variables: any) => Promise<any>;
+}
+export declare const DiscussionSection: ({ disputeId, currentUser, messages, onCreateMessage, }: DiscussionSectionProps) => JSX.Element;
+export {};

package/lib/components/Invoices/DiscussionSection.js

@@ -0,0 +1,177 @@
+"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());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DiscussionSection = void 0;
+const react_1 = __importStar(require("react"));
+const base_ui_1 = require("@paro.io/base-ui");
+const dayjs_1 = __importDefault(require("dayjs"));
+const DiscussionSection = ({ disputeId, currentUser, messages, onCreateMessage, }) => {
+    var _a;
+    const [newMessage, setNewMessage] = (0, react_1.useState)('');
+    const [visibility, setVisibility] = (0, react_1.useState)('ALL');
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const threadsEndRef = (0, react_1.useRef)(null);
+    const didMountRef = (0, react_1.useRef)(false);
+    // Auto scroll to bottom when messages change
+    (0, react_1.useEffect)(() => {
+        if (didMountRef.current) {
+            if (threadsEndRef.current) {
+                threadsEndRef.current.scrollIntoView({ behavior: "smooth" });
+            }
+        }
+        else {
+            didMountRef.current = true;
+        }
+    }, [messages]);
+    // Get the sequence of unique userTypeIds to determine alignment
+    const userSequence = (0, react_1.useMemo)(() => {
+        const uniqueUsers = Array.from(new Set(messages.map(m => m.sender.userTypeId)));
+        return uniqueUsers;
+    }, [messages]);
+    const handleSendMessage = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        if (!newMessage.trim())
+            return;
+        try {
+            setIsLoading(true);
+            yield onCreateMessage({
+                variables: {
+                    input: {
+                        disputeId,
+                        messageText: newMessage,
+                        visibility,
+                        senderId: (_a = currentUser === null || currentUser === void 0 ? void 0 : currentUser.app_metadata) === null || _a === void 0 ? void 0 : _a.userId,
+                    },
+                },
+            });
+            setNewMessage('');
+            setIsLoading(false);
+        }
+        catch (error) {
+            console.error('Failed to send message:', error);
+        }
+    });
+    const getSenderInitial = (sender) => {
+        if (sender.userTypeId === 3)
+            return 'C';
+        if (sender.userTypeId === 1)
+            return 'E';
+        return 'P';
+    };
+    const getSenderTextColor = (userTypeId) => {
+        switch (userTypeId) {
+            case 1:
+                return '#195C5C';
+            case 2:
+                return '#2196F3';
+            case 3:
+                return '#643E0C';
+            default:
+                return '#333333';
+        }
+    };
+    const getSenderBackgroundColor = (userTypeId) => {
+        switch (userTypeId) {
+            case 1:
+                return '#D9EFEF';
+            case 2:
+                return '#E4F0FF';
+            case 3:
+                return '#FDD7A5';
+            default:
+                return '#F8F9FA';
+        }
+    };
+    const getMessageAlignment = (userTypeId) => {
+        // First user in sequence is left-aligned, second is right-aligned
+        const userIndex = userSequence.indexOf(userTypeId);
+        return userIndex === 0 ? 'mr-auto' : 'ml-auto';
+    };
+    const getMessageOrder = (userTypeId) => {
+        // First user in sequence shows avatar on left, second on right
+        const userIndex = userSequence.indexOf(userTypeId);
+        return userIndex === 0 ? 'flex-row' : 'flex-row-reverse';
+    };
+    const getHeaderAlignment = (userTypeId) => {
+        // First user in sequence aligns text left, second aligns right
+        const userIndex = userSequence.indexOf(userTypeId);
+        return userIndex === 0 ? 'justify-start' : 'justify-end';
+    };
+    return (react_1.default.createElement("div", { className: "space-y-6" },
+        react_1.default.createElement("div", { className: "flex items-center justify-between" },
+            react_1.default.createElement("div", { className: "text-lg font-bold text-[#333333]" }, "Discussion Thread")),
+        react_1.default.createElement("div", { className: "rounded" },
+            react_1.default.createElement("div", { className: "space-y-6" }, messages.map((message) => (react_1.default.createElement("div", { key: message.id, className: `flex ${getMessageAlignment(message.sender.userTypeId)}` },
+                react_1.default.createElement("div", { className: `flex space-x-4 ${getMessageOrder(message.sender.userTypeId)} ${getMessageAlignment(message.sender.userTypeId)}` },
+                    react_1.default.createElement("div", { style: {
+                            backgroundColor: getSenderBackgroundColor(message.sender.userTypeId),
+                            color: getSenderTextColor(message.sender.userTypeId)
+                        }, className: "w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0" },
+                        react_1.default.createElement("span", { className: "text-sm font-bold" }, getSenderInitial(message.sender))),
+                    react_1.default.createElement("div", { className: "flex-1" },
+                        react_1.default.createElement("div", { className: `flex items-center ${getHeaderAlignment(message.sender.userTypeId)} space-x-2` },
+                            react_1.default.createElement("span", { className: "text-sm font-bold text-[#333333]" },
+                                message.sender.firstName,
+                                " ",
+                                message.sender.lastName),
+                            react_1.default.createElement("span", { className: "text-xs text-[#666666]" }, (0, dayjs_1.default)(message.createdAt).format('MMM D, YYYY • h:mm A'))),
+                        react_1.default.createElement("div", { style: { backgroundColor: getSenderBackgroundColor(message.sender.userTypeId) }, className: "mt-1 p-3 rounded-lg" },
+                            react_1.default.createElement("p", { className: `text-sm ${getHeaderAlignment(message.sender.userTypeId)}`, style: { color: getSenderTextColor(message.sender.userTypeId) } }, message.messageText)))))))),
+            react_1.default.createElement("div", { ref: threadsEndRef }),
+            react_1.default.createElement("div", { className: "space-y-4 p-6 space-y-6 rounded mt-4", style: { backgroundColor: '#F5F7F9' } },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("div", { className: "font-bold text-[#333333] mb-2" }, "Add Comment"),
+                    react_1.default.createElement("textarea", { value: newMessage, onChange: (e) => setNewMessage(e.target.value), placeholder: "Type your comment here...", className: "w-full h-24 p-3 border border-[#CCCCCC] rounded-lg text-sm resize-none focus:outline-none focus:ring-2 focus:ring-[#248384]" })),
+                react_1.default.createElement("div", { className: "flex items-center justify-between" },
+                    react_1.default.createElement("div", { className: "flex items-center space-x-4" }, ((_a = currentUser === null || currentUser === void 0 ? void 0 : currentUser.app_metadata) === null || _a === void 0 ? void 0 : _a.userTypeId) === 1 && (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("span", { className: "text-sm text-[#666666]" }, "Visible to:"),
+                        react_1.default.createElement("div", { className: "flex items-center space-x-2" },
+                            react_1.default.createElement("label", { className: "flex items-center space-x-2 cursor-pointer" },
+                                react_1.default.createElement("input", { type: "radio", checked: visibility === 'EXPERT_INTERNAL_ONLY', onChange: () => setVisibility('EXPERT_INTERNAL_ONLY'), className: "form-radio text-[#248384]" }),
+                                react_1.default.createElement("span", { className: "text-sm text-[#333333]" }, "Expert Only")),
+                            react_1.default.createElement("label", { className: "flex items-center space-x-2 cursor-pointer" },
+                                react_1.default.createElement("input", { type: "radio", checked: visibility === 'CLIENT_INTERNAL_ONLY', onChange: () => setVisibility('CLIENT_INTERNAL_ONLY'), className: "form-radio text-[#248384]" }),
+                                react_1.default.createElement("span", { className: "text-sm text-[#333333]" }, "Client Only")),
+                            react_1.default.createElement("label", { className: "flex items-center space-x-2 cursor-pointer" },
+                                react_1.default.createElement("input", { type: "radio", checked: visibility === 'INTERNAL_ONLY', onChange: () => setVisibility('INTERNAL_ONLY'), className: "form-radio text-[#248384]" }),
+                                react_1.default.createElement("span", { className: "text-sm text-[#333333]" }, "Internal Only")),
+                            react_1.default.createElement("label", { className: "flex items-center space-x-2 cursor-pointer" },
+                                react_1.default.createElement("input", { type: "radio", checked: visibility === 'ALL', onChange: () => setVisibility('ALL'), className: "form-radio text-[#248384]" }),
+                                react_1.default.createElement("span", { className: "text-sm text-[#333333]" }, "All")))))),
+                    react_1.default.createElement(base_ui_1.Button, { label: "Reply", color: "primary", isLoading: isLoading, onClick: handleSendMessage, disabled: !newMessage.trim() }))))));
+};
+exports.DiscussionSection = DiscussionSection;

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

@@ -0,0 +1,20 @@
+interface DisputeProjectCardProps {
+    project: {
+        project: {
+            name: string;
+        };
+        disputeAmount: number;
+        disputeHours: number;
+        disputeType: string;
+        disputeReasonCode: string;
+        resolutionMode?: 'Direct' | 'Mediated' | 'Escalated';
+        resolutionType?: 'Upheld' | 'Reduced' | 'FutureCredit' | 'Canceled';
+    };
+    client: {
+        name: string;
+    };
+    disputeDate: string;
+    disputeUpdatedDate: string;
+}
+export declare const DisputeProjectCard: ({ project, client, disputeDate, disputeUpdatedDate }: DisputeProjectCardProps) => JSX.Element;
+export {};

package/lib/components/Invoices/DisputeProjectCard.js

@@ -0,0 +1,79 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisputeProjectCard = void 0;
+const react_1 = __importDefault(require("react"));
+const base_ui_1 = require("@paro.io/base-ui");
+const dayjs_1 = __importDefault(require("dayjs"));
+const DisputeProjectCard = ({ project, client, disputeDate, disputeUpdatedDate }) => {
+    var _a, _b;
+    const getResolutionModeColor = (mode) => {
+        switch (mode) {
+            case 'Direct':
+                return 'success';
+            case 'Mediated':
+                return 'warning';
+            case 'Escalated':
+                return 'danger';
+            default:
+                return 'default';
+        }
+    };
+    const getResolutionTypeColor = (type) => {
+        switch (type) {
+            case 'Upheld':
+                return 'success';
+            case 'Reduced':
+                return 'warning';
+            case 'FutureCredit':
+                return 'info';
+            case 'Canceled':
+                return 'danger';
+            default:
+                return 'default';
+        }
+    };
+    return (react_1.default.createElement("div", { className: "bg-white rounded-lg shadow-sm border border-[#E5E7EB] p-6 space-y-4" },
+        react_1.default.createElement("div", { className: "flex items-center justify-between" },
+            react_1.default.createElement("div", { className: "flex items-center space-x-2" },
+                project.resolutionMode && (react_1.default.createElement("div", null,
+                    react_1.default.createElement("span", { className: "text-sm text-[#666666] font-bold" }, "Resolution Mode: "),
+                    react_1.default.createElement(base_ui_1.Tag, { label: project.resolutionMode, variant: "subtle", color: getResolutionModeColor(project.resolutionMode) }))),
+                project.resolutionType && (react_1.default.createElement("div", null,
+                    react_1.default.createElement("span", { className: "text-sm text-[#666666] font-bold" }, "Resolution Type: "),
+                    react_1.default.createElement(base_ui_1.Tag, { label: project.resolutionType, variant: "subtle", color: getResolutionTypeColor(project.resolutionType) }))))),
+        react_1.default.createElement("div", { className: "grid grid-cols-2 gap-6" },
+            react_1.default.createElement("div", { className: "space-y-4" },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("span", { className: "text-sm text-[#666666] font-bold" }, "Client: "),
+                    react_1.default.createElement("span", { className: "text-sm text-[#333333]" }, client === null || client === void 0 ? void 0 : client.name)),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("span", { className: "text-sm text-[#666666] font-bold" }, "Project: "),
+                    react_1.default.createElement("span", { className: "text-sm text-[#333333]" }, (_a = project === null || project === void 0 ? void 0 : project.project) === null || _a === void 0 ? void 0 : _a.name)),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("span", { className: "text-sm text-[#666666] font-bold" }, "Type: "),
+                    react_1.default.createElement("span", { className: "text-sm text-[#333333]" }, project === null || project === void 0 ? void 0 : project.disputeType)),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("span", { className: "text-sm text-[#666666] font-bold" }, "Hours Disputed: "),
+                    react_1.default.createElement("span", { className: "text-sm text-[#333333]" }, project === null || project === void 0 ? void 0 :
+                        project.disputeHours,
+                        " hours"))),
+            react_1.default.createElement("div", { className: "space-y-4" },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("span", { className: "text-sm text-[#666666] font-bold" }, "Amount: "),
+                    react_1.default.createElement("span", { className: "text-sm text-[#F44336] font-bold" },
+                        "$", (_b = project === null || project === void 0 ? void 0 : project.disputeAmount) === null || _b === void 0 ? void 0 :
+                        _b.toLocaleString())),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("span", { className: "text-sm text-[#666666] font-bold" }, "Submitted: "),
+                    react_1.default.createElement("span", { className: "text-sm text-[#333333]" }, (0, dayjs_1.default)(disputeDate).format('MMM D, YYYY'))),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("span", { className: "text-sm text-[#666666] font-bold" }, "Last Updated: "),
+                    react_1.default.createElement("span", { className: "text-sm text-[#333333]" }, (0, dayjs_1.default)(disputeUpdatedDate).format('MMM D, YYYY'))),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("span", { className: "text-sm text-[#666666] font-bold" }, "Days Left: "),
+                    react_1.default.createElement("span", { className: "text-sm text-[#F44336] font-bold" }, "5 days left to resolve"))))));
+};
+exports.DisputeProjectCard = DisputeProjectCard;

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

@@ -0,0 +1,9 @@
+interface DisputeSectionProps {
+    dispute: any;
+    onUpdateDispute: (variables: any) => Promise<any>;
+    onRefetch: () => Promise<void>;
+    documentUploadUrl: string;
+    uploadExpertClientDisputeFiles: (variables: any) => Promise<any>;
+}
+export declare const DisputeSection: ({ dispute, onUpdateDispute, onRefetch, documentUploadUrl, uploadExpertClientDisputeFiles, }: DisputeSectionProps) => JSX.Element;
+export {};

package/lib/components/Invoices/DisputeSection.js

@@ -0,0 +1,126 @@
+"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 });
+exports.DisputeSection = void 0;
+const react_1 = __importStar(require("react"));
+const base_ui_1 = require("@paro.io/base-ui");
+const base_icons_1 = require("@paro.io/base-icons");
+const FileUploader_1 = require("../FileUploader");
+const ACCEPTED_FILE_TYPES = [
+    'application/pdf',
+    'application/msword',
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    'image/jpeg',
+    'image/png',
+    'text/csv',
+];
+const DisputeSection = ({ dispute, onUpdateDispute, onRefetch, documentUploadUrl, uploadExpertClientDisputeFiles, }) => {
+    var _a, _b, _c;
+    const [files, setFiles] = (0, react_1.useState)((dispute === null || dispute === void 0 ? void 0 : dispute.clientDocumentLinks) || []);
+    const fileInputRef = (0, react_1.useRef)(null);
+    const validateFileUpload = (file) => {
+        return ACCEPTED_FILE_TYPES.includes(file.type);
+    };
+    const handleUpload = (event) => {
+        const selectedFiles = event.target.files;
+        if (!selectedFiles)
+            return;
+        const validFiles = Array.from(selectedFiles)
+            .filter(file => validateFileUpload(file))
+            .map(file => file.name);
+        const getFileNames = selectedFiles && Array.from(selectedFiles).map((file) => {
+            if (!validateFileUpload(file)) {
+                return null;
+            }
+            if (file) {
+                return file.name;
+            }
+        }).filter((name) => name !== null);
+        if (getFileNames && getFileNames.length > 0) {
+            Array.from(selectedFiles).forEach((selectedFile) => {
+                const reader = new FileReader();
+                reader.onloadend = () => __awaiter(void 0, void 0, void 0, function* () {
+                    var _a, _b;
+                    yield (0, FileUploader_1.fileUploader)({
+                        file: selectedFile,
+                        documentName: selectedFile.name,
+                        projectId: Number((_b = (_a = dispute === null || dispute === void 0 ? void 0 : dispute.disputeProjects) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.projectId),
+                        documentUploadUrl: documentUploadUrl,
+                        uploadExpertClientDisputeFilesData: uploadExpertClientDisputeFiles,
+                    });
+                });
+                reader.readAsDataURL(selectedFile);
+            });
+            setFiles(prev => [...prev, ...validFiles]);
+        }
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
+    };
+    const handleRemoveFile = (fileName) => {
+        setFiles(prev => prev.filter(f => f !== fileName));
+    };
+    const disputeProject = (_a = dispute === null || dispute === void 0 ? void 0 : dispute.disputeProjects) === null || _a === void 0 ? void 0 : _a[0];
+    return (react_1.default.createElement("div", { className: "grid grid-cols-2 gap-6" },
+        react_1.default.createElement("div", { className: "space-y-4" },
+            react_1.default.createElement("div", { className: "flex items-center justify-between" },
+                react_1.default.createElement("div", { className: "text-lg font-bold text-[#333333]" }, "Client Dispute")),
+            react_1.default.createElement("div", { className: "p-6 space-y-4 rounded", style: { backgroundColor: '#D9EFEF', minHeight: '230px' } },
+                react_1.default.createElement("div", { className: "py-1 text-[#195C5C] font-bold inline-block mb-2" },
+                    "Reason: ", disputeProject === null || disputeProject === void 0 ? void 0 :
+                    disputeProject.disputeReasonCode),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("div", { className: "text-sm font-bold text-[#333333] mb-2" }, "Client Explanation:"),
+                    react_1.default.createElement("p", { className: "text-sm text-[#333333]" }, disputeProject === null || disputeProject === void 0 ? void 0 : disputeProject.clientExplanation)),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("div", { className: "text-sm font-bold text-[#333333] mb-2" }, "Supporting Documents:"),
+                    react_1.default.createElement("div", { className: "flex flex-wrap gap-2" },
+                        react_1.default.createElement("input", { ref: fileInputRef, type: "file", multiple: true, accept: ACCEPTED_FILE_TYPES.join(','), className: "hidden", onChange: handleUpload }),
+                        react_1.default.createElement(base_ui_1.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: "bg-white border border-[#248384] text-[#248384]" }), (_b = disputeProject === null || disputeProject === void 0 ? void 0 : disputeProject.clientDocumentLinks) === null || _b === void 0 ? void 0 :
+                        _b.map((file, index) => (react_1.default.createElement(base_ui_1.Tag, { key: index, label: file, variant: "subtle", color: "success", iconRight: react_1.default.createElement(base_icons_1.IconXCircle, null), onClick: () => handleRemoveFile(file) }))))))),
+        react_1.default.createElement("div", { className: "space-y-4" },
+            react_1.default.createElement("div", { className: "flex items-center justify-between" },
+                react_1.default.createElement("div", { className: "text-lg font-bold text-[#333333]" }, "Expert Rebuttal")),
+            react_1.default.createElement("div", { className: "p-6 space-y-4 rounded", style: { backgroundColor: '#FDD7A5', minHeight: '230px' } },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("div", { className: "text-sm font-bold text-[#333333] mb-2" }, "Expert Explanation:"),
+                    react_1.default.createElement("p", { className: "text-sm text-[#333333]" }, disputeProject === null || disputeProject === void 0 ? void 0 : disputeProject.expertExplanation)),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("div", { className: "text-sm font-bold text-[#333333] mb-2" }, "Supporting Documents:"),
+                    react_1.default.createElement("div", { className: "flex flex-wrap gap-2" },
+                        react_1.default.createElement("input", { ref: fileInputRef, type: "file", multiple: true, accept: ACCEPTED_FILE_TYPES.join(','), className: "hidden", onChange: handleUpload }),
+                        react_1.default.createElement(base_ui_1.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: "bg-white border border-[#248384] text-[#248384]" }), (_c = disputeProject === null || disputeProject === void 0 ? void 0 : disputeProject.expertDocumentLinks) === null || _c === void 0 ? void 0 :
+                        _c.map((file, index) => (react_1.default.createElement(base_ui_1.Tag, { key: index, label: file, variant: "subtle", color: "success", iconRight: react_1.default.createElement(base_icons_1.IconXCircle, null), onClick: () => handleRemoveFile(file) })))))))));
+};
+exports.DisputeSection = DisputeSection;

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

@@ -4,6 +4,9 @@ interface InvoiceCardProps {
     user: any;
     chatMessages: any[];
     updateClientInvoiceMutation: any;
+    refetchInvoiceDisputes: any;
+    documentUploadUrl: string;
+    uploadExpertClientDisputeFiles: any;
 }
-export declare const InvoiceCard: ({ clientInvoice, createDisputeChatMessage, user, chatMessages, updateClientInvoiceMutation }: InvoiceCardProps) => JSX.Element;
+export declare const InvoiceCard: ({ clientInvoice, createDisputeChatMessage, user, chatMessages, updateClientInvoiceMutation, refetchInvoiceDisputes, documentUploadUrl, uploadExpertClientDisputeFiles, }: InvoiceCardProps) => JSX.Element;
 export {};

package/lib/components/Invoices/InvoiceCard.js

@@ -1,263 +1,25 @@
 "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());
-    });
-};
 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"));
+const react_1 = __importDefault(require("react"));
 const base_ui_1 = require("@paro.io/base-ui");
-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%",
-    },
-    paper: {
-        width: "100%",
-    },
-    table: {
-        minWidth: '95%',
-        border: "1px solid",
-        borderColor: "#E2E8F0",
-    },
-    visuallyHidden: {
-        border: 0,
-        clip: "rect(0 0 0 0)",
-        height: 1,
-        margin: -1,
-        overflow: "hidden",
-        padding: 0,
-        position: "absolute",
-        top: 20,
-        width: 1,
-    },
-    tableCell: {
-        width: "auto",
-    },
-    collapse: {
-        backgroundColor: "#FFFFFF",
-        width: "100%",
-        borderRadius: 6,
-        marginLeft: 12,
-        marginTop: 12,
-    },
-    tableHead: {
-        backgroundColor: "#F1F5F9",
-        borderRadius: 6,
-        width: "100%",
-    },
-}));
-const headCells = [
-    { id: 'project', label: 'Project' },
-    { id: 'projectType', label: 'Project Type' },
-    { id: 'hours', label: 'Hours' },
-    { id: 'amount', label: 'Amount' },
-    { id: 'reason', label: 'Reason' },
-];
-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) {
-        return false;
-    }
-    if (!ACCEPTED_FILE_TYPES.includes(file.type)) {
-        return false;
-    }
-    return true;
-};
-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 === null || clientInvoice === void 0 ? void 0 : clientInvoice.disputeProjects);
-    const [editingRowId, setEditingRowId] = (0, react_1.useState)(null);
-    const [editedExplanation, setEditedExplanation] = (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) => {
-            if (project.projectId === expandRow) {
-                return Object.assign(Object.assign({}, project), { clientDocumentLinks: [...project.clientDocumentLinks, ...e.filter((name) => !project.clientDocumentLinks.includes(name))] });
-            }
-            return project;
-        }) : projects.map((project) => {
-            return Object.assign(Object.assign({}, project), { [field]: e.target.value });
-        });
-        //upload files mutation
-        setProjects(updatedProject);
-    };
-    const handleUpload = (event) => {
-        const selectedFiles = event.target.files;
-        if (!selectedFiles)
-            return;
-        const validFiles = Array.from(selectedFiles)
-            .filter(file => validateFileUpload(file))
-            .map(file => file.name);
-        if (validFiles.length === 0)
-            return;
-        handleChange(validFiles, "clientDocumentLinks");
-        if (fileInputRef.current) {
-            fileInputRef.current.value = '';
-        }
-    };
-    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 #", (_b = clientInvoice === null || clientInvoice === void 0 ? void 0 : clientInvoice.invoice) === null || _b === void 0 ? void 0 :
-                _b.id),
-            react_1.default.createElement("p", null,
-                "Dispute Date: ", clientInvoice === null || clientInvoice === void 0 ? void 0 :
-                clientInvoice.disputeDate),
-            react_1.default.createElement("p", null,
-                "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,
-                        headCells.map((headcell) => {
-                            return react_1.default.createElement(core_1.TableCell, { key: headcell.id, className: classes.tableCell }, headcell.label);
-                        }),
-                        react_1.default.createElement(core_1.TableCell, { className: classes.tableCell }))), projects === null || projects === void 0 ? void 0 :
-                projects.map((row) => {
-                    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.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 === 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 })))));
+const InvoiceHeader_1 = require("./InvoiceHeader");
+const InvoiceDetails_1 = require("./InvoiceDetails");
+const DisputeSection_1 = require("./DisputeSection");
+const DiscussionSection_1 = require("./DiscussionSection");
+const DecisionSection_1 = require("./DecisionSection");
+const InvoiceCard = ({ clientInvoice, createDisputeChatMessage, user, chatMessages, updateClientInvoiceMutation, refetchInvoiceDisputes, documentUploadUrl, uploadExpertClientDisputeFiles, }) => {
+    var _a, _b, _c;
+    return (react_1.default.createElement(base_ui_1.Card, { className: "w-full bg-white rounded-lg shadow-sm overflow-hidden" },
+        react_1.default.createElement(InvoiceHeader_1.InvoiceHeader, { invoice: clientInvoice }),
+        react_1.default.createElement("div", { className: "p-6 space-y-6" },
+            react_1.default.createElement(InvoiceDetails_1.InvoiceDetails, { invoice: clientInvoice }),
+            react_1.default.createElement(DisputeSection_1.DisputeSection, { dispute: clientInvoice, onUpdateDispute: updateClientInvoiceMutation, onRefetch: refetchInvoiceDisputes, documentUploadUrl: documentUploadUrl, uploadExpertClientDisputeFiles: uploadExpertClientDisputeFiles }),
+            (clientInvoice === null || clientInvoice === void 0 ? void 0 : clientInvoice.chatEnabled) && (react_1.default.createElement(DiscussionSection_1.DiscussionSection, { disputeId: (_b = (_a = clientInvoice === null || clientInvoice === void 0 ? void 0 : clientInvoice.disputeProjects) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.id, currentUser: user, messages: chatMessages, onCreateMessage: createDisputeChatMessage })),
+            ((_c = user === null || user === void 0 ? void 0 : user.app_metadata) === null || _c === void 0 ? void 0 : _c.userTypeId) === 2 &&
+                react_1.default.createElement(DecisionSection_1.DecisionSection, { dispute: clientInvoice, onUpdateDispute: updateClientInvoiceMutation, onRefetch: refetchInvoiceDisputes }))));
 };
 exports.InvoiceCard = InvoiceCard;

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

@@ -0,0 +1,5 @@
+interface InvoiceDetailsProps {
+    invoice: any;
+}
+export declare const InvoiceDetails: ({ invoice }: InvoiceDetailsProps) => JSX.Element;
+export {};

package/lib/components/Invoices/InvoiceDetails.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InvoiceDetails = void 0;
+const react_1 = __importDefault(require("react"));
+const base_ui_1 = require("@paro.io/base-ui");
+const dayjs_1 = __importDefault(require("dayjs"));
+const DisputeProjectCard_1 = require("./DisputeProjectCard");
+const InvoiceDetails = ({ invoice }) => {
+    var _a;
+    const getStatusColor = (status) => {
+        switch (status) {
+            case 'InProgress':
+                return 'warning';
+            case 'UnderReview':
+                return 'info';
+            case 'Resolved':
+                return 'success';
+            default:
+                return 'default';
+        }
+    };
+    return (react_1.default.createElement("div", { className: "space-y-6" },
+        react_1.default.createElement("div", { className: "flex items-center space-x-4" },
+            react_1.default.createElement(base_ui_1.Tag, { label: invoice === null || invoice === void 0 ? void 0 : invoice.status, variant: "subtle", color: getStatusColor(invoice === null || invoice === void 0 ? void 0 : invoice.status) }),
+            react_1.default.createElement("span", { className: "text-xs text-[#666666]" },
+                "Last updated: ",
+                (0, dayjs_1.default)(invoice === null || invoice === void 0 ? void 0 : invoice.disputeUpdatedDate).format('MM-DD-YYYY'))),
+        ((_a = invoice === null || invoice === void 0 ? void 0 : invoice.disputeProjects) === null || _a === void 0 ? void 0 : _a.length) > 0 && (react_1.default.createElement("div", { className: "space-y-4" },
+            react_1.default.createElement("div", { className: "grid grid-cols-1 gap-4" }, invoice.disputeProjects.map((project) => (react_1.default.createElement(DisputeProjectCard_1.DisputeProjectCard, { key: project.id, project: project, client: invoice === null || invoice === void 0 ? void 0 : invoice.client, disputeDate: invoice === null || invoice === void 0 ? void 0 : invoice.disputeDate, disputeUpdatedDate: invoice === null || invoice === void 0 ? void 0 : invoice.disputeUpdatedDate }))))))));
+};
+exports.InvoiceDetails = InvoiceDetails;

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

@@ -0,0 +1,5 @@
+interface InvoiceHeaderProps {
+    invoice: any;
+}
+export declare const InvoiceHeader: ({ invoice }: InvoiceHeaderProps) => JSX.Element;
+export {};

package/lib/components/Invoices/InvoiceHeader.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InvoiceHeader = void 0;
+const react_1 = __importDefault(require("react"));
+const dayjs_1 = __importDefault(require("dayjs"));
+const InvoiceHeader = ({ invoice }) => {
+    var _a, _b, _c, _d;
+    return (react_1.default.createElement("div", { className: "bg-[#0F172A] text-white px-6 py-4 rounded-t-lg flex items-center justify-between font-arial" },
+        react_1.default.createElement("div", { className: "flex items-center space-x-8" },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("span", { className: "text-sm font-bold" }, "Dispute Invoice #"),
+                react_1.default.createElement("span", { className: "ml-2" }, (_a = invoice === null || invoice === void 0 ? void 0 : invoice.invoice) === null || _a === void 0 ? void 0 : _a.id)),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("span", { className: "text-sm font-bold" }, "Dispute Date: "),
+                react_1.default.createElement("span", { className: "ml-2" }, (0, dayjs_1.default)(invoice === null || invoice === void 0 ? void 0 : invoice.disputeDate).format('MM-DD-YYYY'))),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("span", { className: "text-sm font-bold" }, "Invoice Date: "),
+                react_1.default.createElement("span", { className: "ml-2" }, (0, dayjs_1.default)((_b = invoice === null || invoice === void 0 ? void 0 : invoice.invoice) === null || _b === void 0 ? void 0 : _b.dateGenerated).format('MM-DD-YYYY')))),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("span", { className: "text-sm font-bold" }, "Expert Name: "),
+            react_1.default.createElement("span", { className: "ml-2" }, (_c = invoice === null || invoice === void 0 ? void 0 : invoice.freelancer) === null || _c === void 0 ? void 0 :
+                _c.firstName,
+                " ", (_d = invoice === null || invoice === void 0 ? void 0 : invoice.freelancer) === null || _d === void 0 ? void 0 :
+                _d.lastName))));
+};
+exports.InvoiceHeader = InvoiceHeader;

package/lib/index.d.ts

@@ -12,3 +12,4 @@ export { sharedUtils } from './components/shared/utils';
 export { ActiveProjectCard } from './components/ProjectCard/ActiveProjectCard';
 export { InvoiceCard } from './components/Invoices/InvoiceCard';
 export { DiscussionThread } from './components/DiscussionThread';
+export { fileUploader } from './components/FileUploader';

package/lib/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DiscussionThread = exports.InvoiceCard = exports.ActiveProjectCard = exports.sharedUtils = exports.ServiceLinesTemplate = exports.HeaderNavBar = exports.DocumentCenter = exports.ProfileCompletedPercentage = exports.ExpertProfileHeader = exports.OrganizationChart = exports.FirmEmployeeSection = exports.ClientReferenceSection = exports.Reviews = exports.ReviewsTab = void 0;
+exports.fileUploader = exports.DiscussionThread = exports.InvoiceCard = exports.ActiveProjectCard = exports.sharedUtils = exports.ServiceLinesTemplate = exports.HeaderNavBar = exports.DocumentCenter = exports.ProfileCompletedPercentage = exports.ExpertProfileHeader = exports.OrganizationChart = exports.FirmEmployeeSection = exports.ClientReferenceSection = exports.Reviews = exports.ReviewsTab = void 0;
 var ReviewsTab_1 = require("./components/ReviewsTab");
 Object.defineProperty(exports, "ReviewsTab", { enumerable: true, get: function () { return ReviewsTab_1.ReviewsTab; } });
 var Reviews_1 = require("./components/Reviews");
@@ -29,3 +29,5 @@ var InvoiceCard_1 = require("./components/Invoices/InvoiceCard");
 Object.defineProperty(exports, "InvoiceCard", { enumerable: true, get: function () { return InvoiceCard_1.InvoiceCard; } });
 var DiscussionThread_1 = require("./components/DiscussionThread");
 Object.defineProperty(exports, "DiscussionThread", { enumerable: true, get: function () { return DiscussionThread_1.DiscussionThread; } });
+var FileUploader_1 = require("./components/FileUploader");
+Object.defineProperty(exports, "fileUploader", { enumerable: true, get: function () { return FileUploader_1.fileUploader; } });

package/package.json

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