{"id":486,"date":"2026-04-12T19:05:31","date_gmt":"2026-04-12T17:05:31","guid":{"rendered":"https:\/\/www.portal.fluxwebstudios.co.za\/staging\/?page_id=486"},"modified":"2026-04-17T16:56:16","modified_gmt":"2026-04-17T14:56:16","slug":"dashboard","status":"publish","type":"page","link":"https:\/\/www.portal.fluxwebstudios.co.za\/staging\/sereni\/dashboard\/","title":{"rendered":"Sereni Dashboard"},"content":{"rendered":"<div class=\"grf-dashboard\">\n\n    <h2 class=\"grf-dashboard-title\">Sereni Dashboard<\/h2> \n\n    <!-- Status Box -->\n    <div class=\"grf-status-box issues\"> \n        <strong>Status:<\/strong> \n        <span class=\"grf-badge issues\"> \n            Issues Reported \n        <\/span><br> \n        <small>Last checked: 2026-04-17 14:42:26<\/small> \n    <\/div> \n\n<\/div>\n\n<!-- Month Filter -->\n<div class=\"grf-month-filter-container\" style=\"text-align:center; margin:30px 0 20px;\"> \n    <form method=\"get\" style=\"display:inline-flex; gap:10px; align-items:center; background:#f9fafb; padding:12px 16px; border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,0.08);\"> \n        <label style=\"font-weight:500; color:#374151;\">Select Month:<\/label> \n        <input id=\"grf-month-picker\" type=\"text\" name=\"grf_month\" value=\"2026-04\" > \n        <input type=\"hidden\" name=\"grf_page\" value=\"1\"> \n        <button type=\"submit\" style=\"padding:8px 16px;border-radius:8px;border:none;background:#10b981;color:#fff;\">Filter<\/button> \n    <\/form> \n<\/div>\n\n<!-- Recent Checks Table -->\n<div class=\"grf-recent-checks-container\" style=\"margin-top:30px;\"> \n    <h3 class=\"grf-subtitle\">Recent Checks<\/h3> \n    <div class=\"grf-table-wrapper\"> \n        <table class=\"grf-table\"> \n            <thead> \n                <tr> \n                    <th>Date<\/th> \n                    <th>Status<\/th> \n                    <th>Issues<\/th> \n                    <th>Notes<\/th> \n                    <!-- New columns for Inspection Type and KWh Reading -->\n                    <th>Inspection Type<\/th>\n                    <th>KWh Reading<\/th>\n                <\/tr> \n            <\/thead> \n            <tbody> \n             \n                 \n                    <tr> \n                        <td>2026-04-17 14:42:26<\/td> \n                        <td>\n                            <span class=\"grf-badge issues\">\n                                Issues                            <\/span>\n                        <\/td> \n                        <td> \n                            Aircon, Ceiling Fans, Microwave, Cutlery \n                        <\/td> \n                        <td> \n                            <strong>Aircon:<\/strong> \ud83d\udccd Upstairs Bedroom - Aircon is leaking water<br><strong>Ceiling Fans:<\/strong> \ud83d\udccd Lounge - Lounge fan not working<br><strong>Microwave:<\/strong> Microwave buttons damaged<br><strong>Cutlery:<\/strong> Plastic spatula missing<br><strong>Other:<\/strong> Guests did not clean house as agreed upon<br>                        <\/td>\n                        <!-- Display human-readable inspection type -->\n                        <td>\n                          Check-Out                        <\/td>\n                        <!-- Display KWh Reading -->\n                        <td>48<\/td>\n                    <\/tr>\n                 \n                    <tr> \n                        <td>2026-04-17 14:41:06<\/td> \n                        <td>\n                            <span class=\"grf-badge ok\">\n                                OK                            <\/span>\n                        <\/td> \n                        <td> \n                            - \n                        <\/td> \n                        <td> \n                            -                        <\/td>\n                        <!-- Display human-readable inspection type -->\n                        <td>\n                          Check-In                        <\/td>\n                        <!-- Display KWh Reading -->\n                        <td>150<\/td>\n                    <\/tr>\n                 \n             \n            <\/tbody> \n        <\/table> \n    <\/div>\n    <!-- Pagination -->\n    <\/div>\n\n<!-- Guest Satisfaction & Risk Overview -->\n<div class=\"grf-analytics-section\" style=\"margin-top:40px;\"> \n    <!-- Removed the entire Guest Satisfaction & Comfort Overview section -->\n    <!-- BEGIN: This entire section is removed to keep styling intact -->\n    <!-- END: This entire section is removed to keep styling intact -->\n<\/div>\n\n<style>\n\/* Your existing styles plus the visual cue styles start here *\/\n.grf-dashboard { max-width: 900px; margin: 30px auto; font-family: 'Inter', sans-serif; color: #111827; }\n.grf-dashboard-title { font-size: 1.8rem; font-weight: 600; text-align: center; margin-bottom: 25px; }\n.grf-subtitle { margin-top: 30px; font-size: 1.3rem; font-weight: 500; border-bottom: 2px solid #e5e7eb; padding-bottom: 5px; color: #374151; }\n.grf-analytics-section {\n    margin-top: 35px;\n    padding: 20px;\n    background: #f9fafb;\n    border: 1px solid #e5e7eb;\n    border-radius: 16px;\n}\n.grf-analytics-title {\n    font-size: 1.4rem;\n    font-weight: 600;\n    color: #111827;\n    margin-bottom: 6px;\n}\n.grf-analytics-subtext {\n    font-size: 0.95rem;\n    color: #6b7280;\n    margin-bottom: 15px;\n}\n.grf-card {\n    background: linear-gradient(145deg, #ffffff, #f0f0f0);\n    border-radius: 16px;\n    padding: 20px;\n    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n    transition: transform 0.2s, box-shadow 0.2s;\n    text-align: center; \/* <-- added this line to center text inside cards *\/\n}\n.grf-card:hover {\n    transform: translateY(-4px);\n    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);\n}\n.grf-card h4 {\n    margin-bottom: 12px;\n    font-size: 1.2rem;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\/* Badge styles *\/\n.grf-status-box { padding: 18px; border-radius: 14px; margin-top: 10px; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,0.05); }\n.grf-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 0.9rem; font-weight: 600; color: #fff; }\n.grf-badge.ok { background: #10b981; }\n.grf-badge.issues { background: #ef4444; }\n.grf-table-wrapper { overflow-x: auto; margin-top: 15px; }\n.grf-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 700px; border-radius: 12px; overflow: hidden; }\n.grf-table th, .grf-table td { padding: 14px 16px; }\n.grf-table th { background: #f9fafb; border-bottom: 2px solid #e5e7eb; }\n.grf-table tr:nth-child(even) td { background: #fefefe; }\n.grf-table tr:nth-child(odd) td { background: #ffffff; }\n.grf-table tr:hover td { background: #f3f4f6; }\n.grf-analytics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }\n@media (max-width: 768px) {\n    .grf-analytics-grid {\n        grid-template-columns: 1fr;\n    }\n}\n\/* Styles for the visual cue of score *\/\n.score-circle-container {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n}\n.score-circle {\n    width: 80px;\n    height: 80px;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 1.5rem;\n    font-weight: 700;\n    color: #fff;\n    box-shadow: 0 4px 10px rgba(0,0,0,0.1);\n    margin-bottom: 8px;\n}\n.score-circle.high {\n    background-color: #10b981; \/* green *\/\n}\n.score-circle.medium {\n    background-color: #f59e0b; \/* amber *\/\n}\n.score-circle.low {\n    background-color: #ef4444; \/* red *\/\n}\n<\/style>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n    flatpickr(\"#grf-month-picker\", {\n        plugins: [\n            new monthSelectPlugin({\n                shorthand: true,\n                dateFormat: \"Y-m\",\n                altFormat: \"F Y\"\n            })\n        ],\n        dateFormat: \"Y-m\",\n        defaultDate: \"2026-04\",\n        allowInput: false,\n        clickOpens: true,\n        disableMobile: true\n    });\n});\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":48,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-486","page","type-page","status-publish","hentry"],"blocksy_meta":{"disable_header":"yes","disable_footer":"yes","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.portal.fluxwebstudios.co.za\/staging\/wp-json\/wp\/v2\/pages\/486","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.portal.fluxwebstudios.co.za\/staging\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.portal.fluxwebstudios.co.za\/staging\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.portal.fluxwebstudios.co.za\/staging\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.portal.fluxwebstudios.co.za\/staging\/wp-json\/wp\/v2\/comments?post=486"}],"version-history":[{"count":1,"href":"https:\/\/www.portal.fluxwebstudios.co.za\/staging\/wp-json\/wp\/v2\/pages\/486\/revisions"}],"predecessor-version":[{"id":493,"href":"https:\/\/www.portal.fluxwebstudios.co.za\/staging\/wp-json\/wp\/v2\/pages\/486\/revisions\/493"}],"up":[{"embeddable":true,"href":"https:\/\/www.portal.fluxwebstudios.co.za\/staging\/wp-json\/wp\/v2\/pages\/48"}],"wp:attachment":[{"href":"https:\/\/www.portal.fluxwebstudios.co.za\/staging\/wp-json\/wp\/v2\/media?parent=486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}