@paro.io/expert-shared-components 1.14.41 → 1.14.42

package/lib/components/DocumentCenter/MultiFileUploadSection.js

@@ -0,0 +1,672 @@
+"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.MultiFileUploadSection = void 0;
+const react_1 = __importStar(require("react"));
+const core_1 = require("@material-ui/core");
+const ExpandMore_1 = __importDefault(require("@material-ui/icons/ExpandMore"));
+const ExpandLess_1 = __importDefault(require("@material-ui/icons/ExpandLess"));
+const date_fns_1 = require("date-fns");
+const base_ui_1 = require("@paro.io/base-ui");
+const base_icons_1 = require("@paro.io/base-icons");
+const DragDropUpload_1 = require("./DragDropUpload");
+const utils_1 = require("../shared/utils");
+const UploadClient_1 = __importDefault(require("../shared/UploadClient"));
+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 CHUNK_SIZE = 5 * 1024 * 1024;
+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 MultiFileUploadSection = ({ paroDocuments, clientAndProjectsList, uploadExpertClientFiles, uploadInternalFile, foldername, refetchFiles, legacyFreelancerId, freelancerName, freelancerEmail, isClientPortal = false, documentUploadUrl, showAsPage, }) => {
+    var _a;
+    const [uploadItems, setUploadItems] = (0, react_1.useState)([]);
+    const [isUploading, setIsUploading] = (0, react_1.useState)(false);
+    const [showUploadSection, setShowUploadSection] = (0, react_1.useState)(true);
+    const [selectedExpert, setSelectedExpert] = (0, react_1.useState)(null);
+    const documentTypeOptions = paroDocuments
+        ? generateOptions(ParoDocumentTypes, false, isClientPortal)
+        : generateOptions(ClientDocumentTypes, false, isClientPortal);
+    const clientOptions = clientAndProjectsList
+        ? generateOptions(clientAndProjectsList, true, isClientPortal)
+        : [];
+    const defaultDocType = documentTypeOptions[0].value;
+    // Group projects by expert for client portal OR by client for expert portal
+    const expertGroups = react_1.default.useMemo(() => {
+        if (!clientAndProjectsList)
+            return [];
+        const groups = new Map();
+        clientAndProjectsList.forEach((project) => {
+            var _a, _b, _c, _d;
+            const id = isClientPortal ? (_a = project === null || project === void 0 ? void 0 : project.freelancer) === null || _a === void 0 ? void 0 : _a.id : (_b = project === null || project === void 0 ? void 0 : project.client) === null || _b === void 0 ? void 0 : _b.id;
+            const name = isClientPortal
+                ? (_c = project === null || project === void 0 ? void 0 : project.freelancer) === null || _c === void 0 ? void 0 : _c.name
+                : (_d = project === null || project === void 0 ? void 0 : project.client) === null || _d === void 0 ? void 0 : _d.name;
+            const projectStatus = (project === null || project === void 0 ? void 0 : project.status) || (project === null || project === void 0 ? void 0 : project.projectStatus);
+            // Exclude completed, DOA, and churned projects
+            const excludedStatuses = ["complete", "completed", "doa", "churned"];
+            const isValidProject = projectStatus &&
+                !excludedStatuses.includes(projectStatus.toLowerCase());
+            if (id && name) {
+                if (!groups.has(id)) {
+                    groups.set(id, {
+                        expert: { id, name },
+                        projects: [],
+                    });
+                }
+                // Only add valid projects (not completed, DOA, or churned)
+                if (isValidProject) {
+                    groups.get(id).projects.push(project);
+                }
+            }
+        });
+        // Filter out experts/clients with zero valid projects
+        return Array.from(groups.values()).filter((group) => group.projects.length > 0);
+    }, [isClientPortal, clientAndProjectsList]);
+    const handleExpertSelection = (expert) => {
+        if ((selectedExpert === null || selectedExpert === void 0 ? void 0 : selectedExpert.id) === expert.id) {
+            // Deselect if clicking the same expert
+            setSelectedExpert(null);
+            // Clear all project assignments
+            setUploadItems((prev) => prev.map((item) => (Object.assign(Object.assign({}, item), { clientAndProject: undefined }))));
+        }
+        else {
+            // Select new expert
+            setSelectedExpert(expert);
+            // Get expert's/client's valid projects (not completed, DOA, or churned)
+            const expertProjects = clientOptions.filter((opt) => {
+                var _a, _b;
+                const isMatch = isClientPortal
+                    ? ((_a = opt.freelancer) === null || _a === void 0 ? void 0 : _a.id) === expert.id
+                    : ((_b = opt.client) === null || _b === void 0 ? void 0 : _b.id) === expert.id;
+                const projectStatus = opt.status || opt.projectStatus;
+                const excludedStatuses = ["complete", "completed", "doa", "churned"];
+                const isValidProject = projectStatus &&
+                    !excludedStatuses.includes(projectStatus.toLowerCase());
+                return isMatch && isValidProject;
+            });
+            // If expert has only one active project, auto-assign it to all files
+            if (expertProjects.length === 1) {
+                setUploadItems((prev) => prev.map((item) => (Object.assign(Object.assign({}, item), { clientAndProject: expertProjects[0] }))));
+            }
+            else {
+                // Clear all project assignments when switching to multi-project expert
+                setUploadItems((prev) => prev.map((item) => (Object.assign(Object.assign({}, item), { clientAndProject: undefined }))));
+            }
+        }
+    };
+    // Get selected expert's/client's projects and count
+    const selectedExpertProjects = react_1.default.useMemo(() => {
+        if (!selectedExpert)
+            return [];
+        return clientOptions.filter((opt) => {
+            var _a, _b;
+            const isMatch = isClientPortal
+                ? ((_a = opt.freelancer) === null || _a === void 0 ? void 0 : _a.id) === selectedExpert.id
+                : ((_b = opt.client) === null || _b === void 0 ? void 0 : _b.id) === selectedExpert.id;
+            const projectStatus = opt.status || opt.projectStatus;
+            const excludedStatuses = ["complete", "completed", "doa", "churned"];
+            const isValidProject = projectStatus &&
+                !excludedStatuses.includes(projectStatus.toLowerCase());
+            return isMatch && isValidProject;
+        });
+    }, [selectedExpert, clientOptions, isClientPortal]);
+    const hasMultipleProjects = selectedExpertProjects.length > 1;
+    const hasSingleProject = selectedExpertProjects.length === 1;
+    // Check if all files have projects assigned (for multi-project experts/clients)
+    const allFilesHaveProjects = react_1.default.useMemo(() => {
+        if (!hasMultipleProjects)
+            return true;
+        return uploadItems.every((item) => { var _a; return (_a = item.clientAndProject) === null || _a === void 0 ? void 0 : _a.value; });
+    }, [uploadItems, hasMultipleProjects]);
+    const handleFilesSelected = (files) => {
+        const newItems = files.map((file) => ({
+            id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+            file,
+            documentName: file.name.substring(0, file.name.lastIndexOf(".")),
+            docType: defaultDocType,
+            clientAndProject: undefined, // Don't auto-assign, let user select
+            expiryDate: null,
+            status: "pending",
+            progress: 0,
+        }));
+        setUploadItems((prev) => [...prev, ...newItems]);
+        (0, utils_1.showToast)("success", `${files.length} file(s) added to upload queue`);
+    };
+    const removeItem = (id) => {
+        setUploadItems((prev) => prev.filter((item) => item.id !== id));
+    };
+    const updateItem = (id, updates) => {
+        setUploadItems((prev) => prev.map((item) => (item.id === id ? Object.assign(Object.assign({}, item), updates) : item)));
+    };
+    const validateItem = (item) => {
+        var _a;
+        if (!item.documentName.trim()) {
+            (0, utils_1.showToast)("warning", `Document name is required for ${item.file.name}`);
+            return false;
+        }
+        if (!paroDocuments && !((_a = item.clientAndProject) === null || _a === void 0 ? void 0 : _a.value)) {
+            (0, utils_1.showToast)("warning", `Client & Project is required for ${item.file.name}`);
+            return false;
+        }
+        if (paroDocuments && item.docType === "EO Insurance") {
+            if (!item.expiryDate) {
+                (0, utils_1.showToast)("warning", `Expiry date is required for EO Insurance documents`);
+                return false;
+            }
+            if (item.dateError) {
+                (0, utils_1.showToast)("warning", `Please fix the date error: ${item.dateError}`);
+                return false;
+            }
+        }
+        return true;
+    };
+    const uploadSingleFile = (item) => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            const fileExtension = item.file.name.substring(item.file.name.lastIndexOf(".") + 1);
+            const reader = new FileReader();
+            return new Promise((resolve) => {
+                reader.onloadend = () => __awaiter(void 0, void 0, void 0, function* () {
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+                    const fileForUpload = String(reader.result).split(";base64,")[1];
+                    const isLargeFile = item.file.size >= CHUNK_SIZE;
+                    const fileNameWithExtension = `${item.documentName}.${fileExtension}`;
+                    updateItem(item.id, { status: "uploading", progress: 10 });
+                    try {
+                        if (isLargeFile) {
+                            const uploadClient = new UploadClient_1.default({
+                                fileSelected: item.file,
+                                fileName: fileNameWithExtension,
+                                projectId: (_a = item.clientAndProject) === null || _a === void 0 ? void 0 : _a.id,
+                                documentUploadUrl,
+                            });
+                            yield uploadClient.triggerMultipartUpload();
+                        }
+                        updateItem(item.id, { progress: 50 });
+                        if (paroDocuments) {
+                            const result = yield uploadInternalFile({
+                                variables: {
+                                    input: {
+                                        foldername,
+                                        subfolder: item.docType,
+                                        filename: `${item.documentName}.${fileExtension}`,
+                                        data: fileForUpload,
+                                        expirationDate: item.docType === "EO Insurance" && item.expiryDate
+                                            ? item.expiryDate.toISOString()
+                                            : "",
+                                        valid: true,
+                                        sourceOfEOInsurance: "Dashboard",
+                                    },
+                                },
+                            });
+                            if ((_b = result === null || result === void 0 ? void 0 : result.data) === null || _b === void 0 ? void 0 : _b.uploadFileData) {
+                                updateItem(item.id, { status: "success", progress: 100 });
+                                resolve(true);
+                            }
+                            else {
+                                throw new Error("Upload failed");
+                            }
+                        }
+                        else {
+                            const result = yield uploadExpertClientFiles({
+                                variables: {
+                                    input: {
+                                        clientId: (_d = (_c = item.clientAndProject) === null || _c === void 0 ? void 0 : _c.client) === null || _d === void 0 ? void 0 : _d.id,
+                                        clientName: (_f = (_e = item.clientAndProject) === null || _e === void 0 ? void 0 : _e.client) === null || _f === void 0 ? void 0 : _f.name,
+                                        email: isClientPortal
+                                            ? (_h = (_g = item.clientAndProject) === null || _g === void 0 ? void 0 : _g.freelancer) === null || _h === void 0 ? void 0 : _h.name
+                                            : freelancerEmail,
+                                        fileName: `${item.documentName}.${fileExtension}`,
+                                        fileSize: item.file.size,
+                                        fileType: utils_1.DOCUMENT_TYPE_CONSTANTS[item.docType],
+                                        freelancerId: isClientPortal
+                                            ? (_k = (_j = item.clientAndProject) === null || _j === void 0 ? void 0 : _j.freelancer) === null || _k === void 0 ? void 0 : _k.id
+                                            : legacyFreelancerId,
+                                        freelancerName: isClientPortal
+                                            ? (_m = (_l = item.clientAndProject) === null || _l === void 0 ? void 0 : _l.freelancer) === null || _m === void 0 ? void 0 : _m.name
+                                            : freelancerName,
+                                        projectId: (_o = item.clientAndProject) === null || _o === void 0 ? void 0 : _o.id,
+                                        projectName: (_p = item.clientAndProject) === null || _p === void 0 ? void 0 : _p.name,
+                                        uploadedBy: isClientPortal ? "CLIENT" : "FREELANCER",
+                                        data: isLargeFile ? "" : fileForUpload,
+                                    },
+                                },
+                            });
+                            if ((_q = result === null || result === void 0 ? void 0 : result.data) === null || _q === void 0 ? void 0 : _q.uploadExpertClientFilesData) {
+                                updateItem(item.id, { status: "success", progress: 100 });
+                                resolve(true);
+                            }
+                            else {
+                                throw new Error("Upload failed");
+                            }
+                        }
+                    }
+                    catch (error) {
+                        updateItem(item.id, {
+                            status: "error",
+                            progress: 0,
+                            error: "Upload failed",
+                        });
+                        resolve(false);
+                    }
+                });
+                reader.readAsDataURL(item.file);
+            });
+        }
+        catch (error) {
+            updateItem(item.id, { status: "error", error: "Failed to process file" });
+            return false;
+        }
+    });
+    const handleUploadAll = () => __awaiter(void 0, void 0, void 0, function* () {
+        const validItems = uploadItems.filter((item) => {
+            if (item.status === "success")
+                return false;
+            return validateItem(item);
+        });
+        if (validItems.length === 0) {
+            (0, utils_1.showToast)("warning", "No valid files to upload");
+            return;
+        }
+        setIsUploading(true);
+        let successCount = 0;
+        let failCount = 0;
+        for (const item of validItems) {
+            const success = yield uploadSingleFile(item);
+            if (success) {
+                successCount++;
+            }
+            else {
+                failCount++;
+            }
+        }
+        setIsUploading(false);
+        if (successCount > 0) {
+            (0, utils_1.showToast)("success", `${successCount} file(s) uploaded successfully!`);
+            if (refetchFiles) {
+                yield refetchFiles();
+            }
+        }
+        if (failCount > 0) {
+            (0, utils_1.showToast)("warning", `${failCount} file(s) failed to upload`);
+        }
+        if (failCount === 0) {
+            setUploadItems([]);
+        }
+    });
+    const formatFileSize = (bytes) => {
+        if (bytes === 0)
+            return "0 Bytes";
+        const k = 1024;
+        const sizes = ["Bytes", "KB", "MB", "GB"];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
+    };
+    return (react_1.default.createElement(core_1.Box, { mb: 3 },
+        react_1.default.createElement(core_1.Paper, { elevation: 2, style: { padding: "20px", borderRadius: "12px" } },
+            react_1.default.createElement(core_1.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2 },
+                react_1.default.createElement(core_1.Box, { display: "flex", alignItems: "center" },
+                    react_1.default.createElement(core_1.Typography, { variant: "h6", className: "font-semibold" }, "Upload Documents"),
+                    uploadItems.length > 0 && (react_1.default.createElement(core_1.Chip, { label: `${uploadItems.length} ${uploadItems.length === 1 ? "file" : "files"}`, color: "primary", size: "small", style: { marginLeft: "12px" } }))),
+                react_1.default.createElement(core_1.Tooltip, { title: showUploadSection ? "Collapse" : "Expand" },
+                    react_1.default.createElement(core_1.IconButton, { onClick: () => setShowUploadSection(!showUploadSection), size: "small" }, showUploadSection ? react_1.default.createElement(ExpandLess_1.default, null) : react_1.default.createElement(ExpandMore_1.default, null)))),
+            react_1.default.createElement(core_1.Collapse, { in: showUploadSection },
+                react_1.default.createElement(core_1.Box, { mb: 3 },
+                    react_1.default.createElement(DragDropUpload_1.DragDropUpload, { onFilesSelected: handleFilesSelected, maxFileSize: 10, maxFiles: 10, acceptedFileTypes: [
+                            ".pdf",
+                            ".doc",
+                            ".xls",
+                            ".csv",
+                            ".jpg",
+                            ".png",
+                        ], disabled: isUploading })),
+                uploadItems.length > 0 &&
+                    !paroDocuments &&
+                    expertGroups.length > 0 && (react_1.default.createElement(core_1.Box, { mb: 3, p: 2, style: { backgroundColor: "#F7FAFC", borderRadius: "8px" } },
+                    react_1.default.createElement(core_1.Box, { display: "flex", alignItems: "center", mb: 2 },
+                        react_1.default.createElement(core_1.Box, { style: {
+                                width: "32px",
+                                height: "32px",
+                                borderRadius: "50%",
+                                backgroundColor: "#48BB78",
+                                color: "white",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                fontWeight: "bold",
+                                marginRight: "12px",
+                            } }, "1"),
+                        react_1.default.createElement(core_1.Typography, { variant: "subtitle1", style: { fontWeight: 600 } }, isClientPortal
+                            ? "SEND TO EXPERT — select who these files are for"
+                            : "SEND TO CLIENT — select which client these files are for")),
+                    react_1.default.createElement(core_1.Box, { display: "flex", flexWrap: "wrap", style: { gap: "8px" } }, expertGroups.map((group) => (react_1.default.createElement(core_1.Chip, { key: group.expert.id, label: react_1.default.createElement(core_1.Box, null,
+                            react_1.default.createElement("strong", null, group.expert.name),
+                            react_1.default.createElement(core_1.Box, { component: "span", ml: 1, style: { color: "#718096" } },
+                                group.projects.length,
+                                " ",
+                                group.projects.length === 1
+                                    ? "project"
+                                    : "projects")), onClick: () => handleExpertSelection(group.expert), clickable: true, disabled: group.projects.length === 0, color: "default", style: {
+                            padding: "8px 12px",
+                            height: "auto",
+                            borderRadius: "20px",
+                            border: (selectedExpert === null || selectedExpert === void 0 ? void 0 : selectedExpert.id) === group.expert.id
+                                ? "2px solid #3182CE"
+                                : "1px solid #CBD5E0",
+                            backgroundColor: (selectedExpert === null || selectedExpert === void 0 ? void 0 : selectedExpert.id) === group.expert.id
+                                ? "#EBF8FF"
+                                : "white",
+                            opacity: group.projects.length === 0 ? 0.5 : 1,
+                            cursor: group.projects.length === 0
+                                ? "not-allowed"
+                                : "pointer",
+                        } })))),
+                    selectedExpert && hasSingleProject && (react_1.default.createElement(core_1.Box, { mt: 2 },
+                        react_1.default.createElement(core_1.Chip, { label: "AUTO-ASSIGNED", size: "small", style: {
+                                backgroundColor: "#C6F6D5",
+                                color: "#22543D",
+                                fontWeight: 600,
+                            } }),
+                        react_1.default.createElement(core_1.Typography, { variant: "caption", style: { marginLeft: "8px", color: "#718096" } },
+                            ((_a = selectedExpertProjects[0]) === null || _a === void 0 ? void 0 : _a.name) || "Project",
+                            " \u2014 only project with ",
+                            selectedExpert.name))),
+                    selectedExpert && hasMultipleProjects && (react_1.default.createElement(core_1.Box, { mt: 2 },
+                        react_1.default.createElement(core_1.Chip, { label: `${selectedExpertProjects.length} PROJECTS`, size: "small", style: {
+                                backgroundColor: "#FEF5E7",
+                                color: "#D97706",
+                                fontWeight: 600,
+                            }, icon: react_1.default.createElement(base_icons_1.IconExclamation, { stroke: "#D97706" }) }),
+                        react_1.default.createElement(core_1.Typography, { variant: "caption", style: { marginLeft: "8px", color: "#718096" } }, "Select which project each file is for below"))))),
+                uploadItems.length > 0 && (react_1.default.createElement(core_1.Box, null,
+                    react_1.default.createElement(core_1.Box, null,
+                        react_1.default.createElement(core_1.Grid, { container: true, spacing: 2 }, uploadItems.map((item, index) => {
+                            var _a;
+                            return (react_1.default.createElement(core_1.Grid, { item: true, xs: 12, key: item.id },
+                                react_1.default.createElement(core_1.Paper, { elevation: 1, style: {
+                                        padding: "12px 16px",
+                                        backgroundColor: "white",
+                                        border: "1px solid #E2E8F0",
+                                        borderRadius: "4px",
+                                    } },
+                                    react_1.default.createElement(core_1.Grid, { container: true, spacing: 2 },
+                                        react_1.default.createElement(core_1.Grid, { item: true, xs: 12, sm: "auto", style: { display: "flex", alignItems: "center" } },
+                                            react_1.default.createElement(base_icons_1.IconDocument, { size: "lg" })),
+                                        react_1.default.createElement(core_1.Grid, { item: true, xs: 12, sm: true },
+                                            react_1.default.createElement(base_ui_1.Input, { type: "text", value: item.documentName, onChange: (e) => updateItem(item.id, {
+                                                    documentName: e.target.value,
+                                                }), disabled: item.status === "uploading" ||
+                                                    item.status === "success", placeholder: "Document name" }),
+                                            react_1.default.createElement(core_1.Typography, { variant: "caption", style: {
+                                                    color: "#718096",
+                                                    display: "block",
+                                                    marginTop: "4px",
+                                                } },
+                                                item.file.name,
+                                                " \u2022",
+                                                " ",
+                                                formatFileSize(item.file.size))),
+                                        react_1.default.createElement(core_1.Grid, { item: true, xs: 12, sm: 3 },
+                                            react_1.default.createElement(base_ui_1.Select, { value: item.docType, onChange: (e) => {
+                                                    updateItem(item.id, {
+                                                        docType: e.target.value,
+                                                    });
+                                                    // Clear expiry date and error if switching away from EO Insurance
+                                                    if (e.target.value !== "EO Insurance") {
+                                                        updateItem(item.id, {
+                                                            expiryDate: null,
+                                                            dateError: null,
+                                                        });
+                                                    }
+                                                }, options: documentTypeOptions, disabled: item.status === "uploading" ||
+                                                    item.status === "success", required: false })),
+                                        paroDocuments && item.docType === "EO Insurance" && (react_1.default.createElement(core_1.Grid, { item: true, xs: 12, sm: 3, style: { marginTop: "5px" } },
+                                            react_1.default.createElement(core_1.TextField, { type: "date", label: "Expiration Date", value: item.expiryDate
+                                                    ? new Date(item.expiryDate)
+                                                        .toISOString()
+                                                        .split("T")[0]
+                                                    : "", color: "primary", onChange: (e) => {
+                                                    const dateValue = e.target.value
+                                                        ? new Date(e.target.value)
+                                                        : null;
+                                                    if (dateValue) {
+                                                        const currentDate = (0, date_fns_1.startOfDay)(new Date());
+                                                        if ((0, date_fns_1.isBefore)(dateValue, currentDate)) {
+                                                            updateItem(item.id, {
+                                                                expiryDate: dateValue,
+                                                                dateError: "The expiration date cannot be in the past.",
+                                                            });
+                                                        }
+                                                        else {
+                                                            updateItem(item.id, {
+                                                                expiryDate: dateValue,
+                                                                dateError: null,
+                                                            });
+                                                        }
+                                                    }
+                                                    else {
+                                                        updateItem(item.id, {
+                                                            expiryDate: null,
+                                                            dateError: null,
+                                                        });
+                                                    }
+                                                }, InputLabelProps: {
+                                                    shrink: true,
+                                                }, disabled: item.status === "uploading" ||
+                                                    item.status === "success", fullWidth: true, variant: "outlined", size: "small", required: true, error: !!item.dateError, helperText: item.dateError }))),
+                                        !paroDocuments && !hasSingleProject && (react_1.default.createElement(core_1.Grid, { item: true, xs: 12, sm: 3 },
+                                            react_1.default.createElement(base_ui_1.Select, { value: ((_a = item.clientAndProject) === null || _a === void 0 ? void 0 : _a.value) || "", onChange: (e) => {
+                                                    // Handle empty selection
+                                                    if (e.target.value === "") {
+                                                        updateItem(item.id, {
+                                                            clientAndProject: undefined,
+                                                        });
+                                                        return;
+                                                    }
+                                                    const filteredOptions = selectedExpert
+                                                        ? clientOptions.filter((opt) => {
+                                                            var _a, _b;
+                                                            const isMatch = isClientPortal
+                                                                ? ((_a = opt.freelancer) === null || _a === void 0 ? void 0 : _a.id) ===
+                                                                    selectedExpert.id
+                                                                : ((_b = opt.client) === null || _b === void 0 ? void 0 : _b.id) ===
+                                                                    selectedExpert.id;
+                                                            const projectStatus = opt.status || opt.projectStatus;
+                                                            const excludedStatuses = [
+                                                                "complete",
+                                                                "completed",
+                                                                "doa",
+                                                                "churned",
+                                                            ];
+                                                            const isValidProject = projectStatus &&
+                                                                !excludedStatuses.includes(projectStatus.toLowerCase());
+                                                            return isMatch && isValidProject;
+                                                        })
+                                                        : clientOptions;
+                                                    const selected = filteredOptions.find((opt) => opt.value === e.target.value);
+                                                    updateItem(item.id, {
+                                                        clientAndProject: selected,
+                                                    });
+                                                }, options: [
+                                                    {
+                                                        id: "placeholder",
+                                                        value: "",
+                                                        label: "Which project?",
+                                                    },
+                                                    ...(selectedExpert
+                                                        ? clientOptions.filter((opt) => {
+                                                            var _a, _b;
+                                                            const isMatch = isClientPortal
+                                                                ? ((_a = opt.freelancer) === null || _a === void 0 ? void 0 : _a.id) ===
+                                                                    selectedExpert.id
+                                                                : ((_b = opt.client) === null || _b === void 0 ? void 0 : _b.id) ===
+                                                                    selectedExpert.id;
+                                                            const projectStatus = opt.status || opt.projectStatus;
+                                                            const excludedStatuses = [
+                                                                "complete",
+                                                                "completed",
+                                                                "doa",
+                                                                "churned",
+                                                            ];
+                                                            const isValidProject = projectStatus &&
+                                                                !excludedStatuses.includes(projectStatus.toLowerCase());
+                                                            return isMatch && isValidProject;
+                                                        })
+                                                        : clientOptions.filter((opt) => {
+                                                            const projectStatus = opt.status || opt.projectStatus;
+                                                            const excludedStatuses = [
+                                                                "complete",
+                                                                "completed",
+                                                                "doa",
+                                                                "churned",
+                                                            ];
+                                                            return (projectStatus &&
+                                                                !excludedStatuses.includes(projectStatus.toLowerCase()));
+                                                        })),
+                                                ], disabled: item.status === "uploading" ||
+                                                    item.status === "success" ||
+                                                    !selectedExpert, required: false }))),
+                                        react_1.default.createElement(core_1.Grid, { item: true, xs: 12, sm: "auto", style: {
+                                                display: "flex",
+                                                alignItems: "center",
+                                                justifyContent: "flex-end",
+                                            } },
+                                            react_1.default.createElement(core_1.Tooltip, { title: "Remove file" },
+                                                react_1.default.createElement(core_1.IconButton, { onClick: () => removeItem(item.id), disabled: item.status === "uploading", size: "small" },
+                                                    react_1.default.createElement(base_icons_1.IconTrash, { size: "md" }))))),
+                                    item.status === "uploading" && (react_1.default.createElement(core_1.Box, { mt: 1, ml: { xs: 0, sm: 6 } },
+                                        react_1.default.createElement(core_1.Typography, { variant: "caption", style: { color: "#3182CE" } },
+                                            "Uploading ",
+                                            item.progress,
+                                            "%..."))),
+                                    item.status === "success" && (react_1.default.createElement(core_1.Box, { mt: 1, ml: { xs: 0, sm: 6 } },
+                                        react_1.default.createElement(core_1.Typography, { variant: "caption", style: { color: "#38A169" } }, "\u2713 Upload successful"))),
+                                    item.status === "error" && (react_1.default.createElement(core_1.Box, { mt: 1, ml: { xs: 0, sm: 6 } },
+                                        react_1.default.createElement(core_1.Typography, { variant: "caption", style: { color: "#E53E3E" } }, "\u2717 Upload failed"))))));
+                        }))),
+                    react_1.default.createElement(core_1.Divider, { style: { marginTop: "24px" } }),
+                    react_1.default.createElement(core_1.Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, mt: 2 },
+                        react_1.default.createElement(core_1.Box, null,
+                            react_1.default.createElement(core_1.Typography, { variant: "body2", style: { color: "#718096" } }, paroDocuments ? (react_1.default.createElement(react_1.default.Fragment, null,
+                                react_1.default.createElement("span", { style: { fontWeight: "bold" } }, uploadItems.filter((i) => i.status !== "success")
+                                    .length),
+                                " ",
+                                uploadItems.filter((i) => i.status !== "success")
+                                    .length === 1
+                                    ? "file"
+                                    : "files")) : (react_1.default.createElement(react_1.default.Fragment, null,
+                                react_1.default.createElement("span", { style: { fontWeight: "bold" } }, uploadItems.filter((i) => i.status !== "success")
+                                    .length),
+                                " ",
+                                "files \u2022",
+                                " ",
+                                react_1.default.createElement("span", { style: { color: "#718096" } },
+                                    react_1.default.createElement("span", { style: { fontWeight: "bold" } }, uploadItems.filter((i) => {
+                                        var _a;
+                                        return ((_a = i.clientAndProject) === null || _a === void 0 ? void 0 : _a.value) &&
+                                            i.status !== "success";
+                                    }).length),
+                                    " ",
+                                    "project-assigned"),
+                                " ",
+                                "\u2022",
+                                " ",
+                                react_1.default.createElement("span", { style: { color: "#D97706" } },
+                                    react_1.default.createElement("span", { style: { fontWeight: "bold" } }, uploadItems.filter((i) => {
+                                        var _a;
+                                        return !((_a = i.clientAndProject) === null || _a === void 0 ? void 0 : _a.value) &&
+                                            i.status !== "success";
+                                    }).length),
+                                    " ",
+                                    "need project"))))),
+                        react_1.default.createElement(core_1.Box, null,
+                            react_1.default.createElement(core_1.Box, { component: "span", ml: 1 },
+                                react_1.default.createElement(base_ui_1.Button, { label: isUploading
+                                        ? "Uploading..."
+                                        : `Upload ${uploadItems.filter((i) => i.status !== "success").length} Files`, onClick: handleUploadAll, disabled: uploadItems.length === 0 ||
+                                        isUploading ||
+                                        uploadItems.every((i) => i.status === "success") ||
+                                        (!paroDocuments && !selectedExpert) ||
+                                        (hasMultipleProjects && !allFilesHaveProjects) ||
+                                        uploadItems.some((i) => paroDocuments &&
+                                            i.docType === "EO Insurance" &&
+                                            (!i.expiryDate || !!i.dateError) &&
+                                            i.status !== "success"), color: "primary", isLoading: isUploading }))))))))));
+};
+exports.MultiFileUploadSection = MultiFileUploadSection;
+exports.default = exports.MultiFileUploadSection;