{"id":154,"date":"2026-03-31T07:06:32","date_gmt":"2026-03-31T07:06:32","guid":{"rendered":"https:\/\/ph-portal.zyneventures.com\/?page_id=154"},"modified":"2026-03-31T07:06:55","modified_gmt":"2026-03-31T07:06:55","slug":"reverse-hit","status":"publish","type":"page","link":"https:\/\/ph-portal.zyneventures.com\/index.php\/reverse-hit\/","title":{"rendered":"Reverse Hit"},"content":{"rendered":"<style>.kadence-column154_fe97b6-33 > .kt-inside-inner-col,.kadence-column154_fe97b6-33 > .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-column154_fe97b6-33 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column154_fe97b6-33 > .kt-inside-inner-col{flex-direction:column;}.kadence-column154_fe97b6-33 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column154_fe97b6-33 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column154_fe97b6-33{position:relative;}@media all and (max-width: 1024px){.kadence-column154_fe97b6-33 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column154_fe97b6-33 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column154_fe97b6-33\"><div class=\"kt-inside-inner-col\"><style>.kb-row-layout-id154_11cd3d-40 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id154_11cd3d-40 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id154_11cd3d-40 > .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-id154_11cd3d-40 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id154_11cd3d-40 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id154_11cd3d-40 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id154_11cd3d-40 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-column154_abc965-86 > .kt-inside-inner-col,.kadence-column154_abc965-86 > .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-column154_abc965-86 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column154_abc965-86 > .kt-inside-inner-col{flex-direction:column;}.kadence-column154_abc965-86 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column154_abc965-86 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column154_abc965-86{position:relative;}@media all and (max-width: 1024px){.kadence-column154_abc965-86 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column154_abc965-86 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column154_abc965-86\"><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            --bg-light: #F8F9FA;\n            --hit-yellow: #FFF8E6;\n            --hit-yellow-text: #FFB800;\n            --hit-red: #FFF0F0;\n            --hit-red-text: #FF4D4F;\n        }\n\n        body {\n            font-family: 'Sora', sans-serif;\n            background-color: #fff;\n            color: var(--text-dark);\n        }\n         \/* \u2500\u2500 PAGE WRAPPER \u2500\u2500 *\/\n         .page-wrapper { \n            max-width: 100%; \n        }\n\n        \/* Heading Section *\/\n        .page-header {\n            margin-bottom: 30px;\n        }\n\n        .page-header h2 {\n            font-size: 21px;\n            font-weight: 500;\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n            margin: 0;\n        }\n\n        \/* Filter Section *\/\n        .filter-container {\n            display: flex;\n            gap: 20px;\n            align-items: flex-end;\n            margin-bottom: 40px;\n        }\n\n        .filter-group {\n            display: flex;\n            flex-direction: column;\n            gap: 8px;\n            width: 280px;\n        }\n\n        .filter-group label {\n            font-size: 14px;\n            font-weight: 500;\n        }\n\n        .filter-group label span {\n            color: #FF4D4F;\n        }\n\n        .form-select {\n            width: 100%;\n            padding: 12px 15px;\n            border: 1px solid #DCDFE6;\n            border-radius: 6px;\n            font-family: 'Sora';\n            font-size: 12px;\n            color: #606266;\n            appearance: none;\n            background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='12' fill='%23606266' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'\/%3E%3C\/svg%3E\");\n            background-repeat: no-repeat;\n            background-position: right 15px center;\n            outline: none;\n        }\n\n        .btn-search {\n            background: var(--primary-blue);\n            color: white;\n            border: none;\n            padding: 12px 60px;\n            border-radius: 6px;\n            font-size: 12px;\n            font-weight: 400;\n            cursor: pointer;\n            transition: 0.2s;\n            height: 46px;\n        }\n\n        .btn-search:hover {\n            background: var(--hover-blue);\n        }\n\n        \/* Table Styling *\/\n        .table-wrapper {\n            width: 100%;\n            overflow-x: auto;\n        }\n\n        table {\n            width: 100%;\n            border-collapse: collapse;\n            text-align: left;\n        }\n\n        th {\n            background-color: #f5f5f5;\n            \n            padding: 8px 15px;\n            text-transform: uppercase;\n            font-size: 12px;\n            font-weight: 500;\n            color: #212529;\n            border-bottom: 1px solid var(--border-color);\n        }\n\n        td {\n            padding: 16px;\n            font-size: 12px;\n            color: #8D8C9C;\n            border-bottom: 1px solid var(--border-color);\n        }\n\n        \/* Badge\/Hit Styles *\/\n        .badge-hit {\n            padding: 6px 16px;\n            border-radius: 20px;\n            font-size: 12px;\n            display: inline-block;\n            text-align: center;\n        }\n\n        .sign-off-hit {\n            background-color: #FFF8E6;\n            color: #FFB800;\n        }\n\n        .productivity-hit {\n            background-color: #FFF0F0;\n            color: #FF4D4F;\n        }\n\n        \/* Responsive Optimization *\/\n        @media (max-width: 768px) {\n            .filter-container {\n                flex-direction: column;\n                align-items: stretch;\n            }\n            .filter-group {\n                width: 100%;\n            }\n            body {\n                padding: 20px;\n            }\n        }\n    <\/style>\n\n\n\n    <div class=\"page-header\">\n        <h2>Reverse Hits Apply Users<\/h2>\n    <\/div>\n\n    <div class=\"filter-container\">\n        <div class=\"filter-group\">\n            <label>Month<span>*<\/span><\/label>\n            <select id=\"monthSelect\" class=\"form-select\">\n                <option value=\"\">Select Month<\/option>\n                <option value=\"01\">January<\/option>\n                <option value=\"02\">February<\/option>\n                <option value=\"03\">March<\/option>\n                <option value=\"04\">April<\/option>\n                <option value=\"05\">May<\/option>\n                <option value=\"06\">June<\/option>\n                <option value=\"07\">July<\/option>\n                <option value=\"08\">August<\/option>\n                <option value=\"09\">September<\/option>\n                <option value=\"10\">October<\/option>\n                <option value=\"11\">November<\/option>\n                <option value=\"12\">December<\/option>\n            <\/select>\n        <\/div>\n        <div class=\"filter-group\">\n            <label>Year<span>*<\/span><\/label>\n            <select id=\"yearSelect\" class=\"form-select\">\n                <option value=\"\">Select Year<\/option>\n                <option value=\"2023\">2023<\/option>\n                <option value=\"2024\">2024<\/option>\n                <option value=\"2025\">2025<\/option>\n                <option value=\"2026\">2026<\/option>\n            <\/select>\n        <\/div>\n        <button class=\"btn-search\" onclick=\"handleSearch()\">Search<\/button>\n    <\/div>\n\n    <div class=\"table-wrapper\">\n        <table>\n            <thead>\n                <tr>\n                    <th style=\"width: 15%;\">User<\/th>\n                    <th style=\"width: 10%;\">Month<\/th>\n                    <th style=\"width: 10%;\">Year<\/th>\n                    <th style=\"width: 30%;\">Sign Off Hit<\/th>\n                    <th style=\"width: 35%;\">Productivity Hit<\/th>\n                <\/tr>\n            <\/thead>\n            <tbody id=\"reverseHitTableBody\">\n                <\/tbody>\n        <\/table>\n    <\/div>\n\n    <script>\n        \/\/ Endpoints\n        const BASE_URL = 'https:\/\/api-ph-portal.zyneventures.com\/api\/v1';\n        const ENDPOINTS = {\n            REVERSE_HIT_LIST: `${BASE_URL}\/productivity\/reverse-hit-user-list`\n        };\n\n        \/\/ Get Authorization Header (matches login_form logic)\n        const getHeaders = () => {\n            const token = localStorage.getItem(\"TOKEN\");\n            return {\n                'Content-Type': 'application\/json',\n                'Authorization': `Bearer ${token}`\n            };\n        };\n\n        async function fetchReverseHits(month = '', year = '', page = 1, limit = 10) {\n            const tableBody = document.getElementById('reverseHitTableBody');\n            tableBody.innerHTML = `<tr><td colspan=\"5\" style=\"text-align:center;\">Loading...<\/td><\/tr>`;\n            \n            try {\n                \/\/ Construct URL with Query Params\n                const url = new URL(ENDPOINTS.REVERSE_HIT_LIST);\n                if (month) url.searchParams.append('month', month);\n                if (year) url.searchParams.append('year', year);\n                url.searchParams.append('page', page);\n                url.searchParams.append('limit', limit);\n\n                const response = await fetch(url, {\n                    method: 'GET',\n                    headers: getHeaders()\n                });\n\n                if (response.status === 401) {\n                    alert(\"Session expired. Please login again.\");\n                    window.location.href = \"login.html\"; \/\/ Adjust to your login page name\n                    return;\n                }\n\n                const result = await response.json();\n                const data = Array.isArray(result)\n                    ? result\n                    : (Array.isArray(result.data)\n                        ? result.data\n                        : (Array.isArray(result.response) ? result.response : []));\n\n                renderTable(data, month, year);\n\n            } catch (error) {\n                console.error(\"Fetch Error:\", error);\n                tableBody.innerHTML = `<tr><td colspan=\"5\" style=\"text-align:center; color:red;\">Error loading data.<\/td><\/tr>`;\n            }\n        }\n\n        function renderTable(users, selectedMonth, selectedYear) {\n            const tableBody = document.getElementById('reverseHitTableBody');\n            tableBody.innerHTML = '';\n\n            if (!users || users.length === 0) {\n                tableBody.innerHTML = `<tr><td colspan=\"5\" style=\"text-align:center;\">No records found.<\/td><\/tr>`;\n                return;\n            }\n\n            users.forEach(user => {\n                const row = document.createElement('tr');\n                const rowMonth = user.month || selectedMonth || '--';\n                const rowYear = user.year || selectedYear || '--';\n                \n                \/\/ Logic for badge display\n                const signOffBadge = user.sign_off_hit !== \"-\" \n                    ? `<span class=\"badge-hit sign-off-hit\">${user.sign_off_hit}<\/span>` \n                    : \"-\";\n                \n                const productivityBadge = user.productivity_hit !== \"-\" \n                    ? `<span class=\"badge-hit productivity-hit\">${user.productivity_hit}<\/span>` \n                    : \"-\";\n\n                row.innerHTML = `\n                    <td>${user.pesudo_name || user.name}<\/td>\n                    <td>${rowMonth}<\/td>\n                    <td>${rowYear}<\/td>\n                    <td>${signOffBadge}<\/td>\n                    <td>${productivityBadge}<\/td>\n                `;\n                tableBody.appendChild(row);\n            });\n        }\n\n        function handleSearch() {\n            const month = document.getElementById('monthSelect').value;\n            const year = document.getElementById('yearSelect').value;\n            \n            if (!month || !year) {\n                alert(\"Please select both Month and Year\");\n                return;\n            }\n            \n            fetchReverseHits(month, year);\n        }\n\n        \/\/ Initial Load\n        window.onload = () => {\n            fetchReverseHits();\n        };\n    <\/script>\n<\/div><\/div>\n\n<\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Reverse Hits Apply Users Month* Select MonthJanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember Year* Select Year2023202420252026 Search User Month Year Sign Off Hit Productivity Hit<\/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-154","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/154","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=154"}],"version-history":[{"count":2,"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/154\/revisions"}],"predecessor-version":[{"id":156,"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/pages\/154\/revisions\/156"}],"wp:attachment":[{"href":"https:\/\/ph-portal.zyneventures.com\/index.php\/wp-json\/wp\/v2\/media?parent=154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}