{"id":418,"date":"2026-04-27T07:24:39","date_gmt":"2026-04-27T07:24:39","guid":{"rendered":"https:\/\/ph-taskportal.zyneventures.com\/?page_id=418"},"modified":"2026-06-26T20:20:43","modified_gmt":"2026-06-26T20:20:43","slug":"work-assignment-qc","status":"publish","type":"page","link":"https:\/\/ph-portal-v2.zyneventures.com\/index.php\/work-assignment-qc\/","title":{"rendered":"work assignment QC"},"content":{"rendered":"<style>.kadence-column418_5df63e-4f > .kt-inside-inner-col,.kadence-column418_5df63e-4f > .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-column418_5df63e-4f > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column418_5df63e-4f > .kt-inside-inner-col{flex-direction:column;}.kadence-column418_5df63e-4f > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column418_5df63e-4f > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column418_5df63e-4f{position:relative;}@media all and (max-width: 1024px){.kadence-column418_5df63e-4f > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column418_5df63e-4f > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column418_5df63e-4f\"><div class=\"kt-inside-inner-col\"><style>.kb-row-layout-id418_74a787-51 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id418_74a787-51 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id418_74a787-51 > .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-id418_74a787-51 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id418_74a787-51 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id418_74a787-51 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id418_74a787-51 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-column418_09ef9b-fa > .kt-inside-inner-col,.kadence-column418_09ef9b-fa > .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-column418_09ef9b-fa > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column418_09ef9b-fa > .kt-inside-inner-col{flex-direction:column;}.kadence-column418_09ef9b-fa > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column418_09ef9b-fa > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column418_09ef9b-fa{position:relative;}@media all and (max-width: 1024px){.kadence-column418_09ef9b-fa > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column418_09ef9b-fa > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column418_09ef9b-fa\"><div class=\"kt-inside-inner-col\">\n<style>\n    :root {\n        --primary-blue: #0180FF;\n        --hover-blue: #3499FF;\n        --text-dark: #212529;\n        --text-muted: #8D8C9C;\n        --border-color: #EFEFEF;\n        --input-border: #E0E0E0;\n        --bg-form: #FFFFFF;\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        margin-bottom: 25px;\n    }\n\n    .header-container h2 {\n        margin: 0;\n        font-size: 18px;\n        font-weight: 600;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n        color: #333;\n        font-family: 'Sora', sans-serif;\n    }\n\n    .header-container h2 span {\n        color: var(--text-muted);\n        font-weight: 400;\n    }\n\n    \/* Form Filters Grid *\/\n    .filters-container {\n        margin-bottom: 30px;\n    }\n\n    .grid-container {\n        display: grid;\n        grid-template-columns: repeat(4, minmax(0, 1fr));\n        gap: 15px 25px;\n    }\n\n    .form-group {\n        display: flex;\n        flex-direction: column;\n        gap: 6px;\n    }\n\n    .form-group label {\n        font-size: 12px;\n        font-weight: 400;\n        color: var(--text-dark);\n        font-family: 'Sora', sans-serif;\n    }\n\n    .form-control {\n        width: 100%;\n        padding: 0 12px;\n        border: 1px solid var(--input-border);\n        border-radius: 6px;\n        background: #fff;\n        font-family: 'Sora', sans-serif;\n        font-size: 12px;\n        color: var(--text-dark);\n        box-sizing: border-box;\n        outline: none;\n        height: 38px;\n    }\n\n    .form-control::placeholder {\n        color: #A0A0A0;\n    }\n\n    \/* Custom Select *\/\n    .custom-select-wrapper {\n        position: relative;\n        width: 100%;\n    }\n\n    .custom-select-trigger {\n        height: 38px;\n        padding: 0 36px 0 12px;\n        border: 1px solid #ced4da;\n        background-color: #fff;\n        border-radius: 6px;\n        font-family: 'Sora', sans-serif;\n        font-size: 12px;\n        color: var(--text-dark);\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        box-sizing: border-box;\n        width: 100%;\n        user-select: none;\n        position: relative;\n        transition: all 0.2s;\n        overflow: hidden;\n        white-space: nowrap;\n    }\n\n    .custom-select-trigger:hover {\n        border-color: var(--primary-blue);\n    }\n\n    .custom-select-wrapper.open .custom-select-trigger {\n        border-color: var(--primary-blue);\n        border-radius: 6px 6px 0 0;\n        box-shadow: 0 0 0 3px rgba(1, 128, 255, 0.1);\n    }\n\n    .custom-select-trigger.placeholder-shown {\n        color: #70757a;\n    }\n\n    .custom-select-trigger .cs-arrow {\n        position: absolute;\n        right: 10px;\n        top: 50%;\n        transform: translateY(-50%);\n        pointer-events: none;\n        color: #8D8C9C;\n        transition: transform 0.2s;\n        flex-shrink: 0;\n    }\n\n    .custom-select-wrapper.open .custom-select-trigger .cs-arrow {\n        transform: translateY(-50%) rotate(180deg);\n    }\n\n    .custom-select-dropdown {\n        display: none;\n        position: absolute;\n        top: 100%;\n        left: 0;\n        right: 0;\n        background: #fff;\n        border: 1px solid var(--primary-blue);\n        border-top: none;\n        border-radius: 0 0 6px 6px;\n        z-index: 9999;\n        overflow-y: auto;\n        max-height: 250px;\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.10);\n    }\n\n    .cs-label {\n        display: flex;\n        flex-wrap: nowrap;\n        align-items: center;\n        gap: 6px;\n        overflow-x: auto;\n        overflow-y: hidden;\n        white-space: nowrap;\n        width: 100%;\n        min-width: 0;\n        scrollbar-width: thin;\n        -ms-overflow-style: auto;\n    }\n\n    .cs-label::-webkit-scrollbar {\n        display: block;\n        height: 4px;\n    }\n\n    .cs-label::-webkit-scrollbar-thumb {\n        background: #ccc;\n        border-radius: 4px;\n    }\n\n    .custom-select-wrapper.open .custom-select-dropdown {\n        display: block;\n    }\n\n    \/* Chips\/Badges styling *\/\n    .cs-chips {\n        display: flex;\n        align-items: center;\n        gap: 4px;\n    }\n\n    .cs-chip {\n        display: inline-flex;\n        align-items: center;\n        background-color: #e8f0fe;\n        border: 1px solid #d2e3fc;\n        border-radius: 4px;\n        padding: 0 8px;\n        font-size: 12px;\n        color: #1967d2;\n        gap: 4px;\n        white-space: nowrap;\n        flex-shrink: 0;\n        height: 26px;\n        margin: 0;\n    }\n\n    .cs-chip-remove {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 14px;\n        height: 14px;\n        border-radius: 50%;\n        color: #5f6368;\n        font-weight: bold;\n        transition: background 0.2s;\n    }\n\n    .cs-chip-remove:hover {\n        background: #dadce0;\n        color: #202124;\n    }\n\n    .custom-select-option {\n        padding: 8px 12px;\n        font-size: 12px;\n        font-family: 'Sora', sans-serif;\n        color: var(--text-dark);\n        cursor: pointer;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        line-height: 1.4;\n        display: flex;\n        align-items: center;\n        gap: 10px;\n    }\n\n    .custom-select-option:hover {\n        background: #f0f6ff;\n        color: var(--primary-blue);\n    }\n\n    .custom-select-option.selected {\n        background: #e8f1ff;\n        color: var(--primary-blue);\n        font-weight: 500;\n    }\n\n    .custom-select-option.highlighted {\n        background: #f0f6ff;\n        color: var(--primary-blue);\n    }\n\n    \/* Integrated search input inside the trigger *\/\n    .cs-search-input {\n        flex: 1;\n        min-width: 60px;\n        border: 0 !important;\n        outline: 0 !important;\n        box-shadow: none !important;\n        background: transparent !important;\n        font-family: 'Sora', sans-serif;\n        font-size: 12px;\n        color: var(--text-dark);\n        padding: 0;\n        height: 26px;\n        -webkit-appearance: none;\n        -moz-appearance: none;\n        appearance: none;\n    }\n\n    .cs-search-input:focus,\n    .cs-search-input:active,\n    .cs-search-input:hover,\n    .cs-search-input:focus-visible {\n        border: 0 !important;\n        outline: 0 !important;\n        box-shadow: none !important;\n        background: transparent !important;\n    }\n\n    .cs-search-input::placeholder {\n        color: #70757a;\n    }\n\n    .custom-select-trigger:has(.cs-search-input) {\n        cursor: text;\n    }\n\n    .custom-select-option .cs-checkbox {\n        width: 16px;\n        height: 16px;\n        border: 1px solid #ced4da;\n        border-radius: 3px;\n        background: #fff;\n        position: relative;\n        flex-shrink: 0;\n        display: none;\n    }\n\n    .custom-select-wrapper.multi .custom-select-option .cs-checkbox {\n        display: block;\n    }\n\n    .custom-select-option.selected .cs-checkbox {\n        background: var(--primary-blue);\n        border-color: var(--primary-blue);\n    }\n\n    .custom-select-option.selected .cs-checkbox::after {\n        content: '';\n        position: absolute;\n        left: 5px;\n        top: 2px;\n        width: 4px;\n        height: 8px;\n        border: solid white;\n        border-width: 0 2px 2px 0;\n        transform: rotate(45deg);\n    }\n\n    .custom-select-option.placeholder-option {\n        color: #999;\n    }\n\n    .custom-select-search {\n        padding: 8px;\n        border-bottom: 1px solid #EFEFEF;\n        position: sticky;\n        top: 0;\n        background: #fff;\n        z-index: 10;\n    }\n\n    .custom-select-search input {\n        width: 100%;\n        height: 30px;\n        padding: 0 10px;\n        border: 1px solid #ced4da;\n        border-radius: 4px;\n        font-family: 'Sora', sans-serif;\n        font-size: 11px;\n        outline: none;\n        box-sizing: border-box;\n    }\n\n    .custom-select-search input:focus {\n        border-color: var(--primary-blue);\n    }\n\n    \/* Action Buttons *\/\n    .action-buttons {\n        display: flex;\n        flex-wrap: wrap;\n        gap: 10px;\n        margin-top: 20px;\n        justify-content: flex-start;\n    }\n\n    .action-buttons .btn {\n        flex: 0 0 auto;\n        min-width: 120px;\n    }\n\n    .btn {\n        height: 38px;\n        padding: 0 12px;\n        border-radius: 6px;\n        font-size: 12px;\n        font-weight: 500;\n        cursor: pointer;\n        border: none;\n        transition: 0.2s;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        white-space: nowrap;\n        box-sizing: border-box;\n        font-family: 'Sora', sans-serif;\n    }\n\n    .btn-clear {\n        background: #D0D7F3;\n        color: #555;\n    }\n\n    .btn-primary {\n        background: var(--primary-blue);\n        color: white;\n    }\n\n    .btn:hover {\n        opacity: 0.88;\n    }\n\n    \/* Table Design *\/\n    .table-container {\n        width: 100%;\n        overflow-x: auto;\n        margin-top: 10px;\n        border: 1px solid var(--border-color);\n        border-radius: 6px;\n    }\n\n    table {\n        width: 100%;\n        border-collapse: collapse;\n        font-size: 12px;\n        white-space: nowrap;\n        min-width: 900px;\n    }\n\n    th {\n        text-align: left;\n        padding: 12px 15px;\n        font-size: 12px;\n        font-weight: 500;\n        color: var(--text-dark);\n        background: var(--bg-light);\n        letter-spacing: 0;\n        white-space: nowrap;\n        vertical-align: middle;\n        border-bottom: 1px solid var(--border-color);\n        font-family: 'Sora', sans-serif;\n    }\n\n    td {\n        padding: 12px 15px;\n        font-size: 12px;\n        font-weight: 400;\n        border-bottom: 1px solid #f2f2f2;\n        color: #8D8C9C;\n        vertical-align: middle;\n        font-family: 'Sora', sans-serif;\n    }\n\n    .pill {\n        background-color: #D3EFE8;\n        color: #268A76;\n        font-weight: 500;\n        padding: 4px 12px;\n        border-radius: 10px;\n        font-size: 12px;\n        text-align: center;\n        display: inline-block;\n        white-space: normal;\n        line-height: 1.2;\n    }\n\n    .pill-gray {\n        background-color: #F5F5F5;\n        color: #666;\n        font-weight: 500;\n        padding: 4px 12px;\n        border-radius: 10px;\n        font-size: 12px;\n        text-align: center;\n        display: inline-block;\n        white-space: normal;\n        line-height: 1.2;\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        font-family: 'Sora', sans-serif;\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        font-family: 'Sora', sans-serif;\n    }\n\n    .nav-link.disabled {\n        color: #ccc;\n        pointer-events: none;\n    }\n\n    \/* Custom Date Picker *\/\n    .date-wrapper {\n        position: relative;\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    \/* Custom Date Picker Dropdown *\/\n    .dp-dropdown {\n        display: none;\n        position: absolute;\n        top: calc(100% + 6px);\n        left: 0;\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            left: 0 !important;\n            right: auto !important;\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-cal-header {\n            margin-bottom: 6px;\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        .dp-calendars-wrap {\n            padding: 6px 6px 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\n    \/* Responsive *\/\n    @media (max-width: 768px) {\n        .grid-container {\n            grid-template-columns: repeat(2, 1fr);\n        }\n\n        .pagination-container {\n            justify-content: center;\n        }\n\n        .action-buttons {\n            gap: 8px;\n        }\n\n        .btn {\n            font-size: 11px;\n        }\n    }\n\n    @media (max-width: 480px) {\n        .grid-container {\n            grid-template-columns: 1fr;\n        }\n\n        .action-buttons .btn {\n            flex: 1 1 calc(50% - 5px);\n        }\n\n        \/* Pagination Optimization for Mobile *\/\n        .pagination-controls {\n            flex-direction: column;\n            gap: 12px;\n            width: 100%;\n        }\n\n        #prevBtn {\n            order: 1;\n            width: 100%;\n            text-align: center;\n            border: 1px solid var(--border-color);\n            border-radius: 6px;\n        }\n\n        #pageNumbers {\n            order: 2;\n            justify-content: center;\n        }\n\n        #nextBtn {\n            order: 3;\n            width: 100%;\n            text-align: center;\n            border: 1px solid var(--border-color);\n            border-radius: 6px;\n        }\n    }\n<\/style>\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@300;400;500;600;700&amp;display=swap\" rel=\"stylesheet\">\n\n<div class=\"header-container\">\n    <h2>WORK ASSIGNMENTS QC <span id=\"headerCount\">(0)<\/span><\/h2>\n<\/div>\n\n<div class=\"filters-container\">\n    <div class=\"grid-container\" id=\"filterGrid\">\n        <!-- Assigned To -->\n        <div class=\"form-group\">\n            <label>Assigned to<\/label>\n            <div class=\"custom-select-wrapper multi\" id=\"csWrapper_assignedToFilter\">\n                <input type=\"hidden\" id=\"assignedToFilter\" value=\"\">\n                <div class=\"custom-select-trigger placeholder-shown\" onclick=\"csTriggerClick('assignedToFilter', event)\">\n                    <div class=\"cs-label\">\n                        <input type=\"text\" class=\"cs-search-input\" id=\"csInput_assignedToFilter\" autocomplete=\"off\" oninput=\"csIntegratedFilter('assignedToFilter', this.value)\" onkeydown=\"csKeyDown(event, 'assignedToFilter')\" onclick=\"csOpenDropdown('assignedToFilter'); event.stopPropagation();\" onfocus=\"csOpenDropdown('assignedToFilter')\">\n                    <\/div>\n                    <svg class=\"cs-arrow\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>\n                <\/div>\n                <div class=\"custom-select-dropdown\" id=\"csDrop_assignedToFilter\">\n                    <div class=\"custom-select-options\">\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        <!-- File Name -->\n        <div class=\"form-group\">\n            <label>File Name<\/label>\n            <div class=\"custom-select-wrapper multi\" id=\"csWrapper_fileFilter\">\n                <input type=\"hidden\" id=\"fileFilter\" value=\"\">\n                <div class=\"custom-select-trigger placeholder-shown\" onclick=\"csTriggerClick('fileFilter', event)\">\n                    <div class=\"cs-label\">\n                        <input type=\"text\" class=\"cs-search-input\" id=\"csInput_fileFilter\" autocomplete=\"off\" oninput=\"csIntegratedFilter('fileFilter', this.value)\" onkeydown=\"csKeyDown(event, 'fileFilter')\" onclick=\"csOpenDropdown('fileFilter'); event.stopPropagation();\" onfocus=\"csOpenDropdown('fileFilter')\">\n                    <\/div>\n                    <svg class=\"cs-arrow\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>\n                <\/div>\n                <div class=\"custom-select-dropdown\" id=\"csDrop_fileFilter\">\n                    <div class=\"custom-select-options\">\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        <!-- Assigned DOS -->\n        <div class=\"form-group\">\n            <label>Assigned DOS<\/label>\n            <input type=\"number\" class=\"form-control\" id=\"assignedDosFilter\" min=\"0\">\n        <\/div>\n        <!-- Received On -->\n        <div class=\"form-group\">\n            <label>Received On<\/label>\n            <input type=\"date\" class=\"form-control\" id=\"receivedOnFilter\">\n        <\/div>\n        <!-- Insurance -->\n        <div class=\"form-group\">\n            <label>Insurance<\/label>\n            <div class=\"custom-select-wrapper multi\" id=\"csWrapper_insuranceFilter\">\n                <input type=\"hidden\" id=\"insuranceFilter\" value=\"\">\n                <div class=\"custom-select-trigger placeholder-shown\" onclick=\"csTriggerClick('insuranceFilter', event)\">\n                    <div class=\"cs-label\">\n                        <input type=\"text\" class=\"cs-search-input\" id=\"csInput_insuranceFilter\" autocomplete=\"off\" oninput=\"csIntegratedFilter('insuranceFilter', this.value)\" onkeydown=\"csKeyDown(event, 'insuranceFilter')\" onclick=\"csOpenDropdown('insuranceFilter'); event.stopPropagation();\" onfocus=\"csOpenDropdown('insuranceFilter')\">\n                    <\/div>\n                    <svg class=\"cs-arrow\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>\n                <\/div>\n                <div class=\"custom-select-dropdown\" id=\"csDrop_insuranceFilter\">\n                    <div class=\"custom-select-options\">\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        <!-- Account -->\n        <div class=\"form-group\">\n            <label>Account<\/label>\n            <div class=\"custom-select-wrapper multi\" id=\"csWrapper_accountFilter\">\n                <input type=\"hidden\" id=\"accountFilter\" value=\"\">\n                <div class=\"custom-select-trigger placeholder-shown\" onclick=\"csTriggerClick('accountFilter', event)\">\n                    <div class=\"cs-label\">\n                        <input type=\"text\" class=\"cs-search-input\" id=\"csInput_accountFilter\" autocomplete=\"off\" oninput=\"csIntegratedFilter('accountFilter', this.value)\" onkeydown=\"csKeyDown(event, 'accountFilter')\" onclick=\"csOpenDropdown('accountFilter'); event.stopPropagation();\" onfocus=\"csOpenDropdown('accountFilter')\">\n                    <\/div>\n                    <svg class=\"cs-arrow\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>\n                <\/div>\n                <div class=\"custom-select-dropdown\" id=\"csDrop_accountFilter\">\n                    <div class=\"custom-select-options\">\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        <!-- Entity -->\n        <div class=\"form-group\">\n            <label>Entity<\/label>\n            <div class=\"custom-select-wrapper multi\" id=\"csWrapper_entityFilter\">\n                <input type=\"hidden\" id=\"entityFilter\" value=\"\">\n                <div class=\"custom-select-trigger placeholder-shown\" onclick=\"csTriggerClick('entityFilter', event)\">\n                    <div class=\"cs-label\">\n                        <input type=\"text\" class=\"cs-search-input\" id=\"csInput_entityFilter\" autocomplete=\"off\" oninput=\"csIntegratedFilter('entityFilter', this.value)\" onkeydown=\"csKeyDown(event, 'entityFilter')\" onclick=\"csOpenDropdown('entityFilter'); event.stopPropagation();\" onfocus=\"csOpenDropdown('entityFilter')\">\n                    <\/div>\n                    <svg class=\"cs-arrow\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>\n                <\/div>\n                <div class=\"custom-select-dropdown\" id=\"csDrop_entityFilter\">\n                    <div class=\"custom-select-options\">\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        <!-- Client -->\n        <div class=\"form-group\">\n            <label>Client<\/label>\n            <div class=\"custom-select-wrapper multi\" id=\"csWrapper_clientFilter\">\n                <input type=\"hidden\" id=\"clientFilter\" value=\"\">\n                <div class=\"custom-select-trigger placeholder-shown\" onclick=\"csTriggerClick('clientFilter', event)\">\n                    <div class=\"cs-label\">\n                        <input type=\"text\" class=\"cs-search-input\" id=\"csInput_clientFilter\" autocomplete=\"off\" oninput=\"csIntegratedFilter('clientFilter', this.value)\" onkeydown=\"csKeyDown(event, 'clientFilter')\" onclick=\"csOpenDropdown('clientFilter'); event.stopPropagation();\" onfocus=\"csOpenDropdown('clientFilter')\">\n                    <\/div>\n                    <svg class=\"cs-arrow\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>\n                <\/div>\n                <div class=\"custom-select-dropdown\" id=\"csDrop_clientFilter\">\n                    <div class=\"custom-select-options\">\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        <!-- Category -->\n        <div class=\"form-group\">\n            <label>Category<\/label>\n            <div class=\"custom-select-wrapper multi\" id=\"csWrapper_categoryFilter\">\n                <input type=\"hidden\" id=\"categoryFilter\" value=\"\">\n                <div class=\"custom-select-trigger placeholder-shown\" onclick=\"csTriggerClick('categoryFilter', event)\">\n                    <div class=\"cs-label\">\n                        <input type=\"text\" class=\"cs-search-input\" id=\"csInput_categoryFilter\" autocomplete=\"off\" oninput=\"csIntegratedFilter('categoryFilter', this.value)\" onkeydown=\"csKeyDown(event, 'categoryFilter')\" onclick=\"csOpenDropdown('categoryFilter'); event.stopPropagation();\" onfocus=\"csOpenDropdown('categoryFilter')\">\n                    <\/div>\n                    <svg class=\"cs-arrow\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><polyline points=\"6 9 12 15 18 9\"><\/polyline><\/svg>\n                <\/div>\n                <div class=\"custom-select-dropdown\" id=\"csDrop_categoryFilter\">\n                    <div class=\"custom-select-options\">\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        <!-- Select Date -->\n        <div class=\"form-group\">\n            <label>Select Date<\/label>\n            <div class=\"date-wrapper\" id=\"dpWrapperDateRange\">\n                <input type=\"text\" id=\"dateRangeFilter\" placeholder=\"Select Date range\" 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 class=\"dp-nav-btn\" onclick=\"dpChangeMonth(event,-1,'dateRange')\">\u2039<\/button>\n                                    <span class=\"dp-cal-title\" id=\"dpCalTitleDateRange\"><\/span>\n                                    <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 class=\"dp-nav-btn dp-nav-hidden\">\u2039<\/button>\n                                    <span class=\"dp-cal-title\" id=\"dpCalTitleDateRange2\"><\/span>\n                                    <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 class=\"dp-btn-clear\" onclick=\"dpClear(event,'dateRange')\">Cancel<\/button>\n                                <button class=\"dp-btn-apply\" onclick=\"dpApply(event,'dateRange')\">Apply<\/button>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        <!-- Per Page -->\n        <div class=\"form-group\">\n            <label>Per Page<\/label>\n            <select class=\"form-control\" id=\"perPageFilter\" onchange=\"fetchWorkAssignments()\">\n                <option value=\"\" selected=\"\">Per Page<\/option>\n                <option value=\"10\">10<\/option>\n                <option value=\"15\">15<\/option>\n                <option value=\"25\">25<\/option>\n                <option value=\"50\">50<\/option>\n                <option value=\"100\">100<\/option>\n            <\/select>\n        <\/div>\n    <\/div>\n\n    <div class=\"action-buttons\">\n        <button class=\"btn btn-clear\" id=\"clearBtn\" onclick=\"clearFilters()\">Clear<\/button>\n        <button class=\"btn btn-primary\" onclick=\"downloadCSV()\">+ Download CSV<\/button>\n        <button class=\"btn btn-primary\" id=\"filterBtn\" onclick=\"fetchWorkAssignments()\">Filter<\/button>\n    <\/div>\n<\/div>\n\n<div class=\"table-container\">\n    <table>\n        <thead>\n            <tr>\n                <th>Assigned Date<\/th>\n                <th>Assigned To<\/th>\n                <th>File Name<\/th>\n                <th>Assigned DOS<\/th>\n                <th>Completed DOS<\/th>\n                <th>(QC) Assigned DOS<\/th>\n                <th>Received On<\/th>\n                <th>Insurance<\/th>\n                <th>Account<\/th>\n                <th>Entity<\/th>\n                <th>Client<\/th>\n                <th>Category<\/th>\n                <th>Action<\/th>\n            <\/tr>\n        <\/thead>\n        <tbody id=\"tableBody\">\n            <!-- Rows -->\n        <\/tbody>\n    <\/table>\n<\/div>\n\n<!-- Pagination Footer -->\n<div class=\"pagination-container\">\n    <div class=\"pagination-controls\">\n        <span class=\"nav-link\" id=\"prevBtn\">\u00ab Previous<\/span>\n        <div id=\"pageNumbers\" style=\"display:flex; gap: 4px;\"><\/div>\n        <span class=\"nav-link\" id=\"nextBtn\">Next \u00bb<\/span>\n    <\/div>\n    <div id=\"entryInfo\" style=\"font-size: 12px; color: var(--text-muted); font-family: 'Sora', sans-serif;\">\n        Showing 0 to 0 of 0 entries\n    <\/div>\n<\/div>\n\n<script>\n    \/\/ \u2500\u2500 DATE PICKER ENGINE \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 DP_MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];\n\n    const DP_IDS = {\n        dateRange: {\n            dropdown: 'dpDropdownDateRange',\n            backdrop: 'dpBackdropDateRange',\n            display: 'dateRangeFilter',\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\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\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 && cur < s.endDate) {\n                        cls += ' in-range';\n                        if (dayOfWeek === 0) cls += ' row-start';\n                        if (dayOfWeek === 6) cls += ' row-end';\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 && cur < rE) {\n                        cls += ' hover-range';\n                        if (dayOfWeek === 0) cls += ' row-start';\n                        if (dayOfWeek === 6) cls += ' row-end';\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 {\n            if (chosen < s.startDate) {\n                s.endDate = s.startDate;\n                s.startDate = chosen;\n            } else {\n                s.endDate = chosen;\n            }\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 && !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    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); y.setDate(y.getDate() - 1);\n                s.startDate = y; s.endDate = new Date(y);\n                break;\n            }\n            case 'last7': {\n                const y = new Date(today); y.setDate(y.getDate() - 6);\n                s.startDate = y; s.endDate = new Date(today);\n                break;\n            }\n            case 'last30': {\n                const y = new Date(today); y.setDate(y.getDate() - 29);\n                s.startDate = y; 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        }\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)} - ${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            \/\/ Always open on the left side\n            dd.classList.add('align-left');\n            document.getElementById(ids.backdrop).classList.add('show');\n        }\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    \/\/ Close date pickers when clicking outside\n    document.addEventListener('click', function(e) {\n        ['dateRange'].forEach(inst => {\n            const wrapId = 'dpWrapperDateRange';\n            const wrapEl = document.getElementById(wrapId);\n            if (wrapEl && !wrapEl.contains(e.target)) {\n                closeDatePicker(inst);\n            }\n        });\n    });\n\n    \/\/ \u2500\u2500 CUSTOM SELECT ENGINE \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 csToggle(selectId, e) {\n        if (e) e.stopPropagation();\n        const wrapper = document.getElementById('csWrapper_' + selectId);\n        const isOpen = wrapper.classList.contains('open');\n        document.querySelectorAll('.custom-select-wrapper.open').forEach(w => {\n            if (w !== wrapper) w.classList.remove('open');\n        });\n        if (isOpen) {\n            wrapper.classList.remove('open');\n        } else {\n            wrapper.classList.add('open');\n            \/\/ Reset filter state and focus the integrated search input if present\n            const searchInput = document.getElementById('csInput_' + selectId);\n            if (searchInput) {\n                searchInput.value = '';\n                csIntegratedFilter(selectId, '');\n                setTimeout(() => searchInput.focus(), 50);\n            } else {\n                csIntegratedFilter(selectId, '');\n            }\n            csHighlightFirst(selectId);\n        }\n    }\n\n    function csTriggerClick(selectId, e) {\n        e.stopPropagation();\n        csToggle(selectId, e);\n    }\n\n    function csOpenDropdown(selectId) {\n        const wrapper = document.getElementById('csWrapper_' + selectId);\n        if (!wrapper || wrapper.classList.contains('open')) return;\n        document.querySelectorAll('.custom-select-wrapper.open').forEach(w => {\n            if (w !== wrapper) w.classList.remove('open');\n        });\n        wrapper.classList.add('open');\n        csHighlightFirst(selectId);\n    }\n\n    function csFilter(selectId, query) {\n        csIntegratedFilter(selectId, query);\n    }\n\n    function csIntegratedFilter(selectId, query) {\n        const drop = document.getElementById('csDrop_' + selectId);\n        if (!drop) return;\n        const options = drop.querySelectorAll('.custom-select-option');\n        const q = (query || '').toLowerCase();\n        options.forEach(opt => {\n            const text = opt.textContent.toLowerCase();\n            if (text.includes(q) || opt.classList.contains('placeholder-option')) {\n                opt.style.display = '';\n            } else {\n                opt.style.display = 'none';\n            }\n        });\n        \/\/ Open dropdown automatically whenever the user types in the field\n        const wrapper = document.getElementById('csWrapper_' + selectId);\n        if (wrapper && !wrapper.classList.contains('open')) {\n            wrapper.classList.add('open');\n        }\n        csHighlightFirst(selectId);\n    }\n\n    function csHighlightFirst(selectId) {\n        const drop = document.getElementById('csDrop_' + selectId);\n        if (!drop) return;\n        drop.querySelectorAll('.custom-select-option').forEach(o => o.classList.remove('highlighted'));\n        const visible = Array.from(drop.querySelectorAll('.custom-select-option'))\n            .filter(o => o.style.display !== 'none' && !o.classList.contains('placeholder-option'));\n        if (visible.length > 0) {\n            visible[0].classList.add('highlighted');\n        }\n    }\n\n    function csKeyDown(e, selectId) {\n        const wrapper = document.getElementById('csWrapper_' + selectId);\n        const drop = document.getElementById('csDrop_' + selectId);\n        if (!wrapper || !drop) return;\n        const isOpen = wrapper.classList.contains('open');\n\n        if (e.key === 'Enter') {\n            e.preventDefault();\n            if (!isOpen) {\n                csToggle(selectId, e);\n            } else {\n                const highlighted = drop.querySelector('.custom-select-option.highlighted');\n                if (highlighted) {\n                    const multi = wrapper.classList.contains('multi');\n                    const value = highlighted.dataset.value;\n                    csSelect(selectId, value, highlighted, multi);\n                } else {\n                    csToggle(selectId, e);\n                }\n            }\n            return;\n        }\n\n        if (e.key === 'ArrowDown') {\n            e.preventDefault();\n            if (!isOpen) {\n                csToggle(selectId, e);\n                return;\n            }\n            const visibleOptions = Array.from(drop.querySelectorAll('.custom-select-option'))\n                .filter(o => o.style.display !== 'none' && !o.classList.contains('placeholder-option'));\n            if (visibleOptions.length === 0) return;\n            let currentIdx = visibleOptions.findIndex(o => o.classList.contains('highlighted'));\n            visibleOptions.forEach(o => o.classList.remove('highlighted'));\n            currentIdx = (currentIdx + 1) % visibleOptions.length;\n            visibleOptions[currentIdx].classList.add('highlighted');\n            visibleOptions[currentIdx].scrollIntoView({ block: 'nearest' });\n            return;\n        }\n\n        if (e.key === 'ArrowUp') {\n            e.preventDefault();\n            if (!isOpen) {\n                csToggle(selectId, e);\n                return;\n            }\n            const visibleOptions = Array.from(drop.querySelectorAll('.custom-select-option'))\n                .filter(o => o.style.display !== 'none' && !o.classList.contains('placeholder-option'));\n            if (visibleOptions.length === 0) return;\n            let currentIdx = visibleOptions.findIndex(o => o.classList.contains('highlighted'));\n            visibleOptions.forEach(o => o.classList.remove('highlighted'));\n            if (currentIdx <= 0) currentIdx = visibleOptions.length - 1;\n            else currentIdx -= 1;\n            visibleOptions[currentIdx].classList.add('highlighted');\n            visibleOptions[currentIdx].scrollIntoView({ block: 'nearest' });\n            return;\n        }\n\n        if (e.key === 'Escape') {\n            wrapper.classList.remove('open');\n            return;\n        }\n    }\n\n    function csSelect(selectId, value, optionEl, multi = false) {\n        const wrapper = document.getElementById('csWrapper_' + selectId);\n        const input = document.getElementById(selectId);\n        const trigger = wrapper.querySelector('.custom-select-trigger');\n        const labelEl = trigger.querySelector('.cs-label');\n\n        if (value === '') {\n            input.value = '';\n            const hadIntegratedInput = !!document.getElementById('csInput_' + selectId);\n            if (hadIntegratedInput) {\n                labelEl.innerHTML = `<input type=\"text\" class=\"cs-search-input\" id=\"csInput_${selectId}\" placeholder=\"\" autocomplete=\"off\" oninput=\"csIntegratedFilter('${selectId}', this.value)\" onkeydown=\"csKeyDown(event, '${selectId}')\" onclick=\"csOpenDropdown('${selectId}'); event.stopPropagation();\" onfocus=\"csOpenDropdown('${selectId}')\">`;\n            } else {\n                labelEl.innerHTML = optionEl.querySelector('.opt-label').textContent.trim();\n            }\n            trigger.classList.add('placeholder-shown');\n            wrapper.querySelectorAll('.custom-select-option').forEach(o => o.classList.remove('selected'));\n            optionEl.classList.add('selected');\n            if (!multi) wrapper.classList.remove('open');\n            return;\n        }\n\n        if (!multi) {\n            input.value = value;\n            const selectedText = optionEl.querySelector('.opt-label').textContent.trim();\n            const hadIntegratedInput = !!document.getElementById('csInput_' + selectId);\n            if (hadIntegratedInput) {\n                labelEl.innerHTML = `<input type=\"text\" class=\"cs-search-input\" id=\"csInput_${selectId}\" placeholder=\"${selectedText}\" autocomplete=\"off\" oninput=\"csIntegratedFilter('${selectId}', this.value)\" onkeydown=\"csKeyDown(event, '${selectId}')\" onclick=\"csOpenDropdown('${selectId}'); event.stopPropagation();\" onfocus=\"csOpenDropdown('${selectId}')\">`;\n            } else {\n                labelEl.textContent = selectedText;\n            }\n            trigger.classList.remove('placeholder-shown');\n            wrapper.querySelectorAll('.custom-select-option').forEach(o => o.classList.remove('selected'));\n            optionEl.classList.add('selected');\n            wrapper.classList.remove('open');\n        } else {\n            const val = String(value);\n            let values = input.value\n                ? input.value.split(',').map(s => s.trim()).filter(Boolean)\n                : [];\n            const idx = values.indexOf(val);\n            if (idx > -1) {\n                values.splice(idx, 1);\n                optionEl.classList.remove('selected');\n            } else {\n                values.push(val);\n                optionEl.classList.add('selected');\n            }\n            input.value = values.join(',');\n\n            if (values.length === 0) {\n                labelEl.innerHTML = `<input type=\"text\" class=\"cs-search-input\" id=\"csInput_${selectId}\" placeholder=\"\" autocomplete=\"off\" oninput=\"csIntegratedFilter('${selectId}', this.value)\" onkeydown=\"csKeyDown(event, '${selectId}')\" onclick=\"csOpenDropdown('${selectId}'); event.stopPropagation();\" onfocus=\"csOpenDropdown('${selectId}')\">`;\n                trigger.classList.add('placeholder-shown');\n            } else {\n                trigger.classList.remove('placeholder-shown');\n                const selectedLabels = Array.from(wrapper.querySelectorAll('.custom-select-option.selected'))\n                    .map(opt => ({\n                        val: opt.dataset.value,\n                        label: opt.querySelector('.opt-label').textContent.trim()\n                    }));\n\n                const chipsHtml = selectedLabels.map(item => `\n                    <div class=\"cs-chip\">\n                        <span>${item.label}<\/span>\n                        <span class=\"cs-chip-remove\" onclick=\"csRemoveChip(event, '${selectId}', '${item.val}')\">&times;<\/span>\n                    <\/div>\n                `).join('');\n\n                labelEl.innerHTML = chipsHtml + `<input type=\"text\" class=\"cs-search-input\" id=\"csInput_${selectId}\" placeholder=\"\" autocomplete=\"off\" oninput=\"csIntegratedFilter('${selectId}', this.value)\" onkeydown=\"csKeyDown(event, '${selectId}')\" onclick=\"csOpenDropdown('${selectId}'); event.stopPropagation();\" onfocus=\"csOpenDropdown('${selectId}')\">`;\n            }\n\n            \/\/ Keep dropdown open and refocus the integrated input so user can continue searching\n            if (wrapper.classList.contains('open')) {\n                const newInput = document.getElementById('csInput_' + selectId);\n                if (newInput) setTimeout(() => newInput.focus(), 0);\n            }\n        }\n    }\n\n    function csRemoveChip(e, selectId, value) {\n        e.stopPropagation();\n        const wrapper = document.getElementById('csWrapper_' + selectId);\n        const optionEl = wrapper.querySelector(`.custom-select-option[data-value=\"${value}\"]`);\n        if (optionEl) {\n            csSelect(selectId, value, optionEl, true);\n        }\n    }\n\n    document.addEventListener('click', function(e) {\n        if (!e.target.closest('.custom-select-wrapper')) {\n            document.querySelectorAll('.custom-select-wrapper.open').forEach(w => w.classList.remove('open'));\n        }\n    });\n\n    \/\/ \u2500\u2500 POPULATE CUSTOM SELECT OPTIONS \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 populateCustomSelect(selectId, items, labelKey, valueKey) {\n        const drop = document.getElementById('csDrop_' + selectId);\n        const optionsContainer = drop.querySelector('.custom-select-options');\n        items.forEach(item => {\n            const label = item[labelKey] || '';\n            const value = item[valueKey] || '';\n            const div = document.createElement('div');\n            div.className = 'custom-select-option';\n            div.dataset.value = value;\n            div.setAttribute('onclick', `csSelect('${selectId}', '${String(value).replace(\/'\/g,\"\\\\'\")}', this, true)`);\n            div.innerHTML = `<div class=\"cs-checkbox\"><\/div><span class=\"opt-label\">${label}<\/span>`;\n            optionsContainer.appendChild(div);\n        });\n    }\n\n    \/\/ \u2500\u2500 CLEAR ALL FILTERS \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 clearFilters() {\n        \/\/ Reset all custom selects\n        const multiSelectIds = ['assignedToFilter', 'fileFilter', 'insuranceFilter', 'accountFilter', 'entityFilter', 'clientFilter', 'categoryFilter'];\n        multiSelectIds.forEach(id => {\n            const input = document.getElementById(id);\n            if (input) input.value = '';\n            const wrapper = document.getElementById('csWrapper_' + id);\n            if (wrapper) {\n                const trigger = wrapper.querySelector('.custom-select-trigger');\n                const labelEl = trigger.querySelector('.cs-label');\n                \/\/ Rebuild integrated search input so the field stays searchable after reset\n                labelEl.innerHTML = `<input type=\"text\" class=\"cs-search-input\" id=\"csInput_${id}\" placeholder=\"\" autocomplete=\"off\" oninput=\"csIntegratedFilter('${id}', this.value)\" onkeydown=\"csKeyDown(event, '${id}')\" onclick=\"csOpenDropdown('${id}'); event.stopPropagation();\" onfocus=\"csOpenDropdown('${id}')\">`;\n                trigger.classList.add('placeholder-shown');\n                wrapper.querySelectorAll('.custom-select-option').forEach(o => o.classList.remove('selected'));\n                \/\/ Make sure all options are visible again after a reset\n                wrapper.querySelectorAll('.custom-select-option').forEach(o => { o.style.display = ''; });\n            }\n        });\n\n        \/\/ Reset number input\n        const assignedDosEl = document.getElementById('assignedDosFilter');\n        if (assignedDosEl) assignedDosEl.value = '';\n\n        \/\/ Reset date pickers\n        ['dateRange'].forEach(inst => {\n            if (dpState && dpState[inst]) {\n                dpState[inst].startDate = null;\n                dpState[inst].endDate = null;\n                dpState[inst].hoverDate = null;\n                dpState[inst].activePreset = null;\n                dpState[inst].selectedDate = null;\n                dpUpdateFooterRange(inst);\n                const displayEl = document.getElementById(DP_IDS[inst].display);\n                if (displayEl) displayEl.value = '';\n                const dropEl = document.getElementById(DP_IDS[inst].dropdown);\n                if (dropEl) {\n                    document.querySelectorAll(`#${DP_IDS[inst].dropdown} .dp-preset-item`).forEach(el => el.classList.remove('active'));\n                }\n            }\n        });\n\n        const receivedOnEl = document.getElementById('receivedOnFilter');\n        if (receivedOnEl) receivedOnEl.value = '';\n\n        \/\/ Reset per page\n        const perPageEl = document.getElementById('perPageFilter');\n        if (perPageEl) { perPageEl.value = '25'; }\n\n        currentPage = 1;\n        fetchWorkAssignments(1);\n    }\n\n    \/\/ \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\n    let currentPage = 1;\n    let lastFetchedRows = [];\n    let totalPages = 1;\n\n    function updatePagination(meta) {\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        document.getElementById('headerCount').textContent = `(${total})`;\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        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--; fetchWorkAssignments(currentPage); } };\n        nextBtn.onclick = () => { if (currentPage < totalPages) { currentPage++; fetchWorkAssignments(currentPage); } };\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; fetchWorkAssignments(currentPage); };\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    const QC_API_BASE = 'https:\/\/api-ph-portal.zyneventures.com\/api\/v1';\n\n    \/\/ \u2500\u2500 API 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\n    const API_QC_LIST         = `${QC_API_BASE}\/user\/qc-dept-list`;\n    const API_ALL_SUBMITTED   = `${QC_API_BASE}\/work_assignment\/all-submitted`;\n    const API_WORK_DETAIL     = `${QC_API_BASE}\/work_assignment\/detail`;\n    const API_QC_ASSIGN_ADD   = `${QC_API_BASE}\/work_assignment_assigned_qc\/add`;\n    \/\/ PHP route('qc-export') \u2192 api\/v1\/work_assignment\/qc-export (Work Assignments QC list)\n    const API_QC_EXPORT       = `${QC_API_BASE}\/work_assignment\/qc-export`;\n\n    \/\/ \u2500\u2500 DEPARTMENT + ASSIGN PERMISSION (PHP workassignmentqc\/list.blade.php parity) \u2500\u2500\n    let isQCDepartment = false;\n\n    \/\/ PHP $work_assignments_qc_users + rahat@precisionhub.com on Assign button\n    const WORK_ASSIGNMENTS_QC_USERS = [\n        'Arif-QC@precisionhub.com',\n        'asma-QC@precisionhub.com',\n        'barry-qc@precisionhub.com',\n        'brent-qc@precisionhub.com',\n        'david2-qc@precisionhub.com',\n        'hina-qc@precisionhub.com',\n        'kane-qc@precisionhub.com',\n        'nimra2-qc@precisionhub.com',\n        'raquel-qc@precisionhub.com',\n        'riz-qc@precisionhub.com',\n        'robin-qc@precisionhub.com',\n        'rozina-qc@precisionhub.com',\n        'sammy-qc@precisionhub.com',\n        'Barry@precisionhub.com',\n        'stella-qc@precisionhub.com',\n        'rahat@precisionhub.com'\n    ].map(e => e.toLowerCase());\n\n    function getCurrentUserEmail() {\n        try {\n            const raw = localStorage.getItem('USER_DATA') || localStorage.getItem('user_data') || localStorage.getItem('userData');\n            if (!raw) return '';\n            const parsed = JSON.parse(raw);\n            return String(parsed.email || (parsed.data && parsed.data.email) || '').trim().toLowerCase();\n        } catch (e) {\n            return '';\n        }\n    }\n\n    \/** Only Support (QC) managers may assign new QC work \u2014 not QC executives. *\/\n    function canAssignQCWork() {\n        const email = getCurrentUserEmail();\n        return email && WORK_ASSIGNMENTS_QC_USERS.includes(email);\n    }\n\n    (function detectDepartmentFromStorage() {\n        try {\n            const raw = localStorage.getItem('USER_DATA') || localStorage.getItem('user_data') || localStorage.getItem('userData');\n            if (raw) {\n                const parsed = JSON.parse(raw);\n                const dept = parsed.department_name || (parsed.data && parsed.data.department_name) || '';\n                if (dept === 'QC') isQCDepartment = true;\n            }\n        } catch(e) {}\n    })();\n\n    \/** Multi-select values are comma-separated \u2014 URLSearchParams encodes commas correctly. *\/\n    function appendWorkAssignmentQcFilters(params) {\n        const assignedTo = document.getElementById('assignedToFilter')?.value;\n        if (assignedTo) params.set('user_id', assignedTo);\n\n        const file = document.getElementById('fileFilter')?.value;\n        if (file) params.set('file_name', file);\n\n        const assignedDos = document.getElementById('assignedDosFilter')?.value;\n        if (assignedDos) params.set('assigned_dos', assignedDos);\n\n        const receivedOn = document.getElementById('receivedOnFilter')?.value;\n        if (receivedOn) params.set('received_on', receivedOn);\n\n        const insurance = document.getElementById('insuranceFilter')?.value;\n        if (insurance) params.set('insurance_id', insurance);\n\n        const account = document.getElementById('accountFilter')?.value;\n        if (account) params.set('account_id', account);\n\n        const entity = document.getElementById('entityFilter')?.value;\n        if (entity) params.set('entity_id', entity);\n\n        const client = document.getElementById('clientFilter')?.value;\n        if (client) params.set('client_id', client);\n\n        const category = document.getElementById('categoryFilter')?.value;\n        if (category) params.set('category_id', category);\n\n        const dateRange = document.getElementById('dateRangeFilter')?.value;\n        if (dateRange) params.set('dates', dateRange);\n    }\n\n    \/\/ \u2500\u2500 FETCH DATA \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 tbody = document.getElementById('tableBody');\n\n    async function fetchWorkAssignments(page = 1) {\n        currentPage = page;\n        tbody.innerHTML = '<tr><td colspan=\"13\" style=\"text-align: center; padding: 40px; font-family: Sora, sans-serif;\">Loading Assignments...<\/td><\/tr>';\n\n        try {\n            const limit = document.getElementById('perPageFilter')?.value || 25;\n            const params = new URLSearchParams();\n            params.set('page', String(page));\n            params.set('limit', String(limit));\n            appendWorkAssignmentQcFilters(params);\n            const url = `${API_ALL_SUBMITTED}?${params.toString()}`;\n\n            let headers = { 'Content-Type': 'application\/json' };\n            if (window.phPortal && typeof window.phPortal.authHeaders === 'function') {\n                headers = window.phPortal.authHeaders();\n            } else {\n                const token = localStorage.getItem('TOKEN') || (document.cookie.match(\/(?:^|;\\s*)TOKEN=([^;]+)\/) || [])[1];\n                if (token) headers['Authorization'] = `Bearer ${token}`;\n            }\n\n            const response = await fetch(url, { headers });\n            const result = await response.json();\n\n            if (result.status === 'success' && result.data && result.data.data) {\n                lastFetchedRows = result.data.data;\n                if (result.data.data.length > 0) {\n                    renderTable(result.data.data);\n                    const meta = {\n                        total: result.data.total || 0,\n                        perPage: result.data.perPage || limit,\n                        limit: result.data.perPage || limit\n                    };\n                    updatePagination(meta);\n                } else {\n                    tbody.innerHTML = '<tr><td colspan=\"13\" style=\"text-align: center; padding: 30px; font-family: Sora, sans-serif;\">No records found.<\/td><\/tr>';\n                    updatePagination({ total: 0, perPage: limit });\n                }\n            } else {\n                tbody.innerHTML = `<tr><td colspan=\"13\" style=\"text-align: center; padding: 30px; color: #ff4d4d; font-family: Sora, sans-serif;\">${result.errors || 'Failed to fetch data.'}<\/td><\/tr>`;\n                updatePagination({ total: 0, perPage: limit });\n            }\n        } catch (error) {\n            console.error('Error fetching work assignments:', error);\n            tbody.innerHTML = '<tr><td colspan=\"13\" style=\"text-align: center; padding: 30px; color: #ff4d4d; font-family: Sora, sans-serif;\">A server error occurred. Please try again later.<\/td><\/tr>';\n        }\n    }\n\n    function renderTable(rows) {\n        let rowsHTML = '';\n        rows.forEach(row => {\n            const clientName = row.client_name || 'N\/A';\n            const pillClass = clientName.toLowerCase() === 'quality family medical' ? 'pill-gray' : 'pill';\n\n            \/\/ Action column: Assign = manager whitelist only (PHP); view\/edit assigned = QC dept\n            let actionCell = '';\n            if (row.assign === true && canAssignQCWork()) {\n                actionCell = `<button onclick=\"openAssignQCModal(${row.work_assignment_id}, ${row.completed_dos ?? 0})\" style=\"background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:4px;color:#0180FF;font-family:'Sora',sans-serif;font-size:12px;padding:0;\">\n                        <svg width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><line x1=\"19\" y1=\"8\" x2=\"19\" y2=\"14\"\/><line x1=\"22\" y1=\"11\" x2=\"16\" y2=\"11\"\/><\/svg>\n                        Assign\n                    <\/button>`;\n            } else if (row.assign === false && isQCDepartment) {\n                actionCell = `<div style=\"display:flex;flex-direction:column;gap:4px;align-items:flex-start;\">\n                        <span style=\"font-size:12px;color:#333;font-family:'Sora',sans-serif;\">Assigned (${row.assigned_to_qc_name || ''})<\/span>\n                        <button onclick=\"openEditQCModal(${row.work_assignment_id}, ${row.completed_dos ?? 0})\" style=\"background:none;border:none;cursor:pointer;color:#0180FF;font-family:'Sora',sans-serif;font-size:12px;padding:0;text-decoration:underline;\">Edit<\/button>\n                    <\/div>`;\n            }\n\n            rowsHTML += `\n                <tr>\n                    <td>${row.assigned_date || 'N\/A'}<\/td>\n                    <td>${row.assigned_to_name || 'N\/A'}<\/td>\n                    <td>${row.file_name || 'N\/A'}<\/td>\n                    <td>${row.assigned_dos || '0'}<\/td>\n                    <td>${row.completed_dos || '0'}<\/td>\n                    <td>${row.qc_assigned_dos || '0'}<\/td>\n                    <td>${row.received_on || 'N\/A'}<\/td>\n                    <td>${row.insurance_name || 'N\/A'}<\/td>\n                    <td>${row.account_name || 'N\/A'}<\/td>\n                    <td>${row.entity_name || 'N\/A'}<\/td>\n                    <td style=\"text-align: center;\"><span class=\"${pillClass}\">${clientName}<\/span><\/td>\n                    <td>${row.category_name || 'N\/A'}<\/td>\n                    <td>${actionCell}<\/td>\n                <\/tr>\n            `;\n        });\n        tbody.innerHTML = rowsHTML;\n    }\n\n    \/\/ \u2500\u2500 LOAD FILTER DROPDOWN OPTIONS \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 loadFilters() {\n        let headers = { 'Content-Type': 'application\/json' };\n        if (window.phPortal && typeof window.phPortal.authHeaders === 'function') {\n            headers = window.phPortal.authHeaders();\n        } else {\n            const token = localStorage.getItem('TOKEN') || (document.cookie.match(\/(?:^|;\\s*)TOKEN=([^;]+)\/) || [])[1];\n            if (token) headers['Authorization'] = `Bearer ${token}`;\n        }\n\n        \/\/ Load Users for Assigned to filter (PHP parity: allWithParams -> all active users)\n        fetch(`${QC_API_BASE}\/user\/all-active`, { headers })\n        .then(r => r.json()).then(res => {\n            if (res.status === 'success' && Array.isArray(res.data)) {\n                populateCustomSelect('assignedToFilter', res.data, 'pesudo_name', 'id');\n            }\n        }).catch(console.error);\n\n        \/\/ Load Files\n        fetch('https:\/\/api-ph-portal.zyneventures.com\/api\/v1\/file\/all?limit=100', { headers })\n        .then(r => r.json()).then(res => {\n            if (res.status === 'success' && res.data && res.data.data) {\n                const items = res.data.data.map(f => ({ label: f.file_name, id: f.file_name }));\n                populateCustomSelect('fileFilter', items, 'label', 'id');\n            }\n        }).catch(console.error);\n\n        \/\/ Load Insurances\n        fetch('https:\/\/api-ph-portal.zyneventures.com\/api\/v1\/insurance\/all?limit=100', { headers })\n        .then(r => r.json()).then(res => {\n            if (res.status === 'success' && res.data && res.data.data) {\n                populateCustomSelect('insuranceFilter', res.data.data, 'name', 'id');\n            }\n        }).catch(console.error);\n\n        \/\/ Load Accounts\n        fetch('https:\/\/api-ph-portal.zyneventures.com\/api\/v1\/accountandbenchmark\/tableList', { headers })\n        .then(r => r.json()).then(res => {\n            let dataArray = [];\n            if (Array.isArray(res)) {\n                dataArray = res;\n            } else if (res.status === 'success' && res.data) {\n                dataArray = Array.isArray(res.data) ? res.data : (res.data.data || []);\n            }\n            populateCustomSelect('accountFilter', dataArray, 'name', 'id');\n        }).catch(console.error);\n\n        \/\/ Load Entities\n        fetch('https:\/\/api-ph-portal.zyneventures.com\/api\/v1\/entity\/all?limit=100', { headers })\n        .then(r => r.json()).then(res => {\n            if (res.status === 'success' && res.data && res.data.data) {\n                populateCustomSelect('entityFilter', res.data.data, 'entity', 'id');\n            }\n        }).catch(console.error);\n\n        \/\/ Load Clients\n        fetch('https:\/\/api-ph-portal.zyneventures.com\/api\/v1\/client\/all?limit=100', { headers })\n        .then(r => r.json()).then(res => {\n            if (res.status === 'success' && res.data && res.data.data) {\n                populateCustomSelect('clientFilter', res.data.data, 'name', 'id');\n            }\n        }).catch(console.error);\n\n        \/\/ Load Categories\n        fetch('https:\/\/api-ph-portal.zyneventures.com\/api\/v1\/category\/all?limit=100', { headers })\n        .then(r => r.json()).then(res => {\n            if (res.status === 'success' && res.data && res.data.data) {\n                populateCustomSelect('categoryFilter', res.data.data, 'category', 'id');\n            }\n        }).catch(console.error);\n    }\n\n    function buildWorkAssignmentQcExportUrl() {\n        const params = new URLSearchParams();\n        appendWorkAssignmentQcFilters(params);\n        const userId = localStorage.getItem('USER_ID');\n        if (userId) params.set('userId', userId);\n        const q = params.toString();\n        return `${API_QC_EXPORT}` + (q ? `?${q}` : '');\n    }\n\n    function getAuthHeaders() {\n        if (window.phPortal && typeof window.phPortal.authHeaders === 'function') {\n            return window.phPortal.authHeaders();\n        }\n        const headers = { 'Content-Type': 'application\/json' };\n        const token = localStorage.getItem('TOKEN') ||\n            (document.cookie.match(\/(?:^|;\\s*)TOKEN=([^;]+)\/) || [])[1];\n        if (token) headers['Authorization'] = `Bearer ${token}`;\n        return headers;\n    }\n\n    \/\/ \u2500\u2500 DOWNLOAD CSV (PHP qc-export \u2014 filtered rows, not paginated) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    async function downloadCSV() {\n        const btn = document.querySelector('.btn-primary[onclick=\"downloadCSV()\"]');\n        const origText = btn ? btn.textContent : '';\n        if (btn) {\n            btn.disabled = true;\n            btn.textContent = 'Downloading...';\n        }\n\n        try {\n            const headers = getAuthHeaders();\n            if (!headers.Authorization) {\n                alert('You are not logged in. Please login again.');\n                return;\n            }\n\n            const res = await fetch(buildWorkAssignmentQcExportUrl(), {\n                method: 'GET',\n                headers,\n            });\n\n            if (!res.ok) {\n                let message = 'Failed to download CSV.';\n                try {\n                    const errJson = await res.json();\n                    message = errJson.message || (errJson.messages && errJson.messages[0]) || message;\n                } catch (_) {\n                    message = message + ' (HTTP ' + res.status + ')';\n                }\n                alert(message);\n                return;\n            }\n\n            const blob = await res.blob();\n            if (!blob || blob.size === 0) {\n                alert('No data available to export for the selected filters.');\n                return;\n            }\n\n            let filename = 'work-assignment-qc' + Date.now() + '.csv';\n            const disposition = res.headers.get('Content-Disposition');\n            if (disposition) {\n                const match = disposition.match(\/filename=\"?([^\";\\n]+)\"?\/i);\n                if (match && match[1]) filename = match[1].trim();\n            }\n\n            const objectUrl = URL.createObjectURL(blob);\n            const a = document.createElement('a');\n            a.href = objectUrl;\n            a.download = filename;\n            document.body.appendChild(a);\n            a.click();\n            document.body.removeChild(a);\n            URL.revokeObjectURL(objectUrl);\n        } catch (err) {\n            console.error('CSV download error:', err);\n            alert('Failed to download CSV. Please try again.');\n        } finally {\n            if (btn) {\n                btn.disabled = false;\n                btn.textContent = origText;\n            }\n        }\n    }\n\n    \/\/ \u2500\u2500 LOGIN INTERCEPT: detect QC department \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 patchLoginIntercept() {\n        const origFetch = window.fetch;\n        window.fetch = async function(...args) {\n            const response = await origFetch.apply(this, args);\n            try {\n                const url = (typeof args[0] === 'string') ? args[0] : (args[0] && args[0].url ? args[0].url : '');\n                if (url && url.includes('\/user\/login')) {\n                    const clone = response.clone();\n                    clone.json().then(data => {\n                        const dept = (data.data && data.data.department_name) || (data.department_name) || '';\n                        if (dept === 'QC') {\n                            isQCDepartment = true;\n                        } else {\n                            isQCDepartment = false;\n                        }\n                        try { localStorage.setItem('USER_DATA', JSON.stringify(data.data || data)); } catch(e) {}\n                    }).catch(() => {});\n                }\n            } catch(e) {}\n            return response;\n        };\n    })();\n\n    \/\/ \u2500\u2500 QC POPUP STATE \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    let _qcDetailData = null;\n\n    function getAuthHeaders() {\n        let headers = { 'Content-Type': 'application\/json' };\n        if (window.phPortal && typeof window.phPortal.authHeaders === 'function') {\n            headers = window.phPortal.authHeaders();\n        } else {\n            const token = localStorage.getItem('TOKEN') || (document.cookie.match(\/(?:^|;\\s*)TOKEN=([^;]+)\/) || [])[1];\n            if (token) headers['Authorization'] = `Bearer ${token}`;\n        }\n        return headers;\n    }\n\n    function normalizeWorkDetail(data) {\n        if (!data) return {};\n        const wa = data.workassignment || data.work_assignment || data.workAssignment || {};\n        if (wa.id || wa.assigned_dos != null) {\n            return {\n                ...data,\n                ...wa,\n                work_assignment_assigned_qc: data.work_assignment_assigned_qc || wa.work_assignment_assigned_qc\n            };\n        }\n        return data;\n    }\n\n    function getLatestWorkLog(detail) {\n        const logs = detail?.logs || detail?.work_assignment_logs || detail?.workAssignmentLogs || [];\n        if (!Array.isArray(logs) || !logs.length) return {};\n        return logs[logs.length - 1] || logs[0] || {};\n    }\n\n    async function fetchWorkDetail(workAssignmentId) {\n        const resp = await fetch(API_WORK_DETAIL, {\n            method: 'POST',\n            headers: getAuthHeaders(),\n            body: JSON.stringify({ id: workAssignmentId, work_assignment_id: workAssignmentId })\n        });\n        const result = await resp.json();\n        if (result.status === 'success') return normalizeWorkDetail(result.data);\n        throw new Error(result.errors || 'Failed to load work assignment detail.');\n    }\n\n    async function fetchQCList() {\n        const resp = await fetch(API_QC_LIST, { headers: getAuthHeaders() });\n        const result = await resp.json();\n        if (result.status === 'success') return result.data || [];\n        return [];\n    }\n\n    function populateQCDropdown(selectEl, users, selectedId) {\n        selectEl.innerHTML = '<option value=\"\">Select Assigned To<\/option>';\n        users.forEach(u => {\n            const opt = document.createElement('option');\n            opt.value = u.id;\n            opt.textContent = u.pesudo_name || u.name;\n            if (selectedId && String(u.id) === String(selectedId)) opt.selected = true;\n            selectEl.appendChild(opt);\n        });\n    }\n\n    function calcBenchmarkHours(dosVal, benchmark) {\n        const dos = parseFloat(dosVal) || 0;\n        const bm = parseFloat(benchmark) || 0;\n        return dos > 0 && bm > 0 ? (dos \/ bm).toFixed(2) : '0.00';\n    }\n\n    function getSubmittedDos(detail, completedDosFromRow) {\n        const log = getLatestWorkLog(detail);\n        const fromDetail = detail?.completed_dos ?? detail?.dos_completed ?? detail?.submitted_dos\n            ?? log.dos_complete ?? log.dos_completed ?? '';\n        if (fromDetail !== '' && fromDetail != null) return fromDetail;\n\n        if (completedDosFromRow !== '' && completedDosFromRow != null) return completedDosFromRow;\n\n        const row = lastFetchedRows.find(r => String(r.work_assignment_id) === String(detail?.id || detail?.work_assignment_id));\n        if (row && row.completed_dos != null && row.completed_dos !== '') return row.completed_dos;\n\n        return '';\n    }\n\n    \/\/ \u2500\u2500 OPEN ASSIGN QC MODAL \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    async function openAssignQCModal(workAssignmentId, completedDosFromRow) {\n        if (!canAssignQCWork()) {\n            alert('You do not have permission to assign QC work.');\n            return;\n        }\n        const modal = document.getElementById('qcAssignModal');\n        const overlay = document.getElementById('qcModalOverlay');\n        modal.querySelector('.qc-modal-title').textContent = 'Assign QC';\n        modal.querySelector('#qcSaveBtn').style.display = '';\n        modal.querySelector('#qcApplyChangesBtn').style.display = 'none';\n        modal.querySelector('#qcAssignDate').valueAsDate = new Date();\n        modal.querySelector('#qcDosAssigned').value = '';\n        modal.querySelector('#qcBenchmarkHours').value = '';\n        modal.querySelector('#qcAssignTo').innerHTML = '<option value=\"\">Loading...<\/option>';\n        _qcDetailData = null;\n        overlay.style.display = 'flex';\n\n        try {\n            const [detail, users] = await Promise.all([fetchWorkDetail(workAssignmentId), fetchQCList()]);\n            _qcDetailData = detail;\n            const submittedDos = getSubmittedDos(detail, completedDosFromRow);\n            modal.querySelector('#qcDosAssigned').value = submittedDos;\n            const bm = detail.account_quality_benchmark || detail.account && detail.account.quality_benchmark || 0;\n            modal.querySelector('#qcBenchmarkHours').value = calcBenchmarkHours(submittedDos, bm);\n            populateQCDropdown(modal.querySelector('#qcAssignTo'), users, null);\n        } catch(e) {\n            alert('Error loading data: ' + e.message);\n            overlay.style.display = 'none';\n        }\n    }\n\n    \/\/ \u2500\u2500 OPEN EDIT QC MODAL \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    async function openEditQCModal(workAssignmentId, completedDosFromRow) {\n        const modal = document.getElementById('qcAssignModal');\n        const overlay = document.getElementById('qcModalOverlay');\n        modal.querySelector('.qc-modal-title').textContent = 'Edit Work Assign QC';\n        modal.querySelector('#qcSaveBtn').style.display = '';\n        modal.querySelector('#qcApplyChangesBtn').style.display = '';\n        modal.querySelector('#qcAssignDate').value = '';\n        modal.querySelector('#qcDosAssigned').value = '';\n        modal.querySelector('#qcBenchmarkHours').value = '';\n        modal.querySelector('#qcAssignTo').innerHTML = '<option value=\"\">Loading...<\/option>';\n        _qcDetailData = null;\n        overlay.style.display = 'flex';\n\n        try {\n            const [detail, users] = await Promise.all([fetchWorkDetail(workAssignmentId), fetchQCList()]);\n            _qcDetailData = detail;\n            \/\/ Populate fields from existing QC assignment if available\n            const existingQC = detail.work_assignment_assigned_qc && detail.work_assignment_assigned_qc[0];\n            const submittedDos = getSubmittedDos(detail, completedDosFromRow);\n            if (existingQC) {\n                modal.querySelector('#qcAssignDate').value = existingQC.qc_assign_date || existingQC.assigned_date || '';\n                modal.querySelector('#qcDosAssigned').value = submittedDos;\n                const bm = detail.account_quality_benchmark || (detail.account && detail.account.quality_benchmark) || 0;\n                modal.querySelector('#qcBenchmarkHours').value = calcBenchmarkHours(submittedDos, bm);\n                populateQCDropdown(modal.querySelector('#qcAssignTo'), users, existingQC.assigned_to || null);\n            } else {\n                modal.querySelector('#qcAssignDate').valueAsDate = new Date();\n                modal.querySelector('#qcDosAssigned').value = submittedDos;\n                const bm = detail.account_quality_benchmark || (detail.account && detail.account.quality_benchmark) || 0;\n                modal.querySelector('#qcBenchmarkHours').value = calcBenchmarkHours(submittedDos, bm);\n                populateQCDropdown(modal.querySelector('#qcAssignTo'), users, null);\n            }\n        } catch(e) {\n            alert('Error loading data: ' + e.message);\n            overlay.style.display = 'none';\n        }\n    }\n\n    function closeQCModal() {\n        document.getElementById('qcModalOverlay').style.display = 'none';\n        _qcDetailData = null;\n    }\n\n    \/\/ Real-time DOS \u2192 BenchMark Hours calculation + initial page load\n    document.addEventListener('DOMContentLoaded', () => {\n        loadFilters();\n        fetchWorkAssignments();\n\n        const dosInput = document.getElementById('qcDosAssigned');\n        if (dosInput) {\n            dosInput.addEventListener('input', function() {\n                const bm = _qcDetailData\n                    ? (_qcDetailData.account_quality_benchmark || (_qcDetailData.account && _qcDetailData.account.quality_benchmark) || 0)\n                    : 0;\n                document.getElementById('qcBenchmarkHours').value = calcBenchmarkHours(this.value, bm);\n            });\n        }\n    });\n\n    async function saveQCAssign() {\n        if (!canAssignQCWork()) {\n            alert('You do not have permission to assign QC work.');\n            return;\n        }\n        const modal = document.getElementById('qcAssignModal');\n        const assignDate = modal.querySelector('#qcAssignDate').value;\n        const assignTo   = modal.querySelector('#qcAssignTo').value;\n        const dosAssigned = modal.querySelector('#qcDosAssigned').value;\n        const benchmarkHours = modal.querySelector('#qcBenchmarkHours').value;\n\n        if (!assignDate || !assignTo || !dosAssigned) {\n            alert('Please fill all required fields.');\n            return;\n        }\n\n        const payload = {\n            work_assignment_id: _qcDetailData ? _qcDetailData.id : null,\n            qc_assign_date: assignDate,\n            qc_assign_to: parseInt(assignTo),\n            dos_assigned: parseInt(dosAssigned),\n            bench_mark_hours: benchmarkHours,\n            assigned_by: _qcDetailData ? (_qcDetailData.assigned_to_user_id || _qcDetailData.assigned_to || null) : null\n        };\n\n        try {\n            const resp = await fetch(API_QC_ASSIGN_ADD, {\n                method: 'POST',\n                headers: getAuthHeaders(),\n                body: JSON.stringify(payload)\n            });\n            const result = await resp.json();\n            if (result.status === 'success') {\n                closeQCModal();\n                fetchWorkAssignments(currentPage);\n            } else {\n                alert(result.errors || result.messages?.[0] || 'Failed to save.');\n            }\n        } catch(e) {\n            alert('Error saving: ' + e.message);\n        }\n    }\n\n    async function applyChangesQCAssign() {\n        await saveQCAssign();\n    }\n\n<\/script>\n\n<!-- \u2500\u2500 QC ASSIGN \/ EDIT MODAL \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<div id=\"qcModalOverlay\" style=\"display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:10000;align-items:center;justify-content:center;\">\n    <div id=\"qcAssignModal\" style=\"background:#fff;border-radius:12px;padding:32px 28px 24px;width:100%;max-width:400px;box-shadow:0 8px 32px rgba(0,0,0,0.18);font-family:'Sora',sans-serif;position:relative;\">\n        <h3 class=\"qc-modal-title\" style=\"margin:0 0 22px 0;font-size:18px;font-weight:600;color:#212529;\">Assign QC<\/h3>\n\n        <div style=\"display:flex;flex-direction:column;gap:16px;\">\n            <div style=\"display:flex;flex-direction:column;gap:6px;\">\n                <label style=\"font-size:12px;color:#212529;\">QC Assign Date <span style=\"color:red;\">*<\/span><\/label>\n                <input type=\"date\" id=\"qcAssignDate\" style=\"height:38px;padding:0 12px;border:1px solid #E0E0E0;border-radius:6px;font-family:'Sora',sans-serif;font-size:12px;color:#212529;outline:none;box-sizing:border-box;width:100%;\">\n            <\/div>\n\n            <div style=\"display:flex;flex-direction:column;gap:6px;\">\n                <label style=\"font-size:12px;color:#212529;\">QC Assign to <span style=\"color:red;\">*<\/span><\/label>\n                <select id=\"qcAssignTo\" style=\"height:38px;padding:0 12px;border:1px solid #E0E0E0;border-radius:6px;font-family:'Sora',sans-serif;font-size:12px;color:#212529;outline:none;box-sizing:border-box;width:100%;background:#fff;appearance:auto;\">\n                    <option value=\"\">Select Assigned To<\/option>\n                <\/select>\n            <\/div>\n\n            <div style=\"display:flex;flex-direction:column;gap:6px;\">\n                <label style=\"font-size:12px;color:#212529;\">DOS Submitted <span style=\"color:red;\">*<\/span><\/label>\n                <input type=\"number\" id=\"qcDosAssigned\" min=\"0\" style=\"height:38px;padding:0 12px;border:1px solid #E0E0E0;border-radius:6px;font-family:'Sora',sans-serif;font-size:12px;color:#212529;outline:none;box-sizing:border-box;width:100%;\">\n            <\/div>\n\n            <div style=\"display:flex;flex-direction:column;gap:6px;\">\n                <label style=\"font-size:12px;color:#212529;\">BenchMark Hours <span style=\"color:red;\">*<\/span><\/label>\n                <input type=\"text\" id=\"qcBenchmarkHours\" readonly=\"\" style=\"height:38px;padding:0 12px;border:1px solid #E0E0E0;border-radius:6px;font-family:'Sora',sans-serif;font-size:12px;color:#212529;outline:none;box-sizing:border-box;width:100%;background:#F7F8FA;\">\n            <\/div>\n        <\/div>\n\n        <div style=\"display:flex;justify-content:flex-end;gap:10px;margin-top:24px;align-items:center;\">\n            <button onclick=\"closeQCModal()\" style=\"height:38px;padding:0 20px;border-radius:6px;border:none;background:none;font-family:'Sora',sans-serif;font-size:13px;color:#555;cursor:pointer;\">Close<\/button>\n            <button id=\"qcApplyChangesBtn\" onclick=\"applyChangesQCAssign()\" style=\"display:none;height:38px;padding:0 20px;border-radius:6px;border:none;background:#0180FF;color:#fff;font-family:'Sora',sans-serif;font-size:13px;font-weight:500;cursor:pointer;\">Apply Changes<\/button>\n            <button id=\"qcSaveBtn\" onclick=\"saveQCAssign()\" style=\"height:38px;padding:0 20px;border-radius:6px;border:none;background:#0180FF;color:#fff;font-family:'Sora',sans-serif;font-size:13px;font-weight:500;cursor:pointer;\">Save<\/button>\n        <\/div>\n    <\/div>\n<\/div>\n<\/div><\/div>\n\n<\/div><\/div><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WORK ASSIGNMENTS QC (0) Assigned to File Name Assigned DOS Received On Insurance Account Entity Client Category Select Date 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 Per&#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":"default","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-418","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ph-portal-v2.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/418","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=418"}],"version-history":[{"count":46,"href":"https:\/\/ph-portal-v2.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/418\/revisions"}],"predecessor-version":[{"id":1191,"href":"https:\/\/ph-portal-v2.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/418\/revisions\/1191"}],"wp:attachment":[{"href":"https:\/\/ph-portal-v2.zyneventures.com\/index.php\/wp-json\/wp\/v2\/media?parent=418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}