{"id":200,"date":"2026-03-31T11:22:19","date_gmt":"2026-03-31T11:22:19","guid":{"rendered":"https:\/\/ph-portal.zyneventures.com\/?page_id=200"},"modified":"2026-03-31T11:22:19","modified_gmt":"2026-03-31T11:22:19","slug":"qc-adhoc-assignment","status":"publish","type":"page","link":"https:\/\/ph-portal.zyneventures.com\/index.php\/qc-adhoc-assignment\/","title":{"rendered":"QC Adhoc Assignment"},"content":{"rendered":"<style>.kadence-column200_accd3d-51 > .kt-inside-inner-col,.kadence-column200_accd3d-51 > .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-column200_accd3d-51 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column200_accd3d-51 > .kt-inside-inner-col{flex-direction:column;}.kadence-column200_accd3d-51 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column200_accd3d-51 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column200_accd3d-51{position:relative;}@media all and (max-width: 1024px){.kadence-column200_accd3d-51 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column200_accd3d-51 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column200_accd3d-51\"><div class=\"kt-inside-inner-col\"><style>.kb-row-layout-id200_1c3797-ab > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id200_1c3797-ab > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id200_1c3797-ab > .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-id200_1c3797-ab > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id200_1c3797-ab > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id200_1c3797-ab > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id200_1c3797-ab 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-column200_c4a48e-d7 > .kt-inside-inner-col,.kadence-column200_c4a48e-d7 > .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-column200_c4a48e-d7 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column200_c4a48e-d7 > .kt-inside-inner-col{flex-direction:column;}.kadence-column200_c4a48e-d7 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column200_c4a48e-d7 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column200_c4a48e-d7{position:relative;}@media all and (max-width: 1024px){.kadence-column200_c4a48e-d7 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column200_c4a48e-d7 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column200_c4a48e-d7\"><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            --bg-light: #F7F8FA;\n            --white: #ffffff;\n        }\n\n        body { \n            font-family: 'Sora', sans-serif; \n            background-color: var(--white); \n            color: var(--text-dark); \n        }\n\n        .ph-title { \n            font-size: 21px; \n            font-weight: 500; \n            text-transform: uppercase; \n            margin-bottom: 21px; \n            letter-spacing: 0.5px;\n        }\n\n        \/* Form Grid *\/\n        .filter-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n            gap: 15px;\n            margin-bottom: 20px;\n        }\n\n        .form-group { display: flex; flex-direction: column; }\n        .form-group label { \n            font-size: 12px; \n            margin-bottom: 6px; \n            color: var(--text-dark); \n        }\n\n        .form-control {\n            height: 38px; \n            padding: 0 12px;\n            border: 1px solid #ced4da; \n            border-radius: 6px;\n            font-family: 'Sora'; \n            font-size: 12px;\n            outline: none;\n            box-sizing: border-box;\n            width: 100%;\n        }\n\n        \/* Buttons Row \u2014 fills full width with equal flex *\/\n        .action-row {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 10px;\n            margin-bottom: 25px;\n            width: 100%;\n        }\n        .action-row .btn {\n            flex: 1 1 0;\n            min-width: 90px;\n        }\n\n        .btn {\n            height: 38px; \n            padding: 0 12px; \n            border-radius: 6px;\n            font-size: 12px; \n            cursor: pointer;\n            border: none; \n            transition: 0.2s;\n            display: flex; \n            align-items: center; \n            justify-content: center;\n            white-space: nowrap;\n            box-sizing: border-box;\n        }\n        .btn-clear { background: #D0D7F3; color: #555; }\n        .btn-filter { background: var(--primary-blue); color: white; }\n        .btn-blue { background: var(--primary-blue); color: white; }\n        .btn:hover { opacity: 0.88; }\n\n        \/* Tabs \u2014 overflow hidden to prevent browser scroll spinners *\/\n        .tabs-nav {\n            border-bottom: 1px solid var(--border-color);\n            margin-bottom: 20px; \n            display: flex;\n            gap: 30px;\n            overflow: hidden;\n        }\n        .tab-link {\n            padding: 12px 5px; \n            font-size: 16px;\n            color: var(--text-muted); \n            cursor: pointer; \n            position: relative;\n            white-space: nowrap;\n            flex-shrink: 0;\n        }\n        .tab-link.active { color: var(--text-dark); font-weight: 500; }\n        .tab-link.active::after {\n            content: ''; \n            position: absolute; \n            bottom: -1px; \n            left: 0; \n            width: 100%; \n            height: 3px; \n            background: var(--primary-blue);\n        }\n\n        \/* Table *\/\n        .table-container { \n            overflow-x: auto; \n            border: 1px solid var(--border-color); \n            border-radius: 6px; \n        }\n        table { \n            width: 100%; \n            border-collapse: collapse; \n            font-size: 12px; \n            white-space: nowrap; \n            min-width: 900px; \n        }\n        th { \n            background: var(--bg-light); \n            font-size: 12px;\n            font-weight: 500;\n            padding: 12px 15px; \n            text-align: left; \n            color: var(--text-dark); \n            border-bottom: 1px solid var(--border-color); \n        }\n        td { \n            font-size: 12px;\n            font-weight: 400;\n            padding: 12px 15px; \n            border-bottom: 1px solid #f2f2f2; \n            color: #8D8C9C; \n        }\n\n        \/* Pencil Edit icon button *\/\n        .edit-icon-btn {\n            background: none;\n            border: none;\n            cursor: pointer;\n            padding: 5px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            color: var(--text-muted);\n            border-radius: 4px;\n            transition: background 0.15s, color 0.15s;\n            line-height: 1;\n        }\n        .edit-icon-btn:hover {\n            background: #eef3ff;\n            color: var(--primary-blue);\n        }\n        .edit-icon-btn svg {\n            width: 15px;\n            height: 15px;\n            stroke: currentColor;\n            fill: none;\n            stroke-width: 1.8;\n            stroke-linecap: round;\n            stroke-linejoin: round;\n            display: block;\n        }\n\n        .action-stack { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }\n        .status-pill {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            border-radius: 999px;\n            padding: 4px 12px;\n            font-size: 12px;\n            line-height: 1;\n        }\n        .status-pill.approved { background: #D3EFE8; color: #268A76; }\n        .status-pill.pending { \n            background: transparent; \n            color: var(--text-muted); \n            padding: 0; border-radius: 0; \n        }\n\n        \/* Pagination Footer *\/\n        .pagination-footer {\n            margin-top: 20px;\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            color: var(--text-muted);\n            font-size: 12px;\n            flex-wrap: wrap;\n            gap: 15px;\n        }\n        .pagination-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }\n        .page-num {\n            cursor: pointer; \n            width: 32px; \n            height: 32px;\n            display: flex; \n            align-items: center; \n            justify-content: center;\n            border-radius: 50%; \n            font-weight: 400; \n            transition: 0.2s;\n        }\n        .page-num:hover { background: #f0f0f0; }\n        .page-num.active { background: var(--primary-blue); color: white; }\n        .dots { padding: 0 5px; }\n        .nav-btn { \n            cursor: pointer; \n            color: var(--text-dark); \n            font-weight: 400; \n            padding: 5px 10px; \n            user-select: none; \n        }\n        .nav-btn.disabled { color: #ccc; pointer-events: none; }\n\n        \/* Modal Overlays *\/\n        .modal-overlay {\n            position: fixed; \n            top: 0; \n            left: 0; \n            width: 100%; \n            height: 100%;\n            background: rgba(0,0,0,0.5); \n            display: none;\n            justify-content: center; \n            align-items: flex-start; \n            z-index: 1000;\n            padding: 40px 20px; \n            overflow-y: auto; \n            box-sizing: border-box;\n        }\n        .modal-content {\n            background: white; \n            width: 100%; \n            max-width: 900px;\n            border-radius: 6px; \n            padding: 25px; \n            position: relative;\n            margin-bottom: 20px;\n        }\n        .modal-header { font-size: 21px; font-weight: 500; margin-bottom: 20px; color: #333; }\n        .modal-grid {\n            display: grid; \n            grid-template-columns: repeat(4, 1fr); \n            gap: 15px;\n        }\n        .modal-footer {\n            margin-top: 25px; \n            display: flex; \n            justify-content: flex-end; \n            gap: 15px;\n        }\n\n        .required::after { content: \" *\"; color: red; }\n\n        \/* Hidden CSV file input *\/\n        #csvImportInput { display: none; }\n\n        \/* Custom Date Picker *\/\n        .date-wrapper {\n            position: relative;\n        }\n        .date-wrapper input[type=\"text\"] {\n            width: 100%;\n            padding: 10px 36px 10px 14px;\n            border: 1px solid #E0E0E0;\n            border-radius: 6px;\n            font-family: 'Sora', sans-serif;\n            font-size: 12px;\n            color: var(--text-dark);\n            outline: none;\n            cursor: pointer;\n            background: #fff;\n            transition: border-color 0.2s;\n            user-select: none;\n            height: 38px;\n            box-sizing: border-box;\n        }\n        .date-wrapper input[type=\"text\"]:focus { border-color: var(--primary-blue); }\n        .date-wrapper input[type=\"text\"]::placeholder { color: #aaa; }\n        .date-wrapper .cal-icon {\n            position: absolute;\n            right: 12px;\n            top: 50%;\n            transform: translateY(-50%);\n            pointer-events: none;\n            color: #8D8C9C;\n        }\n\n        \/* Custom Date Picker Dropdown *\/\n        .dp-dropdown {\n            display: none;\n            position: absolute;\n            top: calc(100% + 6px);\n            left: 0;\n            z-index: 2000;\n            background: #fff;\n            border: 1px solid #E0E0E0;\n            border-radius: 10px;\n            box-shadow: 0 8px 28px rgba(0,0,0,0.13);\n            flex-direction: row;\n            width: 680px;\n            max-width: calc(100vw - 24px);\n            overflow: hidden;\n        }\n        .dp-dropdown.open { display: flex; }\n        .dp-dropdown.align-right { left: auto; right: 0; }\n\n        .dp-backdrop {\n            display: none;\n            position: fixed;\n            inset: 0;\n            z-index: 1999;\n        }\n        .dp-backdrop.show { display: block; }\n\n        .dp-presets {\n            width: 100px;\n            background: #fff;\n            border-right: 1px solid #EFEFEF;\n            padding: 3px 0;\n            flex-shrink: 0;\n        }\n        .dp-preset-item {\n            padding: 8px 12px;\n            font-size: 12px;\n            color: var(--text-dark);\n            cursor: pointer;\n            transition: background 0.15s, color 0.15s;\n            white-space: nowrap;\n        }\n        .dp-preset-item:hover { background: #f4f6fb; }\n        .dp-preset-item.active {\n            background: var(--primary-blue);\n            color: #fff;\n            font-weight: 500;\n        }\n\n        \/* 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        \/* Responsive *\/\n        @media (max-width: 1024px) {\n            .modal-grid { grid-template-columns: repeat(3, 1fr); }\n        }\n        @media (max-width: 768px) {\n            body { padding: 12px; }\n            .modal-grid { grid-template-columns: repeat(2, 1fr); }\n            .filter-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }\n            .pagination-footer { justify-content: center; }\n            .action-row { gap: 8px; }\n            .btn { font-size: 11px; }\n            .tabs-nav { gap: 16px; }\n        }\n        @media (max-width: 480px) {\n            .modal-grid { grid-template-columns: 1fr 1fr; }\n            .filter-grid { grid-template-columns: 1fr; }\n            .tabs-nav { gap: 12px; }\n            .action-row .btn { flex: 1 1 calc(50% - 5px); }\n        }\n    <\/style>\n\n\n    <div class=\"ph-title\" id=\"pageHeading\">Assigned Assignment<\/div> <br>\n\n    <div class=\"filter-grid\" id=\"filterForm\"><\/div>\n\n    <div class=\"action-row\" id=\"btnGroup\"><\/div>\n\n    <!-- Hidden CSV Import Input -->\n    <input type=\"file\" id=\"csvImportInput\" accept=\".csv\" onchange=\"handleCSVImport(event)\">\n\n    <div class=\"tabs-nav\">\n        <div class=\"tab-link\" id=\"tab-assigned\" onclick=\"toggleTab('assigned')\">Assigned Assignment<\/div>\n        <div class=\"tab-link active\" id=\"tab-adhoc\" onclick=\"toggleTab('adhoc')\">Ad Hoc Assignment<\/div>\n    <\/div>\n\n    <div class=\"table-container\">\n        <table>\n            <thead id=\"tblHead\"><\/thead>\n            <tbody id=\"tblBody\"><\/tbody>\n        <\/table>\n    <\/div>\n\n    <!-- Pagination Footer -->\n    <div class=\"pagination-footer\">\n        <div class=\"pagination-controls\">\n            <span id=\"prevBtn\" class=\"nav-btn disabled\">\u00ab Previous<\/span>\n            <div id=\"pageNumbers\" style=\"display:flex; gap:5px; align-items:center; flex-wrap:wrap;\"><\/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    <div id=\"modalAssigned\" class=\"modal-overlay\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">Edit Assigned Assignments<\/div>\n            <div class=\"modal-grid\" id=\"assignedModalFields\"><\/div>\n            <div class=\"modal-footer\">\n                <button class=\"btn btn-clear\" onclick=\"closeModals()\">Close<\/button>\n                <button class=\"btn btn-blue\" style=\"width: 200px;\" onclick=\"updateAssignment()\">Edit Assignment<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div id=\"modalAdhoc\" class=\"modal-overlay\">\n        <div class=\"modal-content\">\n            <div class=\"modal-header\">Edit Ad Hoc Assignment | Admin<\/div>\n            <div class=\"modal-grid\" id=\"adhocModalFields\"><\/div>\n            <div class=\"modal-footer\">\n                <button class=\"btn btn-clear\" onclick=\"closeModals()\">Close<\/button>\n                <button class=\"btn btn-blue\" style=\"width: 150px;\" onclick=\"updateAdHoc()\">Submit<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        \/** ENDPOINTS CONFIGURATION **\/\n        const BASE_URL = 'https:\/\/api-ph-portal.zyneventures.com\/api\/v1';\n        const ENDPOINTS = {\n            UNSUBMITTED: `${BASE_URL}\/work_assignment\/un-submitted`,\n            ADHOC_ALL: `${BASE_URL}\/ad_hoc_assignment\/all`,\n            USERS: `${BASE_URL}\/user\/table\/list`,\n            CLIENTS: `${BASE_URL}\/client\/all`,\n            ENTITIES: `${BASE_URL}\/entity\/all`,\n            CATEGORIES: `${BASE_URL}\/category\/table\/list`,\n            PROJECTS: `${BASE_URL}\/project\/all`,\n            ACCOUNTS: `${BASE_URL}\/accountandbenchmark\/tableList`,\n            UPDATE_ASSIGNMENT: `${BASE_URL}\/work_assignment\/update`,\n            UPDATE_ADHOC: `${BASE_URL}\/ad_hoc_assignment\/update`\n        };\n\n        let activeView = 'adhoc';\n        let currentPage = 1;\n        let totalPages = 1;\n        let currentTotalRecords = 0;\n        let currentPerPage = 25;\n        let lastFetchedRows = [];\n        let lastFetchedHeaders = [];\n\n        let dropDownData = { users: [], entities: [], clients: [], accounts: [], categories: [], projects: [] };\n\n        const getHeaders = () => ({\n            'Content-Type': 'application\/json',\n            'Authorization': `Bearer ${localStorage.getItem('TOKEN')}`\n        });\n\n        const extractListData = (payload) => {\n            if (Array.isArray(payload?.data)) return payload.data;\n            if (Array.isArray(payload?.data?.data)) return payload.data.data;\n            if (Array.isArray(payload?.data?.data?.data)) return payload.data.data.data;\n            return [];\n        };\n\n        const extractPaginationInfo = (payload, fallbackLimit) => {\n            const directPages = Number(\n                payload?.pagination?.pages ||\n                payload?.data?.pagination?.pages ||\n                payload?.last_page ||\n                payload?.data?.last_page ||\n                0\n            );\n\n            const limit = Number(\n                payload?.pagination?.limit ||\n                payload?.data?.pagination?.limit ||\n                payload?.per_page ||\n                payload?.data?.per_page ||\n                payload?.data?.perPage ||\n                fallbackLimit\n            );\n\n            if (Number.isFinite(directPages) && directPages > 0) {\n                return { pages: directPages, limit: Number.isFinite(limit) && limit > 0 ? limit : fallbackLimit };\n            }\n\n            const total = Number(\n                payload?.pagination?.total ||\n                payload?.data?.pagination?.total ||\n                payload?.total ||\n                payload?.data?.total ||\n                0\n            );\n\n            const safeLimit = Number.isFinite(limit) && limit > 0 ? limit : fallbackLimit;\n            const derivedPages = total > 0 ? Math.ceil(total \/ safeLimit) : 1;\n\n            return { pages: Math.max(1, derivedPages), limit: safeLimit };\n        };\n\n        async function fetchAllPages(endpoint) {\n            const defaultLimit = 500;\n            const buildUrl = (page, limit = defaultLimit) => {\n                const url = new URL(endpoint);\n                url.searchParams.set('page', String(page));\n                url.searchParams.set('limit', String(limit));\n                return url.toString();\n            };\n\n            const firstRes = await fetch(buildUrl(1, defaultLimit), { headers: getHeaders() });\n            const firstJson = await firstRes.json();\n\n            let allItems = extractListData(firstJson);\n            const { pages, limit } = extractPaginationInfo(firstJson, defaultLimit);\n\n            if (pages > 1) {\n                const pageRequests = [];\n                for (let page = 2; page <= pages; page++) {\n                    pageRequests.push(\n                        fetch(buildUrl(page, limit), { headers: getHeaders() })\n                            .then(r => r.json())\n                            .catch(() => null)\n                    );\n                }\n\n                const otherPages = await Promise.all(pageRequests);\n                otherPages.forEach(pageData => {\n                    if (pageData) allItems = allItems.concat(extractListData(pageData));\n                });\n            }\n\n            return allItems;\n        }\n\n        \/\/ Initialize App\n        async function init() {\n            await fetchDropdownData();\n            renderUI();\n            fetchAdhocTableData();\n        }\n\n        async function fetchDropdownData() {\n            try {\n                const [u, e, c, a, cat, p] = await Promise.all([\n                    fetchAllPages(ENDPOINTS.USERS),\n                    fetchAllPages(ENDPOINTS.ENTITIES),\n                    fetchAllPages(ENDPOINTS.CLIENTS),\n                    fetch(ENDPOINTS.ACCOUNTS, { headers: getHeaders() }).then(r => r.json()),\n                    fetchAllPages(ENDPOINTS.CATEGORIES),\n                    fetchAllPages(ENDPOINTS.PROJECTS)\n                ]);\n                dropDownData.users = Array.isArray(u) ? u : [];\n                dropDownData.entities = Array.isArray(e) ? e : [];\n                dropDownData.clients = Array.isArray(c) ? c : [];\n                dropDownData.accounts = Array.isArray(a) ? a : extractListData(a);\n                dropDownData.categories = Array.isArray(cat) ? cat : [];\n                dropDownData.projects = Array.isArray(p) ? p : [];\n            } catch (err) { console.error(\"Dropdown fetch error\", err); }\n        }\n\n        \/* Pencil SVG \u2014 inline so it inherits stroke color *\/\n        const editIconSVG = `<svg viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"\/><path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"\/><\/svg>`;\n\n        function renderUI() {\n            const isAssigned = activeView === 'assigned';\n            document.getElementById('pageHeading').innerText = isAssigned ? \"Assigned Assignment\" : \"Ad Hoc Assignments\";\n            \n            \/\/ Render Filters\n            const form = document.getElementById('filterForm');\n            if(isAssigned) {\n                form.style.gridTemplateColumns = '';\n                form.innerHTML = `\n                    ${renderSelect('Assigned to', 'filterAssignedTo', dropDownData.users, 'name', 'id')}\n                    ${renderSelect('Entity', 'filterEntity', dropDownData.entities, 'entity', 'id')}\n                    ${renderSelect('Client', 'filterClient', dropDownData.clients, 'name', 'id')}\n                    ${renderSelect('Account', 'filterAccount', dropDownData.accounts, 'name', 'id')}\n                    ${renderSelect('Category', 'filterCategory', dropDownData.categories, 'category', 'id')}\n                    ${renderSelect('Project', 'filterProject', dropDownData.projects, 'name', 'id')}\n                    <div class=\"form-group\"><label>Select Date<\/label>\n                        <div class=\"date-wrapper\" id=\"dpWrapperAssigned\">\n                            <input type=\"text\" id=\"filterDate\" placeholder=\"Select Date\" readonly onclick=\"toggleDatePicker(event,'assigned')\">\n                            <svg class=\"cal-icon\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n                                <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/>\n                                <line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/>\n                                <line x1=\"8\"  y1=\"2\" x2=\"8\"  y2=\"6\"\/>\n                                <line x1=\"3\"  y1=\"10\" x2=\"21\" y2=\"10\"\/>\n                            <\/svg>\n                            <div class=\"dp-backdrop\" id=\"dpBackdropAssigned\" onclick=\"closeDatePicker('assigned')\"><\/div>\n                            <div class=\"dp-dropdown\" id=\"dpDropdownAssigned\">\n                                <div class=\"dp-presets\">\n                                    <div class=\"dp-preset-item active\" data-preset=\"today\"     onclick=\"selectPreset(event,'today','assigned')\">Today<\/div>\n                                    <div class=\"dp-preset-item\"       data-preset=\"yesterday\"  onclick=\"selectPreset(event,'yesterday','assigned')\">Yesterday<\/div>\n                                    <div class=\"dp-preset-item\"       data-preset=\"last7\"      onclick=\"selectPreset(event,'last7','assigned')\">Last 7 Days<\/div>\n                                    <div class=\"dp-preset-item\"       data-preset=\"last30\"     onclick=\"selectPreset(event,'last30','assigned')\">Last 30 Days<\/div>\n                                    <div class=\"dp-preset-item\"       data-preset=\"thisMonth\"  onclick=\"selectPreset(event,'thisMonth','assigned')\">This Month<\/div>\n                                    <div class=\"dp-preset-item\"       data-preset=\"lastMonth\"  onclick=\"selectPreset(event,'lastMonth','assigned')\">Last Month<\/div>\n                                <\/div>\n                                <div class=\"dp-calendars-wrap\">\n                                    <div class=\"dp-months-row\">\n                                        <div class=\"dp-calendar\">\n                                            <div class=\"dp-cal-header\">\n                                                <button class=\"dp-nav-btn\" onclick=\"dpChangeMonth(event,-1,'assigned')\">&#8249;<\/button>\n                                                <span class=\"dp-cal-title\" id=\"dpCalTitleAssigned\"><\/span>\n                                                <button class=\"dp-nav-btn dp-nav-hidden\">&#8250;<\/button>\n                                            <\/div>\n                                            <div class=\"dp-weekdays\">\n                                                <div class=\"dp-weekday\">Su<\/div><div class=\"dp-weekday\">Mo<\/div>\n                                                <div class=\"dp-weekday\">Tu<\/div><div class=\"dp-weekday\">We<\/div>\n                                                <div class=\"dp-weekday\">Th<\/div><div class=\"dp-weekday\">Fr<\/div>\n                                                <div class=\"dp-weekday\">Sa<\/div>\n                                            <\/div>\n                                            <div class=\"dp-days\" id=\"dpDaysAssigned\"><\/div>\n                                        <\/div>\n                                        <div class=\"dp-calendar\">\n                                            <div class=\"dp-cal-header\">\n                                                <button class=\"dp-nav-btn dp-nav-hidden\">&#8249;<\/button>\n                                                <span class=\"dp-cal-title\" id=\"dpCalTitleAssigned2\"><\/span>\n                                                <button class=\"dp-nav-btn\" onclick=\"dpChangeMonth(event,1,'assigned')\">&#8250;<\/button>\n                                            <\/div>\n                                            <div class=\"dp-weekdays\">\n                                                <div class=\"dp-weekday\">Su<\/div><div class=\"dp-weekday\">Mo<\/div>\n                                                <div class=\"dp-weekday\">Tu<\/div><div class=\"dp-weekday\">We<\/div>\n                                                <div class=\"dp-weekday\">Th<\/div><div class=\"dp-weekday\">Fr<\/div>\n                                                <div class=\"dp-weekday\">Sa<\/div>\n                                            <\/div>\n                                            <div class=\"dp-days\" id=\"dpDaysAssigned2\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"dp-footer\">\n                                        <button class=\"dp-btn-clear\" onclick=\"dpClear(event,'assigned')\">Clear<\/button>\n                                        <button class=\"dp-btn-apply\" onclick=\"dpApply(event,'assigned')\">Apply<\/button>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"form-group\"><label>Per Page<\/label><select id=\"filterPerPage\" class=\"form-control\"><option value=\"25\">25<\/option><option value=\"50\">50<\/option><option value=\"100\">100<\/option><\/select><\/div>\n                `;\n            } else {\n                form.style.gridTemplateColumns = 'repeat(3, 1fr)';\n                form.innerHTML = `\n                    ${renderSelect('Assigned to', 'filterAssignedToAdhoc', dropDownData.users, 'name', 'id')}\n                    <div class=\"form-group\">\n                        <label>Status<\/label>\n                        <select id=\"filterStatusAdhoc\" class=\"form-control\">\n                            <option value=\"all\">All<\/option>\n                            <option value=\"pending\">Pending<\/option>\n                            <option value=\"approve\">Approve<\/option>\n                            <option value=\"not approve\">Not Approve<\/option>\n                            <option value=\"0\">0<\/option>\n                            <option value=\"1\">1<\/option>\n                        <\/select>\n                    <\/div>\n                    <div class=\"form-group\"><label>Select Date<\/label>\n                        <div class=\"date-wrapper\" id=\"dpWrapperAdhoc\">\n                            <input type=\"text\" id=\"filterAdhocDate\" placeholder=\"Select Date\" readonly onclick=\"toggleDatePicker(event,'adhoc')\">\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=\"dpBackdropAdhoc\" onclick=\"closeDatePicker('adhoc')\"><\/div>\n                            <div class=\"dp-dropdown\" id=\"dpDropdownAdhoc\">\n                                <div class=\"dp-presets\">\n                                    <div class=\"dp-preset-item active\" data-preset=\"today\"     onclick=\"selectPreset(event,'today','adhoc')\">Today<\/div>\n                                    <div class=\"dp-preset-item\"       data-preset=\"yesterday\"  onclick=\"selectPreset(event,'yesterday','adhoc')\">Yesterday<\/div>\n                                    <div class=\"dp-preset-item\"       data-preset=\"last7\"      onclick=\"selectPreset(event,'last7','adhoc')\">Last 7 Days<\/div>\n                                    <div class=\"dp-preset-item\"       data-preset=\"last30\"     onclick=\"selectPreset(event,'last30','adhoc')\">Last 30 Days<\/div>\n                                    <div class=\"dp-preset-item\"       data-preset=\"thisMonth\"  onclick=\"selectPreset(event,'thisMonth','adhoc')\">This Month<\/div>\n                                    <div class=\"dp-preset-item\"       data-preset=\"lastMonth\"  onclick=\"selectPreset(event,'lastMonth','adhoc')\">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,'adhoc')\">&#8249;<\/button>\n                                                <span class=\"dp-cal-title\" id=\"dpCalTitleAdhoc\"><\/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=\"dpDaysAdhoc\"><\/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=\"dpCalTitleAdhoc2\"><\/span>\n                                                <button class=\"dp-nav-btn\" onclick=\"dpChangeMonth(event,1,'adhoc')\">&#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=\"dpDaysAdhoc2\"><\/div>\n                                        <\/div>\n                                    <\/div>\n                                    <div class=\"dp-footer\">\n                                        <button class=\"dp-btn-clear\" onclick=\"dpClear(event,'adhoc')\">Clear<\/button>\n                                        <button class=\"dp-btn-apply\" onclick=\"dpApply(event,'adhoc')\">Apply<\/button>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    <div class=\"form-group\" style=\"display:none;\"><label>Per Page<\/label><select id=\"filterPerPageAdhoc\" class=\"form-control\"><option value=\"25\">25<\/option><option value=\"50\">50<\/option><option value=\"100\">100<\/option><\/select><\/div>\n                `;\n            }\n\n            \/\/ Render Buttons \u2014 flex:1 on each fills full row width\n            const btns = isAssigned ? \n                ['Clear', 'Filter', '+ Add New Assignment', '+ CSV Import', '+ CSV Download'] : \n                ['Clear', 'Filter', '+ CSV Download', '+ CSV Import'];\n            \n            document.getElementById('btnGroup').innerHTML = btns.map(b => \n                `<button class=\"btn ${b === 'Filter' ? 'btn-filter' : (b === 'Clear' ? 'btn-clear' : 'btn-blue')}\" onclick=\"handleActionClick('${b}')\">${b}<\/button>`\n            ).join('');\n\n            \/\/ Table Headers\n            const headers = isAssigned ? \n                ['Assigned Date', 'Hrs', 'Assigned To', 'Pseudo Name', 'File Name', 'Received On', 'Insurance', 'Account', 'Project', 'Entity', 'Client', 'Category', 'Assigned DOS', 'Action'] :\n                ['Date', 'Client', 'Project', 'Work Type', 'Desc.', 'Comments', 'Time Utilized', 'Time Approved', 'Created By', 'Updated By', 'Updated At', 'Action'];\n            \n            lastFetchedHeaders = headers.filter(h => h !== 'Action');\n            document.getElementById('tblHead').innerHTML = `<tr>${headers.map(h => `<th>${h}<\/th>`).join('')}<\/tr>`;\n\n            const perPageEl = document.getElementById('filterPerPage');\n            if (perPageEl) {\n                perPageEl.onchange = () => fetchTableData(1);\n            }\n\n            const perPageAdhocEl = document.getElementById('filterPerPageAdhoc');\n            if (perPageAdhocEl) {\n                perPageAdhocEl.onchange = () => fetchAdhocTableData(1);\n            }\n        }\n\n        function renderSelect(label, selectId, data, labelKey, valueKey = 'id') {\n            return `\n                <div class=\"form-group\">\n                    <label>${label}<\/label>\n                    <select id=\"${selectId}\" class=\"form-control\">\n                        <option value=\"\">Select ${label}<\/option>\n                        ${data.map(item => `<option value=\"${item[valueKey] ?? ''}\">${item[labelKey] ?? ''}<\/option>`).join('')}\n                    <\/select>\n                <\/div>\n            `;\n        }\n\n        function safeText(value) {\n            if (value === null || value === undefined || value === '') return '-';\n            return String(value)\n                .replaceAll('&', '&amp;')\n                .replaceAll('<', '&lt;')\n                .replaceAll('>', '&gt;')\n                .replaceAll('\"', '&quot;')\n                .replaceAll(\"'\", '&#039;');\n        }\n\n        function getFilterValue(id) {\n            const el = document.getElementById(id);\n            return el ? el.value : '';\n        }\n\n        function getAssignedFilters() {\n            return {\n                assigned_to: getFilterValue('filterAssignedTo'),\n                entity_id: getFilterValue('filterEntity'),\n                client_id: getFilterValue('filterClient'),\n                account_id: getFilterValue('filterAccount'),\n                category_id: getFilterValue('filterCategory'),\n                project_id: getFilterValue('filterProject'),\n                assigned_date: getFilterValue('filterDate'),\n                perPage: getFilterValue('filterPerPage') || '25'\n            };\n        }\n\n        function buildUnsubmittedUrl(page = 1) {\n            const filters = getAssignedFilters();\n            const url = new URL(ENDPOINTS.UNSUBMITTED);\n            url.searchParams.set('page', String(page));\n            url.searchParams.set('perPage', String(filters.perPage));\n\n            Object.entries(filters).forEach(([key, value]) => {\n                if (key !== 'perPage' && value !== '') {\n                    url.searchParams.set(key, value);\n                }\n            });\n\n            return url;\n        }\n\n        function getAdhocFilters() {\n            return {\n                assigned_to: getFilterValue('filterAssignedToAdhoc'),\n                status: getFilterValue('filterStatusAdhoc') || 'all',\n                date: getFilterValue('filterAdhocDate'),\n                perPage: getFilterValue('filterPerPageAdhoc') || '25'\n            };\n        }\n\n        function isPositiveIntegerString(value) {\n            return \/^\\d+$\/.test(String(value)) && Number(value) > 0;\n        }\n\n        function buildAdhocUrl(page = 1) {\n            const filters = getAdhocFilters();\n            const url = new URL(ENDPOINTS.ADHOC_ALL);\n            const pageValue = isPositiveIntegerString(page) ? String(page) : '1';\n            const perPageValue = isPositiveIntegerString(filters.perPage) ? String(filters.perPage) : '25';\n\n            url.searchParams.set('page', pageValue);\n            url.searchParams.set('limit', perPageValue);\n            url.searchParams.set('perPage', perPageValue);\n\n            if (filters.assigned_to) {\n                url.searchParams.set('assigned_to', filters.assigned_to);\n            }\n\n            const allowedStatus = new Set(['pending', 'approve', 'not approve', '0', '1', 'all']);\n            if (allowedStatus.has(filters.status)) {\n                url.searchParams.set('status', filters.status);\n            }\n\n            if (filters.date) {\n                url.searchParams.set('dates', filters.date);\n            }\n\n            return url;\n        }\n\n        function clearAssignedFilters() {\n            ['filterAssignedTo', 'filterEntity', 'filterClient', 'filterAccount', 'filterCategory', 'filterProject', 'filterDate']\n                .forEach(id => {\n                    const el = document.getElementById(id);\n                    if (el) el.value = '';\n                });\n\n            \/\/ Also clear the date picker state for assigned\n            dpState.assigned.selectedDate = null;\n            dpState.assigned.activePreset = null;\n\n            const perPageEl = document.getElementById('filterPerPage');\n            if (perPageEl) perPageEl.value = '25';\n        }\n\n        function clearAdhocFilters() {\n            ['filterAssignedToAdhoc', 'filterStatusAdhoc', 'filterAdhocDate']\n                .forEach(id => {\n                    const el = document.getElementById(id);\n                    if (!el) return;\n                    if (id === 'filterStatusAdhoc') {\n                        el.value = 'all';\n                    } else {\n                        el.value = '';\n                    }\n                });\n\n            \/\/ Also clear the date picker state for adhoc\n            dpState.adhoc.selectedDate = null;\n            dpState.adhoc.activePreset = null;\n\n            const perPageEl = document.getElementById('filterPerPageAdhoc');\n            if (perPageEl) perPageEl.value = '25';\n        }\n\n        function handleActionClick(action) {\n            if (action === 'Filter') {\n                if (activeView === 'assigned') {\n                    fetchTableData(1);\n                } else {\n                    fetchAdhocTableData(1);\n                }\n                return;\n            }\n\n            if (action === 'Clear') {\n                if (activeView === 'assigned') {\n                    clearAssignedFilters();\n                    fetchTableData(1);\n                } else {\n                    clearAdhocFilters();\n                    fetchAdhocTableData(1);\n                }\n                return;\n            }\n\n            if (action === '+ Add New Assignment') {\n                window.location.href = 'https:\/\/ph-portal.zyneventures.com\/index.php\/assign-work\/';\n                return;\n            }\n\n            if (action === '+ CSV Import') {\n                document.getElementById('csvImportInput').value = '';\n                document.getElementById('csvImportInput').click();\n                return;\n            }\n\n            if (action === '+ CSV Download') {\n                downloadCSV();\n                return;\n            }\n        }\n\n        \/* \u2500\u2500\u2500 CSV IMPORT \u2500\u2500\u2500 *\/\n        function handleCSVImport(event) {\n            const file = event.target.files[0];\n            if (!file) return;\n            if (!file.name.toLowerCase().endsWith('.csv')) {\n                alert('Please select a valid .csv file.');\n                return;\n            }\n\n            const reader = new FileReader();\n            reader.onload = function(e) {\n                const text = e.target.result;\n                const lines = text.trim().split('\\n');\n                if (lines.length < 2) {\n                    alert('CSV file is empty or has no data rows.');\n                    return;\n                }\n\n                const headerRow = lines[0].split(',').map(h => h.trim().replace(\/^\"|\"$\/g, ''));\n                const dataRows = lines.slice(1).map(line => {\n                    return line.split(',').map(cell => cell.trim().replace(\/^\"|\"$\/g, ''));\n                }).filter(row => row.some(cell => cell !== ''));\n\n                if (dataRows.length === 0) {\n                    alert('No data rows found in CSV.');\n                    return;\n                }\n\n                document.getElementById('tblHead').innerHTML = `<tr>${headerRow.map(h => `<th>${h}<\/th>`).join('')}<\/tr>`;\n                document.getElementById('tblBody').innerHTML = dataRows.map(row =>\n                    `<tr>${row.map(cell => `<td>${cell || '-'}<\/td>`).join('')}<\/tr>`\n                ).join('');\n\n                updatePaginationDisplay({ total: dataRows.length, pages: 1, perPage: dataRows.length }, 1);\n                alert(`CSV imported successfully: ${dataRows.length} row(s) loaded.`);\n            };\n            reader.onerror = function() {\n                alert('Failed to read the CSV file.');\n            };\n            reader.readAsText(file);\n        }\n\n        \/* \u2500\u2500\u2500 CSV DOWNLOAD \u2500\u2500\u2500 *\/\n        function downloadCSV() {\n            if (!lastFetchedRows || lastFetchedRows.length === 0) {\n                alert('No data available to download. Please load the table first.');\n                return;\n            }\n\n            const headers = lastFetchedHeaders;\n            const csvLines = [headers.join(',')];\n\n            lastFetchedRows.forEach(row => {\n                const values = headers.map(h => {\n                    const key = headerToKey(h);\n                    const val = row[key] !== undefined && row[key] !== null ? String(row[key]) : '';\n                    return `\"${val.replace(\/\"\/g, '\"\"')}\"`;\n                });\n                csvLines.push(values.join(','));\n            });\n\n            const csvContent = csvLines.join('\\n');\n            const blob = new Blob([csvContent], { type: 'text\/csv;charset=utf-8;' });\n            const url = URL.createObjectURL(blob);\n            const link = document.createElement('a');\n            link.href = url;\n            link.download = `${activeView === 'assigned' ? 'assigned_assignments' : 'adhoc_assignments'}_page${currentPage}.csv`;\n            document.body.appendChild(link);\n            link.click();\n            document.body.removeChild(link);\n            URL.revokeObjectURL(url);\n        }\n\n        function headerToKey(header) {\n            const map = {\n                'Assigned Date': 'assigned_date',\n                'Hrs': 'hours',\n                'Assigned To': 'assigned_to_name',\n                'Pseudo Name': 'pesudo_name',\n                'File Name': 'file_name',\n                'Received On': 'received_on',\n                'Insurance': 'insurance_name',\n                'Account': 'account_name',\n                'Project': 'project_name',\n                'Entity': 'entity_name',\n                'Client': 'client_name',\n                'Category': 'category_name',\n                'Assigned DOS': 'assigned_dos',\n                'Date': 'date',\n                'Work Type': 'ad_hoc_work_type',\n                'Desc.': 'description',\n                'Comments': 'comments',\n                'Time Utilized': 'time_utilized_display',\n                'Time Approved': 'time_approved_display',\n                'Created By': 'created_by_name',\n                'Updated By': 'approved_by_name',\n                'Updated At': 'updated_at'\n            };\n            return map[header] || header.toLowerCase().replace(\/\\s+\/g, '_');\n        }\n\n        \/* \u2500\u2500\u2500 PAGINATION RENDER \u2500\u2500\u2500 *\/\n        function renderPagination(meta, page) {\n            currentPage = page;\n            currentTotalRecords = Number(meta.total) || 0;\n            currentPerPage = Number(meta.perPage || meta.limit || meta.per_page) || 25;\n            totalPages = Number(meta.pages) || Math.ceil(currentTotalRecords \/ currentPerPage) || 1;\n\n            const prevBtn = document.getElementById('prevBtn');\n            const nextBtn = document.getElementById('nextBtn');\n            const container = document.getElementById('pageNumbers');\n            container.innerHTML = '';\n\n            prevBtn.className = currentPage === 1 ? 'nav-btn disabled' : 'nav-btn';\n            prevBtn.onclick = currentPage === 1 ? null : () => {\n                if (activeView === 'assigned') fetchTableData(currentPage - 1);\n                else fetchAdhocTableData(currentPage - 1);\n            };\n\n            nextBtn.className = currentPage === totalPages ? 'nav-btn disabled' : 'nav-btn';\n            nextBtn.onclick = currentPage === totalPages ? null : () => {\n                if (activeView === 'assigned') fetchTableData(currentPage + 1);\n                else fetchAdhocTableData(currentPage + 1);\n            };\n\n            let pages = [];\n            if (totalPages <= 5) {\n                for (let i = 1; i <= totalPages; i++) pages.push(i);\n            } else {\n                pages.push(1);\n                if (currentPage > 3) pages.push('...');\n\n                let start = Math.max(2, currentPage - 1);\n                let end = Math.min(totalPages - 1, currentPage + 1);\n\n                if (currentPage <= 2) end = 4;\n                if (currentPage >= totalPages - 1) start = totalPages - 3;\n\n                for (let i = start; i <= end; i++) {\n                    if (!pages.includes(i)) pages.push(i);\n                }\n\n                if (currentPage < totalPages - 2) pages.push('...');\n                if (!pages.includes(totalPages)) pages.push(totalPages);\n            }\n\n            pages.forEach(p => {\n                if (p === '...') {\n                    const span = document.createElement('span');\n                    span.className = 'dots';\n                    span.textContent = '...';\n                    container.appendChild(span);\n                } else {\n                    const span = document.createElement('span');\n                    span.className = p === currentPage ? 'page-num active' : 'page-num';\n                    span.textContent = p;\n                    span.onclick = () => {\n                        if (activeView === 'assigned') fetchTableData(p);\n                        else fetchAdhocTableData(p);\n                    };\n                    container.appendChild(span);\n                }\n            });\n\n            const startEntry = currentTotalRecords === 0 ? 0 : ((currentPage - 1) * currentPerPage) + 1;\n            const endEntry = Math.min(currentPage * currentPerPage, currentTotalRecords);\n            document.getElementById('entryInfo').textContent = `Showing ${startEntry} to ${endEntry} of ${currentTotalRecords} entries`;\n        }\n\n        function updatePaginationDisplay(meta, page) {\n            renderPagination(meta, page);\n        }\n\n        async function fetchTableData(page = 1) {\n            if(activeView !== 'assigned') return;\n            const url = buildUnsubmittedUrl(page);\n\n            try {\n                const res = await fetch(url.toString(), { headers: getHeaders() });\n                const json = await res.json();\n                const rows = Array.isArray(json?.data?.data) ? json.data.data : [];\n                lastFetchedRows = rows;\n\n                if (!rows.length) {\n                    document.getElementById('tblBody').innerHTML = '<tr><td colspan=\"14\" style=\"text-align:center;\">No data found<\/td><\/tr>';\n                    renderPagination({ total: 0, pages: 1, perPage: 25 }, 1);\n                    return;\n                }\n\n                document.getElementById('tblBody').innerHTML = rows.map(row => `\n                    <tr>\n                        <td>${safeText(row.assigned_date)}<\/td>\n                        <td>${safeText(row.hours)}<\/td>\n                        <td>${safeText(row.assigned_to_name)}<\/td>\n                        <td>${safeText(row.pesudo_name)}<\/td>\n                        <td>${safeText(row.file_name)}<\/td>\n                        <td>${safeText(row.received_on)}<\/td>\n                        <td>${safeText(row.insurance_name)}<\/td>\n                        <td>${safeText(row.account_name)}<\/td>\n                        <td>${safeText(row.project_name)}<\/td>\n                        <td>${safeText(row.entity_name)}<\/td>\n                        <td>${safeText(row.client_name)}<\/td>\n                        <td>${safeText(row.category_name)}<\/td>\n                        <td>${safeText(row.assigned_dos)}<\/td>\n                        <td>\n                            <button class=\"edit-icon-btn\" onclick=\"openEditModal('assigned', ${Number(row.id) || 0})\" title=\"Edit\">\n                                ${editIconSVG}\n                            <\/button>\n                        <\/td>\n                    <\/tr>\n                `).join('');\n\n                const meta = {\n                    total: json?.data?.total || json?.data?.pagination?.total || rows.length,\n                    pages: json?.data?.pages || json?.data?.pagination?.pages || json?.data?.last_page || 1,\n                    perPage: json?.data?.perPage || json?.data?.pagination?.limit || json?.data?.per_page || 25\n                };\n                renderPagination(meta, page);\n\n            } catch (error) {\n                console.error('Un-submitted fetch error', error);\n                document.getElementById('tblBody').innerHTML = '<tr><td colspan=\"14\" style=\"text-align:center;\">Failed to load data<\/td><\/tr>';\n            }\n        }\n\n        async function fetchAdhocTableData(page = 1) {\n            if (activeView !== 'adhoc') return;\n            const url = buildAdhocUrl(page);\n\n            try {\n                const res = await fetch(url.toString(), { headers: getHeaders() });\n                const json = await res.json();\n                const rows = Array.isArray(json?.data?.rows) ? json.data.rows : [];\n                lastFetchedRows = rows;\n\n                if (!rows.length) {\n                    document.getElementById('tblBody').innerHTML = '<tr><td colspan=\"12\" style=\"text-align:center;\">No data found<\/td><\/tr>';\n                    renderPagination({ total: 0, pages: 1, perPage: 25 }, 1);\n                    return;\n                }\n\n                document.getElementById('tblBody').innerHTML = rows.map(row => `\n                    <tr>\n                        <td>${safeText(row.date)}<\/td>\n                        <td>${safeText(row.client_name)}<\/td>\n                        <td>${safeText(row.project_name)}<\/td>\n                        <td>${safeText(row.ad_hoc_work_type)}<\/td>\n                        <td>${safeText(row.description)}<\/td>\n                        <td>${safeText(row.comments)}<\/td>\n                        <td>${safeText(row.time_utilized_display || row.time_utilized_decimal)}<\/td>\n                        <td>${safeText(row.time_approved_display || row.time_approved_decimal)}<\/td>\n                        <td>${safeText(row.created_by_name)}<\/td>\n                        <td>${safeText(row.approved_by_name)}<\/td>\n                        <td>${safeText(row.updated_at || row.approved_at)}<\/td>\n                        <td>\n                            <div class=\"action-stack\">\n                                <button class=\"edit-icon-btn\" onclick=\"openEditModal('adhoc', ${Number(row.id) || 0})\" title=\"Edit\">\n                                    ${editIconSVG}\n                                <\/button>\n                                <span class=\"status-pill ${(String(row.status_text || '').toLowerCase() === 'approved' || Number(row.is_approved) === 1) ? 'approved' : 'pending'}\">\n                                    ${safeText(row.status_text || row.status || (Number(row.is_approved) === 1 ? 'Approved' : 'Pending'))}\n                                <\/span>\n                            <\/div>\n                        <\/td>\n                    <\/tr>\n                `).join('');\n\n                const meta = {\n                    total: json?.data?.total || json?.data?.pagination?.total || rows.length,\n                    pages: json?.data?.pages || json?.data?.pagination?.pages || json?.data?.last_page || 1,\n                    perPage: json?.data?.perPage || json?.data?.pagination?.limit || json?.data?.per_page || 25\n                };\n                renderPagination(meta, page);\n\n            } catch (error) {\n                console.error('Adhoc fetch error', error);\n                document.getElementById('tblBody').innerHTML = '<tr><td colspan=\"12\" style=\"text-align:center;\">Failed to load data<\/td><\/tr>';\n            }\n        }\n\n        function toggleTab(view) {\n            activeView = view;\n            lastFetchedRows = [];\n            document.getElementById('tab-assigned').classList.toggle('active', view === 'assigned');\n            document.getElementById('tab-adhoc').classList.toggle('active', view === 'adhoc');\n            renderUI();\n            if(view === 'adhoc') {\n                fetchAdhocTableData(1);\n            } else {\n                fetchTableData();\n            }\n        }\n\n        function openEditModal(type, id) {\n            if(type === 'assigned') {\n                document.getElementById('assignedModalFields').innerHTML = `\n                    <div class=\"form-group\"><label class=\"required\">Assigned date<\/label><input type=\"text\" class=\"form-control\" value=\"27\/02\/2026\"><\/div>\n                    <div class=\"form-group\"><label class=\"required\">Assigned to<\/label><select class=\"form-control\"><option>Saba<\/option><\/select><\/div>\n                    <div class=\"form-group\"><label class=\"required\">Received on<\/label><input type=\"text\" class=\"form-control\" value=\"27\/02\/2026\"><\/div>\n                    <div class=\"form-group\"><label class=\"required\">File Name<\/label><input type=\"text\" class=\"form-control\" value=\"Cod RCM\"><\/div>\n                    <div class=\"form-group\"><label class=\"required\">Insurance<\/label><select class=\"form-control\"><option>Misc<\/option><\/select><\/div>\n                    <div class=\"form-group\"><label class=\"required\">Account<\/label><select class=\"form-control\"><option>Cod-RCM<\/option><\/select><\/div>\n                    <div class=\"form-group\"><label class=\"required\">Client<\/label><select class=\"form-control\"><option>Rcm<\/option><\/select><\/div>\n                    <div class=\"form-group\"><label class=\"required\">Category<\/label><select class=\"form-control\"><option>Coding<\/option><\/select><\/div>\n                    <div class=\"form-group\"><label class=\"required\">Project<\/label><select class=\"form-control\"><option>Rcm<\/option><\/select><\/div>\n                    <div class=\"form-group\"><label class=\"required\">Project Type<\/label><select class=\"form-control\"><option>Coding<\/option><\/select><\/div>\n                    <div class=\"form-group\"><label class=\"required\">Entity<\/label><select class=\"form-control\"><option>Msc<\/option><\/select><\/div>\n                    <div class=\"form-group\"><label class=\"required\">Amount<\/label><input type=\"text\" class=\"form-control\" value=\"0\"><\/div>\n                    <div class=\"form-group\"><label class=\"required\">Pages<\/label><input type=\"text\" class=\"form-control\" value=\"1\"><\/div>\n                    <div class=\"form-group\"><label class=\"required\">Dos Count<\/label><input type=\"text\" class=\"form-control\" value=\"30\"><\/div>\n                    <div class=\"form-group\"><label class=\"required\">Assigned DOS<\/label><input type=\"text\" class=\"form-control\" value=\"30\"><\/div>\n                    <div class=\"form-group\"><label class=\"required\">Hours<\/label><input type=\"text\" class=\"form-control\" value=\"3.69\"><\/div>\n                `;\n                document.getElementById('modalAssigned').style.display = 'flex';\n            } else {\n                document.getElementById('adhocModalFields').innerHTML = `\n                    <div class=\"form-group\"><label class=\"required\">Assigned date<\/label><input type=\"text\" class=\"form-control\" value=\"28\/02\/2026\" disabled><\/div>\n                    <div class=\"form-group\"><label class=\"required\">Created By<\/label><select class=\"form-control\" disabled><option>Alex<\/option><\/select><\/div>\n                    <div class=\"form-group\"><label class=\"required\">Client<\/label><select class=\"form-control\" disabled><option>Cbo<\/option><\/select><\/div>\n                    <div class=\"form-group\"><label class=\"required\">Project<\/label><select class=\"form-control\" disabled><option>Cbo<\/option><\/select><\/div>\n                    <div class=\"form-group\"><label class=\"required\">Hoc Work Type<\/label><input type=\"text\" class=\"form-control\" value=\"Negotiations\" disabled><\/div>\n                    <div class=\"form-group\"><label class=\"required\">Description<\/label><input type=\"text\" class=\"form-control\" value=\"Negotiations\" disabled><\/div>\n                    <div class=\"form-group\"><label class=\"required\">Mins Utilized<\/label><input type=\"number\" class=\"form-control\" value=\"0\"><\/div>\n                    <div class=\"form-group\"><label class=\"required\">Hrs Utilized<\/label><input type=\"number\" class=\"form-control\" value=\"9\"><\/div>\n                    <div class=\"form-group\"><label class=\"required\">Mins Approved<\/label><input type=\"number\" class=\"form-control\" value=\"0\"><\/div>\n                    <div class=\"form-group\"><label class=\"required\">Hrs Approved<\/label><input type=\"number\" class=\"form-control\" value=\"9\"><\/div>\n                    <div class=\"form-group\" style=\"grid-column: span 2;\"><label>Comment\/Remarks<\/label><input type=\"text\" class=\"form-control\" value=\"Approved\"><\/div>\n                `;\n                document.getElementById('modalAdhoc').style.display = 'flex';\n            }\n        }\n\n        function closeModals() {\n            document.getElementById('modalAssigned').style.display = 'none';\n            document.getElementById('modalAdhoc').style.display = 'none';\n        }\n\n        async function updateAssignment() {\n            console.log(\"Hitting API:\", ENDPOINTS.UPDATE_ASSIGNMENT);\n            alert(\"Assignment Update API Triggered\");\n            closeModals();\n        }\n\n        async function updateAdHoc() {\n            console.log(\"Hitting API:\", ENDPOINTS.UPDATE_ADHOC);\n            alert(\"Ad Hoc Update API Triggered\");\n            closeModals();\n        }\n\n        \/\/ \u2500\u2500 CUSTOM DATE PICKER \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n        \/\/ Two independent picker instances: 'assigned' and 'adhoc'\n        const dpState = {\n            assigned: { viewYear: null, viewMonth: null, selectedDate: null, activePreset: 'today' },\n            adhoc:    { viewYear: null, viewMonth: null, selectedDate: null, activePreset: 'today' }\n        };\n\n        const DP_IDS = {\n            assigned: { dropdown: 'dpDropdownAssigned', backdrop: 'dpBackdropAssigned', title: 'dpCalTitleAssigned', days: 'dpDaysAssigned', title2: 'dpCalTitleAssigned2', days2: 'dpDaysAssigned2', display: 'filterDate' },\n            adhoc:    { dropdown: 'dpDropdownAdhoc',    backdrop: 'dpBackdropAdhoc',    title: 'dpCalTitleAdhoc',    days: 'dpDaysAdhoc',    title2: 'dpCalTitleAdhoc2',    days2: 'dpDaysAdhoc2',    display: 'filterAdhocDate' }\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            document.getElementById(DP_IDS[inst].display).value = s.selectedDate ? dpFmtISO(s.selectedDate) : '';\n            closeDatePicker(inst);\n        }\n\n        function dpClear(e, inst) {\n            e.stopPropagation();\n            const s = dpState[inst];\n            s.selectedDate = null;\n            s.activePreset = null;\n            document.getElementById(DP_IDS[inst].display).value = '';\n            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 pickers when clicking outside\n        document.addEventListener('click', function(e) {\n            ['assigned','adhoc'].forEach(inst => {\n                const wrapId = inst === 'assigned' ? 'dpWrapperAssigned' : 'dpWrapperAdhoc';\n                const wrapEl = document.getElementById(wrapId);\n                if (wrapEl && !wrapEl.contains(e.target)) {\n                    closeDatePicker(inst);\n                }\n            });\n        });\n\n        window.onload = init;\n    <\/script>\n<\/div><\/div>\n\n<\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Assigned Assignment Assigned Assignment Ad Hoc Assignment \u00ab Previous Next \u00bb Showing 0 to 0 of 0 entries Edit Assigned Assignments Close Edit Assignment Edit Ad Hoc Assignment | Admin Close Submit<\/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-200","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/200","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=200"}],"version-history":[{"count":1,"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/200\/revisions"}],"predecessor-version":[{"id":201,"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/200\/revisions\/201"}],"wp:attachment":[{"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/media?parent=200"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}