@paro.io/expert-shared-components 1.9.5 → 1.9.7

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

@@ -0,0 +1,56 @@
+import React from "react";
+interface EndProjectModalProps {
+    project: any;
+    freelancerId: number;
+    expertName: string;
+    showConfirmationModal: boolean;
+    setShowConfirmationModal: (showConfirmationModal: boolean) => void;
+    projectType: string;
+    isAuthenticated: boolean;
+    selectedTab: number;
+    projectTagsMap: any;
+    updateProjectStatusMutation: any;
+    GetAllProjectIrprDetailsForFreelancerDocument: any;
+    updateParoProjectTagsMutation: any;
+    GetParoProjectsDocument: any;
+    updateProjectTagReviewStatusMutation: any;
+    updateProjectStatus: any;
+    updateProjectTags: any;
+}
+export declare enum BillRateTypes {
+    'Hourly' = 1,
+    'Fixed' = 2
+}
+export declare enum ProjectFrequencies {
+    'Recurring monthly' = 1,
+    'Recurring quarterly' = 2,
+    'One Time' = 3
+}
+export declare const TASK_DESCRIPTION_VALIDATION: {
+    MAX_LENGTH: number;
+    MIN_LENGTH: number;
+    LENGTH_VALIDATION_MESSAGE: string;
+};
+export declare const constants: {
+    MINUTES_ERROR_MESSAGE: string;
+    HOURS_ERROR_MESSAGE: string;
+    DATE_FORMAT: string;
+    MAX_DATE: Date;
+    MIN_DATE: Date;
+    DATE_VALIDATION_MESSAGE: string;
+    TASK_DESCRIPTION_ERROR_MESSAGE: string;
+};
+type SelectDateProps = {
+    timeLogDate: any;
+    setTimeLogDate: (e: any) => void;
+    isInvalid: boolean | "";
+    setIsDateInvalid: (e: any) => void;
+    validateDate: (e: any) => boolean;
+    showErrorText?: boolean;
+    disabled?: boolean;
+    maxDate?: string;
+    minDate?: string;
+};
+export declare const SelectDate: ({ timeLogDate, setTimeLogDate, isInvalid, setIsDateInvalid, validateDate, showErrorText, disabled, maxDate, minDate }: SelectDateProps) => React.JSX.Element;
+export declare const EndProjectModal: ({ project, freelancerId, expertName, showConfirmationModal, setShowConfirmationModal, projectType, isAuthenticated, selectedTab, projectTagsMap, updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation, GetParoProjectsDocument, updateProjectTagReviewStatusMutation, updateProjectStatus, updateProjectTags, }: EndProjectModalProps) => React.JSX.Element;
+export {};

package/lib/components/ProjectCard/EndProjectModal.js

@@ -0,0 +1,221 @@
+"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.EndProjectModal = exports.SelectDate = exports.constants = exports.TASK_DESCRIPTION_VALIDATION = exports.ProjectFrequencies = exports.BillRateTypes = void 0;
+const react_1 = __importStar(require("react"));
+const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
+const base_ui_1 = require("@paro.io/base-ui");
+const pickers_1 = require("@material-ui/pickers");
+const classnames_1 = __importDefault(require("classnames"));
+const dayjs_1 = __importDefault(require("@date-io/dayjs"));
+const core_1 = require("@material-ui/core");
+var BillRateTypes;
+(function (BillRateTypes) {
+    BillRateTypes[BillRateTypes["Hourly"] = 1] = "Hourly";
+    BillRateTypes[BillRateTypes["Fixed"] = 2] = "Fixed";
+})(BillRateTypes || (exports.BillRateTypes = BillRateTypes = {}));
+var ProjectFrequencies;
+(function (ProjectFrequencies) {
+    ProjectFrequencies[ProjectFrequencies["Recurring monthly"] = 1] = "Recurring monthly";
+    ProjectFrequencies[ProjectFrequencies["Recurring quarterly"] = 2] = "Recurring quarterly";
+    ProjectFrequencies[ProjectFrequencies["One Time"] = 3] = "One Time";
+})(ProjectFrequencies || (exports.ProjectFrequencies = ProjectFrequencies = {}));
+const getMaxDateForAddTimeLog = () => {
+    const date = new Date();
+    date.setMonth(date.getMonth() + 1);
+    return date;
+};
+const getMinDateForAddTimeLog = () => {
+    const date = new Date();
+    date.setFullYear(date.getFullYear() - 1);
+    return date;
+};
+exports.TASK_DESCRIPTION_VALIDATION = {
+    MAX_LENGTH: 120,
+    MIN_LENGTH: 3,
+    LENGTH_VALIDATION_MESSAGE: `Task Description should be greater than 3 characters.`,
+};
+exports.constants = {
+    MINUTES_ERROR_MESSAGE: "Minutes can't be empty",
+    HOURS_ERROR_MESSAGE: "Hours can't be empty",
+    DATE_FORMAT: 'MM/DD/YYYY',
+    MAX_DATE: getMaxDateForAddTimeLog(),
+    MIN_DATE: getMinDateForAddTimeLog(),
+    DATE_VALIDATION_MESSAGE: 'Please enter valid date',
+    TASK_DESCRIPTION_ERROR_MESSAGE: "Task Description can't be empty",
+};
+const addHoursAndMinutes = (hours, minutes) => {
+    const MINUTES_IN_AN_HOUR = 60;
+    const minutesToHours = minutes / MINUTES_IN_AN_HOUR;
+    return Number((hours + minutesToHours).toFixed(2));
+};
+const SelectDate = ({ timeLogDate, setTimeLogDate, isInvalid, setIsDateInvalid, validateDate, showErrorText = true, disabled, maxDate, minDate }) => {
+    const theme = (0, core_1.useTheme)();
+    const mobileScreen = (0, core_1.useMediaQuery)(theme.breakpoints.down('sm'));
+    const handleDateChange = (date) => {
+        const currentDate = date.$d;
+        setTimeLogDate(currentDate);
+        validateDate(currentDate);
+    };
+    const onBlur = (event) => {
+        let currentDate = new Date(event.target.value);
+        currentDate = currentDate.toString() !== "Invalid Date" ? currentDate : "";
+        setTimeLogDate(currentDate);
+        validateDate(currentDate);
+    };
+    const getDatePicker = (showErrorText) => {
+        return (react_1.default.createElement(pickers_1.MuiPickersUtilsProvider, { utils: dayjs_1.default },
+            react_1.default.createElement(pickers_1.KeyboardDatePicker, { className: (0, classnames_1.default)({
+                    "base-ui-date-picker": true,
+                    "base-ui-date-picker-error": isInvalid,
+                }), "data-testid": "date-picker-inline", disableToolbar: true, variant: mobileScreen ? "dialog" : "inline", format: exports.constants.DATE_FORMAT, margin: "normal", placeholder: "Select Date", value: timeLogDate, onChange: () => {
+                    setIsDateInvalid("");
+                }, onBlur: onBlur, onAccept: handleDateChange, maxDate: maxDate !== null && maxDate !== void 0 ? maxDate : exports.constants.MAX_DATE, minDate: minDate !== null && minDate !== void 0 ? minDate : exports.constants.MIN_DATE, helperText: showErrorText && isInvalid && exports.constants.DATE_VALIDATION_MESSAGE, error: isInvalid !== "" && isInvalid, style: { margin: 0 }, KeyboardButtonProps: Object.assign({ "aria-label": "change date" }, { ["data-testid"]: "timelog-datepicker" }), fullWidth: true, disabled: disabled, autoOk: true })));
+    };
+    return (react_1.default.createElement("div", { className: "mt-1" },
+        react_1.default.createElement("div", { className: "block w-full sm:w-1/3" }, getDatePicker(showErrorText))));
+};
+exports.SelectDate = SelectDate;
+const EndProjectModal = ({ project, freelancerId, expertName, showConfirmationModal, setShowConfirmationModal, projectType, isAuthenticated, selectedTab, projectTagsMap, updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation, GetParoProjectsDocument, updateProjectTagReviewStatusMutation, updateProjectStatus, updateProjectTags, }) => {
+    const [completeProjectLoading, setCompleteProjectLoading] = (0, react_1.useState)(false);
+    const isTestEnv = true; //process.env.STAGE !== "prod"
+    const handleCompleteProject = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        setCompleteProjectLoading(true);
+        try {
+            const endProjectUpdateData = {
+                projectId: +(project === null || project === void 0 ? void 0 : project.id),
+                input: {
+                    projectStatusId: 3,
+                    isExpertEnded: true,
+                    csmName: ((_a = project === null || project === void 0 ? void 0 : project.paroContact) === null || _a === void 0 ? void 0 : _a.firstName) + " " + ((_b = project === null || project === void 0 ? void 0 : project.paroContact) === null || _b === void 0 ? void 0 : _b.lastName),
+                    aeName: ((_c = project === null || project === void 0 ? void 0 : project.paroContact) === null || _c === void 0 ? void 0 : _c.firstName) + " " + ((_d = project === null || project === void 0 ? void 0 : project.paroContact) === null || _d === void 0 ? void 0 : _d.lastName),
+                    expertName: expertName,
+                    projectName: project === null || project === void 0 ? void 0 : project.name,
+                    clientName: (_e = project === null || project === void 0 ? void 0 : project.client) === null || _e === void 0 ? void 0 : _e.name,
+                    projectType: projectType,
+                    csmEmail: isTestEnv ? "admin@paro.io" : project === null || project === void 0 ? void 0 : project.csmEmail,
+                    aeEmail: isTestEnv ? "admin@paro.io" : (_f = project === null || project === void 0 ? void 0 : project.paroContact) === null || _f === void 0 ? void 0 : _f.email,
+                    startDate: project === null || project === void 0 ? void 0 : project.startDate,
+                    endDate: project === null || project === void 0 ? void 0 : project.endDate,
+                    projectFrequency: ProjectFrequencies[(_g = project === null || project === void 0 ? void 0 : project.projectScope) === null || _g === void 0 ? void 0 : _g.projectFrequencyId],
+                    billType: BillRateTypes[(_h = project === null || project === void 0 ? void 0 : project.projectScope) === null || _h === void 0 ? void 0 : _h.freelanceRateTypeId],
+                    freelancerId: freelancerId,
+                },
+            };
+            let softwareTags = [], skillTags = [];
+            if (projectTagsMap[project === null || project === void 0 ? void 0 : project.id]) {
+                softwareTags = ((_j = project === null || project === void 0 ? void 0 : project.tags) === null || _j === void 0 ? void 0 : _j.reduce((acc, tag) => (tag === null || tag === void 0 ? void 0 : tag.field) === 'softwares' ? [...acc, tag.value] : acc, [])) || [];
+                skillTags = ((_k = project === null || project === void 0 ? void 0 : project.tags) === null || _k === void 0 ? void 0 : _k.reduce((acc, tag) => (tag === null || tag === void 0 ? void 0 : tag.field) === 'skills' ? [...acc, tag.value] : acc, [])) || [];
+            }
+            if (isAuthenticated) {
+                yield updateProjectStatusMutation({
+                    variables: endProjectUpdateData,
+                    refetchQueries: [
+                        { query: GetAllProjectIrprDetailsForFreelancerDocument, variables: { freelancerId, projectType: 3, activeTabId: selectedTab } }
+                    ]
+                });
+                if (projectTagsMap[project === null || project === void 0 ? void 0 : project.id]) {
+                    yield updateParoProjectTagsMutation({
+                        variables: {
+                            projectId: project === null || project === void 0 ? void 0 : project.id,
+                            input: [
+                                ...softwareTags,
+                                ...skillTags,
+                            ],
+                            merge: true,
+                            freelancerId
+                        },
+                        refetchQueries: [{
+                                query: GetParoProjectsDocument,
+                                variables: {
+                                    legacyFreelancerId: freelancerId
+                                }
+                            }]
+                    });
+                    yield updateProjectTagReviewStatusMutation({
+                        variables: {
+                            projectId: project === null || project === void 0 ? void 0 : project.id,
+                            input: {
+                                tagReviewStatus: 2
+                            }
+                        }
+                    });
+                }
+            }
+            else {
+                yield updateProjectStatus(endProjectUpdateData);
+                if (projectTagsMap[project === null || project === void 0 ? void 0 : project.id]) {
+                    const updateProjectTagsData = {
+                        projectId: project === null || project === void 0 ? void 0 : project.id,
+                        softwareTags,
+                        skillTags,
+                        merge: true,
+                        tagReviewStatus: 2,
+                        freelancerId
+                    };
+                    yield updateProjectTags(updateProjectTagsData);
+                }
+            }
+            (0, react_hot_toast_1.default)(react_1.default.createElement(base_ui_1.Alert, { color: "success", icon: "success", label: `Succesfully Ended Project` }), {
+                position: 'bottom-right',
+                style: { borderRadius: '8px' },
+            });
+        }
+        catch (error) {
+            console.log("error ending project", error);
+            (0, react_hot_toast_1.default)(react_1.default.createElement(base_ui_1.Alert, { color: "danger", icon: "danger", label: `Failed to End Project` }), {
+                position: 'bottom-right',
+                style: { borderRadius: '8px' },
+            });
+        }
+        finally {
+            setCompleteProjectLoading(false);
+            setShowConfirmationModal(false);
+        }
+    });
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(base_ui_1.Modal, { open: showConfirmationModal, onClose: () => setShowConfirmationModal(false), className: "z-[100]", size: "sm" },
+            react_1.default.createElement("div", { className: "flex flex-col items-center" },
+                react_1.default.createElement("h1", { className: "font-bold text-xl mb-6" }, "Are you sure ?"),
+                react_1.default.createElement("p", { className: "text-md mb-6 font-medium w-3/4" }, "When you end a project, you will no longer be able to bill additional hours and it will be removed from your active projects list."),
+                react_1.default.createElement("p", { className: "text-md mb-10 font-medium w-3/4" }, "By ending this project any other pending change request will be removed from the platform."),
+                react_1.default.createElement("div", { className: "flex flex-row gap-x-2" },
+                    react_1.default.createElement(base_ui_1.Button, { type: "button", onClick: () => setShowConfirmationModal(false), label: "CANCEL", className: "mt-4" }),
+                    react_1.default.createElement(base_ui_1.Button, { type: "button", onClick: () => { handleCompleteProject(); }, label: "END PROJECT", className: "mt-4", color: "primary", isLoading: completeProjectLoading }))))));
+};
+exports.EndProjectModal = EndProjectModal;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+interface LeftCardUIProps {
+    projectData: any;
+    projectRateType: string;
+    projectFrequencyType: string;
+    project: any;
+    isAuthenticated: boolean;
+    activeProject: any;
+    adhocProject: any;
+    freelancerId: number;
+    selectedTab: number;
+    updateProjectTaskMutation: any;
+    GetAllProjectIrprDetailsForFreelancerDocument: any;
+    updateProjectTask: any;
+    clientPortal: boolean;
+}
+export declare const LeftCardUI: ({ projectData, projectRateType, projectFrequencyType, project, isAuthenticated, activeProject, adhocProject, freelancerId, selectedTab, updateProjectTaskMutation, GetAllProjectIrprDetailsForFreelancerDocument, updateProjectTask, clientPortal, }: LeftCardUIProps) => React.JSX.Element;
+export {};

package/lib/components/ProjectCard/LeftCardUI.js

@@ -0,0 +1,177 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LeftCardUI = void 0;
+const react_1 = __importStar(require("react"));
+const core_1 = require("@material-ui/core");
+const base_icons_1 = require("@paro.io/base-icons");
+const ActiveProjectCard_1 = require("./ActiveProjectCard");
+const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
+const base_ui_1 = require("@paro.io/base-ui");
+const ProgressBar_1 = __importStar(require("./ProgressBar"));
+const LeftCardUI = ({ projectData, projectRateType, projectFrequencyType, project, isAuthenticated, activeProject, adhocProject, freelancerId, selectedTab, updateProjectTaskMutation, GetAllProjectIrprDetailsForFreelancerDocument, updateProjectTask, clientPortal, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const projectHealth = (_a = project === null || project === void 0 ? void 0 : project.healthGrade) !== null && _a !== void 0 ? _a : "!";
+    const maxFloorHours = (_b = projectData === null || projectData === void 0 ? void 0 : projectData.maxHours) !== null && _b !== void 0 ? _b : 0;
+    const loggedHours = (_c = projectData === null || projectData === void 0 ? void 0 : projectData.hoursInvoiced) !== null && _c !== void 0 ? _c : 0;
+    const payRate = (_d = projectData === null || projectData === void 0 ? void 0 : projectData.expertRate) !== null && _d !== void 0 ? _d : 0;
+    const invoicedAmount = payRate * loggedHours;
+    const expertSowValue = (_e = projectData === null || projectData === void 0 ? void 0 : projectData.expertSowValue) !== null && _e !== void 0 ? _e : 0;
+    const isNegative = (expertSowValue - invoicedAmount) < 0;
+    const textColor = isNegative ? "#A73A43" : "#248384";
+    const classes = (0, ActiveProjectCard_1.useStyles)();
+    const containerRef = (0, react_1.useRef)(null);
+    const today = new Date();
+    const currMonth = today.toLocaleDateString('en-US', { month: 'short' });
+    const { minFloorHours } = (0, ActiveProjectCard_1.getAllProjectRecommendationData)({ projectData });
+    const toolTipText = projectFrequencyType === "Recurring" ? "(Max Hours for a month * Expert Rate for that project) - Monthly $ Invoiced" : "";
+    /* How earnings are calculated
+        Project Type:
+        ·Fixed One Time: Total $ for project - (Hours Invoiced * Expert Rate)
+        ·Fixed Recurring: Expert Rate for Project(aka Monthly Earnings)
+            ·If even one hour invoiced for Fixed Recurring project, then no unrealized earnings
+        ·Hourly One Time: Max Hours * Expert Rate - ( Hours Invoiced * Expert Rate)
+        ·Hourly Recurring: Max Hours * Expert Rate - ( Hours Invoiced * Expert Rate)
+    */
+    const calculateUnrealizedEarnings = (projectFrequency, projectRate, data) => {
+        if (!data)
+            return;
+        const oneTime = (data === null || data === void 0 ? void 0 : data.maxHours) * (data === null || data === void 0 ? void 0 : data.expertRate);
+        if (projectRate === "Hourly") {
+            return oneTime - invoicedAmount;
+        }
+        if (projectRate === "Fixed" && projectFrequency === "One-time") {
+            const { expertSowValue } = data;
+            return expertSowValue - invoicedAmount;
+        }
+        if (projectRate === "Fixed" && projectFrequency === "Recurring") {
+            // Hours invoiced is total hours invoiced since start of month
+            const { hoursInvoiced, expertRate } = data;
+            if (hoursInvoiced > 0) {
+                return 0;
+            }
+            return expertRate;
+        }
+    };
+    const loadingUpdateTask = false;
+    const updateTaskStatus = (taskId, statusValue) => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            isAuthenticated ?
+                updateProjectTaskMutation({
+                    variables: { id: taskId, statusId: statusValue },
+                    refetchQueries: [
+                        { query: GetAllProjectIrprDetailsForFreelancerDocument, variables: { freelancerId, projectType: 3, activeTabId: selectedTab } }
+                    ]
+                }).then((res) => {
+                    if (res) {
+                        (0, react_hot_toast_1.default)(react_1.default.createElement(base_ui_1.Alert, { color: "success", icon: "success", label: `Successfully updated task status` }), {
+                            position: 'bottom-right',
+                            style: { borderRadius: '8px' },
+                        });
+                    }
+                }) : yield updateProjectTask({ id: taskId, statusId: statusValue });
+        }
+        catch (error) {
+            console.error(`Error updating status`, error);
+            (0, react_hot_toast_1.default)(react_1.default.createElement(base_ui_1.Alert, { color: "danger", icon: "danger", label: `Failed to update` }), {
+                position: 'bottom-right',
+                style: { borderRadius: '8px' },
+            });
+        }
+    });
+    return (react_1.default.createElement("div", { className: `flex w-full ${projectRateType === "Fixed" ? "flex-col items-center justify-around gap-x-10 gap-y-4 md:flex-row" : "flex-col md:w-1/3"}` },
+        projectRateType === "Fixed" &&
+            react_1.default.createElement("div", { className: 'mb-2 w-3/4' },
+                react_1.default.createElement("div", { className: "flex py-3" },
+                    react_1.default.createElement("div", { className: "flex-1 pr-4 sm:pr-2 text-right sm:text-left font-bold text-lg" }, "SOW Tasks:"),
+                    react_1.default.createElement("div", { className: "flex-initial w-44 pl-4 sm:pl-2 text-left sm:text-left font-bold text-lg mr-4" }, "Status")),
+                react_1.default.createElement("div", null, ((_f = project === null || project === void 0 ? void 0 : project.projectScopeTasks) === null || _f === void 0 ? void 0 : _f.length) > 0 ? (project.projectScopeTasks.map((task) => {
+                    var _a;
+                    return (react_1.default.createElement("div", { className: "flex py-3 items-center justify-between my-4" },
+                        react_1.default.createElement("div", { key: task.id, className: 'flex-1 pr-4 sm:pr-2 text-right sm:text-left mr-4' },
+                            react_1.default.createElement("div", { ref: containerRef, className: 'w-full' },
+                                react_1.default.createElement("p", { className: 'border px-2 py-1 rounded bg-slate-100 flex-wrap' }, String((_a = task === null || task === void 0 ? void 0 : task.name) !== null && _a !== void 0 ? _a : '')))),
+                        react_1.default.createElement("div", { className: 'flex-initial w-44 pl-5 sm:pl-2 text-left sm:text-left mr-4' },
+                            react_1.default.createElement(core_1.FormControl, { fullWidth: true },
+                                react_1.default.createElement(core_1.Select, { labelId: "status", id: "status", label: "Status", value: task.statusId || '', variant: "standard", className: "border-none w-36", onChange: (event) => {
+                                        const newStatusValue = event.target.value;
+                                        updateTaskStatus(task.id, newStatusValue);
+                                    }, disabled: loadingUpdateTask || !activeProject || clientPortal },
+                                    react_1.default.createElement(core_1.MenuItem, { value: 2 }, "Pending"),
+                                    react_1.default.createElement(core_1.MenuItem, { value: 1 }, "Completed"),
+                                    react_1.default.createElement(core_1.MenuItem, { value: 3 }, "In Progress"),
+                                    react_1.default.createElement(core_1.MenuItem, { value: 4 }, "Not Needed"))))));
+                })) : (react_1.default.createElement("p", null, "No tasks found")))),
+        projectRateType !== "Fixed" && react_1.default.createElement(react_1.default.Fragment, null,
+            (!(adhocProject || clientPortal)) && (react_1.default.createElement("div", { className: "flex flex-col justify-content-center items-center" },
+                react_1.default.createElement("h1", { className: "text-md font-bold" }, "Project Health Grade"),
+                react_1.default.createElement(core_1.Tooltip, { classes: { tooltip: classes.tooltip }, title: "Project health grades can take up to 24 hours to update even after logging hours.", placement: "top", arrow: true },
+                    react_1.default.createElement("div", { className: `h-12 w-16 border-2 border-solid rounded-md flex place-content-center items-center mt-4 ${['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("h1", { className: "text-xl" }, projectHealth))))),
+            (!(adhocProject || clientPortal)) && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("div", { className: "mt-8" },
+                    (projectData === null || projectData === void 0 ? void 0 : projectData.minFloorHours) > 0 && react_1.default.createElement(ActiveProjectCard_1.CheckItem, { checked: projectData === null || projectData === void 0 ? void 0 : projectData.minimumFloorHoursCompleted, text: "Minimum Floor Hours Completed" }),
+                    react_1.default.createElement(ActiveProjectCard_1.CheckItem, { checked: projectData === null || projectData === void 0 ? void 0 : projectData.weeklyMinHoursLogged, text: "Weekly Minimum Hours Logged" })),
+                react_1.default.createElement("div", { className: "flex flex-row m-2 gap-x-1" },
+                    react_1.default.createElement("p", null, "How does this grade affect me?"),
+                    react_1.default.createElement(core_1.Tooltip, { classes: { tooltip: classes.tooltip }, title: "This grade does not have an impact on your standing with Paro but if you see a low grade or action required, please reach out to the Customer Success Team to help make sure you are staying up to date with your projects.", placement: "top", arrow: true },
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement(base_icons_1.IconInfoCircle, null)))))),
+            react_1.default.createElement("p", { className: "font-bold text-lg mt-6 mb-6" }, projectFrequencyType === "Recurring" ? `Hours Logged for ${currMonth}` : "Hours Logged"),
+            react_1.default.createElement("div", { className: "mb-10 mt-10" },
+                react_1.default.createElement(ProgressBar_1.default, { minFloorHours: Number(minFloorHours), maxFloorHours: Number(maxFloorHours), loggedHours: Number(loggedHours) }))),
+        react_1.default.createElement("div", { className: `flex flex-col ${projectRateType === 'Fixed' ? "w-full md:w-1/4 mt-2" : "w-full"}` },
+            react_1.default.createElement("div", { className: "flex flex-row justify-between" },
+                react_1.default.createElement("p", null,
+                    projectFrequencyType === "Recurring" && "Monthly",
+                    " Hours Invoiced"),
+                react_1.default.createElement("p", null, (0, ProgressBar_1.formatNumberingSystem)(loggedHours))),
+            react_1.default.createElement("div", { className: "flex flex-row justify-between" },
+                react_1.default.createElement("p", null,
+                    projectFrequencyType === "Recurring" && "Monthly",
+                    " $ Invoiced"),
+                react_1.default.createElement("p", null,
+                    "$ ",
+                    (0, ProgressBar_1.formatNumberingSystem)(invoicedAmount))),
+            !clientPortal && react_1.default.createElement(core_1.Tooltip, { classes: { tooltip: classes.tooltip }, title: toolTipText, placement: "top", arrow: true },
+                react_1.default.createElement("div", { className: "flex flex-row justify-between mt-1 font-bold text-md" },
+                    react_1.default.createElement("p", null, projectFrequencyType === 'Recurring' ? 'Monthly Unrealized Earnings' : 'Unrealized Earnings'),
+                    react_1.default.createElement("p", { className: `text-[${textColor}]` },
+                        "$ ",
+                        (0, ProgressBar_1.formatNumberingSystem)(Math.max(calculateUnrealizedEarnings(projectFrequencyType, projectRateType, projectData), 0))))))));
+};
+exports.LeftCardUI = LeftCardUI;

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import "date-fns";
+export declare const roundMinutes: (minutes: number, hours: number) => {
+    hours: number;
+    minutes: number;
+};
+export declare const TASK_DESCRIPTION_VALIDATION: {
+    MAX_LENGTH: number;
+    MIN_LENGTH: number;
+    LENGTH_VALIDATION_MESSAGE: string;
+};
+export declare const constants: {
+    MINUTES_ERROR_MESSAGE: string;
+    HOURS_ERROR_MESSAGE: string;
+    DATE_FORMAT: string;
+    MAX_DATE: Date;
+    MIN_DATE: Date;
+    DATE_VALIDATION_MESSAGE: string;
+    TASK_DESCRIPTION_ERROR_MESSAGE: string;
+};
+type SelectDateProps = {
+    timeLogDate: any;
+    setTimeLogDate: (e: any) => void;
+    isInvalid: boolean | "";
+    setIsDateInvalid: (e: any) => void;
+    validateDate: (e: any) => boolean;
+    showErrorText?: boolean;
+    disabled?: boolean;
+    maxDate?: string;
+    minDate?: string;
+};
+export declare const SelectDate: ({ timeLogDate, setTimeLogDate, isInvalid, setIsDateInvalid, validateDate, showErrorText, disabled, maxDate, minDate }: SelectDateProps) => React.JSX.Element;
+interface LogTimeModalAuthenticatedProps {
+    project: any;
+    freelancerId: number;
+    showTimeModal: boolean;
+    setShowTimeModal: (showTimeModal: boolean) => void;
+    isDateInvalid: any;
+    setIsDateInvalid: (isDateInvalid: any) => void;
+    validateDate: any;
+    setSingleProjectData: any;
+    projectData: any;
+    isAuthenticated: boolean;
+    selectedTab: number;
+    submitProjectHoursMutation: any;
+    GetAllProjectIrprDetailsForFreelancerDocument: any;
+    getAuth0Roles: any;
+    submitProjectHoursLambda: any;
+    user: any;
+}
+export declare const LogTimeModalAuthenticated: ({ project, freelancerId, showTimeModal, setShowTimeModal, isDateInvalid, setIsDateInvalid, validateDate, setSingleProjectData, projectData, isAuthenticated, selectedTab, submitProjectHoursMutation, GetAllProjectIrprDetailsForFreelancerDocument, getAuth0Roles, submitProjectHoursLambda, user, }: LogTimeModalAuthenticatedProps) => React.JSX.Element;
+export {};