update

htdocs/resources/views/base/partials/header-plain.blade.php

@@ -37,31 +37,7 @@
 							<span class="badge badge-danger badge-pill noti-icon-badge" id="notificationcount">{{ $criticalNotificationCount }}</span>
 						</a>
 						<div class="dropdown-menu dropdown-menu-right dropdown-lg" id="notifikasi-verifikasi-bell">
-							<div class="dropdown-item noti-title">
-								<h5 class="m-0">
-									<span class="float-right">
-										<a href="{{ route('criticalValueNotifications') }}" class="text-dark"><small>Lihat Semua</small></a>
-									</span>
-									Nilai Kritis
-								</h5>
-							</div>
-							<div style="max-height: 320px; overflow-y: auto;">
-								@if($criticalNotificationItems->isEmpty())
-									<div class="dropdown-item text-muted">Tidak ada sample nilai kritis yang perlu dilaporkan.</div>
-								@else
-									@foreach($criticalNotificationItems as $criticalItem)
-										<a href="{{ route('criticalValueNotificationOpen', $criticalItem->id) }}" class="dropdown-item notify-item">
-											<div class="notify-icon bg-warning"><i class="fa fa-exclamation-triangle"></i></div>
-											<p class="notify-details">
-												{{ $criticalItem->nofoto ?? '-' }} - {{ $criticalItem->nmpasien ?? 'Tanpa Nama' }}
-												<small class="text-muted">
-													Set: {{ $criticalItem->critical_set_at ? \Carbon\Carbon::parse($criticalItem->critical_set_at)->format('d-m-Y H:i:s') : '-' }}
-												</small>
-											</p>
-										</a>
-									@endforeach
-								@endif
-							</div>
+							@include('notifications.partials.critical-bell', ['count' => $criticalNotificationCount, 'items' => $criticalNotificationItems])
 						</div>
 					</li>
 					@if(Session::get('id') !== null)
@@ -272,3 +248,48 @@
 		</div>
 	</div>
 </header>
+
+@if(Session::get('id') !== null)
+	@push('script')
+	<script type="text/javascript">
+		(function () {
+			var refreshUrl = "{{ route('criticalValueNotificationSummary') }}";
+			var refreshIntervalMs = 20000;
+			var inFlight = null;
+
+			function setBadge(count) {
+				var $badge = $('#notificationcount');
+				$badge.text(count);
+				if (count > 0) $badge.show();
+				else $badge.hide();
+			}
+
+			function refreshCriticalBell() {
+				if (inFlight && inFlight.readyState !== 4) {
+					try { inFlight.abort(); } catch (e) {}
+				}
+				inFlight = $.ajax({
+					url: refreshUrl,
+					type: 'GET',
+					dataType: 'json',
+					cache: false,
+					success: function (data) {
+						var count = parseInt((data && data.count) ? data.count : 0, 10) || 0;
+						setBadge(count);
+						if (data && typeof data.menu_html === 'string') {
+							$('#notifikasi-verifikasi-bell').html(data.menu_html);
+						}
+					}
+				});
+			}
+
+			$(function () {
+				setBadge(parseInt($('#notificationcount').text(), 10) || 0);
+				refreshCriticalBell();
+				setInterval(refreshCriticalBell, refreshIntervalMs);
+				$('#notification-bell-icon').closest('.dropdown').on('shown.bs.dropdown', refreshCriticalBell);
+			});
+		})();
+	</script>
+	@endpush
+@endif