PageSourceSearch

https://mis.cnm.gov.kh/Dashboard

html cnm.gov.kh collected 2026-10-01 12:59:49 UTC 157,179 bytes, 3,588 lines download raw bytes

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">&nbsp;</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">&times;</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>&nbsp;</td>
1942				<!-- ko foreach: $root.surveillanceColumns -->
1943				<td>&nbsp;</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 &copy; 2026 National Center for Parasitology Entomology and Malaria Control
3573	</div>
3574
3575	
3576<input type="hidden" name="SessionUser" id="SessionUser" value="{&quot;username&quot;:&quot;GUEST&quot;,&quot;role&quot;:&quot;GUEST&quot;,&quot;od&quot;:&quot;&quot;,&quot;prov&quot;:&quot;&quot;,&quot;rg&quot;:&quot;&quot;,&quot;permiss&quot;:{&quot;Dashboard&quot;:[&quot;Overview&quot;,&quot;Surveillance&quot;,&quot;Border&quot;,&quot;Map&quot;,&quot;Table&quot;,&quot;Export&quot;,&quot;CNM Outbreak Detection Tool&quot;,&quot;Intensification Plan&quot;,&quot;Stock&quot;,&quot;PF Map&quot;]}}" />
3577	
3578<input type="hidden" name="PlaceUpdate" id="PlaceUpdate" value="{&quot;pv&quot;:1754100671.886681,&quot;od&quot;:1752803469.118448,&quot;hc&quot;:1790835279.798099,&quot;ds&quot;:1777522895.848344,&quot;cm&quot;:1788322089.245851,&quot;vl&quot;:1790835765.595759,&quot;rg&quot;:1790138102.263742,&quot;rgpv&quot;:1734492472.914603,&quot;gp&quot;:1734492472.851656,&quot;unit&quot;: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.