@paro.io/expert-shared-components 1.4.12 → 1.5.1

package/lib/components/DocumentCenter/DocumentUploadRow.js

@@ -0,0 +1,183 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DocumentUploadRow = void 0;
+const react_1 = __importStar(require("react"));
+const core_1 = require("@material-ui/core");
+const base_ui_1 = require("@paro.io/base-ui");
+const react_datepicker_1 = __importDefault(require("react-datepicker"));
+const utils_1 = require("../shared/utils");
+const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
+const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
+const ClientDocumentTypes = [
+    "Financial Documents",
+    "Contractual and Legal Documents",
+    "Operational and Management Documents",
+    "Tax and Compliance Documents",
+    "Project Specific Documents"
+];
+const ParoDocumentTypes = [
+    "EO Insurance",
+    "Resume",
+    "General Insurance",
+    "Certification",
+];
+const generateOptions = (array, clientOptions, isClientPortal) => {
+    return array.map((item, index) => {
+        var _a, _b;
+        const name = isClientPortal ? (_a = item === null || item === void 0 ? void 0 : item.freelancer) === null || _a === void 0 ? void 0 : _a.name : (_b = item === null || item === void 0 ? void 0 : item.client) === null || _b === void 0 ? void 0 : _b.name;
+        const projectName = item === null || item === void 0 ? void 0 : item.name;
+        let newText = '';
+        const itemKey = (item === null || item === void 0 ? void 0 : item.id) ? `${item === null || item === void 0 ? void 0 : item.id}_${index}` : item === null || item === void 0 ? void 0 : item.split(' ').join('_').concat(index);
+        if (clientOptions) {
+            if (name && projectName) {
+                newText = `${name} - ${projectName}`;
+            }
+            else if (name) {
+                newText = name;
+            }
+            else if (projectName) {
+                newText = projectName;
+            }
+            else {
+                newText = 'N/A';
+            }
+            return Object.assign({ id: itemKey, value: newText, label: newText }, item);
+        }
+        else {
+            return {
+                id: itemKey,
+                value: item,
+                label: item,
+            };
+        }
+    });
+};
+const DocumentUploadRow = ({ clientAndProject, setClientAndProject, docType, setDocType, paroDocuments, expiryDate, handleDateChange, error, clientAndProjectsList, uploadExpertClientFiles, refetchFiles, legacyFreelancerId, freelancerName, freelancerEmail, isClientPortal = false, }) => {
+    const [isUploading, setIsUploading] = (0, react_1.useState)(false);
+    const [documentName, setDocumentName] = (0, react_1.useState)('');
+    const fileInputRef = (0, react_1.useRef)(null);
+    const documentTypeOptions = paroDocuments ? generateOptions(ParoDocumentTypes, false, isClientPortal) : generateOptions(ClientDocumentTypes, false, isClientPortal);
+    const clientOptions = clientAndProjectsList ? generateOptions(clientAndProjectsList, true, isClientPortal) : [];
+    const defaultValue = clientOptions && clientOptions[0] ? clientOptions[0] : '';
+    (0, react_1.useEffect)(() => {
+        setDocType(paroDocuments ? documentTypeOptions[1].value : documentTypeOptions[0].value);
+        defaultValue && setClientAndProject(defaultValue);
+    }, []);
+    const checkField = (paroDocuments) ? (docType === 'EO Insurance' ? (expiryDate && !error) : true) : (clientAndProject && (clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.value));
+    const disableButton = !(documentName && checkField) && !isUploading;
+    const uploadFile = (fileForUpload, fileExtension) => {
+        var _a, _b, _c, _d, _e;
+        setIsUploading(true);
+        uploadExpertClientFiles({
+            variables: {
+                input: {
+                    clientId: (_a = clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.client) === null || _a === void 0 ? void 0 : _a.id,
+                    clientName: (_b = clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.client) === null || _b === void 0 ? void 0 : _b.name,
+                    data: fileForUpload,
+                    email: isClientPortal ? (_c = clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.freelancer) === null || _c === void 0 ? void 0 : _c.name : freelancerEmail,
+                    fileName: `${documentName}.${fileExtension}`,
+                    fileType: utils_1.DOCUMENT_TYPE_CONSTANTS[docType],
+                    freelancerId: isClientPortal ? (_d = clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.freelancer) === null || _d === void 0 ? void 0 : _d.id : legacyFreelancerId,
+                    freelancerName: isClientPortal ? (_e = clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.freelancer) === null || _e === void 0 ? void 0 : _e.name : freelancerName,
+                    projectId: clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.id,
+                    projectName: clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.name,
+                    uploadedBy: isClientPortal ? 'CLIENT' : 'FREELANCER',
+                },
+            }
+        })
+            .then((res) => {
+            var _a;
+            if ((_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.uploadExpertClientFilesData) {
+                refetchFiles();
+                (0, utils_1.showToast)('success', 'File Uploaded successfully!');
+            }
+            else {
+                (0, utils_1.showToast)('warning', 'Upload failed! Please try again.');
+            }
+        })
+            .catch((err) => {
+            (0, utils_1.showToast)('warning', 'Upload failed! Please try again.');
+        }).finally(() => {
+            setIsUploading(false);
+            setDocumentName('');
+        });
+    };
+    const handleUpload = (event) => {
+        const selectedFile = event.target.files && event.target.files[0];
+        if (!(0, utils_1.validateFileUpload)(selectedFile, true)) {
+            return;
+        }
+        if (selectedFile) {
+            const fileExtension = selectedFile.name.substring(selectedFile.name.lastIndexOf('.') + 1);
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                const fileForUpload = String(reader.result).split(';base64,')[1];
+                uploadFile(fileForUpload, fileExtension);
+            };
+            reader.readAsDataURL(selectedFile);
+        }
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("span", { className: "text-sm italic text-white pb-2 pl-8 -mt-5" }, "Follow the steps below to upload your document"),
+        react_1.default.createElement(core_1.Grid, { container: true, direction: "row", alignItems: "flex-end", wrap: "nowrap", justifyContent: "flex-start", spacing: 2, xs: 12, style: { padding: '10px 0px 25px 30px' } },
+            react_1.default.createElement("div", { className: 'flex flex-row items-center' },
+                react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.fa1, size: "sm", className: "p-1 text-black w-4 m-2 rounded-full self-end", style: { backgroundColor: '#A3C9E5' } }),
+                react_1.default.createElement(base_ui_1.Input, { label: "Enter document name", type: "text", placeholder: "Enter document name", value: documentName, onChange: (e) => { e.preventDefault(); setDocumentName(e.target.value); } })),
+            react_1.default.createElement("div", { className: 'flex flex-row items-center shrink' },
+                react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.fa2, size: "sm", className: "p-1 text-black w-4 m-2 rounded-full self-end", style: { backgroundColor: '#A3C9E5' } }),
+                react_1.default.createElement(core_1.Grid, { item: true, xs: 12, sm: 'auto' },
+                    react_1.default.createElement(core_1.FormControl, { variant: "outlined", style: { minWidth: 200 } },
+                        react_1.default.createElement(base_ui_1.Select, { label: "Select Document Type", required: true, onChange: (e) => setDocType(e.target.value), value: docType, defaultValue: documentTypeOptions[0].value, options: documentTypeOptions })))),
+            paroDocuments && docType && (docType === 'EO Insurance') &&
+                react_1.default.createElement("div", { className: 'flex flex-row items-center' },
+                    react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.fa3, size: "sm", className: "p-1 text-black w-4 m-2 rounded-full self-end", style: { backgroundColor: '#A3C9E5' } }),
+                    react_1.default.createElement(core_1.Grid, { item: true, xs: 12, sm: 'auto' },
+                        react_1.default.createElement(core_1.FormControl, { error: !!error, variant: "outlined", fullWidth: true },
+                            react_1.default.createElement(react_datepicker_1.default, { onChange: (date) => handleDateChange(date), className: "input", placeholderText: "Select date", customInput: react_1.default.createElement(base_ui_1.Input, { label: 'Expiration Date', type: "date", value: expiryDate ? expiryDate.toISOString().split('T')[0] : '' }) }),
+                            error && react_1.default.createElement(core_1.FormHelperText, null, error)))),
+            !paroDocuments &&
+                react_1.default.createElement("div", { className: 'flex flex-row items-center shrink' },
+                    react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.fa3, size: "sm", className: "p-1 text-black w-4 m-2 rounded-full self-end", style: { backgroundColor: '#A3C9E5' } }),
+                    react_1.default.createElement(core_1.Grid, { item: true, xs: 12, sm: 'auto' },
+                        react_1.default.createElement(core_1.FormControl, { variant: "outlined", style: { minWidth: 200 } },
+                            react_1.default.createElement(base_ui_1.Select, { label: isClientPortal ? "Select Expert - Project" : "Select Client - Project", required: true, onChange: (e) => {
+                                    const selectedItem = clientOptions.find(option => option.value === e.target.value);
+                                    if (selectedItem) {
+                                        setClientAndProject(selectedItem);
+                                    }
+                                }, value: (clientAndProject === null || clientAndProject === void 0 ? void 0 : clientAndProject.value) || '', defaultValue: defaultValue.value, options: clientOptions })))),
+            react_1.default.createElement("div", { className: 'flex flex-row items-center flex-none' },
+                react_1.default.createElement(react_fontawesome_1.FontAwesomeIcon, { icon: paroDocuments && docType !== 'EO Insurance' ? free_solid_svg_icons_1.fa3 : free_solid_svg_icons_1.fa4, size: "sm", className: "p-1 text-black w-4 m-2 rounded-full self-end", style: { backgroundColor: '#A3C9E5' } }),
+                react_1.default.createElement("input", { id: "upload-file", type: "file", accept: ".pdf,.doc,.docx,.ppt,.xls,.xlsx", style: { display: 'none' }, ref: fileInputRef, onChange: handleUpload }),
+                react_1.default.createElement(core_1.Tooltip, { arrow: true, placement: "top", interactive: true, className: "whitespace-nowrap", title: disableButton ? "Please fill out the required info" : "" },
+                    react_1.default.createElement(base_ui_1.Button, { label: "Upload Document", onClick: () => {
+                            fileInputRef.current && fileInputRef.current.click();
+                        }, color: "primary", disabled: disableButton, isLoading: isUploading }))))));
+};
+exports.DocumentUploadRow = DocumentUploadRow;

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

@@ -0,0 +1,16 @@
+interface DocumentTableProps {
+    legacyFreelancerId: number | number[];
+    expiryDate: string;
+    setExpiryDate: (expiryDate: string) => void;
+    expertFiles: any[];
+    setExpertFiles: (expertFiles: any[]) => void;
+    uploadFileData: any;
+    deleteFileMutation: any;
+    updateFreelancerExpiryMutation: any;
+    foldername: string;
+    paroDocuments: boolean;
+    getFileLazyQuery: any;
+    getFilesLazyQuery: any;
+}
+export declare const ParoDocumentsTable: ({ legacyFreelancerId, expiryDate, setExpiryDate, expertFiles, setExpertFiles, uploadFileData, deleteFileMutation, updateFreelancerExpiryMutation, foldername, paroDocuments, getFileLazyQuery, getFilesLazyQuery, }: DocumentTableProps) => JSX.Element;
+export {};

package/lib/components/DocumentCenter/ParoDocumentsTable.js

@@ -0,0 +1,384 @@
+"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.ParoDocumentsTable = void 0;
+const react_1 = __importStar(require("react"));
+const core_1 = require("@material-ui/core");
+const base_ui_1 = require("@paro.io/base-ui");
+const Pagination_1 = __importDefault(require("../Reviews/Pagination"));
+const DocumentUploadRow_1 = require("./DocumentUploadRow");
+const base_icons_1 = require("@paro.io/base-icons");
+const ClientDocumentsTable_1 = require("./ClientDocumentsTable");
+const date_fns_1 = require("date-fns");
+const DeleteDocumentModal_1 = require("./DeleteDocumentModal");
+const utils_1 = require("../shared/utils");
+const headCells = [
+    {
+        id: 'fileName',
+        label: 'File Name',
+    },
+    {
+        id: 'docType',
+        label: 'Document Type',
+    },
+    {
+        id: 'uploadedDate',
+        label: 'Uploaded Date',
+    },
+    {
+        id: 'expiryDate',
+        label: 'Expiry Date',
+    },
+];
+function descendingComparator(a, b, orderBy) {
+    var _a, _b;
+    if (orderBy === 'uploadedDate' || orderBy === 'expiryDate') {
+        //@ts-ignore
+        const dateA = a === null || a === void 0 ? void 0 : a[orderBy];
+        //@ts-ignore
+        const dateB = b === null || b === void 0 ? void 0 : b[orderBy];
+        //@ts-ignore
+        if (dateB < dateA) {
+            return -1;
+        }
+        //@ts-ignore
+        if (dateB > dateA) {
+            return 1;
+        }
+        return 0;
+    }
+    else if (orderBy === 'fileName' || orderBy === 'docType') {
+        //@ts-ignore
+        const valueA = (_a = a === null || a === void 0 ? void 0 : a[orderBy]) !== null && _a !== void 0 ? _a : "";
+        //@ts-ignore
+        const valueB = (_b = b === null || b === void 0 ? void 0 : b[orderBy]) !== null && _b !== void 0 ? _b : "";
+        if (valueB < valueA) {
+            return -1;
+        }
+        if (valueB > valueA) {
+            return 1;
+        }
+        return 0;
+    }
+    else {
+        (0, utils_1.compareItems)(a, b, orderBy);
+    }
+}
+const ParoDocumentsTable = ({ legacyFreelancerId, expiryDate, setExpiryDate, expertFiles, setExpertFiles, uploadFileData, deleteFileMutation, updateFreelancerExpiryMutation, foldername, paroDocuments, getFileLazyQuery, getFilesLazyQuery, }) => {
+    const classes = (0, ClientDocumentsTable_1.useStyles)();
+    const [order, setOrder] = react_1.default.useState('desc');
+    const [orderBy, setOrderBy] = react_1.default.useState('uploadedDate');
+    const [currentPage, setCurrentPage] = (0, react_1.useState)(1);
+    const [perPageItems, setPerPageItems] = (0, react_1.useState)(10);
+    const [files, setFiles] = (0, react_1.useState)(expertFiles);
+    const [documentName, setDocumentName] = (0, react_1.useState)('');
+    const [clientAndProject, setClientAndProject] = (0, react_1.useState)('');
+    const [docType, setDocType] = (0, react_1.useState)('');
+    const [searchText, setSearchText] = (0, react_1.useState)('');
+    const [isUploading, setIsUploading] = (0, react_1.useState)(false);
+    const [downloadFilename, setDownloadFilename] = (0, react_1.useState)('');
+    const [apiFoldername, setApiFoldername] = (0, react_1.useState)('');
+    const [isDeleteModalOpen, setDeleteModalOpen] = (0, react_1.useState)(false);
+    const [deleteFileName, setDeleteFileName] = (0, react_1.useState)('');
+    const [insuranceExpiryDate, setInsuranceExpiryDate] = (0, react_1.useState)(null);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [fileData, setFileData] = (0, react_1.useState)('');
+    const firstItem = (currentPage - 1) * perPageItems;
+    const lastItem = (currentPage - 1) * perPageItems + perPageItems;
+    const tableData = (files === null || files === void 0 ? void 0 : files.length) ? files === null || files === void 0 ? void 0 : files.map((file) => {
+        var _a, _b, _c, _d;
+        return {
+            fileName: ((_a = file === null || file === void 0 ? void 0 : file.filename) === null || _a === void 0 ? void 0 : _a.split('/').pop()) || "-",
+            docType: ((_b = file.filename) === null || _b === void 0 ? void 0 : _b.split('/').slice(-2, -1)[0].includes('auth0')) ? '-' : (_c = file.filename) === null || _c === void 0 ? void 0 : _c.split('/').slice(-2, -1)[0],
+            uploadedDate: (0, utils_1.formatDate)(Number(file.lastmodified)),
+            expiryDate: ((_d = file.filename) === null || _d === void 0 ? void 0 : _d.includes('/EO Insurance/')) ? expiryDate : 'N/A',
+        };
+    }) : [];
+    (0, react_1.useEffect)(() => {
+        const sortByTextProjects = searchText === ''
+            ? expertFiles
+            : expertFiles.filter((file) => {
+                var _a, _b;
+                return ((_a = file === null || file === void 0 ? void 0 : file.filename) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchText.toLowerCase())) ||
+                    ((_b = file === null || file === void 0 ? void 0 : file.documentType) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchText.toLowerCase()));
+            });
+        setFiles(sortByTextProjects);
+    }, [searchText]);
+    const getFileData = (_a) => __awaiter(void 0, [_a], void 0, function* ({ fileName, folderName }) {
+        var _b, _c;
+        const fileData = yield getFileLazyQuery({
+            skip: !downloadFilename,
+            variables: {
+                input: {
+                    foldername: folderName,
+                    filename: fileName,
+                },
+            },
+        });
+        if ((_c = (_b = fileData === null || fileData === void 0 ? void 0 : fileData.data) === null || _b === void 0 ? void 0 : _b.getFile) === null || _c === void 0 ? void 0 : _c.data) {
+            (0, utils_1.showToast)('success', 'File Data fetched successfully!');
+            setFileData(fileData);
+        }
+        else {
+            (0, utils_1.showToast)('warning', 'Failed to fetch file data! Please try again.');
+        }
+    });
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        if (!fileData || !fileData.data || !fileData.data.getFile || !fileData.data.getFile.data) {
+            console.error("Invalid file data.");
+            return;
+        }
+        try {
+            const a = document.createElement('a');
+            const mimeType = (0, utils_1.getFileMimeType)(downloadFilename);
+            if (mimeType === 'application/pdf') {
+                //handle pdf type files
+                (0, utils_1.handleDownloadPdf)({ fileData, downloadFilename });
+            }
+            else {
+                // handle other type files
+                a.href = `data:${mimeType};base64,${(_b = (_a = fileData === null || fileData === void 0 ? void 0 : fileData.data) === null || _a === void 0 ? void 0 : _a.getFile) === null || _b === void 0 ? void 0 : _b.data}`;
+                a.download = downloadFilename;
+                a.click();
+            }
+        }
+        catch (error) {
+            console.error('Error downloading file:', error);
+            (0, utils_1.showToast)('warning', 'Failed to download file! Please try again.');
+        }
+        finally {
+            setDownloadFilename('');
+            setApiFoldername('');
+            setFileData('');
+        }
+    }, [fileData]);
+    const handleRequestSort = (event, property) => {
+        const isDesc = orderBy === property && order === 'desc';
+        setOrder(isDesc ? 'asc' : 'desc');
+        setOrderBy(property);
+    };
+    const createSortHandler = (property) => (event) => {
+        handleRequestSort(event, property);
+    };
+    const refetchFiles = (isUpload) => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            const { data } = yield getFilesLazyQuery({
+                variables: { input: { foldername: foldername } },
+                fetchPolicy: 'network-only',
+            });
+            if (docType === 'EO Insurance' && isUpload) {
+                insuranceExpiryDate && setExpiryDate((0, utils_1.formatDate)(insuranceExpiryDate));
+            }
+            setExpertFiles(data === null || data === void 0 ? void 0 : data.getFiles);
+            setFiles(data === null || data === void 0 ? void 0 : data.getFiles);
+        }
+        catch (error) {
+            console.error('Error refetching query:', error);
+        }
+    });
+    const handleDelete = () => {
+        setIsUploading(true);
+        if (apiFoldername.split('/')[1] === 'EO Insurance') {
+            updateFreelancerExpiryMutation({
+                variables: {
+                    id: legacyFreelancerId,
+                },
+            })
+                .catch((err) => { console.log(`Error deleting insurance from freelancer table ${err}`); });
+            setInsuranceExpiryDate(null);
+        }
+        deleteFileMutation({
+            variables: {
+                input: {
+                    foldername: apiFoldername,
+                    filename: deleteFileName,
+                },
+            },
+            onCompleted: () => __awaiter(void 0, void 0, void 0, function* () {
+                refetchFiles(false);
+            })
+        })
+            .then(() => {
+            toggleDeleteModal(deleteFileName);
+            (0, utils_1.showToast)('success', 'File deleted successfully!');
+        })
+            .catch((err) => {
+            toggleDeleteModal(deleteFileName);
+            console.log(`Error deleting file ${err}`);
+            (0, utils_1.showToast)('warning', 'Failed to delete file! Please retry.');
+        });
+        setIsUploading(false);
+    };
+    const handleDownloadFile = (fileName) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c;
+        if (fileName) {
+            setDownloadFilename(fileName);
+            const segments = (_b = (_a = files === null || files === void 0 ? void 0 : files.filter((row) => row.filename.split('/').pop() === fileName)[0]) === null || _a === void 0 ? void 0 : _a.filename) === null || _b === void 0 ? void 0 : _b.split('/');
+            const folderName = (_c = segments === null || segments === void 0 ? void 0 : segments.slice(0, segments.length - 1)) === null || _c === void 0 ? void 0 : _c.join('/');
+            setApiFoldername(folderName);
+            getFileData({ fileName, folderName });
+        }
+    });
+    const toggleDeleteModal = (fileName) => {
+        var _a, _b, _c;
+        setDeleteModalOpen(!isDeleteModalOpen);
+        if (fileName) {
+            setDeleteFileName(fileName);
+            const segments = (_b = (_a = files === null || files === void 0 ? void 0 : files.filter((row) => row.filename.split('/').pop() === fileName)[0]) === null || _a === void 0 ? void 0 : _a.filename) === null || _b === void 0 ? void 0 : _b.split('/');
+            setApiFoldername((_c = segments === null || segments === void 0 ? void 0 : segments.slice(0, segments.length - 1)) === null || _c === void 0 ? void 0 : _c.join('/'));
+        }
+    };
+    const uploadFile = (fileForUpload, fileExtension) => {
+        setIsUploading(true);
+        uploadFileData({
+            variables: {
+                input: {
+                    foldername,
+                    subfolder: docType,
+                    filename: `${documentName}.${fileExtension}`,
+                    data: fileForUpload,
+                    expirationDate: ((docType === 'EO Insurance') && insuranceExpiryDate) ? insuranceExpiryDate : '',
+                    valid: true,
+                    sourceOfEOInsurance: 'Dashboard',
+                },
+            },
+            onCompleted: () => __awaiter(void 0, void 0, void 0, function* () {
+                refetchFiles(true);
+            })
+        })
+            .then(() => {
+            (0, utils_1.showToast)('success', 'File Uploaded successfully!');
+        })
+            .catch((err) => {
+            (0, utils_1.showToast)('warning', 'Upload failed! Please try again.');
+        });
+        setIsUploading(false);
+        setApiFoldername('');
+        setDocumentName('');
+    };
+    const handleUpload = (event) => {
+        const selectedFile = event.target.files && event.target.files[0];
+        if (!(0, utils_1.validateFileUpload)(selectedFile, false)) {
+            return;
+        }
+        if (selectedFile) {
+            const fileExtension = selectedFile.name.substring(selectedFile.name.lastIndexOf('.') + 1);
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                const fileForUpload = String(reader.result).split(';base64,')[1];
+                uploadFile(fileForUpload, fileExtension);
+            };
+            reader.readAsDataURL(selectedFile);
+        }
+    };
+    const handleDateChange = (date) => {
+        if (date) {
+            const currentDate = (0, date_fns_1.startOfDay)(new Date);
+            if ((0, date_fns_1.isBefore)(date, currentDate)) {
+                setError('The expiration date cannot be in the past.');
+            }
+            else {
+                setInsuranceExpiryDate(date);
+                setError(null);
+            }
+        }
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(DocumentUploadRow_1.DocumentUploadRow, { documentName: documentName, setDocumentName: setDocumentName, clientAndProject: clientAndProject, setClientAndProject: setClientAndProject, docType: docType, setDocType: setDocType, searchText: searchText, setSearchText: setSearchText, paroDocuments: paroDocuments, handleUpload: handleUpload, expiryDate: insuranceExpiryDate, handleDateChange: handleDateChange, error: error, isUploading: isUploading }),
+        react_1.default.createElement(utils_1.CustomPaper, null,
+            (files === null || files === void 0 ? void 0 : files.length) > 0 && react_1.default.createElement("div", { className: 'w-1/4' },
+                react_1.default.createElement(base_ui_1.Input, { placeholder: "Search Documents", type: "text", value: searchText, onChange: (e) => setSearchText(e.target.value) })),
+            react_1.default.createElement(core_1.Box, { mt: 2 }, (files === null || files === void 0 ? void 0 : files.length) > 0 ?
+                react_1.default.createElement(core_1.Table, { style: { overflow: 'auto' } },
+                    react_1.default.createElement(core_1.TableHead, null,
+                        react_1.default.createElement(core_1.TableRow, { className: [classes.tableCellBorder, classes.shade].join(" ") },
+                            react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }),
+                            headCells.map((headCell) => (react_1.default.createElement(core_1.TableCell, { key: headCell.id, sortDirection: orderBy === headCell.id ? order : false, align: "center", className: classes.tableCell },
+                                react_1.default.createElement(core_1.TableSortLabel, { active: orderBy === headCell.id, direction: orderBy === headCell.id ? order : 'asc', onClick: createSortHandler(headCell.id) },
+                                    react_1.default.createElement("div", { className: "flex flex-row items-center gap-x-1" },
+                                        react_1.default.createElement("div", { className: "flex flex-col justify-center items-center" },
+                                            react_1.default.createElement("b", null, headCell.label)),
+                                        orderBy === headCell.id && null))))),
+                            react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }))),
+                    react_1.default.createElement(core_1.TableBody, null, (0, utils_1.stableSort)(tableData, (0, utils_1.getComparator)(order, orderBy, descendingComparator)).slice(firstItem, lastItem).map((row, index) => {
+                        const { fileName, docType, uploadedDate, expiryDate, } = row;
+                        return (react_1.default.createElement(core_1.TableRow, { key: index },
+                            react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, index + 1),
+                            react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" },
+                                react_1.default.createElement("a", { onClick: () => handleDownloadFile(fileName), style: {
+                                        color: 'blue',
+                                        textDecoration: 'underline',
+                                        cursor: 'pointer',
+                                    } }, fileName)),
+                            react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, docType),
+                            react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, uploadedDate),
+                            react_1.default.createElement(core_1.TableCell, { className: classes.tableCell, align: "center" }, expiryDate),
+                            react_1.default.createElement(core_1.TableCell, { className: classes.tableCell },
+                                react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row", justify: "space-evenly", alignItems: "center" },
+                                    react_1.default.createElement(core_1.Tooltip, { arrow: true, placement: "top", interactive: true, className: "whitespace-nowrap", title: "Download Document" },
+                                        react_1.default.createElement(core_1.IconButton, { onClick: () => handleDownloadFile(fileName) },
+                                            " ",
+                                            react_1.default.createElement(base_icons_1.IconDocumentDownload, { size: "sm" }),
+                                            " ")),
+                                    react_1.default.createElement(core_1.Tooltip, { arrow: true, placement: "top", interactive: true, className: "whitespace-nowrap", title: "This will delete the document for you and the Client" },
+                                        react_1.default.createElement(core_1.IconButton, { onClick: () => toggleDeleteModal(fileName) },
+                                            " ",
+                                            react_1.default.createElement(base_icons_1.IconTrash, { size: "sm" }),
+                                            " "))))));
+                    })))
+                :
+                    react_1.default.createElement(core_1.Box, null,
+                        react_1.default.createElement(core_1.Divider, null),
+                        react_1.default.createElement(core_1.Typography, { variant: "h6", style: { fontWeight: 'bold' }, align: 'center' }, "No Documents Found"),
+                        react_1.default.createElement(core_1.Typography, { variant: "body1", align: 'center' }, "You haven\u2019t uploaded any documents yet. Click above and upload any .pdf , .doc, .docx, .ppt, .xls, .xlsx file. Your resume is a great way to start."))),
+            (expertFiles === null || expertFiles === void 0 ? void 0 : expertFiles.length) >= 10 && react_1.default.createElement(core_1.Box, { m: 2 },
+                react_1.default.createElement(Pagination_1.default, { total: expertFiles === null || expertFiles === void 0 ? void 0 : expertFiles.length, currentPage: currentPage, setCurrentPage: setCurrentPage, perPageItems: perPageItems, setPerPageItems: setPerPageItems, displayText: "projects" })),
+            react_1.default.createElement(DeleteDocumentModal_1.DeleteDocumentModal, { isDeleteModalOpen: isDeleteModalOpen, setDeleteModalOpen: setDeleteModalOpen, handleDelete: handleDelete, content: apiFoldername.split('/')[1] !== "EO Insurance" ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    "Are you sure you want to delete document ",
+                    react_1.default.createElement("strong", null, deleteFileName),
+                    " ?",
+                    react_1.default.createElement("br", null),
+                    "If you continue, this document will no longer be available.")) : (react_1.default.createElement(react_1.default.Fragment, null,
+                    "Are you sure you want to delete Insurance document ",
+                    react_1.default.createElement("strong", null, deleteFileName),
+                    " ?",
+                    react_1.default.createElement("br", null),
+                    react_1.default.createElement("strong", null, "Note:"),
+                    " You hold only one insurance document. Deleting it might effect your 'Matching'.")) }))));
+};
+exports.ParoDocumentsTable = ParoDocumentsTable;

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

@@ -0,0 +1,6 @@
+interface UploadFilesButtonProps {
+    onFileSelect: (file: File) => void;
+    isLoading?: boolean;
+}
+export declare const UploadFilesButton: ({ onFileSelect, isLoading, }: UploadFilesButtonProps) => JSX.Element;
+export {};

package/lib/components/DocumentCenter/UploadFilesButton.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.UploadFilesButton = void 0;
+const react_1 = __importDefault(require("react"));
+const base_ui_1 = require("@paro.io/base-ui");
+const react_2 = require("react");
+const UploadFilesButton = ({ onFileSelect, isLoading, }) => {
+    const fileInputRef = (0, react_2.useRef)(null);
+    const handleClick = () => {
+        var _a;
+        (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    };
+    const handleFileChange = (event) => {
+        var _a;
+        const file = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
+        if (file) {
+            onFileSelect(file);
+        }
+        // Reset input value to allow uploading the same file again
+        event.target.value = '';
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("input", { type: "file", ref: fileInputRef, onChange: handleFileChange, className: "hidden", accept: ".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx" }),
+        react_1.default.createElement(base_ui_1.Button, { onClick: handleClick, disabled: isLoading })));
+};
+exports.UploadFilesButton = UploadFilesButton;

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

@@ -0,0 +1 @@
+export { DocumentCenter } from './DocumentCenter';

package/lib/components/DocumentCenter/index.js

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