@paro.io/expert-shared-components 1.14.13 → 1.14.15

package/lib/components/EarningsTracker/LeftCardUI.js

@@ -1,189 +1,189 @@
-"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 moment_1 = __importDefault(require("moment"));
-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, _g, _h;
-    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 endDate = (0, moment_1.default)((_f = projectData === null || projectData === void 0 ? void 0 : projectData.endDate) !== null && _f !== void 0 ? _f : (0, moment_1.default)().format('YYYY-MM-DD'));
-    const startDate = (0, moment_1.default)((_g = projectData === null || projectData === void 0 ? void 0 : projectData.startDate) !== null && _g !== void 0 ? _g : (0, moment_1.default)().format('YYYY-MM-DD'));
-    const totalProjectHrs = (projectData === null || projectData === void 0 ? void 0 : projectData.totalProjectHrs) || 0;
-    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 totalUnrealizedEarnings = startDate.diff(endDate, 'months') * maxFloorHours * payRate;
-    const [tskid, setTskid] = (0, react_1.useState)(undefined);
-    const [statusId, setStatusId] = (0, react_1.useState)(undefined);
-    const loadingUpdateTask = false;
-    const updateTaskStatus = (taskId, statusValue) => __awaiter(void 0, void 0, void 0, function* () {
-        console.log(`Updating task ${taskId} status to ${statusValue}`);
-        try {
-            setTskid(taskId);
-            setStatusId(statusValue);
-            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' },
-            });
-        }
-        setTskid(undefined);
-        setStatusId(undefined);
-    });
-    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, ((_h = project === null || project === void 0 ? void 0 : project.projectScopeTasks) === null || _h === void 0 ? void 0 : _h.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 && (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 && (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))),
-            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;
+"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 moment_1 = __importDefault(require("moment"));
+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, _g, _h;
+    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 endDate = (0, moment_1.default)((_f = projectData === null || projectData === void 0 ? void 0 : projectData.endDate) !== null && _f !== void 0 ? _f : (0, moment_1.default)().format('YYYY-MM-DD'));
+    const startDate = (0, moment_1.default)((_g = projectData === null || projectData === void 0 ? void 0 : projectData.startDate) !== null && _g !== void 0 ? _g : (0, moment_1.default)().format('YYYY-MM-DD'));
+    const totalProjectHrs = (projectData === null || projectData === void 0 ? void 0 : projectData.totalProjectHrs) || 0;
+    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 totalUnrealizedEarnings = startDate.diff(endDate, 'months') * maxFloorHours * payRate;
+    const [tskid, setTskid] = (0, react_1.useState)(undefined);
+    const [statusId, setStatusId] = (0, react_1.useState)(undefined);
+    const loadingUpdateTask = false;
+    const updateTaskStatus = (taskId, statusValue) => __awaiter(void 0, void 0, void 0, function* () {
+        console.log(`Updating task ${taskId} status to ${statusValue}`);
+        try {
+            setTskid(taskId);
+            setStatusId(statusValue);
+            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' },
+            });
+        }
+        setTskid(undefined);
+        setStatusId(undefined);
+    });
+    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, ((_h = project === null || project === void 0 ? void 0 : project.projectScopeTasks) === null || _h === void 0 ? void 0 : _h.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 && (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 && (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))),
+            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/EarningsTracker/LogTimeModalAuthenticated.d.ts

@@ -1,52 +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 {};
+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 {};