@paro.io/expert-shared-components 1.9.6 → 1.9.8

package/lib/components/OrganizationChart/PersonCard.js

@@ -7,11 +7,11 @@ const react_1 = __importDefault(require("react"));
 const PersonCard = ({ name, position, experience, location, initial, noOfchildren, }) => (react_1.default.createElement("div", { className: "relative group" },
     react_1.default.createElement("div", { className: "flex flex-col items-center" },
         react_1.default.createElement("div", { className: "flex flex-col items-center mb-2" },
-            react_1.default.createElement("div", { className: `
-                        -mb-4 z-10 w-12 h-12 rounded-full bg-[#434889] flex items-center justify-center 
-                        text-white font-semibold text-lg
-                        transition-all duration-200 hover:bg-[#102377]
-                        ${noOfchildren > 0 ? 'hover:shadow-lg' : ''}
+            react_1.default.createElement("div", { className: `
+                        -mb-4 z-10 w-12 h-12 rounded-full bg-[#434889] flex items-center justify-center 
+                        text-white font-semibold text-lg
+                        transition-all duration-200 hover:bg-[#102377]
+                        ${noOfchildren > 0 ? 'hover:shadow-lg' : ''}
                     ` },
                 initial,
                 noOfchildren > 0 && (react_1.default.createElement("div", { className: "absolute -bottom-3 w-6 h-6 rounded bg-gray-400 flex items-center justify-center text-white text-sm" }, noOfchildren)))),

package/lib/components/OrganizationChart/utils.js

@@ -50,86 +50,86 @@ const transformEmployeeData = (employeeData, firstName, lastName, primaryService
     };
 };
 exports.transformEmployeeData = transformEmployeeData;
-exports.ConnectorContainer = styled_components_1.default.div `
-    position: relative;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    &.parent-vertical-line {
-        height: 40px;
-        position: relative;
-
-        &:before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 50%;
-            width: 2px;
-            height: calc(100% + 2px);
-            background-color: #D8D8D8;
-            transform: translateX(-50%);
-        }
-    }
-
-    &.child-vertical-line {
-        height: 40px;
-        position: relative;
-        margin-bottom: 4px;
-        &:before {
-            content: '';
-            position: absolute;
-            left: 50%;
-            width: 2px;
-            height: 100%;
-            background-color: #D8D8D8;
-            transform: translateX(-50%);
-        }
-
-        &:after {
-            content: '';
-            position: absolute;
-            bottom: -4px;
-            left: 50%;
-            width: 8px;
-            height: 8px;
-            border-right: 2px solid #D8D8D8;
-            border-bottom: 2px solid #D8D8D8;
-            transform: translateX(-50%) rotate(45deg);
-            background-color: transparent;
-        }
-    }
-
-    &.horizontal-line {
-        position: absolute;
-        height: 2px;
-        background-color: #D8D8D8;
-        top: 0;
-        width: 100%;
-    }
+exports.ConnectorContainer = styled_components_1.default.div `
+    position: relative;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &.parent-vertical-line {
+        height: 40px;
+        position: relative;
+
+        &:before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 50%;
+            width: 2px;
+            height: calc(100% + 2px);
+            background-color: #D8D8D8;
+            transform: translateX(-50%);
+        }
+    }
+
+    &.child-vertical-line {
+        height: 40px;
+        position: relative;
+        margin-bottom: 4px;
+        &:before {
+            content: '';
+            position: absolute;
+            left: 50%;
+            width: 2px;
+            height: 100%;
+            background-color: #D8D8D8;
+            transform: translateX(-50%);
+        }
+
+        &:after {
+            content: '';
+            position: absolute;
+            bottom: -4px;
+            left: 50%;
+            width: 8px;
+            height: 8px;
+            border-right: 2px solid #D8D8D8;
+            border-bottom: 2px solid #D8D8D8;
+            transform: translateX(-50%) rotate(45deg);
+            background-color: transparent;
+        }
+    }
+
+    &.horizontal-line {
+        position: absolute;
+        height: 2px;
+        background-color: #D8D8D8;
+        top: 0;
+        width: 100%;
+    }
 `;
-exports.InfoCard = (0, styled_components_1.default)(core_1.Card) `
-    position: absolute;
-    top: 10;
-    right: 0;
-    width: fit-content;
-    max-width: 30%;
-    z-index: 1000;
-    padding: 8px;
-    margin: 16px;
-    background-color: white;
-    border-radius: 8px;
-    box-shadow: none;
-    border: 1px solid #e2e8f0;
-    max-height: 90vh;
-    overflow: auto;
-    @media (max-width: 600px) {
-        position: absolute;
-        top: 20;
-        right: auto;
-        min-width: 90%;
-    }
+exports.InfoCard = (0, styled_components_1.default)(core_1.Card) `
+    position: absolute;
+    top: 10;
+    right: 0;
+    width: fit-content;
+    max-width: 30%;
+    z-index: 1000;
+    padding: 8px;
+    margin: 16px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: none;
+    border: 1px solid #e2e8f0;
+    max-height: 90vh;
+    overflow: auto;
+    @media (max-width: 600px) {
+        position: absolute;
+        top: 20;
+        right: auto;
+        min-width: 90%;
+    }
 `;
 exports.CustomDialog = (0, core_1.styled)(Dialog_1.default)(({ theme }) => ({
     '& .MuiDialog-paper': {

package/lib/components/ProjectCard/ActiveProjectCard.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+export declare const useStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"tooltip">;
+interface ActiveProjectCardProps {
+    project: any;
+    projectsData: any;
+    expertName: string;
+    freelancerId: number;
+    freelancerEmail: string;
+    isAuthenticated: boolean;
+    activeProject?: boolean;
+    adhocProject?: boolean;
+    upcomingProject?: boolean;
+    selectedTab: number;
+    projectTagsMap?: any;
+    user: any;
+    internalPortal?: boolean;
+    csmUserGroup?: boolean;
+    clientPortal?: boolean;
+    signedSow?: boolean;
+    isStageProd: string;
+    isRequestReviewEnabled?: boolean;
+}
+interface AuthRouteProps {
+    updateProjectStatusMutation?: any;
+    GetAllProjectIrprDetailsForFreelancerDocument?: any;
+    updateParoProjectTagsMutation?: any;
+    GetParoProjectsDocument?: any;
+    updateProjectTagReviewStatusMutation?: any;
+    getSowLazyQuery?: any;
+    createChangeRequestMutation?: any;
+    createOrUpdateRatingRequestMutation?: any;
+    updateProjectTaskMutation?: any;
+    submitProjectHoursMutation?: any;
+    getAuth0Roles?: any;
+    createOrUpdateRating?: any;
+    getParoProjectsByClientIdDocument?: any;
+}
+interface unAuthRouteProps {
+    updateProjectStatus?: any;
+    updateProjectTags?: any;
+    sendParoSupportEmail?: any;
+    submitProjectHoursLambda?: any;
+    updateProjectTask?: any;
+    createChangeRequest?: any;
+}
+export declare const CheckItem: ({ checked, text }: any) => React.JSX.Element;
+export declare const getAllProjectRecommendationData: ({ projectData }: any) => {
+    minFloorHours: any;
+    maxFloorHours: any;
+    loggedHours: string | number;
+    weeklyHoursLogged: any;
+    hoursPerWeek: number | false;
+    minFloorName: string;
+    hoursToComplete: number | false;
+    remainingWeeks: number;
+};
+export declare const ActiveProjectCard: ({ project, projectsData, expertName, freelancerId, freelancerEmail, isAuthenticated, activeProject, adhocProject, upcomingProject, selectedTab, projectTagsMap, updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation, GetParoProjectsDocument, updateProjectTagReviewStatusMutation, updateProjectStatus, updateProjectTags, getSowLazyQuery, sendParoSupportEmail, createChangeRequestMutation, createChangeRequest, createOrUpdateRatingRequestMutation, updateProjectTaskMutation, updateProjectTask, submitProjectHoursMutation, getAuth0Roles, submitProjectHoursLambda, createOrUpdateRating, getParoProjectsByClientIdDocument, user, internalPortal, csmUserGroup, clientPortal, signedSow, isStageProd, isRequestReviewEnabled, }: ActiveProjectCardProps & AuthRouteProps & unAuthRouteProps) => JSX.Element;
+export {};

package/lib/components/ProjectCard/ActiveProjectCard.js

@@ -0,0 +1,162 @@
+"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.ActiveProjectCard = exports.getAllProjectRecommendationData = exports.CheckItem = exports.useStyles = void 0;
+const react_1 = __importStar(require("react"));
+const base_icons_1 = require("@paro.io/base-icons");
+const base_ui_1 = require("@paro.io/base-ui");
+const core_1 = require("@material-ui/core");
+const lab_1 = require("@material-ui/lab");
+const dayjs_1 = __importDefault(require("dayjs"));
+const styles_1 = require("@material-ui/core/styles");
+const Star_1 = __importDefault(require("@material-ui/icons/Star"));
+const RightCardUI_1 = require("./RightCardUI");
+const LeftCardUI_1 = require("./LeftCardUI");
+const CenterCardUI_1 = require("./CenterCardUI");
+const utc_1 = __importDefault(require("dayjs/plugin/utc"));
+const timezone_1 = __importDefault(require("dayjs/plugin/timezone"));
+dayjs_1.default.extend(utc_1.default);
+dayjs_1.default.extend(timezone_1.default);
+exports.useStyles = (0, styles_1.makeStyles)({
+    tooltip: {
+        fontSize: ".9em",
+    },
+});
+const CheckItem = ({ checked, text }) => (react_1.default.createElement("div", { className: "p-2 w-full border-2 border-solid border-[#F1F5F9] rounded-md flex items-center" },
+    checked ? react_1.default.createElement(base_icons_1.IconCheck, { className: "mr-2 text-[#248384]" }) : react_1.default.createElement(base_icons_1.IconX, { className: "mr-2 text-[#A73A43]" }),
+    react_1.default.createElement("p", null, text)));
+exports.CheckItem = CheckItem;
+const getAllProjectRecommendationData = ({ projectData }) => {
+    var _a;
+    const date = (0, dayjs_1.default)();
+    const lastDayOfMonth = (0, dayjs_1.default)().endOf('month');
+    const daysLeftInProject = (0, dayjs_1.default)(projectData === null || projectData === void 0 ? void 0 : projectData.endDate).diff(date, 'day');
+    const checkDays = (0, dayjs_1.default)(projectData === null || projectData === void 0 ? void 0 : projectData.endDate).isBefore(lastDayOfMonth) ? lastDayOfMonth.date() : daysLeftInProject;
+    const remainingWeeks = Math.ceil(checkDays / 7);
+    const minFloorHours = (projectData === null || projectData === void 0 ? void 0 : projectData.minFloorHours) !== null && (projectData === null || projectData === void 0 ? void 0 : projectData.minFloorHours) !== undefined && (projectData === null || projectData === void 0 ? void 0 : projectData.minFloorHours) !== 0 ? projectData === null || projectData === void 0 ? void 0 : projectData.minFloorHours : projectData === null || projectData === void 0 ? void 0 : projectData.totalEstimatedMinHours;
+    const maxFloorHours = projectData === null || projectData === void 0 ? void 0 : projectData.maxHours;
+    const loggedHours = (projectData === null || projectData === void 0 ? void 0 : projectData.hoursInvoiced) ? (_a = Number(projectData === null || projectData === void 0 ? void 0 : projectData.hoursInvoiced)) === null || _a === void 0 ? void 0 : _a.toFixed(2) : 0;
+    const weeklyHoursLogged = projectData === null || projectData === void 0 ? void 0 : projectData.weeklyMinHoursLogged;
+    const hoursToComplete = minFloorHours > 0 && (loggedHours >= minFloorHours ? 0 : Number(minFloorHours) - Number(loggedHours));
+    const hoursPerWeek = (hoursToComplete && remainingWeeks) && hoursToComplete / remainingWeeks;
+    const minFloorName = (projectData === null || projectData === void 0 ? void 0 : projectData.minFloorHours) !== null && (projectData === null || projectData === void 0 ? void 0 : projectData.minFloorHours) !== undefined && (projectData === null || projectData === void 0 ? void 0 : projectData.minFloorHours) !== 0 ? "Min Floor Hours" : "Estimated Min Hours";
+    return {
+        minFloorHours,
+        maxFloorHours,
+        loggedHours,
+        weeklyHoursLogged,
+        hoursPerWeek,
+        minFloorName,
+        hoursToComplete,
+        remainingWeeks
+    };
+};
+exports.getAllProjectRecommendationData = getAllProjectRecommendationData;
+const checkProjectFrequencyType = (projectFrequencyId) => {
+    let projectFrequencyType = '';
+    if (projectFrequencyId === 1 || projectFrequencyId === 2) {
+        projectFrequencyType = "Recurring";
+    }
+    else if (projectFrequencyId === 3) {
+        projectFrequencyType = "One-time";
+    }
+    return projectFrequencyType;
+};
+const checkProjectRateType = (freelanceRateTypeId) => {
+    let projectType = '';
+    if (freelanceRateTypeId === 1) {
+        projectType = "Hourly";
+    }
+    else if (freelanceRateTypeId === 2) {
+        projectType = "Fixed";
+    }
+    return projectType;
+};
+const ActiveProjectCard = ({ project, projectsData, expertName, freelancerId, freelancerEmail, isAuthenticated, activeProject, adhocProject, upcomingProject, selectedTab, projectTagsMap, updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation, GetParoProjectsDocument, updateProjectTagReviewStatusMutation, updateProjectStatus, updateProjectTags, getSowLazyQuery, sendParoSupportEmail, createChangeRequestMutation, createChangeRequest, createOrUpdateRatingRequestMutation, updateProjectTaskMutation, updateProjectTask, submitProjectHoursMutation, getAuth0Roles, submitProjectHoursLambda, createOrUpdateRating, getParoProjectsByClientIdDocument, user, internalPortal = false, csmUserGroup = false, clientPortal = false, signedSow = false, isStageProd, isRequestReviewEnabled = false, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    const [editEndDate, setEditEndDate] = (0, react_1.useState)(false);
+    const [editStartDate, setEditStartDate] = (0, react_1.useState)(false);
+    const [showTimeModal, setShowTimeModal] = (0, react_1.useState)(false);
+    const [singleProjectData, setSingleProjectData] = (0, react_1.useState)();
+    const projectHealth = (_a = project === null || project === void 0 ? void 0 : project.healthGrade) !== null && _a !== void 0 ? _a : "!";
+    const [expand, setExpand] = (0, react_1.useState)(projectHealth === "!" ? true : false);
+    const projectRateType = checkProjectRateType((_b = project === null || project === void 0 ? void 0 : project.projectScope) === null || _b === void 0 ? void 0 : _b.freelanceRateTypeId);
+    const projectFrequencyType = checkProjectFrequencyType((_c = project === null || project === void 0 ? void 0 : project.projectScope) === null || _c === void 0 ? void 0 : _c.projectFrequencyId);
+    const checkStartDate = (0, dayjs_1.default)(project === null || project === void 0 ? void 0 : project.startDate).isSame((0, dayjs_1.default)(), 'day') || (0, dayjs_1.default)(project === null || project === void 0 ? void 0 : project.startDate).isAfter((0, dayjs_1.default)());
+    const classes = (0, exports.useStyles)();
+    let sumOfRatingValuesOfSingleProject = 0;
+    project === null || project === void 0 ? void 0 : project.rating.forEach((rating) => sumOfRatingValuesOfSingleProject += rating.overallRating);
+    const [ratingValue, setRatingValue] = (0, react_1.useState)((sumOfRatingValuesOfSingleProject / ((_d = project === null || project === void 0 ? void 0 : project.rating) === null || _d === void 0 ? void 0 : _d.length)).toFixed(1));
+    (0, react_1.useEffect)(() => {
+        setSingleProjectData(projectsData.find((projectData) => projectData.id === (project === null || project === void 0 ? void 0 : project.id)));
+    }, [projectsData, project]);
+    const sortRatingsAndRequests = (data) => {
+        return [...data].sort((a, b) => (0, dayjs_1.default)(b === null || b === void 0 ? void 0 : b.createdAt).diff((0, dayjs_1.default)(a === null || a === void 0 ? void 0 : a.createdAt), 'days'));
+    };
+    if ((project === null || project === void 0 ? void 0 : project.rating.length) > 1) {
+        project.rating = sortRatingsAndRequests(project.rating);
+    }
+    if ((project === null || project === void 0 ? void 0 : project.ratingRequest.length) > 1) {
+        project.ratingRequest = sortRatingsAndRequests(project.ratingRequest);
+    }
+    const showRating = ratingValue && (0, dayjs_1.default)((0, dayjs_1.default)().tz('America/Los_Angeles').format('YYYY-MM-DD HH:mm:ss')).diff((0, dayjs_1.default)((_f = (_e = project === null || project === void 0 ? void 0 : project.rating) === null || _e === void 0 ? void 0 : _e[0]) === null || _f === void 0 ? void 0 : _f.createdAt.replace('Z', '')).format('YYYY-MM-DD HH:mm:ss'), 'hours') > 48;
+    const freelancerName = (_j = (_h = (_g = project === null || project === void 0 ? void 0 : project.projectScope) === null || _g === void 0 ? void 0 : _g.freelancer) === null || _h === void 0 ? void 0 : _h.name) !== null && _j !== void 0 ? _j : ((_m = (_l = (_k = project === null || project === void 0 ? void 0 : project.projectScope) === null || _k === void 0 ? void 0 : _k.freelancer) === null || _l === void 0 ? void 0 : _l.freelancerProfile) === null || _m === void 0 ? void 0 : _m.firstName) + ' ' + ((_q = (_p = (_o = project === null || project === void 0 ? void 0 : project.projectScope) === null || _o === void 0 ? void 0 : _o.freelancer) === null || _p === void 0 ? void 0 : _p.freelancerProfile) === null || _q === void 0 ? void 0 : _q.lastName);
+    const displayName = clientPortal ? freelancerName : (_r = project === null || project === void 0 ? void 0 : project.client) === null || _r === void 0 ? void 0 : _r.name;
+    return (react_1.default.createElement("div", { className: "w-full mb-8" },
+        react_1.default.createElement("h1", { className: "font-bold text-lg m-2" },
+            displayName,
+            ":",
+            " ", project === null || project === void 0 ? void 0 :
+            project.name),
+        react_1.default.createElement(core_1.Card, { style: { padding: '12px' } },
+            react_1.default.createElement("div", { className: "flex flex-col-reverse justify-between w-full mt-3 md:flex-row gap-y-4" },
+                react_1.default.createElement("div", { className: "flex flex-col" },
+                    react_1.default.createElement("h1", null, displayName),
+                    react_1.default.createElement("p", { className: "font-bold text-md mt-1" }, `${(_s = project === null || project === void 0 ? void 0 : project.name) !== null && _s !== void 0 ? _s : "Project"} ${(singleProjectData === null || singleProjectData === void 0 ? void 0 : singleProjectData.minFloorHours) ? "WITH" : "WITHOUT"} a min floor.`)),
+                react_1.default.createElement("div", { className: "flex flex-row gap-x-2 items-center ml-auto" },
+                    showRating && react_1.default.createElement("div", { className: "flex flex-auto items-center justify-between" },
+                        react_1.default.createElement(lab_1.Rating, { name: "read-only", value: Number(ratingValue), precision: 0.5, size: "large", readOnly: true, emptyIcon: react_1.default.createElement(Star_1.default, { fontSize: "inherit" }) })),
+                    (singleProjectData === null || singleProjectData === void 0 ? void 0 : singleProjectData.minFloorHours) && !adhocProject ? react_1.default.createElement(core_1.Tooltip, { classes: { tooltip: classes.tooltip }, title: "Minimum Floor Hours is the minimum amount of hours needed to log for this project.", placement: "top", arrow: true },
+                        react_1.default.createElement("div", { className: "h-10 w-14 bg-[#FDD7A5] border-2 border-solid border-[#F1F5F9] rounded-md flex place-content-center" },
+                            react_1.default.createElement("p", { className: "font-bold text-md self-center" }, "MF"))) : "",
+                    (!(clientPortal || (projectRateType === "Fixed" || adhocProject))) &&
+                        react_1.default.createElement(core_1.Tooltip, { classes: { tooltip: classes.tooltip }, title: ['A', 'B', 'C', 'D'].includes(projectHealth) ? "This is your current grade for this project based on the amount of work you have completed to how much is expected to be completed throughout the duration of the project" : "If your project health grade is a ! log more than 60% of your Max Hours to change your grade. Please expand this section and contact your Customer Success Manager if you have questions.", placement: "top", arrow: true },
+                            react_1.default.createElement("div", { className: `h-10 w-14 border-2 border-solid rounded-md flex place-content-center ${['A', 'B', 'C', 'D'].includes(projectHealth) ? (['A', 'B'].includes(projectHealth) && "bg-[#F1F5F9] border-[#A3DCD8]") || (['C', 'D'].includes(projectHealth) && "bg-[#A73A43] border-[#F9C34F]") : "bg-[#A73A43] text-[#F1F5F9] border-[#F1F5F9]"}` },
+                                react_1.default.createElement("p", { className: "font-bold text-md self-center" }, projectHealth))),
+                    checkStartDate ?
+                        react_1.default.createElement("div", { className: "h-10 w-14 bg-[#F1F5F9] border-[#A3DCD8] border-2 border-solid rounded-md flex place-content-center" },
+                            react_1.default.createElement("p", { className: "font-bold text-md self-center" }, "NEW !")) : "",
+                    react_1.default.createElement("div", { className: "h-10 w-14 bg-[#F1F5F9] rounded-md flex place-content-center" },
+                        react_1.default.createElement(base_ui_1.Button, { onClick: () => { setExpand(!expand); }, className: "font-bold text-md p-8", icon: expand ? react_1.default.createElement(base_icons_1.IconChevronUp, null) : react_1.default.createElement(base_icons_1.IconChevronDown, null) })))),
+            expand && react_1.default.createElement("div", { className: `flex w-full p-4 gap-x-10 gap-y-10 ${projectRateType === "Fixed" ? "flex-col" : "flex-col md:flex-row"}` },
+                react_1.default.createElement(LeftCardUI_1.LeftCardUI, { projectData: singleProjectData, projectFrequencyType: projectFrequencyType, projectRateType: projectRateType, project: project, isAuthenticated: isAuthenticated, adhocProject: adhocProject, activeProject: activeProject, freelancerId: freelancerId, selectedTab: selectedTab, updateProjectTaskMutation: updateProjectTaskMutation, GetAllProjectIrprDetailsForFreelancerDocument: GetAllProjectIrprDetailsForFreelancerDocument, updateProjectTask: updateProjectTask, clientPortal: clientPortal }),
+                react_1.default.createElement("div", { className: "flex flex-col flex-grow md:flex-row gap-x-0 justify-around" },
+                    react_1.default.createElement(CenterCardUI_1.CenterCardUI, { startDate: project === null || project === void 0 ? void 0 : project.startDate, endDate: project === null || project === void 0 ? void 0 : project.endDate, projectData: singleProjectData, projectRateType: projectRateType, project: project, projectFrequencyType: projectFrequencyType, adhocProject: adhocProject, clientPortal: clientPortal }),
+                    react_1.default.createElement(RightCardUI_1.RightCardUI, { project: project, expertName: expertName, freelancerEmail: freelancerEmail, freelancerId: freelancerId, isAuthenticated: isAuthenticated, editEndDate: editEndDate, setEditEndDate: setEditEndDate, editStartDate: editStartDate, setEditStartDate: setEditStartDate, showTimeModal: showTimeModal, setShowTimeModal: setShowTimeModal, setSingleProjectData: setSingleProjectData, projectData: singleProjectData, checkStartDate: checkStartDate, activeProject: activeProject, projectRateType: projectRateType, projectFrequencyType: projectFrequencyType, upcomingProject: upcomingProject, selectedTab: selectedTab, showRating: !!showRating, projectTagsMap: projectTagsMap, updateProjectStatusMutation: updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument: GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation: updateParoProjectTagsMutation, GetParoProjectsDocument: GetParoProjectsDocument, updateProjectTagReviewStatusMutation: updateProjectTagReviewStatusMutation, updateProjectStatus: updateProjectStatus, updateProjectTags: updateProjectTags, getSowLazyQuery: getSowLazyQuery, sendParoSupportEmail: sendParoSupportEmail, createChangeRequestMutation: createChangeRequestMutation, createChangeRequest: createChangeRequest, createOrUpdateRatingRequestMutation: createOrUpdateRatingRequestMutation, submitProjectHoursMutation: submitProjectHoursMutation, getAuth0Roles: getAuth0Roles, submitProjectHoursLambda: submitProjectHoursLambda, createOrUpdateRating: createOrUpdateRating, getParoProjectsByClientIdDocument: getParoProjectsByClientIdDocument, user: user, internalPortal: internalPortal, csmUserGroup: csmUserGroup, clientPortal: clientPortal, signedSow: signedSow, isStageProd: isStageProd, isRequestReviewEnabled: isRequestReviewEnabled }))))));
+};
+exports.ActiveProjectCard = ActiveProjectCard;

package/lib/components/ProjectCard/CenterCardUI.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface CenterCardUIProps {
+    startDate: any;
+    endDate: any;
+    projectRateType: string;
+    projectData: any;
+    projectFrequencyType: string;
+    project: any;
+    adhocProject: any;
+    clientPortal: boolean;
+}
+export declare const CenterCardUI: ({ startDate, endDate, projectRateType, projectData, projectFrequencyType, project, adhocProject, clientPortal, }: CenterCardUIProps) => React.JSX.Element;
+export {};

package/lib/components/ProjectCard/CenterCardUI.js

@@ -0,0 +1,133 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CenterCardUI = void 0;
+const react_1 = __importDefault(require("react"));
+const ProgressBar_1 = require("./ProgressBar");
+const dayjs_1 = __importDefault(require("dayjs"));
+const base_ui_1 = require("@paro.io/base-ui");
+const utc_1 = __importDefault(require("dayjs/plugin/utc"));
+const timezone_1 = __importDefault(require("dayjs/plugin/timezone"));
+const ActiveProjectCard_1 = require("./ActiveProjectCard");
+dayjs_1.default.extend(utc_1.default);
+dayjs_1.default.extend(timezone_1.default);
+const getRecommendations = ({ weeklyHoursLogged, hoursToComplete, loggedHours, minFloorHours, maxFloorHours, hoursPerWeek, startDate, endDate, minFloorName, projectFrequencyType, projectRateType, tasks }) => {
+    const items = [];
+    if ((0, dayjs_1.default)(endDate).isBefore(startDate, 'day')) {
+        items.push(react_1.default.createElement("li", { key: "pastStartDate" }, "Please select a future end date or move your start date to a previous date."));
+    }
+    if ((0, dayjs_1.default)(startDate).isBefore((0, dayjs_1.default)(), 'day') && loggedHours <= 0) {
+        items.push(react_1.default.createElement("li", { key: "pastStartDate" }, "Please log hours for this project or request to move the project start date to later a date."));
+    }
+    if (!endDate) {
+        items.push(react_1.default.createElement("li", { key: "noEndDate" }, "Please edit end date above for this project."));
+    }
+    if (endDate && (0, dayjs_1.default)(endDate).isBefore((0, dayjs_1.default)(), 'day')) {
+        items.push(react_1.default.createElement("li", { key: "pastEndDate" }, "Please edit end date above for this project since today's date is past the project's listed end date."));
+    }
+    if (loggedHours < minFloorHours && endDate && !weeklyHoursLogged && hoursPerWeek && ((0, dayjs_1.default)(startDate).isSame((0, dayjs_1.default)(), 'day') || (0, dayjs_1.default)(startDate).isAfter((0, dayjs_1.default)()))) {
+        items.push(react_1.default.createElement("li", { key: "behindMFH" }, `You need to log ${(0, ProgressBar_1.formatNumberingSystem)(hoursPerWeek)} hours per week to get back on track by the ${projectFrequencyType === "Recurring" ? "end of the month." : "end date."}`));
+    }
+    if (loggedHours <= minFloorHours) {
+        items.push(react_1.default.createElement("li", { key: "lessWorkExpected" }, "If you are getting less work than expected, please reach out to your Customer Success Manager."));
+    }
+    if (weeklyHoursLogged && hoursToComplete && endDate && hoursPerWeek) {
+        items.push(react_1.default.createElement("li", { key: "onTrackMFH" },
+            "Great work, you are on track to complete this project on time! Continue to log ",
+            (0, ProgressBar_1.formatNumberingSystem)(hoursPerWeek),
+            " hours per week until the project end date, in order to stay on track for this project."));
+    }
+    if (loggedHours >= minFloorHours && loggedHours != 0 && !(loggedHours >= maxFloorHours)) {
+        items.push(react_1.default.createElement("li", { key: "completedMFH" },
+            "Congrats you have completed your project's ",
+            minFloorName,
+            "!"));
+    }
+    if ((loggedHours == maxFloorHours) && loggedHours != 0) {
+        items.push(react_1.default.createElement("li", { key: "completedMFH" }, "Congrats you have completed the Max Hours for this project!"));
+    }
+    if (loggedHours > maxFloorHours && loggedHours != 0) {
+        items.push(react_1.default.createElement("li", { key: "overHours" }, "You have logged too much time for this project. Please reach out to your Custom Success Manager if you wish to add additional hours."));
+    }
+    if (projectRateType === "Fixed" && tasks && tasks.length > 0) {
+        const pendingTasks = tasks.filter((task) => task.statusId === 2);
+        const inProgressTasks = tasks.filter((task) => task.statusId === 3);
+        const completedTasks = tasks.filter((task) => task.statusId === 1);
+        if (completedTasks.length === 0) {
+            items.push(react_1.default.createElement("li", { key: "allTasksPending" }, "Please check the status of your SOW tasks and mark them completed when finished before being able to end your project."));
+        }
+        if (completedTasks.length > 0 && (inProgressTasks.length > 0 || pendingTasks.length > 0)) {
+            items.push(react_1.default.createElement("li", { key: "inProgressTasks" }, "Please change all statuses that have In-Progress or Pending for this project before clicking End Project."));
+        }
+    }
+    return items;
+};
+const calculateFixedEarnings = (projectFrequencyType, projectData, clientPortal) => {
+    const { expertRate, expertSowValue } = projectData;
+    return projectFrequencyType === "Recurring" ? '$' + `${clientPortal ? expertRate * 2 : expertRate}` + '/mo' : '$' + expertSowValue;
+};
+const CenterCardUI = ({ startDate, endDate, projectRateType, projectData, projectFrequencyType, project, adhocProject, clientPortal, }) => {
+    var _a, _b, _c, _d;
+    const date = (0, dayjs_1.default)();
+    const today = date.date();
+    const lastDayOfMonth = (0, dayjs_1.default)().endOf('month');
+    const daysInOneTimeProject = (endDate && startDate) ? Math.max((0, dayjs_1.default)(endDate).diff((0, dayjs_1.default)(startDate), 'days'), 0) : "-";
+    const daysLeftInOneTime = endDate ? Math.max((0, dayjs_1.default)(endDate).diff((0, dayjs_1.default)(date), 'days'), 0) : "-";
+    const { minFloorHours, maxFloorHours, loggedHours, weeklyHoursLogged, hoursPerWeek, minFloorName, hoursToComplete, remainingWeeks } = (0, ActiveProjectCard_1.getAllProjectRecommendationData)({ projectData });
+    const totalDays = lastDayOfMonth.date();
+    const payRate = (_a = projectData === null || projectData === void 0 ? void 0 : projectData.expertRate) !== null && _a !== void 0 ? _a : 0;
+    const tasks = (_b = project === null || project === void 0 ? void 0 : project.projectScopeTasks) !== null && _b !== void 0 ? _b : [];
+    return (react_1.default.createElement("div", { className: "w-full md:w-3/4 flex flex-col" },
+        react_1.default.createElement("div", { className: "flex flex-wrap overflow-auto" },
+            react_1.default.createElement(base_ui_1.Table, null,
+                react_1.default.createElement(base_ui_1.TableHead, null,
+                    react_1.default.createElement(base_ui_1.TableRow, null,
+                        react_1.default.createElement(base_ui_1.TableCell, null, "Start Date"),
+                        react_1.default.createElement(base_ui_1.TableCell, null, "End Date"),
+                        react_1.default.createElement(base_ui_1.TableCell, null, "Project Type"))),
+                react_1.default.createElement(base_ui_1.TableBody, null,
+                    react_1.default.createElement(base_ui_1.TableRow, { className: "border border-solid" },
+                        ((0, dayjs_1.default)(startDate).isBefore((0, dayjs_1.default)(), 'day') && (Number(loggedHours) < 0)) ?
+                            react_1.default.createElement(base_ui_1.TableCell, { className: "text-[#A73A43] font-bold text-lg" },
+                                startDate ? (0, dayjs_1.default)(startDate).format('MM/DD/YYYY') : "-",
+                                react_1.default.createElement("br", null),
+                                "Past Due")
+                            :
+                                react_1.default.createElement(base_ui_1.TableCell, { className: "text-black font-bold text-lg" }, (_c = (0, dayjs_1.default)(startDate).format('MM/DD/YYYY')) !== null && _c !== void 0 ? _c : "-"),
+                        endDate === null || (0, dayjs_1.default)(endDate).isBefore((0, dayjs_1.default)(), 'day') ?
+                            react_1.default.createElement(base_ui_1.TableCell, { className: "text-[#A73A43] font-bold text-lg" }, endDate ? react_1.default.createElement(react_1.default.Fragment, null,
+                                (0, dayjs_1.default)(endDate).format('MM/DD/YYYY'),
+                                " ",
+                                react_1.default.createElement("br", null),
+                                " Past Due") : "Submit an End Date")
+                            :
+                                react_1.default.createElement(base_ui_1.TableCell, { className: "text-black font-bold text-lg" }, endDate ? (0, dayjs_1.default)(endDate).format('MM/DD/YYYY') : "-"),
+                        react_1.default.createElement(base_ui_1.TableCell, null, `${projectRateType} ${projectFrequencyType}`))),
+                react_1.default.createElement(base_ui_1.TableHead, null,
+                    react_1.default.createElement(base_ui_1.TableRow, null,
+                        react_1.default.createElement(base_ui_1.TableCell, null, "Estimated Expert Earnings"),
+                        react_1.default.createElement(base_ui_1.TableCell, null, "Max Hours"),
+                        react_1.default.createElement(base_ui_1.TableCell, null, minFloorName))),
+                react_1.default.createElement(base_ui_1.TableBody, null,
+                    react_1.default.createElement(base_ui_1.TableRow, { className: "border border-solid" },
+                        react_1.default.createElement(base_ui_1.TableCell, null, (minFloorHours > 0 || maxFloorHours > 0) && projectRateType === "Hourly" ? "$" + `${clientPortal ? (0, ProgressBar_1.formatNumberingSystem)(minFloorHours * payRate * 2) : (0, ProgressBar_1.formatNumberingSystem)(minFloorHours * payRate)}` + " - " + "$" + `${clientPortal ? (0, ProgressBar_1.formatNumberingSystem)(maxFloorHours * payRate * 2) : (0, ProgressBar_1.formatNumberingSystem)(maxFloorHours * payRate)}`
+                            : projectData && calculateFixedEarnings(projectFrequencyType, projectData, clientPortal)),
+                        react_1.default.createElement(base_ui_1.TableCell, null, maxFloorHours ? (0, ProgressBar_1.formatNumberingSystem)(maxFloorHours) : "-"),
+                        react_1.default.createElement(base_ui_1.TableCell, null, minFloorHours ? (0, ProgressBar_1.formatNumberingSystem)(minFloorHours) : "-"))),
+                react_1.default.createElement(base_ui_1.TableHead, null,
+                    react_1.default.createElement(base_ui_1.TableRow, null,
+                        react_1.default.createElement(base_ui_1.TableCell, null, "Days in Period"),
+                        react_1.default.createElement(base_ui_1.TableCell, null, "Days left in Period"),
+                        react_1.default.createElement(base_ui_1.TableCell, null, projectFrequencyType === "Recurring" ? "Hours Logged This Month" : "Hours Logged for Project"))),
+                react_1.default.createElement(base_ui_1.TableBody, null,
+                    react_1.default.createElement(base_ui_1.TableRow, { className: "border border-solid" },
+                        react_1.default.createElement(base_ui_1.TableCell, null, projectFrequencyType === "Recurring" ? totalDays : daysInOneTimeProject),
+                        react_1.default.createElement(base_ui_1.TableCell, null, projectFrequencyType === "Recurring" ? (totalDays - today) : daysLeftInOneTime),
+                        react_1.default.createElement(base_ui_1.TableCell, null, (_d = (0, ProgressBar_1.formatNumberingSystem)(loggedHours)) !== null && _d !== void 0 ? _d : "-"))))),
+        !(clientPortal || adhocProject) && react_1.default.createElement("div", { className: "flex flex-col mt-8 gap-y-2" },
+            react_1.default.createElement("h1", { className: "font-bold" }, "Recommendations"),
+            react_1.default.createElement("ul", { className: "list-disc ml-6" }, getRecommendations({ weeklyHoursLogged, hoursToComplete, loggedHours, minFloorHours, maxFloorHours, hoursPerWeek, remainingWeeks, startDate, endDate, minFloorName, projectFrequencyType, projectRateType, tasks })))));
+};
+exports.CenterCardUI = CenterCardUI;

package/lib/components/ProjectCard/EditDateModal.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+interface EditDateModalProps {
+    freelancerId: number;
+    freelancerEmail: string;
+    project: any;
+    previousDate: any;
+    editDate: any;
+    setEditDate: (editDate: any) => void;
+    isDateInvalid: boolean;
+    setIsDateInvalid: (isDateInvalid: boolean) => void;
+    validateDate: any;
+    changeType: string;
+    expertName: string;
+    isAuthenticated: boolean;
+    selectedTab: number;
+    createChangeRequestMutation?: any;
+    GetAllProjectIrprDetailsForFreelancerDocument: any;
+    createChangeRequest?: any;
+    isTestEnv: boolean;
+}
+export declare const EditDateModal: ({ freelancerId, freelancerEmail, project, previousDate, editDate, setEditDate, setIsDateInvalid, validateDate, isDateInvalid, changeType, expertName, isAuthenticated, selectedTab, createChangeRequestMutation, GetAllProjectIrprDetailsForFreelancerDocument, createChangeRequest, isTestEnv }: EditDateModalProps) => React.JSX.Element;
+export {};