{"id":184,"date":"2026-03-31T10:10:52","date_gmt":"2026-03-31T10:10:52","guid":{"rendered":"https:\/\/ph-taskportal.zyneventures.com\/?page_id=184"},"modified":"2026-07-16T09:23:47","modified_gmt":"2026-07-16T09:23:47","slug":"submitted-work-assigned-qc","status":"publish","type":"page","link":"https:\/\/ph-portal-v2.zyneventures.com\/index.php\/submitted-work-assigned-qc\/","title":{"rendered":"Submitted Work Assigned QC"},"content":{"rendered":"<style>.kb-row-layout-id184_586505-63 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id184_586505-63 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id184_586505-63 > .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-id184_586505-63 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id184_586505-63 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id184_586505-63 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id184_586505-63 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-column184_0a9723-fb > .kt-inside-inner-col,.kadence-column184_0a9723-fb > .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-column184_0a9723-fb > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column184_0a9723-fb > .kt-inside-inner-col{flex-direction:column;}.kadence-column184_0a9723-fb > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column184_0a9723-fb > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column184_0a9723-fb{position:relative;}@media all and (max-width: 1024px){.kadence-column184_0a9723-fb > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column184_0a9723-fb > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column184_0a9723-fb\"><div class=\"kt-inside-inner-col\">\n<style data-wp-block-html=\"css\">\n:root {\n            --primary-blue: #0180FF;\n            --hover-blue: #3499FF;\n            --text-dark: #212529;\n            --text-muted: #8D8C9C;\n            --border-color: #EFEFEF;\n            --success-green: #1E8E3E;\n            --error-red: #D93025;\n            --bg-light: #F1F3F4;\n        }\n    \n        * { box-sizing: border-box; }\n    \n        body {\n            font-family: 'Sora', sans-serif;\n            color: var(--text-dark);\n            background: #fff;\n            line-height: 1.5;\n        }\n    \n        \/* \u2500\u2500 Header \u2500\u2500 *\/\n        .header-container {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 25px;\n        }\n        .title-group { display: flex; align-items: center; gap: 10px; }\n        .title-group h2 {\n            margin: 0;\n            font-size: 21px;\n            font-weight: 500;\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n        }\n        .count { color: var(--text-muted); font-size: 16px; font-weight: 400; }\n    \n        \/* \u2500\u2500 Filter Section \u2500\u2500 *\/\n        .filter-section {\n            display: grid;\n            grid-template-columns: repeat(4, 1fr);\n            gap: 16px 20px;\n            margin-bottom: 10px;\n        }\n        .filter-group { font-size: 14px; color: var(--text-dark); }\n        .filter-group label {\n            display: block;\n            margin-bottom: 6px;\n            font-weight: 500;\n            font-size: 12px;\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        \/* Search input in dropdown *\/\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        .form-control {\n            height: 38px;\n            padding: 0 12px;\n            border: 1px solid #ced4da;\n            border-radius: 6px;\n            font-family: 'Sora', sans-serif;\n            font-size: 12px;\n            outline: none;\n            box-sizing: border-box;\n            width: 100%;\n        }\n    \n        .form-control:focus {\n            background-color: #fff;\n            border-color: var(--primary-blue);\n            box-shadow: 0 0 0 3px rgba(1, 128, 255, 0.1);\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        .dp-dropdown {\n            display: none;\n            position: absolute;\n            top: 100%;\n            left: 0;\n            background: #fff;\n            border: 1px solid #EFEFEF;\n            border-radius: 12px;\n            z-index: 9999;\n            margin-top: 8px;\n            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\n            overflow: hidden;\n            min-width: 600px;\n        }\n    \n        .dp-dropdown.open {\n            display: flex;\n        }\n    \n        .dp-dropdown.align-right {\n            left: auto;\n            right: 0;\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            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        }\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        }\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        }\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        }\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: 50%;\n                transform: translateX(-50%);\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        \/* Per Page & Status row *\/\n        .filter-row2 {\n            display: grid;\n            grid-template-columns: repeat(4, 1fr);\n            gap: 16px 20px;\n            margin-bottom: 16px;\n        }\n    \n        \/* Filter action buttons *\/\n        .filter-actions {\n            display: flex;\n            justify-content: flex-start;\n            gap: 10px;\n            margin-bottom: 20px;\n        }\n        .btn {\n            padding: 8px 22px;\n            border-radius: 6px;\n            font-size: 12px;\n            font-weight: 500;\n            cursor: pointer;\n            border: none;\n            transition: background 0.2s, opacity 0.2s;\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            font-family: 'Sora', sans-serif;\n        }\n        .btn:hover { opacity: 0.88; }\n        .btn-clear { background: #D9DDEF; color: var(--text-dark); }\n        .btn-download { background: var(--primary-blue); color: #fff; }\n        .btn-filter { background: var(--primary-blue); color: #fff; }\n    \n        \/* \u2500\u2500 Table \u2500\u2500 *\/\n        .table-wrapper {\n            overflow-x: auto;\n            border: 1px solid var(--border-color);\n            border-radius: 8px;\n        }\n        table {\n            width: 100%;\n            border-collapse: collapse;\n            font-size: 12px;\n            text-align: left;\n            min-width: 1400px;\n        }\n        thead th {\n            background: #f5f5f5;\n            color: var(--text-dark);\n            font-weight: 500;\n            padding: 12px 10px;\n            border-bottom: 1px solid var(--border-color);\n            text-transform: uppercase;\n            font-size: 12px;\n            white-space: nowrap;\n        }\n        tbody td {\n            padding: 11px 10px;\n            font-size: 12px;\n            font-weight: 400;\n            border-bottom: 1px solid var(--border-color);\n            color: var(--text-muted);\n            vertical-align: middle;\n            white-space: nowrap;\n        }\n        tbody tr:last-child td { border-bottom: none; }\n        tbody tr:hover { background: #fafafa; }\n    \n        \/* Status Badge *\/\n        .status-badge {\n            padding: 4px 10px;\n            border-radius: 20px;\n            font-size: 12px;\n            font-weight: 400;\n            display: inline-flex;\n            align-items: center;\n            gap: 5px;\n            white-space: nowrap;\n        }\n        .badge-submitted { background: #E3F6EC; color: #1E8E3E; }\n        .badge-submitted::before { content: '\u25cf'; font-size: 7px; }\n        .badge-not-submitted { background: #FFF0F0; color: #D93025; }\n        .badge-not-submitted::before { content: '\u25cf'; font-size: 7px; }\n        .badge-pending { background: #FFF8E1; color: #F59E0B; }\n        .badge-pending::before { content: '\u25cf'; font-size: 7px; }\n    \n        \/* Error stats cell *\/\n        .error-stats {\n            display: flex;\n            flex-direction: column;\n            gap: 2px;\n            font-size: 12px;\n            font-weight: 400;\n        }\n        .err-mi { color: var(--text-muted); }\n        .err-cr { color: var(--text-muted); }\n        .err-zt { color: var(--text-muted); }\n    \n        \/* Icon buttons \u2014 muted color, transparent, no hover *\/\n        .icon-btn {\n            background: transparent;\n            border: none;\n            cursor: pointer;\n            color: var(--text-muted);\n            padding: 4px;\n            border-radius: 4px;\n            transition: none;\n        }\n        .icon-btn:hover {\n            background: transparent;\n            color: var(--text-muted);\n        }\n    \n        \/* Action icons container *\/\n        .action-icons {\n            display: flex;\n            align-items: center;\n            gap: 2px;\n            color: var(--text-muted);\n            background-color: transparent;\n        }\n    \n        \/* \u2500\u2500 Pagination Footer \u2500\u2500 *\/\n        .pagination-footer {\n            margin-top: 24px;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            color: var(--text-muted);\n            font-size: 12px;\n            flex-wrap: wrap;\n            gap: 12px;\n        }\n        .pagination-controls { display: flex; align-items: center; gap: 6px; }\n        .page-num {\n            cursor: pointer;\n            width: 32px;\n            height: 32px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border-radius: 50%;\n            font-weight: 400;\n            font-size: 12px;\n            transition: background 0.15s, color 0.15s;\n        }\n        .page-num:hover { background: transparent; }\n        .page-num.active { background: var(--primary-blue); color: #fff; }\n        .dots { padding: 0 4px; color: var(--text-muted); }\n        .nav-btn {\n            cursor: pointer;\n            color: var(--text-dark);\n            font-weight: 400;\n            padding: 5px 10px;\n            font-size: 12px;\n            border-radius: 4px;\n            transition: background 0.15s;\n        }\n        .nav-btn:hover { background: transparent; }\n        .nav-btn.disabled { color: #ccc; pointer-events: none; }\n    \n        \/* \u2500\u2500 Loading \/ Empty \u2500\u2500 *\/\n        .loading-row td,\n        .empty-row td {\n            text-align: center;\n            padding: 40px;\n            color: var(--text-muted);\n            font-size: 12px;\n        }\n    \n        \/* \u2500\u2500 Responsive \u2500\u2500 *\/\n        @media (max-width: 1200px) {\n            .filter-section,\n            .filter-row2 { grid-template-columns: repeat(3, 1fr); }\n        }\n        @media (max-width: 900px) {\n            .filter-section,\n            .filter-row2 { grid-template-columns: repeat(2, 1fr); }\n            body { padding: 16px; }\n        }\n        @media (max-width: 600px) {\n            .filter-section,\n            .filter-row2 { grid-template-columns: 1fr; }\n            .header-container { flex-direction: column; align-items: flex-start; gap: 8px; }\n            .pagination-footer { justify-content: center; flex-direction: column; align-items: center; }\n            .filter-actions { flex-wrap: wrap; }\n            .btn { font-size: 11px; padding: 7px 14px; }\n        }\n        @media (max-width: 480px) {\n            body { padding: 10px; }\n            .title-group h2 { font-size: 17px; }\n            .filter-actions { gap: 6px; }\n            .btn { padding: 7px 10px; }\n            .pagination-controls { flex-wrap: wrap; justify-content: center; }\n        }\n    \n        \/* Spinner *\/\n        .spinner {\n            display: inline-block;\n            width: 18px; height: 18px;\n            border: 2px solid #e0e0e0;\n            border-top-color: var(--primary-blue);\n            border-radius: 50%;\n            animation: spin 0.7s linear infinite;\n            vertical-align: middle;\n        }\n        @keyframes spin { to { transform: rotate(360deg); } }\n<\/style>\n\n<style>\n    .table-wrapper {\n        max-width: 100%;\n        overflow-x: auto;\n        -webkit-overflow-scrolling: touch;\n    }\n\n    #mainTable {\n        width: 100%;\n        max-width: 100%;\n        min-width: 1180px;\n        table-layout: fixed;\n        border-collapse: collapse;\n    }\n\n    #mainTable th {\n        font-size: 9px;\n        padding: 7px 4px;\n        line-height: 1.25;\n        white-space: normal;\n        word-break: normal;\n        overflow-wrap: anywhere;\n        letter-spacing: 0;\n    }\n\n    #mainTable td {\n        font-size: 9px;\n        padding: 7px 4px;\n        line-height: 1.25;\n        white-space: normal;\n        word-break: normal;\n        overflow-wrap: anywhere;\n        vertical-align: middle;\n    }\n\n    \/* Compact numeric\/date columns to free space *\/\n    #mainTable th:nth-child(8), #mainTable td:nth-child(8),\n    #mainTable th:nth-child(9), #mainTable td:nth-child(9),\n    #mainTable th:nth-child(10), #mainTable td:nth-child(10),\n    #mainTable th:nth-child(11), #mainTable td:nth-child(11),\n    #mainTable th:nth-child(12), #mainTable td:nth-child(12),\n    #mainTable th:nth-child(13), #mainTable td:nth-child(13) {\n        padding-left: 3px;\n        padding-right: 3px;\n        text-align: center;\n    }\n\n    \/* Keep Status and Error clearly separated *\/\n    #mainTable th:nth-child(14), #mainTable td:nth-child(14) {\n        width: 9%;\n        min-width: 88px;\n        overflow: hidden;\n    }\n    #mainTable th:nth-child(15), #mainTable td:nth-child(15) {\n        width: 8%;\n        min-width: 78px;\n    }\n\n    \/* Tight numeric\/date\/status columns stay single-line *\/\n    #mainTable td:nth-child(1),\n    #mainTable td:nth-child(8),\n    #mainTable td:nth-child(9),\n    #mainTable td:nth-child(10),\n    #mainTable td:nth-child(11),\n    #mainTable td:nth-child(12),\n    #mainTable td:nth-child(13),\n    #mainTable td:nth-child(14) {\n        white-space: nowrap;\n        word-break: normal;\n        overflow-wrap: normal;\n    }\n\n    #mainTable td .status-badge {\n        white-space: nowrap;\n        display: inline-block;\n        max-width: 100%;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n\n    \/* Error column \u2014 PHP listworkassigned\/list.blade.php shows MI, CR, ZT on separate lines *\/\n    .error-stats {\n        display: flex;\n        flex-direction: column;\n        gap: 0;\n        font-size: 10px;\n        line-height: 1.2;\n        white-space: nowrap;\n    }\n    .error-stats span {\n        display: block;\n    }\n    .err-mi { color: #6b7280; }\n    .err-cr { color: #6b7280; }\n    .err-zt { color: #6b7280; }\n<\/style>\n\n\n<!-- Header -->\n<div class=\"header-container\">\n<div class=\"title-group\">\n    <h2>List Work Assigned QC<\/h2>\n    <span class=\"count\" id=\"totalCount\">(0)<\/span>\n<\/div>\n<\/div><br>\n\n<!-- Filters Row 1 -->\n<div class=\"filter-section\" id=\"filterForm\" style=\"display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-bottom: 20px;\"><\/div>\n\n<!-- Per Page + Actions -->\n<div style=\"display:flex; align-items:flex-end; justify-content:flex-start; flex-wrap:wrap; gap:10px; margin-bottom:20px;\">\n<div class=\"filter-group\" style=\"min-width:130px; margin:0;\">\n    <label>Per Page<\/label>\n    <select id=\"filterPerPage\" class=\"form-control\" onchange=\"fetchData(1)\">\n        <option value=\"\" disabled=\"\" 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 class=\"filter-actions\" style=\"margin-bottom:0;\">\n    <button class=\"btn btn-clear\" onclick=\"resetFilters()\">Clear<\/button>\n    <button class=\"btn btn-download\" onclick=\"downloadCSV()\">+ Download CSV<\/button>\n    <button class=\"btn btn-filter\" onclick=\"applyFilters()\">Filter<\/button>\n<\/div>\n<\/div><br>\n\n<!-- Table -->\n<div class=\"table-wrapper\">\n<table id=\"mainTable\">\n    <thead>\n        <tr>\n            <th>QC Assigned Date<\/th>\n            <th>Assigned To<\/th>\n            <th>QC(C) Assigned To<\/th>\n            <th>File Name<\/th>\n            <th>Account<\/th>\n            <th>Entity<\/th>\n            <th>Category<\/th>\n            <th>DOS Assigned<\/th>\n            <th>DOS Completed<\/th>\n            <th>DOS Assigned(QC)<\/th>\n            <th>DOS Completed(QC)<\/th>\n            <th>QC Submitted HRS<\/th>\n            <th>QC Submitted At<\/th>\n            <th>Status<\/th>\n            <th>Error<\/th>\n            <th id=\"thAction\">Action<\/th>\n        <\/tr>\n    <\/thead>\n    <tbody id=\"tableBody\">\n        <tr class=\"loading-row\"><td colspan=\"16\"><span class=\"spinner\"><\/span> Loading&#8230;<\/td><\/tr>\n    <\/tbody>\n<\/table>\n<\/div>\n\n<!-- Pagination Footer -->\n<div class=\"pagination-footer\">\n<div class=\"pagination-controls\">\n    <span id=\"prevBtn\" class=\"nav-btn disabled\">\u00ab Previous<\/span>\n    <div id=\"pageNumbers\" style=\"display:flex; gap:4px;\"><\/div>\n    <span id=\"nextBtn\" class=\"nav-btn disabled\">Next \u00bb<\/span>\n<\/div>\n<div id=\"entryInfo\">Showing 0 to 0 of 0 entries<\/div>\n<\/div>\n\n<script>\n\/\/ ENDPOINTS\nconst BASE_URL = 'https:\/\/api-ph-portal.zyneventures.com\/api\/v1';\n\nconst ENDPOINTS = {\n    WORK_QC:                    `${BASE_URL}\/work_assignment_assigned_qc\/all-submitted`,\n    UNSUBMIT_QC:                `${BASE_URL}\/work_assignment_assigned_qc\/un-submit`,\n    USERS:                      `${BASE_URL}\/user\/all`,\n    TEAM_MEMBERS:               `${BASE_URL}\/user\/team-members`,\n    FILES:                      `${BASE_URL}\/file\/all`,\n    ENTITIES:                   `${BASE_URL}\/entity\/all`,\n    CATEGORIES:                 `${BASE_URL}\/category\/table\/list`,\n    ACCOUNTS:                   `${BASE_URL}\/accountandbenchmark\/tableList`,\n    \/\/ GET work assignment error detail\n    GET_WORK_ASSIGNMENT_ERROR:  (id) => `${BASE_URL}\/work_assignment_error\/getbyworkassignment?work_assignment_id=${id}`\n};\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   AUTH\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nconst getHeaders = () => ({\n    'Content-Type': 'application\/json',\n    'Authorization': `Bearer ${localStorage.getItem('TOKEN')}`\n});\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   USER INFO (role & department)\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nfunction getUserInfo() {\n    let user = {};\n    try {\n        const raw = localStorage.getItem('USER_DATA') ||\n                    localStorage.getItem('USER') ||\n                    localStorage.getItem('user_data') ||\n                    localStorage.getItem('userData');\n        if (raw) user = JSON.parse(raw);\n    } catch (e) {}\n\n    const roleRaw = user.role || localStorage.getItem('USER_ROLE') || user.user_role || '';\n    const role = (typeof roleRaw === 'object'\n        ? (roleRaw.name || roleRaw.role || '')\n        : roleRaw).toString().toLowerCase().trim();\n\n    const department = (\n        user.department_name ||\n        user.department ||\n        localStorage.getItem('DEPARTMENT_NAME') ||\n        localStorage.getItem('department_name') ||\n        ''\n    ).toString().toLowerCase().trim();\n\n    return { role, department };\n}\n\nfunction isAdminRole(role) {\n    return role === 'administrator' || role === 'admin';\n}\n\nfunction isQcDepartment(department) {\n    return department === 'qc' || \/quality[\\s_-]?control\/.test(department);\n}\n\n\/** PHP listworkassigned\/list.blade.php \u2014 Un Submit for these roles only. *\/\nfunction isAssistantManagerOrTeamLeadI(role) {\n    const normalizedRole = String(role || '')\n        .toLowerCase()\n        .replace(\/[_-]\/g, ' ')\n        .replace(\/\\s+\/g, ' ')\n        .trim();\n\n    return normalizedRole === 'assistant manager'\n        || \/^assistant manager\\b\/.test(normalizedRole)\n        || normalizedRole === 'team lead i'\n        || normalizedRole === 'team lead - i';\n}\n\nfunction hasQcSubmitDos(item) {\n    const v = item.qc_submit_dos ?? item.qc_dos_completed;\n    return v !== null && v !== undefined && v !== '';\n}\n\n\/** Normalize error type \u2014 DB may store legacy \"Zero Tolerence\" (space). *\/\nfunction normalizeErrorType(value) {\n    const t = String(value ?? '').trim();\n    if (!t) return null;\n    if (t === 'Minor') return 'Minor';\n    if (t === 'Critical') return 'Critical';\n    if (['Zero_Tolerence', 'Zero Tolerence', 'Zero Tolerance', 'Zero_Tolerance', 'ZTE', 'ZT'].includes(t)) {\n        return 'Zero_Tolerence';\n    }\n    const compact = t.toLowerCase().replace(\/[_-]\/g, ' ').replace(\/\\s+\/g, ' ').trim();\n    if (compact === 'zero tolerence' || compact === 'zero tolerance') return 'Zero_Tolerence';\n    return t;\n}\n\n\/** PHP Helpers.php countError() \u2014 sum error_count rows by type. *\/\nfunction sumErrorsFromRows(errors) {\n    const res = { minor: 0, critical: 0, zeroTolerence: 0 };\n    (errors || []).forEach(e => {\n        const t = normalizeErrorType(e?.error_type || e?.errot_type || '');\n        const cnt = parseInt(e?.error_count ?? e?.reverse_error_count ?? 0, 10) || 0;\n        if (t === 'Minor') res.minor += cnt;\n        else if (t === 'Critical') res.critical += cnt;\n        else if (t === 'Zero_Tolerence') res.zeroTolerence += cnt;\n    });\n    return res;\n}\n\nfunction normalizeErrorStats(raw) {\n    if (!raw) return { minor: 0, critical: 0, zeroTolerence: 0 };\n    let s = raw;\n    if (typeof s === 'string') {\n        try { s = JSON.parse(s); } catch (e) { s = {}; }\n    }\n    return {\n        minor: parseInt(s.minor ?? s.MI ?? 0, 10) || 0,\n        critical: parseInt(s.critical ?? s.CR ?? 0, 10) || 0,\n        zeroTolerence: parseInt(s.zeroTolerence ?? s.zero_tolerance ?? s.ZTE ?? 0, 10) || 0\n    };\n}\n\n\/**\n * Resolve MI\/CR\/ZT counts for a table row.\n * Node: item.error_stats OR result.data.stats[index]\n * PHP:  result.stats[index] (parallel array, sibling to data)\n *\/\nfunction resolveErrorStats(item, index, rootStats) {\n    if (item?.error_stats) return normalizeErrorStats(item.error_stats);\n    if (Array.isArray(rootStats) && rootStats[index] != null) {\n        return normalizeErrorStats(rootStats[index]);\n    }\n    const nested = item?.work_assignment_errors || item?.workAssignmentErrors || item?.workassignmentError;\n    if (Array.isArray(nested) && nested.length) return sumErrorsFromRows(nested);\n    return { minor: 0, critical: 0, zeroTolerence: 0 };\n}\n\nfunction formatErrorStatsHtml(stats) {\n    const minor = stats.minor ?? 0;\n    const critical = stats.critical ?? 0;\n    const zt = stats.zeroTolerence ?? 0;\n    return `\n        <div class=\"error-stats\">\n            <span class=\"err-mi\">MI <strong>${minor}<\/strong><\/span>\n            <span class=\"err-cr\">CR <strong>${critical}<\/strong><\/span>\n            <span class=\"err-zt\">ZT <strong>${zt}<\/strong><\/span>\n        <\/div>`;\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   STATE\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nlet currentPage = 1;\nlet totalPages  = 1;\nlet totalCount  = 0;\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   FETCH HELPERS\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nasync function fetchAllPaged(baseUrl, extractFn, pageKey = 'page', limitKey = 'limit', defaultLimit = 500) {\n    const url = new URL(baseUrl);\n    url.searchParams.set(limitKey, defaultLimit);\n    url.searchParams.set(pageKey, 1);\n    const res  = await fetch(url.toString(), { headers: getHeaders() });\n    const json = await res.json();\n    let items = extractFn(json) || [];\n\n    \/\/ Try to get total pages\n    const pag = json?.data?.pagination || json?.data || {};\n    const totalPgs = pag.pages || pag.totalPages || pag.last_page || 1;\n\n    if (totalPgs > 1) {\n        const extras = [];\n        for (let p = 2; p <= Math.min(totalPgs, 20); p++) {\n            const u2 = new URL(baseUrl);\n            u2.searchParams.set(limitKey, defaultLimit);\n            u2.searchParams.set(pageKey, p);\n            extras.push(fetch(u2.toString(), { headers: getHeaders() }).then(r => r.json()).catch(() => null));\n        }\n        const pages = await Promise.all(extras);\n        pages.forEach(pg => { if (pg) items = items.concat(extractFn(pg) || []); });\n    }\n    return items;\n}\n\n\/\/ LOAD DROPDOWNS\nlet dropDownData = { users: [], teamMembers: [], files: [], entities: [], accounts: [], categories: [] };\n\nasync function loadDropdowns() {\n    try {\n        const [teamMembers, users, files, entities, accounts, categories] = await Promise.all([\n            fetchAllPaged(`${BASE_URL}\/user\/agent-list`, j => j?.data?.data || j?.data || [], 'page', 'limit'),\n            fetchAllPaged(`${BASE_URL}\/user\/qc-dept-list`, j => j?.data?.data || j?.data || [], 'page', 'limit'),\n            fetchAllPaged(ENDPOINTS.FILES, j => j?.data?.data, 'page', 'limit'),\n            fetchAllPaged(ENDPOINTS.ENTITIES, j => j?.data?.data, 'page', 'limit'),\n            fetch(ENDPOINTS.ACCOUNTS, { headers: getHeaders() }).then(r => r.json()).then(j => Array.isArray(j) ? j : (j?.data || [])),\n            fetchAllPaged(ENDPOINTS.CATEGORIES, j => {\n                if (Array.isArray(j)) return j;\n                if (Array.isArray(j?.data)) return j.data;\n                return j?.data?.data || [];\n            }, 'page', 'limit')\n        ]);\n\n        dropDownData.teamMembers = Array.isArray(teamMembers) ? teamMembers : [];\n        dropDownData.users = Array.isArray(users) ? users : [];\n        dropDownData.files = Array.isArray(files) ? files : [];\n        dropDownData.entities = Array.isArray(entities) ? entities : [];\n        dropDownData.accounts = Array.isArray(accounts) ? accounts : [];\n        dropDownData.categories = Array.isArray(categories) ? categories : [];\n\n        renderUI();\n    } catch (err) {\n        console.error('Dropdown load error:', err);\n    }\n}\n\nfunction renderSelect(label, selectId, data, labelKey, valueKey = 'id', multi = false) {\n    const optionsData = (data || []).map(item => ({ _val: item[valueKey] ?? '', _label: item[labelKey] ?? '' }));\n    const optionsHtml = optionsData.map((o, i) =>\n        `<div class=\"custom-select-option\" data-value=\"${o._val}\" onclick=\"csSelect('${selectId}', '${o._val.toString().replace(\/'\/g, \"\\\\'\")}', this, ${multi})\">\n                <div class=\"cs-checkbox\"><\/div>\n                <span class=\"opt-label\">${o._label}<\/span>\n            <\/div>`\n    ).join('');\n    return `\n            <div class=\"form-group\">\n                <label>${label}<\/label>\n                <div class=\"custom-select-wrapper${multi ? ' multi' : ''}\" id=\"csWrapper_${selectId}\">\n                    <input type=\"hidden\" id=\"${selectId}\" value=\"\">\n                    <div class=\"custom-select-trigger placeholder-shown\" onclick=\"csTriggerClick('${selectId}', event)\">\n                        <div class=\"cs-label\">\n                            <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                        <\/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\"\/><\/svg>\n                    <\/div>\n                    <div class=\"custom-select-dropdown\" id=\"csDrop_${selectId}\">\n                        <div class=\"custom-select-options\">\n                            ${optionsHtml}\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        `;\n}\n\nfunction renderUI() {\n    const form = document.getElementById('filterForm');\n    form.innerHTML = `\n        ${renderSelect('Assigned to', 'filterAssignedTo', dropDownData.teamMembers, 'pesudo_name', 'id', true)}\n        ${renderSelect('Qc Assigned to', 'filterQcAssignedTo', dropDownData.users, 'pesudo_name', 'pesudo_name', true)}\n        ${renderSelect('File Name', 'filterFileName', dropDownData.files, 'file_name', 'file_name', true)}\n        ${renderSelect('Account', 'filterAccount', dropDownData.accounts, 'name', 'id', true)}\n        ${renderSelect('Entity', 'filterEntity', dropDownData.entities, 'entity', 'id', true)}\n        ${renderSelect('Category', 'filterCategory', dropDownData.categories, 'category', 'id', true)}\n        <div class=\"form-group\">\n            <label>Status<\/label>\n            <div class=\"custom-select-wrapper\" id=\"csWrapper_filterStatus\">\n                <input type=\"hidden\" id=\"filterStatus\" value=\"\">\n                <div class=\"custom-select-trigger\" tabindex=\"0\" onclick=\"csToggle('filterStatus', event)\" onkeydown=\"csKeyDown(event, 'filterStatus')\">\n                    <span class=\"cs-label\">All<\/span>\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\"\/><\/svg>\n                <\/div>\n                <div class=\"custom-select-dropdown\" id=\"csDrop_filterStatus\">\n                    <div class=\"custom-select-options\">\n                        <div class=\"custom-select-option selected\" data-value=\"\" onclick=\"csSelect('filterStatus', '', this, false)\"><span class=\"opt-label\">All<\/span><\/div>\n                        <div class=\"custom-select-option\" data-value=\"submitted\" onclick=\"csSelect('filterStatus', 'submitted', this, false)\"><span class=\"opt-label\">Submitted<\/span><\/div>\n                        <div class=\"custom-select-option\" data-value=\"un_submitted\" onclick=\"csSelect('filterStatus', 'un_submitted', this, false)\"><span class=\"opt-label\">Un Submitted<\/span><\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        <div class=\"form-group\"><label>Select Date<\/label>\n            <div class=\"date-wrapper\" id=\"dpWrapperAssigned\">\n                <input type=\"text\" id=\"filterDate\" placeholder=\"Select Date range\" readonly onclick=\"toggleDatePicker(event,'assigned')\">\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\"\/>\n                    <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/>\n                    <line x1=\"8\"  y1=\"2\" x2=\"8\"  y2=\"6\"\/>\n                    <line x1=\"3\"  y1=\"10\" x2=\"21\" y2=\"10\"\/>\n                <\/svg>\n                <div class=\"dp-backdrop\" id=\"dpBackdropAssigned\" onclick=\"closeDatePicker('assigned')\"><\/div>\n                <div class=\"dp-dropdown\" id=\"dpDropdownAssigned\">\n                    <div class=\"dp-presets\">\n                        <div class=\"dp-preset-item active\" data-preset=\"today\"     onclick=\"selectPreset(event,'today','assigned')\">Today<\/div>\n                        <div class=\"dp-preset-item\"       data-preset=\"yesterday\"  onclick=\"selectPreset(event,'yesterday','assigned')\">Yesterday<\/div>\n                        <div class=\"dp-preset-item\"       data-preset=\"last7\"      onclick=\"selectPreset(event,'last7','assigned')\">Last 7 Days<\/div>\n                        <div class=\"dp-preset-item\"       data-preset=\"last30\"     onclick=\"selectPreset(event,'last30','assigned')\">Last 30 Days<\/div>\n                        <div class=\"dp-preset-item\"       data-preset=\"thisMonth\"  onclick=\"selectPreset(event,'thisMonth','assigned')\">This Month<\/div>\n                        <div class=\"dp-preset-item\"       data-preset=\"lastMonth\"  onclick=\"selectPreset(event,'lastMonth','assigned')\">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,'assigned')\">&#8249;<\/button>\n                                    <span class=\"dp-cal-title\" id=\"dpCalTitleAssigned\"><\/span>\n                                    <button class=\"dp-nav-btn dp-nav-hidden\">&#8250;<\/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=\"dpDaysAssigned\"><\/div>\n                            <\/div>\n                            <div class=\"dp-calendar\">\n                                <div class=\"dp-cal-header\">\n                                    <button class=\"dp-nav-btn dp-nav-hidden\">&#8249;<\/button>\n                                    <span class=\"dp-cal-title\" id=\"dpCalTitleAssigned2\"><\/span>\n                                    <button class=\"dp-nav-btn\" onclick=\"dpChangeMonth(event,1,'assigned')\">&#8250;<\/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=\"dpDaysAssigned2\"><\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"dp-footer\">\n                            <div class=\"dp-range-display\" id=\"dpRangeDisplayAssigned\">Select Date Range<\/div>\n                            <div class=\"dp-footer-btns\">\n                                <button class=\"dp-btn-clear\" onclick=\"dpClear(event,'assigned')\">Cancel<\/button>\n                                <button class=\"dp-btn-apply\" onclick=\"dpApply(event,'assigned')\">Apply<\/button>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    `;\n}\n\nfunction 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\nfunction csTriggerClick(selectId, e) {\n    e.stopPropagation();\n    csToggle(selectId, e);\n}\n\nfunction 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\nfunction csFilter(selectId, query) {\n    csIntegratedFilter(selectId, query);\n}\n\nfunction 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\nfunction 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\nfunction 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\nfunction 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        \/\/ If trigger has an integrated search input, restore it; otherwise show option label\n        const placeholderLabel = wrapper.querySelector('.placeholder-option .opt-label');\n        const hadIntegratedInput = !!document.getElementById('csInput_' + selectId);\n        if (hadIntegratedInput) {\n            const phText = placeholderLabel ? placeholderLabel.textContent.trim() : '';\n            labelEl.innerHTML = `<input type=\"text\" class=\"cs-search-input\" id=\"csInput_${selectId}\" placeholder=\"${phText}\" 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        applyFilters();\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        let values = input.value ? input.value.split(',') : [];\n        const idx = values.indexOf(value);\n        if (idx > -1) {\n            values.splice(idx, 1);\n            optionEl.classList.remove('selected');\n        } else {\n            values.push(value);\n            optionEl.classList.add('selected');\n        }\n        input.value = values.join(',');\n\n        const placeholderLabel = wrapper.querySelector('.placeholder-option .opt-label');\n        const phText = placeholderLabel ? placeholderLabel.textContent.trim() : '';\n\n        if (values.length === 0) {\n            labelEl.innerHTML = `<input type=\"text\" class=\"cs-search-input\" id=\"csInput_${selectId}\" placeholder=\"${phText}\" 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    applyFilters();\n}\n\nfunction 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\/\/ Close custom selects when clicking outside\ndocument.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\/\/ Validates a date string is in YYYY-MM-DD format\nfunction isValidISODate(str) {\n    return \/^\\d{4}-\\d{2}-\\d{2}$\/.test(str.trim());\n}\n\n\/\/ Formats the dates filter value for the API.\nfunction formatDatesParam(rawValue) {\n    if (!rawValue) return '';\n    const val = rawValue.trim();\n\n    if (val.includes(' - ')) {\n        const parts = val.split(' - ');\n        if (parts.length === 2 && isValidISODate(parts[0]) && isValidISODate(parts[1])) {\n            return `${parts[0].trim()} - ${parts[1].trim()}`;\n        }\n        return '';\n    }\n\n    if (val.includes(' to ')) {\n        const parts = val.split(' to ');\n        if (parts.length === 2 && isValidISODate(parts[0]) && isValidISODate(parts[1])) {\n            return `${parts[0].trim()} - ${parts[1].trim()}`;\n        }\n        return '';\n    }\n\n    if (isValidISODate(val)) {\n        return val;\n    }\n\n    return '';\n}\n\n\/\/  FETCH MAIN TABLE DATA\nasync function fetchData(page = 1) {\n    currentPage = page;\n    showLoading();\n\n    const perPage     = (document.getElementById('filterPerPage') ? document.getElementById('filterPerPage').value : '') || '25';\n    const status      = document.getElementById('filterStatus') ? document.getElementById('filterStatus').value : '';\n    const assignedTo  = document.getElementById('filterAssignedTo') ? document.getElementById('filterAssignedTo').value : '';\n    const qcAssigned  = document.getElementById('filterQcAssignedTo') ? document.getElementById('filterQcAssignedTo').value : '';\n    const fileName    = document.getElementById('filterFileName') ? document.getElementById('filterFileName').value : '';\n    const account     = document.getElementById('filterAccount') ? document.getElementById('filterAccount').value : '';\n    const entity      = document.getElementById('filterEntity') ? document.getElementById('filterEntity').value : '';\n    const category    = document.getElementById('filterCategory') ? document.getElementById('filterCategory').value : '';\n    const date        = document.getElementById('filterDate') ? document.getElementById('filterDate').value : '';\n\n    const params = new URLSearchParams();\n    if (status)     params.set('status',      status);\n    if (page)       params.set('page',         page);\n    if (perPage)    params.set('perPage',       perPage);\n    if (assignedTo) params.set('assigned_to',  assignedTo);\n    if (qcAssigned) params.set('qc_assign_to', qcAssigned);\n    if (fileName)   params.set('file_name',    fileName);\n    if (account)    params.set('account_id',   account);\n    if (entity)     params.set('entity_id',    entity);\n    if (category)   params.set('category_id',  category);\n    if (date) {\n        const datesParam = formatDatesParam(date);\n        if (datesParam) params.set('dates', datesParam);\n    }\n\n    try {\n        const res    = await fetch(`${ENDPOINTS.WORK_QC}?${params}`, { headers: getHeaders() });\n        const result = await res.json();\n\n        if (result.code === 200 || result.status === 'success') {\n            const rows    = result?.data?.rows || result?.data?.data || [];\n            const meta    = result?.data;\n            const total   = meta?.total || 0;\n            const pgCount = meta?.totalPages || meta?.pages || Math.ceil(total \/ parseInt(perPage)) || 1;\n            \/\/ PHP API: stats[] parallel to rows at root; Node: data.stats[] or per-row error_stats\n            const rootStats = result?.stats || result?.data?.stats || [];\n\n            totalCount = total;\n            totalPages = pgCount;\n\n            renderTable(rows, rootStats);\n            renderPagination(total, parseInt(perPage));\n        } else {\n            showEmpty('Failed to load data. Please try again.');\n        }\n    } catch (err) {\n        console.error('Fetch error:', err);\n        showEmpty('Network error. Please check your connection.');\n    }\n}\n\n\/\/ RENDER TABLE\nfunction renderTable(rows, rootStats = []) {\n    const tbody = document.getElementById('tableBody');\n    tbody.innerHTML = '';\n\n    if (!rows || rows.length === 0) {\n        showEmpty('No records found.');\n        return;\n    }\n\n    const { role, department } = getUserInfo();\n    const isAdmin = isAdminRole(role);\n    const isQC = isQcDepartment(department);\n    const canUnSubmit = isAssistantManagerOrTeamLeadI(role);\n\n    rows.forEach((item, index) => {\n        const status        = (item.status || '').toLowerCase().trim();\n        const isSubmitted   = status === 'submitted' || hasQcSubmitDos(item);\n        const isPending     = status === 'pending';\n        const badgeClass    = isSubmitted ? 'badge-submitted' : (status === 'pending' ? 'badge-pending' : 'badge-not-submitted');\n        const badgeLabel    = isSubmitted ? 'Submitted' : (status === 'pending' ? 'Pending' : 'Not Submitted');\n        const assignmentId  = Number(\n            item.work_assignment_id ??\n            item.work_assign_id ??\n            item.assignment_id ??\n            item.workAssignmentId ??\n            item?.work_assignment?.id ??\n            item.id ??\n            0\n        ) || 0;\n\n        const errStats = resolveErrorStats(item, index, rootStats);\n\n        \/\/ PHP listworkassigned\/list.blade.php action column\n        const qcSubmitted = hasQcSubmitDos(item);\n        const showEdit = isAdmin && !isQC && (isSubmitted || qcSubmitted);\n        const showUnSubmit = qcSubmitted && canUnSubmit;\n        const showAddUser = (isAdmin || isQC) && isPending && !qcSubmitted;\n\n        const editBtn = showEdit ? `\n            <button class=\"icon-btn\" title=\"Edit\" onclick=\"handleEdit(${assignmentId}, true)\">\n                <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"\/>\n                    <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"\/>\n                <\/svg>\n            <\/button>` : '';\n\n        const unSubmitBtn = showUnSubmit ? `\n            <button class=\"icon-btn\" title=\"Un Submit\" onclick=\"handleUnSubmit(${assignmentId}, this)\">\n                <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <polyline points=\"3 6 5 6 21 6\"\/>\n                    <path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"\/>\n                    <path d=\"M10 11v6\"\/><path d=\"M14 11v6\"\/>\n                    <path d=\"M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2\"\/>\n                <\/svg>\n            <\/button>` : '';\n\n        const addUserBtn = showAddUser ? `\n            <button class=\"icon-btn\" title=\"Add Error\" onclick=\"handleAddUser(${assignmentId})\">\n                <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"\/>\n                    <circle cx=\"12\" cy=\"7\" r=\"4\"\/>\n                    <line x1=\"19\" y1=\"8\" x2=\"19\" y2=\"14\"\/>\n                    <line x1=\"22\" y1=\"11\" x2=\"16\" y2=\"11\"\/>\n                <\/svg>\n            <\/button>` : '';\n\n        const tr = document.createElement('tr');\n        tr.innerHTML = `\n            <td>${fmtDate(item.qc_assign_date)}<\/td>\n            <td>${item.assigned_to_name || '-'}<\/td>\n            <td>${item.qc_assigned_to_name || '-'}<\/td>\n            <td>${item.file_name || '-'}<\/td>\n            <td>${item.account_name || '-'}<\/td>\n            <td>${item.entity_name || '-'}<\/td>\n            <td>${item.category_name || '-'}<\/td>\n            <td>${item.dos_assigned ?? '-'}<\/td>\n            <td>${item.dos_completed ?? '-'}<\/td>\n            <td>${item.dos_assigned ?? '-'}<\/td>\n            <td>${item.qc_dos_completed ?? 0}<\/td>\n            <td>${fmtQcHours(item.qc_assigned_hours)}<\/td>\n            <td>${fmtDate(item.submited_at)}<\/td>\n            <td><span class=\"status-badge ${badgeClass}\">${badgeLabel}<\/span><\/td>\n            <td>\n                <div style=\"display:flex; flex-direction:column; gap:2px;\">\n                    <button class=\"icon-btn\" title=\"View\" onclick=\"handleView(${assignmentId})\" style=\"padding:0; width:fit-content;\">\n                        <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                            <path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"\/>\n                            <circle cx=\"12\" cy=\"12\" r=\"3\"\/>\n                        <\/svg>\n                    <\/button>\n                    ${formatErrorStatsHtml(errStats)}\n                <\/div>\n            <\/td>\n            <td>\n                <div class=\"action-icons\">\n                    ${editBtn}\n                    ${unSubmitBtn}\n                    ${addUserBtn}\n                <\/div>\n            <\/td>`;\n        tbody.appendChild(tr);\n    });\n}\n\nfunction showLoading() {\n    document.getElementById('tableBody').innerHTML =\n        '<tr class=\"loading-row\"><td colspan=\"16\"><span class=\"spinner\"><\/span> Loading...<\/td><\/tr>';\n}\n\nfunction showEmpty(msg) {\n    document.getElementById('tableBody').innerHTML =\n        `<tr class=\"empty-row\"><td colspan=\"16\">${msg}<\/td><\/tr>`;\n    document.getElementById('totalCount').textContent = '(0)';\n    document.getElementById('entryInfo').textContent = 'Showing 0 to 0 of 0 entries';\n    document.getElementById('pageNumbers').innerHTML = '';\n}\n\nfunction fmtDate(val) {\n    if (!val) return '-';\n    const d = new Date(val);\n    if (isNaN(d)) return val;\n    return d.toISOString().split('T')[0];\n}\n\nfunction fmtQcHours(val) {\n    if (val === null || val === undefined || val === '') return '-';\n    const n = parseFloat(val);\n    return isNaN(n) ? String(val) : n.toFixed(2);\n}\n\n\/\/ RENDER PAGINATION\nfunction renderPagination(total, perPage) {\n    const pages   = Math.max(1, Math.ceil(total \/ perPage));\n    totalPages    = pages;\n\n    document.getElementById('totalCount').textContent = `(${total})`;\n\n    \/\/ Entry info\n    const start = total === 0 ? 0 : ((currentPage - 1) * perPage) + 1;\n    const end   = Math.min(currentPage * perPage, total);\n    document.getElementById('entryInfo').textContent = `Showing ${start} to ${end} of ${total} entries`;\n\n    \/\/ Prev \/ Next\n    const prevBtn = document.getElementById('prevBtn');\n    const nextBtn = document.getElementById('nextBtn');\n    prevBtn.className = currentPage === 1 ? 'nav-btn disabled' : 'nav-btn';\n    nextBtn.className = currentPage === pages ? 'nav-btn disabled' : 'nav-btn';\n    prevBtn.onclick = () => { if (currentPage > 1) fetchData(currentPage - 1); };\n    nextBtn.onclick = () => { if (currentPage < pages) fetchData(currentPage + 1); };\n\n    \/\/ Page numbers with ellipsis\n    const container = document.getElementById('pageNumbers');\n    container.innerHTML = '';\n\n    let pagesToShow = [];\n    if (pages <= 7) {\n        for (let i = 1; i <= pages; i++) pagesToShow.push(i);\n    } else {\n        pagesToShow.push(1);\n        if (currentPage > 3) pagesToShow.push('...');\n        let s = Math.max(2, currentPage - 1);\n        let e = Math.min(pages - 1, currentPage + 1);\n        if (currentPage <= 3) e = Math.min(5, pages - 1);\n        if (currentPage >= pages - 2) s = Math.max(2, pages - 4);\n        for (let i = s; i <= e; i++) pagesToShow.push(i);\n        if (currentPage < pages - 2) pagesToShow.push('...');\n        if (!pagesToShow.includes(pages)) pagesToShow.push(pages);\n    }\n\n    pagesToShow.forEach(p => {\n        if (p === '...') {\n            const span = document.createElement('span');\n            span.className = 'dots';\n            span.textContent = '...';\n            container.appendChild(span);\n        } else {\n            const span = document.createElement('span');\n            span.className = p === currentPage ? 'page-num active' : 'page-num';\n            span.textContent = p;\n            span.onclick = () => fetchData(p);\n            container.appendChild(span);\n        }\n    });\n}\n\n\/\/FILTER \/ RESET \/ CSV\nfunction applyFilters() { fetchData(1); }\n\nfunction resetFilters() {\n    const selectIds = ['filterAssignedTo', 'filterQcAssignedTo', 'filterFileName', 'filterEntity', 'filterAccount', 'filterCategory', 'filterStatus'];\n    selectIds.forEach(id => {\n        const el = document.getElementById(id);\n        if (el) el.value = '';\n\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            const placeholder = wrapper.querySelector('.placeholder-option');\n            if (id === 'filterStatus') {\n                \/\/ Reset status to 'All' (default)\n                wrapper.querySelectorAll('.custom-select-option').forEach(o => o.classList.remove('selected'));\n                const allOpt = wrapper.querySelector('.custom-select-option[data-value=\"\"]');\n                if (allOpt) allOpt.classList.add('selected');\n                labelEl.textContent = 'All';\n                trigger.classList.remove('placeholder-shown');\n            } else {\n                const phText = placeholder ? placeholder.querySelector('.opt-label').textContent.trim() : '';\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=\"${phText}\" 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\n    const dateEl = document.getElementById('filterDate');\n    if (dateEl) dateEl.value = '';\n\n    if (dpState && dpState['assigned']) {\n        dpState['assigned'].startDate = null;\n        dpState['assigned'].endDate = null;\n        dpState['assigned'].hoverDate = null;\n        dpState['assigned'].activePreset = null;\n        dpState['assigned'].selectedDate = null;\n        dpUpdateFooterRange('assigned');\n        dpRenderCalendar('assigned');\n    }\n\n    const perPageEl = document.getElementById('filterPerPage');\n    if (perPageEl) perPageEl.value = '';\n\n    currentPage = 1;\n    fetchData(1);\n}\n\nasync function downloadCSV() {\n    const btn = document.querySelector('.btn-download');\n    if (btn) { btn.disabled = true; btn.textContent = 'Downloading...'; }\n\n    try {\n        \/\/ Collect current filter values\n        const status     = document.getElementById('filterStatus')     ? document.getElementById('filterStatus').value     : '';\n        const assignedTo = document.getElementById('filterAssignedTo') ? document.getElementById('filterAssignedTo').value  : '';\n        const qcAssigned = document.getElementById('filterQcAssignedTo') ? document.getElementById('filterQcAssignedTo').value : '';\n        const fileName   = document.getElementById('filterFileName')   ? document.getElementById('filterFileName').value    : '';\n        const account    = document.getElementById('filterAccount')    ? document.getElementById('filterAccount').value     : '';\n        const entity     = document.getElementById('filterEntity')     ? document.getElementById('filterEntity').value      : '';\n        const category   = document.getElementById('filterCategory')   ? document.getElementById('filterCategory').value    : '';\n        const date       = document.getElementById('filterDate')       ? document.getElementById('filterDate').value        : '';\n\n        \/\/ Build base params \u2014 always use a large perPage to minimise API calls,\n        \/\/ and never use the table's current perPage so ALL records are fetched.\n        const CSV_PER_PAGE = 1000;\n        const paramsFirst = new URLSearchParams();\n        if (status)     paramsFirst.set('status',      status);\n        if (assignedTo) paramsFirst.set('assigned_to', assignedTo);\n        if (qcAssigned) paramsFirst.set('qc_assign_to',qcAssigned);\n        if (fileName)   paramsFirst.set('file_name',   fileName);\n        if (account)    paramsFirst.set('account_id',  account);\n        if (entity)     paramsFirst.set('entity_id',   entity);\n        if (category)   paramsFirst.set('category_id', category);\n        if (date) { const dp = formatDatesParam(date); if (dp) paramsFirst.set('dates', dp); }\n        paramsFirst.set('page',    1);\n        paramsFirst.set('perPage', CSV_PER_PAGE);\n\n        \/\/ Fetch page 1 to get total record count and first batch of rows\n        const firstRes  = await fetch(`${ENDPOINTS.WORK_QC}?${paramsFirst}`, { headers: getHeaders() });\n        const firstJson = await firstRes.json();\n\n        const meta      = firstJson?.data;\n        const totalRecs = meta?.total || 0;\n        const totalPgs  = meta?.totalPages || meta?.pages || Math.ceil(totalRecs \/ CSV_PER_PAGE) || 1;\n        let allRows     = meta?.rows || (Array.isArray(meta?.data) ? meta.data : []);\n\n        \/\/ Fetch ALL remaining pages sequentially to guarantee no data is missed\n        if (totalPgs > 1) {\n            const extraReqs = [];\n            for (let p = 2; p <= totalPgs; p++) {\n                const pParams = new URLSearchParams(paramsFirst);\n                pParams.set('page', p);\n                extraReqs.push(\n                    fetch(`${ENDPOINTS.WORK_QC}?${pParams}`, { headers: getHeaders() })\n                        .then(r => r.json())\n                        .catch(() => null)\n                );\n            }\n            const extraPages = await Promise.all(extraReqs);\n            extraPages.forEach(pg => {\n                if (pg) {\n                    const pageRows = pg?.data?.rows || (Array.isArray(pg?.data?.data) ? pg.data.data : []);\n                    allRows = allRows.concat(pageRows);\n                }\n            });\n        }\n\n        \/\/ Build CSV\n        const csvHeaders = [\n            '\"ASSIGNED DATE\"',\n            '\"ASSIGNED TO\"',\n            '\"QC ASSIGNED TO\"',\n            '\"FILE NAME\"',\n            '\"RECEIVED ON\"',\n            '\"INSURANCE\"',\n            '\"ACCOUNT\"',\n            '\"ENTITY\"',\n            '\"CATEGORY\"',\n            '\"DOS ASSIGNED\"',\n            '\"DOS COMPLETED\"',\n            '\"HRS_COMPLETED\"',\n            '\"DOS ASSIGNED QC\"',\n            '\"DOS COMPLETED QC\"',\n            '\"HRS_COMPLETED_QC\"',\n            '\"SUBMITTED AT\"',\n            '\"STATUS\"',\n            '\"ERRORS MI CR ZT\"'\n        ].join(',');\n\n        const csvLines = [csvHeaders];\n\n        allRows.forEach((item, index) => {\n            const status      = (item.status || '').toLowerCase();\n            const isSubmitted = status === 'submitted';\n            const isPending   = status === 'pending';\n            const badgeLabel  = isSubmitted ? 'Submitted' : isPending ? 'Pending' : 'Not Submitted';\n            const errStats    = resolveErrorStats(item, index, []);\n\n            const row = [\n                `\"${fmtDate(item.assigned_date)}\"`,\n                `\"${item.assigned_to_name    || ''}\"`,\n                `\"${item.qc_assigned_to_name || ''}\"`,\n                `\"${item.file_name           || ''}\"`,\n                `\"${fmtDate(item.received_on)}\"`,\n                `\"${item.insurance_name      || ''}\"`,\n                `\"${item.account_name        || ''}\"`,\n                `\"${item.entity_name         || ''}\"`,\n                `\"${item.category_name       || ''}\"`,\n                `\"${item.dos_assigned        ?? ''}\"`,\n                `\"${item.dos_completed       ?? ''}\"`,\n                `\"${item.hrs_completed       ?? ''}\"`,\n                `\"${item.dos_assigned        ?? ''}\"`,\n                `\"${item.qc_dos_completed    ?? 0}\"`,\n                `\"${fmtQcHours(item.qc_assigned_hours)}\"`,\n                `\"${fmtDate(item.submited_at)}\"`,\n                `\"${badgeLabel}\"`,\n                `\"MI : ${errStats.minor} CR : ${errStats.critical} ZT : ${errStats.zeroTolerence}\"`\n            ].join(',');\n            csvLines.push(row);\n        });\n\n        const blob = new Blob([csvLines.join('\\n')], { type: 'text\/csv;charset=utf-8;' });\n        const url  = URL.createObjectURL(blob);\n        const a    = document.createElement('a');\n        a.href     = url;\n        a.download = 'Subitted Work Assignment QC - Sample (1).csv';\n        document.body.appendChild(a);\n        a.click();\n        document.body.removeChild(a);\n        URL.revokeObjectURL(url);\n    } catch (err) {\n        console.error('CSV download error:', err);\n        alert('Failed to download CSV. Please try again.');\n    } finally {\n        if (btn) { btn.disabled = false; btn.textContent = '+ Download CSV'; }\n    }\n}\n\nfunction handleEdit(workAssignmentId, readonly) {\n    const { department } = getUserInfo();\n    if (isQcDepartment(department)) {\n        alert('You do not have permission to edit submitted QC assignments.');\n        return;\n    }\n    const roParam = readonly ? '&readonly=1' : '';\n    window.location.href = `https:\/\/ph-portal-v2.zyneventures.com\/index.php\/edit-error\/?work_assignment_id=${workAssignmentId}${roParam}`;\n}\n\n\/** PHP listworkassigned\/un-submit \u2192 POST work_assignment_assigned_qc\/un-submit *\/\nasync function handleUnSubmit(workAssignmentId, btnEl) {\n    if (!isAssistantManagerOrTeamLeadI(getUserInfo().role)) {\n        alert('You do not have permission to un-submit QC work.');\n        return;\n    }\n    if (!confirm('Are you sure you want to un-submit this QC assignment?')) return;\n\n    const safeId = Number(workAssignmentId) || 0;\n    if (!safeId) return;\n\n    if (btnEl) {\n        btnEl.disabled = true;\n    }\n\n    try {\n        const res = await fetch(ENDPOINTS.UNSUBMIT_QC, {\n            method: 'POST',\n            headers: getHeaders(),\n            body: JSON.stringify({ work_assignment_id: safeId })\n        });\n        const json = await res.json();\n\n        if (json.status === 'success' || json.code === 200) {\n            fetchData(currentPage);\n        } else {\n            alert(json.errors || json.messages?.[0] || 'Failed to un-submit QC assignment.');\n            if (btnEl) btnEl.disabled = false;\n        }\n    } catch (err) {\n        console.error('Un-submit QC error:', err);\n        alert('An error occurred while un-submitting.');\n        if (btnEl) btnEl.disabled = false;\n    }\n}\n\nasync function handleAddUser(workAssignmentId) {\n    const safeId = Number(workAssignmentId) || 0;\n    if (safeId) {\n        localStorage.setItem('ADD_ERROR_WORK_ASSIGNMENT_ID', String(safeId));\n    }\n    try {\n        await fetch(ENDPOINTS.GET_WORK_ASSIGNMENT_ERROR(safeId), { headers: getHeaders() });\n    } catch (e) {\n        console.warn('GET work assignment error fetch failed:', e);\n    }\n    window.location.href = `https:\/\/ph-portal-v2.zyneventures.com\/index.php\/add-error\/?work_assignment_id=${safeId}`;\n}\n\nfunction handleView(workAssignmentId) {\n    const safeId = Number(workAssignmentId) || 0;\n    if (safeId) {\n        localStorage.setItem('VIEW_ERROR_WORK_ASSIGNMENT_ID', String(safeId));\n    }\n    window.location.href = `https:\/\/ph-portal-v2.zyneventures.com\/index.php\/view-error\/`;\n}\n\n\/\/ \u2500\u2500 CUSTOM DATE PICKER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\nconst dpState = {\n    assigned: { viewYear: null, viewMonth: null, startDate: null, endDate: null, hoverDate: null, selectedDate: null, activePreset: null }\n};\n\nconst DP_IDS = {\n    assigned: { dropdown: 'dpDropdownAssigned', backdrop: 'dpBackdropAssigned', title: 'dpCalTitleAssigned', days: 'dpDaysAssigned', title2: 'dpCalTitleAssigned2', days2: 'dpDaysAssigned2', display: 'filterDate' }\n};\n\nconst DP_MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];\n\nfunction dpToday() { const d = new Date(); d.setHours(0,0,0,0); return d; }\n\nfunction dpFmtISO(d) {\n    if (!d) return '';\n    const dd = String(d.getDate()).padStart(2,'0');\n    const mm = String(d.getMonth()+1).padStart(2,'0');\n    return `${d.getFullYear()}-${mm}-${dd}`;\n}\n\nfunction dpSameDay(a, b) {\n    if (!a || !b) return false;\n    return a.getFullYear()===b.getFullYear() && a.getMonth()===b.getMonth() && a.getDate()===b.getDate();\n}\n\nfunction dpRenderCalendar(inst) {\n    const s = dpState[inst];\n    const ids = DP_IDS[inst];\n    let y2 = s.viewYear, m2 = s.viewMonth + 1;\n    if (m2 > 11) { m2 = 0; y2++; }\n    document.getElementById(ids.title).textContent  = `${DP_MONTHS[s.viewMonth]} ${s.viewYear}`;\n    document.getElementById(ids.title2).textContent = `${DP_MONTHS[m2]} ${y2}`;\n    document.getElementById(ids.days).innerHTML  = dpBuildDays(s.viewYear, s.viewMonth, s, inst);\n    document.getElementById(ids.days2).innerHTML = dpBuildDays(y2, m2, s, inst);\n}\n\nfunction dpBuildDays(year, month, s, inst) {\n    const today = dpToday();\n    const startDay = new Date(year, month, 1).getDay();\n    const daysInMonth = new Date(year, month + 1, 0).getDate();\n    let html = '';\n    for (let i = 0; i < startDay; i++) html += `<div class=\"dp-day other-month\"><\/div>`;\n    for (let d = 1; d <= daysInMonth; d++) {\n        const cur = new Date(year, month, d);\n        let cls = 'dp-day';\n        if (dpSameDay(cur, today)) cls += ' today';\n        const dayOfWeek = cur.getDay();\n        if (s.startDate) {\n            if (s.endDate) {\n                if (dpSameDay(cur, s.startDate)) {\n                    cls += ' selected selected-start';\n                } else if (dpSameDay(cur, s.endDate)) {\n                    cls += ' selected selected-end';\n                } else if (cur > s.startDate) {\n                    if (cur < s.endDate) {\n                        cls += ' in-range';\n                        if (dayOfWeek === 0) cls += ' row-start';\n                        if (dayOfWeek === 6) cls += ' row-end';\n                    }\n                }\n            } else if (dpSameDay(cur, s.startDate)) {\n                cls += ' selected selected-start selected-end';\n            } else if (s.hoverDate) {\n                let rS = s.startDate, rE = s.hoverDate;\n                if (rE < rS) { const t = rS; rS = rE; rE = t; }\n                if (dpSameDay(cur, s.hoverDate)) {\n                    cls += (s.hoverDate < s.startDate) ? ' hover-start hover-range' : ' hover-end hover-range';\n                } else if (cur > rS) {\n                    if (cur < rE) {\n                        cls += ' hover-range';\n                        if (dayOfWeek === 0) cls += ' row-start';\n                        if (dayOfWeek === 6) cls += ' row-end';\n                    }\n                }\n            }\n        }\n        html += `<div class=\"${cls}\" onclick=\"dpPickDay(event,${year},${month},${d},'${inst}')\" onmouseover=\"dpHoverDay('${inst}',${year},${month},${d})\">${d}<\/div>`;\n    }\n    return html;\n}\n\nfunction dpPickDay(e, y, m, d, inst) {\n    e.stopPropagation();\n    const s = dpState[inst];\n    const chosen = new Date(y, m, d);\n\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\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\nfunction 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\nfunction dpUpdateFooterRange(inst) {\n    const s = dpState[inst];\n    const el = document.getElementById(inst === 'assigned' ? 'dpRangeDisplayAssigned' : 'dpRangeDisplayAdhoc');\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\nfunction 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\nfunction 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); s.startDate = y; s.endDate = y; break; }\n        case 'last7':\n            { const y = new Date(today); y.setDate(y.getDate()-6); s.startDate = y; s.endDate = new Date(today); break; }\n        case 'last30':\n            { const y = new Date(today); y.setDate(y.getDate()-29); s.startDate = y; s.endDate = new Date(today); break; }\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\nfunction 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    closeDatePicker(inst);\n    applyFilters();\n}\n\nfunction 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\nfunction 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 && !s.startDate) {\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        document.getElementById(ids.backdrop).classList.add('show');\n        dd.classList.add('align-right');\n    }\n}\n\nfunction 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 picker when clicking outside\ndocument.addEventListener('click', function(e) {\n    const wrapEl = document.getElementById('dpWrapperAssigned');\n    if (wrapEl && !wrapEl.contains(e.target)) {\n        closeDatePicker('assigned');\n    }\n});\n\n\/\/ INIT\nloadDropdowns();\nfetchData(1);\n<\/script>\n<\/div><\/div>\n\n<\/div><\/div>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>List Work Assigned QC (0) Per Page Per Page10152550100 Clear + Download CSV Filter QC Assigned Date Assigned To QC(C) Assigned To File Name Account Entity Category DOS Assigned DOS Completed DOS Assigned(QC) DOS Completed(QC) QC Submitted HRS QC Submitted At Status Error Action Loading&#8230; \u00ab Previous Next \u00bb Showing 0 to 0 of 0&#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":"disable","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-184","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ph-portal-v2.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/184","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=184"}],"version-history":[{"count":56,"href":"https:\/\/ph-portal-v2.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/184\/revisions"}],"predecessor-version":[{"id":1254,"href":"https:\/\/ph-portal-v2.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/184\/revisions\/1254"}],"wp:attachment":[{"href":"https:\/\/ph-portal-v2.zyneventures.com\/index.php\/wp-json\/wp\/v2\/media?parent=184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}