{"id":167,"date":"2026-03-31T07:33:47","date_gmt":"2026-03-31T07:33:47","guid":{"rendered":"https:\/\/ph-taskportal.zyneventures.com\/?page_id=167"},"modified":"2026-07-09T09:27:25","modified_gmt":"2026-07-09T09:27:25","slug":"general-errors","status":"publish","type":"page","link":"https:\/\/ph-portal-v2.zyneventures.com\/index.php\/general-errors\/","title":{"rendered":"General Errors"},"content":{"rendered":"<style>.kadence-column167_1359dc-7c > .kt-inside-inner-col,.kadence-column167_1359dc-7c > .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-column167_1359dc-7c > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column167_1359dc-7c > .kt-inside-inner-col{flex-direction:column;}.kadence-column167_1359dc-7c > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column167_1359dc-7c > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column167_1359dc-7c{position:relative;}@media all and (max-width: 1024px){.kadence-column167_1359dc-7c > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column167_1359dc-7c > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column167_1359dc-7c\"><div class=\"kt-inside-inner-col\"><style>.kb-row-layout-id167_77cbfb-7d > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id167_77cbfb-7d > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id167_77cbfb-7d > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id167_77cbfb-7d > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id167_77cbfb-7d > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id167_77cbfb-7d > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id167_77cbfb-7d 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-column167_ad96c3-88 > .kt-inside-inner-col,.kadence-column167_ad96c3-88 > .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-column167_ad96c3-88 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column167_ad96c3-88 > .kt-inside-inner-col{flex-direction:column;}.kadence-column167_ad96c3-88 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column167_ad96c3-88 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column167_ad96c3-88{position:relative;}@media all and (max-width: 1024px){.kadence-column167_ad96c3-88 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column167_ad96c3-88 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column167_ad96c3-88\"><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        --white: #ffffff;\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    }\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: 28px;\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, minmax(0, 1fr));\n        gap: 15px;\n        margin-bottom: 20px;\n    }\n    .filter-group { display: flex; flex-direction: column; }\n    .filter-group label {\n        font-size: 12px;\n        margin-bottom: 6px;\n        color: var(--text-dark);\n    }\n\n    \/* Custom Select Dropdown *\/\n    .custom-select-wrapper {\n        position: relative;\n        width: 100%;\n    }\n    .custom-select-trigger {\n        height: 38px;\n        padding: 0 36px 0 12px;\n        border: 1px solid #ced4da;\n        background-color: #fff;\n        border-radius: 6px;\n        font-family: 'Sora', sans-serif;\n        font-size: 12px;\n        color: var(--text-dark);\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        box-sizing: border-box;\n        width: 100%;\n        user-select: none;\n        position: relative;\n        transition: all 0.2s;\n        overflow: hidden;\n        white-space: nowrap;\n    }\n    .custom-select-trigger:hover { border-color: var(--primary-blue); }\n    .custom-select-wrapper.open .custom-select-trigger {\n        border-color: var(--primary-blue);\n        border-radius: 6px 6px 0 0;\n        box-shadow: 0 0 0 3px rgba(1, 128, 255, 0.1);\n    }\n    .custom-select-trigger.placeholder-shown { color: #70757a; }\n    .custom-select-trigger .cs-arrow {\n        position: absolute;\n        right: 10px;\n        top: 50%;\n        transform: translateY(-50%);\n        pointer-events: none;\n        color: #8D8C9C;\n        transition: transform 0.2s;\n        flex-shrink: 0;\n    }\n    .custom-select-wrapper.open .custom-select-trigger .cs-arrow { transform: translateY(-50%) rotate(180deg); }\n    \n    \/* Integrated search input inside the trigger *\/\n    .cs-search-input {\n        flex: 1;\n        min-width: 60px;\n        border: 0 !important;\n        outline: 0 !important;\n        box-shadow: none !important;\n        background: transparent !important;\n        font-family: 'Sora', sans-serif;\n        font-size: 12px;\n        color: var(--text-dark);\n        padding: 0;\n        height: 26px;\n        -webkit-appearance: none;\n        -moz-appearance: none;\n        appearance: none;\n    }\n\n    .cs-search-input:focus,\n    .cs-search-input:active,\n    .cs-search-input:hover,\n    .cs-search-input:focus-visible {\n        border: 0 !important;\n        outline: 0 !important;\n        box-shadow: none !important;\n        background: transparent !important;\n    }\n\n    .cs-search-input::placeholder {\n        color: #70757a;\n    }\n\n    .custom-select-trigger:has(.cs-search-input) {\n        cursor: text;\n    }\n    \n    .custom-select-dropdown {\n        display: none;\n        position: absolute;\n        top: 100%;\n        left: 0;\n        right: 0;\n        background: #fff;\n        border: 1px solid var(--primary-blue);\n        border-top: none;\n        border-radius: 0 0 6px 6px;\n        z-index: 9999;\n        overflow-y: auto;\n        max-height: 250px;\n        box-shadow: 0 4px 12px rgba(0,0,0,0.10);\n    }\n\n    .cs-label {\n        display: flex;\n        flex-wrap: nowrap;\n        align-items: center;\n        gap: 6px;\n        overflow-x: auto;\n        overflow-y: hidden;\n        white-space: nowrap;\n        width: 100%;\n        min-width: 0;\n        scrollbar-width: thin;\n        -ms-overflow-style: auto;\n    }\n    .cs-label::-webkit-scrollbar { display: block; height: 4px; }\n    .cs-label::-webkit-scrollbar-thumb { background: #ccc; border-radius: 4px; }\n\n    .custom-select-wrapper.open .custom-select-dropdown { display: block; }\n    \n    \/* Chips\/Badges styling *\/\n    .cs-chips {\n        display: flex;\n        align-items: center;\n        gap: 4px;\n    }\n    .cs-chip {\n        display: inline-flex;\n        align-items: center;\n        background-color: #e8f0fe;\n        border: 1px solid #d2e3fc;\n        border-radius: 4px;\n        padding: 0 8px;\n        font-size: 12px;\n        color: #1967d2;\n        gap: 4px;\n        white-space: nowrap;\n        flex-shrink: 0;\n        height: 26px;\n        margin: 0;\n    }\n    .cs-chip-remove {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 14px;\n        height: 14px;\n        border-radius: 50%;\n        color: #5f6368;\n        font-weight: bold;\n        transition: background 0.2s;\n    }\n    .cs-chip-remove:hover { background: #dadce0; color: #202124; }\n\n    .custom-select-option {\n        padding: 8px 12px;\n        font-size: 12px;\n        font-family: 'Sora', sans-serif;\n        color: var(--text-dark);\n        cursor: pointer;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        line-height: 1.4;\n        display: flex;\n        align-items: center;\n        gap: 10px;\n    }\n    .custom-select-option:hover { background: #f0f6ff; color: var(--primary-blue); }\n    .custom-select-option.selected { background: #e8f1ff; color: var(--primary-blue); font-weight: 500; }\n    .custom-select-option.highlighted { background: #f0f6ff; color: var(--primary-blue); }\n    \n    .custom-select-option .cs-checkbox {\n        width: 16px;\n        height: 16px;\n        border: 1px solid #ced4da;\n        border-radius: 3px;\n        background: #fff;\n        position: relative;\n        flex-shrink: 0;\n        display: none;\n    }\n    .custom-select-wrapper.multi .custom-select-option .cs-checkbox { display: block; }\n    .custom-select-option.selected .cs-checkbox {\n        background: var(--primary-blue);\n        border-color: var(--primary-blue);\n    }\n    .custom-select-option.selected .cs-checkbox::after {\n        content: '';\n        position: absolute;\n        left: 5px;\n        top: 2px;\n        width: 4px;\n        height: 8px;\n        border: solid white;\n        border-width: 0 2px 2px 0;\n        transform: rotate(45deg);\n    }\n\n    .custom-select-option.placeholder-option { color: #999; }\n\n    .custom-select-search {\n        padding: 8px;\n        border-bottom: 1px solid #EFEFEF;\n        position: sticky;\n        top: 0;\n        background: #fff;\n        z-index: 10;\n    }\n    .custom-select-search input {\n        width: 100%;\n        height: 30px;\n        padding: 0 10px;\n        border: 1px solid #ced4da;\n        border-radius: 4px;\n        font-family: 'Sora', sans-serif;\n        font-size: 11px;\n        outline: none;\n        box-sizing: border-box;\n    }\n    .custom-select-search input:focus { border-color: var(--primary-blue); }\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 #ced4da;\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 { \n        border-color: var(--primary-blue); \n    }\n    .date-wrapper input[type=\"text\"]::placeholder { color: #70757a; }\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 {\n        left: auto;\n        right: 0;\n    }\n\n    .dp-backdrop {\n        display: none;\n        position: fixed;\n        inset: 0;\n        z-index: 1999;\n    }\n    .dp-backdrop.show { display: block; }\n\n    .dp-presets {\n        width: 140px;\n        border-right: 1px solid #EFEFEF;\n        display: flex;\n        flex-direction: column;\n        background: #fff;\n        padding: 8px 0;\n    }\n    .dp-preset-item {\n        padding: 10px 16px;\n        font-size: 13px;\n        color: #3c4043;\n        cursor: pointer;\n        transition: all 0.2s;\n        white-space: nowrap;\n    }\n    .dp-preset-item:hover { background: #F1F3F4; }\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: 14px;\n        font-weight: 600;\n        color: #3c4043;\n        margin: 0;\n        text-align: center;\n        flex: 1;\n    }\n    .dp-nav-btn {\n        background: none;\n        border: none;\n        cursor: pointer;\n        padding: 6px;\n        color: #5f6368;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border-radius: 50%;\n        transition: background 0.2s;\n    }\n    .dp-nav-btn:hover { background: #F1F3F4; }\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 { \n        background: #F1F3F4; \n        border-radius: 50% !important;\n        font-weight: 600;\n    }\n    .dp-day.selected {\n        background: var(--primary-blue) !important;\n        color: #fff !important;\n        font-weight: 600;\n        border-radius: 4px !important;\n        z-index: 2;\n    }\n    .dp-day.in-range, .dp-day.hover-range {\n        background: #E8F0FE !important;\n        color: #3c4043;\n        border-radius: 0;\n    }\n    .dp-day.selected-start, .dp-day.row-start, .dp-day.hover-start {\n        border-top-left-radius: 4px !important;\n        border-bottom-left-radius: 4px !important;\n    }\n    .dp-day.selected-end, .dp-day.row-end, .dp-day.hover-end {\n        border-top-right-radius: 4px !important;\n        border-bottom-right-radius: 4px !important;\n    }\n    .dp-day.selected-start.selected-end {\n        border-radius: 4px !important;\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: space-between;\n        align-items: center;\n        gap: 12px;\n        margin-top: 10px;\n        padding: 12px 16px;\n        border-top: 1px solid #EFEFEF;\n    }\n    .dp-range-display {\n        font-size: 12px;\n        color: #333;\n        font-weight: 500;\n    }\n    .dp-btn-clear {\n        padding: 8px 16px;\n        border-radius: 8px;\n        font-size: 12px;\n        font-family: 'Sora', sans-serif;\n        background: #F1F3F4;\n        color: #3c4043;\n        border: none;\n        cursor: pointer;\n        font-weight: 500;\n        transition: background 0.2s;\n    }\n    .dp-btn-clear:hover { background: #E8EAED; }\n    .dp-btn-apply {\n        padding: 8px 24px;\n        border-radius: 8px;\n        font-size: 12px;\n        font-family: 'Sora', sans-serif;\n        background: var(--primary-blue);\n        color: #fff;\n        border: none;\n        cursor: pointer;\n        font-weight: 500;\n        transition: background 0.2s;\n    }\n    .dp-btn-apply:hover { background: var(--hover-blue); }\n\n    \/* \u2500\u2500 Action Row \u2500\u2500 *\/\n    .action-row {\n        display: flex;\n        gap: 12px;\n        margin-bottom: 24px;\n    }\n\n    \/* \u2500\u2500 Table \u2500\u2500 *\/\n    .table-wrapper {\n        width: 100%;\n        overflow-x: auto;\n        -webkit-overflow-scrolling: touch;\n        border: 1px solid var(--border-color);\n        border-radius: 10px;\n        max-width: 100%;\n    }\n    table {\n        width: 100%;\n        border-collapse: collapse;\n        min-width: 900px;\n        max-width: 100%;\n        table-layout: fixed;\n    }\n    thead tr {\n        background: #F8F9FA;\n    }\n    thead th {\n        padding: 9px 6px;\n        font-size: 10px;\n        font-weight: 500;\n        color: var(--text-dark);\n        text-align: left;\n        border-bottom: 1px solid var(--border-color);\n        white-space: normal;\n        word-break: normal;\n        overflow-wrap: anywhere;\n        line-height: 1.25;\n        vertical-align: middle;\n    }\n    tbody tr {\n        border-bottom: 1px solid var(--border-color);\n        transition: background 0.15s;\n    }\n    tbody tr:last-child { border-bottom: none; }\n    tbody tr:hover { background: #fafbff; }\n    tbody td {\n        padding: 8px 6px;\n        font-size: 10px;\n        color: var(--text-muted);\n        vertical-align: middle;\n        line-height: 1.25;\n        white-space: normal;\n        word-break: break-word;\n        overflow-wrap: anywhere;\n    }\n\n    thead th:nth-child(7),\n    tbody td:nth-child(7) {\n        white-space: nowrap;\n        word-break: normal;\n        overflow-wrap: normal;\n    }\n\n    \/* \u2500\u2500 Pagination \u2500\u2500 *\/\n    .pagination-footer {\n        margin-top: 50px;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        color: var(--text-muted);\n        font-size: 12px;\n    }\n    .pagination-controls { display: flex; align-items: center; gap: 5px; }\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-size: 12px;\n        color: var(--text-muted);\n        transition: background 0.2s;\n    }\n    .page-num:hover { background: #f0f0f0; }\n    .page-num.active { background: var(--primary-blue); color: #fff; }\n    .nav-btn {\n        cursor: pointer;\n        color: var(--text-dark);\n        font-size: 12px;\n        padding: 5px 8px;\n        user-select: none;\n    }\n    .nav-btn.disabled { color: #ccc; pointer-events: none; }\n\n    \/* Search Button *\/\n    .btn {\n        padding: 10px 20px;\n        border-radius: 6px;\n        font-size: 12px;\n        font-weight: 400;\n        cursor: pointer;\n        border: none;\n        transition: background 0.2s;\n        font-family: 'Sora', sans-serif;\n        white-space: nowrap;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        gap: 6px;\n        height: 38px;\n    }\n    .btn-primary { background: var(--primary-blue); color: #fff; }\n    .btn-primary:hover { background: var(--hover-blue); }\n    .btn-success { background: #0180FF; color: #fff; }\n    .btn-success:hover { background: #3499FF; }\n    .btn-csv { background: #0180FF; color: #fff; }\n    .btn-csv:hover { background: #3499FF; }\n\n    .btn-clear{\n    background: #0180FF; color: #fff\n}\n\n    .btn-clear:hover{\n     background: #3499FF;\n}\n\n    \/* Loading \/ Empty *\/\n    .loading-row td, .empty-row td {\n        text-align: center;\n        padding: 40px;\n        color: var(--text-muted);\n        font-size: 13px;\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        margin-right: 6px;\n    }\n    @keyframes spin { to { transform: rotate(360deg); } }\n\n    \/* Toast *\/\n    .toast {\n        position: fixed;\n        bottom: 28px;\n        right: 28px;\n        padding: 12px 20px;\n        border-radius: 8px;\n        font-size: 13px;\n        font-family: 'Sora', sans-serif;\n        z-index: 9999;\n        opacity: 0;\n        transform: translateY(16px);\n        transition: opacity 0.3s, transform 0.3s;\n        pointer-events: none;\n    }\n    .toast.show { opacity: 1; transform: translateY(0); }\n    .toast-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }\n    .toast-error   { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }\n\n    \/* \u2500\u2500 CHANGE 1: Badge Styles \u2014 bg removed, font color #8D8C9C \u2500\u2500 *\/\n    .type-badge {\n        padding: 4px 12px;\n        border-radius: 999px;\n        font-size: 11px;\n        font-weight: 500;\n        display: inline-flex;\n        align-items: center;\n        text-transform: capitalize;\n        background: transparent;\n        color: #8D8C9C;\n    }\n    .type-minor    { background: transparent; color: #8D8C9C; }\n    .type-critical { background: transparent; color: #8D8C9C; }\n    .type-zero     { background: transparent; color: #8D8C9C; }\n\n    \/* Responsive *\/\n    @media (max-width: 1100px) {\n        .filter-section { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }\n    }\n    @media (max-width: 768px) {\n        body { padding: 12px; }\n        .filter-section { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }\n        .action-row { gap: 8px; flex-wrap: wrap; }\n        .btn { font-size: 11px; }\n        .dp-dropdown {\n            flex-direction: column;\n            width: calc(100vw - 32px);\n            left: 50% !important;\n            transform: translateX(-50%) !important;\n        }\n        .dp-presets { width: 100%; border-right: none; border-bottom: 1px solid #EFEFEF; flex-direction: row; flex-wrap: wrap; }\n        .dp-preset-item { flex: 1 1 auto; text-align: center; }\n        .dp-months-row { flex-direction: column; }\n        .dp-calendar + .dp-calendar { border-left: none; border-top: 1px solid #EFEFEF; }\n    }\n    @media (max-width: 480px) {\n        .filter-section { grid-template-columns: 1fr; }\n        .pagination-footer { flex-direction: column; gap: 15px; }\n    }\n\n<\/style>\n\n\n<!-- Header -->\n<div class=\"header-container\">\n    <div class=\"title-group\">\n        <h2>General Errors<\/h2>\n        <span class=\"count\" id=\"totalCount\">(0)<\/span>\n    <\/div>\n<\/div>\n\n<!-- Filters -->\n<div class=\"filter-section\" id=\"filterForm\"><\/div>\n\n\n<!-- Action buttons -->\n<div class=\"action-row\">\n    <button class=\"btn btn-success\" onclick=\"openAddModal()\">+ Add New General Error<\/button>\n    <button class=\"btn btn-csv\" onclick=\"downloadCSV()\">+ Download CSV<\/button>\n    <button class=\"btn btn-clear\" onclick=\"clearFilters()\">Clear<\/button>\n<\/div>\n<br>\n<!-- Table -->\n<div class=\"table-wrapper\">\n    <table>\n        <thead>\n            <tr>\n                <th>Assign To<\/th>\n                <th>Type<\/th>\n                <th>Error Count<\/th>\n                <th>Error WTG<\/th>\n                <th>Description<\/th>\n                <th>Created By<\/th>\n                <th>Date<\/th>\n            <\/tr>\n        <\/thead>\n        <tbody id=\"tableBody\">\n            <tr class=\"loading-row\">\n                <td colspan=\"7\"><span class=\"spinner\"><\/span> Loading\u2026<\/td>\n            <\/tr>\n        <\/tbody>\n    <\/table>\n<\/div>\n\n<!-- Pagination -->\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:8px;\"><\/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<!-- Toast -->\n<div class=\"toast\" id=\"toast\"><\/div>\n\n<script>\n    \/\/ ENDPOINTS \n    const BASE_URL = 'https:\/\/api-ph-portal.zyneventures.com\/api\/v1';\n    const ENDPOINTS = {\n        TEAM_MEMBERS: `${BASE_URL}\/user\/team-members`,\n        DEPARTMENTS:  `${BASE_URL}\/department\/all`,\n        ERRORS_ALL:   `${BASE_URL}\/gernal_error\/all`,\n    };\n\n    \/\/ STATE\n    let currentPage  = 1;\n    let totalPages   = 1;\n    let allData      = [];   \/\/ full dataset for client-side pagination\n    let filteredData = [];\n    let PER_PAGE     = 15;\n\n    const dropDownData = {\n        users: [],\n        departments: []\n    };\n\n    \/\/ AUTH HELPERS\n    function getToken() {\n        return localStorage.getItem('TOKEN') || (document.cookie.match(\/(?:^|;\\s*)TOKEN=([^;]*)\/) || [])[1] || '';\n    }\n\n    function getHeaders() {\n        const token = getToken();\n        return {\n            'Content-Type': 'application\/json',\n            ...(token ? { 'Authorization': `Bearer ${token}` } : {})\n        };\n    }\n\n    \/** PHP GernalError list.blade.php \u2014 Minor\u00d70.25, Critical\u00d70.50, Zero_Tolerence\u00d71.25 *\/\n    function calcGeneralErrorWtg(type, count) {\n        const c = parseFloat(count) || 0;\n        const t = String(type || '').trim().toLowerCase().replace(\/[_-]\/g, ' ');\n        if (!c || !t) return 0;\n        if (t === 'zero tolerence' || t === 'zero tolerance' || t === 'zero_tolerence') return c * 1.25;\n        if (t === 'critical') return c * 0.5;\n        if (t === 'minor') return c * 0.25;\n        return 0;\n    }\n\n    function resolveErrorWtg(row) {\n        const computed = calcGeneralErrorWtg(\n            row.type || row.error_type,\n            row.error_count ?? row.count\n        );\n        const apiWtg = parseFloat(row.error_wtg);\n        if (!Number.isNaN(apiWtg) && apiWtg > 0) return apiWtg.toFixed(2);\n        return computed > 0 ? computed.toFixed(2) : '0';\n    }\n\n    \/\/ TOAST\n    function showToast(msg, type = 'success') {\n        const t = document.getElementById('toast');\n        t.textContent = msg;\n        t.className = `toast toast-${type} show`;\n        setTimeout(() => { t.className = 'toast'; }, 3200);\n    }\n\n    \/** \u2500\u2500 FETCH DROPDOWN DATA \u2500\u2500 **\/\n    async function fetchDropdownData() {\n        try {\n            const [uRes, dRes] = await Promise.all([\n                fetch(ENDPOINTS.TEAM_MEMBERS, { headers: getHeaders() }),\n                fetch(ENDPOINTS.DEPARTMENTS,  { headers: getHeaders() })\n            ]);\n            const uJson = await uRes.json();\n            const dJson = await dRes.json();\n\n            dropDownData.users       = uJson?.data?.data || uJson?.data || uJson?.response || [];\n            dropDownData.departments = dJson?.data?.data || dJson?.data || dJson?.response || [];\n        } catch (err) {\n            console.error('Dropdown fetch error', err);\n        }\n    }\n\n    \/** \u2500\u2500 RENDER SEARCHABLE SELECT \u2500\u2500 **\/\n    function renderSelect(label, selectId, data, labelKey, valueKey = 'id', multi = false) {\n        const optionsData = (data || []).map(item => ({ _val: item[valueKey] ?? '', _label: item[labelKey] ?? '' }));\n        const optionsHtml = optionsData.map((o, i) =>\n            `<div class=\"custom-select-option\" data-value=\"${o._val}\" onclick=\"csSelect('${selectId}', '${o._val.toString().replace(\/'\/g, \"\\\\'\")}', this, ${multi})\">\n                <div class=\"cs-checkbox\"><\/div>\n                <span class=\"opt-label\">${o._label}<\/span>\n            <\/div>`\n        ).join('');\n\n        return `\n            <div class=\"filter-group\">\n                <label>${label}<\/label>\n                <div class=\"custom-select-wrapper${multi ? ' multi' : ''}\" id=\"csWrapper_${selectId}\">\n                    <input type=\"hidden\" id=\"${selectId}\" value=\"\">\n                    <div class=\"custom-select-trigger placeholder-shown\" onclick=\"csTriggerClick('${selectId}', event)\">\n                        <div class=\"cs-label\">\n                            <input type=\"text\" class=\"cs-search-input\" id=\"csInput_${selectId}\" placeholder=\"Select ${label}\" autocomplete=\"off\" oninput=\"csIntegratedFilter('${selectId}', this.value)\" onkeydown=\"csKeyDown(event, '${selectId}')\" onclick=\"csOpenDropdown('${selectId}'); event.stopPropagation();\" onfocus=\"csOpenDropdown('${selectId}')\">\n                        <\/div>\n                        <svg class=\"cs-arrow\" width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>\n                    <\/div>\n                    <div class=\"custom-select-dropdown\" id=\"csDrop_${selectId}\">\n                        <div class=\"custom-select-options\">\n                            ${optionsHtml}\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        `;\n    }\n\n    function csToggle(selectId, e) {\n        if (e) e.stopPropagation();\n        const wrapper = document.getElementById('csWrapper_' + selectId);\n        const isOpen = wrapper.classList.contains('open');\n        document.querySelectorAll('.custom-select-wrapper.open').forEach(w => {\n            if (w !== wrapper) w.classList.remove('open');\n        });\n        if (isOpen) {\n            wrapper.classList.remove('open');\n        } else {\n            wrapper.classList.add('open');\n            const searchInput = document.getElementById('csInput_' + selectId);\n            if (searchInput) {\n                searchInput.value = '';\n                csIntegratedFilter(selectId, '');\n                setTimeout(() => searchInput.focus(), 50);\n            } else {\n                csIntegratedFilter(selectId, '');\n            }\n            csHighlightFirst(selectId);\n        }\n    }\n\n    function csTriggerClick(selectId, e) {\n        e.stopPropagation();\n        csToggle(selectId, e);\n    }\n\n    function csOpenDropdown(selectId) {\n        const wrapper = document.getElementById('csWrapper_' + selectId);\n        if (!wrapper || wrapper.classList.contains('open')) return;\n        document.querySelectorAll('.custom-select-wrapper.open').forEach(w => {\n            if (w !== wrapper) w.classList.remove('open');\n        });\n        wrapper.classList.add('open');\n        csHighlightFirst(selectId);\n    }\n\n    function csFilter(selectId, query) {\n        csIntegratedFilter(selectId, query);\n    }\n\n    function csIntegratedFilter(selectId, query) {\n        const drop = document.getElementById('csDrop_' + selectId);\n        if (!drop) return;\n        const options = drop.querySelectorAll('.custom-select-option');\n        const q = (query || '').toLowerCase();\n        options.forEach(opt => {\n            const text = opt.textContent.toLowerCase();\n            if (text.includes(q)) {\n                opt.style.display = '';\n            } else {\n                opt.style.display = 'none';\n            }\n        });\n        const wrapper = document.getElementById('csWrapper_' + selectId);\n        if (wrapper && !wrapper.classList.contains('open')) {\n            wrapper.classList.add('open');\n        }\n        csHighlightFirst(selectId);\n    }\n\n    function csHighlightFirst(selectId) {\n        const drop = document.getElementById('csDrop_' + selectId);\n        if (!drop) return;\n        drop.querySelectorAll('.custom-select-option').forEach(o => o.classList.remove('highlighted'));\n        const visible = Array.from(drop.querySelectorAll('.custom-select-option'))\n            .filter(o => o.style.display !== 'none');\n        if (visible.length > 0) {\n            visible[0].classList.add('highlighted');\n        }\n    }\n\n    function csKeyDown(e, selectId) {\n        const wrapper = document.getElementById('csWrapper_' + selectId);\n        const drop = document.getElementById('csDrop_' + selectId);\n        if (!wrapper || !drop) return;\n        const isOpen = wrapper.classList.contains('open');\n\n        if (e.key === 'Enter') {\n            e.preventDefault();\n            if (!isOpen) {\n                csToggle(selectId, e);\n            } else {\n                const highlighted = drop.querySelector('.custom-select-option.highlighted');\n                if (highlighted) {\n                    const multi = wrapper.classList.contains('multi');\n                    const value = highlighted.dataset.value;\n                    csSelect(selectId, value, highlighted, multi);\n                } else {\n                    csToggle(selectId, e);\n                }\n            }\n            return;\n        }\n\n        if (e.key === 'ArrowDown') {\n            e.preventDefault();\n            if (!isOpen) {\n                csToggle(selectId, e);\n                return;\n            }\n            const visibleOptions = Array.from(drop.querySelectorAll('.custom-select-option'))\n                .filter(o => o.style.display !== 'none');\n            if (visibleOptions.length === 0) return;\n            let currentIdx = visibleOptions.findIndex(o => o.classList.contains('highlighted'));\n            visibleOptions.forEach(o => o.classList.remove('highlighted'));\n            currentIdx = (currentIdx + 1) % visibleOptions.length;\n            visibleOptions[currentIdx].classList.add('highlighted');\n            visibleOptions[currentIdx].scrollIntoView({ block: 'nearest' });\n            return;\n        }\n\n        if (e.key === 'ArrowUp') {\n            e.preventDefault();\n            if (!isOpen) {\n                csToggle(selectId, e);\n                return;\n            }\n            const visibleOptions = Array.from(drop.querySelectorAll('.custom-select-option'))\n                .filter(o => o.style.display !== 'none');\n            if (visibleOptions.length === 0) return;\n            let currentIdx = visibleOptions.findIndex(o => o.classList.contains('highlighted'));\n            visibleOptions.forEach(o => o.classList.remove('highlighted'));\n            if (currentIdx <= 0) currentIdx = visibleOptions.length - 1;\n            else currentIdx -= 1;\n            visibleOptions[currentIdx].classList.add('highlighted');\n            visibleOptions[currentIdx].scrollIntoView({ block: 'nearest' });\n            return;\n        }\n\n        if (e.key === 'Escape') {\n            wrapper.classList.remove('open');\n            return;\n        }\n    }\n\n    function csSelect(selectId, value, optionEl, multi = false) {\n        const wrapper = document.getElementById('csWrapper_' + selectId);\n        const input = document.getElementById(selectId);\n        const trigger = wrapper.querySelector('.custom-select-trigger');\n        const labelEl = trigger.querySelector('.cs-label');\n\n        if (value === '') {\n            input.value = '';\n            const hadIntegratedInput = !!document.getElementById('csInput_' + selectId);\n            if (hadIntegratedInput) {\n                const label = trigger.closest('.filter-group').querySelector('label').textContent.trim();\n                labelEl.innerHTML = `<input type=\"text\" class=\"cs-search-input\" id=\"csInput_${selectId}\" placeholder=\"Select ${label}\" autocomplete=\"off\" oninput=\"csIntegratedFilter('${selectId}', this.value)\" onkeydown=\"csKeyDown(event, '${selectId}')\" onclick=\"csOpenDropdown('${selectId}'); event.stopPropagation();\" onfocus=\"csOpenDropdown('${selectId}')\">`;\n            }\n            trigger.classList.add('placeholder-shown');\n            wrapper.querySelectorAll('.custom-select-option').forEach(o => o.classList.remove('selected'));\n            if (!multi) wrapper.classList.remove('open');\n            return;\n        }\n\n        if (!multi) {\n            input.value = value;\n            const selectedText = optionEl.querySelector('.opt-label').textContent.trim();\n            labelEl.innerHTML = `<input type=\"text\" class=\"cs-search-input\" id=\"csInput_${selectId}\" placeholder=\"${selectedText}\" autocomplete=\"off\" oninput=\"csIntegratedFilter('${selectId}', this.value)\" onkeydown=\"csKeyDown(event, '${selectId}')\" onclick=\"csOpenDropdown('${selectId}'); event.stopPropagation();\" onfocus=\"csOpenDropdown('${selectId}')\">`;\n            trigger.classList.remove('placeholder-shown');\n            wrapper.querySelectorAll('.custom-select-option').forEach(o => o.classList.remove('selected'));\n            optionEl.classList.add('selected');\n            wrapper.classList.remove('open');\n        } else {\n            let values = input.value ? input.value.split(',') : [];\n            const idx = values.indexOf(value);\n            if (idx > -1) {\n                values.splice(idx, 1);\n                optionEl.classList.remove('selected');\n            } else {\n                values.push(value);\n                optionEl.classList.add('selected');\n            }\n            input.value = values.join(',');\n\n            if (values.length === 0) {\n                const label = trigger.closest('.filter-group').querySelector('label').textContent.trim();\n                labelEl.innerHTML = `<input type=\"text\" class=\"cs-search-input\" id=\"csInput_${selectId}\" placeholder=\"Select ${label}\" autocomplete=\"off\" oninput=\"csIntegratedFilter('${selectId}', this.value)\" onkeydown=\"csKeyDown(event, '${selectId}')\" onclick=\"csOpenDropdown('${selectId}'); event.stopPropagation();\" onfocus=\"csOpenDropdown('${selectId}')\">`;\n                trigger.classList.add('placeholder-shown');\n            } else {\n                trigger.classList.remove('placeholder-shown');\n                const selectedLabels = Array.from(wrapper.querySelectorAll('.custom-select-option.selected'))\n                    .map(opt => ({\n                        val: opt.dataset.value,\n                        label: opt.querySelector('.opt-label').textContent.trim()\n                    }));\n\n                const chipsHtml = selectedLabels.map(item => `\n                    <div class=\"cs-chip\">\n                        <span>${item.label}<\/span>\n                        <span class=\"cs-chip-remove\" onclick=\"csRemoveChip(event, '${selectId}', '${item.val}')\">&times;<\/span>\n                    <\/div>\n                `).join('');\n\n                labelEl.innerHTML = chipsHtml + `<input type=\"text\" class=\"cs-search-input\" id=\"csInput_${selectId}\" placeholder=\"\" autocomplete=\"off\" oninput=\"csIntegratedFilter('${selectId}', this.value)\" onkeydown=\"csKeyDown(event, '${selectId}')\" onclick=\"csOpenDropdown('${selectId}'); event.stopPropagation();\" onfocus=\"csOpenDropdown('${selectId}')\">`;\n            }\n\n            if (wrapper.classList.contains('open')) {\n                const newInput = document.getElementById('csInput_' + selectId);\n                if (newInput) setTimeout(() => newInput.focus(), 0);\n            }\n        }\n    }\n\n    function csRemoveChip(e, selectId, value) {\n        e.stopPropagation();\n        const wrapper = document.getElementById('csWrapper_' + selectId);\n        const optionEl = wrapper.querySelector(`.custom-select-option[data-value=\"${value}\"]`);\n        if (optionEl) {\n            csSelect(selectId, value, optionEl, true);\n        }\n    }\n\n    function renderFilters() {\n        document.getElementById('filterForm').innerHTML = `\n            ${renderSelect('Assign To',   'filterAssignTo',   dropDownData.users,       'pesudo_name', 'id', true)}\n            ${renderSelect('Department',  'filterDepartment', dropDownData.departments, 'name', 'id', true)}\n            <div class=\"filter-group\">\n                <label>Select Date<\/label>\n                <div class=\"date-wrapper\" id=\"dpWrapper\">\n                    <input type=\"text\" id=\"dateDisplay\" placeholder=\"Select Date\" readonly onclick=\"toggleDatePicker(event,'date')\">\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=\"dpBackdrop\" onclick=\"closeDatePicker('date')\"><\/div>\n                    <div class=\"dp-dropdown\" id=\"dpDropdown\">\n                        <div class=\"dp-presets\">\n                            <div class=\"dp-preset-item active\" data-preset=\"today\"     onclick=\"selectPreset(event,'today','date')\">Today<\/div>\n                            <div class=\"dp-preset-item\"       data-preset=\"yesterday\"  onclick=\"selectPreset(event,'yesterday','date')\">Yesterday<\/div>\n                            <div class=\"dp-preset-item\"       data-preset=\"last7\"      onclick=\"selectPreset(event,'last7','date')\">Last 7 Days<\/div>\n                            <div class=\"dp-preset-item\"       data-preset=\"last30\"     onclick=\"selectPreset(event,'last30','date')\">Last 30 Days<\/div>\n                            <div class=\"dp-preset-item\"       data-preset=\"thisMonth\"  onclick=\"selectPreset(event,'thisMonth','date')\">This Month<\/div>\n                            <div class=\"dp-preset-item\"       data-preset=\"lastMonth\"  onclick=\"selectPreset(event,'lastMonth','date')\">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,'date')\">&#8249;<\/button>\n                                        <span class=\"dp-cal-title\" id=\"dpCalTitle\"><\/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=\"dpDays\"><\/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=\"dpCalTitle2\"><\/span>\n                                        <button class=\"dp-nav-btn\" onclick=\"dpChangeMonth(event,1,'date')\">&#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=\"dpDays2\"><\/div>\n                                <\/div>\n                            <\/div>\n                            <div class=\"dp-footer\">\n                                <div class=\"dp-range-display\" id=\"dpRangeDisplay\">Select Date Range<\/div>\n                                <div class=\"dp-footer-btns\">\n                                    <button class=\"dp-btn-clear\" onclick=\"dpClear(event,'date')\">Cancel<\/button>\n                                    <button class=\"dp-btn-apply\" onclick=\"dpApply(event,'date')\">Apply<\/button>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"filter-group\" style=\"display:flex; flex-direction:column; justify-content:flex-end;\">\n                <button class=\"btn btn-primary\" onclick=\"doSearch()\" style=\"width:100%;\">Search<\/button>\n            <\/div>\n        `;\n    }\n\n    document.addEventListener('click', function (e) {\n        if (!e.target.closest('.custom-select-wrapper')) {\n            document.querySelectorAll('.custom-select-wrapper.open').forEach(w => w.classList.remove('open'));\n        }\n        if (!e.target.closest('.date-wrapper')) {\n            closeDatePicker('date');\n        }\n    });\n\n    \/\/ FETCH ERRORS\n    async function fetchErrors() {\n        showLoading();\n        try {\n            const params = new URLSearchParams();\n            const deptId   = document.getElementById('filterDepartment').value;\n            const assignTo = document.getElementById('filterAssignTo').value;\n\n            \/\/ \u2500\u2500 DATE PARAM \u2500\u2500\n            \/\/ Supports both single date (YYYY-MM-DD) and range (YYYY-MM-DD to YYYY-MM-DD)\n            const dateDisplayVal = document.getElementById('dateDisplay').value.trim();\n            let dateParam = '';\n            if (dateDisplayVal) {\n                if (dateDisplayVal.includes(' - ')) {\n                    \/\/ Range: display stores \"YYYY-MM-DD - YYYY-MM-DD\", API expects \"YYYY-MM-DD - YYYY-MM-DD\"\n                    const parts = dateDisplayVal.split(' - ');\n                    if (parts.length === 2 && parts[0] && parts[1]) {\n                        dateParam = `${parts[0].trim()} - ${parts[1].trim()}`;\n                    }\n                } else {\n                    \/\/ Single date: already in YYYY-MM-DD format\n                    dateParam = dateDisplayVal;\n                }\n            }\n\n            if (deptId)    params.set('department_id', deptId);\n            if (assignTo)  params.set('assign_to',     assignTo);\n            \/\/ \u2500\u2500 CHANGE 2: param name changed from 'date' to 'dates' to match the API \u2500\u2500\n            if (dateParam) params.set('dates',          dateParam);\n\n            const res    = await fetch(`${ENDPOINTS.ERRORS_ALL}?${params}`, { headers: getHeaders() });\n            const result = await res.json();\n\n            allData = result?.data?.data\n                   || result?.data\n                   || result?.response\n                   || result?.errors\n                   || [];\n\n            if (!Array.isArray(allData)) allData = [];\n\n            filteredData = [...allData];\n            currentPage  = 1;\n            renderTable();\n\n        } catch (err) {\n            console.error('Fetch errors:', err);\n            showEmpty('Failed to load data. Please try again.');\n        }\n    }\n\n    function doSearch() { fetchErrors(); }\n\n    \/\/ RENDER TABLE\n    function renderTable() {\n        const tbody = document.getElementById('tableBody');\n        const total = filteredData.length;\n\n        if (total === 0) { showEmpty('No records found.'); renderPagination(0); return; }\n\n        const start = (currentPage - 1) * PER_PAGE;\n        const end   = Math.min(start + PER_PAGE, total);\n        const slice = filteredData.slice(start, end);\n\n        tbody.innerHTML = slice.map(row => {\n            const type = (row.type || row.error_type || '').toLowerCase();\n            let badgeClass = 'type-zero';\n            if (type.includes('minor'))    badgeClass = 'type-minor';\n            if (type.includes('critical')) badgeClass = 'type-critical';\n\n            const displayType = row.type || row.error_type || '\u2014';\n            const assignTo    = row.assign_to_name || '\u2014';\n            const createdBy   = row.action_by_name || '\u2014';\n            \/\/ \u2500\u2500 CHANGE 3: Date column mapped to row.date (primary) then row.created_at as fallback \u2500\u2500\n            const date        = formatDate(row.date || row.created_at || '');\n            const desc        = row.description || '\u2013';\n            const errCount    = row.error_count ?? row.count ?? '\u2014';\n            const errWtg      = resolveErrorWtg(row);\n\n            return `\n            <tr>\n                <td>${escHtml(String(assignTo))}<\/td>\n                <td><span class=\"type-badge ${badgeClass}\">${escHtml(displayType)}<\/span><\/td>\n                <td>${errCount}<\/td>\n                <td>${errWtg}<\/td>\n                <td style=\"max-width:320px;white-space:normal;word-break:break-word;overflow-wrap:anywhere;\">${escHtml(desc)}<\/td>\n                <td>${escHtml(String(createdBy))}<\/td>\n                <td style=\"white-space:nowrap;\">${date}<\/td>\n            <\/tr>`;\n        }).join('');\n\n        renderPagination(total);\n    }\n\n    function showLoading() {\n        document.getElementById('tableBody').innerHTML =\n            `<tr class=\"loading-row\"><td colspan=\"7\"><span class=\"spinner\"><\/span> Loading\u2026<\/td><\/tr>`;\n        document.getElementById('totalCount').textContent = '(0)';\n    }\n\n    function showEmpty(msg) {\n        document.getElementById('tableBody').innerHTML =\n            `<tr class=\"empty-row\"><td colspan=\"7\">${msg}<\/td><\/tr>`;\n    }\n\n    \/\/ PAGINATION\n    function renderPagination(total) {\n        const pages = Math.max(1, Math.ceil(total \/ PER_PAGE));\n        totalPages  = pages;\n\n        document.getElementById('totalCount').textContent = `(${total})`;\n        const start = total === 0 ? 0 : (currentPage - 1) * PER_PAGE + 1;\n        const end   = Math.min(currentPage * PER_PAGE, total);\n        document.getElementById('entryInfo').textContent =\n            `Showing ${start} to ${end} of ${total} entries`;\n\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)      goPage(currentPage - 1); };\n        nextBtn.onclick = () => { if (currentPage < pages)  goPage(currentPage + 1); };\n\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 = '\u2026';\n                container.appendChild(span);\n            } else {\n                const span = document.createElement('span');\n                span.className = 'page-num' + (p === currentPage ? ' active' : '');\n                span.textContent = p;\n                span.onclick = () => goPage(p);\n                container.appendChild(span);\n            }\n        });\n    }\n\n    function goPage(p) {\n        currentPage = p;\n        renderTable();\n    }\n\n    \/** \u2500\u2500 UPGRADED RANGE DATE PICKER \u2500\u2500 **\/\n    const dpState = {\n        date: { viewYear: null, viewMonth: null, startDate: null, endDate: null, hoverDate: null, activePreset: 'today' }\n    };\n    const DP_IDS = {\n        date: { dropdown: 'dpDropdown', backdrop: 'dpBackdrop', title: 'dpCalTitle', days: 'dpDays', title2: 'dpCalTitle2', days2: 'dpDays2', display: 'dateDisplay' }\n    };\n    const DP_MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];\n    function dpToday() { const d = new Date(); d.setHours(0,0,0,0); return d; }\n    function dpSameDay(a, b) {\n        if (!a) return false;\n        if (!b) return false;\n        return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();\n    }\n    function dpFmtISO(d) {\n        if (!d) return '';\n        return `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;\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 startDay = new Date(year, month, 1).getDay();\n        const daysInMonth = new Date(year, month + 1, 0).getDate();\n        let html = '';\n        for (let i = 0; i < startDay; i++) html += `<div class=\"dp-day other-month\"><\/div>`;\n        for (let d = 1; d <= daysInMonth; d++) {\n            const cur = new Date(year, month, d);\n            let cls = 'dp-day';\n            if (dpSameDay(cur, today)) cls += ' today';\n            const dayOfWeek = cur.getDay();\n            if (s.startDate) {\n                if (s.endDate) {\n                    if (dpSameDay(cur, s.startDate)) {\n                        cls += ' selected selected-start';\n                    } else if (dpSameDay(cur, s.endDate)) {\n                        cls += ' selected selected-end';\n                    } else if (cur > s.startDate) {\n                        if (cur < s.endDate) {\n                            cls += ' in-range';\n                            if (dayOfWeek === 0) cls += ' row-start';\n                            if (dayOfWeek === 6) cls += ' row-end';\n                        }\n                    }\n                } else if (dpSameDay(cur, s.startDate)) {\n                    cls += ' selected selected-start selected-end';\n                } else if (s.hoverDate) {\n                    let rS = s.startDate, rE = s.hoverDate;\n                    if (rE < rS) { const t = rS; rS = rE; rE = t; }\n                    if (dpSameDay(cur, s.hoverDate)) {\n                        cls += (s.hoverDate < s.startDate) ? ' hover-start hover-range' : ' hover-end hover-range';\n                    } else if (cur > rS) {\n                        if (cur < rE) {\n                            cls += ' hover-range';\n                            if (dayOfWeek === 0) cls += ' row-start';\n                            if (dayOfWeek === 6) cls += ' row-end';\n                        }\n                    }\n                }\n            }\n            html += `<div class=\"${cls}\" onclick=\"dpPickDay(event,${year},${month},${d},'${inst}')\" onmouseover=\"dpHoverDay('${inst}',${year},${month},${d})\">${d}<\/div>`;\n        }\n        return html;\n    }\n\n    function dpPickDay(e, y, m, d, inst) {\n        e.stopPropagation();\n        const s = dpState[inst];\n        const chosen = new Date(y, m, d);\n        if (!s.startDate) {\n            s.startDate = chosen; s.endDate = null;\n        } else if (s.endDate) {\n            s.startDate = chosen; s.endDate = null;\n        } else {\n            if (chosen < s.startDate) { s.endDate = s.startDate; s.startDate = chosen; }\n            else { s.endDate = chosen; }\n        }\n        s.hoverDate = null;\n        document.querySelectorAll(`#${DP_IDS[inst].dropdown} .dp-preset-item`).forEach(el => el.classList.remove('active'));\n        dpRenderCalendar(inst);\n        dpUpdateFooterRange(inst);\n    }\n\n    function dpHoverDay(inst, y, m, d) {\n        const s = dpState[inst];\n        if (s.startDate) {\n            if (!s.endDate) {\n                const h = new Date(y, m, d);\n                if (!dpSameDay(h, s.hoverDate)) {\n                    s.hoverDate = h; dpRenderCalendar(inst);\n                }\n            }\n        }\n    }\n\n    function dpUpdateFooterRange(inst) {\n        const s = dpState[inst];\n        const el = document.getElementById('dpRangeDisplay');\n        if (!el) return;\n        if (s.startDate) {\n            if (s.endDate) el.textContent = `${dpFmtISO(s.startDate)} - ${dpFmtISO(s.endDate)}`;\n            else el.textContent = `${dpFmtISO(s.startDate)} - Select end date`;\n        } else el.textContent = 'Select Date Range';\n    }\n\n    function selectPreset(e, preset, inst) {\n        if (e) e.stopPropagation();\n        const s = dpState[inst];\n        const today = dpToday();\n        document.querySelectorAll(`#${DP_IDS[inst].dropdown} .dp-preset-item`).forEach(el =>\n            el.classList.toggle('active', el.dataset.preset === preset));\n        switch (preset) {\n            case 'today': s.startDate = today; s.endDate = today; break;\n            case 'yesterday': { const y = new Date(today); y.setDate(y.getDate()-1); s.startDate = y; s.endDate = y; break; }\n            case 'last7': { const y = new Date(today); y.setDate(y.getDate()-6); s.startDate = y; s.endDate = today; break; }\n            case 'last30': { const y = new Date(today); y.setDate(y.getDate()-29); s.startDate = y; s.endDate = today; break; }\n            case 'thisMonth': s.startDate = new Date(today.getFullYear(), today.getMonth(), 1); s.endDate = today; break;\n            case 'lastMonth': s.startDate = new Date(today.getFullYear(), today.getMonth()-1, 1); s.endDate = new Date(today.getFullYear(), today.getMonth(), 0); break;\n        }\n        s.viewYear = s.startDate.getFullYear(); s.viewMonth = s.startDate.getMonth();\n        dpRenderCalendar(inst); dpUpdateFooterRange(inst);\n    }\n\n    function dpApply(e, inst) {\n        if (e) e.stopPropagation();\n        const s = dpState[inst];\n        const display = document.getElementById(DP_IDS[inst].display);\n        if (s.startDate) {\n            if (s.endDate) {\n                \/\/ Range: same-day selection \u2192 single date format; different days \u2192 range format\n                if (dpSameDay(s.startDate, s.endDate)) {\n                    display.value = dpFmtISO(s.startDate);           \/\/ Single date: YYYY-MM-DD\n                } else {\n                    display.value = `${dpFmtISO(s.startDate)} - ${dpFmtISO(s.endDate)}`;  \/\/ Range: YYYY-MM-DD - YYYY-MM-DD\n                }\n            } else {\n                \/\/ Only start date selected (no end date picked) \u2192 single date\n                display.value = dpFmtISO(s.startDate);               \/\/ Single date: YYYY-MM-DD\n            }\n        } else {\n            display.value = '';\n        }\n        closeDatePicker(inst);\n    }\n\n    function dpClear(e, inst) {\n        if (e) e.stopPropagation();\n        const s = dpState[inst];\n        s.startDate = s.endDate = null;\n        document.getElementById(DP_IDS[inst].display).value = '';\n        const dropId = DP_IDS[inst].dropdown;\n        document.querySelectorAll(`#${dropId} .dp-preset-item`).forEach(el => el.classList.remove('active'));\n        dpRenderCalendar(inst); dpUpdateFooterRange(inst); closeDatePicker(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 toggleDatePicker(e, inst) {\n        e.stopPropagation();\n        const dd = document.getElementById(DP_IDS[inst].dropdown);\n        if (dd.classList.contains('open')) closeDatePicker(inst);\n        else {\n            const s = dpState[inst];\n            const ref = s.startDate || dpToday();\n            s.viewYear = ref.getFullYear(); s.viewMonth = ref.getMonth();\n            dpRenderCalendar(inst); dpUpdateFooterRange(inst);\n            dd.classList.add('open');\n            document.getElementById(DP_IDS[inst].backdrop).classList.add('show');\n            dd.classList.add('align-right');\n        }\n    }\n\n    function closeDatePicker(inst) {\n        const dd = document.getElementById(DP_IDS[inst].dropdown);\n        const bd = document.getElementById(DP_IDS[inst].backdrop);\n        if (dd) dd.classList.remove('open');\n        if (bd) bd.classList.remove('show');\n    }\n\n\n    \/\/ ADD \u2014 separate add screen (add-general-error.html)\n    function openAddModal() {\n        window.location.href = 'https:\/\/ph-portal-v2.zyneventures.com\/index.php\/add-general-errors\/';\n    }\n\n    \/\/ CSV DOWNLOAD\n    function downloadCSV() {\n        if (!filteredData.length) { showToast('No data to export.', 'error'); return; }\n        const headers = ['Assign To','Type','Error Count','Error WTG','Description','Created By','Date'];\n        const rows = filteredData.map(r => [\n            r.assign_to_name || '',\n            r.type || r.error_type || '',\n            r.error_count ?? r.count ?? '',\n            resolveErrorWtg(r),\n            (r.description || '').replace(\/,\/g, ';'),\n            r.action_by_name || '',\n            \/\/ \u2500\u2500 CHANGE 3 (CSV): same date field priority as table \u2500\u2500\n            formatDate(r.date || r.created_at || ''),\n        ]);\n        const csv = [headers.join(','), ...rows.map(r => r.join(','))].join('\\n');\n        const a   = document.createElement('a');\n        a.href    = 'data:text\/csv;charset=utf-8,' + encodeURIComponent(csv);\n        a.download = 'general_errors.csv';\n        a.click();\n    }\n\n    \/\/ UTILS\n    function formatDate(str) {\n        if (!str) return '\u2014';\n        const d = new Date(str);\n        if (isNaN(d)) return str;\n        const day   = String(d.getDate()).padStart(2, '0');\n        const month = d.toLocaleString('en-US', { month: 'short' });\n        const year  = d.getFullYear();\n        return `${day}-${month}-${year}`;\n    }\n\n    function escHtml(str) {\n        return str.replace(\/&\/g,'&amp;').replace(\/<\/g,'&lt;').replace(\/>\/g,'&gt;').replace(\/\"\/g,'&quot;');\n    }\n\n    function clearFilters() {\n\n    \/\/ Clear hidden values\n    document.getElementById('filterAssignTo').value = '';\n    document.getElementById('filterDepartment').value = '';\n\n    \/\/ Clear date\n    document.getElementById('dateDisplay').value = '';\n\n    \/\/ Reset date picker state\n    dpState.date.startDate = null;\n    dpState.date.endDate = null;\n\n    \/\/ Reset dropdown selections\n    document.querySelectorAll('.custom-select-wrapper').forEach(wrapper => {\n\n        wrapper.querySelectorAll('.custom-select-option')\n            .forEach(opt => opt.classList.remove('selected'));\n\n        const trigger = wrapper.querySelector('.custom-select-trigger');\n        const labelEl = trigger.querySelector('.cs-label');\n\n        const label = wrapper.closest('.filter-group')\n            .querySelector('label')\n            .textContent.trim();\n\n        const inputId = wrapper.id.replace('csWrapper_', '');\n\n        labelEl.innerHTML = `\n            <input\n                type=\"text\"\n                class=\"cs-search-input\"\n                id=\"csInput_${inputId}\"\n                placeholder=\"Select ${label}\"\n                autocomplete=\"off\"\n                oninput=\"csIntegratedFilter('${inputId}', this.value)\"\n                onkeydown=\"csKeyDown(event, '${inputId}')\"\n                onclick=\"csOpenDropdown('${inputId}'); event.stopPropagation();\"\n                onfocus=\"csOpenDropdown('${inputId}')\"\n            >\n        `;\n\n        trigger.classList.add('placeholder-shown');\n    });\n\n    \/\/ Reload all records\n    fetchErrors();\n\n    showToast('Filters cleared');\n}\n    \/\/ INIT\n    (async function init() {\n        await fetchDropdownData();\n        renderFilters();\n        await fetchErrors();\n    })();\n<\/script>\n<\/div><\/div>\n\n<\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>General Errors (0) + Add New General Error + Download CSV Clear Assign To Type Error Count Error WTG Description Created By Date Loading\u2026 \u00ab Previous Next \u00bb Showing 0 to 0 of 0 entries<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"disable","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-167","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ph-portal-v2.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ph-portal-v2.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ph-portal-v2.zyneventures.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ph-portal-v2.zyneventures.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/ph-portal-v2.zyneventures.com\/index.php\/wp-json\/wp\/v2\/comments?post=167"}],"version-history":[{"count":17,"href":"https:\/\/ph-portal-v2.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/167\/revisions"}],"predecessor-version":[{"id":1237,"href":"https:\/\/ph-portal-v2.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/167\/revisions\/1237"}],"wp:attachment":[{"href":"https:\/\/ph-portal-v2.zyneventures.com\/index.php\/wp-json\/wp\/v2\/media?parent=167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}