@paro.io/expert-shared-components 1.14.14 → 1.14.16

package/lib/components/EarningsTracker/EarningsTracker.js

@@ -1,508 +1,508 @@
-"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.EarningsTracker = 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 base_ui_1 = require("@paro.io/base-ui");
-const ActiveProjectCard_1 = require("./ActiveProjectCard");
-const TabContext_1 = __importDefault(require("@material-ui/lab/TabContext"));
-const TabPanel_1 = __importDefault(require("@material-ui/lab/TabPanel"));
-const ProgressBar_1 = require("./ProgressBar");
-const ActiveProjectCard_2 = require("./ActiveProjectCard");
-const styled_components_1 = __importDefault(require("styled-components"));
-const Pagination_1 = __importDefault(require("../Reviews/Pagination"));
-const icons_1 = require("@material-ui/icons");
-const moment_1 = __importDefault(require("moment"));
-const Loader_1 = __importDefault(require("../shared/Loader"));
-const Error_1 = __importDefault(require("../shared/Error"));
-const DEFAULT_SORT_OPTIONS = [
-    {
-        label: 'Client Name',
-        value: 'Client Name',
-    },
-    {
-        label: 'Unrealized Earnings',
-        value: 'Unrealized Earnings',
-    },
-    {
-        label: 'Fixed Projects',
-        value: 'Fixed Projects',
-    },
-];
-const StyledTabPanel = (0, styled_components_1.default)(TabPanel_1.default) `
-    padding: 0px;
-    padding-top: 18px;
-    margin: -6px;
-`;
-const EarningsTracker = ({ freelancerId, isAuthenticated, freelancerProjectDataUnauth, getPendingProjectTagReviews, getAllIrPrDetailsQuery, getFreelancerEarningData, updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation, GetParoProjectsDocument, updateProjectTagReviewStatusMutation, updateProjectStatus, updateProjectTags, sendParoSupportEmail, getSowLazyQuery, createChangeRequestMutation, createChangeRequest, createOrUpdateRatingRequestMutation, updateProjectTaskMutation, updateProjectTask, submitProjectHoursMutation, getAuth0Roles, submitProjectHoursLambda, user, router, }) => {
-    var _a, _b, _c, _d;
-    const theme = (0, core_1.useTheme)();
-    const params = new URLSearchParams(router.query);
-    const renewalsTabIndex = Number((_a = params.get('tab')) !== null && _a !== void 0 ? _a : 0);
-    const classes = (0, ActiveProjectCard_2.useStyles)();
-    const mobileScreen = (0, core_1.useMediaQuery)(theme.breakpoints.down('sm'));
-    const [selectedTab, setSelectedTab] = (0, react_1.useState)(renewalsTabIndex);
-    const sortOptions = selectedTab === 1 ? DEFAULT_SORT_OPTIONS : [{ label: 'Project Health Grade', value: 'Project Health Grade' }, ...DEFAULT_SORT_OPTIONS];
-    const [faqModal, setFaqModal] = react_1.default.useState(false);
-    const [earnings, setEarnings] = (0, react_1.useState)(0);
-    const [lifetimeIRToPR, setLifeTimeIRToPR] = (0, react_1.useState)(0);
-    const [currentPage, setCurrentPage] = (0, react_1.useState)(1);
-    const [perPageItems, setPerPageItems] = (0, react_1.useState)(10);
-    const [sortDirection, setSortDirection] = (0, react_1.useState)('asc');
-    const [sortBy, setSortBy] = (0, react_1.useState)(sortOptions[0].value);
-    const [loading, setLoading] = (0, react_1.useState)(false);
-    const [pendingProjectTagReviewsData, setPendingProjectTagReviewsData] = (0, react_1.useState)([]);
-    const [freelancerProjectData, setFreelancerProjectData] = (0, react_1.useState)([]);
-    const [getProjectsError, setGetProjectsError] = (0, react_1.useState)(false);
-    const firstItem = (currentPage - 1) * perPageItems;
-    const lastItem = (currentPage - 1) * perPageItems + perPageItems;
-    const fetchQueries = () => __awaiter(void 0, void 0, void 0, function* () {
-        var _a, _b;
-        try {
-            setLoading(true);
-            let pendingProjects;
-            let projectDetails;
-            const [pendingProjectTagResponse, projectDetailsResponse] = yield Promise.all([
-                getPendingProjectTagReviews && getPendingProjectTagReviews({
-                    variables: {
-                        freelancerId
-                    },
-                    skip: !freelancerId || [2, 3, 4].includes(selectedTab)
-                }),
-                getAllIrPrDetailsQuery && getAllIrPrDetailsQuery({
-                    variables: {
-                        freelancerId: freelancerId,
-                        projectType: 3, //get hourly & fixed projects
-                        activeTabId: 0, selectedTab,
-                        isInternal: false
-                    },
-                    fetchPolicy: 'network-only',
-                })
-            ]);
-            pendingProjects = ((_a = pendingProjectTagResponse === null || pendingProjectTagResponse === void 0 ? void 0 : pendingProjectTagResponse.data) === null || _a === void 0 ? void 0 : _a.getPendingProjectTagReviews) || [];
-            projectDetails = ((_b = projectDetailsResponse === null || projectDetailsResponse === void 0 ? void 0 : projectDetailsResponse.data) === null || _b === void 0 ? void 0 : _b.getAllProjectIRPRDetailsForFreelancer) || {};
-            setPendingProjectTagReviewsData(pendingProjects);
-            setFreelancerProjectData(projectDetails);
-        }
-        catch (error) {
-            console.error("Error fetching queries:", error);
-            setGetProjectsError(true);
-        }
-        finally {
-            setLoading(false);
-        }
-    });
-    (0, react_1.useEffect)(() => {
-        if (isAuthenticated) {
-            fetchQueries();
-        }
-    }, [selectedTab, isAuthenticated]);
-    const tagReviewProjects = (pendingProjectTagReviewsData === null || pendingProjectTagReviewsData === void 0 ? void 0 : pendingProjectTagReviewsData.getPendingProjectTagReviews) || [];
-    const projectTagsMap = tagReviewProjects.reduce((acc, project) => {
-        var _a, _b;
-        return Object.assign(Object.assign({}, acc), { [project.id]: {
-                softwareTags: ((_a = project === null || project === void 0 ? void 0 : project.tags) === null || _a === void 0 ? void 0 : _a.reduce((acc, tag) => (tag === null || tag === void 0 ? void 0 : tag.field) === 'softwares' ? [...acc, tag.value] : acc, [])) || [],
-                skillTags: ((_b = project === null || project === void 0 ? void 0 : project.tags) === null || _b === void 0 ? void 0 : _b.reduce((acc, tag) => (tag === null || tag === void 0 ? void 0 : tag.field) === 'skills' ? [...acc, tag.value] : acc, [])) || [],
-                project
-            } });
-    }, {});
-    (0, react_1.useEffect)(() => {
-        if (!freelancerId)
-            return;
-        getFreelancerEarningData(freelancerId).then((data) => {
-            var _a;
-            if (data) {
-                const actualEarnings = ((_a = data === null || data === void 0 ? void 0 : data.results) === null || _a === void 0 ? void 0 : _a.length) > 0 && (data === null || data === void 0 ? void 0 : data.results.filter((earning) => earning.earnings_type === 'actual').reduce((acc, curr) => acc + curr.earnings, 0));
-                setEarnings(actualEarnings);
-                setLifeTimeIRToPR(data === null || data === void 0 ? void 0 : data.lifetime_ir_pr);
-            }
-        });
-    }, [freelancerId]);
-    (0, react_1.useEffect)(() => {
-        if (selectedTab === 1 || selectedTab === 2) {
-            setSortBy('Start Date');
-        }
-        else if (selectedTab === 4) {
-            setSortBy('End Date');
-        }
-        else if (selectedTab === 3) {
-            setSortBy('Nearest');
-        }
-        else {
-            setSortBy(sortOptions[0].value);
-        }
-    }, [selectedTab]);
-    if (selectedTab === 0 && isAuthenticated && (loading || !freelancerProjectData)) {
-        return react_1.default.createElement(Loader_1.default, null);
-    }
-    if (getProjectsError) {
-        return (react_1.default.createElement("div", { className: "mt-20" },
-            react_1.default.createElement(Error_1.default, { message: 'Error fetching your project data. Please refresh the page and try again.' })));
-    }
-    //@ts-ignore
-    const data = isAuthenticated ? freelancerProjectData !== null && freelancerProjectData !== void 0 ? freelancerProjectData : {} : freelancerProjectDataUnauth;
-    let averageInvoicedRevenue;
-    if (earnings > 0 && (data === null || data === void 0 ? void 0 : data.paroTenure) > 0) {
-        const invoicedRevenueData = earnings / (data === null || data === void 0 ? void 0 : data.paroTenure);
-        averageInvoicedRevenue = (invoicedRevenueData === null || invoicedRevenueData === void 0 ? void 0 : invoicedRevenueData.toFixed(2)) || 0;
-    }
-    const projectsArray = (_b = data === null || data === void 0 ? void 0 : data.projects) !== null && _b !== void 0 ? _b : [];
-    const projectsData = (_c = data === null || data === void 0 ? void 0 : data.projectsData) !== null && _c !== void 0 ? _c : [];
-    let projectDataContainer = new Map();
-    projectsArray.forEach((el) => projectDataContainer.set(el.id, el));
-    let sortedData = [];
-    projectsData === null || projectsData === void 0 ? void 0 : projectsData.forEach((el) => {
-        if (projectDataContainer.has(el.id)) {
-            sortedData === null || sortedData === void 0 ? void 0 : sortedData.push(Object.assign(Object.assign({}, el), projectDataContainer === null || projectDataContainer === void 0 ? void 0 : projectDataContainer.get(el.id)));
-        }
-    });
-    const healthOrder = { "!": 0, "D": 1, "C": 2, "B": 3, "A": 4 };
-    let sortedProjects = [];
-    const getSortKey = (project) => {
-        const health = project === null || project === void 0 ? void 0 : project.healthGrade;
-        const startDate = (project === null || project === void 0 ? void 0 : project.startDate) || null;
-        const endDate = (project === null || project === void 0 ? void 0 : project.endDate) || null;
-        //@ts-ignore
-        const healthKey = healthOrder[health] !== undefined ? healthOrder[health] : Infinity;
-        const startDateObj = startDate ? new Date(startDate) : null;
-        const endDateObj = endDate ? new Date(endDate) : null;
-        const projectName = project === null || project === void 0 ? void 0 : project.name;
-        return [healthKey, startDateObj, projectName, endDateObj];
-    };
-    if (sortBy) {
-        if (sortBy === "Project Health Grade") {
-            sortedProjects = sortedData.sort((a, b) => {
-                var _a, _b;
-                const orderA = healthOrder[a === null || a === void 0 ? void 0 : a.healthGrade];
-                const orderB = healthOrder[b === null || b === void 0 ? void 0 : b.healthGrade];
-                // for fixed projects
-                const rateTypeA = (_a = a === null || a === void 0 ? void 0 : a.projectScope) === null || _a === void 0 ? void 0 : _a.freelanceRateTypeId;
-                const rateTypeB = (_b = b === null || b === void 0 ? void 0 : b.projectScope) === null || _b === void 0 ? void 0 : _b.freelanceRateTypeId;
-                if (rateTypeA === 2 && rateTypeB === 2) {
-                    return 0;
-                }
-                else if (rateTypeA === 2) {
-                    return 1;
-                }
-                else if (rateTypeB === 2) {
-                    return -1;
-                }
-                else {
-                    if (sortDirection === "asc") {
-                        return orderA - orderB;
-                    }
-                    else {
-                        return orderB - orderA;
-                    }
-                }
-            });
-        }
-        else if (sortBy === "Client Name") {
-            sortedProjects = sortedData.sort((a, b) => {
-                var _a, _b;
-                const clientA = (_a = a === null || a === void 0 ? void 0 : a.client) === null || _a === void 0 ? void 0 : _a.name;
-                const clientB = (_b = b === null || b === void 0 ? void 0 : b.client) === null || _b === void 0 ? void 0 : _b.name;
-                if (sortDirection === "asc") {
-                    return String(clientA).localeCompare(clientB);
-                }
-                else {
-                    return String(clientB).localeCompare(clientA);
-                }
-            });
-        }
-        else if (sortBy === "Unrealized Earnings") {
-            sortedProjects = sortedData.sort((a, b) => {
-                const unrealizedEarningsKey1 = (a === null || a === void 0 ? void 0 : a.maxHours) * (a === null || a === void 0 ? void 0 : a.expertRate);
-                const unrealizedEarningsKey2 = (b === null || b === void 0 ? void 0 : b.maxHours) * (b === null || b === void 0 ? void 0 : b.expertRate);
-                if (sortDirection === "asc") {
-                    return unrealizedEarningsKey1 - unrealizedEarningsKey2;
-                }
-                else {
-                    return unrealizedEarningsKey2 - unrealizedEarningsKey1;
-                }
-            });
-        }
-        else if (sortBy === "Fixed Projects") {
-            sortedProjects = sortedData.sort((a, b) => {
-                var _a, _b;
-                const rateTypeA = (_a = a === null || a === void 0 ? void 0 : a.projectScope) === null || _a === void 0 ? void 0 : _a.freelanceRateTypeId;
-                const rateTypeB = (_b = b === null || b === void 0 ? void 0 : b.projectScope) === null || _b === void 0 ? void 0 : _b.freelanceRateTypeId;
-                if (rateTypeA === 2 && rateTypeB === 2) {
-                    return sortDirection === "asc" ? +(0, moment_1.default)(a.startDate) - +(0, moment_1.default)(b.startDate) : +(0, moment_1.default)(b.startDate) - +(0, moment_1.default)(a.startDate);
-                }
-                else if (rateTypeA === 2) {
-                    return -1;
-                }
-                else if (rateTypeB === 2) {
-                    return 1;
-                }
-                else {
-                    return 0;
-                }
-            });
-        }
-        else if (sortBy === "Start Date") {
-            sortedProjects = sortedData === null || sortedData === void 0 ? void 0 : sortedData.slice().sort((a, b) => {
-                const keyA = getSortKey(a);
-                const keyB = getSortKey(b);
-                return keyA[1] - keyB[1];
-            });
-        }
-        else if (sortBy === "End Date") {
-            sortedProjects = sortedData === null || sortedData === void 0 ? void 0 : sortedData.slice().sort((a, b) => {
-                const keyA = getSortKey(a);
-                const keyB = getSortKey(b);
-                return keyB[3] - keyA[3];
-            });
-        }
-        else if (sortBy === "Nearest") {
-            sortedProjects = sortedData === null || sortedData === void 0 ? void 0 : sortedData.sort((a, b) => {
-                if (a.endDate === null && b.endDate === null) {
-                    return 0;
-                }
-                else if (a.endDate === null) {
-                    return 1;
-                }
-                else if (b.endDate === null) {
-                    return -1;
-                }
-                else {
-                    const diffA = Math.abs((0, moment_1.default)(a.endDate).diff((0, moment_1.default)(), 'days'));
-                    const diffB = Math.abs((0, moment_1.default)(b.endDate).diff((0, moment_1.default)(), 'days'));
-                    return diffA - diffB;
-                }
-            });
-        }
-    }
-    const handleChangeValue = (event, newValue) => {
-        setSortBy(sortOptions[0].value);
-        setSortDirection('asc');
-        setSelectedTab(newValue);
-    };
-    const today = new Date();
-    const currMonth = today.toLocaleDateString('en-US', { month: 'long' });
-    const tabPanelProps = mobileScreen ? { component: StyledTabPanel } : { component: TabPanel_1.default };
-    const handleSort = (e) => {
-        setSortBy(e.currentTarget.value);
-    };
-    const handleSortDirectionChange = () => {
-        setSortDirection(sortDirection === "asc" ? "desc" : "asc");
-        let isKeyExist = sortOptions.find(i => i.value === sortBy);
-        if (!isKeyExist) {
-            setSortBy(sortOptions[0].value);
-        }
-    };
-    let unrealizedEarnings = 0;
-    const calculateTotalUnrealizedEarnings = (projectData) => {
-        var _a, _b, _c;
-        const payRate = (_a = projectData === null || projectData === void 0 ? void 0 : projectData.expertRate) !== null && _a !== void 0 ? _a : 0;
-        const loggedHours = (_b = projectData === null || projectData === void 0 ? void 0 : projectData.hoursInvoiced) !== null && _b !== void 0 ? _b : 0;
-        const maxHours = (_c = projectData === null || projectData === void 0 ? void 0 : projectData.maxHours) !== null && _c !== void 0 ? _c : 0;
-        const invoicedAmount = payRate * loggedHours;
-        const maxProjectEarnings = maxHours * payRate;
-        return maxProjectEarnings - invoicedAmount > 0 ? maxProjectEarnings - invoicedAmount : 0;
-    };
-    if (sortedData.length > 0) {
-        unrealizedEarnings = sortedData.reduce((acc, project) => {
-            return acc + calculateTotalUnrealizedEarnings(project);
-        }, 0);
-    }
-    const getTitle = () => {
-        switch (selectedTab) {
-            case 0:
-                return "Active";
-            case 1:
-                return "Ad Hoc";
-            case 2:
-                return "Upcoming";
-            case 3:
-                return "Inactive";
-            case 4:
-                return "Completed";
-            case 5:
-                return "Paused";
-            default:
-                return "Active";
-        }
-    };
-    return (react_1.default.createElement("div", { className: "flex flex-col w-full" },
-        react_1.default.createElement("h1", { className: "font-bold text-3xl ml-4", "data-tut": 'reactour__projectmanagement' }, "Earnings Tracker"),
-        loading && isAuthenticated ? react_1.default.createElement("div", { className: "m-8" },
-            react_1.default.createElement(Loader_1.default, null)) :
-            react_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement(base_ui_1.Card, { className: "w-full bg-white flex flex-col sm:flex-row justify-space-between p-8 m-4" },
-                selectedTab !== 1 && (react_1.default.createElement("div", { className: "flex flex-col w-full mb-4 md:mb-0" },
-                    react_1.default.createElement("h1", { className: "font-bold text-xl ml-4" },
-                        "Avg. Project Grading for ",
-                        getTitle(),
-                        " Projects"),
-                    react_1.default.createElement("div", { className: "flex flex-row" },
-                        react_1.default.createElement("div", { className: "flex flex-col items-center rounded-md bg-[#FDD8A5] p-4 m-4" },
-                            react_1.default.createElement("p", null, "Hourly Projects"),
-                            react_1.default.createElement(core_1.Tooltip, { classes: { tooltip: classes.tooltip }, title: "The average health card grade is based on all your active projects shown below.", placement: "top", arrow: true },
-                                react_1.default.createElement("div", { className: "h-12 w-16 rounded-md flex place-content-center items-center m-1" }, ((_d = data === null || data === void 0 ? void 0 : data.overallProjectHealth) === null || _d === void 0 ? void 0 : _d.trim()) !== '' ? react_1.default.createElement("h1", { className: "font-bold text-2xl self-center" }, data === null || data === void 0 ? void 0 : data.overallProjectHealth) : react_1.default.createElement("h1", { className: "text-xl text-red-500" }, "N/A"))),
-                            react_1.default.createElement("div", { className: 'flex items-center' },
-                                react_1.default.createElement("p", null, "Why this score?"),
-                                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, { size: "sm" }))))),
-                        react_1.default.createElement("div", { className: "flex flex-col gap-y-4" },
-                            react_1.default.createElement(core_1.Tooltip, { classes: { tooltip: classes.tooltip }, title: "The Minimum Floor Hours shows how many active projects you have currently completed the minimum floor hours requirement for and how many active projects that require minimum floor hours to be completed", placement: "top", arrow: true },
-                                react_1.default.createElement("div", { className: "flex flex-row justify-content-start mt-4 bg-[#F1F5F9] p-1 rounded-md" },
-                                    react_1.default.createElement(ActiveProjectCard_1.CheckItem, { checked: ((data === null || data === void 0 ? void 0 : data.minFloorHoursCountNumerator) > 0 && (data === null || data === void 0 ? void 0 : data.minFloorHoursCountDenominator) > 0), text: "Avg. Min Floor Hours Completed" }),
-                                    react_1.default.createElement("div", { className: "p-2 w-1/5 border-2 border-solid border-[#F1F5F9] rounded-md flex place-content-center items-start" }, ((data === null || data === void 0 ? void 0 : data.minFloorHoursCountNumerator) >= 0 && (data === null || data === void 0 ? void 0 : data.minFloorHoursCountDenominator) >= 0) ? react_1.default.createElement("p", null, data === null || data === void 0 ? void 0 :
-                                        data.minFloorHoursCountNumerator,
-                                        "/", data === null || data === void 0 ? void 0 :
-                                        data.minFloorHoursCountDenominator) : react_1.default.createElement("p", { className: "text-xl text-red-500" }, "N/A")))),
-                            react_1.default.createElement(core_1.Tooltip, { classes: { tooltip: classes.tooltip }, title: "The Weekly Minimum Hours shows if you have submitted hours for a given week for an active project. If so, a check mark will appear next to it on the project card below. This does not impact your project grade but is a reminder to log hours consistently.", placement: "top", arrow: true },
-                                react_1.default.createElement("div", { className: "flex flex-row justify-content-start mb-4 bg-[#F1F5F9] p-1 rounded-md" },
-                                    react_1.default.createElement(ActiveProjectCard_1.CheckItem, { checked: ((data === null || data === void 0 ? void 0 : data.weeklyMinHoursLoggedCountNumerator) > 0 && (data === null || data === void 0 ? void 0 : data.weeklyMinHoursLoggedCountDenominator) > 0), text: "Avg. Weekly Min Hours Logged" }),
-                                    react_1.default.createElement("div", { className: "p-2 w-1/5 border-2 border-solid border-[#F1F5F9] rounded-md flex place-content-center items-start" }, ((data === null || data === void 0 ? void 0 : data.weeklyMinHoursLoggedCountNumerator) >= 0 && (data === null || data === void 0 ? void 0 : data.weeklyMinHoursLoggedCountDenominator) >= 0) ? react_1.default.createElement("p", null, data === null || data === void 0 ? void 0 :
-                                        data.weeklyMinHoursLoggedCountNumerator,
-                                        "/", data === null || data === void 0 ? void 0 :
-                                        data.weeklyMinHoursLoggedCountDenominator) : react_1.default.createElement("p", { className: "text-xl text-red-500" }, "N/A")))))))),
-                react_1.default.createElement("div", { className: "flex flex-col w-full mb-4 md:mb-0" },
-                    react_1.default.createElement("h1", { className: "font-bold text-xl ml-4" }, "Monthly Earnings"),
-                    react_1.default.createElement("div", { className: "flex flex-row justify-items-stretch gap-x-4 p-4" },
-                        react_1.default.createElement("div", { className: "flex flex-col bg-[#F1F5F9] p-4 text-md rounded-md w-1/2", "data-tut": 'reactour__monthlyearnings' },
-                            react_1.default.createElement("p", null, currMonth),
-                            (data === null || data === void 0 ? void 0 : data.monthlyEarnings) > 0 ? react_1.default.createElement("h1", { className: "text-xl font-bold" },
-                                "$ ",
-                                (0, ProgressBar_1.formatNumberingSystem)(data === null || data === void 0 ? void 0 : data.monthlyEarnings)) : react_1.default.createElement("h1", { className: "text-xl font-bold" }, "$ 0"),
-                            (data === null || data === void 0 ? void 0 : data.expertCurrMonthGoal) >= 0 ? react_1.default.createElement("p", { className: "text-sm" },
-                                "Goal: $ ",
-                                (0, ProgressBar_1.formatNumberingSystem)(data === null || data === void 0 ? void 0 : data.expertCurrMonthGoal)) : react_1.default.createElement("p", { className: "text-sm" },
-                                react_1.default.createElement("small", null, "Goal: No Goal set for current month"),
-                                " ")),
-                        react_1.default.createElement("div", { className: "flex flex-col bg-[#F1F5F9] p-4 text-md rounded-md w-1/2" },
-                            react_1.default.createElement("p", null, "Avg./Month"),
-                            averageInvoicedRevenue ? react_1.default.createElement("h1", { className: "text-xl font-bold" },
-                                "$ ",
-                                (0, ProgressBar_1.formatNumberingSystem)(averageInvoicedRevenue)) : react_1.default.createElement("h1", { className: "text-xl font-bold" }, "$ 0"),
-                            (data === null || data === void 0 ? void 0 : data.freelancerGoal) >= 0 ? react_1.default.createElement("p", { className: "text-sm" },
-                                "Avg Goal: $ ",
-                                (0, ProgressBar_1.formatNumberingSystem)(data === null || data === void 0 ? void 0 : data.freelancerGoal)) : react_1.default.createElement("p", { className: "text-sm" },
-                                react_1.default.createElement("small", null, "Avg Goal: No Monthly Goal Set"),
-                                " ")))),
-                react_1.default.createElement("div", { className: "flex flex-col w-full" },
-                    react_1.default.createElement("h1", { className: "font-bold text-xl ml-4" }, "Lifetime Earnings Health"),
-                    react_1.default.createElement("div", { className: "flex flex-col justify-between p-4 gap-y-4" },
-                        react_1.default.createElement("div", { className: "flex flex-row justify-between bg-[#F1F5F9] p-2 px-4 text-md rounded-md" },
-                            react_1.default.createElement("p", null, "Invoiced to Projected:"),
-                            lifetimeIRToPR > 0 ? react_1.default.createElement("h1", { className: "text-xl font-bold" },
-                                (0, ProgressBar_1.formatNumberingSystem)(lifetimeIRToPR),
-                                "%") : react_1.default.createElement("h1", { className: "text-xl font-bold" }, "--")),
-                        react_1.default.createElement("div", { className: "flex flex-row justify-between bg-[#F1F5F9] p-2 px-4 text-md rounded-md" },
-                            react_1.default.createElement("p", null, "Avg Contract Value:"),
-                            (data === null || data === void 0 ? void 0 : data.averageContractValue) > 0 ? react_1.default.createElement("h1", { className: "text-xl font-bold" },
-                                "$",
-                                (0, ProgressBar_1.formatNumberingSystem)(data === null || data === void 0 ? void 0 : data.averageContractValue)) : react_1.default.createElement("h1", { className: "text-sm text-red-500 w-36" }, "Data will appear once you have won your first project")),
-                        react_1.default.createElement("div", { className: "flex flex-row justify-between bg-[#F1F5F9] p-2 px-4 text-md rounded-md" },
-                            react_1.default.createElement("p", null,
-                                "Total Unrealized Earnings for ",
-                                getTitle(),
-                                " Projects:"),
-                            react_1.default.createElement("h1", { className: "text-xl font-bold", "data-tut": 'reactour__totalunrealizedearnings' },
-                                "$",
-                                (0, ProgressBar_1.formatNumberingSystem)(unrealizedEarnings))))))),
-        !isAuthenticated && react_1.default.createElement("div", { className: 'border ml-4 w-full text-white rounded-md bg-[#1878bd]' },
-            react_1.default.createElement("ul", { className: "list-disc px-8 py-3" },
-                react_1.default.createElement("li", null, "The projects shown below are only your active projects."),
-                react_1.default.createElement("li", null,
-                    "Please ",
-                    react_1.default.createElement("a", { className: 'underline font-bold', href: "/earnings-tracker", target: "_blank" }, "log in"),
-                    " here to view all your projects that are Upcoming, Ad Hoc, Completed, or Inactive."),
-                react_1.default.createElement("li", null, "Active projects will show up 7 days before they start for you to make changes and keep track of reporting."))),
-        react_1.default.createElement("div", { className: "m-4 w-full" },
-            react_1.default.createElement(TabContext_1.default, { value: selectedTab + '' },
-                react_1.default.createElement(core_1.Tabs, { TabIndicatorProps: { style: { background: '#248384' } }, value: selectedTab, onChange: handleChangeValue, variant: "scrollable", scrollButtons: "off" },
-                    react_1.default.createElement(core_1.Tab, { label: react_1.default.createElement("div", { className: "flex flex-row items-center" }, "\u00A0Active") }),
-                    isAuthenticated && (react_1.default.createElement(core_1.Tab, { label: react_1.default.createElement("div", { className: "flex flex-row items-center" }, "\u00A0Ad Hoc") })),
-                    isAuthenticated && (react_1.default.createElement(core_1.Tab, { label: react_1.default.createElement("div", { className: "flex flex-row items-center", "data-tut": 'reacttour__upcomingsubheader' }, "\u00A0Upcoming") })),
-                    isAuthenticated && (react_1.default.createElement(core_1.Tab, { label: react_1.default.createElement("div", { className: "flex flex-row items-center" }, "\u00A0Inactive") })),
-                    isAuthenticated && (react_1.default.createElement(core_1.Tab, { label: react_1.default.createElement("div", { className: "flex flex-row items-center" }, "\u00A0Completed") })),
-                    isAuthenticated && (react_1.default.createElement(core_1.Tab, { label: react_1.default.createElement("div", { className: "flex flex-row items-center" }, "\u00A0Paused") }))),
-                ((sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.length) > 0 || (isAuthenticated && !loading)) && selectedTab !== 5 &&
-                    react_1.default.createElement("div", { className: 'flex items-end gap-2 w-full justify-end mt-4', "data-tut": 'reacttour__sortby' },
-                        react_1.default.createElement(base_ui_1.Select, { label: "Sort by", required: false, value: sortBy, onChange: e => handleSort(e), options: sortOptions, className: 'max-w-fit' }),
-                        react_1.default.createElement(core_1.IconButton, { onClick: handleSortDirectionChange, title: sortDirection }, sortDirection === "asc" ? react_1.default.createElement(icons_1.ArrowUpwardRounded, null) : react_1.default.createElement(icons_1.ArrowDownwardRounded, null))),
-                react_1.default.createElement(tabPanelProps.component, { value: 0 + '' }, loading && isAuthenticated ? react_1.default.createElement(Loader_1.default, null) :
-                    (!(sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.length) ? react_1.default.createElement("div", { className: "flex items-center" },
-                        react_1.default.createElement("p", null,
-                            "You currently have no active hourly projects. ",
-                            react_1.default.createElement("a", { className: "underline cursor-pointer", onClick: () => { setFaqModal(true); } }, "Learn more"),
-                            " about winning projects here or visit the ",
-                            react_1.default.createElement("a", { className: "underline cursor-pointer", href: "/opportunities", target: "_blank" }, "opportunity board"),
-                            ".")) :
-                        react_1.default.createElement(react_1.default.Fragment, null, sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.slice(firstItem, lastItem).map((project) => {
-                            return (react_1.default.createElement(ActiveProjectCard_1.ActiveProjectCard, { project: project, projectsData: projectsData, expertName: data === null || data === void 0 ? void 0 : data.fullName, freelancerId: data === null || data === void 0 ? void 0 : data.freelancerId, freelancerEmail: project === null || project === void 0 ? void 0 : project.freelancerEmail, isAuthenticated: isAuthenticated, activeProject: true, selectedTab: selectedTab, projectTagsMap: projectTagsMap, updateProjectStatusMutation: updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument: GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation: updateParoProjectTagsMutation, GetParoProjectsDocument: GetParoProjectsDocument, updateProjectTagReviewStatusMutation: updateProjectTagReviewStatusMutation, updateProjectStatus: updateProjectStatus, updateProjectTags: updateProjectTags, sendParoSupportEmail: sendParoSupportEmail, getSowLazyQuery: getSowLazyQuery, createChangeRequestMutation: createChangeRequestMutation, createChangeRequest: createChangeRequest, createOrUpdateRatingRequestMutation: createOrUpdateRatingRequestMutation, updateProjectTaskMutation: updateProjectTaskMutation, updateProjectTask: updateProjectTask, submitProjectHoursMutation: submitProjectHoursMutation, getAuth0Roles: getAuth0Roles, submitProjectHoursLambda: submitProjectHoursLambda, user: user }));
-                        })))),
-                react_1.default.createElement(tabPanelProps.component, { value: 1 + '' }, loading ? react_1.default.createElement(Loader_1.default, null) :
-                    (!(sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.length) ? react_1.default.createElement("div", { className: "flex items-center" },
-                        react_1.default.createElement("p", null, "You have no Ad Hoc projects at this time.")) :
-                        react_1.default.createElement(react_1.default.Fragment, null, sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.slice(firstItem, lastItem).map((project) => {
-                            return (react_1.default.createElement(ActiveProjectCard_1.ActiveProjectCard, { project: project, projectsData: projectsData, expertName: data === null || data === void 0 ? void 0 : data.fullName, freelancerId: data === null || data === void 0 ? void 0 : data.freelancerId, freelancerEmail: project === null || project === void 0 ? void 0 : project.freelancerEmail, isAuthenticated: isAuthenticated, activeProject: true, adhocProject: true, selectedTab: selectedTab, projectTagsMap: projectTagsMap, updateProjectStatusMutation: updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument: GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation: updateParoProjectTagsMutation, GetParoProjectsDocument: GetParoProjectsDocument, updateProjectTagReviewStatusMutation: updateProjectTagReviewStatusMutation, updateProjectStatus: updateProjectStatus, updateProjectTags: updateProjectTags, sendParoSupportEmail: sendParoSupportEmail, getSowLazyQuery: getSowLazyQuery, createChangeRequestMutation: createChangeRequestMutation, createChangeRequest: createChangeRequest, createOrUpdateRatingRequestMutation: createOrUpdateRatingRequestMutation, updateProjectTaskMutation: updateProjectTaskMutation, updateProjectTask: updateProjectTask, submitProjectHoursMutation: submitProjectHoursMutation, getAuth0Roles: getAuth0Roles, submitProjectHoursLambda: submitProjectHoursLambda, user: user }));
-                        })))),
-                react_1.default.createElement(tabPanelProps.component, { value: 2 + '' }, loading ? react_1.default.createElement(Loader_1.default, null) :
-                    (!(sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.length) ? react_1.default.createElement("div", { className: "flex items-center" },
-                        react_1.default.createElement("p", null, "You have no upcoming projects at this time.")) :
-                        react_1.default.createElement(react_1.default.Fragment, null, sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.slice(firstItem, lastItem).map((project) => {
-                            return (react_1.default.createElement(ActiveProjectCard_1.ActiveProjectCard, { project: project, projectsData: projectsData, expertName: data === null || data === void 0 ? void 0 : data.fullName, freelancerId: data === null || data === void 0 ? void 0 : data.freelancerId, freelancerEmail: project === null || project === void 0 ? void 0 : project.freelancerEmail, isAuthenticated: isAuthenticated, activeProject: false, upcomingProject: true, selectedTab: selectedTab, updateProjectStatusMutation: updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument: GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation: updateParoProjectTagsMutation, GetParoProjectsDocument: GetParoProjectsDocument, updateProjectTagReviewStatusMutation: updateProjectTagReviewStatusMutation, updateProjectStatus: updateProjectStatus, updateProjectTags: updateProjectTags, sendParoSupportEmail: sendParoSupportEmail, getSowLazyQuery: getSowLazyQuery, createChangeRequestMutation: createChangeRequestMutation, createChangeRequest: createChangeRequest, createOrUpdateRatingRequestMutation: createOrUpdateRatingRequestMutation, updateProjectTaskMutation: updateProjectTaskMutation, updateProjectTask: updateProjectTask, submitProjectHoursMutation: submitProjectHoursMutation, getAuth0Roles: getAuth0Roles, submitProjectHoursLambda: submitProjectHoursLambda, user: user }));
-                        })))),
-                react_1.default.createElement(tabPanelProps.component, { value: 3 + '' }, loading ? react_1.default.createElement(Loader_1.default, null) :
-                    (!(sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.length) ? react_1.default.createElement("div", { className: "flex items-center" },
-                        react_1.default.createElement("p", null, "You have no Inactive projects at this time.")) :
-                        react_1.default.createElement(react_1.default.Fragment, null, sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.slice(firstItem, lastItem).map((project) => {
-                            return (react_1.default.createElement(ActiveProjectCard_1.ActiveProjectCard, { project: project, projectsData: projectsData, expertName: data === null || data === void 0 ? void 0 : data.fullName, freelancerId: data === null || data === void 0 ? void 0 : data.freelancerId, freelancerEmail: project === null || project === void 0 ? void 0 : project.freelancerEmail, isAuthenticated: isAuthenticated, activeProject: false, selectedTab: selectedTab, updateProjectStatusMutation: updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument: GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation: updateParoProjectTagsMutation, GetParoProjectsDocument: GetParoProjectsDocument, updateProjectTagReviewStatusMutation: updateProjectTagReviewStatusMutation, updateProjectStatus: updateProjectStatus, updateProjectTags: updateProjectTags, sendParoSupportEmail: sendParoSupportEmail, getSowLazyQuery: getSowLazyQuery, createChangeRequestMutation: createChangeRequestMutation, createChangeRequest: createChangeRequest, createOrUpdateRatingRequestMutation: createOrUpdateRatingRequestMutation, updateProjectTaskMutation: updateProjectTaskMutation, updateProjectTask: updateProjectTask, submitProjectHoursMutation: submitProjectHoursMutation, getAuth0Roles: getAuth0Roles, submitProjectHoursLambda: submitProjectHoursLambda, user: user }));
-                        })))),
-                react_1.default.createElement(tabPanelProps.component, { value: 4 + '' }, loading ? react_1.default.createElement(Loader_1.default, null) :
-                    (!(sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.length) ? react_1.default.createElement("div", { className: "flex items-center" },
-                        react_1.default.createElement("p", null, "You currently have no completed projects.")) :
-                        react_1.default.createElement(react_1.default.Fragment, null, sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.slice(firstItem, lastItem).map((project) => {
-                            return (react_1.default.createElement(ActiveProjectCard_1.ActiveProjectCard, { project: project, projectsData: projectsData, expertName: data === null || data === void 0 ? void 0 : data.fullName, freelancerId: data === null || data === void 0 ? void 0 : data.freelancerId, freelancerEmail: project === null || project === void 0 ? void 0 : project.freelancerEmail, isAuthenticated: isAuthenticated, activeProject: false, selectedTab: selectedTab, updateProjectStatusMutation: updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument: GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation: updateParoProjectTagsMutation, GetParoProjectsDocument: GetParoProjectsDocument, updateProjectTagReviewStatusMutation: updateProjectTagReviewStatusMutation, updateProjectStatus: updateProjectStatus, updateProjectTags: updateProjectTags, sendParoSupportEmail: sendParoSupportEmail, getSowLazyQuery: getSowLazyQuery, createChangeRequestMutation: createChangeRequestMutation, createChangeRequest: createChangeRequest, createOrUpdateRatingRequestMutation: createOrUpdateRatingRequestMutation, updateProjectTaskMutation: updateProjectTaskMutation, updateProjectTask: updateProjectTask, submitProjectHoursMutation: submitProjectHoursMutation, getAuth0Roles: getAuth0Roles, submitProjectHoursLambda: submitProjectHoursLambda, user: user }));
-                        })))),
-                react_1.default.createElement(tabPanelProps.component, { value: 5 + '' }, loading ? react_1.default.createElement(Loader_1.default, null) :
-                    (!(sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.length) ? react_1.default.createElement("div", { className: "flex items-center" },
-                        react_1.default.createElement("p", null, "You currently have no paused projects.")) :
-                        react_1.default.createElement(react_1.default.Fragment, null, sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.slice(firstItem, lastItem).map((project) => {
-                            return (react_1.default.createElement(ActiveProjectCard_1.ActiveProjectCard, { project: project, projectsData: projectsData, expertName: data === null || data === void 0 ? void 0 : data.fullName, freelancerId: data === null || data === void 0 ? void 0 : data.freelancerId, freelancerEmail: project === null || project === void 0 ? void 0 : project.freelancerEmail, isAuthenticated: isAuthenticated, activeProject: true, selectedTab: selectedTab, updateProjectStatusMutation: updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument: GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation: updateParoProjectTagsMutation, GetParoProjectsDocument: GetParoProjectsDocument, updateProjectTagReviewStatusMutation: updateProjectTagReviewStatusMutation, updateProjectStatus: updateProjectStatus, updateProjectTags: updateProjectTags, sendParoSupportEmail: sendParoSupportEmail, getSowLazyQuery: getSowLazyQuery, createChangeRequestMutation: createChangeRequestMutation, createChangeRequest: createChangeRequest, createOrUpdateRatingRequestMutation: createOrUpdateRatingRequestMutation, updateProjectTaskMutation: updateProjectTaskMutation, updateProjectTask: updateProjectTask, submitProjectHoursMutation: submitProjectHoursMutation, getAuth0Roles: getAuth0Roles, submitProjectHoursLambda: submitProjectHoursLambda, user: user }));
-                        })))),
-                (sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.length) > 10 && (react_1.default.createElement("div", { className: `${!mobileScreen && "mx-7"}` },
-                    react_1.default.createElement(Pagination_1.default, { total: sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.length, currentPage: currentPage, setCurrentPage: setCurrentPage, perPageItems: perPageItems, setPerPageItems: setPerPageItems, displayText: "projects" })))))));
-};
-exports.EarningsTracker = EarningsTracker;
+"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.EarningsTracker = 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 base_ui_1 = require("@paro.io/base-ui");
+const ActiveProjectCard_1 = require("./ActiveProjectCard");
+const TabContext_1 = __importDefault(require("@material-ui/lab/TabContext"));
+const TabPanel_1 = __importDefault(require("@material-ui/lab/TabPanel"));
+const ProgressBar_1 = require("./ProgressBar");
+const ActiveProjectCard_2 = require("./ActiveProjectCard");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Pagination_1 = __importDefault(require("../Reviews/Pagination"));
+const icons_1 = require("@material-ui/icons");
+const moment_1 = __importDefault(require("moment"));
+const Loader_1 = __importDefault(require("../shared/Loader"));
+const Error_1 = __importDefault(require("../shared/Error"));
+const DEFAULT_SORT_OPTIONS = [
+    {
+        label: 'Client Name',
+        value: 'Client Name',
+    },
+    {
+        label: 'Unrealized Earnings',
+        value: 'Unrealized Earnings',
+    },
+    {
+        label: 'Fixed Projects',
+        value: 'Fixed Projects',
+    },
+];
+const StyledTabPanel = (0, styled_components_1.default)(TabPanel_1.default) `
+    padding: 0px;
+    padding-top: 18px;
+    margin: -6px;
+`;
+const EarningsTracker = ({ freelancerId, isAuthenticated, freelancerProjectDataUnauth, getPendingProjectTagReviews, getAllIrPrDetailsQuery, getFreelancerEarningData, updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation, GetParoProjectsDocument, updateProjectTagReviewStatusMutation, updateProjectStatus, updateProjectTags, sendParoSupportEmail, getSowLazyQuery, createChangeRequestMutation, createChangeRequest, createOrUpdateRatingRequestMutation, updateProjectTaskMutation, updateProjectTask, submitProjectHoursMutation, getAuth0Roles, submitProjectHoursLambda, user, router, }) => {
+    var _a, _b, _c, _d;
+    const theme = (0, core_1.useTheme)();
+    const params = new URLSearchParams(router.query);
+    const renewalsTabIndex = Number((_a = params.get('tab')) !== null && _a !== void 0 ? _a : 0);
+    const classes = (0, ActiveProjectCard_2.useStyles)();
+    const mobileScreen = (0, core_1.useMediaQuery)(theme.breakpoints.down('sm'));
+    const [selectedTab, setSelectedTab] = (0, react_1.useState)(renewalsTabIndex);
+    const sortOptions = selectedTab === 1 ? DEFAULT_SORT_OPTIONS : [{ label: 'Project Health Grade', value: 'Project Health Grade' }, ...DEFAULT_SORT_OPTIONS];
+    const [faqModal, setFaqModal] = react_1.default.useState(false);
+    const [earnings, setEarnings] = (0, react_1.useState)(0);
+    const [lifetimeIRToPR, setLifeTimeIRToPR] = (0, react_1.useState)(0);
+    const [currentPage, setCurrentPage] = (0, react_1.useState)(1);
+    const [perPageItems, setPerPageItems] = (0, react_1.useState)(10);
+    const [sortDirection, setSortDirection] = (0, react_1.useState)('asc');
+    const [sortBy, setSortBy] = (0, react_1.useState)(sortOptions[0].value);
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [pendingProjectTagReviewsData, setPendingProjectTagReviewsData] = (0, react_1.useState)([]);
+    const [freelancerProjectData, setFreelancerProjectData] = (0, react_1.useState)([]);
+    const [getProjectsError, setGetProjectsError] = (0, react_1.useState)(false);
+    const firstItem = (currentPage - 1) * perPageItems;
+    const lastItem = (currentPage - 1) * perPageItems + perPageItems;
+    const fetchQueries = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b;
+        try {
+            setLoading(true);
+            let pendingProjects;
+            let projectDetails;
+            const [pendingProjectTagResponse, projectDetailsResponse] = yield Promise.all([
+                getPendingProjectTagReviews && getPendingProjectTagReviews({
+                    variables: {
+                        freelancerId
+                    },
+                    skip: !freelancerId || [2, 3, 4].includes(selectedTab)
+                }),
+                getAllIrPrDetailsQuery && getAllIrPrDetailsQuery({
+                    variables: {
+                        freelancerId: freelancerId,
+                        projectType: 3, //get hourly & fixed projects
+                        activeTabId: 0, selectedTab,
+                        isInternal: false
+                    },
+                    fetchPolicy: 'network-only',
+                })
+            ]);
+            pendingProjects = ((_a = pendingProjectTagResponse === null || pendingProjectTagResponse === void 0 ? void 0 : pendingProjectTagResponse.data) === null || _a === void 0 ? void 0 : _a.getPendingProjectTagReviews) || [];
+            projectDetails = ((_b = projectDetailsResponse === null || projectDetailsResponse === void 0 ? void 0 : projectDetailsResponse.data) === null || _b === void 0 ? void 0 : _b.getAllProjectIRPRDetailsForFreelancer) || {};
+            setPendingProjectTagReviewsData(pendingProjects);
+            setFreelancerProjectData(projectDetails);
+        }
+        catch (error) {
+            console.error("Error fetching queries:", error);
+            setGetProjectsError(true);
+        }
+        finally {
+            setLoading(false);
+        }
+    });
+    (0, react_1.useEffect)(() => {
+        if (isAuthenticated) {
+            fetchQueries();
+        }
+    }, [selectedTab, isAuthenticated]);
+    const tagReviewProjects = (pendingProjectTagReviewsData === null || pendingProjectTagReviewsData === void 0 ? void 0 : pendingProjectTagReviewsData.getPendingProjectTagReviews) || [];
+    const projectTagsMap = tagReviewProjects.reduce((acc, project) => {
+        var _a, _b;
+        return Object.assign(Object.assign({}, acc), { [project.id]: {
+                softwareTags: ((_a = project === null || project === void 0 ? void 0 : project.tags) === null || _a === void 0 ? void 0 : _a.reduce((acc, tag) => (tag === null || tag === void 0 ? void 0 : tag.field) === 'softwares' ? [...acc, tag.value] : acc, [])) || [],
+                skillTags: ((_b = project === null || project === void 0 ? void 0 : project.tags) === null || _b === void 0 ? void 0 : _b.reduce((acc, tag) => (tag === null || tag === void 0 ? void 0 : tag.field) === 'skills' ? [...acc, tag.value] : acc, [])) || [],
+                project
+            } });
+    }, {});
+    (0, react_1.useEffect)(() => {
+        if (!freelancerId)
+            return;
+        getFreelancerEarningData(freelancerId).then((data) => {
+            var _a;
+            if (data) {
+                const actualEarnings = ((_a = data === null || data === void 0 ? void 0 : data.results) === null || _a === void 0 ? void 0 : _a.length) > 0 && (data === null || data === void 0 ? void 0 : data.results.filter((earning) => earning.earnings_type === 'actual').reduce((acc, curr) => acc + curr.earnings, 0));
+                setEarnings(actualEarnings);
+                setLifeTimeIRToPR(data === null || data === void 0 ? void 0 : data.lifetime_ir_pr);
+            }
+        });
+    }, [freelancerId]);
+    (0, react_1.useEffect)(() => {
+        if (selectedTab === 1 || selectedTab === 2) {
+            setSortBy('Start Date');
+        }
+        else if (selectedTab === 4) {
+            setSortBy('End Date');
+        }
+        else if (selectedTab === 3) {
+            setSortBy('Nearest');
+        }
+        else {
+            setSortBy(sortOptions[0].value);
+        }
+    }, [selectedTab]);
+    if (selectedTab === 0 && isAuthenticated && (loading || !freelancerProjectData)) {
+        return react_1.default.createElement(Loader_1.default, null);
+    }
+    if (getProjectsError) {
+        return (react_1.default.createElement("div", { className: "mt-20" },
+            react_1.default.createElement(Error_1.default, { message: 'Error fetching your project data. Please refresh the page and try again.' })));
+    }
+    //@ts-ignore
+    const data = isAuthenticated ? freelancerProjectData !== null && freelancerProjectData !== void 0 ? freelancerProjectData : {} : freelancerProjectDataUnauth;
+    let averageInvoicedRevenue;
+    if (earnings > 0 && (data === null || data === void 0 ? void 0 : data.paroTenure) > 0) {
+        const invoicedRevenueData = earnings / (data === null || data === void 0 ? void 0 : data.paroTenure);
+        averageInvoicedRevenue = (invoicedRevenueData === null || invoicedRevenueData === void 0 ? void 0 : invoicedRevenueData.toFixed(2)) || 0;
+    }
+    const projectsArray = (_b = data === null || data === void 0 ? void 0 : data.projects) !== null && _b !== void 0 ? _b : [];
+    const projectsData = (_c = data === null || data === void 0 ? void 0 : data.projectsData) !== null && _c !== void 0 ? _c : [];
+    let projectDataContainer = new Map();
+    projectsArray.forEach((el) => projectDataContainer.set(el.id, el));
+    let sortedData = [];
+    projectsData === null || projectsData === void 0 ? void 0 : projectsData.forEach((el) => {
+        if (projectDataContainer.has(el.id)) {
+            sortedData === null || sortedData === void 0 ? void 0 : sortedData.push(Object.assign(Object.assign({}, el), projectDataContainer === null || projectDataContainer === void 0 ? void 0 : projectDataContainer.get(el.id)));
+        }
+    });
+    const healthOrder = { "!": 0, "D": 1, "C": 2, "B": 3, "A": 4 };
+    let sortedProjects = [];
+    const getSortKey = (project) => {
+        const health = project === null || project === void 0 ? void 0 : project.healthGrade;
+        const startDate = (project === null || project === void 0 ? void 0 : project.startDate) || null;
+        const endDate = (project === null || project === void 0 ? void 0 : project.endDate) || null;
+        //@ts-ignore
+        const healthKey = healthOrder[health] !== undefined ? healthOrder[health] : Infinity;
+        const startDateObj = startDate ? new Date(startDate) : null;
+        const endDateObj = endDate ? new Date(endDate) : null;
+        const projectName = project === null || project === void 0 ? void 0 : project.name;
+        return [healthKey, startDateObj, projectName, endDateObj];
+    };
+    if (sortBy) {
+        if (sortBy === "Project Health Grade") {
+            sortedProjects = sortedData.sort((a, b) => {
+                var _a, _b;
+                const orderA = healthOrder[a === null || a === void 0 ? void 0 : a.healthGrade];
+                const orderB = healthOrder[b === null || b === void 0 ? void 0 : b.healthGrade];
+                // for fixed projects
+                const rateTypeA = (_a = a === null || a === void 0 ? void 0 : a.projectScope) === null || _a === void 0 ? void 0 : _a.freelanceRateTypeId;
+                const rateTypeB = (_b = b === null || b === void 0 ? void 0 : b.projectScope) === null || _b === void 0 ? void 0 : _b.freelanceRateTypeId;
+                if (rateTypeA === 2 && rateTypeB === 2) {
+                    return 0;
+                }
+                else if (rateTypeA === 2) {
+                    return 1;
+                }
+                else if (rateTypeB === 2) {
+                    return -1;
+                }
+                else {
+                    if (sortDirection === "asc") {
+                        return orderA - orderB;
+                    }
+                    else {
+                        return orderB - orderA;
+                    }
+                }
+            });
+        }
+        else if (sortBy === "Client Name") {
+            sortedProjects = sortedData.sort((a, b) => {
+                var _a, _b;
+                const clientA = (_a = a === null || a === void 0 ? void 0 : a.client) === null || _a === void 0 ? void 0 : _a.name;
+                const clientB = (_b = b === null || b === void 0 ? void 0 : b.client) === null || _b === void 0 ? void 0 : _b.name;
+                if (sortDirection === "asc") {
+                    return String(clientA).localeCompare(clientB);
+                }
+                else {
+                    return String(clientB).localeCompare(clientA);
+                }
+            });
+        }
+        else if (sortBy === "Unrealized Earnings") {
+            sortedProjects = sortedData.sort((a, b) => {
+                const unrealizedEarningsKey1 = (a === null || a === void 0 ? void 0 : a.maxHours) * (a === null || a === void 0 ? void 0 : a.expertRate);
+                const unrealizedEarningsKey2 = (b === null || b === void 0 ? void 0 : b.maxHours) * (b === null || b === void 0 ? void 0 : b.expertRate);
+                if (sortDirection === "asc") {
+                    return unrealizedEarningsKey1 - unrealizedEarningsKey2;
+                }
+                else {
+                    return unrealizedEarningsKey2 - unrealizedEarningsKey1;
+                }
+            });
+        }
+        else if (sortBy === "Fixed Projects") {
+            sortedProjects = sortedData.sort((a, b) => {
+                var _a, _b;
+                const rateTypeA = (_a = a === null || a === void 0 ? void 0 : a.projectScope) === null || _a === void 0 ? void 0 : _a.freelanceRateTypeId;
+                const rateTypeB = (_b = b === null || b === void 0 ? void 0 : b.projectScope) === null || _b === void 0 ? void 0 : _b.freelanceRateTypeId;
+                if (rateTypeA === 2 && rateTypeB === 2) {
+                    return sortDirection === "asc" ? +(0, moment_1.default)(a.startDate) - +(0, moment_1.default)(b.startDate) : +(0, moment_1.default)(b.startDate) - +(0, moment_1.default)(a.startDate);
+                }
+                else if (rateTypeA === 2) {
+                    return -1;
+                }
+                else if (rateTypeB === 2) {
+                    return 1;
+                }
+                else {
+                    return 0;
+                }
+            });
+        }
+        else if (sortBy === "Start Date") {
+            sortedProjects = sortedData === null || sortedData === void 0 ? void 0 : sortedData.slice().sort((a, b) => {
+                const keyA = getSortKey(a);
+                const keyB = getSortKey(b);
+                return keyA[1] - keyB[1];
+            });
+        }
+        else if (sortBy === "End Date") {
+            sortedProjects = sortedData === null || sortedData === void 0 ? void 0 : sortedData.slice().sort((a, b) => {
+                const keyA = getSortKey(a);
+                const keyB = getSortKey(b);
+                return keyB[3] - keyA[3];
+            });
+        }
+        else if (sortBy === "Nearest") {
+            sortedProjects = sortedData === null || sortedData === void 0 ? void 0 : sortedData.sort((a, b) => {
+                if (a.endDate === null && b.endDate === null) {
+                    return 0;
+                }
+                else if (a.endDate === null) {
+                    return 1;
+                }
+                else if (b.endDate === null) {
+                    return -1;
+                }
+                else {
+                    const diffA = Math.abs((0, moment_1.default)(a.endDate).diff((0, moment_1.default)(), 'days'));
+                    const diffB = Math.abs((0, moment_1.default)(b.endDate).diff((0, moment_1.default)(), 'days'));
+                    return diffA - diffB;
+                }
+            });
+        }
+    }
+    const handleChangeValue = (event, newValue) => {
+        setSortBy(sortOptions[0].value);
+        setSortDirection('asc');
+        setSelectedTab(newValue);
+    };
+    const today = new Date();
+    const currMonth = today.toLocaleDateString('en-US', { month: 'long' });
+    const tabPanelProps = mobileScreen ? { component: StyledTabPanel } : { component: TabPanel_1.default };
+    const handleSort = (e) => {
+        setSortBy(e.currentTarget.value);
+    };
+    const handleSortDirectionChange = () => {
+        setSortDirection(sortDirection === "asc" ? "desc" : "asc");
+        let isKeyExist = sortOptions.find(i => i.value === sortBy);
+        if (!isKeyExist) {
+            setSortBy(sortOptions[0].value);
+        }
+    };
+    let unrealizedEarnings = 0;
+    const calculateTotalUnrealizedEarnings = (projectData) => {
+        var _a, _b, _c;
+        const payRate = (_a = projectData === null || projectData === void 0 ? void 0 : projectData.expertRate) !== null && _a !== void 0 ? _a : 0;
+        const loggedHours = (_b = projectData === null || projectData === void 0 ? void 0 : projectData.hoursInvoiced) !== null && _b !== void 0 ? _b : 0;
+        const maxHours = (_c = projectData === null || projectData === void 0 ? void 0 : projectData.maxHours) !== null && _c !== void 0 ? _c : 0;
+        const invoicedAmount = payRate * loggedHours;
+        const maxProjectEarnings = maxHours * payRate;
+        return maxProjectEarnings - invoicedAmount > 0 ? maxProjectEarnings - invoicedAmount : 0;
+    };
+    if (sortedData.length > 0) {
+        unrealizedEarnings = sortedData.reduce((acc, project) => {
+            return acc + calculateTotalUnrealizedEarnings(project);
+        }, 0);
+    }
+    const getTitle = () => {
+        switch (selectedTab) {
+            case 0:
+                return "Active";
+            case 1:
+                return "Ad Hoc";
+            case 2:
+                return "Upcoming";
+            case 3:
+                return "Inactive";
+            case 4:
+                return "Completed";
+            case 5:
+                return "Paused";
+            default:
+                return "Active";
+        }
+    };
+    return (react_1.default.createElement("div", { className: "flex flex-col w-full" },
+        react_1.default.createElement("h1", { className: "font-bold text-3xl ml-4", "data-tut": 'reactour__projectmanagement' }, "Earnings Tracker"),
+        loading && isAuthenticated ? react_1.default.createElement("div", { className: "m-8" },
+            react_1.default.createElement(Loader_1.default, null)) :
+            react_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement(base_ui_1.Card, { className: "w-full bg-white flex flex-col sm:flex-row justify-space-between p-8 m-4" },
+                selectedTab !== 1 && (react_1.default.createElement("div", { className: "flex flex-col w-full mb-4 md:mb-0" },
+                    react_1.default.createElement("h1", { className: "font-bold text-xl ml-4" },
+                        "Avg. Project Grading for ",
+                        getTitle(),
+                        " Projects"),
+                    react_1.default.createElement("div", { className: "flex flex-row" },
+                        react_1.default.createElement("div", { className: "flex flex-col items-center rounded-md bg-[#FDD8A5] p-4 m-4" },
+                            react_1.default.createElement("p", null, "Hourly Projects"),
+                            react_1.default.createElement(core_1.Tooltip, { classes: { tooltip: classes.tooltip }, title: "The average health card grade is based on all your active projects shown below.", placement: "top", arrow: true },
+                                react_1.default.createElement("div", { className: "h-12 w-16 rounded-md flex place-content-center items-center m-1" }, ((_d = data === null || data === void 0 ? void 0 : data.overallProjectHealth) === null || _d === void 0 ? void 0 : _d.trim()) !== '' ? react_1.default.createElement("h1", { className: "font-bold text-2xl self-center" }, data === null || data === void 0 ? void 0 : data.overallProjectHealth) : react_1.default.createElement("h1", { className: "text-xl text-red-500" }, "N/A"))),
+                            react_1.default.createElement("div", { className: 'flex items-center' },
+                                react_1.default.createElement("p", null, "Why this score?"),
+                                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, { size: "sm" }))))),
+                        react_1.default.createElement("div", { className: "flex flex-col gap-y-4" },
+                            react_1.default.createElement(core_1.Tooltip, { classes: { tooltip: classes.tooltip }, title: "The Minimum Floor Hours shows how many active projects you have currently completed the minimum floor hours requirement for and how many active projects that require minimum floor hours to be completed", placement: "top", arrow: true },
+                                react_1.default.createElement("div", { className: "flex flex-row justify-content-start mt-4 bg-[#F1F5F9] p-1 rounded-md" },
+                                    react_1.default.createElement(ActiveProjectCard_1.CheckItem, { checked: ((data === null || data === void 0 ? void 0 : data.minFloorHoursCountNumerator) > 0 && (data === null || data === void 0 ? void 0 : data.minFloorHoursCountDenominator) > 0), text: "Avg. Min Floor Hours Completed" }),
+                                    react_1.default.createElement("div", { className: "p-2 w-1/5 border-2 border-solid border-[#F1F5F9] rounded-md flex place-content-center items-start" }, ((data === null || data === void 0 ? void 0 : data.minFloorHoursCountNumerator) >= 0 && (data === null || data === void 0 ? void 0 : data.minFloorHoursCountDenominator) >= 0) ? react_1.default.createElement("p", null, data === null || data === void 0 ? void 0 :
+                                        data.minFloorHoursCountNumerator,
+                                        "/", data === null || data === void 0 ? void 0 :
+                                        data.minFloorHoursCountDenominator) : react_1.default.createElement("p", { className: "text-xl text-red-500" }, "N/A")))),
+                            react_1.default.createElement(core_1.Tooltip, { classes: { tooltip: classes.tooltip }, title: "The Weekly Minimum Hours shows if you have submitted hours for a given week for an active project. If so, a check mark will appear next to it on the project card below. This does not impact your project grade but is a reminder to log hours consistently.", placement: "top", arrow: true },
+                                react_1.default.createElement("div", { className: "flex flex-row justify-content-start mb-4 bg-[#F1F5F9] p-1 rounded-md" },
+                                    react_1.default.createElement(ActiveProjectCard_1.CheckItem, { checked: ((data === null || data === void 0 ? void 0 : data.weeklyMinHoursLoggedCountNumerator) > 0 && (data === null || data === void 0 ? void 0 : data.weeklyMinHoursLoggedCountDenominator) > 0), text: "Avg. Weekly Min Hours Logged" }),
+                                    react_1.default.createElement("div", { className: "p-2 w-1/5 border-2 border-solid border-[#F1F5F9] rounded-md flex place-content-center items-start" }, ((data === null || data === void 0 ? void 0 : data.weeklyMinHoursLoggedCountNumerator) >= 0 && (data === null || data === void 0 ? void 0 : data.weeklyMinHoursLoggedCountDenominator) >= 0) ? react_1.default.createElement("p", null, data === null || data === void 0 ? void 0 :
+                                        data.weeklyMinHoursLoggedCountNumerator,
+                                        "/", data === null || data === void 0 ? void 0 :
+                                        data.weeklyMinHoursLoggedCountDenominator) : react_1.default.createElement("p", { className: "text-xl text-red-500" }, "N/A")))))))),
+                react_1.default.createElement("div", { className: "flex flex-col w-full mb-4 md:mb-0" },
+                    react_1.default.createElement("h1", { className: "font-bold text-xl ml-4" }, "Monthly Earnings"),
+                    react_1.default.createElement("div", { className: "flex flex-row justify-items-stretch gap-x-4 p-4" },
+                        react_1.default.createElement("div", { className: "flex flex-col bg-[#F1F5F9] p-4 text-md rounded-md w-1/2", "data-tut": 'reactour__monthlyearnings' },
+                            react_1.default.createElement("p", null, currMonth),
+                            (data === null || data === void 0 ? void 0 : data.monthlyEarnings) > 0 ? react_1.default.createElement("h1", { className: "text-xl font-bold" },
+                                "$ ",
+                                (0, ProgressBar_1.formatNumberingSystem)(data === null || data === void 0 ? void 0 : data.monthlyEarnings)) : react_1.default.createElement("h1", { className: "text-xl font-bold" }, "$ 0"),
+                            (data === null || data === void 0 ? void 0 : data.expertCurrMonthGoal) >= 0 ? react_1.default.createElement("p", { className: "text-sm" },
+                                "Goal: $ ",
+                                (0, ProgressBar_1.formatNumberingSystem)(data === null || data === void 0 ? void 0 : data.expertCurrMonthGoal)) : react_1.default.createElement("p", { className: "text-sm" },
+                                react_1.default.createElement("small", null, "Goal: No Goal set for current month"),
+                                " ")),
+                        react_1.default.createElement("div", { className: "flex flex-col bg-[#F1F5F9] p-4 text-md rounded-md w-1/2" },
+                            react_1.default.createElement("p", null, "Avg./Month"),
+                            averageInvoicedRevenue ? react_1.default.createElement("h1", { className: "text-xl font-bold" },
+                                "$ ",
+                                (0, ProgressBar_1.formatNumberingSystem)(averageInvoicedRevenue)) : react_1.default.createElement("h1", { className: "text-xl font-bold" }, "$ 0"),
+                            (data === null || data === void 0 ? void 0 : data.freelancerGoal) >= 0 ? react_1.default.createElement("p", { className: "text-sm" },
+                                "Avg Goal: $ ",
+                                (0, ProgressBar_1.formatNumberingSystem)(data === null || data === void 0 ? void 0 : data.freelancerGoal)) : react_1.default.createElement("p", { className: "text-sm" },
+                                react_1.default.createElement("small", null, "Avg Goal: No Monthly Goal Set"),
+                                " ")))),
+                react_1.default.createElement("div", { className: "flex flex-col w-full" },
+                    react_1.default.createElement("h1", { className: "font-bold text-xl ml-4" }, "Lifetime Earnings Health"),
+                    react_1.default.createElement("div", { className: "flex flex-col justify-between p-4 gap-y-4" },
+                        react_1.default.createElement("div", { className: "flex flex-row justify-between bg-[#F1F5F9] p-2 px-4 text-md rounded-md" },
+                            react_1.default.createElement("p", null, "Invoiced to Projected:"),
+                            lifetimeIRToPR > 0 ? react_1.default.createElement("h1", { className: "text-xl font-bold" },
+                                (0, ProgressBar_1.formatNumberingSystem)(lifetimeIRToPR),
+                                "%") : react_1.default.createElement("h1", { className: "text-xl font-bold" }, "--")),
+                        react_1.default.createElement("div", { className: "flex flex-row justify-between bg-[#F1F5F9] p-2 px-4 text-md rounded-md" },
+                            react_1.default.createElement("p", null, "Avg Contract Value:"),
+                            (data === null || data === void 0 ? void 0 : data.averageContractValue) > 0 ? react_1.default.createElement("h1", { className: "text-xl font-bold" },
+                                "$",
+                                (0, ProgressBar_1.formatNumberingSystem)(data === null || data === void 0 ? void 0 : data.averageContractValue)) : react_1.default.createElement("h1", { className: "text-sm text-red-500 w-36" }, "Data will appear once you have won your first project")),
+                        react_1.default.createElement("div", { className: "flex flex-row justify-between bg-[#F1F5F9] p-2 px-4 text-md rounded-md" },
+                            react_1.default.createElement("p", null,
+                                "Total Unrealized Earnings for ",
+                                getTitle(),
+                                " Projects:"),
+                            react_1.default.createElement("h1", { className: "text-xl font-bold", "data-tut": 'reactour__totalunrealizedearnings' },
+                                "$",
+                                (0, ProgressBar_1.formatNumberingSystem)(unrealizedEarnings))))))),
+        !isAuthenticated && react_1.default.createElement("div", { className: 'border ml-4 w-full text-white rounded-md bg-[#1878bd]' },
+            react_1.default.createElement("ul", { className: "list-disc px-8 py-3" },
+                react_1.default.createElement("li", null, "The projects shown below are only your active projects."),
+                react_1.default.createElement("li", null,
+                    "Please ",
+                    react_1.default.createElement("a", { className: 'underline font-bold', href: "/earnings-tracker", target: "_blank" }, "log in"),
+                    " here to view all your projects that are Upcoming, Ad Hoc, Completed, or Inactive."),
+                react_1.default.createElement("li", null, "Active projects will show up 7 days before they start for you to make changes and keep track of reporting."))),
+        react_1.default.createElement("div", { className: "m-4 w-full" },
+            react_1.default.createElement(TabContext_1.default, { value: selectedTab + '' },
+                react_1.default.createElement(core_1.Tabs, { TabIndicatorProps: { style: { background: '#248384' } }, value: selectedTab, onChange: handleChangeValue, variant: "scrollable", scrollButtons: "off" },
+                    react_1.default.createElement(core_1.Tab, { label: react_1.default.createElement("div", { className: "flex flex-row items-center" }, "\u00A0Active") }),
+                    isAuthenticated && (react_1.default.createElement(core_1.Tab, { label: react_1.default.createElement("div", { className: "flex flex-row items-center" }, "\u00A0Ad Hoc") })),
+                    isAuthenticated && (react_1.default.createElement(core_1.Tab, { label: react_1.default.createElement("div", { className: "flex flex-row items-center", "data-tut": 'reacttour__upcomingsubheader' }, "\u00A0Upcoming") })),
+                    isAuthenticated && (react_1.default.createElement(core_1.Tab, { label: react_1.default.createElement("div", { className: "flex flex-row items-center" }, "\u00A0Inactive") })),
+                    isAuthenticated && (react_1.default.createElement(core_1.Tab, { label: react_1.default.createElement("div", { className: "flex flex-row items-center" }, "\u00A0Completed") })),
+                    isAuthenticated && (react_1.default.createElement(core_1.Tab, { label: react_1.default.createElement("div", { className: "flex flex-row items-center" }, "\u00A0Paused") }))),
+                ((sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.length) > 0 || (isAuthenticated && !loading)) && selectedTab !== 5 &&
+                    react_1.default.createElement("div", { className: 'flex items-end gap-2 w-full justify-end mt-4', "data-tut": 'reacttour__sortby' },
+                        react_1.default.createElement(base_ui_1.Select, { label: "Sort by", required: false, value: sortBy, onChange: e => handleSort(e), options: sortOptions, className: 'max-w-fit' }),
+                        react_1.default.createElement(core_1.IconButton, { onClick: handleSortDirectionChange, title: sortDirection }, sortDirection === "asc" ? react_1.default.createElement(icons_1.ArrowUpwardRounded, null) : react_1.default.createElement(icons_1.ArrowDownwardRounded, null))),
+                react_1.default.createElement(tabPanelProps.component, { value: 0 + '' }, loading && isAuthenticated ? react_1.default.createElement(Loader_1.default, null) :
+                    (!(sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.length) ? react_1.default.createElement("div", { className: "flex items-center" },
+                        react_1.default.createElement("p", null,
+                            "You currently have no active hourly projects. ",
+                            react_1.default.createElement("a", { className: "underline cursor-pointer", onClick: () => { setFaqModal(true); } }, "Learn more"),
+                            " about winning projects here or visit the ",
+                            react_1.default.createElement("a", { className: "underline cursor-pointer", href: "/opportunities", target: "_blank" }, "opportunity board"),
+                            ".")) :
+                        react_1.default.createElement(react_1.default.Fragment, null, sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.slice(firstItem, lastItem).map((project) => {
+                            return (react_1.default.createElement(ActiveProjectCard_1.ActiveProjectCard, { project: project, projectsData: projectsData, expertName: data === null || data === void 0 ? void 0 : data.fullName, freelancerId: data === null || data === void 0 ? void 0 : data.freelancerId, freelancerEmail: project === null || project === void 0 ? void 0 : project.freelancerEmail, isAuthenticated: isAuthenticated, activeProject: true, selectedTab: selectedTab, projectTagsMap: projectTagsMap, updateProjectStatusMutation: updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument: GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation: updateParoProjectTagsMutation, GetParoProjectsDocument: GetParoProjectsDocument, updateProjectTagReviewStatusMutation: updateProjectTagReviewStatusMutation, updateProjectStatus: updateProjectStatus, updateProjectTags: updateProjectTags, sendParoSupportEmail: sendParoSupportEmail, getSowLazyQuery: getSowLazyQuery, createChangeRequestMutation: createChangeRequestMutation, createChangeRequest: createChangeRequest, createOrUpdateRatingRequestMutation: createOrUpdateRatingRequestMutation, updateProjectTaskMutation: updateProjectTaskMutation, updateProjectTask: updateProjectTask, submitProjectHoursMutation: submitProjectHoursMutation, getAuth0Roles: getAuth0Roles, submitProjectHoursLambda: submitProjectHoursLambda, user: user }));
+                        })))),
+                react_1.default.createElement(tabPanelProps.component, { value: 1 + '' }, loading ? react_1.default.createElement(Loader_1.default, null) :
+                    (!(sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.length) ? react_1.default.createElement("div", { className: "flex items-center" },
+                        react_1.default.createElement("p", null, "You have no Ad Hoc projects at this time.")) :
+                        react_1.default.createElement(react_1.default.Fragment, null, sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.slice(firstItem, lastItem).map((project) => {
+                            return (react_1.default.createElement(ActiveProjectCard_1.ActiveProjectCard, { project: project, projectsData: projectsData, expertName: data === null || data === void 0 ? void 0 : data.fullName, freelancerId: data === null || data === void 0 ? void 0 : data.freelancerId, freelancerEmail: project === null || project === void 0 ? void 0 : project.freelancerEmail, isAuthenticated: isAuthenticated, activeProject: true, adhocProject: true, selectedTab: selectedTab, projectTagsMap: projectTagsMap, updateProjectStatusMutation: updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument: GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation: updateParoProjectTagsMutation, GetParoProjectsDocument: GetParoProjectsDocument, updateProjectTagReviewStatusMutation: updateProjectTagReviewStatusMutation, updateProjectStatus: updateProjectStatus, updateProjectTags: updateProjectTags, sendParoSupportEmail: sendParoSupportEmail, getSowLazyQuery: getSowLazyQuery, createChangeRequestMutation: createChangeRequestMutation, createChangeRequest: createChangeRequest, createOrUpdateRatingRequestMutation: createOrUpdateRatingRequestMutation, updateProjectTaskMutation: updateProjectTaskMutation, updateProjectTask: updateProjectTask, submitProjectHoursMutation: submitProjectHoursMutation, getAuth0Roles: getAuth0Roles, submitProjectHoursLambda: submitProjectHoursLambda, user: user }));
+                        })))),
+                react_1.default.createElement(tabPanelProps.component, { value: 2 + '' }, loading ? react_1.default.createElement(Loader_1.default, null) :
+                    (!(sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.length) ? react_1.default.createElement("div", { className: "flex items-center" },
+                        react_1.default.createElement("p", null, "You have no upcoming projects at this time.")) :
+                        react_1.default.createElement(react_1.default.Fragment, null, sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.slice(firstItem, lastItem).map((project) => {
+                            return (react_1.default.createElement(ActiveProjectCard_1.ActiveProjectCard, { project: project, projectsData: projectsData, expertName: data === null || data === void 0 ? void 0 : data.fullName, freelancerId: data === null || data === void 0 ? void 0 : data.freelancerId, freelancerEmail: project === null || project === void 0 ? void 0 : project.freelancerEmail, isAuthenticated: isAuthenticated, activeProject: false, upcomingProject: true, selectedTab: selectedTab, updateProjectStatusMutation: updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument: GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation: updateParoProjectTagsMutation, GetParoProjectsDocument: GetParoProjectsDocument, updateProjectTagReviewStatusMutation: updateProjectTagReviewStatusMutation, updateProjectStatus: updateProjectStatus, updateProjectTags: updateProjectTags, sendParoSupportEmail: sendParoSupportEmail, getSowLazyQuery: getSowLazyQuery, createChangeRequestMutation: createChangeRequestMutation, createChangeRequest: createChangeRequest, createOrUpdateRatingRequestMutation: createOrUpdateRatingRequestMutation, updateProjectTaskMutation: updateProjectTaskMutation, updateProjectTask: updateProjectTask, submitProjectHoursMutation: submitProjectHoursMutation, getAuth0Roles: getAuth0Roles, submitProjectHoursLambda: submitProjectHoursLambda, user: user }));
+                        })))),
+                react_1.default.createElement(tabPanelProps.component, { value: 3 + '' }, loading ? react_1.default.createElement(Loader_1.default, null) :
+                    (!(sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.length) ? react_1.default.createElement("div", { className: "flex items-center" },
+                        react_1.default.createElement("p", null, "You have no Inactive projects at this time.")) :
+                        react_1.default.createElement(react_1.default.Fragment, null, sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.slice(firstItem, lastItem).map((project) => {
+                            return (react_1.default.createElement(ActiveProjectCard_1.ActiveProjectCard, { project: project, projectsData: projectsData, expertName: data === null || data === void 0 ? void 0 : data.fullName, freelancerId: data === null || data === void 0 ? void 0 : data.freelancerId, freelancerEmail: project === null || project === void 0 ? void 0 : project.freelancerEmail, isAuthenticated: isAuthenticated, activeProject: false, selectedTab: selectedTab, updateProjectStatusMutation: updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument: GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation: updateParoProjectTagsMutation, GetParoProjectsDocument: GetParoProjectsDocument, updateProjectTagReviewStatusMutation: updateProjectTagReviewStatusMutation, updateProjectStatus: updateProjectStatus, updateProjectTags: updateProjectTags, sendParoSupportEmail: sendParoSupportEmail, getSowLazyQuery: getSowLazyQuery, createChangeRequestMutation: createChangeRequestMutation, createChangeRequest: createChangeRequest, createOrUpdateRatingRequestMutation: createOrUpdateRatingRequestMutation, updateProjectTaskMutation: updateProjectTaskMutation, updateProjectTask: updateProjectTask, submitProjectHoursMutation: submitProjectHoursMutation, getAuth0Roles: getAuth0Roles, submitProjectHoursLambda: submitProjectHoursLambda, user: user }));
+                        })))),
+                react_1.default.createElement(tabPanelProps.component, { value: 4 + '' }, loading ? react_1.default.createElement(Loader_1.default, null) :
+                    (!(sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.length) ? react_1.default.createElement("div", { className: "flex items-center" },
+                        react_1.default.createElement("p", null, "You currently have no completed projects.")) :
+                        react_1.default.createElement(react_1.default.Fragment, null, sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.slice(firstItem, lastItem).map((project) => {
+                            return (react_1.default.createElement(ActiveProjectCard_1.ActiveProjectCard, { project: project, projectsData: projectsData, expertName: data === null || data === void 0 ? void 0 : data.fullName, freelancerId: data === null || data === void 0 ? void 0 : data.freelancerId, freelancerEmail: project === null || project === void 0 ? void 0 : project.freelancerEmail, isAuthenticated: isAuthenticated, activeProject: false, selectedTab: selectedTab, updateProjectStatusMutation: updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument: GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation: updateParoProjectTagsMutation, GetParoProjectsDocument: GetParoProjectsDocument, updateProjectTagReviewStatusMutation: updateProjectTagReviewStatusMutation, updateProjectStatus: updateProjectStatus, updateProjectTags: updateProjectTags, sendParoSupportEmail: sendParoSupportEmail, getSowLazyQuery: getSowLazyQuery, createChangeRequestMutation: createChangeRequestMutation, createChangeRequest: createChangeRequest, createOrUpdateRatingRequestMutation: createOrUpdateRatingRequestMutation, updateProjectTaskMutation: updateProjectTaskMutation, updateProjectTask: updateProjectTask, submitProjectHoursMutation: submitProjectHoursMutation, getAuth0Roles: getAuth0Roles, submitProjectHoursLambda: submitProjectHoursLambda, user: user }));
+                        })))),
+                react_1.default.createElement(tabPanelProps.component, { value: 5 + '' }, loading ? react_1.default.createElement(Loader_1.default, null) :
+                    (!(sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.length) ? react_1.default.createElement("div", { className: "flex items-center" },
+                        react_1.default.createElement("p", null, "You currently have no paused projects.")) :
+                        react_1.default.createElement(react_1.default.Fragment, null, sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.slice(firstItem, lastItem).map((project) => {
+                            return (react_1.default.createElement(ActiveProjectCard_1.ActiveProjectCard, { project: project, projectsData: projectsData, expertName: data === null || data === void 0 ? void 0 : data.fullName, freelancerId: data === null || data === void 0 ? void 0 : data.freelancerId, freelancerEmail: project === null || project === void 0 ? void 0 : project.freelancerEmail, isAuthenticated: isAuthenticated, activeProject: true, selectedTab: selectedTab, updateProjectStatusMutation: updateProjectStatusMutation, GetAllProjectIrprDetailsForFreelancerDocument: GetAllProjectIrprDetailsForFreelancerDocument, updateParoProjectTagsMutation: updateParoProjectTagsMutation, GetParoProjectsDocument: GetParoProjectsDocument, updateProjectTagReviewStatusMutation: updateProjectTagReviewStatusMutation, updateProjectStatus: updateProjectStatus, updateProjectTags: updateProjectTags, sendParoSupportEmail: sendParoSupportEmail, getSowLazyQuery: getSowLazyQuery, createChangeRequestMutation: createChangeRequestMutation, createChangeRequest: createChangeRequest, createOrUpdateRatingRequestMutation: createOrUpdateRatingRequestMutation, updateProjectTaskMutation: updateProjectTaskMutation, updateProjectTask: updateProjectTask, submitProjectHoursMutation: submitProjectHoursMutation, getAuth0Roles: getAuth0Roles, submitProjectHoursLambda: submitProjectHoursLambda, user: user }));
+                        })))),
+                (sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.length) > 10 && (react_1.default.createElement("div", { className: `${!mobileScreen && "mx-7"}` },
+                    react_1.default.createElement(Pagination_1.default, { total: sortedProjects === null || sortedProjects === void 0 ? void 0 : sortedProjects.length, currentPage: currentPage, setCurrentPage: setCurrentPage, perPageItems: perPageItems, setPerPageItems: setPerPageItems, displayText: "projects" })))))));
+};
+exports.EarningsTracker = EarningsTracker;