{"id":857,"date":"2025-09-24T18:13:44","date_gmt":"2025-09-25T02:13:44","guid":{"rendered":"https:\/\/helpdesk.costbook.ph\/?page_id=857"},"modified":"2025-11-03T16:53:27","modified_gmt":"2025-11-04T00:53:27","slug":"dashboard-2-2","status":"publish","type":"page","link":"https:\/\/helpdesk.costbook.ph\/index.php\/dashboard-2-2\/","title":{"rendered":"Dashboard 2"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"857\" class=\"elementor elementor-857\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8137e1d e-con-full e-flex e-con e-parent\" data-id=\"8137e1d\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4c53a30 elementor-widget elementor-widget-template\" data-id=\"4c53a30\" data-element_type=\"widget\" data-widget_type=\"template.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-template\">\n\t\t\t\t\t<div data-elementor-type=\"page\" data-elementor-id=\"925\" class=\"elementor elementor-925\" data-elementor-post-type=\"elementor_library\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7946887d e-con-full e-flex e-con e-parent\" data-id=\"7946887d\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-64491c90 e-con-full e-flex e-con e-child\" data-id=\"64491c90\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-19812326 elementor-widget elementor-widget-image\" data-id=\"19812326\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"300\" height=\"169\" src=\"https:\/\/helpdesk.costbook.ph\/wp-content\/uploads\/2025\/09\/gffggfgf-removebg-preview-300x169.png\" class=\"attachment-medium size-medium wp-image-297\" alt=\"\" srcset=\"https:\/\/helpdesk.costbook.ph\/wp-content\/uploads\/2025\/09\/gffggfgf-removebg-preview-300x169.png 300w, https:\/\/helpdesk.costbook.ph\/wp-content\/uploads\/2025\/09\/gffggfgf-removebg-preview.png 666w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2644b23e e-con-full e-flex e-con e-child\" data-id=\"2644b23e\" data-element_type=\"container\" data-settings=\"{&quot;position&quot;:&quot;absolute&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2beff56e elementor-widget-tablet__width-initial elementor-widget__width-initial eael_simple_menu_hamburger_disable_selected_menu_no eael-simple-menu-hamburger-align-right eael-hamburger--tablet elementor-widget elementor-widget-eael-simple-menu\" data-id=\"2beff56e\" data-element_type=\"widget\" data-widget_type=\"eael-simple-menu.default\">\n\t\t\t\t\t<style>\n                        @media screen and (max-width: 1024px) {\n                            .eael-hamburger--tablet {\n                                .eael-simple-menu-horizontal,\n                                .eael-simple-menu-vertical {\n                                    display: none;\n                                }\n                            }\n                            .eael-hamburger--tablet {\n                                .eael-simple-menu-container .eael-simple-menu-toggle {\n                                    display: block;\n                                }\n                            }\n                        }\n                    <\/style>            <div data-hamburger-icon=\"&lt;svg aria-hidden=&quot;true&quot; class=&quot;e-font-icon-svg e-fas-bars&quot; viewBox=&quot;0 0 448 512&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;&lt;path d=&quot;M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;\" data-indicator-icon=\"&lt;svg aria-hidden=&quot;true&quot; class=&quot;e-font-icon-svg e-fas-angle-down&quot; viewBox=&quot;0 0 320 512&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;&lt;path d=&quot;M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;\" data-dropdown-indicator-icon=\"&lt;svg class=&quot;e-font-icon-svg e-fas-angle-down&quot; viewBox=&quot;0 0 320 512&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;&lt;path d=&quot;M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;\" class=\"eael-simple-menu-container eael-simple-menu-align-center eael-simple-menu-dropdown-align-left preset-1\" data-hamburger-breakpoints=\"{&quot;mobile&quot;:&quot;Mobile Portrait (&gt; 767px)&quot;,&quot;tablet&quot;:&quot;Tablet Portrait (&gt; 1024px)&quot;,&quot;desktop&quot;:&quot;Desktop (&gt; 2400px)&quot;,&quot;none&quot;:&quot;None&quot;}\" data-hamburger-device=\"tablet\">\n                <ul id=\"menu-main-menu\" class=\"eael-simple-menu eael-simple-menu-dropdown-animate-to-top eael-simple-menu-indicator eael-simple-menu-horizontal\"><li id=\"menu-item-875\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-875\"><a href=\"https:\/\/helpdesk.costbook.ph\/index.php\/dashboard-2-2\/\">Home<\/a><\/li>\n<li id=\"menu-item-878\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-878\"><a href=\"https:\/\/helpdesk.costbook.ph\/index.php\/elementor-131\/\">Ticket<\/a><\/li>\n<li id=\"menu-item-1004\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1004\"><a href=\"https:\/\/helpdesk.costbook.ph\/index.php\/employees\/\">Employees<\/a><\/li>\n<li id=\"menu-item-1057\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-1057\"><a href=\"https:\/\/helpdesk.costbook.ph\/index.php\/assets\/\">Assets<\/a><\/li>\n<li id=\"menu-item-996\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-996\"><a href=\"https:\/\/helpdesk.costbook.ph\/index.php\/category\/\">Category<\/a><\/li>\n<li id=\"menu-item-876\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-876\"><a href=\"https:\/\/helpdesk.costbook.ph\/index.php\/report-analytics\/\">Reports<\/a><\/li>\n<li id=\"menu-item-877\" class=\"menu-item menu-item-type-post_type menu-item-object-page menu-item-877\"><a href=\"https:\/\/helpdesk.costbook.ph\/index.php\/dashboard-2\/\">Settings<\/a><\/li>\n<\/ul>                <button class=\"eael-simple-menu-toggle\">\n                    <span class=\"sr-only \">Hamburger Toggle Menu<\/span>\n                    <svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-bars\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z\"><\/path><\/svg>                <\/button>\n            <\/div>\n            \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d2ee4c0 e-con-full e-flex e-con e-parent\" data-id=\"d2ee4c0\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-adfe170 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"adfe170\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <title>IT Ticketing Dashboard<\/title>\r\n  <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n  <style>\r\n    body {\r\n      margin: 0;\r\n      font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\r\n      background: linear-gradient(135deg, #f9f9f9, #e3f2fd);\r\n      color: #333;\r\n    }\r\n\r\n    .top-bar {\r\n      background: linear-gradient(90deg, #4242, #616161);\r\n      color: white;\r\n      padding: 15px 25px;\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      border-bottom: 4px solid #1976d2;\r\n    }\r\n\r\n    .top-bar h2 {\r\n      margin: 0;\r\n      font-size: 18px;\r\n    }\r\n\r\n    .date-time {\r\n      text-align: right;\r\n      font-size: 13px;\r\n    }\r\n\r\n    \/* Stats Section *\/\r\n    .stats-container {\r\n      display: flex;\r\n      justify-content: center;\r\n      gap: 20px;\r\n      margin: 20px auto;\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    .stat-box {\r\n      background: white;\r\n      border-radius: 12px;\r\n      padding: 15px;\r\n      text-align: center;\r\n      width: 150px;\r\n      height:200px;\r\n      box-shadow: 0 4px 10px rgba(0,0,0,0.1);\r\n      transition: transform 0.2s;\r\n    }\r\n\r\n    .stat-box:hover {\r\n      transform: translateY(-5px);\r\n    }\r\n\r\n    .circle {\r\n      width: 70px;\r\n      height: 70px;\r\n      margin: 0 auto 10px;\r\n      border-radius: 50%;\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      font-size: 20px;\r\n      font-weight: bold;\r\n      color: white;\r\n    }\r\n\r\n    .all { background: #1976d2; }\r\n    .new { background: #388e3c; }\r\n    .assigned { background: #fbc02d; }\r\n    .resolved { background: #0288d1; }\r\n    .hold { background: #d32f2f; }\r\n\r\n    \/* Charts *\/\r\n    .charts {\r\n      display: flex;\r\n      justify-content: center;\r\n      gap: 30px;\r\n      margin: 30px auto;\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    .chart-box {\r\n      background: white;\r\n      border-radius: 10px;\r\n      padding: 20px;\r\n      width: 400px;       \/* Fixed width *\/\r\n      height: 400px;      \/* Increased height *\/\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      justify-content: center;\r\n      box-shadow: 0 4px 10px rgba(0,0,0,0.1);\r\n    }\r\n\r\n    .chart-box h3 {\r\n      font-size: 15px;\r\n      margin-bottom: 15px;\r\n      border-bottom: 2px solid #1976d2;\r\n      padding-bottom: 8px;\r\n      color: #1976d2;\r\n      text-align: center;\r\n      width: 100%;\r\n    }\r\n\r\n    canvas {\r\n      max-width: 100%;\r\n      max-height: 320px; \/* Keep charts inside the container *\/\r\n    }\r\n\r\n    @media (max-width: 992px) {\r\n      .charts {\r\n        flex-direction: column;\r\n        align-items: center;\r\n      }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <!-- Top Bar -->\r\n  <div class=\"top-bar\">\r\n    <h2>IT Ticketing System Dashboard<\/h2>\r\n    <div class=\"date-time\" id=\"dateTime\"><\/div>\r\n  <\/div>\r\n\r\n  <!-- Stats -->\r\n  <div class=\"stats-container\">\r\n    <div class=\"stat-box\">\r\n      <div class=\"circle all\">12<\/div>\r\n      <p>Total All Tickets<\/p>\r\n    <\/div>\r\n    <div class=\"stat-box\">\r\n      <div class=\"circle new\">3<\/div>\r\n      <p>New Tickets<\/p>\r\n    <\/div>\r\n    <div class=\"stat-box\">\r\n      <div class=\"circle assigned\">3<\/div>\r\n      <p>Assigned Tickets<\/p>\r\n    <\/div>\r\n    <div class=\"stat-box\">\r\n      <div class=\"circle resolved\">3<\/div>\r\n      <p>Resolved Tickets<\/p>\r\n    <\/div>\r\n    <div class=\"stat-box\">\r\n      <div class=\"circle hold\">3<\/div>\r\n      <p>On Hold Tickets<\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Charts -->\r\n  <div class=\"charts\">\r\n    <div class=\"chart-box\">\r\n      <h3>Tickets by Priority<\/h3>\r\n      <canvas id=\"priorityChart\"><\/canvas>\r\n    <\/div>\r\n    <div class=\"chart-box\">\r\n      <h3>Tickets by Category<\/h3>\r\n      <canvas id=\"categoryChart\"><\/canvas>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <script>\r\n    \/\/ Real-time Date & Time\r\n    function updateDateTime() {\r\n      const now = new Date();\r\n      const options = { year: 'numeric', month: 'long', day: 'numeric' };\r\n      const dateStr = now.toLocaleDateString(undefined, options);\r\n      const timeStr = now.toLocaleTimeString();\r\n      document.getElementById(\"dateTime\").innerHTML = `${timeStr}<br>${dateStr}`;\r\n    }\r\n    setInterval(updateDateTime, 1000);\r\n    updateDateTime();\r\n\r\n    \/\/ Chart: Priority\r\n    const ctx1 = document.getElementById('priorityChart');\r\n    new Chart(ctx1, {\r\n      type: 'pie',\r\n      data: {\r\n        labels: ['Low', 'Medium', 'High', 'Urgent'],\r\n        datasets: [{\r\n          data: [55, 25, 15, 5],\r\n          backgroundColor: ['#1976d2', '#f57c00', '#388e3c', '#d32f2f']\r\n        }]\r\n      }\r\n    });\r\n\r\n    \/\/ Chart: Category\r\n    const ctx3 = document.getElementById('categoryChart');\r\n    new Chart(ctx3, {\r\n      type: 'bar',\r\n      data: {\r\n        labels: ['Network', 'Software', 'Other', 'Hardware'],\r\n        datasets: [{\r\n          label: 'Tickets',\r\n          data: [8, 5, 6, 8],\r\n          backgroundColor: ['#1976d2', '#388e3c', '#f57c00', '#7b1fa2']\r\n        }]\r\n      },\r\n      options: {\r\n        responsive: true,\r\n        plugins: { legend: { display: false } },\r\n        maintainAspectRatio: false\r\n      }\r\n    });\r\n  <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>IT Ticketing Dashboard IT Ticketing System Dashboard 12 Total All Tickets 3 New Tickets 3 Assigned Tickets 3 Resolved Tickets 3 On Hold Tickets Tickets by Priority Tickets by Category<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-857","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/helpdesk.costbook.ph\/index.php\/wp-json\/wp\/v2\/pages\/857","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/helpdesk.costbook.ph\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/helpdesk.costbook.ph\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/helpdesk.costbook.ph\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/helpdesk.costbook.ph\/index.php\/wp-json\/wp\/v2\/comments?post=857"}],"version-history":[{"count":13,"href":"https:\/\/helpdesk.costbook.ph\/index.php\/wp-json\/wp\/v2\/pages\/857\/revisions"}],"predecessor-version":[{"id":1463,"href":"https:\/\/helpdesk.costbook.ph\/index.php\/wp-json\/wp\/v2\/pages\/857\/revisions\/1463"}],"wp:attachment":[{"href":"https:\/\/helpdesk.costbook.ph\/index.php\/wp-json\/wp\/v2\/media?parent=857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}