{"id":404,"date":"2026-04-27T05:52:59","date_gmt":"2026-04-27T05:52:59","guid":{"rendered":"https:\/\/ph-taskportal.zyneventures.com\/?page_id=404"},"modified":"2026-06-23T09:41:31","modified_gmt":"2026-06-23T09:41:31","slug":"qc-assigned-hours","status":"publish","type":"page","link":"https:\/\/ph-portal-v2.zyneventures.com\/index.php\/qc-assigned-hours\/","title":{"rendered":"QC Assigned Hours"},"content":{"rendered":"<style>.kadence-column404_ecf606-dc > .kt-inside-inner-col,.kadence-column404_ecf606-dc > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column404_ecf606-dc > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column404_ecf606-dc > .kt-inside-inner-col{flex-direction:column;}.kadence-column404_ecf606-dc > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column404_ecf606-dc > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column404_ecf606-dc{position:relative;}@media all and (max-width: 1024px){.kadence-column404_ecf606-dc > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column404_ecf606-dc > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column404_ecf606-dc\"><div class=\"kt-inside-inner-col\"><style>.kb-row-layout-id404_f179c5-09 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id404_f179c5-09 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id404_f179c5-09 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id404_f179c5-09 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id404_f179c5-09 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id404_f179c5-09 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id404_f179c5-09 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column404_e25fcb-e2 > .kt-inside-inner-col,.kadence-column404_e25fcb-e2 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column404_e25fcb-e2 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column404_e25fcb-e2 > .kt-inside-inner-col{flex-direction:column;}.kadence-column404_e25fcb-e2 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column404_e25fcb-e2 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column404_e25fcb-e2{position:relative;}@media all and (max-width: 1024px){.kadence-column404_e25fcb-e2 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column404_e25fcb-e2 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column404_e25fcb-e2\"><div class=\"kt-inside-inner-col\">\n\n<style>\n    @import url(\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap-icons@1.11.3\/font\/bootstrap-icons.min.css\");\n\n    :root {\n        --primary-blue: #0180FF;\n        --hover-blue: #3499FF;\n        --text-dark: #212529;\n        --text-muted: #8D8C9C;\n        --border-color: #EFEFEF;\n        --bg-form: #F5F5F5;\n        --success-green: #1E8E3E;\n        --bg-light: #F7F8FA;\n        --white: #ffffff;\n    }\n\n    body {\n        font-family: 'Sora', sans-serif;\n        background-color: var(--white);\n        color: var(--text-dark);\n    }\n\n    \/* Header Layout *\/\n    .header-container {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 30px;\n        flex-wrap: wrap;\n        gap: 15px;\n    }\n\n    .header-container h2 {\n        margin: 0;\n        font-size: 16px;\n        font-weight: 500;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n        color: #333;\n    }\n\n    .btn {\n        height: 38px;\n        padding: 0 25px;\n        border-radius: 6px;\n        font-size: 12px;\n        font-weight: 500;\n        cursor: pointer;\n        border: none;\n        transition: 0.2s;\n        font-family: 'Sora', sans-serif;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    .btn-primary {\n        background: var(--primary-blue);\n        color: white;\n    }\n\n    .btn-primary:hover {\n        background: var(--hover-blue);\n    }\n\n    \/* Table Design *\/\n    .table-container {\n        width: 100%;\n        overflow-x: auto;\n        -webkit-overflow-scrolling: touch;\n        border: 1px solid var(--border-color);\n        border-radius: 6px;\n    }\n\n    .table-container table {\n        width: 100%;\n        border-collapse: collapse;\n        font-size: 12px;\n        white-space: nowrap;\n        min-width: 700px;\n    }\n\n    .table-container th {\n        background: var(--bg-light);\n        font-size: 12px;\n        font-weight: 500;\n        padding: 12px 15px;\n        text-align: left;\n        color: var(--text-dark);\n        border-bottom: 1px solid var(--border-color);\n        text-transform: uppercase;\n    }\n\n    .table-container td {\n        font-size: 12px;\n        font-weight: 400;\n        padding: 12px 15px;\n        border-bottom: 1px solid #f2f2f2;\n        color: #8D8C9C;\n    }\n\n    .action-icon {\n        color: #A0A0A0;\n        cursor: pointer;\n        transition: color 0.2s;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    .action-icon:hover {\n        color: var(--primary-blue);\n    }\n\n    \/* Pagination *\/\n    .pagination-container {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-top: 30px;\n        padding-bottom: 40px;\n        gap: 20px;\n        flex-wrap: wrap;\n    }\n\n    .pagination-controls {\n        display: flex;\n        align-items: center;\n        gap: 5px;\n        flex-wrap: nowrap;\n    }\n\n    .page-item {\n        width: 32px;\n        height: 32px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        border-radius: 50%;\n        font-size: 12px;\n        color: var(--text-muted);\n        transition: background 0.2s;\n    }\n\n    .page-item.active {\n        background-color: var(--primary-blue);\n        color: white;\n    }\n\n    .nav-link {\n        cursor: pointer;\n        color: var(--text-dark);\n        font-size: 12px;\n        padding: 5px 8px;\n        user-select: none;\n    }\n    .nav-link.disabled { color: #ccc; pointer-events: none; }\n\n    \/* Search form responsive *\/\n    #search_form .row {\n        flex-wrap: wrap;\n    }\n\n    @media (max-width: 768px) {\n        body { padding: 12px; }\n        .header-container {\n            flex-direction: column;\n            align-items: stretch;\n        }\n\n        #search_form .row {\n            flex-direction: column;\n            gap: 10px !important;\n        }\n\n        #dateRangePicker {\n            width: 100% !important;\n        }\n\n        .pagination-container { justify-content: center; flex-direction: column; text-align: center; }\n        .btn { font-size: 11px; }\n    }\n\n    @media (max-width: 480px) {\n        .btn { width: 100%; text-align: center; }\n        .pagination-controls {\n            flex-direction: column;\n            gap: 10px;\n            width: 100%;\n        }\n        .nav-link {\n            width: 100%;\n            text-align: center;\n            border: 1px solid var(--border-color);\n            border-radius: 4px;\n            padding: 8px;\n            box-sizing: border-box;\n        }\n        #pageNumbers {\n            justify-content: center;\n            width: 100%;\n        }\n    }\n\n    \/* Custom Date Picker *\/\n    .date-wrapper {\n        position: relative;\n        width: 260px;\n    }\n\n    .date-wrapper input[type=\"text\"] {\n        width: 100%;\n        padding: 10px 36px 10px 14px;\n        border: 1px solid #E0E0E0;\n        border-radius: 6px;\n        font-family: 'Sora', sans-serif;\n        font-size: 12px;\n        color: var(--text-dark);\n        outline: none;\n        cursor: pointer;\n        background: #fff;\n        transition: border-color 0.2s;\n        user-select: none;\n        height: 38px;\n        box-sizing: border-box;\n    }\n\n    .date-wrapper input[type=\"text\"]:focus {\n        border-color: var(--primary-blue);\n    }\n\n    .date-wrapper input[type=\"text\"]::placeholder {\n        color: #aaa;\n    }\n\n    .date-wrapper .cal-icon {\n        position: absolute;\n        right: 12px;\n        top: 50%;\n        transform: translateY(-50%);\n        pointer-events: none;\n        color: #8D8C9C;\n    }\n\n    .dp-dropdown {\n        display: none;\n        position: absolute;\n        top: calc(100% + 6px);\n        left: 0;\n        transform: none;\n        z-index: 2000;\n        background: #fff;\n        border: 1px solid #E0E0E0;\n        border-radius: 10px;\n        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.13);\n        flex-direction: row;\n        width: 680px;\n        max-width: calc(100vw - 24px);\n        overflow: hidden;\n    }\n\n    .dp-dropdown.open {\n        display: flex;\n    }\n\n    .dp-dropdown.align-left {\n        left: 0;\n        right: auto;\n    }\n\n    .dp-backdrop {\n        display: none;\n        position: fixed;\n        inset: 0;\n        z-index: 1999;\n    }\n\n    .dp-backdrop.show {\n        display: block;\n    }\n\n    .dp-presets {\n        width: 140px;\n        border-right: 1px solid #EFEFEF;\n        display: flex;\n        flex-direction: column;\n        background: #fff;\n        padding: 8px 0;\n    }\n\n    .dp-preset-item {\n        padding: 10px 16px;\n        font-size: 13px;\n        font-family: 'Sora', sans-serif;\n        color: #3c4043;\n        cursor: pointer;\n        transition: all 0.2s;\n        white-space: nowrap;\n    }\n\n    .dp-preset-item:hover {\n        background: #F1F3F4;\n    }\n\n    .dp-preset-item.active {\n        background: var(--primary-blue);\n        color: #fff;\n        font-weight: 500;\n    }\n\n    .dp-calendars-wrap {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        padding: 8px 10px 8px;\n        min-width: 0;\n    }\n\n    .dp-months-row {\n        display: flex;\n        gap: 0;\n        flex: 1;\n    }\n\n    .dp-calendar {\n        flex: 1;\n        padding: 0 6px;\n        min-width: 0;\n    }\n\n    .dp-calendar + .dp-calendar {\n        border-left: 1px solid #EFEFEF;\n    }\n\n    .dp-cal-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 6px;\n    }\n\n    .dp-cal-title {\n        font-size: 14px;\n        font-weight: 600;\n        color: #3c4043;\n        margin: 0;\n        text-align: center;\n        flex: 1;\n        font-family: 'Sora', sans-serif;\n    }\n\n    .dp-nav-btn {\n        background: none;\n        border: none;\n        cursor: pointer;\n        padding: 6px;\n        color: #5f6368;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border-radius: 50%;\n        transition: background 0.2s;\n    }\n\n    .dp-nav-btn:hover {\n        background: #F1F3F4;\n    }\n\n    .dp-nav-btn.dp-nav-hidden {\n        visibility: hidden;\n        pointer-events: none;\n    }\n\n    .dp-weekdays {\n        display: grid;\n        grid-template-columns: repeat(7, 1fr);\n        margin-bottom: 2px;\n    }\n\n    .dp-weekday {\n        text-align: center;\n        font-size: 11px;\n        font-weight: 600;\n        color: #333;\n        padding: 4px 0;\n        font-family: 'Sora', sans-serif;\n    }\n\n    .dp-days {\n        display: grid;\n        grid-template-columns: repeat(7, 1fr);\n        gap: 1px;\n    }\n\n    .dp-day {\n        text-align: center;\n        padding: 2px 0;\n        font-size: 11px;\n        border-radius: 50%;\n        cursor: pointer;\n        color: var(--text-dark);\n        transition: background 0.15s, color 0.15s;\n        aspect-ratio: 1;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-family: 'Sora', sans-serif;\n    }\n\n    .dp-day:hover {\n        background: #e8f1ff;\n        color: var(--primary-blue);\n    }\n\n    .dp-day.today {\n        background: #F1F3F4;\n        border-radius: 50% !important;\n        font-weight: 600;\n    }\n\n    .dp-day.selected {\n        background: var(--primary-blue) !important;\n        color: #fff !important;\n        font-weight: 600;\n        border-radius: 4px !important;\n        z-index: 2;\n    }\n\n    .dp-day.in-range,\n    .dp-day.hover-range {\n        background: #E8F0FE !important;\n        color: #3c4043;\n        border-radius: 0;\n    }\n\n    .dp-day.selected-start,\n    .dp-day.row-start,\n    .dp-day.hover-start {\n        border-top-left-radius: 4px !important;\n        border-bottom-left-radius: 4px !important;\n    }\n\n    .dp-day.selected-end,\n    .dp-day.row-end,\n    .dp-day.hover-end {\n        border-top-right-radius: 4px !important;\n        border-bottom-right-radius: 4px !important;\n    }\n\n    .dp-day.selected-start.selected-end {\n        border-radius: 4px !important;\n    }\n\n    .dp-day.other-month {\n        color: #ccc;\n    }\n\n    .dp-day.other-month:hover {\n        background: #f5f5f5;\n        color: #aaa;\n    }\n\n    .dp-footer {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        gap: 12px;\n        margin-top: 10px;\n        padding: 12px 16px;\n        border-top: 1px solid #EFEFEF;\n    }\n\n    .dp-range-display {\n        font-size: 12px;\n        color: #333;\n        font-weight: 500;\n        font-family: 'Sora', sans-serif;\n    }\n\n    .dp-footer-btns {\n        display: flex;\n        gap: 8px;\n    }\n\n    .dp-btn-clear {\n        padding: 8px 16px;\n        border-radius: 8px;\n        font-size: 12px;\n        font-family: 'Sora', sans-serif;\n        background: #F1F3F4;\n        color: #3c4043;\n        border: none;\n        cursor: pointer;\n        font-weight: 500;\n        transition: background 0.2s;\n    }\n\n    .dp-btn-clear:hover {\n        background: #E8EAED;\n    }\n\n    .dp-btn-apply {\n        padding: 8px 24px;\n        border-radius: 8px;\n        font-size: 12px;\n        font-family: 'Sora', sans-serif;\n        background: var(--primary-blue);\n        color: #fff;\n        border: none;\n        cursor: pointer;\n        font-weight: 500;\n        transition: background 0.2s;\n    }\n\n    .dp-btn-apply:hover {\n        background: var(--hover-blue);\n    }\n\n    @media (max-width: 750px) {\n        .dp-dropdown {\n            flex-direction: column;\n            min-width: 0;\n            width: calc(100vw - 32px);\n            max-height: 85vh;\n            overflow-y: auto;\n        }\n\n        .dp-presets {\n            width: 100%;\n            border-right: none;\n            border-bottom: 1px solid #EFEFEF;\n            padding: 4px 0;\n            display: flex;\n            flex-wrap: wrap;\n        }\n\n        .dp-preset-item {\n            padding: 6px 10px;\n            font-size: 11px;\n            flex: 1 1 auto;\n            text-align: center;\n            min-width: 80px;\n        }\n\n        .dp-months-row {\n            flex-direction: column;\n            gap: 10px;\n        }\n\n        .dp-calendar + .dp-calendar {\n            border-left: none;\n            border-top: 1px solid #EFEFEF;\n            padding-top: 8px;\n        }\n\n        .dp-calendars-wrap {\n            padding: 6px 8px 8px;\n        }\n\n        .dp-day {\n            padding: 5px 0;\n            font-size: 11px;\n        }\n\n        .dp-footer {\n            margin-top: 8px;\n            padding-top: 8px;\n        }\n    }\n\n    @media (max-width: 480px) {\n        .dp-dropdown {\n            position: fixed;\n            top: 50%;\n            left: 50% !important;\n            transform: translate(-50%, -50%) !important;\n            width: calc(100vw - 24px);\n            max-width: 400px;\n            max-height: 92vh;\n            overflow-y: auto;\n            z-index: 3000;\n        }\n\n        .date-wrapper {\n            width: 100%;\n        }\n\n        .dp-calendars-wrap {\n            padding: 6px;\n        }\n\n        .dp-day {\n            font-size: 11px;\n            padding: 4px 0;\n        }\n\n        .dp-cal-title {\n            font-size: 12px;\n        }\n\n        .dp-footer {\n            margin-top: 6px;\n            padding-top: 6px;\n        }\n\n        .dp-btn-clear,\n        .dp-btn-apply {\n            padding: 5px 10px;\n            font-size: 11px;\n        }\n    }\n<\/style>\n\n<div class=\"header-container\">\n    <h2>TOTAL HOURS ASSIGNED ASSIGNMENT<\/h2>\n    <form method=\"get\" class=\"col\" action=\"\" id=\"search_form\" name=\"search_form\" style=\"margin: 0;\">\n        <div class=\"row\" style=\"display: flex; gap: 10px; align-items: center;\">\n            <div class=\"col-md-9 search-wrap\">\n                <div class=\"date-wrapper\" id=\"dpWrapperDateRange\">\n                    <input type=\"text\" name=\"dates\" autocomplete=\"off\" class=\"form-control search-input\" placeholder=\"Select Date range\" value=\"\" id=\"dateRangePicker\" readonly onclick=\"toggleDatePicker(event,'dateRange')\">\n                    <svg class=\"cal-icon\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n                        <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"><\/rect>\n                        <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"><\/line>\n                        <line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"><\/line>\n                        <line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"><\/line>\n                    <\/svg>\n                    <div class=\"dp-backdrop\" id=\"dpBackdropDateRange\" onclick=\"closeDatePicker('dateRange')\"><\/div>\n                    <div class=\"dp-dropdown\" id=\"dpDropdownDateRange\">\n                        <div class=\"dp-presets\">\n                            <div class=\"dp-preset-item active\" data-preset=\"today\" onclick=\"selectPreset(event,'today','dateRange')\">Today<\/div>\n                            <div class=\"dp-preset-item\" data-preset=\"yesterday\" onclick=\"selectPreset(event,'yesterday','dateRange')\">Yesterday<\/div>\n                            <div class=\"dp-preset-item\" data-preset=\"last7\" onclick=\"selectPreset(event,'last7','dateRange')\">Last 7 Days<\/div>\n                            <div class=\"dp-preset-item\" data-preset=\"last30\" onclick=\"selectPreset(event,'last30','dateRange')\">Last 30 Days<\/div>\n                            <div class=\"dp-preset-item\" data-preset=\"thisMonth\" onclick=\"selectPreset(event,'thisMonth','dateRange')\">This Month<\/div>\n                            <div class=\"dp-preset-item\" data-preset=\"lastMonth\" onclick=\"selectPreset(event,'lastMonth','dateRange')\">Last Month<\/div>\n                        <\/div>\n                        <div class=\"dp-calendars-wrap\">\n                            <div class=\"dp-months-row\">\n                                <div class=\"dp-calendar\">\n                                    <div class=\"dp-cal-header\">\n                                        <button type=\"button\" class=\"dp-nav-btn\" onclick=\"dpChangeMonth(event,-1,'dateRange')\">\u2039<\/button>\n                                        <span class=\"dp-cal-title\" id=\"dpCalTitleDateRange\"><\/span>\n                                        <button type=\"button\" class=\"dp-nav-btn dp-nav-hidden\">\u203a<\/button>\n                                    <\/div>\n                                    <div class=\"dp-weekdays\">\n                                        <div class=\"dp-weekday\">Su<\/div><div class=\"dp-weekday\">Mo<\/div>\n                                        <div class=\"dp-weekday\">Tu<\/div><div class=\"dp-weekday\">We<\/div>\n                                        <div class=\"dp-weekday\">Th<\/div><div class=\"dp-weekday\">Fr<\/div>\n                                        <div class=\"dp-weekday\">Sa<\/div>\n                                    <\/div>\n                                    <div class=\"dp-days\" id=\"dpDaysDateRange\"><\/div>\n                                <\/div>\n                                <div class=\"dp-calendar\">\n                                    <div class=\"dp-cal-header\">\n                                        <button type=\"button\" class=\"dp-nav-btn dp-nav-hidden\">\u2039<\/button>\n                                        <span class=\"dp-cal-title\" id=\"dpCalTitleDateRange2\"><\/span>\n                                        <button type=\"button\" class=\"dp-nav-btn\" onclick=\"dpChangeMonth(event,1,'dateRange')\">\u203a<\/button>\n                                    <\/div>\n                                    <div class=\"dp-weekdays\">\n                                        <div class=\"dp-weekday\">Su<\/div><div class=\"dp-weekday\">Mo<\/div>\n                                        <div class=\"dp-weekday\">Tu<\/div><div class=\"dp-weekday\">We<\/div>\n                                        <div class=\"dp-weekday\">Th<\/div><div class=\"dp-weekday\">Fr<\/div>\n                                        <div class=\"dp-weekday\">Sa<\/div>\n                                    <\/div>\n                                    <div class=\"dp-days\" id=\"dpDaysDateRange2\"><\/div>\n                                <\/div>\n                            <\/div>\n                            <div class=\"dp-footer\">\n                                <div class=\"dp-range-display\" id=\"dpRangeDisplayDateRange\">Select Date Range<\/div>\n                                <div class=\"dp-footer-btns\">\n                                    <button type=\"button\" class=\"dp-btn-clear\" onclick=\"dpClear(event,'dateRange')\">Cancel<\/button>\n                                    <button type=\"button\" class=\"dp-btn-apply\" onclick=\"dpApply(event,'dateRange')\">Apply<\/button>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"col text-right\">\n                <button class=\"btn btn-primary\" type=\"submit\">Search<\/button>\n            <\/div>\n        <\/div>\n    <\/form>\n<\/div>\n\n<div class=\"table-container\">\n    <table>\n        <thead>\n            <tr>\n                <th>ASSIGNED TO<\/th>\n                <th>Total Assigned Hrs<\/th>\n                <th>Total Submitted Hrs<\/th>\n                <th>Pending Hrs<\/th>\n                <th>ASSIGNED DATE<\/th>\n                <th style=\"text-align: center;\">Detail<\/th>\n            <\/tr>\n        <\/thead>\n        <tbody id=\"tableBody\">\n            <!-- Rows will be populated by JS -->\n        <\/tbody>\n    <\/table>\n<\/div>\n\n<div class=\"pagination-container\">\n    <div class=\"pagination-controls\">\n        <span class=\"nav-link disabled\" id=\"prevBtn\">\u00ab Previous<\/span>\n        <div id=\"pageNumbers\" style=\"display:flex; gap: 4px;\"><\/div>\n        <span class=\"nav-link disabled\" id=\"nextBtn\">Next \u00bb<\/span>\n    <\/div>\n    <div id=\"entryInfo\" style=\"font-size: 12px; color: var(--text-muted);\">\n        Showing 0 to 0 of 0 entries\n    <\/div>\n<\/div>\n\n<script>\n    \/\/ \u2500\u2500\u2500 ENDPOINTS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    const BASE_URL = 'https:\/\/api-ph-portal.zyneventures.com\/api\/v1';\n    const ENDPOINTS = {\n        TOTAL_HOURS_QC: `${BASE_URL}\/reports\/total-hours-qc`,\n        USER_ASSIGNED_QC_DETAIL: `${BASE_URL}\/reports\/user-assigned-hours-qc-detail`\n    };\n    \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n    const tbody = document.getElementById('tableBody');\n\n    let currentPage = 1;\n    let currentDates = '';\n    let totalPages = 1;\n\n    function getHeaders() {\n        let headers = { 'Content-Type': 'application\/json' };\n        if (window.phPortal) {\n            if (typeof window.phPortal.authHeaders === 'function') {\n                headers = window.phPortal.authHeaders();\n            }\n        } else {\n            const token = localStorage.getItem('TOKEN');\n            if (token) headers['Authorization'] = `Bearer ${token}`;\n        }\n        return headers;\n    }\n\n    async function triggerFetch() {\n        fetchTotalHours(currentDates, currentPage);\n    }\n\n    async function fetchTotalHours(datesVal = '', page = 1) {\n        if (!datesVal) {\n            tbody.innerHTML = '<tr><td colspan=\"6\" style=\"text-align: center; padding: 30px; color: #666;\">Please select a date range and click Search to view data.<\/td><\/tr>';\n            resetPagination();\n            return;\n        }\n\n        currentDates = datesVal;\n        currentPage = page;\n\n        tbody.innerHTML = '<tr><td colspan=\"6\" style=\"text-align: center; padding: 40px;\"> <div class=\"spinner-border text-primary\" role=\"status\"><span class=\"visually-hidden\">Loading...<\/span><\/div><br>Loading Report Data...<\/td><\/tr>';\n\n        try {\n            const params = new URLSearchParams({\n                dates: datesVal,\n                page: page,\n                perPage: 25\n            });\n\n            const url = `${ENDPOINTS.TOTAL_HOURS_QC}?${params.toString()}`;\n            const response = await fetch(url, { headers: getHeaders() });\n            const result = await response.json();\n\n            if (result.status === 'success') {\n                if (!result.data) {\n                    tbody.innerHTML = `<tr><td colspan=\"6\" style=\"text-align: center; padding: 30px; color: #ff4d4d;\">Failed to fetch data.<\/td><\/tr>`;\n                    resetPagination();\n                    return;\n                }\n                const items = result.data.data || result.data;\n                if (Array.isArray(items)) {\n                    if (items.length === 0) {\n                        tbody.innerHTML = '<tr><td colspan=\"6\" style=\"text-align: center; padding: 30px;\">No records found for the selected range.<\/td><\/tr>';\n                        resetPagination();\n                        return;\n                    }\n                    \n                    const perPageLimit = 25;\n                    let displayItems = items;\n                    let totalItems = result?.total || result?.data?.total || result?.data?.pagination?.total || items.length;\n                    \n                    if (items.length > perPageLimit) {\n                        \/\/ Client-side pagination if server returns all data\n                        const startIndex = (page - 1) * perPageLimit;\n                        const endIndex = startIndex + perPageLimit;\n                        displayItems = items.slice(startIndex, endIndex);\n                        totalItems = items.length;\n                    } else {\n                        \/\/ Server paginated, slice just to strictly enforce 25 rows\n                        displayItems = items.slice(0, perPageLimit);\n                    }\n\n                    renderTable(displayItems);\n                    \n                    const meta = {\n                        total: totalItems,\n                        pages: Math.ceil(totalItems \/ perPageLimit) || 1,\n                        perPage: perPageLimit\n                    };\n                    renderPagination(meta, page);\n                } else {\n                    tbody.innerHTML = '<tr><td colspan=\"6\" style=\"text-align: center; padding: 30px;\">No records found for the selected range.<\/td><\/tr>';\n                    resetPagination();\n                }\n            } else {\n                tbody.innerHTML = `<tr><td colspan=\"6\" style=\"text-align: center; padding: 30px; color: #ff4d4d;\">${result.errors || 'Failed to fetch data.'}<\/td><\/tr>`;\n                resetPagination();\n            }\n        } catch (error) {\n            console.error('Error fetching total hours:', error);\n            tbody.innerHTML = '<tr><td colspan=\"6\" style=\"text-align: center; padding: 30px; color: #ff4d4d;\">A server error occurred. Please try again later.<\/td><\/tr>';\n            resetPagination();\n        }\n    }\n\n    function renderTable(items) {\n        let rowsHTML = '';\n        items.forEach(item => {\n            const pending = Number(item.pending_hours || 0);\n            const qcUserId = item.qc_user_id || item.id || '';\n            rowsHTML += `\n                <tr>\n                    <td style=\"font-weight: 500; color: #333;\">${item.pesudo_name || 'N\/A'}<\/td>\n                    <td style=\"color: #0180FF; font-weight: 500;\">${item.total_assigned_hours ? Number(item.total_assigned_hours).toFixed(2) : '0.00'}<\/td>\n                    <td style=\"color: #1E8E3E;\">${item.total_submitted_hours ? Number(item.total_submitted_hours).toFixed(2) : '0.00'}<\/td>\n                    <td style=\"color: ${pending > 0 ? '#D93025' : '#8D8C9C'};\">${pending.toFixed(2)}<\/td>\n                    <td>${item.qc_assign_date || 'N\/A'}<\/td>\n                    <td style=\"text-align: center;\">\n                        <span class=\"action-icon\" onclick=\"handleDetailAction('${qcUserId}')\" title=\"View Detail\">\n                            <i class=\"bi bi-eye mx-1\"><\/i>\n                        <\/span>\n                    <\/td>\n                <\/tr>\n            `;\n        });\n        tbody.innerHTML = rowsHTML;\n    }\n\n    async function handleDetailAction(qcUserId) {\n        try {\n            const url = `${ENDPOINTS.USER_ASSIGNED_QC_DETAIL}?qc_user_id=${qcUserId}`;\n            await fetch(url, { headers: getHeaders() });\n        } catch (error) {\n            console.error('Detail API Error:', error);\n        }\n        \n        \/\/ Append currentDates to the redirect URL\n        let redirectUrl = `https:\/\/ph-portal-v2.zyneventures.com\/index.php\/qc-user-assign\/?qc_user_id=${qcUserId}`;\n        if (currentDates) {\n            redirectUrl += `&dates=${encodeURIComponent(currentDates)}`;\n        }\n        window.location.href = redirectUrl;\n    }\n\n    \/\/ \u2500\u2500\u2500 PAGINATION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    function renderPagination(meta, page) {\n        currentPage = page;\n        const container = document.getElementById('pageNumbers');\n        container.innerHTML = \"\";\n\n        const total = Number(meta.total) || 0;\n        const perPage = Number(meta.perPage || meta.limit || meta.per_page) || 25;\n        totalPages = Math.ceil(total \/ perPage) || 1;\n        const current = currentPage;\n\n        const startEntry = total === 0 ? 0 : ((current - 1) * perPage) + 1;\n        const endEntry = Math.min(current * perPage, total);\n        document.getElementById('entryInfo').textContent = `Showing ${startEntry} to ${endEntry} of ${total} entries`;\n\n        const maxVisible = 5;\n        let startPage = Math.max(1, current - Math.floor(maxVisible \/ 2));\n        let endPage = Math.min(totalPages, startPage + maxVisible - 1);\n\n        if (endPage - startPage + 1 < maxVisible) {\n            startPage = Math.max(1, endPage - maxVisible + 1);\n        }\n\n        if (startPage > 1) {\n            appendPageItem(container, 1, current);\n            if (startPage > 2) appendEllipsis(container);\n        }\n\n        for (let i = startPage; i <= endPage; i++) {\n            appendPageItem(container, i, current);\n        }\n\n        if (endPage < totalPages) {\n            if (endPage < totalPages - 1) appendEllipsis(container);\n            appendPageItem(container, totalPages, current);\n        }\n\n        const prevBtn = document.getElementById('prevBtn');\n        const nextBtn = document.getElementById('nextBtn');\n\n        prevBtn.className = `nav-link ${current === 1 ? 'disabled' : ''}`;\n        nextBtn.className = `nav-link ${current === totalPages || totalPages === 0 ? 'disabled' : ''}`;\n\n        prevBtn.onclick = () => { if (currentPage > 1) { currentPage--; triggerFetch(); } };\n        nextBtn.onclick = () => { if (currentPage < totalPages) { currentPage++; triggerFetch(); } };\n    }\n\n    function appendPageItem(container, pageNum, activePage) {\n        const p = document.createElement(\"div\");\n        p.className = `page-item ${pageNum === activePage ? 'active' : ''}`;\n        p.textContent = pageNum;\n        p.onclick = () => { currentPage = pageNum; triggerFetch(); };\n        container.appendChild(p);\n    }\n\n    function appendEllipsis(container) {\n        const el = document.createElement(\"div\");\n        el.className = 'page-item';\n        el.textContent = '...';\n        el.style.cursor = 'default';\n        container.appendChild(el);\n    }\n\n    function resetPagination() {\n        document.getElementById('entryInfo').textContent = 'Showing 0 to 0 of 0 entries';\n        document.getElementById('pageNumbers').innerHTML = '';\n        document.getElementById('prevBtn').className = 'nav-link disabled';\n        document.getElementById('nextBtn').className = 'nav-link disabled';\n    }\n    \/\/ \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n    \/\/ Search Form Handler\n    document.getElementById('search_form').addEventListener('submit', function (e) {\n        e.preventDefault();\n        const val = document.getElementById('dateRangePicker').value;\n        fetchTotalHours(val, 1);\n    });\n<\/script>\n\n<script>\n    const DP_MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];\n    const DP_IDS = {\n        dateRange: {\n            dropdown: 'dpDropdownDateRange',\n            backdrop: 'dpBackdropDateRange',\n            display: 'dateRangePicker',\n            title: 'dpCalTitleDateRange',\n            title2: 'dpCalTitleDateRange2',\n            days: 'dpDaysDateRange',\n            days2: 'dpDaysDateRange2',\n            rangeDisplay: 'dpRangeDisplayDateRange'\n        }\n    };\n\n    const dpState = {\n        dateRange: { viewYear: 0, viewMonth: 0, startDate: null, endDate: null, hoverDate: null, selectedDate: null, activePreset: null }\n    };\n\n    function dpToday() {\n        const t = new Date();\n        return new Date(t.getFullYear(), t.getMonth(), t.getDate());\n    }\n\n    function dpFmtISO(d) {\n        const mm = String(d.getMonth() + 1).padStart(2, '0');\n        const dd = String(d.getDate()).padStart(2, '0');\n        return `${d.getFullYear()}-${mm}-${dd}`;\n    }\n\n    function dpSameDay(a, b) {\n        if (!a || !b) return false;\n        if (a.getFullYear() !== b.getFullYear()) return false;\n        if (a.getMonth() !== b.getMonth()) return false;\n        return a.getDate() === b.getDate();\n    }\n\n    function dpRenderCalendar(inst) {\n        const s = dpState[inst];\n        const ids = DP_IDS[inst];\n        let y2 = s.viewYear, m2 = s.viewMonth + 1;\n        if (m2 > 11) { m2 = 0; y2++; }\n\n        document.getElementById(ids.title).textContent = `${DP_MONTHS[s.viewMonth]} ${s.viewYear}`;\n        document.getElementById(ids.title2).textContent = `${DP_MONTHS[m2]} ${y2}`;\n        document.getElementById(ids.days).innerHTML = dpBuildDays(s.viewYear, s.viewMonth, s, inst);\n        document.getElementById(ids.days2).innerHTML = dpBuildDays(y2, m2, s, inst);\n    }\n\n    function dpBuildDays(year, month, s, inst) {\n        const today = dpToday();\n        const startDay = new Date(year, month, 1).getDay();\n        const daysInMonth = new Date(year, month + 1, 0).getDate();\n        let html = '';\n        for (let i = 0; i < startDay; i++) html += '<div class=\"dp-day other-month\"><\/div>';\n        for (let d = 1; d <= daysInMonth; d++) {\n            const cur = new Date(year, month, d);\n            let cls = 'dp-day';\n            if (dpSameDay(cur, today)) cls += ' today';\n            const dayOfWeek = cur.getDay();\n            if (s.startDate) {\n                if (s.endDate) {\n                    if (dpSameDay(cur, s.startDate)) {\n                        cls += ' selected selected-start';\n                    } else if (dpSameDay(cur, s.endDate)) {\n                        cls += ' selected selected-end';\n                    } else if (cur > s.startDate) {\n                        if (cur < s.endDate) {\n                            cls += ' in-range';\n                            if (dayOfWeek === 0) cls += ' row-start';\n                            if (dayOfWeek === 6) cls += ' row-end';\n                        }\n                    }\n                } else if (dpSameDay(cur, s.startDate)) {\n                    cls += ' selected selected-start selected-end';\n                } else if (s.hoverDate) {\n                    let rS = s.startDate, rE = s.hoverDate;\n                    if (rE < rS) { const t = rS; rS = rE; rE = t; }\n                    if (dpSameDay(cur, s.hoverDate)) {\n                        cls += (s.hoverDate < s.startDate) ? ' hover-start hover-range' : ' hover-end hover-range';\n                    } else if (cur > rS) {\n                        if (cur < rE) {\n                            cls += ' hover-range';\n                            if (dayOfWeek === 0) cls += ' row-start';\n                            if (dayOfWeek === 6) cls += ' row-end';\n                        }\n                    }\n                }\n            }\n            html += `<div class=\"${cls}\" onclick=\"dpPickDay(event,${year},${month},${d},'${inst}')\" onmouseover=\"dpHoverDay('${inst}',${year},${month},${d})\">${d}<\/div>`;\n        }\n        return html;\n    }\n\n    function dpPickDay(e, y, m, d, inst) {\n        e.stopPropagation();\n        const s = dpState[inst];\n        const chosen = new Date(y, m, d);\n        if (!s.startDate) {\n            s.startDate = chosen;\n            s.endDate = null;\n        } else if (s.endDate) {\n            s.startDate = chosen;\n            s.endDate = null;\n        } else if (chosen < s.startDate) {\n            s.endDate = s.startDate;\n            s.startDate = chosen;\n        } else {\n            s.endDate = chosen;\n        }\n        s.hoverDate = null;\n        s.activePreset = null;\n        const dropId = DP_IDS[inst].dropdown;\n        document.querySelectorAll(`#${dropId} .dp-preset-item`).forEach(el => el.classList.remove('active'));\n        dpRenderCalendar(inst);\n        dpUpdateFooterRange(inst);\n    }\n\n    function dpHoverDay(inst, y, m, d) {\n        const s = dpState[inst];\n        if (s.startDate) {\n            if (!s.endDate) {\n                const h = new Date(y, m, d);\n                if (!dpSameDay(h, s.hoverDate)) {\n                    s.hoverDate = h;\n                    dpRenderCalendar(inst);\n                }\n            }\n        }\n    }\n\n    function dpUpdateFooterRange(inst) {\n        const s = dpState[inst];\n        const el = document.getElementById(DP_IDS[inst].rangeDisplay);\n        if (!el) return;\n        if (s.startDate) {\n            if (s.endDate) {\n                el.textContent = `${dpFmtISO(s.startDate)} - ${dpFmtISO(s.endDate)}`;\n            } else {\n                el.textContent = `${dpFmtISO(s.startDate)} - Select end date`;\n            }\n        } else {\n            el.textContent = 'Select Date Range';\n        }\n    }\n\n    function dpChangeMonth(e, dir, inst) {\n        e.stopPropagation();\n        const s = dpState[inst];\n        s.viewMonth += dir;\n        if (s.viewMonth > 11) { s.viewMonth = 0; s.viewYear++; }\n        if (s.viewMonth < 0) { s.viewMonth = 11; s.viewYear--; }\n        dpRenderCalendar(inst);\n    }\n\n    function selectPreset(e, preset, inst) {\n        e.stopPropagation();\n        const s = dpState[inst];\n        const today = dpToday();\n        s.activePreset = preset;\n        const dropId = DP_IDS[inst].dropdown;\n        document.querySelectorAll(`#${dropId} .dp-preset-item`).forEach(el =>\n            el.classList.toggle('active', el.dataset.preset === preset));\n\n        switch (preset) {\n            case 'today':\n                s.startDate = new Date(today);\n                s.endDate = new Date(today);\n                break;\n            case 'yesterday': {\n                const y = new Date(today);\n                y.setDate(y.getDate() - 1);\n                s.startDate = y;\n                s.endDate = new Date(y);\n                break;\n            }\n            case 'last7': {\n                const y = new Date(today);\n                y.setDate(y.getDate() - 6);\n                s.startDate = y;\n                s.endDate = new Date(today);\n                break;\n            }\n            case 'last30': {\n                const y = new Date(today);\n                y.setDate(y.getDate() - 29);\n                s.startDate = y;\n                s.endDate = new Date(today);\n                break;\n            }\n            case 'thisMonth':\n                s.startDate = new Date(today.getFullYear(), today.getMonth(), 1);\n                s.endDate = new Date(today);\n                break;\n            case 'lastMonth':\n                s.startDate = new Date(today.getFullYear(), today.getMonth() - 1, 1);\n                s.endDate = new Date(today.getFullYear(), today.getMonth(), 0);\n                break;\n            default:\n                break;\n        }\n        s.selectedDate = s.startDate;\n        s.viewYear = s.startDate.getFullYear();\n        s.viewMonth = s.startDate.getMonth();\n        dpRenderCalendar(inst);\n        dpUpdateFooterRange(inst);\n        dpApply(e, inst);\n    }\n\n    function dpApply(e, inst) {\n        if (e) e.stopPropagation();\n        const s = dpState[inst];\n        const display = document.getElementById(DP_IDS[inst].display);\n        if (s.startDate) {\n            if (s.endDate) {\n                if (dpSameDay(s.startDate, s.endDate)) {\n                    display.value = dpFmtISO(s.startDate);\n                } else {\n                    display.value = `${dpFmtISO(s.startDate)} to ${dpFmtISO(s.endDate)}`;\n                }\n            } else {\n                display.value = dpFmtISO(s.startDate);\n            }\n        } else {\n            display.value = '';\n        }\n        s.selectedDate = s.startDate;\n        closeDatePicker(inst);\n    }\n\n    function dpClear(e, inst) {\n        e.stopPropagation();\n        const s = dpState[inst];\n        s.startDate = null;\n        s.endDate = null;\n        s.hoverDate = null;\n        s.selectedDate = null;\n        s.activePreset = null;\n        document.getElementById(DP_IDS[inst].display).value = '';\n        const dropId = DP_IDS[inst].dropdown;\n        document.querySelectorAll(`#${dropId} .dp-preset-item`).forEach(el => el.classList.remove('active'));\n        dpRenderCalendar(inst);\n        dpUpdateFooterRange(inst);\n        closeDatePicker(inst);\n    }\n\n    function toggleDatePicker(e, inst) {\n        e.stopPropagation();\n        const ids = DP_IDS[inst];\n        const dd = document.getElementById(ids.dropdown);\n        if (dd.classList.contains('open')) {\n            closeDatePicker(inst);\n        } else {\n            const s = dpState[inst];\n            const ref = s.selectedDate || dpToday();\n            s.viewYear = ref.getFullYear();\n            s.viewMonth = ref.getMonth();\n            if (!s.selectedDate) {\n                s.activePreset = 'today';\n                document.querySelectorAll(`#${ids.dropdown} .dp-preset-item`).forEach(el =>\n                    el.classList.toggle('active', el.dataset.preset === 'today'));\n            }\n            dpRenderCalendar(inst);\n            dpUpdateFooterRange(inst);\n            dd.classList.add('open');\n            dpPositionDropdown(inst);\n            document.getElementById(ids.backdrop).classList.add('show');\n        }\n    }\n\n    function dpPositionDropdown(inst) {\n        const ids = DP_IDS[inst];\n        const wrapper = document.getElementById('dpWrapperDateRange');\n        const dd = document.getElementById(ids.dropdown);\n        if (!wrapper || !dd) return;\n\n        \/\/ Let mobile fixed-center style handle very small screens.\n        if (window.innerWidth <= 480) {\n            dd.style.left = '';\n            dd.style.transform = '';\n            return;\n        }\n\n        const edgeGap = 12;\n        const wrapperRect = wrapper.getBoundingClientRect();\n        const dropRect = dd.getBoundingClientRect();\n        \/\/ Keep dropdown centered in viewport (WordPress layouts can shift containers).\n        const desiredLeft = (window.innerWidth \/ 2) - wrapperRect.left - (dropRect.width \/ 2);\n\n        const minLeft = edgeGap - wrapperRect.left;\n        const maxLeft = (window.innerWidth - edgeGap - dropRect.width) - wrapperRect.left;\n        const clampedLeft = Math.max(minLeft, Math.min(desiredLeft, maxLeft));\n\n        dd.style.left = `${Math.round(clampedLeft)}px`;\n        dd.style.transform = 'none';\n    }\n\n    function closeDatePicker(inst) {\n        const ids = DP_IDS[inst];\n        document.getElementById(ids.dropdown).classList.remove('open');\n        document.getElementById(ids.backdrop).classList.remove('show');\n    }\n\n    document.addEventListener('click', function (e) {\n        const wrapEl = document.getElementById('dpWrapperDateRange');\n        if (wrapEl) {\n            if (!wrapEl.contains(e.target)) {\n                closeDatePicker('dateRange');\n            }\n        }\n    });\n\n    window.addEventListener('resize', function () {\n        const dd = document.getElementById(DP_IDS.dateRange.dropdown);\n        if (dd) {\n            if (dd.classList.contains('open')) {\n                dpPositionDropdown('dateRange');\n            }\n        }\n    });\n\n    document.getElementById('dateRangePicker').value = '';\n    fetchTotalHours('', 1);\n<\/script>\n<\/div><\/div>\n\n<\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>TOTAL HOURS ASSIGNED ASSIGNMENT Today Yesterday Last 7 Days Last 30 Days This Month Last Month \u2039 \u203a Su Mo Tu We Th Fr Sa \u2039 \u203a Su Mo Tu We Th Fr Sa Select Date Range Cancel Apply Search ASSIGNED TO Total Assigned Hrs Total Submitted Hrs Pending Hrs ASSIGNED DATE Detail \u00ab Previous&#8230;<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"default","_kad_post_title":"default","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-404","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ph-portal-v2.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/404","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ph-portal-v2.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ph-portal-v2.zyneventures.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ph-portal-v2.zyneventures.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ph-portal-v2.zyneventures.com\/index.php\/wp-json\/wp\/v2\/comments?post=404"}],"version-history":[{"count":43,"href":"https:\/\/ph-portal-v2.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/404\/revisions"}],"predecessor-version":[{"id":1149,"href":"https:\/\/ph-portal-v2.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/404\/revisions\/1149"}],"wp:attachment":[{"href":"https:\/\/ph-portal-v2.zyneventures.com\/index.php\/wp-json\/wp\/v2\/media?parent=404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}