{"id":164,"date":"2026-03-31T07:28:36","date_gmt":"2026-03-31T07:28:36","guid":{"rendered":"https:\/\/ph-portal.zyneventures.com\/?page_id=164"},"modified":"2026-03-31T07:29:10","modified_gmt":"2026-03-31T07:29:10","slug":"revert-error-logs","status":"publish","type":"page","link":"https:\/\/ph-portal.zyneventures.com\/index.php\/revert-error-logs\/","title":{"rendered":"Revert Error Logs"},"content":{"rendered":"<style>.kadence-column164_1b20d8-66 > .kt-inside-inner-col,.kadence-column164_1b20d8-66 > .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-column164_1b20d8-66 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column164_1b20d8-66 > .kt-inside-inner-col{flex-direction:column;}.kadence-column164_1b20d8-66 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column164_1b20d8-66 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column164_1b20d8-66{position:relative;}@media all and (max-width: 1024px){.kadence-column164_1b20d8-66 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column164_1b20d8-66 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column164_1b20d8-66\"><div class=\"kt-inside-inner-col\"><style>.kb-row-layout-id164_4a9a91-17 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id164_4a9a91-17 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id164_4a9a91-17 > .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-id164_4a9a91-17 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id164_4a9a91-17 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id164_4a9a91-17 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id164_4a9a91-17 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-column164_06dad8-b8 > .kt-inside-inner-col,.kadence-column164_06dad8-b8 > .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-column164_06dad8-b8 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column164_06dad8-b8 > .kt-inside-inner-col{flex-direction:column;}.kadence-column164_06dad8-b8 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column164_06dad8-b8 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column164_06dad8-b8{position:relative;}@media all and (max-width: 1024px){.kadence-column164_06dad8-b8 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column164_06dad8-b8 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column164_06dad8-b8\"><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: #F8F9FA;\n        }\n\n        * { box-sizing: border-box; }\n\n        body {\n            font-family: 'Sora', sans-serif;\n            color: var(--text-dark);\n            line-height: 1.5;\n            background: #fff;\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            flex-wrap: wrap;\n            gap: 12px;\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.3px;\n        }\n        .count { color: var(--text-muted); font-size: 16px; font-weight: 400; }\n\n        \/* \u2500\u2500 Filter Bar \u2500\u2500 *\/\n        .filter-bar {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            margin-bottom: 20px;\n            flex-wrap: wrap;\n        }\n\n        .btn {\n            padding: 9px 22px;\n            border-radius: 6px;\n            font-size: 12px;\n            font-weight: 500;\n            cursor: pointer;\n            border: none;\n            transition: background 0.2s;\n            font-family: 'Sora', sans-serif;\n            white-space: nowrap;\n        }\n        .btn-filter   { background: var(--primary-blue); color: #fff; }\n        .btn-filter:hover  { background: var(--hover-blue); }\n        .btn-download { background: var(--primary-blue); color: #fff; }\n        .btn-download:hover { background: var(--hover-blue); }\n\n        \/* \u2500\u2500 Custom Date Picker (exact from Adhoc_Assignment.html) \u2500\u2500 *\/\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        \/* Two-month panel container *\/\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-cal-header { margin-bottom: 6px; }\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\n        \/* \u2500\u2500 Table \u2500\u2500 *\/\n        .table-wrapper {\n            overflow-x: auto;\n            border: 1px solid var(--border-color);\n            border-radius: 6px;\n            margin-top: 10px;\n        }\n        table {\n            width: 100%;\n            border-collapse: collapse;\n            font-size: 12px;\n            text-align: left;\n            min-width: 1100px;\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            white-space: nowrap;\n            letter-spacing: 0.2px;\n        }\n        tbody td {\n            padding: 11px 10px;\n            border-bottom: 1px solid var(--border-color);\n            color: var(--text-muted);\n            font-size: 12px;\n            font-weight: 400;\n            vertical-align: middle;\n        }\n        tbody tr:last-child td { border-bottom: none; }\n        tbody tr:hover { background: #fafafa; }\n\n        \/* Status badges *\/\n        .badge {\n            display: inline-block;\n            padding: 3px 10px;\n            border-radius: 20px;\n            font-size: 12px;\n            font-weight: 400;\n            white-space: nowrap;\n        }\n        .badge-accept  { background: transparent; color: var(--text-muted);}\n        .badge-pending { background: transparent; color: var(--text-muted); }\n        .badge-reject  { background: transparent; color: var(--text-muted); }\n        .badge-void    { background: transparent; color: var(--text-muted); }\n\n        \/* Error type pills *\/\n        .pill {\n            display: inline-block;\n            padding: 2px 8px;\n            border-radius: 4px;\n            font-size: 12px;\n            font-weight: 400;\n            white-space: nowrap;\n        }\n        .pill-critical { background: transparent; color: var(--text-muted); }\n        .pill-minor    { background: transparent; color: var(--text-muted); }\n        .pill-zero     { background: transparent; color: var(--text-muted); }\n\n        \/* No data row *\/\n        .no-data { text-align: center; color: var(--text-muted); padding: 40px; }\n\n        \/* Skeleton loader *\/\n        .skeleton {\n            background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);\n            background-size: 200% 100%;\n            animation: shimmer 1.2s infinite;\n            border-radius: 4px;\n            height: 14px;\n            display: inline-block;\n            width: 80%;\n        }\n        @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }\n\n        \/* \u2500\u2500 Toast \u2500\u2500 *\/\n        #toast {\n            position: fixed;\n            bottom: 30px; right: 30px;\n            background: #333; color: #fff;\n            padding: 12px 20px;\n            border-radius: 8px;\n            font-size: 13px;\n            opacity: 0;\n            pointer-events: none;\n            transition: opacity 0.3s;\n            z-index: 9999;\n        }\n        #toast.show { opacity: 1; }\n\n        \/* \u2500\u2500 Responsive \u2500\u2500 *\/\n        @media (max-width: 768px) {\n            body { padding: 16px; }\n            .filter-bar { flex-direction: column; align-items: flex-start; }\n            .header-container { flex-direction: column; align-items: flex-start; }\n            .btn { width: 100%; text-align: center; }\n        }\n    <\/style>\n\n\n<!-- Toast notification -->\n<div id=\"toast\"><\/div>\n\n<!-- Hidden date fields consumed by fetchRevertErrors() \u2014 replaces original <input type=\"date\"> pair -->\n<input type=\"hidden\" id=\"dateFrom\">\n<input type=\"hidden\" id=\"dateTo\">\n\n<!-- \u2500\u2500 Header \u2500\u2500 -->\n<div class=\"header-container\">\n    <div class=\"title-group\">\n        <h2>List View All Revert Error<\/h2>\n        <span class=\"count\" id=\"totalCount\">(0)<\/span>\n    <\/div>\n<\/div>\n\n<!-- \u2500\u2500 Filter Bar \u2500\u2500 -->\n<div class=\"filter-bar\">\n    <div class=\"date-wrapper\" id=\"dpWrapperRevert\">\n        <input type=\"text\" id=\"filterRevertDate\" placeholder=\"Select Date\" readonly onclick=\"toggleDatePicker(event,'revert')\">\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=\"dpBackdropRevert\" onclick=\"closeDatePicker('revert')\"><\/div>\n        <div class=\"dp-dropdown\" id=\"dpDropdownRevert\">\n            <div class=\"dp-presets\">\n                <div class=\"dp-preset-item active\" data-preset=\"today\"     onclick=\"selectPreset(event,'today','revert')\">Today<\/div>\n                <div class=\"dp-preset-item\"         data-preset=\"yesterday\" onclick=\"selectPreset(event,'yesterday','revert')\">Yesterday<\/div>\n                <div class=\"dp-preset-item\"         data-preset=\"last7\"     onclick=\"selectPreset(event,'last7','revert')\">Last 7 Days<\/div>\n                <div class=\"dp-preset-item\"         data-preset=\"last30\"    onclick=\"selectPreset(event,'last30','revert')\">Last 30 Days<\/div>\n                <div class=\"dp-preset-item\"         data-preset=\"thisMonth\" onclick=\"selectPreset(event,'thisMonth','revert')\">This Month<\/div>\n                <div class=\"dp-preset-item\"         data-preset=\"lastMonth\" onclick=\"selectPreset(event,'lastMonth','revert')\">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,'revert')\">&#8249;<\/button>\n                            <span class=\"dp-cal-title\" id=\"dpCalTitleRevert\"><\/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=\"dpDaysRevert\"><\/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=\"dpCalTitleRevert2\"><\/span>\n                            <button class=\"dp-nav-btn\" onclick=\"dpChangeMonth(event,1,'revert')\">&#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=\"dpDaysRevert2\"><\/div>\n                    <\/div>\n                <\/div>\n                <div class=\"dp-footer\">\n                    <button class=\"dp-btn-clear\" onclick=\"dpClear(event,'revert')\">Clear<\/button>\n                    <button class=\"dp-btn-apply\" onclick=\"dpApply(event,'revert')\">Apply<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n    <button class=\"btn btn-filter\" onclick=\"applyFilter()\">Filter<\/button>\n    <button class=\"btn btn-download\" onclick=\"downloadCSV()\">+ CSV Download<\/button>\n<\/div><br>\n\n<!-- \u2500\u2500 Table \u2500\u2500 -->\n<div class=\"table-wrapper\">\n    <table>\n        <thead>\n            <tr>\n                <th>Error Category<\/th>\n                <th>Error Count<\/th>\n                <th>Reversal Description<\/th>\n                <th>Account<\/th>\n                <th>Error Date<\/th>\n                <th>Assign To<\/th>\n                <th>QC By<\/th>\n                <th>Reversal Status<\/th>\n                <th>Submit By<\/th>\n                <th>Action By<\/th>\n            <\/tr>\n        <\/thead>\n        <tbody id=\"tableBody\">\n            <tr><td colspan=\"10\" class=\"no-data\">Loading\u2026<\/td><\/tr>\n        <\/tbody>\n    <\/table>\n<\/div>\n\n<script>\n    \/\/ ENDPOINTS \n    const BASE_URL = 'https:\/\/api-ph-portal.zyneventures.com\/api\/v1';\n    const ENDPOINTS = {\n        REVERT_ERRORS: `${BASE_URL}\/work_assignment_error_reverse\/all`\n    };\n\n    \/* \u2500\u2500 Auth helper \u2500\u2500 *\/\n    const getHeaders = () => ({\n        'Content-Type': 'application\/json',\n        'Authorization': `Bearer ${localStorage.getItem(\"TOKEN\")}`\n    });\n\n    \/* \u2500\u2500 State \u2500\u2500 *\/\n    let allData = [];\n\n    \/* \u2500\u2500 Format display date MM-DD-YYYY \u2500\u2500 *\/\n    function fmtDate(str) {\n        if (!str) return '-';\n        const d = new Date(str);\n        if (isNaN(d)) return str;\n        const mm = String(d.getMonth()+1).padStart(2,'0');\n        const dd = String(d.getDate()).padStart(2,'0');\n        const yyyy = d.getFullYear();\n        return `${mm}-${dd}-${yyyy}`;\n    }\n\n    function formatDate(d) {\n        return d.toISOString().split('T')[0];\n    }\n\n    \/* \u2500\u2500 Error type pill \u2500\u2500 *\/\n    function errorPill(type) {\n        if (!type) return '-';\n        const cls = type === 'Critical'       ? 'pill-critical'\n                  : type === 'Minor'          ? 'pill-minor'\n                  : type === 'Zero_Tolerence' ? 'pill-zero'\n                  : '';\n        const label = type === 'Zero_Tolerence' ? 'ZERO TOLERANCE' : type.toUpperCase();\n        return `<span class=\"pill ${cls}\">${label}<\/span>`;\n    }\n\n    \/* \u2500\u2500 Reversal status badge \u2500\u2500 *\/\n    function statusBadge(status) {\n        if (!status) return '-';\n        const cls = status === 'accept'  ? 'badge-accept'\n                  : status === 'pending' ? 'badge-pending'\n                  : status === 'reject'  ? 'badge-reject'\n                  : status === 'void'    ? 'badge-void'\n                  : '';\n        return `<span class=\"badge ${cls}\">${status.charAt(0).toUpperCase()+status.slice(1)}<\/span>`;\n    }\n\n    \/* \u2500\u2500 Fetch data \u2500\u2500 *\/\n    async function fetchRevertErrors() {\n        const dateFrom = document.getElementById('dateFrom').value || '2023-01-01';\n        const dateTo   = document.getElementById('dateTo').value   || formatDate(new Date());\n\n        const params = new URLSearchParams({\n            date_from: dateFrom,\n            date_to:   dateTo\n        });\n\n        \/\/ Show skeleton\n        renderSkeleton();\n\n        try {\n            const res = await fetch(`${ENDPOINTS.REVERT_ERRORS}?${params}`, { headers: getHeaders() });\n\n            if (res.status === 401) {\n                showToast('Session expired. Please log in again.');\n                setTimeout(() => { window.location.href = '\/login'; }, 1500);\n                return;\n            }\n\n            const result = await res.json();\n\n            if (result.code === 200) {\n                const meta = result.data;\n                allData    = meta.data || [];\n                renderTable(allData);\n                document.getElementById('totalCount').textContent = `(${allData.length})`;\n            } else {\n                renderEmpty(result.messages?.[0] || 'No data found.');\n            }\n        } catch (err) {\n            console.error('Fetch Error:', err);\n            renderEmpty('Network error. Please check your connection.');\n        }\n    }\n\n    \/* \u2500\u2500 Render skeleton rows \u2500\u2500 *\/\n    function renderSkeleton() {\n        const tbody = document.getElementById('tableBody');\n        let html = '';\n        for (let i = 0; i < 8; i++) {\n            html += `<tr>${Array(10).fill('<td><span class=\"skeleton\"><\/span><\/td>').join('')}<\/tr>`;\n        }\n        tbody.innerHTML = html;\n    }\n\n    \/* \u2500\u2500 Render table rows \u2500\u2500 *\/\n    function renderTable(data) {\n        const tbody = document.getElementById('tableBody');\n        if (!data || data.length === 0) {\n            renderEmpty('No records found for the selected date range.');\n            return;\n        }\n\n        tbody.innerHTML = data.map(item => `\n            <tr>\n                <td>${errorPill(item.errot_type)}<\/td>\n                <td style=\"text-align:center;font-weight:500;\">${item.reverse_error_count ?? '-'}<\/td>\n                <td style=\"max-width:260px;word-break:break-word;\">${item.remarks || '-'}<\/td>\n                <td>${item.account_name || '-'}<\/td>\n                <td style=\"white-space:nowrap;\">${fmtDate(item.work_assignment_date)}<\/td>\n                <td>${item.assigned_to_name || '-'}<\/td>\n                <td>${item.qc_by_name || '-'}<\/td>\n                <td>${statusBadge(item.status)}<\/td>\n                <td>${item.submit_by_name || '-'}<\/td>\n                <td>${item.action_by_name || '-'}<\/td>\n            <\/tr>\n        `).join('');\n    }\n\n    function renderEmpty(msg) {\n        document.getElementById('tableBody').innerHTML =\n            `<tr><td colspan=\"10\" class=\"no-data\">${msg}<\/td><\/tr>`;\n    }\n\n    \/* \u2500\u2500 Filter action \u2500\u2500 *\/\n    function applyFilter() { fetchRevertErrors(); }\n\n    \/* \u2500\u2500 CSV Download \u2500\u2500 *\/\n    function downloadCSV() {\n        if (!allData.length) { showToast('No data to download.'); return; }\n\n        const headers = [\n            'ID','Work Assignment ID','Error Type','Error Count','Account',\n            'File Name','Assign To','QC By','Submit By','Action By',\n            'Work Assignment Date','Status','Remarks','Created At'\n        ];\n\n        const rows = allData.map(r => [\n            r.id, r.work_assignment_id, r.errot_type, r.reverse_error_count,\n            r.account_name, r.file_name, r.assigned_to_name, r.qc_by_name,\n            r.submit_by_name, r.action_by_name, r.work_assignment_date,\n            r.status, `\"${(r.remarks||'').replace(\/\"\/g,'\"\"')}\"`, r.created_at\n        ]);\n\n        const csv  = [headers, ...rows].map(r => r.join(',')).join('\\n');\n        const blob = new Blob([csv], { type: 'text\/csv' });\n        const url  = URL.createObjectURL(blob);\n        const a    = document.createElement('a');\n        a.href     = url;\n        a.download = `revert_errors_${formatDate(new Date())}.csv`;\n        a.click();\n        URL.revokeObjectURL(url);\n    }\n\n    \/* \u2500\u2500 Toast \u2500\u2500 *\/\n    function showToast(msg) {\n        const t = document.getElementById('toast');\n        t.textContent = msg;\n        t.classList.add('show');\n        setTimeout(() => t.classList.remove('show'), 3000);\n    }\n\n    \/\/  CUSTOM DATE PICKER\n    const dpState = {\n        revert: { viewYear: null, viewMonth: null, selectedDate: null, activePreset: 'today' }\n    };\n\n    const DP_IDS = {\n        revert: {\n            dropdown: 'dpDropdownRevert',\n            backdrop: 'dpBackdropRevert',\n            title:    'dpCalTitleRevert',\n            days:     'dpDaysRevert',\n            title2:   'dpCalTitleRevert2',\n            days2:    'dpDaysRevert2',\n            display:  'filterRevertDate'\n        }\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 dpFmt(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 `${dd}-${mm}-${d.getFullYear()}`;\n    }\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\n        \/\/ Second month = first month + 1\n        let y2 = s.viewYear, m2 = s.viewMonth + 1;\n        if (m2 > 11) { m2 = 0; y2++; }\n\n        document.getElementById(ids.title).textContent  = `${DP_MONTHS[s.viewMonth]} ${s.viewYear}`;\n        document.getElementById(ids.title2).textContent = `${DP_MONTHS[m2]} ${y2}`;\n\n        document.getElementById(ids.days).innerHTML  = dpBuildDays(s.viewYear, s.viewMonth, s, inst);\n        document.getElementById(ids.days2).innerHTML = dpBuildDays(y2, m2, s, inst);\n    }\n\n    function dpBuildDays(year, month, s, inst) {\n        const today = dpToday();\n        const first = new Date(year, month, 1);\n        const startDay = first.getDay();\n        const daysInMonth = new Date(year, month + 1, 0).getDate();\n\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(`#dpDropdown${inst.charAt(0).toUpperCase()+inst.slice(1)} .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\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        const iso = s.selectedDate ? dpFmtISO(s.selectedDate) : '';\n        \/\/ Write into hidden fields consumed by fetchRevertErrors()\n        document.getElementById('dateFrom').value = iso;\n        document.getElementById('dateTo').value   = iso;\n        \/\/ Update visible display field\n        document.getElementById(DP_IDS[inst].display).value = iso;\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.getElementById('dateFrom').value = '';\n        document.getElementById('dateTo').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        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\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('dpWrapperRevert');\n        if (wrapEl && !wrapEl.contains(e.target)) {\n            closeDatePicker('revert');\n        }\n    });\n\n    \/* \u2500\u2500 Init \u2500\u2500 *\/\n    function setDefaultDates() {\n        const today = new Date();\n        const from  = new Date('2023-01-01');\n        document.getElementById('dateFrom').value = from.toISOString().split('T')[0];\n        document.getElementById('dateTo').value   = formatDate(today);\n    }\n\n    setDefaultDates();\n    fetchRevertErrors();\n<\/script>\n<\/div><\/div>\n\n<\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>List View All Revert Error (0) 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 Clear Apply Filter + CSV Download Error Category Error Count Reversal Description Account Error Date Assign To QC By&#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-164","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/164","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=164"}],"version-history":[{"count":2,"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/164\/revisions"}],"predecessor-version":[{"id":169,"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/164\/revisions\/169"}],"wp:attachment":[{"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/media?parent=164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}