{"id":184,"date":"2026-03-31T10:10:52","date_gmt":"2026-03-31T10:10:52","guid":{"rendered":"https:\/\/ph-portal.zyneventures.com\/?page_id=184"},"modified":"2026-03-31T11:17:34","modified_gmt":"2026-03-31T11:17:34","slug":"submitted-work-assigned-qc","status":"publish","type":"page","link":"https:\/\/ph-portal.zyneventures.com\/index.php\/submitted-work-assigned-qc\/","title":{"rendered":"Submitted Work Assigned QC"},"content":{"rendered":"<style>.kadence-column184_724d33-c6 > .kt-inside-inner-col,.kadence-column184_724d33-c6 > .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_724d33-c6 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column184_724d33-c6 > .kt-inside-inner-col{flex-direction:column;}.kadence-column184_724d33-c6 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column184_724d33-c6 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column184_724d33-c6{position:relative;}@media all and (max-width: 1024px){.kadence-column184_724d33-c6 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column184_724d33-c6 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column184_724d33-c6\"><div class=\"kt-inside-inner-col\"><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>\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 wrapper *\/\n        .select-wrapper {\n            position: relative;\n        }\n        .select-wrapper::after {\n            content: '';\n            position: absolute;\n            right: 12px;\n            top: 50%;\n            transform: translateY(-50%);\n            width: 0;\n            height: 0;\n            border-left: 5px solid transparent;\n            border-right: 5px solid transparent;\n            border-top: 5px solid #8D8C9C;\n            pointer-events: none;\n        }\n        .filter-group select,\n        .filter-group input[type=\"text\"],\n        .filter-group input[type=\"date\"] {\n            width: 100%;\n            padding: 9px 32px 9px 12px;\n            border: 1px solid #E0E0E0;\n            border-radius: 6px;\n            font-family: 'Sora', sans-serif;\n            font-size: 12px;\n            font-weight: 400;\n            color: var(--text-muted);\n            background: #fff;\n            outline: none;\n            appearance: none;\n            -webkit-appearance: none;\n            transition: border-color 0.2s;\n        }\n        \/* Hide the pseudo chevron arrow only for date wrapper *\/\n        .date-wrapper::after {\n            display: none !important;\n        }\n\n        \/* Custom Date Picker *\/\n        .date-wrapper {\n            position: relative;\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        .date-wrapper input[type=\"text\"]:focus { border-color: var(--primary-blue); }\n        .date-wrapper input[type=\"text\"]::placeholder { color: #aaa; }\n        .date-wrapper .cal-icon {\n            position: absolute;\n            right: 12px;\n            top: 50%;\n            transform: translateY(-50%);\n            pointer-events: none;\n            color: #8D8C9C;\n        }\n\n        \/* Custom Date Picker Dropdown *\/\n        .dp-dropdown {\n            display: none;\n            position: absolute;\n            top: calc(100% + 6px);\n            left: 0;\n            z-index: 2000;\n            background: #fff;\n            border: 1px solid #E0E0E0;\n            border-radius: 10px;\n            box-shadow: 0 8px 28px rgba(0,0,0,0.13);\n            flex-direction: row;\n            width: 680px;\n            max-width: calc(100vw - 24px);\n            overflow: hidden;\n        }\n        .dp-dropdown.open { display: flex; }\n        .dp-dropdown.align-right { left: auto; right: 0; }\n\n        .dp-backdrop {\n            display: none;\n            position: fixed;\n            inset: 0;\n            z-index: 1999;\n        }\n        .dp-backdrop.show { display: block; }\n\n        .dp-presets {\n            width: 100px;\n            background: #fff;\n            border-right: 1px solid #EFEFEF;\n            padding: 3px 0;\n            flex-shrink: 0;\n        }\n        .dp-preset-item {\n            padding: 8px 12px;\n            font-size: 12px;\n            color: var(--text-dark);\n            cursor: pointer;\n            transition: background 0.15s, color 0.15s;\n            white-space: nowrap;\n        }\n        .dp-preset-item:hover { background: #f4f6fb; }\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        .dp-months-row {\n            display: flex;\n            gap: 0;\n            flex: 1;\n        }\n        .dp-calendar {\n            flex: 1;\n            padding: 0 6px;\n            min-width: 0;\n        }\n        .dp-calendar + .dp-calendar {\n            border-left: 1px solid #EFEFEF;\n        }\n        .dp-cal-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 6px;\n        }\n        .dp-cal-title {\n            font-size: 13px;\n            font-weight: 500;\n            color: var(--text-dark);\n        }\n        .dp-nav-btn {\n            background: none;\n            border: none;\n            cursor: pointer;\n            color: #8D8C9C;\n            padding: 3px 7px;\n            border-radius: 4px;\n            font-size: 16px;\n            line-height: 1;\n            transition: background 0.15s, color 0.15s;\n        }\n        .dp-nav-btn:hover { background: #f0f4ff; color: var(--primary-blue); }\n        .dp-nav-btn.dp-nav-hidden { visibility: hidden; pointer-events: none; }\n        .dp-weekdays {\n            display: grid;\n            grid-template-columns: repeat(7, 1fr);\n            margin-bottom: 2px;\n        }\n        .dp-weekday {\n            text-align: center;\n            font-size: 11px;\n            font-weight: 500;\n            color: #8D8C9C;\n            padding: 2px 0;\n        }\n        .dp-days {\n            display: grid;\n            grid-template-columns: repeat(7, 1fr);\n            gap: 1px;\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        .dp-day:hover { background: #e8f1ff; color: var(--primary-blue); }\n        .dp-day.today { font-weight: 700; color: var(--primary-blue); }\n        .dp-day.selected {\n            background: var(--primary-blue);\n            color: #fff !important;\n            font-weight: 600;\n        }\n        .dp-day.other-month { color: #ccc; }\n        .dp-day.other-month:hover { background: #f5f5f5; color: #aaa; }\n        .dp-footer {\n            display: flex;\n            justify-content: flex-end;\n            gap: 8px;\n            margin-top: 8px;\n            padding-top: 8px;\n            border-top: 1px solid #EFEFEF;\n        }\n        .dp-btn-clear {\n            padding: 6px 14px;\n            border-radius: 6px;\n            font-size: 12px;\n            font-family: 'Sora', sans-serif;\n            background: #F1F3F4;\n            color: #555;\n            border: none;\n            cursor: pointer;\n            font-weight: 400;\n        }\n        .dp-btn-clear:hover { background: #e2e4e7; }\n        .dp-btn-apply {\n            padding: 6px 14px;\n            border-radius: 6px;\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: 400;\n        }\n        .dp-btn-apply:hover { background: var(--hover-blue); }\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            .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            .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            .dp-months-row { flex-direction: column; gap: 10px; }\n            .dp-calendar + .dp-calendar { border-left: none; border-top: 1px solid #EFEFEF; padding-top: 8px; }\n            .dp-calendars-wrap { padding: 6px 8px 8px; }\n            .dp-day { padding: 5px 0; font-size: 11px; }\n            .dp-footer { margin-top: 8px; padding-top: 8px; }\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            .dp-calendars-wrap { padding: 6px 6px 6px; }\n            .dp-day { font-size: 11px; padding: 4px 0; }\n            .dp-cal-title { font-size: 12px; }\n            .dp-footer { margin-top: 6px; padding-top: 6px; }\n            .dp-btn-clear, .dp-btn-apply { padding: 5px 10px; font-size: 11px; }\n        }\n        .filter-group select:focus,\n        .filter-group input:focus {\n            border-color: var(--primary-blue);\n        }\n        .filter-group select option { font-family: 'Sora', sans-serif; }\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\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\">\n    <div class=\"filter-group\">\n        <label>Assigned to<\/label>\n        <div class=\"select-wrapper\">\n            <select id=\"filterAssignedTo\">\n                <option value=\"\">All<\/option>\n            <\/select>\n        <\/div>\n    <\/div>\n    <div class=\"filter-group\">\n        <label>Qc Assigned to<\/label>\n        <div class=\"select-wrapper\">\n            <select id=\"filterQcAssignedTo\">\n                <option value=\"\">All<\/option>\n            <\/select>\n        <\/div>\n    <\/div>\n    <div class=\"filter-group\">\n        <label>File Name<\/label>\n        <div class=\"select-wrapper\">\n            <select id=\"filterFileName\">\n                <option value=\"\">All<\/option>\n            <\/select>\n        <\/div>\n    <\/div>\n    <div class=\"filter-group\">\n        <label>Account<\/label>\n        <div class=\"select-wrapper\">\n            <select id=\"filterAccount\">\n                <option value=\"\">All<\/option>\n            <\/select>\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- Filters Row 2 -->\n<div class=\"filter-row2\">\n    <div class=\"filter-group\">\n        <label>Entity<\/label>\n        <div class=\"select-wrapper\">\n            <select id=\"filterEntity\">\n                <option value=\"\">All<\/option>\n            <\/select>\n        <\/div>\n    <\/div>\n    <div class=\"filter-group\">\n        <label>Category<\/label>\n        <div class=\"select-wrapper\">\n            <select id=\"filterCategory\">\n                <option value=\"\">All<\/option>\n            <\/select>\n        <\/div>\n    <\/div>\n    <div class=\"filter-group\">\n        <label>Status<\/label>\n        <div class=\"select-wrapper\">\n            <select id=\"filterStatus\">\n                <option value=\"pending\">Pending<\/option>\n                <option value=\"submitted\">Submitted<\/option>\n                <option value=\"\">All<\/option>\n            <\/select>\n        <\/div>\n    <\/div>\n    <div class=\"filter-group\">\n        <label>Select Date<\/label>\n        <div class=\"date-wrapper select-wrapper\" id=\"dpWrapperAssigned\">\n            <input type=\"text\" id=\"filterDate\" placeholder=\"Select Date\" 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                        <button class=\"dp-btn-clear\" onclick=\"dpClear(event,'assigned')\">Clear<\/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<!-- 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        <div class=\"select-wrapper\">\n            <select id=\"filterPerPage\" style=\"padding-right:32px;\">\n                <option value=\"25\">25<\/option>\n                <option value=\"50\">50<\/option>\n                <option value=\"100\">100<\/option>\n            <\/select>\n        <\/div>\n    <\/div>\n    <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><\/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\n    const BASE_URL = 'https:\/\/api-ph-portal.zyneventures.com\/api\/v1';\n\n    const ENDPOINTS = {\n        WORK_QC:    `${BASE_URL}\/work_assignment_assigned_qc\/all-submitted`,\n        USERS:      `${BASE_URL}\/user\/all`,\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    };\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 *\/\n    const 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       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 *\/\n    let currentPage = 1;\n    let totalPages  = 1;\n    let 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 *\/\n    async 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\n    async function loadDropdowns() {\n        try {\n            const [users, files, entities, accounts, categories] = await Promise.all([\n                fetchAllPaged(ENDPOINTS.USERS, j => j?.data?.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                fetch(ENDPOINTS.CATEGORIES, { headers: getHeaders() }).then(r => r.json()).then(j => {\n                    \/\/ category API returns array directly or paginated\n                    if (Array.isArray(j)) return j;\n                    if (Array.isArray(j?.data)) return j.data;\n                    return j?.data?.data || [];\n                })\n            ]);\n\n            fillSelect('filterAssignedTo',   users,      'name', 'pesudo_name');\n            fillSelect('filterQcAssignedTo', users,      'name', 'pesudo_name');\n            fillSelect('filterFileName',     files,      'file_name', 'file_name');\n            fillSelect('filterAccount',      accounts,   'name', 'id');\n            fillSelect('filterEntity',       entities,   'entity', 'id');\n            fillSelect('filterCategory',     categories, 'category', 'id');\n\n        } catch (err) {\n            console.error('Dropdown load error:', err);\n        }\n    }\n\n    function fillSelect(selectId, data, labelKey, valueKey) {\n        const el = document.getElementById(selectId);\n        if (!el || !Array.isArray(data)) return;\n        data.forEach(item => {\n            const opt = document.createElement('option');\n            opt.value  = item[valueKey] ?? item[labelKey];\n            opt.textContent = item[labelKey] || '-';\n            el.appendChild(opt);\n        });\n    }\n\n    \/\/  FETCH MAIN TABLE DATA\n    async function fetchData(page = 1) {\n        currentPage = page;\n        showLoading();\n\n        const perPage     = document.getElementById('filterPerPage').value;\n        const status      = document.getElementById('filterStatus').value;\n        const assignedTo  = document.getElementById('filterAssignedTo').value;\n        const qcAssigned  = document.getElementById('filterQcAssignedTo').value;\n        const fileName    = document.getElementById('filterFileName').value;\n        const account     = document.getElementById('filterAccount').value;\n        const entity      = document.getElementById('filterEntity').value;\n        const category    = document.getElementById('filterCategory').value;\n        const date        = 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)       params.set('date',          date);\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\n                totalCount = total;\n                totalPages = pgCount;\n\n                renderTable(rows);\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\n    function renderTable(rows) {\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        rows.forEach(item => {\n            const status        = (item.status || '').toLowerCase();\n            const isSubmitted   = status === 'submitted';\n            const isPending     = status === 'pending';\n            const badgeClass    = isSubmitted ? 'badge-submitted' : isPending ? 'badge-pending' : 'badge-not-submitted';\n            const badgeLabel    = isSubmitted ? 'Submitted' : isPending ? '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 minor    = item.error_stats?.minor        ?? 0;\n            const critical = item.error_stats?.critical     ?? 0;\n            const zt       = item.error_stats?.zeroTolerence ?? 0;\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>${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                        <div class=\"error-stats\">\n                            <span class=\"err-mi\">Mi ${minor}<\/span>\n                            <span class=\"err-cr\">Cr ${critical}<\/span>\n                            <span class=\"err-zt\">Zt ${zt}<\/span>\n                        <\/div>\n                    <\/div>\n                <\/td>\n                <td>\n                    <div class=\"action-icons\">\n                        <button class=\"icon-btn\" title=\"Edit\" onclick=\"handleEdit(${item.id})\">\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                        <button class=\"icon-btn\" title=\"Add User\" onclick=\"handleAddUser(${item.id})\">\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                    <\/div>\n                <\/td>`;\n            tbody.appendChild(tr);\n        });\n    }\n\n    function showLoading() {\n        document.getElementById('tableBody').innerHTML =\n            '<tr class=\"loading-row\"><td colspan=\"16\"><span class=\"spinner\"><\/span> Loading...<\/td><\/tr>';\n    }\n\n    function 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\n    function 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\n    \/\/ RENDER PAGINATION\n    function 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\n    function applyFilters() { fetchData(1); }\n\n    function resetFilters() {\n        document.getElementById('filterAssignedTo').value   = '';\n        document.getElementById('filterQcAssignedTo').value = '';\n        document.getElementById('filterFileName').value     = '';\n        document.getElementById('filterAccount').value      = '';\n        document.getElementById('filterEntity').value       = '';\n        document.getElementById('filterCategory').value     = '';\n        document.getElementById('filterStatus').value       = 'pending';\n        document.getElementById('filterDate').value         = '';\n        document.getElementById('filterPerPage').value      = '25';\n        \/\/ Reset custom date picker state\n        dpState.assigned.selectedDate = null;\n        dpState.assigned.activePreset = null;\n        document.querySelectorAll('#dpDropdownAssigned .dp-preset-item').forEach(el => el.classList.remove('active'));\n        fetchData(1);\n    }\n\n    function downloadCSV() {\n        const rows = document.querySelectorAll('#mainTable tbody tr');\n        const headers = [...document.querySelectorAll('#mainTable thead th')]\n            .map(th => `\"${th.textContent.trim()}\"`)\n            .filter((_, i) => i < 15) \/\/ skip last action column\n            .join(',');\n\n        const lines = [headers];\n        rows.forEach(tr => {\n            const cells = [...tr.querySelectorAll('td')].slice(0, 15);\n            if (!cells.length) return;\n            const line = cells.map(td => `\"${td.textContent.trim().replace(\/\\n\\s+\/g, ' ')}\"`).join(',');\n            lines.push(line);\n        });\n\n        const blob = new Blob([lines.join('\\n')], { type: 'text\/csv' });\n        const url  = URL.createObjectURL(blob);\n        const a    = document.createElement('a');\n        a.href     = url;\n        a.download = 'list_work_assigned_qc.csv';\n        a.click();\n        URL.revokeObjectURL(url);\n    }\n\n    function handleEdit(id) {\n        window.location.href = `https:\/\/ph-portal.zyneventures.com\/index.php\/edit-error\/`;\n    }\n\n    function handleAddUser(id) {\n        window.location.href = `https:\/\/ph-portal.zyneventures.com\/index.php\/add-error\/`;\n    }\n\n    function 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.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\n    const dpState = {\n        assigned: { viewYear: null, viewMonth: null, selectedDate: null, activePreset: null }\n    };\n\n    const DP_IDS = {\n        assigned: { dropdown: 'dpDropdownAssigned', backdrop: 'dpBackdropAssigned', title: 'dpCalTitleAssigned', days: 'dpDaysAssigned', title2: 'dpCalTitleAssigned2', days2: 'dpDaysAssigned2', display: 'filterDate' }\n    };\n\n    const DP_MONTHS = ['January','February','March','April','May','June',\n                       'July','August','September','October','November','December'];\n\n    function dpToday() { const d = new Date(); d.setHours(0,0,0,0); return d; }\n\n    function 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\n    function dpSameDay(a, b) {\n        return a && b && a.getFullYear()===b.getFullYear() &&\n               a.getMonth()===b.getMonth() && a.getDate()===b.getDate();\n    }\n\n    function dpRenderCalendar(inst) {\n        const s = dpState[inst];\n        const ids = DP_IDS[inst];\n        let y2 = s.viewYear, m2 = s.viewMonth + 1;\n        if (m2 > 11) { m2 = 0; y2++; }\n        document.getElementById(ids.title).textContent  = `${DP_MONTHS[s.viewMonth]} ${s.viewYear}`;\n        document.getElementById(ids.title2).textContent = `${DP_MONTHS[m2]} ${y2}`;\n        document.getElementById(ids.days).innerHTML  = dpBuildDays(s.viewYear, s.viewMonth, s, inst);\n        document.getElementById(ids.days2).innerHTML = dpBuildDays(y2, m2, s, inst);\n    }\n\n    function dpBuildDays(year, month, s, inst) {\n        const today = dpToday();\n        const first = new Date(year, month, 1);\n        const startDay = first.getDay();\n        const daysInMonth = new Date(year, month + 1, 0).getDate();\n        let html = '';\n        for (let i = 0; i < startDay; i++) {\n            const prevDate = new Date(year, month, 0 - (startDay - i - 2));\n            html += `<div class=\"dp-day other-month\" onclick=\"dpPickDay(event,${prevDate.getFullYear()},${prevDate.getMonth()},${prevDate.getDate()},'${inst}')\">${prevDate.getDate()}<\/div>`;\n        }\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            if (dpSameDay(cur, s.selectedDate)) cls += ' selected';\n            html += `<div class=\"${cls}\" onclick=\"dpPickDay(event,${year},${month},${d},'${inst}')\">${d}<\/div>`;\n        }\n        const filled = startDay + daysInMonth;\n        const rem = filled % 7 === 0 ? 0 : 7 - (filled % 7);\n        for (let d = 1; d <= rem; d++) {\n            html += `<div class=\"dp-day other-month\" onclick=\"dpPickDay(event,${year},${month + 1},${d},'${inst}')\">${d}<\/div>`;\n        }\n        return html;\n    }\n\n    function dpPickDay(e, y, m, d, inst) {\n        e.stopPropagation();\n        const s = dpState[inst];\n        s.selectedDate = new Date(y, m, d);\n        s.activePreset = null;\n        document.querySelectorAll(`#${DP_IDS[inst].dropdown} .dp-preset-item`).forEach(el => el.classList.remove('active'));\n        s.viewYear = y; s.viewMonth = m;\n        dpRenderCalendar(inst);\n    }\n\n    function dpChangeMonth(e, dir, inst) {\n        e.stopPropagation();\n        const s = dpState[inst];\n        s.viewMonth += dir;\n        if (s.viewMonth > 11) { s.viewMonth = 0; s.viewYear++; }\n        if (s.viewMonth < 0)  { s.viewMonth = 11; s.viewYear--; }\n        dpRenderCalendar(inst);\n    }\n\n    function selectPreset(e, preset, inst) {\n        e.stopPropagation();\n        const s = dpState[inst];\n        const today = dpToday();\n        s.activePreset = preset;\n        const dropId = DP_IDS[inst].dropdown;\n        document.querySelectorAll(`#${dropId} .dp-preset-item`).forEach(el =>\n            el.classList.toggle('active', el.dataset.preset === preset));\n        switch (preset) {\n            case 'today':     s.selectedDate = new Date(today); break;\n            case 'yesterday': { const y = new Date(today); y.setDate(y.getDate()-1); s.selectedDate = y; break; }\n            case 'last7':     { const y = new Date(today); y.setDate(y.getDate()-6); s.selectedDate = y; break; }\n            case 'last30':    { const y = new Date(today); y.setDate(y.getDate()-29); s.selectedDate = y; break; }\n            case 'thisMonth': s.selectedDate = new Date(today.getFullYear(), today.getMonth(), 1); break;\n            case 'lastMonth': s.selectedDate = new Date(today.getFullYear(), today.getMonth()-1, 1); break;\n        }\n        s.viewYear  = s.selectedDate.getFullYear();\n        s.viewMonth = s.selectedDate.getMonth();\n        dpRenderCalendar(inst);\n    }\n\n    function dpApply(e, inst) {\n        e.stopPropagation();\n        const s = dpState[inst];\n        document.getElementById(DP_IDS[inst].display).value = s.selectedDate ? dpFmtISO(s.selectedDate) : '';\n        closeDatePicker(inst);\n    }\n\n    function dpClear(e, inst) {\n        e.stopPropagation();\n        const s = dpState[inst];\n        s.selectedDate = null;\n        s.activePreset = null;\n        document.getElementById(DP_IDS[inst].display).value = '';\n        document.querySelectorAll(`#${DP_IDS[inst].dropdown} .dp-preset-item`).forEach(el => el.classList.remove('active'));\n        dpRenderCalendar(inst);\n        closeDatePicker(inst);\n    }\n\n    function toggleDatePicker(e, inst) {\n        e.stopPropagation();\n        const ids = DP_IDS[inst];\n        const dd = document.getElementById(ids.dropdown);\n        if (dd.classList.contains('open')) {\n            closeDatePicker(inst);\n        } else {\n            const s = dpState[inst];\n            const ref = s.selectedDate || dpToday();\n            s.viewYear  = ref.getFullYear();\n            s.viewMonth = ref.getMonth();\n            if (!s.selectedDate) {\n                s.activePreset = 'today';\n                document.querySelectorAll(`#${ids.dropdown} .dp-preset-item`).forEach(el =>\n                    el.classList.toggle('active', el.dataset.preset === 'today'));\n            }\n            dpRenderCalendar(inst);\n            dd.classList.add('open');\n            document.getElementById(ids.backdrop).classList.add('show');\n            requestAnimationFrame(() => {\n                const rect = dd.getBoundingClientRect();\n                if (rect.right > window.innerWidth - 8) {\n                    dd.classList.add('align-right');\n                } else {\n                    dd.classList.remove('align-right');\n                }\n            });\n        }\n    }\n\n    function closeDatePicker(inst) {\n        const ids = DP_IDS[inst];\n        document.getElementById(ids.dropdown).classList.remove('open');\n        document.getElementById(ids.backdrop).classList.remove('show');\n    }\n\n    \/\/ Close picker when clicking outside\n    document.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\n    loadDropdowns();\n    fetchData(1);\n<\/script>\n<\/div><\/div>\n\n<\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>List Work Assigned QC (0) Assigned to All Qc Assigned to All File Name All Account All Entity All Category All Status PendingSubmittedAll Select Date Today Yesterday Last 7 Days Last 30 Days This Month Last Month &#8249; &#8250; Su Mo Tu We Th Fr Sa &#8249; &#8250; Su Mo Tu We Th Fr Sa&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_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.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/184","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/comments?post=184"}],"version-history":[{"count":3,"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/184\/revisions"}],"predecessor-version":[{"id":198,"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/184\/revisions\/198"}],"wp:attachment":[{"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/media?parent=184"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}