@paro.io/expert-shared-components 1.14.24 → 1.14.26

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

@@ -1,22 +1,22 @@
-import React from "react";
-interface ChatProps {
-    currentUser: {
-        id: number;
-        name: string;
-        avatar: null;
-    };
-    initialThreads: {
-        id: number;
-        content: string;
-        sender: {
-            id: string;
-            name: string;
-            avatar: string | null;
-        };
-        timestamp: string;
-        isCurrentUser: boolean;
-    }[] | [];
-    updateChatMutation: () => void;
-}
-export declare const Chat: ({ currentUser, initialThreads, updateChatMutation, }: ChatProps) => React.JSX.Element;
-export {};
+import React from "react";
+interface ChatProps {
+    currentUser: {
+        id: number;
+        name: string;
+        avatar: null;
+    };
+    initialThreads: {
+        id: number;
+        content: string;
+        sender: {
+            id: string;
+            name: string;
+            avatar: string | null;
+        };
+        timestamp: string;
+        isCurrentUser: boolean;
+    }[] | [];
+    updateChatMutation: () => void;
+}
+export declare const Chat: ({ currentUser, initialThreads, updateChatMutation, }: ChatProps) => React.JSX.Element;
+export {};

package/lib/components/DiscussionThread/chat.js

@@ -1,106 +1,106 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Chat = void 0;
-const base_ui_1 = require("@paro.io/base-ui");
-const react_1 = __importStar(require("react"));
-const Chat = ({ currentUser, initialThreads, updateChatMutation, }) => {
-    const [messages, setMessages] = (0, react_1.useState)(initialThreads);
-    const [comment, setComment] = (0, react_1.useState)("");
-    const threadsEndRef = (0, react_1.useRef)(null);
-    const [invalid, setInvalid] = (0, react_1.useState)(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) {
-            updateChatMutation();
-            handleSendMessage();
-            setComment("");
-        }
-        else {
-            setInvalid(true);
-        }
-    };
-    // Handle sending a new message
-    const handleSendMessage = () => {
-        const newMsg = {
-            id: Date.now(),
-            content: comment,
-            sender: Object.assign(Object.assign({}, currentUser), { id: currentUser.id.toString() }),
-            timestamp: new Date().toISOString(),
-            isCurrentUser: true
-        };
-        setMessages([...messages, newMsg]);
-        setComment("");
-    };
-    // Handle key press (send on Enter)
-    const handleKeyPress = (e) => {
-        if (e.key === "Enter" && !e.shiftKey) {
-            e.preventDefault();
-            handleSend();
-        }
-    };
-    // Format timestamp
-    const formatTime = (timestamp) => {
-        const date = new Date(timestamp);
-        return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) +
-            ' · ' + date.toLocaleDateString([], { month: 'short', day: 'numeric', year: 'numeric' });
-    };
-    // Get initials for avatar
-    const getInitials = (name) => {
-        return name
-            .split(' ')
-            .map(word => word[0])
-            .join('')
-            .toUpperCase()
-            .substring(0, 2);
-    };
-    return (react_1.default.createElement("div", { className: "flex flex-col w-full rounded-lg bg-white px-4 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.map((message) => {
-                var _a, _b, _c;
-                return (react_1.default.createElement("div", { key: message.id, className: `flex mb-4 ${message.isCurrentUser ? 'justify-end' : 'justify-start'}` },
-                    !message.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: message.sender.name, 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 ${message.isCurrentUser ? 'bg-[#255b5c]' : 'bg-[#5f4508]'}` }, getInitials(((_b = message.sender) === null || _b === void 0 ? void 0 : _b.name) || 'User'))))),
-                    react_1.default.createElement("div", { className: `${message.isCurrentUser ? 'order-1' : 'order-2'} ml-1 min-w-min max-w-[75%]` },
-                        !message.isCurrentUser && (react_1.default.createElement("div", { className: "text-xs text-gray-500 font-medium mb-1" }, ((_c = message.sender) === null || _c === void 0 ? void 0 : _c.name) || 'Unknown User')),
-                        react_1.default.createElement("div", { className: `px-4 py-2 rounded-lg ${message.isCurrentUser
-                                ? 'bg-[#dbefef] rounded-br-none'
-                                : 'bg-[#f9d8a7] border rounded-bl-none'}` }, message.content),
-                        react_1.default.createElement("div", { className: "text-xs text-gray-500 mt-1" }, formatTime(message.timestamp))),
-                    message.isCurrentUser && (react_1.default.createElement("div", { className: "flex-shrink-0 ml-2" }, (currentUser === null || currentUser === void 0 ? void 0 : currentUser.avatar) ? (react_1.default.createElement("img", { src: currentUser.avatar, alt: currentUser.name, className: "h-8 w-8 rounded-full" })) : (react_1.default.createElement("div", { className: "h-8 w-8 rounded-full bg-blue-400 flex items-center justify-center text-white text-xs font-medium" }, getInitials((currentUser === null || currentUser === void 0 ? void 0 : currentUser.name) || 'You')))))));
-            }),
-            react_1.default.createElement("div", { ref: threadsEndRef })),
-        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" })))));
-};
-exports.Chat = Chat;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chat = void 0;
+const base_ui_1 = require("@paro.io/base-ui");
+const react_1 = __importStar(require("react"));
+const Chat = ({ currentUser, initialThreads, updateChatMutation, }) => {
+    const [messages, setMessages] = (0, react_1.useState)(initialThreads);
+    const [comment, setComment] = (0, react_1.useState)("");
+    const threadsEndRef = (0, react_1.useRef)(null);
+    const [invalid, setInvalid] = (0, react_1.useState)(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) {
+            updateChatMutation();
+            handleSendMessage();
+            setComment("");
+        }
+        else {
+            setInvalid(true);
+        }
+    };
+    // Handle sending a new message
+    const handleSendMessage = () => {
+        const newMsg = {
+            id: Date.now(),
+            content: comment,
+            sender: Object.assign(Object.assign({}, currentUser), { id: currentUser.id.toString() }),
+            timestamp: new Date().toISOString(),
+            isCurrentUser: true
+        };
+        setMessages([...messages, newMsg]);
+        setComment("");
+    };
+    // Handle key press (send on Enter)
+    const handleKeyPress = (e) => {
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            handleSend();
+        }
+    };
+    // Format timestamp
+    const formatTime = (timestamp) => {
+        const date = new Date(timestamp);
+        return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) +
+            ' · ' + date.toLocaleDateString([], { month: 'short', day: 'numeric', year: 'numeric' });
+    };
+    // Get initials for avatar
+    const getInitials = (name) => {
+        return name
+            .split(' ')
+            .map(word => word[0])
+            .join('')
+            .toUpperCase()
+            .substring(0, 2);
+    };
+    return (react_1.default.createElement("div", { className: "flex flex-col w-full rounded-lg bg-white px-4 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.map((message) => {
+                var _a, _b, _c;
+                return (react_1.default.createElement("div", { key: message.id, className: `flex mb-4 ${message.isCurrentUser ? 'justify-end' : 'justify-start'}` },
+                    !message.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: message.sender.name, 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 ${message.isCurrentUser ? 'bg-[#255b5c]' : 'bg-[#5f4508]'}` }, getInitials(((_b = message.sender) === null || _b === void 0 ? void 0 : _b.name) || 'User'))))),
+                    react_1.default.createElement("div", { className: `${message.isCurrentUser ? 'order-1' : 'order-2'} ml-1 min-w-min max-w-[75%]` },
+                        !message.isCurrentUser && (react_1.default.createElement("div", { className: "text-xs text-gray-500 font-medium mb-1" }, ((_c = message.sender) === null || _c === void 0 ? void 0 : _c.name) || 'Unknown User')),
+                        react_1.default.createElement("div", { className: `px-4 py-2 rounded-lg ${message.isCurrentUser
+                                ? 'bg-[#dbefef] rounded-br-none'
+                                : 'bg-[#f9d8a7] border rounded-bl-none'}` }, message.content),
+                        react_1.default.createElement("div", { className: "text-xs text-gray-500 mt-1" }, formatTime(message.timestamp))),
+                    message.isCurrentUser && (react_1.default.createElement("div", { className: "flex-shrink-0 ml-2" }, (currentUser === null || currentUser === void 0 ? void 0 : currentUser.avatar) ? (react_1.default.createElement("img", { src: currentUser.avatar, alt: currentUser.name, className: "h-8 w-8 rounded-full" })) : (react_1.default.createElement("div", { className: "h-8 w-8 rounded-full bg-blue-400 flex items-center justify-center text-white text-xs font-medium" }, getInitials((currentUser === null || currentUser === void 0 ? void 0 : currentUser.name) || 'You')))))));
+            }),
+            react_1.default.createElement("div", { ref: threadsEndRef })),
+        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" })))));
+};
+exports.Chat = Chat;

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

@@ -1 +1 @@
-export { DiscussionThread } from './DiscussionThread';
+export { DiscussionThread } from './DiscussionThread';

package/lib/components/DiscussionThread/index.js

@@ -1,5 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DiscussionThread = void 0;
-var DiscussionThread_1 = require("./DiscussionThread");
-Object.defineProperty(exports, "DiscussionThread", { enumerable: true, get: function () { return DiscussionThread_1.DiscussionThread; } });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DiscussionThread = void 0;
+var DiscussionThread_1 = require("./DiscussionThread");
+Object.defineProperty(exports, "DiscussionThread", { enumerable: true, get: function () { return DiscussionThread_1.DiscussionThread; } });

package/lib/components/DocumentCenter/ClientDocumentsTable.d.ts

@@ -17,6 +17,7 @@ interface ClientDocumentTableProps {
     downloadDocumentUrl?: string;
     clientId?: number;
     stage?: string;
+    showAsPage: boolean;
 }
-export declare const ClientDocumentsTable: ({ legacyFreelancerId, expertFiles, setExpertClientFiles, clientAndProjectsList, uploadExpertClientFiles, paroDocuments, freelancerName, freelancerEmail, updateFileLastViewed, deleteExpertClientFile, getFileLazyQuery, expertClientFilesLazyQuery, isClientPortal, documentUploadUrl, downloadDocumentUrl, clientId, stage }: ClientDocumentTableProps) => JSX.Element;
+export declare const ClientDocumentsTable: ({ legacyFreelancerId, expertFiles, setExpertClientFiles, clientAndProjectsList, uploadExpertClientFiles, paroDocuments, freelancerName, freelancerEmail, updateFileLastViewed, deleteExpertClientFile, getFileLazyQuery, expertClientFilesLazyQuery, isClientPortal, documentUploadUrl, downloadDocumentUrl, clientId, stage, showAsPage, }: ClientDocumentTableProps) => JSX.Element;
 export {};

package/lib/components/DocumentCenter/ClientDocumentsTable.js

@@ -135,7 +135,7 @@ const getKeyByValue = (object, value) => {
     }
     return Object.keys(object).find(key => object[key] === value);
 };
-const ClientDocumentsTable = ({ legacyFreelancerId, expertFiles, setExpertClientFiles, clientAndProjectsList, uploadExpertClientFiles, paroDocuments, freelancerName, freelancerEmail, updateFileLastViewed, deleteExpertClientFile, getFileLazyQuery, expertClientFilesLazyQuery, isClientPortal, documentUploadUrl, downloadDocumentUrl, clientId, stage }) => {
+const ClientDocumentsTable = ({ legacyFreelancerId, expertFiles, setExpertClientFiles, clientAndProjectsList, uploadExpertClientFiles, paroDocuments, freelancerName, freelancerEmail, updateFileLastViewed, deleteExpertClientFile, getFileLazyQuery, expertClientFilesLazyQuery, isClientPortal, documentUploadUrl, downloadDocumentUrl, clientId, stage, showAsPage, }) => {
     const classes = (0, exports.useStyles)();
     const [order, setOrder] = react_1.default.useState('desc');
     const [orderBy, setOrderBy] = react_1.default.useState('lastViewed');
@@ -339,10 +339,8 @@ const ClientDocumentsTable = ({ legacyFreelancerId, expertFiles, setExpertClient
         }
         fileId && setFileId(fileId);
     };
-    console.log("files here are", files);
-    console.log("expertFiles here are", expertFiles);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(DocumentUploadRow_1.DocumentUploadRow, { clientAndProject: clientAndProject, setClientAndProject: setClientAndProject, clientAndProjectsList: clientAndProjectsList, docType: docType, setDocType: setDocType, paroDocuments: paroDocuments, uploadExpertClientFiles: uploadExpertClientFiles, refetchFiles: refetchFiles, legacyFreelancerId: legacyFreelancerId, freelancerName: freelancerName, freelancerEmail: freelancerEmail, isClientPortal: isClientPortal, documentUploadUrl: documentUploadUrl }),
+        react_1.default.createElement(DocumentUploadRow_1.DocumentUploadRow, { clientAndProject: clientAndProject, setClientAndProject: setClientAndProject, clientAndProjectsList: clientAndProjectsList, docType: docType, setDocType: setDocType, paroDocuments: paroDocuments, uploadExpertClientFiles: uploadExpertClientFiles, refetchFiles: refetchFiles, legacyFreelancerId: legacyFreelancerId, freelancerName: freelancerName, freelancerEmail: freelancerEmail, isClientPortal: isClientPortal, documentUploadUrl: documentUploadUrl, showAsPage: showAsPage }),
         react_1.default.createElement(utils_1.CustomPaper, { style: { height: `${(files === null || files === void 0 ? void 0 : files.length) === 0 ? '30vh' : 'auto'}` } },
             react_1.default.createElement("div", { className: 'w-1/3', "data-tut": "search_button", id: "search_button" },
                 react_1.default.createElement(base_ui_1.Input, { placeholder: "Search Documents", type: "text", value: searchText, onChange: (e) => setSearchText(e.target.value) })),

package/lib/components/DocumentCenter/DocumentCenter.d.ts

@@ -24,6 +24,7 @@ interface DocumentCenterProps {
     loading?: boolean;
     clientId?: number;
     stage?: string;
+    showAsPage?: boolean;
 }
-export declare const DocumentCenter: ({ legacyFreelancerId, openModal, setOpenModal, expertClientFilesLazyQuery, getClientAndProjectsLazyQuery, clientFilesData, uploadExpertClientFiles, uploadFileData, deleteFileMutation, updateFreelancerExpiryMutation, foldername, getFilesLazyQuery, getFileLazyQuery, freelancerName, freelancerEmail, updateFileLastViewed, deleteExpertClientFile, isClientPortal, expertProjectsList, getFreelancerLazyQuery, documentUploadUrl, downloadDocumentUrl, clientId, loading, stage, }: DocumentCenterProps) => JSX.Element;
+export declare const DocumentCenter: ({ legacyFreelancerId, openModal, setOpenModal, expertClientFilesLazyQuery, getClientAndProjectsLazyQuery, clientFilesData, uploadExpertClientFiles, uploadFileData, deleteFileMutation, updateFreelancerExpiryMutation, foldername, getFilesLazyQuery, getFileLazyQuery, freelancerName, freelancerEmail, updateFileLastViewed, deleteExpertClientFile, isClientPortal, expertProjectsList, getFreelancerLazyQuery, documentUploadUrl, downloadDocumentUrl, clientId, loading, stage, showAsPage, }: DocumentCenterProps) => JSX.Element;
 export {};

package/lib/components/DocumentCenter/DocumentCenter.js

@@ -80,7 +80,7 @@ const CustomDialogContent = (0, core_1.styled)(core_1.DialogContent)(({ theme })
         background: '#707070',
     },
 }));
-const DocumentCenter = ({ legacyFreelancerId, openModal, setOpenModal, expertClientFilesLazyQuery, getClientAndProjectsLazyQuery, clientFilesData, uploadExpertClientFiles, uploadFileData, deleteFileMutation, updateFreelancerExpiryMutation, foldername, getFilesLazyQuery, getFileLazyQuery, freelancerName, freelancerEmail, updateFileLastViewed, deleteExpertClientFile, isClientPortal = false, expertProjectsList, getFreelancerLazyQuery, documentUploadUrl, downloadDocumentUrl, clientId, loading = false, stage = 'dev', }) => {
+const DocumentCenter = ({ legacyFreelancerId, openModal, setOpenModal, expertClientFilesLazyQuery, getClientAndProjectsLazyQuery, clientFilesData, uploadExpertClientFiles, uploadFileData, deleteFileMutation, updateFreelancerExpiryMutation, foldername, getFilesLazyQuery, getFileLazyQuery, freelancerName, freelancerEmail, updateFileLastViewed, deleteExpertClientFile, isClientPortal = false, expertProjectsList, getFreelancerLazyQuery, documentUploadUrl, downloadDocumentUrl, clientId, loading = false, stage = 'dev', showAsPage = false, }) => {
     var _a;
     const [value, setValue] = (0, react_1.useState)(0);
     const [expertClientFiles, setExpertClientFiles] = (0, react_1.useState)(clientFilesData !== null && clientFilesData !== void 0 ? clientFilesData : []);
@@ -143,41 +143,51 @@ const DocumentCenter = ({ legacyFreelancerId, openModal, setOpenModal, expertCli
         'Streamline document sharing and collaboration between you and the Experts you work with. <br /> Easily upload, download, organize, and exchange financial documents, contracts, and project materials in a secure, centralized hub.'
         :
             'Streamline document sharing and collaboration between you the Expert, Clients you work with, and Paro. <br /> Easily upload, download, organize, and exchange financial documents, contracts, and project materials in a secure, centralized hub.';
-    return (react_1.default.createElement(CustomDialog, { open: openModal, onClose: () => setOpenModal(false), fullScreen: true, scroll: 'paper' },
-        react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row", justify: "space-between", alignItems: "center" },
-                react_1.default.createElement(core_1.Box, { p: 2, style: { paddingBottom: '0px' } },
-                    react_1.default.createElement(core_1.Typography, { variant: "h6" },
-                        react_1.default.createElement(core_1.Box, { style: { color: 'white', fontWeight: 'bold' } }, "Document Center")),
-                    react_1.default.createElement(core_1.Typography, { variant: "caption" },
-                        react_1.default.createElement(core_1.Box, { style: { color: 'white', fontSize: '15px' }, dangerouslySetInnerHTML: { __html: headerText } }))),
-                react_1.default.createElement(core_1.Box, { style: { position: 'absolute', top: 0, right: 0 } },
-                    react_1.default.createElement(core_1.IconButton, { onClick: () => setOpenModal(false) },
-                        react_1.default.createElement(core_1.Box, { style: { backgroundColor: 'white', width: 40, height: 40, borderRadius: '4px' } },
-                            react_1.default.createElement(Close_1.default, null))))),
-            react_1.default.createElement(CustomDialogContent, { style: { width: '100%' } }, loading || expertLoading
-                ?
-                    react_1.default.createElement(core_1.CircularProgress, { size: 24 })
-                :
-                    react_1.default.createElement(lab_1.TabContext, { value: value + '' },
-                        react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row", justify: "space-between", alignItems: "baseline" },
-                            react_1.default.createElement(core_1.Box, null,
+    const textColor = showAsPage ? 'black' : 'white';
+    const content = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row", justify: "space-between", alignItems: "center" },
+            react_1.default.createElement(core_1.Box, { p: 2, style: { paddingBottom: '0px' } },
+                react_1.default.createElement(core_1.Typography, { variant: "h6" },
+                    react_1.default.createElement(core_1.Box, { style: { color: textColor, fontWeight: 'bold' } }, "Document Center")),
+                react_1.default.createElement(core_1.Typography, { variant: "caption" },
+                    react_1.default.createElement(core_1.Box, { style: { color: textColor, fontSize: '15px' }, dangerouslySetInnerHTML: { __html: headerText } }))),
+            !showAsPage && react_1.default.createElement(core_1.Box, { style: { position: 'absolute', top: 0, right: 0 } },
+                react_1.default.createElement(core_1.IconButton, { onClick: () => setOpenModal(false) },
+                    react_1.default.createElement(core_1.Box, { style: { backgroundColor: 'white', width: 40, height: 40, borderRadius: '4px' } },
+                        react_1.default.createElement(Close_1.default, null))))),
+        react_1.default.createElement(CustomDialogContent, { style: { width: '100%' } }, loading || expertLoading
+            ?
+                react_1.default.createElement(core_1.CircularProgress, { size: 24 })
+            :
+                react_1.default.createElement(lab_1.TabContext, { value: value + '' },
+                    react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row", justify: "space-between", alignItems: "baseline" },
+                        react_1.default.createElement(core_1.Box, null, showAsPage
+                            ?
+                                react_1.default.createElement(core_1.Tabs, { TabIndicatorProps: { style: { background: '#248384' } }, value: value, onChange: handleChange, variant: "scrollable", scrollButtons: "on" },
+                                    react_1.default.createElement(core_1.Tab, { label: react_1.default.createElement("div", { className: `text-${textColor} flex flex-row self-center` }, isClientPortal ? 'Expert Documents' : 'Client Documents') }),
+                                    !isClientPortal && react_1.default.createElement(core_1.Tab, { label: react_1.default.createElement("div", { className: `text-${textColor} flex flex-row self-center` }, "Paro Documents") }))
+                            :
                                 react_1.default.createElement(core_1.AppBar, { position: 'static', color: 'inherit', style: { backgroundColor: 'transparent' } },
                                     react_1.default.createElement(core_1.Tabs, { TabIndicatorProps: { style: { background: '#248384' } }, value: value, onChange: handleChange, variant: "scrollable", scrollButtons: "on" },
-                                        react_1.default.createElement(core_1.Tab, { label: react_1.default.createElement("div", { className: "flex flex-row self-center text-white" }, isClientPortal ? 'Expert Documents' : 'Client Documents') }),
-                                        !isClientPortal && react_1.default.createElement(core_1.Tab, { label: react_1.default.createElement("div", { className: "flex flex-row self-center text-white" }, "Paro Documents") })))),
-                            react_1.default.createElement(core_1.Box, { p: 1 },
-                                react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row-reverse", justify: "space-evenly", alignItems: "center", style: { display: 'flex', flexDirection: 'column' } },
-                                    react_1.default.createElement(core_1.Typography, { style: { color: 'white', marginLeft: '12px', fontSize: '14px' } },
-                                        react_1.default.createElement("b", null, value === 0 ? expertClientFiles === null || expertClientFiles === void 0 ? void 0 : expertClientFiles.length : expertFiles === null || expertFiles === void 0 ? void 0 : expertFiles.length),
-                                        " Documents Total"),
-                                    value === 0 && react_1.default.createElement(core_1.Typography, { style: { color: 'white', fontSize: '14px' } },
-                                        react_1.default.createElement("b", null, value === 0 ? ((expertClientFiles === null || expertClientFiles === void 0 ? void 0 : expertClientFiles.length) ? (_a = expertClientFiles === null || expertClientFiles === void 0 ? void 0 : expertClientFiles.filter((file) => !(file === null || file === void 0 ? void 0 : file.lastViewed))) === null || _a === void 0 ? void 0 : _a.length : 0) : expertFiles === null || expertFiles === void 0 ? void 0 : expertFiles.length),
-                                        " Documents Unread")))),
-                        react_1.default.createElement(lab_1.TabPanel, { value: '0', style: { paddingTop: '0px' } },
-                            react_1.default.createElement(ClientDocumentsTable_1.ClientDocumentsTable, { legacyFreelancerId: legacyFreelancerId, expertFiles: expertClientFiles, setExpertClientFiles: setExpertClientFiles, clientAndProjectsList: clientAndProjects, uploadExpertClientFiles: uploadExpertClientFiles, updateFileLastViewed: updateFileLastViewed, deleteExpertClientFile: deleteExpertClientFile, paroDocuments: false, freelancerName: freelancerName !== null && freelancerName !== void 0 ? freelancerName : '', freelancerEmail: freelancerEmail !== null && freelancerEmail !== void 0 ? freelancerEmail : '', getFileLazyQuery: getFileLazyQuery, expertClientFilesLazyQuery: expertClientFilesLazyQuery, isClientPortal: isClientPortal, documentUploadUrl: documentUploadUrl, downloadDocumentUrl: downloadDocumentUrl, clientId: clientId, stage: stage })),
-                        react_1.default.createElement(lab_1.TabPanel, { value: '1' },
-                            react_1.default.createElement(ParoDocumentsTable_1.ParoDocumentsTable, { legacyFreelancerId: legacyFreelancerId, expiryDate: insuranceExpiryDate !== null && insuranceExpiryDate !== void 0 ? insuranceExpiryDate : '', setExpiryDate: setInsuranceExpiryDate, expertFiles: expertFiles, setExpertFiles: setExpertFiles, uploadExpertClientFiles: uploadExpertClientFiles, uploadFileData: uploadFileData, deleteFileMutation: deleteFileMutation, updateFreelancerExpiryMutation: updateFreelancerExpiryMutation, foldername: foldername !== null && foldername !== void 0 ? foldername : '', paroDocuments: true, getFileLazyQuery: getFileLazyQuery, getFilesLazyQuery: getFilesLazyQuery }))))),
+                                        react_1.default.createElement(core_1.Tab, { label: react_1.default.createElement("div", { className: `text-${textColor} flex flex-row self-center` }, isClientPortal ? 'Expert Documents' : 'Client Documents') }),
+                                        !isClientPortal && react_1.default.createElement(core_1.Tab, { label: react_1.default.createElement("div", { className: `text-${textColor} flex flex-row self-center` }, "Paro Documents") })))),
+                        react_1.default.createElement(core_1.Box, { p: 1 },
+                            react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row-reverse", justify: "space-evenly", alignItems: "center", style: { display: 'flex', flexDirection: 'column' } },
+                                react_1.default.createElement(core_1.Typography, { style: { color: textColor, marginLeft: '12px', fontSize: '14px' } },
+                                    react_1.default.createElement("b", null, value === 0 ? expertClientFiles === null || expertClientFiles === void 0 ? void 0 : expertClientFiles.length : expertFiles === null || expertFiles === void 0 ? void 0 : expertFiles.length),
+                                    " Documents Total"),
+                                value === 0 && react_1.default.createElement(core_1.Typography, { style: { color: textColor, fontSize: '14px' } },
+                                    react_1.default.createElement("b", null, value === 0 ? ((expertClientFiles === null || expertClientFiles === void 0 ? void 0 : expertClientFiles.length) ? (_a = expertClientFiles === null || expertClientFiles === void 0 ? void 0 : expertClientFiles.filter((file) => !(file === null || file === void 0 ? void 0 : file.lastViewed))) === null || _a === void 0 ? void 0 : _a.length : 0) : expertFiles === null || expertFiles === void 0 ? void 0 : expertFiles.length),
+                                    " Documents Unread")))),
+                    react_1.default.createElement(lab_1.TabPanel, { value: '0', style: { paddingTop: '0px' } },
+                        react_1.default.createElement(ClientDocumentsTable_1.ClientDocumentsTable, { legacyFreelancerId: legacyFreelancerId, expertFiles: expertClientFiles, setExpertClientFiles: setExpertClientFiles, clientAndProjectsList: clientAndProjects, uploadExpertClientFiles: uploadExpertClientFiles, updateFileLastViewed: updateFileLastViewed, deleteExpertClientFile: deleteExpertClientFile, paroDocuments: false, freelancerName: freelancerName !== null && freelancerName !== void 0 ? freelancerName : '', freelancerEmail: freelancerEmail !== null && freelancerEmail !== void 0 ? freelancerEmail : '', getFileLazyQuery: getFileLazyQuery, expertClientFilesLazyQuery: expertClientFilesLazyQuery, isClientPortal: isClientPortal, documentUploadUrl: documentUploadUrl, downloadDocumentUrl: downloadDocumentUrl, clientId: clientId, stage: stage, showAsPage: showAsPage })),
+                    react_1.default.createElement(lab_1.TabPanel, { value: '1' },
+                        react_1.default.createElement(ParoDocumentsTable_1.ParoDocumentsTable, { legacyFreelancerId: legacyFreelancerId, expiryDate: insuranceExpiryDate !== null && insuranceExpiryDate !== void 0 ? insuranceExpiryDate : '', setExpiryDate: setInsuranceExpiryDate, expertFiles: expertFiles, setExpertFiles: setExpertFiles, uploadExpertClientFiles: uploadExpertClientFiles, uploadFileData: uploadFileData, deleteFileMutation: deleteFileMutation, updateFreelancerExpiryMutation: updateFreelancerExpiryMutation, foldername: foldername !== null && foldername !== void 0 ? foldername : '', paroDocuments: true, getFileLazyQuery: getFileLazyQuery, getFilesLazyQuery: getFilesLazyQuery, showAsPage: showAsPage }))))));
+    if (showAsPage) {
+        return (react_1.default.createElement("div", { className: "w-full max-w-[80vw] bg-white rounded-lg" }, content));
+    }
+    return (react_1.default.createElement(CustomDialog, { open: openModal, onClose: () => setOpenModal(false), fullScreen: true, scroll: 'paper' },
+        content,
         react_1.default.createElement(react_hot_toast_1.Toaster, { position: "top-center", toastOptions: {
                 style: {
                     zIndex: 9999,

package/lib/components/DocumentCenter/DocumentTable.d.ts

@@ -1,15 +1,15 @@
-interface DocumentTableProps {
-    legacyFreelancerId: number;
-    paroProjectsData: any;
-    expiryDate: string;
-    expertFiles: any[];
-    uploadExpertClientFiles: any;
-    uploadFileData: any;
-    deleteFileMutation: any;
-    updateFreelancerExpiryMutation: any;
-    GetFilesDocument: any;
-    foldername: string;
-    paroDocuments: boolean;
-}
-export declare const DocumentTable: ({ legacyFreelancerId, paroProjectsData, expiryDate, expertFiles, uploadExpertClientFiles, uploadFileData, deleteFileMutation, updateFreelancerExpiryMutation, GetFilesDocument, foldername, paroDocuments }: DocumentTableProps) => JSX.Element;
-export {};
+interface DocumentTableProps {
+    legacyFreelancerId: number;
+    paroProjectsData: any;
+    expiryDate: string;
+    expertFiles: any[];
+    uploadExpertClientFiles: any;
+    uploadFileData: any;
+    deleteFileMutation: any;
+    updateFreelancerExpiryMutation: any;
+    GetFilesDocument: any;
+    foldername: string;
+    paroDocuments: boolean;
+}
+export declare const DocumentTable: ({ legacyFreelancerId, paroProjectsData, expiryDate, expertFiles, uploadExpertClientFiles, uploadFileData, deleteFileMutation, updateFreelancerExpiryMutation, GetFilesDocument, foldername, paroDocuments }: DocumentTableProps) => JSX.Element;
+export {};