1 2<html> 3 4<head> 5 <title> 6 Malaria Dashboard V2 </title> 7 <meta charset="utf-8" /> 8 <meta name="viewport" content="width=device-width, initial-scale=1" /> 9 10
10<script> 11 const className = "Dashboard"; 12 </script>
12 13 <style> 14 body { 15 font-family: Arial, sans-serif, 'Khmer OS Battambang' !important; 16 font-size: 14px; 17 } 18 </style> 19 <link href='/media/assetsV2/CSS/preloader.css?1756807513' rel='stylesheet' /> <link href='/media/assetsV3/css/style.min.css?1756807513' rel='stylesheet' /> <link href='/media/assetsV3/css/contact/util.css?1756807513' rel='stylesheet' /> <link href='/media/assetsV3/css/contact/main.css?1756807513' rel='stylesheet' /> <link href='/media/assetsV3/css/dashboard.css?1770286470' rel='stylesheet' /> 20 <link href="/media/CSS/font-awesome.css" rel="stylesheet" /> 21 <link href="/media/CSS/bootstrap-datetimepicker.css" rel="stylesheet" /> 22 <link href="/media/assetsV3/css/pages/chat-app-page.css" rel="stylesheet" /> 23 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> 24 <link href='/media/CSS/style.css?1770016096' rel='stylesheet' /> <link href="/media/CSS/pager.css" rel="stylesheet" /> 25 <link href="/media/assetsV3/css/bootstrap-float-label.min.css" rel="stylesheet" /> 26 27 <link href="/media/assetsV3/plugins/nineslider/css/style.css" rel="stylesheet" /> 28 29
29<script src="/media/JavaScript/jquery-3.3.1.min.js"></script>
29 30
30<script src="/media/JavaScript/moment.min.js"></script>
30 31
31<script src="/media/JavaScript/bootstrap-datetimepicker.js"></script>
31 32
32<script src="/media/JavaScript/jszip.min.js"></script>
32 33
33<script src="/media/JavaScript/merge-images.js"></script>
33 34
34<script src="/media/JavaScript/fontawesome-markers.min.js"></script>
34 35
35<script src="/media/JavaScript/FileSaver.js"></script>
35 36
36<script src="/media/JavaScript/xlsx.full.js"></script>
36 37
37<script src="/media/highchart/proj4.js"></script>
37 38
38<script src="/media/highchart/highcharts.js"></script>
38 39
39<script src="/media/highchart/highcharts-map.js"></script>
39 40
40<script src="/media/highchart/highcharts-more.js"></script>
40 41
41<script src="/media/highchart/solid-gauge.js"></script>
41 42
42<script src="/media/highchart/exporting.js"></script>
42 43
43<script src="/media/highchart/offline-exporting.js"></script>
43 44
44<script src="/media/highchart/export-data.js"></script>
44 45 46
46<script type="module" src="https://cdn.jsdelivr.net/npm/ldrs/dist/auto/hourglass.js"></script>
46 47 48
48<script src='/media/JavaScript/script.js?1756807510'></script>
48
48<script src='/media/JavaScript/pre-config.js?1756807510'></script>
48 49 <!-- Knockout --> 50
50<script src='/media/JavaScript/knockout-3.4.0.js?1756807510'></script>
50
50<script src="/media/JavaScript/knockout.mapping.js"></script>
50 51
51<script src='/media/JavaScript/knockout.extension.js?1757992637'></script>
51 52
52<script src='/media/JavaScript/pager.min.js?1756807510'></script>
52
52<script src="/media/JavaScript/jquery.ba-hashchange.min.js"></script>
52 53
53<script src='/media/ViewModel/app.js?1789615697'></script>
53 54
54<script src='/media/JavaScript/knockout.validation.js?1756807510'></script>
54
54<script src='/media/assetsV3/js/bootstrap.min.js?1756807513'></script>
54
54<script src='/media/assetsV3/js/custom.min.js?1756807513'></script>
54
54<script src='/media/assetsV3/js/perfect-scrollbar.jquery.min.js?1756807513'></script>
54 55</head> 56 57<body> 58 <style> 59 .modal-bgheader { 60 background:url(/media/assetsV2/images/bg-modal.jpg); 61 color:#ffffff; 62 -webkit-background-size: cover; 63 -moz-background-size: cover; 64 -o-background-size: cover; 65 background-size: cover; 66 } 67 68 /* From Uiverse.io by SelfMadeSystem */ 69 .absolute { 70 position: absolute; 71 } 72 73 .inline-block { 74 display: inline-block; 75 } 76 77 .loader { 78 display: flex; 79 } 80 81 .loader svg { 82 width: 64px; 83 height: 64px; 84 flex-shrink: 0; 85 } 86 87 .w-2 { 88 width: 0.5em; 89 } 90 91 .dash { 92 animation: dashArray 2s ease-in-out infinite, 93 dashOffset 2s linear infinite; 94 } 95 96 .spin { 97 animation: spinDashArray 2s ease-in-out infinite, 98 spin 8s ease-in-out infinite, 99 dashOffset 2s linear infinite; 100 transform-origin: center; 101 } 102 103 @keyframes dashArray { 104 0% { 105 stroke-dasharray: 0 1 359 0; 106 } 107 108 50% { 109 stroke-dasharray: 0 359 1 0; 110 } 111 112 100% { 113 stroke-dasharray: 359 1 0 0; 114 } 115 } 116 117 @keyframes spinDashArray { 118 0% { 119 stroke-dasharray: 270 90; 120 } 121 122 50% { 123 stroke-dasharray: 0 360; 124 } 125 126 100% { 127 stroke-dasharray: 270 90; 128 } 129 } 130 131 @keyframes dashOffset {
132 0% { 133 stroke-dashoffset: 365; 134 } 135 136 100% { 137 stroke-dashoffset: 5; 138 } 139 } 140 141 @keyframes spin { 142 0% { 143 rotate: 0deg; 144 } 145 146 12.5%, 147 25% { 148 rotate: 270deg; 149 } 150 151 37.5%, 152 50% { 153 rotate: 540deg; 154 } 155 156 62.5%, 157 75% { 158 rotate: 810deg; 159 } 160 161 87.5%, 162 100% { 163 rotate: 1080deg; 164 } 165 } 166</style> 167 168<!-- Waiting Loader --> 169<div class="modal" id="modalLoader" tabindex="-1" role="dialog"> 170 <div style="height:100%; display:flex; justify-content:center; align-items:center"> 171 <!-- From Uiverse.io by SelfMadeSystem --> 172 <div class="loader"> 173 <svg height="0" width="0" viewBox="0 0 64 64" class="absolute"> 174 <defs class="s-xJBuHA073rTt" xmlns="http://www.w3.org/2000/svg"> 175 <linearGradient class="s-xJBuHA073rTt" gradientUnits="userSpaceOnUse" y2="2" x2="0" y1="62" x1="0" id="b"> 176 <stop class="s-xJBuHA073rTt" stop-color="#973BED"></stop> 177 <stop class="s-xJBuHA073rTt" stop-color="#007CFF" offset="1"></stop> 178 </linearGradient> 179 <linearGradient class="s-xJBuHA073rTt" gradientUnits="userSpaceOnUse" y2="0" x2="0" y1="64" x1="0" id="c"> 180 <stop class="s-xJBuHA073rTt" stop-color="#FFC800"></stop> 181 <stop class="s-xJBuHA073rTt" stop-color="#F0F" offset="1"></stop> 182 <animateTransform repeatCount="indefinite" keySplines=".42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1" keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1" dur="8s" values="0 32 32;-270 32 32;-270 32 32;-540 32 32;-540 32 32;-810 32 32;-810 32 32;-1080 32 32;-1080 32 32" type="rotate" attributeName="gradientTransform"></animateTransform> 183 </linearGradient> 184 <linearGradient class="s-xJBuHA073rTt" gradientUnits="userSpaceOnUse" y2="2" x2="0" y1="62" x1="0" id="d"> 185 <stop class="s-xJBuHA073rTt" stop-color="#00E0ED"></stop> 186 <stop class="s-xJBuHA073rTt" stop-color="#00DA72" offset="1"></stop> 187 </linearGradient> 188 </defs> 189 </svg> 190 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" class="inline-block"> 191 <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 12 56 V 8 L 32 32 L 52 8 V 56" class="dash" id="m" pathLength="360"></path> 192 </svg> 193 <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="--rotation-duration:0ms; --rotation-direction:normal;" viewBox="0 0 64 64" class="inline-block"> 194 <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#c)" d="M 32 8 V 56" class="dash" id="i" pathLength="360"></path> 195 </svg> 196 <div class="w-2"></div> 197 <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="--rotation-duration:0ms; --rotation-direction:normal;" viewBox="0 0 64 64" class="inline-block"> 198 <path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 46 12 C 46 2 18 2 18 22 C 18 38 46 38 46 54 C 46 64 18 64 18 52" class="dash" id="s" pathLength="360"></path> 199 </svg> 200 </div> 201 </div> 202</div> 203 204<!-- Modal Wait --> 205<div class="modal" id="modalWait" tabindex="-1" role="dialog"> 206 <div class="modal-dialog" role="document" style="min-width:600px; max-width:600px;"> 207 <div class="modal-content"> 208 <div class="modal-header"> 209 <h3 class="modal-title text-primary">Downloading</h3> 210 </div> 211 <div class="modal-body no-padding-horizontal"> 212 <img src="/media/images/waiting.gif" /> 213 </div> 214 <div class="modal-footer" style="display:block"> 215 <div class="pull-left">Speed: 9.9 MB/s</div> 216 <div class="pull-right">Downloaded: 9.9 MB / 9.9 MB (100.00%)</div> 217 </div> 218 </div> 219 </div> 220</div> 221 222<!-- Modal Permission --> 223<div class="modal" id="modalPermission" tabindex="-1" role="dialog"> 224 <div class="modal-dialog" role="document"> 225 <div class="modal-content"> 226 <div class="modal-header"> 227 <h3 class="modal-title text-primary">áááá¶ááá·áááá· - No Permission</h3> 228 </div> 229 <div class="modal-body"> 230 <p style="font-size:18px">á¢ááááá»ááá¶ááá·áááá·áááááááá·áááááááá</p> 231 <div style="font-size:18px">You are not allowed to edit data</div> 232 </div> 233 <div class="modal-footer"> 234 <button class="btn btn-default width100" data-dismiss="modal">OK</button> 235 </div> 236 </div> 237 </div> 238</div> 239 240<!-- Modal Delete --> 241<div class="modal" id="modalDelete" tabindex="-1" role="dialog"> 242 <div class="modal-dialog" role="document"> 243 <div class="modal-content"> 244 <div class="modal-header"> 245 <h3 class="modal-title text-danger">Delete</h3> 246 </div> 247 <div class="modal-body"> 248 <h4>Do you want to delete?</h4> 249 </div> 250 <div class="modal-footer"> 251 <button class="btn btn-danger width100" data-dismiss="modal">Delete</button> 252 <button class="btn btn-default width100" data-dismiss="modal">Cancel</button> 253 </div> 254 </div> 255 </div> 256</div> 257 258<!-- Modal Restore --> 259<div class="modal" id="modalRestore" tabindex="-1" role="dialog"> 260 <div class="modal-dialog" role="document"> 261 <div class="modal-content"> 262 <div class="modal-header"> 263 <h3 class="modal-title text-danger">Restore</h3> 264 </div> 265 <div class="modal-body"> 266 <h4>Do you want to restore?</h4> 267 </div> 268 <div class="modal-footer"> 269 <button class="btn btn-danger width100" data-dismiss="modal">Restore</button> 270 <button class="btn btn-default width100" data-dismiss="modal">Cancel</button> 271 </div> 272 </div> 273 </div> 274</div> 275 276<!-- Modal Confirm --> 277<div class="modal" id="modalConfirm" tabindex="-1" role="dialog"> 278 <div class="modal-dialog" role="document"> 279 <div class="modal-content"> 280 <div class="modal-header"> 281 <h3 class="modal-title text-danger">Confirmation</h3> 282 </div> 283 <div class="modal-body"> 284 <h4>Are you sure?</h4> 285 </div> 286 <div class="modal-footer"> 287 <button class="btn btn-danger width100" data-dismiss="modal">Yes</button> 288 <button class="btn btn-default width100" data-dismiss="modal">No</button> 289 </div> 290 </div> 291 </div> 292</div> 293 294<!-- Modal Message --> 295<div class="modal" id="modalMessage" tabindex="-1" role="dialog" style="z-index:999999"> 296 <div class="modal-dialog" role="document"> 297 <div class="modal-content"> 298 <div class="modal-header"> 299 <h3 class="modal-title text-primary"></h3> 300 </div> 301 <div class="modal-body" style="font-size:18px"></div> 302 <div class="modal-footer"> 303 <button class="btn btn-default width100" data-dismiss="modal">OK</button> 304 </div> 305 </div> 306 </div> 307</div> 308 309<!-- Modal Contact Us --> 310<div class="modal fade" id="modalContactUs" tabindex="-1" role="dialog"> 311 <div class="modal-dialog" role="document"> 312 <div class="modal-content"> 313 <div class="modal-header modal-bgheader"> 314 <h1>Contact Us</h1> 315 </div> 316 <div class="modal-body"> 317 <ul class="text-primary"> 318 <li style="font-size:17px"> 319 Dr. <span style="font-weight: bold">Siv Sovannaroth</span> 320 <br /> 321 <span style="font-size:12px">Email: [email protected]</span> 322 </li> 323 </ul> 324 <ul class="text-primary"> 325 <li style="font-size:17px"> 326 Mr. <span style="font-weight: bold">Ngor Pengby</span> 327 <br />
328 <span style="font-size:12px">Tel: 010 88 33 88</span> 329 <br /> 330 <span style="font-size:12px">Email: [email protected]</span> 331 </li> 332 </ul> 333 <button class="btn btn-default width100" data-dismiss="modal">Close</button> 334 </div> 335 </div> 336 </div> 337</div> 338 339<!-- Modal Error --> 340<div class="modal fade" id="modalPHPError" tabindex="-1" role="dialog"> 341 <div class="modal-dialog modal-xl" role="document" style="height:calc(100% - 60px)"> 342 <div class="modal-content" style="height:100%; display:flex; flex-direction:column"> 343 <div class="modal-header"> 344 <div style="display:flex; align-items:center; justify-content:space-between"> 345 <h4 class="modal-title text-primary">Server Side Error</h4> 346 <button class="btn btn-default btn-sm" data-dismiss="modal">Close</button> 347 </div> 348 </div> 349 <div class="modal-body" style="flex-grow:1"> 350 <iframe style="width:100%; height:100%; border:none"></iframe> 351 </div> 352 </div> 353 </div> 354</div> 355 356<!-- Modal Download --> 357<div class="modal fade" id="modalDownload" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"> 358 <div class="modal-dialog" style="max-width:600px"> 359 <div class="modal-content"> 360 <div class="modal-header justify-content-between">
361 <span class="modal-title fs-4 text-primary">Downloading</span> 362 <span class="spinner-border text-success"></span> 363 </div> 364 <div class="modal-body hstack justify-content-between"> 365 <div>Speed: 0.0 MB/s</div> 366 <div>Downloaded: 0.0 MB / 0.0 MB (0.0%)</div> 367 </div> 368 </div> 369 </div> 370</div> 371 <div id="wrapper9" style="padding: 10px 10px 50px 10px;"> 372 373<style> 374 /* Clean Dashboard Styles */ 375 body { background-color: #f4f6f9; } 376 377 /* Navbar */ 378 .navbar-custom { 379 background: linear-gradient(135deg, #00838f 0%, #00acc1 100%); 380 border: none; 381 border-radius: 0; 382 margin-bottom: 0; 383 box-shadow: 0 2px 8px rgba(0,0,0,0.12); 384 } 385 .navbar-custom .navbar-brand { 386 color: #fff !important; 387 font-weight: 600; 388 font-size: 19px; 389 padding: 15px 20px; 390 letter-spacing: 0.3px; 391 } 392 .navbar-custom .navbar-text { 393 color: rgba(255,255,255,0.95) !important; 394 font-size: 13px; 395 font-weight: 500; 396 } 397 398 /* Card/Panel */ 399 .card-box { 400 background: linear-gradient(to bottom, #ffffff 0%, #fafbfc 100%); 401 border-radius: 6px; 402 box-shadow: 0 2px 8px rgba(0,0,0,0.06); 403 padding: 24px; 404 margin-bottom: 20px; 405 border: 1px solid #e3e6ea; 406 } 407 408 /* Form Labels & Inputs */ 409 .control-label { 410 font-size: 10px; 411 font-weight: 700; 412 text-transform: uppercase; 413 color: #6c757d; 414 margin-bottom: 6px; 415 display: block; 416 letter-spacing: 0.5px; 417 } 418 .form-control { 419 box-shadow: inset 0 1px 2px rgba(0,0,0,0.04); 420 border-color: #d1d5db; 421 border-radius: 4px; 422 height: 36px; 423 font-size: 13px; 424 transition: all 0.2s ease; 425 } 426 .form-control:focus { 427 border-color: #00acc1; 428 box-shadow: 0 0 0 3px rgba(0,172,193,0.1); 429 outline: none; 430 } 431 .input-sm { 432 height: 34px; 433 font-size: 13px; 434 padding: 6px 12px; 435 } 436 437 /* Buttons */ 438 .btn-custom { 439 border-radius: 4px; 440 font-weight: 600; 441 text-transform: uppercase; 442 font-size: 11px; 443 letter-spacing: 0.8px; 444 padding: 8px 18px; 445 box-shadow: 0 2px 4px rgba(0,0,0,0.08); 446 transition: all 0.2s ease; 447 border: none; 448 } 449 .btn-custom:hover { 450 transform: translateY(-1px); 451 box-shadow: 0 4px 8px rgba(0,0,0,0.12); 452 } 453 .btn-custom:active { 454 transform: translateY(0); 455 } 456 457 /* Login */ 458 .login-title { 459 text-align: center; 460 margin-bottom: 25px; 461 color: #495057; 462 font-weight: 800; 463 text-transform: uppercase; 464 font-size: 14px; 465 letter-spacing: 1.5px; 466 opacity: 0.9; 467 } 468 .input-group-addon { 469 background-color: #f8f9fa; 470 border-color: #d1d5db; 471 color: #6c757d; 472 min-width: 45px; 473 text-align: center; 474 border-right: none; 475 } 476 .login-input { 477 border-left: none; 478 padding-left: 0; 479 } 480 .login-input:focus { 481 border-color: #d1d5db; 482 box-shadow: none; /* remove default glow to keep it clean, or keep it subtle */ 483 border-left: none; 484 } 485 486 .btn-login { 487 background-color: #ff8c66; /* Coral/Orange color */ 488 color: white; 489 font-size: 13px; 490 padding: 10px; 491 margin-top: 10px; 492 font-weight: 700; 493 } 494 .btn-login:hover, .btn-login:focus { 495 background-color: #ff7043; 496 color: white; 497 box-shadow: 0 4px 12px rgba(255, 112, 67, 0.3); 498 } 499 500 /* Tab Navigation */ 501 .tab-section { 502 margin-top: 12px; 503 } 504 .btn-tab { 505 background: #fff; 506 border: 1px solid #d1d5db; 507 color: #495057; 508 font-size: 12px; 509 font-weight: 600; 510 padding: 8px 16px; 511 margin-right: 6px; 512 margin-bottom: 6px; 513 border-radius: 4px; 514 text-transform: uppercase; 515 letter-spacing: 0.3px; 516 transition: all 0.2s ease; 517 box-shadow: 0 1px 2px rgba(0,0,0,0.04); 518 } 519 .btn-tab:hover { 520 background: #f8f9fa; 521 border-color: #00acc1; 522 color: #00838f; 523 box-shadow: 0 2px 4px rgba(0,0,0,0.08); 524 transform: translateY(-1px); 525 } 526 .btn-tab.active {
527 background: linear-gradient(135deg, #00838f 0%, #00acc1 100%); 528 border-color: #00838f; 529 color: #fff; 530 box-shadow: 0 2px 6px rgba(0,131,143,0.3); 531 } 532 .contact-btn { 533 position: absolute; 534 right: 25px; 535 top: -48px; 536 z-index: 10; 537 } 538 539 /* Utilities */ 540 .mt-20 { margin-top: 20px; } 541 .mb-0 { margin-bottom: 0; } 542 .mb-10 { margin-bottom: 10px; } 543 .text-white-50 { color: rgba(255,255,255,0.7); } 544 .gap-10 { margin-right: 10px; } 545 546 /* Responsive */ 547 @media (max-width: 768px) { 548 .card-box { padding: 16px; } 549 .control-label { font-size: 9px; } 550 .btn-tab { font-size: 11px; padding: 6px 12px; } 551 .contact-btn { position: static; margin-bottom: 10px; } 552 } 553</style> 554 555<div class="sticky autohide navbar2"> 556 <!-- Header --> 557 <nav class="navbar navbar-custom"> 558 <div class="container-fluid"> 559 <div class="navbar-header"> 560 <a class="navbar-brand" href="\Home"> 561 <i class="fa fa-bar-chart gap-10"></i> Malaria Dashboard 562 </a> 563 </div> 564 <div class="navbar-right hidden-xs"> 565 <p class="navbar-text"> 566 <span style="margin-right: 20px;"> 567 <i class="fa fa-history text-white-50"></i> Yesterday: <b data-bind="text: yesterdayVisit"></b> 568 </span> 569 <span> 570 <i class="fa fa-users text-white-50"></i> Today: <b data-bind="text: todayVisit"></b> 571 </span> 572 </p> 573 </div> 574 </div> 575 </nav> 576 577 <!-- Main Content --> 578 <div class="container-fluid mt-20" style="padding: 0 !important"> 579 <div class="row"> 580 <!-- Filter Section --> 581 <div class="col-md-9"> 582 <div class="card-box"> 583 <form> 584 <div class="row"> 585 <!-- Province --> 586 <div class="col-md-3 col-sm-6"> 587 <div class="form-group mb-0"> 588 <label class="control-label">Province</label> 589 <select class="form-control input-sm" data-bind="disable: isGuest, value: prov, options: provList, optionsValue: 'code', optionsText: 'name', optionsCaption: provList().length > 1 ? 'All Provinces' : undefined, change: changeOpt"></select> 590 </div> 591 </div> 592 593 <!-- From --> 594 <div class="col-md-3 col-sm-6"> 595 <div class="row" style="margin: 0 -5px;"> 596 <div class="col-xs-6" style="padding: 0 5px;"> 597 <div class="form-group mb-0"> 598 <label class="control-label">From Year</label> 599 <select class="form-control input-sm" data-bind="disable: isGuest, value: fromYear, options: yearList, change: changeOpt"></select> 600 </div> 601 </div> 602 <div class="col-xs-6" style="padding: 0 5px;"> 603 <div class="form-group mb-0"> 604 <label class="control-label" data-bind="text: tab() === 'Stock' ? 'Month From' : 'Month'"></label> 605 <select class="form-control input-sm" data-bind="value: from, options: monthList, change: changeOpt"></select> 606 </div> 607 </div> 608 </div> 609 </div> 610 611 <!-- To --> 612 <div class="col-md-3 col-sm-6"> 613 <div class="row" style="margin: 0 -5px;"> 614 <div class="col-xs-6" style="padding: 0 5px;"> 615 <div class="form-group mb-0"> 616 <label class="control-label">
616To Year</label> 617 <select class="form-control input-sm" data-bind="disable: isGuest, value: toYear, options: yearList, change: changeOpt"></select> 618 </div> 619 </div> 620 <div class="col-xs-6" style="padding: 0 5px;"> 621 <div class="form-group mb-0"> 622 <label class="control-label" data-bind="text: tab() === 'Stock' ? 'Month To' : 'Month'"></label> 623 <select class="form-control input-sm" data-bind="value: to, options: monthList, change: changeOpt"></select> 624 </div> 625 </div> 626 </div> 627 </div> 628 629 <!-- Filter Mode --> 630 <div class="col-md-2 col-sm-6" data-bind="visible: tab() !== 'Stock'"> 631 <div class="form-group mb-0"> 632 <label class="control-label">Filter Mode</label> 633 <select class="form-control input-sm" data-bind="disable: isGuest, value: filterMode, change: changeOpt"> 634 <option value="0">By Report Date</option> 635 <option value="1">By Diagnosis Date</option> 636 </select> 637 </div> 638 </div> 639 640 <!-- View Button --> 641 <div class="col-md-1 col-sm-12"> 642 <div class="form-group mb-0"> 643 <label class="control-label"> </label> 644 <button type="button" class="btn btn-info btn-sm btn-block btn-custom" data-bind="disable: isGuest, click: submit"> 645 <i class="fa fa-search"></i> View 646 </button> 647 </div> 648 </div> 649 </div> 650 </form> 651 </div> 652 </div> 653 654 <!-- Login (Guest) --> 655 <div class="col-md-3"> 656 <div class="card-box"> 657 <h5 class="login-title">Guest Login</h5> 658 <form action="/Login" method="post"> 659 <div class="form-group"> 660 <div class="input-group"> 661 <span class="input-group-addon"><i class="fa fa-user"></i></span> 662 <input class="form-control input-sm login-input" required type="text" name="username" placeholder="Username" /> 663 </div> 664 </div> 665 <div class="form-group"> 666 <div class="input-group"> 667 <span class="input-group-addon"><i class="fa fa-lock"></i></span> 668 <input class="form-control input-sm login-input" required type="password" name="password" placeholder="Password" /> 669 </div> 670 </div> 671 <button class="btn btn-login btn-sm btn-block btn-custom"> 672 <i class="fa fa-sign-in"></i> Login 673 </button> 674 675 </form> 676 </div> 677 </div> 678 </div> 679 </div> 680 681 <!-- Tab Navigation --> 682 <div class="tab-section" style="position: relative;"> 683 <div class="button-group"> 684 <button type="button" data-tab="Overview" data-bind="click: menuClick, visible: app.user.permiss['Dashboard'].contain('Overview'), css: { active: tab() === 'Overview' }" class="btn btn-tab">Overview</button> 685 <button type="button" data-tab="Surveillance" data-bind="click: menuClick, visible: app.user.permiss['Dashboard'].contain('Surveillance'), css: { active: tab() === 'Surveillance' }" class="btn btn-tab">Surveillance</button> 686 <button type="button" data-tab="Stock" data-bind="click: menuClick, visible: app.user.permiss['Dashboard'].contain('Stock'), css: { active: tab() === 'Stock' }" class="btn btn-tab">Stock</button> 687 <button type="button" data-tab="Border" data-bind="click: menuClick, visible: app.user.permiss['Dashboard'].contain('Border'), css: { active: tab() === 'Border' }" class="btn btn-tab">Border</button> 688 <button type="button" data-tab="Map" data-bind="click: menuClick, visible: app.user.permiss['Dashboard'].contain('Map'), css: { active: tab() === 'Map' }" class="btn btn-tab">Map</button> 689 <button type="button" data-tab="PF Map" data-bind="click: menuClick, visible: app.user.permiss['Dashboard'].contain('PF Map'), css: { active: tab() === 'PF Map' }" class="btn btn-tab">PF Map</button> 690 <button type="button" data-tab="Documents" data-bind="click: menuClick, css: { active: tab() === 'Documents' }" class="btn btn-tab">Documents</button> 691 <button type="button" data-tab="App Gallery" data-bind="click: menuClick, css: { active: tab() === 'App Gallery' }" class="btn btn-tab">App Gallery</button> 692 </div> 693 <!-- 694 <a class="btn btn-primary btn-sm btn-custom visible-xs" data-toggle="modal" data-target="#modalContactUs" style="margin-top: 10px;"> 695 <i class="fa fa-phone"></i> Contact Us 696 </a> --> 697 </div> 698</div><!--sticky end--> 699 700<div data-bind="hidden: overviewPart1Ready"> 701 <style> 702/* Skeleton Shimmer Effect */ 703.sk-dashboard-wrapper { 704 width: 100%; 705 padding: 10px; 706} 707.sk-card { 708 background-color: #fff; 709 border-radius: 8px; 710 padding: 15px; 711 box-shadow: 0 2px 10px rgba(0,0,0,0.05); 712 height: 100%; 713 overflow: hidden; 714 margin-bottom: 20px; 715 border: 1px solid #e9ecef; 716} 717.sk-animate { 718 animation: sk-shimmer 2s infinite linear; 719 background: #f6f7f8; 720 background: linear-gradient(to right, #f0f0f0 8%, #e0e0e0 18%, #f0f0f0 33%); 721 background-size: 1000px 100%; 722} 723@keyframes sk-shimmer { 724 0% { background-position: -1000px 0; } 725 100% { background-position: 1000px 0; } 726} 727.sk-title { 728 height: 24px; 729 width: 30%; 730 margin: 0 auto 20px; 731 border-radius: 4px; 732} 733.sk-box { 734 height: 80px; 735 width: 100%; 736 border-radius: 6px; 737} 738.sk-chart { 739 height: 150px; 740 width: 100%; 741 border-radius: 6px; 742} 743.sk-map { 744 height: 615px; 745 width: 100%; 746 border-radius: 0; 747} 748.sk-table-head { 749 height: 40px; 750 width: 100%; 751 border-radius: 4px; 752 margin-bottom: 15px; 753} 754.sk-table-row { 755 height: 35px; 756 width: 100%; 757 border-radius: 4px; 758 margin-bottom: 10px; 759} 760.no-padding { 761 padding: 0 !important; 762} 763</style> 764 765<div class="sk-dashboard-wrapper"> 766 <div class="row"> 767 <!-- Left Column --> 768 <div class="col-sm-6"> 769 <!-- Top Section: Today Case (6 items) --> 770 <div class="sk-card"> 771 <div class="sk-animate sk-title"></div> 772 <div class="row"> 773 <div class="col-sm-2"> 774 <div class="sk-animate sk-box"></div> 775 </div> 776 <div class="col-sm-2"> 777 <div class="sk-animate sk-box"></div> 778 </div> 779 <div class="col-sm-2"> 780 <div class="sk-animate sk-box"></div> 781 </div> 782 <div class="col-sm-2"> 783 <div class="sk-animate sk-box"></div> 784 </div> 785 <div class="col-sm-2"> 786 <div class="sk-animate sk-box"></div> 787 </div> 788 <div class="col-sm-2"> 789 <div class="sk-animate sk-box"></div> 790 </div> 791 </div> 792 </div> 793 794 <!-- Bottom Section: Malaria Case (4 charts) --> 795 <div class="sk-card"> 796 <div class="sk-animate sk-title" style="width: 50%;"></div> 797 <div class="row"> 798 <div class="col-sm-3"> 799 <div class="sk-animate sk-chart"></div> 800 </div> 801 <div class="col-sm-3"> 802 <div class="sk-animate sk-chart"></div> 803 </div> 804 <div class="col-sm-3"> 805 <div class="sk-animate sk-chart"></div> 806 </div> 807 <div class="col-sm-3"> 808 <div class="sk-animate sk-chart"></div> 809 </div> 810 </div> 811 </div> 812 </div> 813 814 <!-- Right Column: Map --> 815 <div class="col-sm-6"> 816 <div class="sk-card no-padding"> 817 <div class="sk-animate sk-map"></div> 818 </div> 819 </div> 820 </div> 821 822 <!-- Bottom Section: Table --> 823 <div class="row"> 824 <div class="col-sm-12"> 825 <div class="sk-card"> 826 <div class="sk-animate sk-table-head"></div> 827 <div class="sk-animate sk-table-row"></div> 828 <div class="sk-animate sk-table-row"></div> 829 <div class="sk-animate sk-table-row"></div> 830 <div class="sk-animate sk-table-row"></div> 831 <div class="sk-animate sk-table-row"></div> 832 <div class="sk-animate sk-table-row"></div> 833 <div class="sk-animate sk-table-row"></div> 834 <div class="sk-animate sk-table-row"></div> 835 </div> 836 </div> 837 </div> 838</div> 839</div> <!--Loading end--> 840 841<div data-bind="visible: true" style="display:none"> 842 <div class="bluecontainer" data-bind="visible: loaded"> 843 <style> 844 .modal { 845 z-index: 999999 !important; 846 } 847 848 /* Today Case Card Styling */ 849 .case-card { 850 border: none; 851 border-radius: 10px; 852 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); 853 transition: transform 0.2s ease, box-shadow 0.2s ease; 854 margin-bottom: 10px; 855 overflow: hidden; 856 } 857 858 .case-card:hover { 859 transform: translateY(-5px); 860 box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); 861 z-index: 10; 862 } 863 864 .case-card .card-header { 865 border: none; 866 color: white; 867 font-weight: bold; 868 text-align: center; 869 padding: 12px 5px; 870 font-size: 18px; 871 display: flex; 872 flex-direction: column; 873 justify-content: center; 874 align-items: center; 875 min-height: 55px; 876 line-height: 1.2; 877 } 878 879 .case-card .card-body { 880 text-align: center; 881 padding: 15px 0; 882 background-color: #fff; 883 } 884 885 .case-card .card-value { 886 font-size: 32px; 887 font-weight: 800; 888 margin: 0; 889 } 890 891 /* Color Themes */ 892 .theme-blue .card-header { 893 background-color: #3498db; 894 } 895 896 .theme-blue .card-body { 897 background-color: rgba(52, 152, 219, 0.08); 898 border: 1px solid #3498db; 899 border-top: none; 900 border-bottom-left-radius: 10px; 901 border-bottom-right-radius: 10px; 902 } 903 904 .theme-blue .card-value { 905 color: #3498db; 906 } 907 908 .theme-teal .card-header { 909 background-color: #1abc9c; 910 } 911 912 .theme-teal .card-body { 913 background-color: rgba(26, 188, 156, 0.08); 914 border: 1px solid #1abc9c; 915 border-top: none; 916 border-bottom-left-radius: 10px; 917 border-bottom-right-radius: 10px; 918 } 919 920 .theme-teal .card-value { 921 color: #1abc9c; 922 } 923 924 .theme-orange .card-header { 925 background-color: #f39c12; 926 } 927 928 .theme-orange .card-body { 929 background-color: rgba(243, 156, 18, 0.08);
930 border: 1px solid #f39c12; 931 border-top: none; 932 border-bottom-left-radius: 10px; 933 border-bottom-right-radius: 10px; 934 } 935 936 .theme-orange .card-value { 937 color: #f39c12; 938 } 939 940 /* Overview Tables */ 941 .overview-table { 942 width: 100%; 943 border-collapse: separate; 944 border-spacing: 0; 945 overflow: hidden; 946 } 947 948 .overview-table thead th { 949 background: #f6f8fb; 950 color: #4b5563; 951 font-size: 13px; 952 font-weight: 600; 953 text-transform: uppercase; 954 letter-spacing: 0.4px; 955 border-bottom: 2px solid #e0e7ff; 956 } 957 958 .overview-table .table-heading { 959 background: linear-gradient(135deg, #00838f, #00acc1); 960 color: #fff; 961 } 962 963 .overview-table .table-heading .table-title { 964 display: flex; 965 flex-wrap: wrap; 966 gap: 8px; 967 align-items: center; 968 justify-content: space-between; 969 } 970 971 .overview-table .table-heading .table-title span { 972 font-size: 13px; 973 font-weight: 600; 974 } 975 976 .overview-table .table-heading .table-title .table-range { 977 font-size: 12px; 978 font-weight: 500; 979 opacity: 0.85; 980 } 981 982 .overview-table tbody td, 983 .overview-table tbody th, 984 .overview-table tfoot th { 985 border-bottom: 1px solid #f0f2f5; 986 font-size: 13px; 987 padding-top: 10px !important; 988 padding-bottom: 10px !important; 989 } 990 991 .overview-table tbody tr:hover { 992 background: #fdfdfd; 993 box-shadow: inset 2px 0 0 #00acc1; 994 } 995 996 .overview-table .number-cell { 997 font-variant-numeric: tabular-nums; 998 font-weight: 600; 999 color: #111827; 1000 } 1001 1002 .overview-table .badge-tag { 1003 display: inline-flex; 1004 align-items: center; 1005 font-size: 11px; 1006 padding: 2px 8px; 1007 border-radius: 999px; 1008 background: #e0f2f1; 1009 color: #00695c; 1010 font-weight: 600; 1011 text-transform: uppercase; 1012 letter-spacing: 0.5px; 1013 } 1014 1015 .overview-table .with-divider { 1016 border-right: 2px solid #e5e7eb; 1017 } 1018 1019 .case-investigation-table { 1020 --local-cell-bg: #effaf7; 1021 --local-header-bg: linear-gradient(135deg, #d9f5ee, #cdeffc); 1022 --local-text: #065f46; 1023 --intl-cell-bg: #eef1ff; 1024 --intl-header-bg: linear-gradient(135deg, #e7e9ff, #dfe4ff); 1025 --intl-text: #2f2a82; 1026 } 1027 1028 .case-investigation-table .local-heading, 1029 .case-investigation-table .local-column-header { 1030 background: var(--local-header-bg); 1031 color: var(--local-text); 1032 } 1033 1034 .case-investigation-table .local-column { 1035 background: var(--local-cell-bg); 1036 color: var(--local-text); 1037 } 1038 1039 .case-investigation-table .intl-column-header { 1040 background: var(--intl-header-bg); 1041 color: var(--intl-text); 1042 } 1043 1044 .case-investigation-table .intl-column { 1045 background: var(--intl-cell-bg); 1046 color: var(--intl-text); 1047 } 1048 1049 .case-investigation-table tfoot th.local-summary { 1050 background: #e2f6ef; 1051 color: var(--local-text); 1052 } 1053 1054 .case-investigation-table tfoot th.intl-summary { 1055 background: #ecefff; 1056 color: var(--intl-text); 1057 } 1058 1059 .overview-table tfoot th { 1060 background: #f8fafc; 1061 text-transform: uppercase; 1062 font-size: 12px; 1063 } 1064 1065 .surveillance-table { 1066 margin-top: 20px; 1067 } 1068 1069 .surveillance-indicator-heading { 1070 border-right: 2px solid #e9ecef; 1071 vertical-align: middle; 1072 text-transform: uppercase; 1073 letter-spacing: 0.4px; 1074 font-size: 13px; 1075 } 1076 1077 .surveillance-group { 1078 text-align: center; 1079 font-weight: 600; 1080 font-size: 13px; 1081 color: #1f2937; 1082 } 1083 1084 .surveillance-group.with-border { 1085 border-right: 2px solid #e9ecef; 1086 } 1087 1088 .surveillance-column-header { 1089 text-align: center; 1090 font-size: 12px; 1091 padding: 8px; 1092 text-transform: uppercase; 1093 letter-spacing: 0.3px; 1094 } 1095 1096 .surveillance-footnotes { 1097 display: flex; 1098 flex-wrap: wrap; 1099 gap: 16px; 1100 margin-top: 10px; 1101 font-size: 12px; 1102 color: #4b5563; 1103 } 1104</style> 1105<div class="overview" data-bind="visible: tab() == 'Overview' && app.user.permiss['Dashboard'].contain('Overview')" style="display:none; min-width:1600px"> 1106 <div class="row"> 1107 <div class="col-sm-6"> 1108 <div class="d-flex flex-row card1 border-color1" style="align-items:center;"> 1109 <div class="col-sm-12 text-center"> 1110 <div class="row"> 1111 <h3>Today Case</h3> 1112 </div> 1113 <div class="row" data-bind="with: dailyCase"> 1114 <div class="col-sm-2"> 1115 <div class="card case-card theme-blue" param="F" data-bind="click: $root.showDailyCase" style="cursor: pointer;"> 1116 <div class="card-header">Pf</div> 1117 <div class="card-body"> 1118 <h5 class="card-value" data-bind="text: Pf">12</h5> 1119 </div> 1120 </div> 1121 </div> 1122 1123 <div class="col-sm-2"> 1124 <div class="card case-card theme-teal" param="V" data-bind="click: $root.showDailyCase" style="cursor: pointer;"> 1125 <div class="card-header">Pv</div> 1126 <div class="card-body"> 1127 <h5 class="card-value" data-bind="text: Pv">12</h5> 1128 </div> 1129 </div> 1130 </div> 1131 1132 <div class="col-sm-2"> 1133 <div class="card case-card theme-orange" param="M" data-bind="click: $root.showDailyCase" style="cursor: pointer;"> 1134 <div class="card-header"> 1135 Mix <span style="font-size:12px; font-weight:normal; margin-left:5px">(Pf + Pv)</span> 1136 </div> 1137 <div class="card-body"> 1138 <h5 class="card-value" data-bind="text: Mix">12</h5> 1139 </div> 1140 </div> 1141 </div> 1142 1143 <div class="col-sm-2"> 1144 <div class="card case-card theme-blue" param="A" data-bind="click: $root.showDailyCase" style="cursor: pointer;"> 1145 <div class="card-header">Pm</div> 1146 <div class="card-body"> 1147 <h5 class="card-value" data-bind="text: Pm">12</h5> 1148 </div> 1149 </div> 1150 </div> 1151 1152 <div class="col-sm-2"> 1153 <div class="card case-card theme-teal" param="O" data-bind="click: $root.showDailyCase" style="cursor: pointer;"> 1154 <div class="card-header">Po</div> 1155 <div class="card-body"> 1156 <h5 class="card-value" data-bind="text: Po">12</h5> 1157 </div> 1158 </div> 1159 </div> 1160 1161 <div class="col-sm-2"> 1162 <div class="card case-card theme-orange" param="K" data-bind="click: $root.showDailyCase" style="cursor: pointer;"> 1163 <div class="card-header">Pk</div> 1164 <div class="card-body"> 1165 <h5 class="card-value" data-bind="text: Pk">12</h5> 1166 </div> 1167 </div> 1168 </div> 1169 1170 </div> 1171 </div> 1172 </div> <!--today case end--> 1173 1174 <br /> 1175 1176 <div class="d-flex flex-row card1 border-color1" style="align-items:center; padding: 5px;"> 1177 <div class="col-sm-12 text-center"> 1178 <div class="row"> 1179 <h3>Malaria Case in <span data-bind="text: moment().add(-1, 'M').format('MMMM YYYY') + ' - '+ moment().format('MMMM YYYY')"></span></h3> 1180 </div> 1181 <div class="row"> 1182 <div class="col-sm-3"> 1183 <div class="card" style="cursor: pointer;"> 1184 <div class="card-body1"> 1185 <div class="chart-container1" style="border: none;"> 1186 <div id="pfChart" class="chartbox1"></div> 1187 </div> 1188 </div> 1189 </div> 1190 </div> 1191 1192 <div class="col-sm-3"> 1193 <div class="card" style="cursor: pointer;"> 1194 <div class="card-body1"> 1195 <div class="chart-container1" style="border: none"> 1196 <div id="pvChart" class="chartbox1"></div> 1197 </div> 1198 </div> 1199 </div> 1200 </div> 1201 1202 <div class="col-sm-3"> 1203 <div class="card" style="cursor: pointer;"> 1204 <div class="card-body1"> 1205 <div class="chart-container1" style="border: none"> 1206 <div id="mixChart" class="chartbox1"></div> 1207 </div> 1208 </div> 1209 </div> 1210 </div> 1211 1212 <div class="col-sm-3"> 1213 <div class="card" style="cursor: pointer;"> 1214 <div class="card-body1"> 1215 <div class="chart-container1" style="border: none"> 1216 <div id="pmpopkChart" class="chartbox1"></div> 1217 </div> 1218 </div> 1219 </div> 1220 </div> 1221 1222 </div> 1223 </div> 1224 </div> <!--this month case end--> 1225 </div> <!--end col-sm-6--> 1226 1227 <!--slide go here--> 1228 <div class="col-sm-6"> 1229 <div class="chart-container card"> 1230 <div id="mapPatient" class="chartbox no-margin" style="height:615px"></div> 1231 </div> 1232 </div> <!--end col-sm-6--> 1233 </div> <!--End row--> 1234 <div class="row">
1235 <div class="pull-left col col-sm-12" style="margin-bottom:20px"> 1236 <div id="exportOverview2"> 1237 <table style="margin-top:30px" class="table color-bordered-table info-bordered-table table-striped box-shadow border-color rounded-corners overview-table case-investigation-table"> 1238 <thead> 1239 <tr style="height:26px"> 1240 <th class="tbl-title table-heading" colspan="10"> 1241 <div class="table-title"> 1242 <span class="badge-tag">Case Investigation</span> 1243 <span class="table-range" data-bind="text: lastSearch().from + ' ' + lastSearch().fromYear + ' - ' + lastSearch().to + ' ' + lastSearch().toYear"></span> 1244 <span class="table-range" data-bind="text: '(' + (prov() == null ? 'Whole Country' : getPvName(prov())) + ')' "></span> 1245 </div> 1246 </th> 1247 </tr> 1248 <tr> 1249 <th rowspan="2" class="with-divider">Species</th> 1250 <th rowspan="2" class="with-divider text-right">Malaria Patient (Persons)</th> 1251 <th rowspan="2" class="with-divider text-right">Cases</th> 1252 <th rowspan="2" class="with-divider text-right">Investigated</th> 1253 <th colspan="3" class="with-divider text-center local-heading" style="color: #000;">Local Cases</th> 1254 <th rowspan="2" class="with-divider text-right intl-column-header" style="color: #000;">Relapse/Recrudecent</th> 1255 <th rowspan="2" class="with-divider text-right intl-column-header" style="color: #000;">Internationally Imported</th> 1256 </tr> 1257 <tr> 1258 <th class="with-divider text-right local-column-header" style="color: #000;">Locally Aquired</th> 1259 <th class="with-divider text-right local-column-header" style="color: #000;">Domestically Imported</th> 1260 <th class="with-divider text-right local-column-header" style="color: #000;">Induced</th> 1261 </tr> 1262 </thead> 1263 <tbody data-bind="foreach: prov() == null ? caseInvestigate : caseInvestigateEndemic"> 1264 <tr> 1265 <td data-bind="text: Diagnosis"></td> 1266 <td class="number-cell" align="right" data-bind="text: Patient"></td> 1267 <td class="number-cell" align="right" data-bind="text: Cases"></td> 1268 <td class="number-cell" align="right" data-bind="text: Classify"></td> 1269 <td style="color: #000;" class="number-cell local-column" align="right" data-bind="text: L1"></td> 1270 <td style="color: #000;" class="number-cell local-column" align="right" data-bind="text: LC"></td> 1271 <td style="color: #000;" class="number-cell local-column" align="right" data-bind="text: Induce"></td> 1272 <td style="color: #000;" class="number-cell intl-column" align="right" data-bind="text: Relapse"></td> 1273 <td style="color: #000;" class="number-cell intl-column" align="right" data-bind="text: IMP"></td> 1274 </tr> 1275 </tbody> 1276 <tfoot> 1277 <tr> 1278 <th>Subtotal</th> 1279 <th class="number-cell" align="right" data-bind="text: $root.lastSearch().fromYear > 2022 ? (prov() == null ? caseInvestigate()?.sum('Patient') : caseInvestigateEndemic()?.sum('Patient')) : 'N/A'"></th> 1280 <th class="number-cell" align="right" data-bind="text: prov() == null ? caseInvestigate()?.sum('Cases') : caseInvestigateEndemic()?.sum('Cases')"></th> 1281 <th class="number-cell" align="right" data-bind="text: prov() == null ? caseInvestigate()?.sum('Classify') : caseInvestigateEndemic()?.sum('Classify')"></th> 1282 <th style="color: #000;" class="number-cell local-column" align="right" data-bind="text: prov() == null ? caseInvestigate()?.sum('L1') : caseInvestigateEndemic()?.sum('L1')"></th> 1283 <th style="color: #000;" class="number-cell local-column" align="right" data-bind="text: prov() == null ? caseInvestigate()?.sum('LC') : caseInvestigateEndemic()?.sum('LC')"></th> 1284 <th style="color: #000;" class="number-cell local-column" align="right" data-bind="text: $root.lastSearch().fromYear >= 2024 ? (prov() == null ? caseInvestigate()?.sum('Induce') : caseInvestigateEndemic()?.sum('Induce')) : 'N/A'"></th> 1285 <th style="color: #000;" class="number-cell intl-column" align="right" data-bind="text: prov() == null ? caseInvestigate()?.sum('Relapse') : caseInvestigateEndemic()?.sum('Relapse')"></th> 1286 <th style="color: #000;" class="number-cell intl-column" align="right" data-bind="text: prov() == null ? caseInvestigate()?.sum('IMP') : caseInvestigateEndemic()?.sum('IMP')"></th> 1287 </tr> 1288 1289 <tr> 1290 <th>Total (Human Malaria) </th> 1291 <th class="number-cell" align="right" data-bind="text: $root.lastSearch().fromYear > 2022 ? (prov() == null ? caseInvestigate()?.sum('Patient') : caseInvestigateEndemic()?.sum('Patient')) : 'N/A'"></th> 1292 <th class="number-cell" align="right" data-bind="text: prov() == null ? caseInvestigate()?.sum('Cases') : caseInvestigateEndemic()?.sum('Cases')"></th> 1293 <th class="number-cell" align="right" data-bind="text: prov() == null ? caseInvestigate()?.sum('Classify') : caseInvestigateEndemic()?.sum('Classify')"></th> 1294 <th style="color: #000;" colspan="3" class="number-cell local-summary" align="center" data-bind="text: prov() == null ? totalLocalCase : totalLocalCaseEndemic"></th> 1295 <th style="color: #000;" class="number-cell intl-summary" align="center" data-bind="text: prov() == null ? caseInvestigate()?.sum('Relapse') : caseInvestigateEndemic()?.sum('Relapse')"></th> 1296 <th style="color: #000;" class="number-cell intl-summary" align="center" data-bind="text: prov() == null ? caseInvestigate()?.sum('IMP') : caseInvestigateEndemic()?.sum('IMP')"></th> 1297 </tr> 1298 <tr> 1299 <th>Total (Human + Zoonotic Malaria)</th> 1300 <th class="number-cell" align="right" data-bind="text: $root.lastSearch().fromYear > 2022 ? (prov() == null ? caseInvestigate()?.sum('Patient') : caseInvestigateEndemic()?.sum('Patient')) : 'N/A'"></th> 1301 <th class="number-cell" align="right" data-bind="text: prov() == null ? caseInvestigate()?.sum('Cases') : caseInvestigateEndemic()?.sum('Cases')"></th> 1302 <th class="number-cell" align="right" data-bind="text: prov() == null ? caseInvestigate()?.sum('Classify') : caseInvestigateEndemic()?.sum('Classify')"></th> 1303 <th style="color: #000;" colspan="3" class="number-cell local-summary" align="center" data-bind="text: prov() == null ? totalLocalCaseWithPkExclude : totalLocalCaseEdemicWithPkExclude"></th> 1304 <th style="color: #000;" class="number-cell intl-summary" align="center" data-bind="text: prov() == null ? caseInvestigate()?.sum('Relapse') : caseInvestigateEndemic()?.sum('Relapse')"></th> 1305 <th style="color: #000;" class="number-cell intl-summary" align="center" data-bind="text: prov() == null ? caseInvestigate()?.sum('IMP') : caseInvestigateEndemic()?.sum('IMP')"></th> 1306 </tr> 1307 </tfoot> 1308 </table> 1309 1310 <p> 1311 Note: <span style="font-weight: bold">Local Cases</span> include 1312 locally-acquired, domestically-imported, and induced cases.<br>
1313 <span style="font-weight: bold">From 2026 onward,</span> Local Cases represent only human malaria and exclude the 1314 zoonotic species <em>Plasmodium knowlesi</em> (Pk). 1315 </p> 1316 1317 <div data-bind="visible: prov() >= 0"> 1318 <table style="margin-bottom:0" id="tbl-surveillance" class="table color-bordered-table info-bordered-table table-striped box-shadow border-color rounded-corners overview-table surveillance-table"> 1319 <thead> 1320 <tr style="height:26px"> 1321 <th style="background-color:#1e3799; color:#fff" class="tbl-title table-heading" data-bind="attr: { colspan: 1 + $root.caseProvinceColumns().length }"> 1322 <div class="table-title"> 1323 <span class="badge-tag" data-bind="text: lastSearch().prov == null ? 'National' : provList().find(r => r.code == lastSearch().prov).name"></span> 1324 <span class="table-range">Surveillance data</span> 1325 <span class="table-range" data-bind="text: lastSearch().from + ' - ' + lastSearch().to"></span> 1326 </div> 1327 </th> 1328 </tr> 1329 <tr> 1330 <th rowspan="2" class="surveillance-indicator-heading">Indicators</th> 1331 <!-- ko foreach: $root.caseProvinceColumnGroups() --> 1332 <th style="border-right: 2px solid #e9ecef" class="surveillance-group" data-bind="text: label, attr: { colspan: columns.length }, css: { 'with-border': $index() !== $root.caseProvinceColumnGroups().length - 1 }"></th> 1333 <!-- /ko --> 1334 </tr> 1335 <tr> 1336 <!-- ko foreach: $root.caseProvinceColumnGroups() --> 1337 <!-- ko foreach: columns --> 1338 <th class="surveillance-column-header" data-bind=" 1339 text: label, 1340 attr: { width: 110 }, 1341 css: isChange ? 'bg-purple' : 'bg-info', 1342 style: { borderRight: isChange && addRightBorder ? '2px solid #e9ecef' : '' } 1343 "></th> 1344 <!-- /ko --> 1345 <!-- /ko --> 1346 </tr> 1347 </thead> 1348 <tbody data-bind="foreach: caseProvinceList"> 1349 <tr> 1350 <td data-bind="html: Indicators"></td> 1351 <!-- ko foreach: $root.caseProvinceColumns() --> 1352 <td class="number-cell" align="right"> 1353 <span data-bind="text: $root.fixValue($parent[$data.key], $data.key, $parent.Indicators), css: $root.highlight($parent[$data.key], $data.key, $parent.Indicators)"></span> 1354 </td> 1355 <!-- /ko --> 1356 </tr> 1357 </tbody> 1358 </table> 1359 <div class="surveillance-footnotes"> 1360 <span><sup>1</sup>Cases per 1000 pop (2017 is underestimated)</span> 1361 <span><sup>2</sup>Deaths per 100,000 pop</span> 1362 <span><sup>3</sup>Included imported cases <span data-bind="text: caseInvestigate()[0]?.IMP"></span></span> 1363 </div> 1364 </div> 1365 1366 <div data-bind="visible: prov() == null"> 1367 <table style="margin-top:30px; margin-bottom:0" id="tbl-surveillance" class="table color-bordered-table info-bordered-table table-striped box-shadow border-color roun
1367ded-corners overview-table surveillance-table"> 1368 <thead> 1369 <tr style="height:26px"> 1370 <th style="border-right: 2px solid #e9ecef" class="tbl-title table-heading" data-bind="attr: { colspan: 1 + $root.caseCountryColumns().length }"> 1371 <div class="table-title"> 1372 <span class="badge-tag">National Surveillance</span> 1373 <span class="table-range" data-bind="text: lastSearch().from + ' - ' + lastSearch().to"></span> 1374 <span class="table-range">(Whole Country)</span> 1375 </div> 1376 </th> 1377 </tr> 1378 <tr> 1379 <th rowspan="2" class="surveillance-indicator-heading">Indicators</th> 1380 <!-- ko foreach: $root.caseCountryColumnGroups() --> 1381 <th style="border-right: 2px solid #e9ecef" class="surveillance-group" data-bind="text: label, attr: { colspan: columns.length }, css: { 'with-border': $index() !== $root.caseCountryColumnGroups().length - 1 }"></th> 1382 <!-- /ko --> 1383 </tr> 1384 <tr> 1385 <!-- ko foreach: $root.caseCountryColumnGroups() --> 1386 <!-- ko foreach: columns --> 1387 <th class="surveillance-column-header" data-bind=" 1388 text: label, 1389 attr: { width: 110 }, 1390 css: isChange ? 'bg-purple' : 'bg-info', 1391 style: { borderRight: isChange && addRightBorder ? '2px solid #e9ecef' : '' } 1392 "></th> 1393 <!-- /ko --> 1394 <!-- /ko --> 1395 </tr> 1396 </thead> 1397 <tbody data-bind="foreach: caseCountryList"> 1398 <tr> 1399 <td data-bind="html: Indicators"></td> 1400 <!-- ko foreach: $root.caseCountryColumns() --> 1401 <td class="number-cell" align="right"> 1402 <span data-bind="text: $root.fixValue($parent[$data.key], $data.key, $parent.Indicators), css: $root.highlight($parent[$data.key], $data.key, $parent.Indicators)"></span> 1403 </td> 1404 <!-- /ko --> 1405 </tr> 1406 </tbody> 1407 </table> 1408 <div class="surveillance-footnotes"> 1409 <span>All cases in non-endemic area are imported cases.</span> 1410 <span><sup>3</sup>Included imported cases <span data-bind="text: caseInvestigate()[0]?.IMP"></span></span> 1411 </div> 1412 </div> 1413 </div> 1414 </div> 1415 </div> <!--End row--> 1416 1417 <div class="row"> 1418 <div class="col-sm-4"> 1419 <div class="chart-container2"> 1420 <div id="notify" class="chartbox"></div> 1421 </div> 1422 1423 <div class="chart-container2"> 1424 <div id="reactiveCaseDetection" class="chartbox"></div> 1425 </div> 1426 </div> 1427 <div class="col-sm-4"> 1428 <table style="margin-bottom:0" class="table color-bordered-table info-bordered-table table-striped box-shadow border-color rounded-corners"> 1429 <thead> 1430 <tr class="tbl-title" style="height:26px; font-size:11px !important"> 1431 <th class="bg-purple" data-bind="attr: { colspan: 1 + $root.riskPopColumns().length }"> 1432 <div style="display:flex; align-items:center; justify-content:space-between; gap:12px">
1433 <span style="font-size:17px">Malaria Risk Stratification</span> 1434 <span class="badge-tag" data-bind="text: $root.riskPopPeriod()"></span> 1435 </div> 1436 </th> 1437 </tr> 1438 <tr> 1439 <th class="bg-purple" rowspan="2" style="vertical-align: middle; text-transform:uppercase; letter-spacing:.5px">Category</th> 1440 <!-- ko foreach: $root.riskPopColumnGroups() --> 1441 <th class="bg-info" style="font-weight:600" data-bind="text: year, attr: { colspan: columns.length }"></th> 1442 <!-- /ko --> 1443 </tr> 1444 <tr> 1445 <!-- ko foreach: $root.riskPopColumnGroups() --> 1446 <!-- ko foreach: columns --> 1447 <th class="bg-info" style="background:#e6f1fb; color:#1c3257; font-weight:600" data-bind="text: label"></th> 1448 <!-- /ko --> 1449 <!-- /ko --> 1450 </tr> 1451 </thead> 1452 <tbody data-bind="foreach: riskPop"> 1453 <tr data-bind="style: { backgroundColor: $index() % 2 === 0 ? '#ffffff' : '#f6f9ff' }"> 1454 <td style="font-weight:500" data-bind="text: Category"></td> 1455 <!-- ko foreach: $root.riskPopColumns() --> 1456 <td class="text-center" style="font-weight:600; color:#1f3b57"> 1457 <span data-bind="text: $root.formatRiskPopValue($parent[$data.key], $data.type)"></span> 1458 </td> 1459 <!-- /ko --> 1460 </tr> 1461 </tbody> 1462 </table> 1463 <br /> 1464 <table style="margin-bottom:0" class="table color-bordered-table info-bordered-table table-striped box-shadow border-color rounded-corners"> 1465 <thead> 1466 <tr class="tbl-title" style="height:26px; font-size:11px !important"> 1467 <th colspan="3"> 1468 <div style="display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; font-size:17px"> 1469 <span>Insecticide Treated Net (ITN)</span> 1470 <small data-bind="text: lastSearch().from + ' ' + lastSearch().fromYear + ' - ' + lastSearch().to + ' ' + lastSearch().toYear"></small> 1471 </div> 1472 </th> 1473 </tr> 1474 <tr> 1475 <th style="background:#eef3fb; color:#2c3e50; font-weight:600">Distribution Channel</th> 1476 <th class="bg-info text-center" style="color:#ffffff; font-weight:600">Static</th> 1477 <th class="bg-primary text-center" style="color:#ffffff; font-weight:600">Mobile</th> 1478 </tr> 1479 </thead> 1480 <tbody data-bind="foreach: netList"> 1481 <tr> 1482 <td data-bind="text: Name"></td> 1483 <td class="text-right" data-bind="text: comma(is(Static, 0, '')) + ($index() == 5 ? '%' : '')"></td> 1484 <td class="text-right" data-bind="text: comma(is(Mobile, 0, ''))"></td> 1485 </tr> 1486 </tbody> 1487 </table> 1488 1489 <div>Included bednet at other ministries</div> 1490 1491 <table class="table color-bordered-table info-bordered-table table-striped box-shadow border-color rounded-corners"> 1492 <thead> 1493 <tr class="tbl-title"> 1494 <th colspan="4"> 1495 <div style="display:flex; align-items:center; justify-content:space-between; gap:12px"> 1496 <span style="font-size:17px">Foci (all species)</span> 1497 <!-- <span class="badge-tag" style="background:#f3f4ff; color:#5a4bcf">National view</span> --> 1498 </div> 1499 </th> 1500 </tr> 1501 <tr style="text-transform:uppercase; font-size:11px"> 1502 <th style="background:#6c5ce7; font-weight:600">Year</th> 1503 <th class="bg-primary" style="font-weight:600">Active Focus</th> 1504 <th class="bg-info" style="font-weight:600">Residual Focus</th> 1505 <th class="bg-purple" style="font-weight:600">Cleared-up Focus</th> 1506 </tr> 1507 </thead> 1508 <tbody data-bind="foreach: foci"> 1509 <tr data-bind="style: { backgroundColor: $index() % 2 === 0 ? '#ffffff' : '#f9fbff' }" style="text-align:center"> 1510 <td style="font-weight:500; color:#1f3b57" data-bind="text: Year"></td> 1511 <td style="font-weight:600" data-bind="text: Active"></td> 1512 <td style="font-weight:600" data-bind="text: Residual"></td> 1513 <td style="font-weight:600" data-bind="text: Cleared"></td> 1514 </tr> 1515 </tbody> 1516 </table> 1517 1518 <table class="table color-bordered-table info-bordered-table table-striped box-shadow border-color roun
1518ded-corners"> 1519 <thead> 1520 <tr> 1521 <th class="tbl-title" colspan="4"> 1522 <div style="display:flex; align-items:center; justify-content:space-between; gap:12px"> 1523 <span style="font-size:17px">Foci (PF)</span> 1524 </div> 1525 </th> 1526 </tr> 1527 <tr> 1528 <th>Year</th> 1529 <th class="bg-primary">Active Focus</th> 1530 <th class="bg-info">Residual Focus</th> 1531 <th class="bg-purple">Cleared-up Focus</th> 1532 </tr> 1533 </thead> 1534 <tbody data-bind="foreach: fociPf"> 1535 <tr style="text-align:center"> 1536 <td data-bind="text: Year"></td> 1537 <td data-bind="text: Active"></td> 1538 <td data-bind="text: Residual"></td> 1539 <td data-bind="text: Cleared"></td> 1540 </tr> 1541 </tbody> 1542 </table> 1543 1544 <p>**Prior to May 2024, eligibility was limited to PF species with L1 classification. Starting from May 2024, the eligible species have been expanded to include all species with DI and LA classifications.</p> 1545 </div> 1546 <div class="col-sm-4"> 1547 <div class="chart-container2"> 1548 <div id="radicalCure" class="chartbox"></div> 1549 </div> 1550 1551 <!--<div class="chart-container2"> 1552 <div id="foci" class="chartbox"></div> 1553 </div>--> 1554 1555 <table class="hidden table color-bordered-table info-bordered-table table-striped box-shadow border-color rounded-corners"> 1556 <thead> 1557 <tr> 1558 <th class="tbl-title" colspan="2">Last mile (2022 - 2023)</th> 1559 </tr> 1560 </thead> 1561 <tbody data-bind="foreach: lastmileList"> 1562 <tr> 1563 <td data-bind="text: Criteria"></td> 1564 <td data-bind="text: $root.lastmileFormat(Criteria, Value)"></td> 1565 </tr> 1566 </tbody> 1567 </table> 1568 1569 <div class=" hidden chart-container2"> 1570 <div id="lastmileChart" class="chartbox"></div> 1571 <div class="btn"> 1572 <label class="checkbox-inline checkbox-sm"> 1573 <input class="lastmCbox" id="tda-eli" type="checkbox" checked /> 1574 <span>TDA Eligible</span> 1575 </label> 1576 <label class="checkbox-inline checkbox-sm"> 1577 <input class="lastmCbox" id="tda" type="checkbox" checked /> 1578 <span>TDA</span> 1579 </label> 1580 <label class="checkbox-inline checkbox-sm"> 1581 <input class="lastmCbox" id="ipt-eli" type="checkbox" checked /> 1582 <span>IPT Eligible</span> 1583 </label> 1584 <label class="checkbox-inline checkbox-sm"> 1585 <input class="lastmCbox" id="ipt" type="checkbox" checked /> 1586 <span>IPT</span> 1587 </label> 1588 </div> 1589 </div> 1590 1591 </div> 1592 </div> 1593 1594 <div class="row hidden" style="margin:0 auto; width: 35%; margin-top: 15px"> 1595 <table class="table color-bordered-table info-bordered-table table-striped box-shadow"> 1596 <thead> 1597 <tr style="height:26px"> 1598 <th colspan="10"> 1599 <span>None Endemic OD Surveillance data for the period </span> 1600 <span data-bind="text: lastSearch().from + ' - ' + lastSearch().to"></span> 1601 </th> 1602 </tr> 1603 <tr> 1604 <th style="border-right: 2px solid #e9ecef" rowspan="2">Indicators</th> 1605 <th colspan="3">HF</th> 1606 </tr> 1607 <tr data-bind="foreach: Array(1)"> 1608 <th class="bg-info" data-bind="text: $root.lastSearch().year - 1" style="border:none"></th> 1609 <th class="bg-primary" data-bind="text: $root.lastSearch().year" style="border:none"></th> 1610 <th class="bg-purple" style="border-top:none; border-left:none">Change</th> 1611 </tr> 1612 </thead> 1613 <tbody data-bind="foreach: caseNList"> 1614 <tr data-bind="foreach: Object.keys($data)"> 1615 <!-- ko if: $data == 'Indicators' --> 1616 <td data-bind="html: $parent[$data]"></td> 1617 <!-- /ko --> 1618 <!-- ko if: $data != 'Indicators' --> 1619 <td align="right" data-bind="style: { borderRight: $parents[1].removeCellBorder($data) }">
1620 <span data-bind="text: $root.fixValue($parent[$data], $data, $parent.Indicators), css: $root.highlight($parent[$data], $data, $parent.Indicators)"></span> 1621 </td> 1622 <!-- /ko --> 1623 </tr> 1624 </tbody> 1625 </table> 1626 </div> <!--/None Endemic OD--> 1627 1628 <section> 1629 <br> 1630 <div class="card" style="background-color: #3498db;"> 1631 <div class="card-body collapse show"> 1632 <h4 class="card-title" style="margin: 0; text-align: center"> 1633 TRENDS IN SURVEILLANCE 1634 </h4> 1635 </div> 1636 </div> 1637 1638 <br /> 1639 1640 <div> 1641 <h3>Surveillance chart</h3> 1642 1643 <div class="row"> 1644 <div class="col-md-6 padding-r"> 1645 <div class="chart-container"> 1646 <div id="chartTop30Vill" class="chartbox"></div> 1647 <div class="btn"> 1648 <label class="checkbox-inline checkbox-sm"> 1649 <input id="chartTop30VillPf" type="checkbox" data-bind="click: drawChartTop30Vill" checked /> 1650 <span>PF</span> 1651 </label> 1652 <label class="checkbox-inline checkbox-sm"> 1653 <input id="chartTop30VillPv" type="checkbox" data-bind="click: drawChartTop30Vill" checked /> 1654 <span>PV</span> 1655 </label> 1656 <label class="checkbox-inline checkbox-sm"> 1657 <input id="chartTop30VillMix" type="checkbox" data-bind="click: drawChartTop30Vill" checked /> 1658 <span>Mix</span> 1659 </label> 1660 </div> 1661 </div> 1662 </div> 1663 <div class="col-md-6 padding-l"> 1664 <div class="chart-container"> 1665 <div id="chartTop30HFbySpecies" class="chartbox"></div> 1666 <div class="btn"> 1667 <label class="checkbox-inline checkbox-sm"> 1668 <input id="chartTop30HFbySpeciesPf" type="checkbox" data-bind="click: drawChartTop30HFbySpecies" checked /> 1669 <span>PF</span> 1670 </label> 1671 <label class="checkbox-inline checkbox-sm"> 1672 <input id="chartTop30HFbySpeciesPv" type="checkbox" data-bind="click: drawChartTop30HFbySpecies" checked /> 1673 <span>PV</span> 1674 </label> 1675 <label class="checkbox-inline checkbox-sm"> 1676 <input id="chartTop30HFbySpeciesMix" type="checkbox" data-bind="click: drawChartTop30HFbySpecies" checked /> 1677 <span>Mix</span> 1678 </label> 1679 </div> 1680 </div><!--/chartTop30HFbySpecies--> 1681 </div> 1682 </div> 1683 1684 <h3> Trend of Malaria</h3> 1685 1686 <div class="row"> 1687 <div class="col-md-6 padding-r"> 1688 <div class="chart-container"> 1689 <div id="treated" class="chartbox"></div> 1690 <div class="btn"> 1691 <label class="checkbox-inline checkbox-sm"> 1692 <input class="lgCbox" id="HF" type="checkbox" checked /> 1693 <span>HF</span> 1694 </label> 1695 <label class="checkbox-inline checkbox-sm"> 1696 <input class="lgCbox" id="VMW" type="checkbox" checked /> 1697 <span>VMW</span> 1698 </label> 1699 <label class="checkbox-inline checkbox-sm"> 1700 <input class="lgCbox" id="All" t
1700ype="checkbox" checked /> 1701 <span>All</span> 1702 </label> 1703 </div> 1704 </div> 1705 </div> 1706 1707 <div class="col-md-6 padding-l"> 1708 <div class="chart-container"> 1709 <div id="severe" class="chartbox"></div> 1710 <div class="btn"> 1711 <label class="checkbox-inline checkbox-sm"> 1712 <input class="servereCbox" id="Severe" type="checkbox" checked /> 1713 <span>Severe</span> 1714 </label> 1715 <label class="checkbox-inline checkbox-sm"> 1716 <input class="servereCbox" id="Deaths" type="checkbox" checked /> 1717 <span>Deaths</span> 1718 </label> 1719 </div> 1720 </div> 1721 </div> 1722 </div><!--/row--> 1723 1724 <br /> 1725 1726 <div class="chart-container"> 1727 <div id="test" class="chartbox "></div> 1728 <div class="btn"> 1729 <label class="checkbox-inline checkbox-sm"> 1730 <input class="testCbox" id="PV" type="checkbox" checked /> 1731 <span>PV</span> 1732 </label> 1733 <label class="checkbox-inline checkbox-sm"> 1734 <input class="testCbox" id="PF + Mix" type="checkbox" checked /> 1735 <span>PF + Mix</span> 1736 </label> 1737 <label class="checkbox-inline checkbox-sm"> 1738 <input class="testCbox" id="TPR" type="checkbox" checked /> 1739 <span>TPR</span> 1740 </label> 1741 </div> 1742 </div> 1743 <br /> 1744 <div class="row"> 1745 <div class="col-md-6 padding-r"> 1746 <div class="chart-container"> 1747 <div id="chartCaseDeath" class="chartbox"></div> 1748 <div class="btn"> 1749 <label class="checkbox-inline checkbox-sm"> 1750 <input class="cdCbox" id="Cases" type="checkbox" checked /> 1751 <span>Cases</span> 1752 </label> 1753 <label class="checkbox-inline checkbox-sm"> 1754 <input class="cdCbox" id="Deaths" type="checkbox" checked /> 1755 <span>Deaths</span> 1756 </label> 1757 </div> 1758 </div> 1759 </div> 1760 <div class="col-md-6 padding-l"> 1761 <div class="chart-container"> 1762 <div id="chartSpecie" class="chartbox"></div> 1763 <div class="btn"> 1764 <label class="checkbox-inline checkbox-sm"> 1765 <input class="specieCbox" id="Pf" type="checkbox" checked /> 1766 <span>Pf</span> 1767 </label> 1768 <label class="checkbox-inline checkbox-sm"> 1769 <input class="specieCbox" id="Pv" type="checkbox" checked /> 1770 <span>Pv</span> 1771 </label> 1772 <label class="checkbox-inline checkbox-sm"> 1773 <input class="specieCbox" id="Mix" type="checkbox" checked /> 1774 <span>Mix</span> 1775 </label> 1776 </div> 1777 </div> 1778 </div> 1779 </div> 1780 1781 <br /> 1782 1783 <div class="chart-container"> 1784 <div id="chartSexAge" class="chartbox stack"></div> 1785 <div class="btn"> 1786 <label class="checkbox-inline checkbox-sm"> 1787 <input class="sexCbox" id="Male" type="checkbox" checked />
1788 <span>Male</span> 1789 </label> 1790 <label class="checkbox-inline checkbox-sm"> 1791 <input class="sexCbox" id="Female" type="checkbox" checked /> 1792 <span>Female</span> 1793 </label> 1794 </div> 1795 </div> 1796 1797 <br /> 1798 1799 <div class="chart-container"> 1800 <div id="chartSpecieProvince" class="chartbox stack"></div> 1801 <div class="btn"> 1802 <label class="checkbox-inline checkbox-sm"> 1803 <input class="spCbox" id="Pv" type="checkbox" checked /> 1804 <span>Pv</span> 1805 </label> 1806 <label class="checkbox-inline checkbox-sm"> 1807 <input class="spCbox" id="Pf+Mix" type="checkbox" checked /> 1808 <span>Pf+Mix</span> 1809 </label> 1810 </div> 1811 </div> 1812 1813 <br /> 1814 1815 <div class="chart-container"> 1816 <div id="chartIncidentMortality" class="chartbox"></div> 1817 <div class="btn"> 1818 <label class="checkbox-inline checkbox-sm"> 1819 <input class="imCbox" id="inc-0" type="checkbox" checked /> 1820 <span id="im-lg-0"></span> 1821 </label> 1822 <label class="checkbox-inline checkbox-sm"> 1823 <input class="imCbox" id="inc-1" type="checkbox" checked /> 1824 <span id="im-lg-1"></span> 1825 </label> 1826 <label class="checkbox-inline checkbox-sm"> 1827 <input class="imCbox" id="mr" type="checkbox" checked /> 1828 <span id="im-lg-2"></span> 1829 </label> 1830 </div> 1831 </div> 1832 </div> 1833 </section> 1834</div> 1835 1836<!-- Modal --> 1837<div class="modal fade" id="modalCase" tabindex="-1" role="dialog" aria-labelledby="modalDailyCaseTitle" aria-hidden="true"> 1838 <div class="modal-dialog modal-lg" role="document"> 1839 <div class="modal-content" style="width:950px"> 1840 <div class="modal-header"> 1841 <h5 class="modal-title" id="modalDailyCaseTitle" data-bind="text: $root.title"></h5> 1842 <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 1843 <span aria-hidden="true">×</span> 1844 </button> 1845 </div> 1846 <div class="modal-body"> 1847 <div class="container-fluid"> 1848 <div class="row"> 1849 <div class="col-sm-12" style="overflow: auto;"> 1850 1851 <table class="table table-bordered table-striped table-hover"> 1852 <thead> 1853 <tr style="background:cornflowerblue"> 1854 <th>#</th> 1855 <th>Province</th> 1856 <th>OD</th> 1857 <th>HF</th> 1858 <th>Village</th> 1859 <th>Diagnosis</th> 1860 <th>Classify</th> 1861 <th>Sex</th> 1862 <th>Age</th> 1863 <th>Date Case</th> 1864 </tr> 1865 </thead> 1866 <tbody data-bind="foreach: cases"> 1867 <tr> 1868 <td data-bind="text: $index() +1" align="center"></td> 1869 <td data-bind="text: Name_Prov_E"></td> 1870 <td data-bind="text: Name_OD_E"></td> 1871 <td data-bind="text: Name_Facility_E"></td> 1872 <td data-bind="text: Village"></td> 1873 <td data-bind="text: $root.getSpecie(Diagnosis)"></td> 1874 <td data-bind="text: Classify"></td> 1875 <td data-bind="text: Sex"></td> 1876 <td data-bind="text: Age"></td> 1877 <td data-bind="text: $root.dateFormat(DateCase)"></td> 1878 </tr> 1879 </tbody> 1880 <tfoot data-bind="visible: app.tableFooter($element)"> 1881 <tr> 1882 <td class="text-center text-warning h4" style="padding:10px">No Data</td> 1883 </tr> 1884 </tfoot> 1885 </table> 1886 </div> 1887 </div> 1888 </div> 1889 </div> 1890 <div class="modal-footer"> 1891 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 1892 </div> 1893 </div> 1894 </div> 1895</div> <style> 1896 .surveillance-table-wrapper { 1897 overflow-x: auto; 1898 width: 100%; 1899 } 1900</style> 1901<div id="exportSurveillance" data-bind="visible: tab() == 'Surveillance' && app.user.permiss['Dashboard'].contain('Surveillance')" style="display: none"> 1902 <h3 data-bind="text: String.format('Surveillance Data, {0} {1} - {2} {3}', lastSearch().from, lastSearch().fromYear, lastSearch().to, lastSearch().toYear)"></h3> 1903 <div class="surveillance-table-wrapper"> 1904 <table id="table-sur" class="table color-bordered-table info-bordered-table table-striped box-shadow" style="width:100%"> 1905 <thead data-bind="if: surveillanceColumnGroups().length" > 1906 <tr> 1907 <th class="border-right" rowspan="4">Province / OD</th> 1908 <!-- ko foreach: surveillanceColumnGroups --> 1909 <th class="border-right" data-bind="text: label, attr: { colspan: span }"></th> 1910 <!-- /ko --> 1911 </tr> 1912 <tr> 1913 <!-- ko foreach: surveillanceColumnGroups --> 1914 <!-- ko foreach: metrics --> 1915 <th class="border-right" data-bind="text: label, attr: { colspan: columns.length }"></th> 1916 <!-- /ko --> 1917 <!-- /ko --> 1918 </tr> 1919 <tr> 1920 <!-- ko foreach: surveillanceColumnGroups --> 1921 <!-- ko foreach: metrics --> 1922 <!-- ko foreach: columns --> 1923 <th data-bind="text: header, css: isChange ? 'bg-purple' : 'bg-info'"></th> 1924 <!-- /ko --> 1925 <!-- /ko --> 1926 <!-- /ko --> 1927 </tr> 1928 <tr style="line-height:8px"> 1929 <!-- ko foreach: surveillanceColumnGroups --> 1930 <!-- ko foreach: metrics --> 1931 <!-- ko foreach: columns --> 1932 <th data-bind="text: unitLabel || 'n', css: isChange ? 'bg-purple' : 'bg-primary'"></th> 1933 <!-- /ko --> 1934 <!-- /ko --> 1935 <!-- /ko --> 1936 </tr> 1937 </thead> 1938 <tbody data-bind="foreach: surveillanceList, fixedHeader: true"> 1939 <!-- ko if: Level != '1' && $index() > 0 --> 1940 <tr> 1941 <td> </td> 1942 <!-- ko foreach: $root.surveillanceColumns --> 1943 <td> </td> 1944 <!-- /ko --> 1945 </tr> 1946 <!-- /ko --> 1947 <tr> 1948 <td data-bind="text: (Level == '1' ? '' : ' ') + Name, style: { fontWeight: Level != 1 ? 'bold' : '' }"></td> 1949 <!-- ko foreach: $root.surveillanceColumns --> 1950 <td align="right" data-bind="style: { fontWeight: $parent.Level != 1 ? 'bold' : '' }"> 1951 <span data-bind="text: $parents[1].fixValue($parent[$data.key], $data.key), css: $parents[1].highlight($parent[$data.key], $data.key)"></span> 1952 </td> 1953 <!-- /ko --> 1954 </tr> 1955 </tbody> 1956 <tfoot style="background-color:antiquewhite" data-bind="with: surveillanceFooter"> 1957 <tr style="border-top: 2px solid #ddd"> 1958 <td class="text-bold" style="padding-top:5px; padding-bottom:5px; border-right: 1px solid #ccc" data-bind="text: Name"></td> 1959 <!-- ko foreach: $parent.surveillanceColumns -->
1960 <td style="border-right:1px solid #ccc" align="right" class="text-bold"> 1961 <span data-bind="text: $parents[1].fixValue($parent[$data.key], $data.key), css: $parents[1].highlight($parent[$data.key], $data.key)"></span> 1962 </td> 1963 <!-- /ko --> 1964 </tr> 1965 </tfoot> 1966 </table> 1967 </div> 1968</div> <style> 1969 #tabMap path.highcharts-point { opacity: 1 !important; } 1970</style> 1971 1972<div id="tabMap" data-bind="visible: tab() == 'Border' && app.user.permiss['Dashboard'].contain('Border')" style="display: none"> 1973 <div class="chart-container card" style="width:fit-content; margin-left:auto; margin-right:auto"> 1974 <div id="mapCLV" class="chartbox" style="min-width:1300px; height:900px"></div> 1975 </div> 1976 1977 1978 <div id="mapCLVYearly"></div> 1979 1980 <div class="chart-container card"> 1981 <div id="chartborder" class="chartbox"></div> 1982 <div class="btn" style="opacity:1"> 1983 <label class="checkbox-inline checkbox-sm"> 1984 <input class="borderCbox" id="Lao" type="checkbox" checked /> 1985 <span>Lao</span> 1986 </label> 1987 <label class="checkbox-inline checkbox-sm"> 1988 <input class="borderCbox" id="Thailand" type="checkbox" checked /> 1989 <span>Thailand</span> 1990 </label> 1991 <label class="checkbox-inline checkbox-sm"> 1992 <input class="borderCbox" id="Vietnam" type="checkbox" checked /> 1993 <span>Vietnam</span> 1994 </label> 1995 <label class="checkbox-inline checkbox-sm"> 1996 <input class="borderCboxFilter" col="Type" val="HC" type="checkbox" checked data-bind="click: drawBorderChart" /> 1997 <span>HC</span> 1998 </label> 1999 <label class="checkbox-inline checkbox-sm"> 2000 <input class="borderCboxFilter" col="Type" val="VMW" type="checkbox" checked data-bind="click: drawBorderChart" /> 2001 <span>VMW</span> 2002 </label> 2003 <label class="checkbox-inline checkbox-sm"> 2004 <input class="borderCboxFilter" col="Diagnosis" val="F" type="checkbox" checked data-bind="click: drawBorderChart" /> 2005 <span>PF</span> 2006 </label> 2007 <label class="checkbox-inline checkbox-sm"> 2008 <input class="borderCboxFilter" col="Diagnosis" val="V" type="checkbox" checked data-bind="click: drawBorderChart" /> 2009 <span>PV</span> 2010 </label> 2011 <label class="checkbox-inline checkbox-sm"> 2012 <input class="borderCboxFilter" col="Diagnosis" val="M" type="checkbox" checked data-bind="click: drawBorderChart" /> 2013 <span>Mix</span> 2014 </label> 2015 </div> 2016 </div> 2017 2018 <!-- <div class="chart-container card" style="width:fit-content; margin-left:auto; margin-right:auto"> 2019 <div id="mapCommuneBorder" class="chartbox" style="min-width:1300px; height:600px"></div> 2020 </div> 2021 2022 <div class="chart-container card" style="width:fit-content; margin-left:auto; margin-right:auto"> 2023 <div id="mapCommuneBorderPfMix" class="chartbox" style="min-width:1300px; height:600px"></div> 2024 </div> 2025 2026 <div class="chart-container card" style="width:fit-content; margin-left:auto; margin-right:auto"> 2027 <div id="mapCommuneBorderPv" class="chartbox" style="min-width:1300px; height:600px"></div> 2028 </div> --> 2029 2030</div> <style> 2031 .stock-seciton { padding:5px; cursor:pointer; font-weight:bold; } 2032 .myh3 { line-height:1; text-transform:none; margin:0; } 2033 2034 .Over { background-color:yellow; color:black; } 2035 .Good { background-color:#00B050; color:black; } 2036 .Low { background-color:orange; color:black; } 2037 .Out { background-color:red; } 2038 2039 #modalStockStatus .fixed-header, 2040 #modalStockCompleteness .fixed-header { top: 53px; margin-left: 0.5px; } 2041</style> 2042 2043<div id="tabStock" data-bind="visible: tab() == 'Stock'" style="display: none"> 2044 <div class="relative form-inline" style="padding-bottom:10px"> 2045 <button class="btn width100" data-bind="css: $element.innerHTML == stockMenu() ? 'btn-success' : 'btn-default', click: () => stockMenu($element.innerHTML)">Charts</button> 2046 <button class="btn width100" data-bind="css: $element.innerHTML == stockMenu() ? 'btn-success' : 'btn-default', click: () => stockMenu($element.innerHTML)" style="margin-left:5px">Monitor</button> 2047 <button class="btn width100" data-bind="css: $element.innerHTML == stockMenu() ? 'btn-success' : 'btn-default', click: () => stockMenu($element.innerHTML)" style="margin-left:5px">Table</button> 2048 2049 <!-- ko if: stockMenu().in('Charts','Monitor') --> 2050 <label class="form-group has-float-label" style="margin-left:5px"> 2051 <select class="form-control custom-select" data-bind="value: stockItemCode"> 2052 <option value="ND0010">ND0010 Albendazol</option> 2053 <option value="ND0067">
2053ND0067 Artesunate + Mefloquine</option> 2054 <option value="ND0068">ND0068 Artesunate + Pyronaridine</option> 2055 <option value="AA0280">AA0280 Mebendazol</option> 2056 <option value="ND0132">ND0132 Primaquine 7.5mg</option> 2057 <option value="ND0075">ND0075 Pyramax 60/20mg</option> 2058 <option value="ND0150">ND0150 Quinine sulfate</option> 2059 <option value="ND0082">ND0082 RDT</option> 2060 <option value="ND0098">ND0098 RDT Pan Ag</option> 2061 </select> 2062 <span>Commodity</span> 2063 </label> 2064 <!-- /ko --> 2065 2066 <!-- ko if: stockMenu() == 'Monitor' --> 2067 <label class="form-group has-float-label" style="margin-left:5px"> 2068 <select class="form-control custom-select" data-bind="value: stockLevel"> 2069 <option value="OD">OD Stock</option> 2070 <option value="HC">HC Stock</option> 2071 </select> 2072 <span>Stock Level</span> 2073 </label> 2074 <!-- /ko --> 2075 2076 <!-- ko if: stockMenu().in('Monitor','Table') --> 2077 <label class="form-group has-float-label" style="margin-left:5px"> 2078 <select class="form-control custom-select" data-bind="value: stockYear, options: yearList"></select> 2079 <span>Year</span> 2080 </label> 2081 <label class="form-group has-float-label" style="margin-left:5px"> 2082 <select class="form-control custom-select" data-bind="value: stockMonth, options: monthList"></select> 2083 <span>Month</span> 2084 </label> 2085 <button class="btn btn-info waves-effect waves-light" data-bind="click: viewMonitor" style="width:70px; margin-left:5px">View</button> 2086 <!-- /ko --> 2087 </div> 2088 2089 <div data-bind="visible: stockMenu() == 'Charts'"> 2090 <div class="row"> 2091 <div class="col-md-6"> 2092 <div id="stockStatusOD" class="chart-container" style="height:400px"></div> 2093 </div> 2094 <div class="col-md-6"> 2095 <div id="stockStatusHC" class="chart-container" style="height:400px"></div> 2096 </div> 2097 </div> 2098 2099 <div class="row"> 2100 <div class="col-md-6"> 2101 <div id="stockCompleteness" class="chart-container" style="height:400px"></div> 2102 </div> 2103 <div class="col-md-6"> 2104 <div id="stockOut" class="chart-container" style="height:400px"></div> 2105 </div> 2106 </div> 2107 2108 <div id="stockMalaria" class="chart-container" style="height:400px"></div> 2109 2110 <div class="row"> 2111 <div class="col-md-6"> 2112 <div id="mapStock" class="chart-container" style="height:800px"></div> 2113 </div> 2114 </div> 2115 </div> 2116 2117 <div data-bind="visible: stockMenu() == 'Monitor'"> 2118 <div class="stock-seciton" style="background:#548235; color:white" data-bind="click: () => $($element).next().toggle()">Summary âº</div> 2119 <table class="table table-bordered" style="display:none"> 2120 <thead style="background-color:skyblue"> 2121 <tr> 2122 <th rowspan="2">PHD</th> 2123 <th rowspan="2" data-bind="visible: stockLevel() == 'HC'">OD</th> 2124 <th colspan="4" data-bind="text: stockLevel() == 'OD' ? '# of ODs' : '# of Health Facilities'"></th> 2125 </tr> 2126 <tr> 2127 <th>Overstock</th> 2128 <th>Sufficient Stock</th> 2129 <th>Low Stock</th> 2130 <th>Stock Out</th> 2131 </tr> 2132 </thead> 2133 <tbody data-bind="foreach: tblStockSummary, fixedHeader: true"> 2134 <tr> 2135 <td data-bind="text: Name_Prov_E"></td> 2136 <td data-bind="text: Name_OD_E, visible: $root.stockLevel() == 'HC'"></td> 2137 <td data-bind="text: StockOver" align="center"></td> 2138 <td data-bind="text: StockGood" align="center"></td> 2139 <td data-bind="text: StockLow" align="center"></td> 2140 <td data-bind="text: StockOut" align="center"></td> 2141 </tr> 2142 </tbody> 2143 <tfoot data-bind="visible: app.tableFooter($element)"> 2144 <tr> 2145 <td class="text-center text-warning h4" style="padding:10px">No Data</td> 2146 </tr> 2147 </tfoot> 2148 </table> 2149 2150 <div class="stock-seciton" style="background:yellow" data-bind="click: () => $($element).next().toggle()"> 2151 <span data-bind="text: 'Overstock (' + tblStockOver()?.length + ') âº'"></span> 2152 </div> 2153 <div data-bind="template: { name: 'tblStockTemplate', data: tblStockOver }" style="display:none"></div> 2154 2155 <div class="stock-seciton" style="background:#00B050" data-bind="click: () => $($element).next().toggle()"> 2156 <span data-bind="text: 'Sufficient Stock (' + tblStockGood()?.length + ') âº'"></span> 2157 </div> 2158 <div data-bind="template: { name: 'tblStockTemplate', data: tblStockGood }" style="display:none"></div> 2159 2160 <div class="stock-seciton" style="background:orange" data-bind="click: () => $($element).next().toggle()"> 2161 <span data-bind="text: 'Low Stock (' + tblStockLow()?.length + ') âº'"></span> 2162 </div> 2163 <div data-bind="template: { name: 'tblStockTemplate', data: tblStockLow }" style="display:none"></div> 2164 2165 <div class="stock-seciton" style="background:red; color:white" data-bind="click: () => $($element).next().toggle()"> 2166 <span data-bind="text: 'Stock Out (' + tblStockOut()?.length + ') âº'"></span> 2167 </div> 2168 <div data-bind="template: { name: 'tblStockTemplate', data: tblStockOut }" style="display:none"></div> 2169 </div> 2170 2171 <div data-bind="visible: stockMenu() == 'Table'"> 2172 <div class="clearfix"> 2173 <div class="pull-left"> 2174 <h3 class="myh3" style="margin-top:10px">30 HFs HAVING MOST CASES vs MALARIA COMMODITY</h3> 2175 </div> 2176 <div class="pull-right">
2177 <span class="label Out">Stock Out</span> 2178 <span class="label Low">Low Stock</span> 2179 <span class="label Good">Sufficient Stock</span> 2180 <span class="label Over">Overstock</span> 2181 </div> 2182 </div> 2183 <table class="table table-bordered"> 2184 <thead style="background-color:skyblue"> 2185 <tr> 2186 <th rowspan="2">PHD</th> 2187 <th rowspan="2">OD</th> 2188 <th rowspan="2">HF</th> 2189 <th rowspan="2">Test</th> 2190 <th colspan="4">Positive Case</th> 2191 <th colspan="4">Current Stock Balance</th> 2192 </tr> 2193 <tr> 2194 <th>Pf</th> 2195 <th>Pv</th> 2196 <th>Mix</th> 2197 <th>Total</th> 2198 <th>ASMQ</th> 2199 <th>RDT</th> 2200 <th>PQ7.5</th> 2201 <th>Pyramax 60/20mg</th> 2202 </tr> 2203 </thead> 2204 <tbody data-bind="foreach: tblStockTop30, fixedHeader: true"> 2205 <tr> 2206 <td data-bind="text: Name_Prov_E"></td> 2207 <td data-bind="text: Name_OD_E"></td> 2208 <td data-bind="text: Name_Facility_E"></td> 2209 <td align="center" data-bind="text: Test"></td> 2210 <td align="center" data-bind="text: Pf"></td> 2211 <td align="center" data-bind="text: Pv"></td> 2212 <td align="center" data-bind="text: Mix"></td> 2213 <td align="center" data-bind="text: Total"></td> 2214 <td align="center"> 2215 <span data-bind="text: ASMQ, css: ASMQStatus" class="label"></span> 2216 </td> 2217 <td align="center"> 2218 <span data-bind="text: RDT, css: RDTStatus" class="label"></span> 2219 </td> 2220 <td align="center"> 2221 <span data-bind="text: PQ, css: PQStatus" class="label"></span> 2222 </td> 2223 <td align="center"> 2224 <span data-bind="text: Pyramax, css: PyramaxStatus" class="label"></span> 2225 </td> 2226 </tr> 2227 </tbody> 2228 <tfoot data-bind="visible: app.tableFooter($element)"> 2229 <tr> 2230 <td class="text-center text-warning h4" style="padding:10px">No Data</td> 2231 </tr> 2232 </tfoot> 2233 </table> 2234 2235 <h3 class="myh3" style="margin-top:30px">Current Stock at Foci Response HFs</h3> 2236 <table class="table table-bordered"> 2237 <thead style="background-color:skyblue"> 2238 <tr> 2239 <th rowspan="2">PHD</th> 2240 <th rowspan="2">OD</th> 2241 <th rowspan="2">HF</th> 2242 <th rowspan="2"># Village</th> 2243 <th rowspan="2"># Foci Village</th> 2244 <th rowspan="2">Total<br>Pop.</th> 2245 <th rowspan="2">Target<br>TDA</th> 2246 <th rowspan="2">Target<br>iPTf</th> 2247 <th colspan="2">Received TDA</th> 2248 <th rowspan="2">Received<br>iPTf</th> 2249 <th rowspan="2">Test</th> 2250 <th colspan="4">Positive Case</th> 2251 <th colspan="4">Current Stock Balance</th> 2252 </tr> 2253 <tr> 2254 <th>TDA 1</th> 2255 <th>TDA 2</th> 2256 <th>Pf</th> 2257 <th>Pv</th> 2258 <th>Mix</th> 2259 <th>Total</th> 2260 <th>ASMQ</th> 2261 <th>RDT</th> 2262 <th>PQ7.5</th> 2263 <th>Pyramax 60/20mg</th> 2264 </tr> 2265 </thead> 2266 <tbody data-bind="foreach: tblStockFoci, fixedHeader: true"> 2267 <tr> 2268 <td data-bind="text: Name_Prov_E"></td> 2269 <td data-bind="text: Name_OD_E"></td> 2270 <td data-bind="text: Name_Facility_E"></td> 2271 <td align="center" data-bind="text: VillCount"></td> 2272 <td align="center" data-bind="text: FociVill"></td> 2273 <td align="center" data-bind="text: Pop"></td> 2274 <td align="center" data-bind="text: TargetTDA"></td> 2275 <td align="center" data-bind="text: TargetIPT"></td> 2276 <td align="center" data-bind="text: TDA1"></td> 2277 <td align="center" data-bind="text: TDA2"></td> 2278 <td align="center" data-bind="text: IPT"></td> 2279 <td align="center" data-bind="text: Test"></td> 2280 <td align="center" data-bind="text: Pf"></td> 2281 <td align="center" data-bind="text: Pv"></td> 2282 <td align="center" data-bind="text: Mix"></td> 2283 <td align="center" data-bind="text: Total"></td> 2284 <td align="center"> 2285 <span data-bind="text: ASMQ, css: ASMQStatus" class="label"></span> 2286 </td> 2287 <td align="center"> 2288 <span data-bind="text: RDT, css: RDTStatus" class="label"></span> 2289 </td> 2290 <td align="center"> 2291 <span data-bind="text: PQ, css: PQStatus" class="label"></span> 2292 </td> 2293 <td align="center"> 2294 <span data-bind="text: Pyramax, css: PyramaxStatus" class="label"></span> 2295 </td> 2296 </tr> 2297 </tbody> 2298 <tfoot data-bind="visible: app.tableFooter($element)"> 2299 <tr> 2300 <td class="text-center text-warning h4" style="padding:10px">No Data</td> 2301 </tr> 2302 </tfoot> 2303 </table> 2304 2305 <h3 class="myh3" style="margin-top:30px">Current Stock at Pv Radical Cure HFs</h3>
2306 <table class="table table-bordered"> 2307 <thead style="background-color:skyblue"> 2308 <tr> 2309 <th rowspan="2">PHD</th> 2310 <th rowspan="2">OD</th> 2311 <th rowspan="2">HF</th> 2312 <th colspan="3">Positive Case</th> 2313 <th colspan="4">Received G6PD Testing</th> 2314 <th rowspan="2">Test</th> 2315 <th colspan="6">Current Stock Balance</th> 2316 </tr> 2317 <tr> 2318 <th>Pv</th> 2319 <th>Mix</th> 2320 <th>Total</th> 2321 <th># of Normal</th> 2322 <th># of Intermediate</th> 2323 <th># of Deficient</th> 2324 <th># of Invalid</th> 2325 <th>ASMQ</th> 2326 <th>RDT</th> 2327 <th>PQ7.5</th> 2328 <th>G6PD Test Strip</th> 2329 <th>G6PD Control</th> 2330 <th>Pyramax 60/20mg</th> 2331 </tr> 2332 </thead> 2333 <tbody data-bind="foreach: tblStockPvRadical, fixedHeader: true"> 2334 <tr> 2335 <td data-bind="text: Name_Prov_E"></td> 2336 <td data-bind="text: Name_OD_E"></td> 2337 <td data-bind="text: Name_Facility_E"></td> 2338 <td align="center" data-bind="text: Pv"></td> 2339 <td align="center" data-bind="text: Mix"></td> 2340 <td align="center" data-bind="text: Pv + Mix"></td> 2341 <td align="center" data-bind="text: Normal"></td> 2342 <td align="center" data-bind="text: Inter"></td> 2343 <td align="center" data-bind="text: Deficient"></td> 2344 <td align="center" data-bind="text: Invalid"></td> 2345 <td align="center" data-bind="text: Test"></td> 2346 <td align="center"> 2347 <span data-bind="text: ASMQ, css: ASMQStatus" class="label"></span> 2348 </td> 2349 <td align="center"> 2350 <span data-bind="text: RDT, css: RDTStatus" class="label"></span> 2351 </td> 2352 <td align="center"> 2353 <span data-bind="text: PQ, css: PQStatus" class="label"></span> 2354 </td> 2355 <td align="center"> 2356 <span data-bind="text: G6PDTest, css: G6PDTestStatus" class="label"></span> 2357 </td> 2358 <td align="center"> 2359 <span data-bind="text: G6PDControl, css: G6PDControlStatus" class="label"></span> 2360 </td> 2361 <td align="center"> 2362 <span data-bind="text: Pyramax, css: PyramaxStatus" class="label"></span> 2363 </td> 2364 </tr> 2365 </tbody> 2366 <tfoot data-bind="visible: app.tableFooter($element)"> 2367 <tr> 2368 <td class="text-center text-warning h4" style="padding:10px">No Data</td> 2369 </tr> 2370 </tfoot> 2371 </table> 2372 </div> 2373</div> 2374 2375<div id="waitingTemplate" class="hidden"> 2376 <div class='loader black' style="top:49%; left:49%; z-index:1; height:100px"> 2377 <div class='circle'></div> 2378 <div class='circle'></div> 2379 <div class='circle'></div> 2380 <div class='circle'></div> 2381 <div class='circle'></div> 2382 </div> 2383</div> 2384 2385<div class="modal" id="modalStockStatus" tabindex="-1" role="dialog"> 2386 <div class="modal-dialog" role="document" style="height:calc(100% - 60px); max-width:1200px"> 2387 <div class="modal-content" style="height:100%"> 2388 <div class="modal-header" style="justify-content:flex-end"> 2389 <label class="label Out mr-1 mb-0 fs-16"> 2390 <input type="checkbox" value="Out" data-bind="checked: tickFilter" /> 2391 <span>Stock Out</span> 2392 </label> 2393 <label class="label Low mr-1 mb-0 fs-16"> 2394 <input type="checkbox" value="Low" data-bind="checked: tickFilter" /> 2395 <span>Low Stock</span> 2396 </label> 2397 <label class="label Good mr-1 mb-0 fs-16"> 2398 <input type="checkbox" value="Good" data-bind="checked: tickFilter" /> 2399 <span>Sufficient Stock</span> 2400 </label> 2401 <label class="label Over mb-0 fs-16"> 2402 <input type="checkbox" value="Over" data-bind="checked: tickFilter" /> 2403 <span>Overstock</span> 2404 </label> 2405 </div> 2406 <div class="modal-body" style="height:calc(100% - 47px); overflow-y:auto"> 2407 <div data-bind="template: { name: 'tblStockTemplate', data: tblStockStatusPopup }"></div> 2408 </div> 2409 <div class="modal-footer"> 2410 <button class="btn btn-success width100" data-dismiss="modal">Close</button> 2411 </div> 2412 </div> 2413 </div> 2414</div> 2415 2416<div class="modal" id="modalStockCompleteness" tabindex="-1" role="dialog"> 2417 <div class="modal-dialog" role="document" style="height:calc(100% - 60px); max-width:1200px"> 2418 <div class="modal-content" style="height:100%"> 2419 <div class="modal-header">
2420 <span data-bind="text: 'Incomplete Stock - ' + stockLevel().replace('HC','HF')" style="font-weight:900"></span> 2421 </div> 2422 <div class="modal-body" style="height:calc(100% - 47px); overflow-y:auto"> 2423 <table class="table table-bordered table-hover no-margin"> 2424 <thead style="background-color:skyblue"> 2425 <tr> 2426 <th>#</th> 2427 <th>PHD</th> 2428 <th>OD</th> 2429 <th data-bind="visible: $root.stockLevel() == 'HC'">HF</th> 2430 </tr> 2431 </thead> 2432 <tbody data-bind="foreach: tblStockCompletePopup, fixedHeader: true, scrollContainer: $($element).closest('.modal-body')"> 2433 <tr> 2434 <td align="center" data-bind="text: $index() + 1"></td> 2435 <td data-bind="text: Name_Prov_E"></td> 2436 <td data-bind="text: Name_OD_E"></td> 2437 <!-- ko if: $root.stockLevel() == 'HC' --> 2438 <td data-bind="text: $data?.Name_Facility_E"></td> 2439 <!-- /ko --> 2440 </tr> 2441 </tbody> 2442 <tfoot data-bind="visible: app.tableFooter($element)"> 2443 <tr> 2444 <td class="text-center text-warning h4" style="padding:10px">No Data</td> 2445 </tr> 2446 </tfoot> 2447 </table> 2448 </div> 2449 <div class="modal-footer"> 2450 <button class="btn btn-success width100" data-dismiss="modal">Close</button> 2451 </div> 2452 </div> 2453 </div> 2454</div> 2455
2456<script id="tblStockTemplate" type="text/html"> 2457 <table class="table table-bordered table-hover no-margin"> 2458 <thead style="background-color:skyblue"> 2459 <tr> 2460 <th rowspan="2">PHD</th> 2461 <th rowspan="2">OD</th> 2462 <th rowspan="2" data-bind="visible: $root.stockLevel() == 'HC'">HF</th> 2463 <th rowspan="2" width="80">Test</th> 2464 <th colspan="4">Positive Cases</th> 2465 <th colspan="3">Stock</th> 2466 </tr> 2467 <tr> 2468 <th width="80">Pf</th> 2469 <th width="80">Pv</th> 2470 <th width="80">Mix</th> 2471 <th width="80">Total</th> 2472 <th width="80">Balance</th> 2473 <th width="80">AMC</th> 2474 <th width="80">MOS</th> 2475 </tr> 2476 </thead> 2477 <tbody data-bind="foreach: $data, fixedHeader: true, scrollContainer: $($element).closest('.modal-body')[0]"> 2478 <tr> 2479 <td data-bind="text: Name_Prov_E"></td> 2480 <td data-bind="text: Name_OD_E"></td> 2481 <!-- ko if: $root.stockLevel() == 'HC' --> 2482 <td data-bind="text: $data?.Name_Facility_E" style="white-space:normal"></td> 2483 <!-- /ko --> 2484 <td data-bind="text: Test || 0" align="center"></td> 2485 <td data-bind="text: Pf || 0" align="center"></td> 2486 <td data-bind="text: Pv || 0" align="center"></td> 2487 <td data-bind="text: Mix || 0" align="center"></td> 2488 <td data-bind="text: Total || 0" align="center"></td> 2489 <td data-bind="text: Balance" align="center"></td> 2490 <td data-bind="text: AMC.toFixed(1)" align="center"></td> 2491 <td align="center"> 2492 <span data-bind="text: MOS.toFixed(1), css: $root.inModal($element) ? 'label ' + Status : ''"></span> 2493 </td> 2494 </tr> 2495 </tbody> 2496 <tfoot data-bind="visible: app.tableFooter($element)"> 2497 <tr> 2498 <td class="text-center text-warning h4" style="padding:10px">No Data</td> 2499 </tr> 2500 </tfoot> 2501 </table> 2502</script>
2502 <style> 2503 div.fixed-header table.fixed-header { background:white; } 2504 .gm-style-iw button { display: none !important; } 2505 .foci-ball { width:15px; height:15px; border-radius:50%; } 2506</style> 2507 2508<div data-bind="visible: tab() == 'Map' && app.user.permiss['Dashboard'].contain('Map')" style="display: none"> 2509 <div class="row"> 2510 <div class="col-md-6"> 2511 <div class="chart-container"> 2512 <div id="mapFoci" class="chartbox no-margin" style="height:600px"></div> 2513 </div> 2514 </div> 2515 <div class="col-md-6"> 2516 <div class="card" style="transform:translate(0,0); width:fit-content"> 2517 <div class="scroller-box" style="height:600px; overflow-y:auto"> 2518 <table id="exportMap" class="table table-striped no-margin"> 2519 <thead> 2520 <tr> 2521 <th>#</th> 2522 <th>Province</th> 2523 <th>OD</th> 2524 <th>HC</th> 2525 <th>Village</th> 2526 <th style="background:orange">12 Months</th> 2527 <th style="background:green">13-24 Months</th> 2528 <th style="background:green; border-left:1px solid white">25-36 Months</th> 2529 <th style="background:#2F75B5">37 Months</th> 2530 </tr> 2531 </thead> 2532 <tbody data-bind="foreach: tableFoci, fixedHeader: true, scrollContainer: $($element).closest('.scroller-box')"> 2533 <tr> 2534 <td data-bind="text: $index() + 1" align="center"></td> 2535 <td data-bind="text: Name_Prov_E"></td> 2536 <td data-bind="text: Name_OD_E"></td> 2537 <td data-bind="text: Name_Facility_E"></td> 2538 <td data-bind="text: Name_Vill_E" style="white-space:normal"></td> 2539 <td align="center" valign="middle"> 2540 <div class="foci-ball" data-bind="style: { backgroundColor: Year1 }"></div> 2541 </td> 2542 <td align="center" valign="middle"> 2543 <div class="foci-ball" data-bind="style: { backgroundColor: Year2 }"></div> 2544 </td> 2545 <td align="center" valign="middle"> 2546 <div class="foci-ball" data-bind="style: { backgroundColor: Year3 }"></div> 2547 </td> 2548 <td align="center" valign="middle"> 2549 <div class="foci-ball" data-bind="style: { backgroundColor: Year4.replace('blue','#2F75B5') }"></div> 2550 </td> 2551 </tr> 2552 </tbody> 2553 </table> 2554 </div> 2555 </div> 2556 </div> 2557 </div> 2558 2559 <div style="padding-left:10px;padding-right:10px" class="row"> 2560 <div class="card-2"> 2561 <div class="col-md-6"> 2562 <div class="chart-container" style="border: none; box-shadow:none; border: none !important"> 2563 <div id="chartTop10OD" style="height:600px"></div> 2564 <div class="btn" id="bubble" style="top: 7%"> 2565 <label class="checkbox-inline checkbox-sm"> 2566 <input class="top10Cbox" id="top-0" type="checkbox" checked /> 2567 <span id="t10-lg-0"></span> 2568 </label> 2569 <label class="checkbox-inline checkbox-sm"> 2570 <input class="top10Cbox" id="top-1" type="checkbox" checked /> 2571 <span id="t10-lg-1"></span> 2572 </label> 2573 <label class="checkbox-inline checkbox-sm"> 2574 <input class="top10Cbox" id="top-2" type="checkbox" checked /> 2575 <span id="t10-lg-2"></span> 2576 </label> 2577 <label class="checkbox-inline checkbox-sm"> 2578 <input class="top10Cbox" id="top-3" type="checkbox" checked /> 2579 <span id="t10-lg-3"></span> 2580 </label> 2581 <label class="checkbox-inline checkbox-sm"> 2582 <input class="top10Cbox" id="top-4" type="checkbox" checked /> 2583 <span id="t10-lg-4"></span> 2584 </label> 2585 </div> 2586 </div> 2587 </div> 2588 2589 <div class="col-md-6"> 2590 <div id="mapOD" logoopacity="1" style="height:600px"></div> 2591 </div> 2592 </div> 2593 </div> 2594 2595 <div class="row"> 2596 <div class="col-md-6"> 2597 <div class="chart-container card"> 2598 <div id="mapHotspot" class="chartbox no-margin" style="height:615px"></div> 2599 </div> 2600 </div> 2601 2602 <div class="col-md-6"> 2603 <div class="chart-container card"> 2604 <div id="mapAber" logoopacity="1" class="chartbox" style="height:600px; min-width:850px"></div> 2605 </div> 2606 </div> 2607 </div> 2608 2609 <div class="row"> 2610 <div class="col-md-6"> 2611 <div class="chart-container card"> 2612 <div id="mapODInc" logoopacity="1" class="chartbox" style="height:600px; min-width:850px"></div> 2613 </div> 2614 </div> 2615 2616 <div class="col-md-6"></div> 2617 </div> 2618 2619 <div class="row"> 2620 <div class="col-12"> 2621 <div class="card option" style="line-height:15px"> 2622 <div class="left-aside bg-light-part"> 2623 <h6 class="panel-header"> 2624 PERIOD 2625 </h6> 2626 2627 <div class="divider"></div> 2628 2629 <div class="form-group" style="display:inline-block"> 2630 <span>Year</span> 2631 <select class="form-control input-sm" data-bind="disable: isGuest, value: y, options: yearList"></select> 2632 </div> 2633 <br /> 2634 <div class="form-group" style="display:inline-block; width:49%"> 2635 <span> From</span> 2636 <select class="form-control input-sm" data-bind="disable: isGuest, value: mf, options: monthList"></select> 2637 </div> 2638 <div class="form-group" style="display:inline-block; width:49%"> 2639 <span> To</span> 2640 <select class="form-control input-sm" data-bind="disable: isGuest, value: mt, options: monthList"></select> 2641 </div> 2642 <!--/--> 2643 <h6 class="panel-header mg-top-10"> 2644 PLACE 2645 </h6> 2646 <div class="divider"></div> 2647 <div class="form-group"> 2648 <span>Province</span> 2649 <select class="form-control input-sm" data-bind="disable: isGuest, value: pvAPI, options: provList, optionsValue: 'code', optionsText: 'name', optionsCaption: pvList().length == 1 ? undefined : 'All'" id="code_prov"></select> 2650 </div> 2651 <div class="form-group"> 2652 <span>OD</span> 2653 <select class="form-control input-sm" data-bind="disable: isGuest, value: odAPI, options: odListOption, optionsValue: 'code', optionsText: 'name', optionsCaption: odListOption().length == 1 ? undefined : 'All'" id="code_od"></select> 2654 </div> 2655 <div class="form-group"> 2656 <span>HF</span> 2657 <select class="form-control input-sm" data-bind="disable: isGuest, value: hcAPI, options: hcList, optionsValue: 'code', optionsText: 'name', optionsCaption: 'All'" id="code_fa"></select> 2658 </div> 2659 <!--/--> 2660 2661 <h6 class="panel-header mg-top-10"> 2662 SPECIES 2663 </h6> 2664 2665 <div class="divider"></div> 2666 2667 <div class="specie" style="font-size:9.5px; border: 1px solid #ccc; padding:11px"> 2668 <label class="checkbox-inline checkbox-sm"> 2669 <input data-bind="disable: isGuest, checked: f" type="checkbox" /> 2670 <span>PF</span> 2671 </label> 2672 <label class="checkbox-inline checkbox-sm"> 2673 <input data-bind="disable: isGuest, checked: v" type="checkbox" /> 2674 <span>PV</span> 2675 </label> 2676 <label class="checkbox-inline checkbox-sm"> 2677 <input data-bind="disable: isGuest, checked: m" type="checkbox" /> 2678 <span>Mix</span> 2679 </label> 2680 </div> 2681 <!--/--> 2682 2683 <div class="form-group">
2684 <button data-bind="click: submitAPIVill" class="btn btn-info btn-sm" style="margin-top: 5px; width:100%">View</button> 2685 </div> 2686 2687 <div class="divider"></div> 2688 2689 <div class="row"> 2690 <table class="table table-striped" style="font-size:13px; margin-left: 10px; margin-right:10px"> 2691 <tr> 2692 <th class="bg-info">API Category</th> 2693 <th class="bg-primary">No. Villages</th> 2694 </tr> 2695 <tr> 2696 <td> 2697 Equal 0 2698 </td> 2699 <td data-bind="text: $root.apiVill0"></td> 2700 </tr> 2701 <tr> 2702 <td> 2703 From 0.1 to 1 2704 </td> 2705 <td data-bind="text: $root.apiVillLt1"></td> 2706 </tr> 2707 <tr> 2708 <td> 2709 From 1 to 5 2710 </td> 2711 <td data-bind="text: $root.apiVillf1t5"></td> 2712 </tr> 2713 <tr> 2714 <td> 2715 From 5 to 30 2716 </td> 2717 <td data-bind="text: $root.apiVillf5t30"></td> 2718 </tr> 2719 <tr> 2720 <td> 2721 Greater than 30 2722 </td> 2723 <td data-bind="text: $root.apiVillgt30"></td> 2724 </tr> 2725 </table> 2726 </div> 2727 </div><!--/left-aside--> 2728 2729 <div class="right-aside"> 2730 <div class="chart-container2"> 2731 <div id="mapAPI" logoopacity="1" class="chartbox no-margin" style="height:800px"></div> 2732 <div class="btn" data-bind="foreach: apiChboxs"> 2733 <label class="checkbox-inline checkbox-sm"> 2734 <input class="apimap" data-bind="checked: selected, attr: {id: id}" type="checkbox" /> 2735 <span data-bind="text: name"></span> 2736 </label> 2737 </div> 2738 </div> 2739 </div> 2740 </div><!--/card--> 2741 </div> <!--/col-12--> 2742 </div> 2743</div> <div id="exportTable" data-bind="visible: tab() == 'Table' && app.user.permiss['Dashboard'].contain('Table')" style="display: none"> 2744 <h3> 2745 <span>Monthly malaria cases by species reported</span> 2746 <span data-bind="visible: prov() == null"> by provinces (55 ODs)</span> 2747 </h3> 2748 <table class="table color-bordered-table info-bordered-table table-striped hover-table box-shadow"> 2749 <thead> 2750 <tr> 2751 <th align="center" data-bind="text: year"></th> 2752 <!-- ko foreach: Array(12) --> 2753 <th colspan="3" align="center" data-bind="text: moment($index() + 1, 'M').format('MMM')" style="border-left:1px solid #ddd"></th> 2754 <!-- /ko --> 2755 <th colspan="3" align="center" style="border-left:1px solid #ddd">Total</th> 2756 </tr> 2757 <tr> 2758 <th>Province</th> 2759 <!-- ko foreach: Array(13) --> 2760 <th class="bg-info" align="center" style="border-left:1px solid #ddd">Pf</th> 2761 <th class="bg-primary" align="center">Pv</th> 2762 <th class="bg-purple" align="center">Mix</th> 2763 <!-- /ko --> 2764 </tr> 2765 </thead> 2766 <tbody data-bind="foreach: tableSpecieProvinceMonth"> 2767 <tr> 2768 <td data-bind="text: Name_Prov_E"></td> 2769 <!-- ko foreach: Array(12) --> 2770 <td align="center" data-bind="text: $parent['Pf' + ($index() + 1)]" style="border-left:1px solid #ddd"></td> 2771 <td align="center" data-bind="text: $parent['Pv' + ($index() + 1)]"></td> 2772 <td align="center" data-bind="text: $parent['Mix' + ($index() + 1)]"></td> 2773 <!-- /ko --> 2774 <th align="center" data-bind="text: Pf" style="border-left:1px solid #ddd"></th> 2775 <th align="center" data-bind="text: Pv"></th> 2776 <th align="center" data-bind="text: Mix"></th> 2777 </tr> 2778 </tbody> 2779 <tfoot data-bind="with: tableSpecieProvinceMonth, visible: prov() == null"> 2780 <tr> 2781 <th>Grand Total</th> 2782 <!-- ko foreach: Array(12) --> 2783 <th align="center" data-bind="text: $parent.sum(r => r['Pf' + ($index() + 1)])" style="border-left:1px solid #ddd"></th> 2784 <th align="center" data-bind="text: $parent.sum(r => r['Pv' + ($index() + 1)])"></th> 2785 <th align="center" data-bind="text: $parent.sum(r => r['Mix' + ($index() + 1)])"></th> 2786 <!-- /ko --> 2787 <th align="center" data-bind="text: $data.sum(r => r.Pf)" style="border-left:1px solid #ddd"></th> 2788 <th align="center" data-bind="text: $data.sum(r => r.Pv)"></th> 2789 <th align="center" data-bind="text: $data.sum(r => r.Mix)"></th> 2790 </tr> 2791 </tfoot> 2792 </table> 2793 <br /> 2794 <br /> 2795 2796 <h3>
2797 <span>Monthly severe malaria cases reported</span> 2798 <span data-bind="visible: prov() == null"> by provinces (55 ODs)</span> 2799 </h3> 2800 <table class="table color-bordered-table info-bordered-table table-striped box-shadow"> 2801 <thead> 2802 <tr> 2803 <th colspan="14" align="center" data-bind="text: year"></th> 2804 </tr> 2805 <tr> 2806 <th>Province</th> 2807 <!-- ko foreach: Array(12) --> 2808 <th align="center" data-bind="text: moment($index() + 1, 'M').format('MMM')"></th> 2809 <!-- /ko --> 2810 <th align="center">Total</th> 2811 </tr> 2812 </thead> 2813 <tbody data-bind="foreach: tableSevereMonth"> 2814 <tr> 2815 <td data-bind="text: Name_Prov_E"></td> 2816 <!-- ko foreach: Array(12) --> 2817 <td align="center" data-bind="text: $parent['Severe' + ($index() + 1)]"></td> 2818 <!-- /ko --> 2819 <th align="center" data-bind="text: Severe"></th> 2820 </tr> 2821 </tbody> 2822 <tfoot data-bind="with: tableSevereMonth, visible: prov() == null"> 2823 <tr> 2824 <th>Grand Total</th> 2825 <!-- ko foreach: Array(12) --> 2826 <th align="center" data-bind="text: $parent.sum(r => r['Severe' + ($index() + 1)])"></th> 2827 <!-- /ko --> 2828 <th align="center" data-bind="text: $data.sum(r => r.Severe)"></th> 2829 </tr> 2830 </tfoot> 2831 </table> 2832 <br /> 2833 <br /> 2834 2835 <h3 style="text-align:center"> 2836 <span>Number / percentage of malaria cases by age groups and sex</span> 2837 <span data-bind="visible: prov() == null"> by year (55 ODs)</span> 2838 </h3> 2839 <table class="table color-bordered-table info-bordered-table table-striped widthauto box-shadow" style="margin:auto"> 2840 <thead> 2841 <tr> 2842 <th class="bg-info">Age group (year)</th> 2843 <th class="bg-primary" align="center" width="100">Year</th> 2844 <th class="bg-purple" align="center" width="100">Male</th> 2845 <th class="bg-danger" align="center" width="100">Female</th> 2846 <th class="bg-success" align="center" width="100">Male</th> 2847 <th class="bg-warning" align="center" width="100">Female</th> 2848 <th class="bg-cyan" align="center" width="100">Total</th> 2849 <th class="bg-info" align="center">Annual cases</th> 2850 </tr> 2851 </thead> 2852 <tbody data-bind="foreach: tableAgeSex"> 2853 <tr> 2854 <td align="center" class="border-right" valign="middle" data-bind="text: Age, visible: $index() % Duration == 0, attr: { rowspan: Duration }"></td> 2855 <td align="center" data-bind="text: Year"></td> 2856 <td align="center" data-bind="text: Male"></td> 2857 <td align="center" data-bind="text: Female"></td> 2858 <td align="center" data-bind="text: MalePercent + '%'"></td> 2859 <td align="center" data-bind="text: FemalePercent + '%'"></td> 2860 <td align="center" data-bind="text: Total"></td> 2861 <td align="center" data-bind="text: Annual + '%'"></td> 2862 </tr> 2863 </tbody> 2864 </table> 2865 <br /> 2866 <br /> 2867 2868 <h3 style="text-align:center"> 2869 <span>Number of malaria species by age groups and sex</span> 2870 <span data-bind="visible: prov() == null"> (55 ODs)</span> 2871 </h3> 2872 <table class="table color-bordered-table info-bordered-table table-striped widthauto box-shadow" style="margin:auto"> 2873 <thead> 2874 <tr> 2875 <th class="bg-info" valign="middle" rowspan="2">Age group (year)</th> 2876 <th class="bg-primary" align="center" valign="middle" rowspan="2" width="100">Year</th> 2877 <th class="bg-cyan" align="center" colspan="3" style="border-left:1px solid #ddd">Male</th> 2878 <th class="bg-danger" align="center" colspan="3" style="border-left:1px solid #ddd">Female</th> 2879 <th class="bg-warning" align="center" valign="middle" rowspan="2" width="100" style="border-left:1px solid #ddd">Total</th> 2880 </tr> 2881 <tr> 2882 <th class="bg-info" align="center" width="70" style="border-left:1px solid #ddd">Pf</th> 2883 <th class="bg-primary" align="center" width="70">Pv</th> 2884 <th class="bg-purple" align="center" width="70">Mix</th> 2885 <th class="bg-info" align="center" width="70" style="border-left:1px solid #ddd">Pf</th> 2886 <th class="bg-primary" align="center" width="70">Pv</th> 2887 <th class="bg-purple" align="center" width="70">Mix</th> 2888 </tr> 2889 </thead> 2890 <tbody data-bind="foreach: tableAgeSexSpecie"> 2891 <tr> 2892 <td align="center" class="border-right" valign="middle" data-bind="text: Age, visible: $index() % Duration == 0, attr: { rowspan: Duration }"></td> 2893 <td align="center" data-bind="text: Year"></td> 2894 <td align="center" data-bind="text: MalePf" style="border-left:1px solid #ddd"></td> 2895 <td align="center" data-bind="text: MalePv"></td> 2896 <td align="center" data-bind="text: MaleMix"></td> 2897 <td align="center" data-bind="text: FemalePf" style="border-left:1px solid #ddd"></td> 2898 <td align="center" data-bind="text: FemalePv"></td> 2899 <td align="center" data-bind="text: FemaleMix"></td> 2900 <td align="center" data-bind="text: Total" style="border-left:1px solid #ddd"></td> 2901 </tr> 2902 </tbody> 2903 </table> 2904 <br /> 2905 <br /> 2906 2907 <h3 style="text-align:center"> 2908 <span>Number of malaria severe cases by age groups and sex</span> 2909 <span data-bind="visible: prov() == null"> (55 ODs)</span></h3> 2910 <table class="table color-bordered-table info-bordered-table table-striped widthauto box-shadow" style="margin:auto"> 2911 <thead> 2912 <tr> 2913 <th class="bg-info">Age group (year)</th> 2914 <th class="bg-primary" align="center" width="100">Year</th> 2915 <th class="bg-success" align="center" width="100">Male</th> 2916 <th class="bg-warning" align="center" width="100">Female</th>
2917 <th class="bg-cyan" align="center" width="100">Total</th> 2918 </tr> 2919 </thead> 2920 <tbody data-bind="foreach: tableAgeSexSevere"> 2921 <tr> 2922 <td align="center" class="border-right" valign="middle" data-bind="text: Age, visible: $index() % Duration == 0, attr: { rowspan: Duration }"></td> 2923 <td align="center" data-bind="text: Year"></td> 2924 <td align="center" data-bind="text: Male"></td> 2925 <td align="center" data-bind="text: Female"></td> 2926 <td align="center" data-bind="text: Total"></td> 2927 </tr> 2928 </tbody> 2929 </table> 2930</div> 2931<div data-bind="visible: tab() == 'CNM Outbreak Detection Tool'" style="display: none"> 2932 <div class="row"> 2933 <div class="col-12"> 2934 <h3>CNM Outbreak Detection Tool</h3> 2935 <div class="card option" style="line-height:15px"> 2936 <div class="left-aside bg-light-part"> 2937 <h6 class="panel-header" style="left:75px"> 2938 Year 2939 </h6> 2940 <div class="divider"></div> 2941 <h6 style="margin:0; font-size:13px"> 2942 <strong>Select Base Line Range</strong> 2943 </h6> 2944 2945 <div id="baseRange"> 2946 <table class="table table-striped mg-top-10" style="width:100%; margin-bottom:0"> 2947 <thead style="background-color: deepskyblue"> 2948 <tr> 2949 <th>Year</th> 2950 <th></th> 2951 </tr> 2952 </thead> 2953 2954 <tbody> 2955 <!--<tr> 2956 <td style="padding-right: 15px">2015</td> 2957 <td> 2958 <input id="2015" class="yrange" data-bind="disable: isGuest" type="checkbox" /> 2959 </td> 2960 </tr>--> 2961 <!--<tr> 2962 <td style="padding-right: 15px">2016</td> 2963 <td> 2964 <input id="2016" class="yrange" data-bind="disable: isGuest" type="checkbox" /> 2965 </td> 2966 </tr>--> 2967 <tr> 2968 <td style="padding-right: 15px">2017</td> 2969 <td> 2970 <input id="2017" class="yrange" data-bind="disable: isGuest" type="checkbox" /> 2971 </td> 2972 </tr> 2973 <tr> 2974 <td style="padding-right: 15px">2018</td> 2975 <td> 2976 <input id="2018" class="yrange" data-bind="disable: isGuest" type="checkbox" checked /> 2977 </td> 2978 </tr> 2979 <tr> 2980 <td style="padding-right: 15px">2019</td> 2981 <td> 2982 <input id="2019" class="yrange" data-bind="disable: isGuest" type="checkbox" checked /> 2983 </td> 2984 </tr> 2985 <tr> 2986 <td style="padding-right: 15px">2020</td> 2987 <td> 2988 <input id="2020" class="yrange" data-bind="disable: isGuest" type="checkbox" checked /> 2989 </td> 2990 </tr> 2991 <tr> 2992 <td style="padding-right: 15px">2021</td> 2993 <td> 2994 <input id="2021" class="yrange" data-bind="disable: isGuest" type="checkbox" checked /> 2995 </td> 2996 </tr> 2997 <tr> 2998 <td style="padding-right: 15px">2022</td> 2999 <td> 3000 <input id="2022" class="yrange" data-bind="disable: isGuest" type="checkbox" checked /> 3001 </td> 3002 </tr> 3003 </tbody> 3004 </table> 3005 </div> 3006 <br /> 3007 <div> 3008 <label class="checkbox-inline checkbox-sm"> 3009 <input data-bind="disable: isGuest, checked: incEstimateCase" type="checkbox" /> 3010 <span>Include Estimated Case</span> 3011 </label> 3012 </div> 3013 3014 <!--/--> 3015 <h6 class="panel-header mg-top-10" style="left:75px">Place</h6> 3016 <div class="divider"></div> 3017 <div class="form-group"> 3018 <span>Province</span> 3019 <select class="form-control input-sm" data-bind="disable: isGuest, value: pvOB, options: provList, optionsValue: 'code', optionsText: 'name', optionsCaption: pvList().length == 1 ? undefined : 'All'" id="code_prov"></select> 3020 </div> 3021 <div class="form-group"> 3022 <span>OD</span> 3023 <select class="form-control input-sm" data-bind="disable: isGuest, value: odOB, options: odListOption, optionsValue: 'code', optionsText: 'name', optionsCaption: odListOption().length == 1 ? undefined : 'All'" id="code_od"></select> 3024 </div> 3025 <div class="form-group"> 3026 <span>HF</span> 3027 <select class="form-control input-sm" data-bind="disable: isGuest, value: hcOB, options: hcList, optionsValue: 'code', optionsText: 'name', optionsCaption: 'All'" id="code_fa"></select> 3028 </div> 3029 <!--/--> 3030 <h6 class="panel-header mg-top-10" style="left:75px">Species</h6> 3031 <div class="divider"></div> 3032 <div class="specie" style="font-size:9.5px; border: 1px solid #ccc; padding:10px"> 3033 <label class="checkbox-inline checkbox-sm"> 3034 <input data-bind="disable: isGuest, checked: f" type="checkbox" /> 3035 <span>PF</span> 3036 </label> 3037 <label class="checkbox-inline checkbox-sm"> 3038 <input data-bind="disable: isGuest, checked: v" type="checkbox" /> 3039 <span>PV</span> 3040 </label> 3041 <label class="checkbox-inline checkbox-sm"> 3042 <input data-bind="disable: isGuest, checked: m" type="checkbox" /> 3043 <span>Mix</span> 3044 </label> 3045 </div> 3046 <!--/--> 3047 <div class="form-group"> 3048 <button data-bind="disable: isGuest, click: submitDetection" class="btn btn-info btn-sm" style="margin-top: 5px;width:100%">View</button> 3049 </div> 3050 <div class="divider"></div> 3051 <div> 3052 <img class="img-responsive" src="/media/images/cnm_android_icon.png?1756807513" style="margin: 0 auto" /> 3053 </div> 3054 <div> 3055 <img class="img-responsive" src="/media/images/moru.jpg?1756807513" style="margin-top:5px; margin: 0 auto" /> 3056 </div> 3057 3058 </div><!--/left-aside--> 3059 3060 <div class="right-aside" style="height:946px"> 3061 <div class="chart-container2"> 3062 <div style="height: 650px" id="OutbreakDetection" class="chartbox"></div> 3063 <div class="btn"> 3064 <label class="checkbox-inline checkbox-sm"> 3065 <input class="obDetection" id="EC" type="checkbox" checked /> 3066 <span>Estimated Case</span> 3067 </label> 3068 <label class="checkbox-inline checkbox-sm"> 3069 <input class="obDetection" id="VMW" type="checkbox" checked /> 3070 <span>VMW</span> 3071 </label> 3072 <label class="checkbox-inline checkbox-sm"> 3073 <input class="obDetection" id="HF" type="checkbox" checked /> 3074 <span>HF</span> 3075 </label> 3076 <label class="checkbox-inline checkbox-sm"> 3077 <input class="obDetection" id="BL" type="checkbox" checked /> 3078 <span>Base Line</span> 3079 </label> 3080 <label class="checkbox-inline checkbox-sm"> 3081 <input class="obDetection" id="STD1" type="checkbox" checked /> 3082 <span>STD1</span> 3083 </label> 3084 <label class="checkbox-inline checkbox-sm"> 3085 <input class="obDetection" id="STD2" type="checkbox" checked /> 3086 <span>STD2</span> 3087 </label> 3088 </div> 3089 </div> 3090 </div><!--/right-aside--> 3091 </div> 3092 </div> 3093 </div> 3094</div> <style> 3095 table.ip-place tr { 3096 padding-bottom: 5px; 3097 } 3098 .inten.active { 3099 background-color: #f8f9fa; 3100 } 3101 table.tableIPSLDP th {border:none} 3102 table.tableIPSLDP {border-top:none !important} 3103</style> 3104<div data-bind="visible: tab() == 'Intensification Plan' && app.user.permiss['Dashboard'].contain('Intensification Plan')" style="display: none"> 3105 <div class="row"> 3106 <div class="col-12"> 3107 <h3>Intensification Plan</h3> 3108 <div class="card" style="line-height:15px"> 3109 <div class="left-aside bg-light-part"> 3110 <!----> 3111 <table class="ip-place table-hover" style="font-size:12px; font-weight:500; width:100%"> 3112 <thead> 3113 <tr> 3114 <td colspan="2"> 3115 <select class="form-control input-sm" data-bind="value: ip" style="width:100%"> 3116 <option value="1">IP1</option> 3117 <option value="2">IP2</option> 3118 </select> 3119 </td> 3120 </tr> 3121 <tr> 3122 <th style="font-weight:700; padding-top:10px">Place</th> 3123 <th style="padding-top:10px" align="center"> 3124 <input type="checkbox" data-bind="click: changeTick30HF" style="margin:0;" checked /> 3125 </th> 3126 </tr> 3127 </thead> 3128 <tbody data-bind="foreach: table30HF"> 3129 <tr> 3130 <td data-bind="text: cso, style: { color: color }" class="text-bold" style="padding:10px 0 0 5px"></td> 3131 <td align="center" valign="bottom" width="20" style="padding:0"> 3132 <input type="checkbox" data-bind="checked: checked, click: tickChange" style="margin:0" /> 3133 </td> 3134 </tr> 3135 <!-- ko foreach: ods --> 3136 <tr> 3137 <td data-bind="text: od, style: { color: color }" class="text-bold" style="padding:0 0 0 15px"></td> 3138 <td align="center" valign="bottom" width="20" style="padding:0"> 3139 <input type="checkbox" data-bind="checked: checked, click: tickChange" style="margin:0" /> 3140 </td> 3141 </tr> 3142 <!-- ko foreach: hfs --> 3143 <tr> 3144 <td data-bind="text: hf, style: { color: color }" style="padding:0 0 0 25px"></td> 3145 <td align="center" width="20" style="padding:0"> 3146 <input type="checkbox" data-bind="checked: checked, click: tickChange" style="margin:0" /> 3147 </td> 3148 </tr> 3149 <!-- /ko --> 3150 <!-- /ko --> 3151 </tbody> 3152 </table> 3153 <br /> 3154 <!-- ko if: $root.ip() == '2'--> 3155 <table class="table color-bordered-table info-bordered-table table-striped" style="font-size:12px"> 3156 <thead> 3157 <tr> 3158 <th width="20" style="padding:0 !important; border-top:none">Positive Rate By Primaquine</th> 3159 </tr> 3160 </thead> 3161 <tbody> 3162 <tr> 3163 <td width="20" style="padding:0 !important; border-top:none" data-bind="text: $root.primaquineRate() + ' %'"></td> 3164 </tr> 3165 </tbody> 3166 </table> 3167 <!-- /ko --> 3168 </div><!--/left-side--> 3169 3170 <div class="right-aside"> 3171 <div> 3172 <div class="chart-container form-group"> 3173 <div id="chartIntenSpecies" class="chartbox no-margin"></div> 3174 <div class="btn"> 3175 <label class="checkbox-inline checkbox-sm"> 3176 <input class="chartIntenSpeciesCbox" id="PF" type="checkbox" checked /> 3177 <span>PF</span> 3178 </label> 3179 <label class="checkbox-inline checkbox-sm"> 3180 <input class="chartIntenSpeciesCbox" id="PV" type="checkbox" checked /> 3181 <span>PV</span> 3182 </label> 3183 <label class="checkbox-inline checkbox-sm"> 3184 <input class="chartIntenSpeciesCbox" id="Mix" type="checkbox" checked /> 3185 <span>Mix</span> 3186 </label> 3187 </div> 3188 </div> 3189 </div> 3190 3191 <div class="chart-container form-group"> 3192 <div id="chartIntenFacility" class="chartbox no-margin" style="height:450px"></div> 3193 <div class="btn"> 3194 <label class="checkbox-inline checkbox-sm"> 3195 <input class="chartIntenFacilityCbox" value="pf" data-bind="change: drawChartIntenFacility" type="checkbox" checked /> 3196 <span>PF</span> 3197 </label> 3198 <label class="checkbox-inline checkbox-sm"> 3199 <input class="chartIntenFacilityCbox" value="pv" data-bind="change: drawChartIntenFacility" type="checkbox" checked /> 3200 <span>PV</span> 3201 </label> 3202 <label class="checkbox-inline checkbox-sm"> 3203 <input class="chartIntenFacilityCbox" value="mix" data-bind="change: drawChartIntenFacility" type="checkbox" checked /> 3204 <span>Mix</span> 3205 </label> 3206 </div> 3207 </div> 3208 3209 <div class="chart-container form-group"> 3210 <div id="chartIntenRate" class="chartbox no-margin"></div> 3211 </div> 3212 3213 <div style="position:absolute"> 3214 <select class="form-control" data-bind="change: drawChartIntenTop10Vill, options: ipFilterDateList, optionsCaption: 'All Months'"></select> 3215 </div> <br /><br /><br /> 3216 3217 <div class="chart-container form-group"> 3218 <div id="chartIntenTop10Vill" class="chartbox no-margin"></div> 3219 <div class="btn"> 3220 <label class="checkbox-inline checkbox-sm"> 3221 <input id="chartIntenTop10VillPf" type="checkbox" data-bind="click: drawChartIntenTop10Vill" checked /> 3222 <span>PF</span> 3223 </label> 3224 <label class="checkbox-inline checkbox-sm"> 3225 <input id="chartIntenTop10VillPv" type="checkbox" data-bind="click: drawChartIntenTop10Vill" checked /> 3226 <span>PV</span> 3227 </label> 3228 <label class="checkbox-inline checkbox-sm"> 3229 <input id="chartIntenTop10VillMix" type="checkbox" data-bind="click: drawChartIntenTop10Vill" checked /> 3230 <span>Mix</span> 3231 </label> 3232 </div> 3233 </div> 3234 3235 <div class="form-group" data-bind="visible: $root.ip() == 2"> 3236 <div style="border:1px solid #2b908f; padding:10px"> 3237 <div class="chart-container form-group"> 3238 <div id="chartSLDP" class="chartbox no-margin"></div> 3239 </div> 3240 <table class="tableIPSLDP table color-bordered-table info-bordered-table table-hover box-shadow"> 3241 <thead> 3242 <tr> 3243 <th rowspan="2" align="center" valign="middle">CSO</th> 3244 <th rowspan="2" align="center" valign="middle">HF Name</th> 3245 <!-- ko foreach: ipFilterDateList --> 3246 <th colspan="3" align="center" data-bind="text: $data; css: $parent.headerColor($index)"></th> 3247 <!-- /ko --> 3248 </tr> 3249 <tr data-bind="foreach: ipFilterDateList"> 3250 <th class="bg-info" align="center">PF + Mix</th> 3251 <th class="bg-primary" align="center">SLDP</th> 3252 <th class="bg-warning" align="center">%</th> 3253 </tr> 3254 </thead> 3255 <tbody data-bind="foreach: tableIPSLDP, fixedHeader: true"> 3256 <tr data-bind="css: HF == 'Total' ? 'text-bold info' : HF == 'Grand Total' ? 'text-bold success' : ''"> 3257 <!-- ko if: RowSpan > 0 --> 3258 <td style="border-right: 1px solid #ccc" data-bind="text: CSO, attr: { rowSpan: RowSpan }" align="center" valign="middle"></td> 3259 <!-- /ko --> 3260 3261 <td data-bind="text: HF"></td> 3262 <!-- ko foreach: Values --> 3263 <td align="right" data-bind="text: pfmix"></td> 3264 <td align="right" data-bind="text: sldp"></td> 3265 <td class="inten" align="right" data-bind="text: isnot(percent, '', r => r + '%'), style: { color: percent < 90 ? 'red' : 'green' }, css: { 'active': !$parent.HF.contain('Total') }"></td> 3266 <!-- /ko --> 3267 </tr> 3268 </tbody> 3269 </table> 3270 </div> 3271 3272 <br /> 3273 <div style="position:absolute"> 3274 <select class="form-control" data-bind="value: ipFilterDate, options: ipFilterDateList, optionsCaption: 'All Months'"></select> 3275 </div> 3276 <h3 class="text-center text-primary"> 3277 <span>Table of Summary Data By HFs in IP2, DEC 2019 - </span> 3278 <span class="text-uppercase" data-bind="text: moment().add(-1, 'months').format('MMM YYYY')"></span> 3279 </h3> 3280 <table class="tableIPSLDP table color-bordered-table info-bordered-table table-striped table-hover box-shadow"> 3281 <thead> 3282 <tr> 3283 <th rowspan="2" align="center" valign="middle">CSO</th> 3284 <th class="bg-info" rowspan="2" align="center" valign="middle">HF Name</th> 3285 <th colspan="5" align="center">Positive Case</th> 3286 <th class="bg-info" colspan="2" align="center" valign="middle">Outreach (MMW - IP)</th> 3287 <th rowspan="2" align="center" valign="middle">Primaquine</th> 3288 <th class="bg-info" rowspan="2" align="center" valign="middle">Forest Pack</th> 3289 </tr> 3290 <tr> 3291 <th class="bg-success" align="center">HF</th> 3292 <th class="bg-primary" align="center">MMW - IP</th> 3293 <th class="bg-purple" align="center">MMW - Non IP</th> 3294 <th class="bg-success" align="center">VMW</th> 3295 <th class="bg-warning" align="center">Total</th>
3296 <th class="bg-cyan" align="center">Test</th> 3297 <th class="bg-danger" align="center">Positive</th> 3298 </tr> 3299 </thead> 3300 <tbody data-bind="foreach: tableIPCase, fixedHeader: true"> 3301 <tr data-bind="css: HFName == 'Total' ? 'text-bold info' : HFName == 'Grand Total' ? 'text-bold success' : ''"> 3302 <!-- ko if: RowSpan > 0 --> 3303 <td style="border-right: 1px solid #ccc" data-bind="text: CSO, attr: { rowSpan: RowSpan }" align="center" valign="middle"></td> 3304 <!-- /ko --> 3305 3306 <td data-bind="text: HFName"></td> 3307 <td align="right" data-bind="text: HF"></td> 3308 <td align="right" data-bind="text: MMWIP"></td> 3309 <td align="right" data-bind="text: MMW"></td> 3310 <td align="right" data-bind="text: VMW"></td> 3311 <td align="right" data-bind="text: Positive"></td> 3312 <td align="right" data-bind="text: OutreachTest"></td> 3313 <td align="right" data-bind="text: OutreachPositive"></td> 3314 <td align="right" data-bind="text: PrimaquineACT"></td> 3315 <td align="right" data-bind="text: ForestPack"></td> 3316 </tr> 3317 </tbody> 3318 </table> 3319 3320 <br /> 3321 <div style="position:absolute"> 3322 <select class="form-control" data-bind="value: ipFilterDate, options: ipFilterDateList, optionsCaption: 'All Months'"></select> 3323 </div> 3324 <h3 class="text-center text-primary"> 3325 <span>Table of Out Reach Data By HFs in IP2, DEC 2019 - </span> 3326 <span class="text-uppercase" data-bind="text: moment().add(-1, 'months').format('MMM YYYY')"></span> 3327 </h3> 3328 <table class="tableIPSLDP table color-bordered-table info-bordered-table table-striped table-hover box-shadow"> 3329 <thead> 3330 <tr> 3331 <th rowspan="2" align="center" valign="middle">CSO</th> 3332 <th class="bg-danger" rowspan="2" align="center" valign="middle">HF Name</th> 3333 <th colspan="3" align="center">Test</th> 3334 <th class="bg-danger" colspan="3" align="center">PF</th> 3335 <th colspan="3" align="center">PV</th> 3336 <th class="bg-danger" colspan="3" align="center">Mix</th> 3337 <th colspan="3" align="center">Positive</th> 3338 </tr> 3339 <tr data-bind="foreach: Array(5)"> 3340 <th class="bg-info" align="center">Passive</th> 3341 <th class="bg-primary" align="center">Out Reach</th> 3342 <th class="bg-purple" align="center">Total</th> 3343 </tr> 3344 </thead> 3345 <tbody data-bind="foreach: tableIPOutReach, fixedHeader: true"> 3346 <tr data-bind="css: HF == 'Total' ? 'text-bold info' : HF == 'Grand Total' ? 'text-bold success' : ''"> 3347 <!-- ko if: RowSpan > 0 --> 3348 <td style="border-right: 1px solid #ccc" data-bind="text: CSO, attr: { rowSpan: RowSpan }" align="center" valign="middle"></td> 3349 <!-- /ko --> 3350 3351 <td data-bind="text: HF"></td> 3352 3353 <td align="right" data-bind="text: TestPassive"></td> 3354 <td align="right" data-bind="text: TestOutReach"></td> 3355 <td align="right" data-bind="text: TestTotal"></td> 3356 3357 <td align="right" data-bind="text: PfPassive"></td> 3358 <td align="right" data-bind="text: PfOutReach"></td> 3359 <td align="right" data-bind="text: PfTotal"></td> 3360 3361 <td align="right" data-bind="text: PvPassive"></td> 3362 <td align="right" data-bind="text: PvOutReach"></td> 3363 <td align="right" data-bind="text: PvTotal"></td> 3364 3365 <td align="right" data-bind="text: MixPassive"></td> 3366 <td align="right" data-bind="text: MixOutReach"></td> 3367 <td align="right" data-bind="text: MixTotal"></td> 3368 3369 <td align="right" data-bind="text: PositivePassive"></td> 3370 <td align="right" data-bind="text: PositiveOutReach"></td> 3371 <td align="right" data-bind="text: PositiveTotal"></td> 3372 </tr> 3373 </tbody> 3374 </table> 3375 </div> 3376 3377 <br /> 3378 <div class="inlineblock" style="margin-bottom:5px"> 3379 <select class="form-control" data-bind="value: ipFilterDate, options: ipFilterDateList, optionsCaption: 'All Months'"></select> 3380 </div> 3381 <div class="chart-container"> 3382 <div id="chartIntenMap" class="chartbox no-margin" style="height:800px"></div> 3383 <div class="btn"> 3384 <label class="checkbox-inline checkbox-sm"> 3385 <input class="chartIntenMapCbox" specie="F" type="checkbox" checked data-bind="click: drawIntenMap" /> 3386 <span>PF</span> 3387 </label> 3388 <label class="checkbox-inline checkbox-sm"> 3389 <input class="chartIntenMapCbox" specie="V" type="checkbox" checked data-bind="click: drawIntenMap" /> 3390 <span>PV</span> 3391 </label> 3392 <label class="checkbox-inline checkbox-sm"> 3393 <input class="chartIntenMapCbox" specie="M" type="checkbox" checked data-bind="click: drawIntenMap" /> 3394 <span>Mix</span> 3395 </label> 3396 </div> 3397 </div> 3398 3399 <div data-bind="visible: $root.ip() == 2" class="chart-container" style="margin-top: 10px"> 3400 <br /> 3401 <div style="position:absolute"> 3402 <select class="form-control" data-bind="value: ipFilterDate, options: ipFilterDateList, optionsCaption: 'All Months'"></select> 3403 </div> 3404 <h3 class="text-center text-primary"> 3405 <span>Out Reach Test and Positive of MMW-IP2, DEC 2019 - </span> 3406 <span class="text-uppercase" data-bind="text: moment().add(-1, 'months').format('MMM YYYY')"></span> 3407 </h3> 3408 <div id="IP2Map" class="chartbox no-margin" style="height:800px"></div> 3409 </div> 3410 </div><!--/right-side--> 3411 </div><!--/card-->
3412 </div> 3413 </div> 3414</div> <div data-bind="visible: tab() == 'PF Map' && app.user.permiss['Dashboard'].contain('PF Map')" style="display:none"> 3415 <div class="row"> 3416 <div class="col-md-6"> 3417 <h3> 3418 <span>Number of places that have Pf and Mix Cases, </span> 3419 <span data-bind="text: String.format('{0} {1} - {2} {3}', lastSearch().from, lastSearch().fromYear, lastSearch().to, lastSearch().toYear)"></span> 3420 </h3> 3421 <table class="table color-bordered-table info-bordered-table table-striped no-margin"> 3422 <thead> 3423 <tr> 3424 <th></th> 3425 <th width="150">Province</th> 3426 <th width="150">OD</th> 3427 <th width="150">HC</th> 3428 <th width="150">Village</th> 3429 <th></th> 3430 </tr> 3431 </thead> 3432 <tbody data-bind="foreach: tablePfCount"> 3433 <tr> 3434 <td></td> 3435 <td align="center" data-bind="text: Province"></td> 3436 <td align="center" data-bind="text: OD"></td> 3437 <td align="center" data-bind="text: HF"></td> 3438 <td align="center" data-bind="text: Village"></td> 3439 <td></td> 3440 </tr> 3441 </tbody> 3442 </table> 3443 <br /> 3444 3445 <div class="chart-container"> 3446 <div id="mapPf" class="chartbox no-margin" style="height:600px"></div> 3447 </div> 3448 </div> 3449 <div class="col-md-6"> 3450 <div id="exportPfList"> 3451 <h3> 3452 <span>List of Pf and Mix Cases by Health Center, </span> 3453 <span data-bind="text: String.format('{0} {1} - {2} {3}', lastSearch().from, lastSearch().fromYear, lastSearch().to, lastSearch().toYear)"></span> 3454 </h3> 3455 <table class="table color-bordered-table info-bordered-table table-striped no-margin"> 3456 <thead> 3457 <tr> 3458 <th>#</th> 3459 <th class="text-left">Province</th> 3460 <th class="text-left">OD</th> 3461 <th class="text-left">HC</th> 3462 <th>PF + Mix</th> 3463 </tr> 3464 </thead> 3465 <tbody data-bind="foreach: tablePf, fixedHeader: true"> 3466 <tr> 3467 <td data-bind="text: $index() + 1" align="center"></td> 3468 <td data-bind="text: Name_Prov_E"></td> 3469 <td data-bind="text: Name_OD_E"></td> 3470 <td data-bind="text: Name_Facility_E"></td> 3471 <td align="center" data-bind="text: PfMix"></td> 3472 </tr> 3473 </tbody> 3474 </table> 3475 </div> 3476 </div> 3477 </div> 3478</div> <div style="width:70%; margin: 0 auto; display:none;" class="table-responsive" data-bind="visible: tab() == 'Documents'"> 3479 <!-- Filter controls --> 3480 <div class="row" style="margin-bottom: 15px;"> 3481 <div class="col-md-6"> 3482 <input type="text" class="form-control" placeholder="Search by name..." data-bind="value: searchTerm, valueUpdate: 'afterkeydown'"> 3483 </div> 3484 <div class="col-md-4"> 3485 <select class="form-control" data-bind="options: availableYears, value: selectedYear, optionsCaption: 'All Years'"></select> 3486 </div> 3487 </div> 3488 <table class="table color-bordered-table info-bordered-table table-striped box-shadow border-color rounded-corners"> 3489 <thead> 3490 <tr> 3491 <th width="35">#</th> 3492 <th>Thumbnail</th> 3493 <th>Title</th> 3494 <th>Published Year</th> 3495 <th>Language</th> 3496 <th>Action</th> 3497 </tr> 3498 </thead> 3499 <tbody data-bind="foreach: filteredFileList"> 3500 <tr> 3501 <td align="center" data-bind="text: $index() + 1 "></td> 3502 <td ><img data-bind="attr: { src: '/media/Documents/Thumbnail/' + Thumbnail}" width="39" /></td> 3503 <td class="kh" data-bind="text: Title"></td> 3504 <td align="center" data-bind="text: PublishYear"></td> 3505 <td align="center" data-bind="text: Language"></td> 3506 <td align="center"> 3507 <a data-bind="attr:{href: 'media/documents/'+FileName}" target="_blank" class="btn btn-sm btn-info"><i class="fa fa-eye"></i> View</a> 3508 <button data-bind="click: $root.downloadFile" class="btn btn-sm btn-primary"> <i class="fa fa-download"></i> Download</button> 3509 </td> 3510 </tr> 3511 </tbody> 3512 </table> 3513</div> 3514 3515 <div style="display:none;" data-bind="visible: tab() == 'App Gallery'"> 3516 <iframe style="height: 100vh; width:100%;" src="/App/gallery" title="CNM application"></iframe> 3517</div> 3518 3519 3520 3521 </div> 3522</div> 3523 3524 3525<input type="hidden" name="chartODBorder" id="chartODBorder" value="/media/Maps/chartODBorder.js?1756807510" /> 3526 3527<input type="hidden" name="chartNeighbourBorder" id="chartNeighbourBorder" value="/media/Maps/chartNeighbourBorder.js?1756807510" /> 3528 3529<input type="hidden" name="googleODBorder" id="googleODBorder" value="/media/Maps/googleODBorder.js?1756807510" /> 3530 3531<input type="hidden" name="googleODBorderAll" id="googleODBorderAll" value="/media/Maps/googleODBorderAll.js?1756807510" /> 3532 3533<input type="hidden" name="chartNeighbouringCountry" id="chartNeighbouringCountry" value="/media/Maps/chartNeighbouringCountry.js?1771683645" /> 3534
3535<script src="/media/highchart/grouped-categories.js"></script>
vendor: 2 bytes, line 3535
3535
3536<script src='/media/JavaScript/loadash.js?1756807510'></script>
3536<script src="//maps.googleapis.com/maps/api/js?key=AIzaSyCVXxd9fjjh1c2wrsRlZfyHfEkBiI4XQ8Q"></script>
vendor: 2 bytes, line 3536
3536
3537<script src="/media/JavaScript/maplabel.js"></script>
vendor: 2 bytes, line 3537
3537
3538<script src="/media/JavaScript/dom-to-image.js"></script>
3538 3539
3540<script> 3541 var isMobile = false ; 3542</script>
3542 3543
3544<script src='/media/ViewModel/Dashboard.js?1787534356'></script>
3544<script src='/media/ViewModel/Dashboard_Overview.js?1783350020'></script>
3544<script src='/media/ViewModel/Dashboard_Border.js?1772772602'></script>
3544<script src='/media/ViewModel/Dashboard_Stock.js?1783138515'></script>
3544<script src='/media/ViewModel/Dashboard_Map.js?1769931433'></script>
3544<script src='/media/ViewModel/Dashboard_Outbreak.js?1756807512'></script>
3544<script src='/media/ViewModel/Dashboard_Intensification.js?1756807512'></script>
3544<script src='/media/ViewModel/Dashboard_PFMap.js?1769931433'></script>
3544<script src='/media/ViewModel/Dashboard_Doc.js?1769931432'></script>
3544<script src='/media/ViewModel/Dashboard_App.js?1756807512'></script>
vendor: 2 bytes, line 3544
3544
3545<script> 3546 /** 3547 * sticky scroll 3548 */ 3549 document.addEventListener("DOMContentLoaded", function () { 3550 3551 el_autohide = document.querySelector('.autohide'); 3552 3553 if (el_autohide) { 3554 var last_scroll_top = 0; 3555 window.addEventListener('scroll', function () { 3556 let scroll_top = window.scrollY; 3557 if (scroll_top < last_scroll_top) { 3558 el_autohide.classList.remove('scrolled-down'); 3559 el_autohide.classList.add('scrolled-up'); 3560 } 3561 else { 3562 el_autohide.classList.remove('scrolled-up'); 3563 el_autohide.classList.add('scrolled-down'); 3564 } 3565 last_scroll_top = scroll_top; 3566 }); 3567 } 3568 }); 3569</script>
3569 </div> 3570 3571 <div id="footer"> 3572 Copyright © 2026 National Center for Parasitology Entomology and Malaria Control 3573 </div> 3574 3575 3576<input type="hidden" name="SessionUser" id="SessionUser" value="{"username":"GUEST","role":"GUEST","od":"","prov":"","rg":"","permiss":{"Dashboard":["Overview","Surveillance","Border","Map","Table","Export","CNM Outbreak Detection Tool","Intensification Plan","Stock","PF Map"]}}" /> 3577 3578<input type="hidden" name="PlaceUpdate" id="PlaceUpdate" value="{"pv":1754100671.886681,"od":1752803469.118448,"hc":1790835279.798099,"ds":1777522895.848344,"cm":1788322089.245851,"vl":1790835765.595759,"rg":1790138102.263742,"rgpv":1734492472.914603,"gp":1734492472.851656,"unit":1790136853.727765}" /> 3579
3580<input type="hidden" name="IsMobile" id="IsMobile" value="0" /> 3581 3582 3583 3584
3584<script src='/media/JavaScript/run2.js?1775894600'></script>
3584
3584<script src="/media/assetsV3/plugins/nineslider/js/nineslider.js"></script>
3584 3585</body> 3586 3587 3588</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.