diff --git a/pages/4_Dagoverzicht.py b/pages/4_Dagoverzicht.py
new file mode 100644
index 0000000..e2e8ea4
--- /dev/null
+++ b/pages/4_Dagoverzicht.py
@@ -0,0 +1,81 @@
+import plotly.graph_objects as go
+import requests
+import streamlit as st
+from plotly.subplots import make_subplots
+
+from auth import require_auth
+from data_processing import TARGET_HIGH, TARGET_LOW
+from nightscout_client import NightscoutConfigError
+from ui_common import get_colors, load_range_data, select_period_days
+
+st.set_page_config(page_title="Glucose dashboard ā Dagoverzicht", page_icon="š", layout="wide")
+require_auth()
+
+st.title("Dagoverzicht")
+st.caption("EƩn glucosegrafiek per kalenderdag (FR4).")
+
+start, end, days = select_period_days(default_label="14 dagen")
+if days > 31:
+ st.info(
+ "Bij langere periodes wordt de pagina lang en kan laden traag zijn ā "
+ "voor het bekijken van individuele dagen is 14 of 30 dagen prettiger."
+ )
+
+try:
+ glucose, _treatments = load_range_data(start, end)
+except NightscoutConfigError as exc:
+ st.error(str(exc))
+ st.stop()
+except (requests.RequestException, ValueError) as exc:
+ st.error(f"Kon geen data ophalen van Nightscout: {exc}")
+ st.stop()
+
+if glucose.empty:
+ st.info("Geen glucosemetingen gevonden in deze periode.")
+ st.stop()
+
+colors = get_colors()
+glucose = glucose.copy()
+glucose["date"] = glucose["timestamp"].dt.date
+glucose["hour"] = glucose["timestamp"].dt.hour + glucose["timestamp"].dt.minute / 60
+
+dates = sorted(glucose["date"].unique())
+row_height = 150
+fig = make_subplots(
+ rows=len(dates),
+ cols=1,
+ shared_xaxes=True,
+ subplot_titles=[d.strftime("%A %d-%m-%Y") for d in dates],
+ vertical_spacing=min(0.4 / max(len(dates) - 1, 1), 0.05),
+)
+
+for i, day in enumerate(dates, start=1):
+ day_df = glucose[glucose["date"] == day]
+ fig.add_hrect(
+ y0=TARGET_LOW, y1=TARGET_HIGH, fillcolor=colors["band"], line_width=0, layer="below", row=i, col=1
+ )
+ fig.add_trace(
+ go.Scatter(
+ x=day_df["hour"],
+ y=day_df["mmol"],
+ mode="lines",
+ line={"color": colors["glucose"], "width": 2},
+ showlegend=False,
+ hovertemplate="%{y:.1f} mmol/L",
+ ),
+ row=i,
+ col=1,
+ )
+ fig.update_yaxes(title_text="mmol/L", gridcolor=colors["grid"], row=i, col=1)
+
+fig.update_xaxes(title_text="Uur van de dag", range=[0, 24], dtick=4, gridcolor=colors["grid"])
+fig.update_layout(
+ paper_bgcolor="rgba(0,0,0,0)",
+ plot_bgcolor="rgba(0,0,0,0)",
+ font_color=colors["text"],
+ height=row_height * len(dates),
+ showlegend=False,
+ margin={"l": 10, "r": 10, "t": 30, "b": 10},
+)
+st.plotly_chart(fig, width="stretch")
+st.caption(f"{len(dates)} dagen Ā· {len(glucose)} metingen")
diff --git a/pages/5_Hypo_Events.py b/pages/5_Hypo_Events.py
new file mode 100644
index 0000000..ee830c1
--- /dev/null
+++ b/pages/5_Hypo_Events.py
@@ -0,0 +1,45 @@
+import requests
+import streamlit as st
+
+from auth import require_auth
+from nightscout_client import NightscoutConfigError
+from reporting import LOW, VERY_LOW
+from ui_common import (
+ get_colors,
+ load_range_data,
+ render_event_level,
+ select_period_days,
+)
+
+st.set_page_config(page_title="Glucose dashboard ā Hypo events", page_icon="š", layout="wide")
+require_auth()
+
+st.title("Hypo events")
+st.caption(
+ "Detectie van hypoglykemie-events volgens de persistentieregel (FR5): een event "
+ "telt pas na >=15 minuten ononderbroken onder de drempel, en eindigt pas na "
+ ">=15 minuten ononderbroken herstel."
+)
+
+start, end, days = select_period_days(default_label="90 dagen")
+
+try:
+ glucose, _treatments = load_range_data(start, end)
+except NightscoutConfigError as exc:
+ st.error(str(exc))
+ st.stop()
+except (requests.RequestException, ValueError) as exc:
+ st.error(f"Kon geen data ophalen van Nightscout: {exc}")
+ st.stop()
+
+if glucose.empty:
+ st.info("Geen glucosemetingen gevonden in deze periode.")
+ st.stop()
+
+colors = get_colors()
+
+render_event_level(glucose, LOW, "below", f"Level 1 (<{LOW} mmol/L)", days, colors)
+st.divider()
+render_event_level(glucose, VERY_LOW, "below", f"Level 2 (<{VERY_LOW} mmol/L)", days, colors)
+
+st.caption(f"Periode: {start.strftime('%d-%m-%Y')} t/m {end.strftime('%d-%m-%Y')}")
diff --git a/pages/6_Hyper_Events.py b/pages/6_Hyper_Events.py
new file mode 100644
index 0000000..c680e18
--- /dev/null
+++ b/pages/6_Hyper_Events.py
@@ -0,0 +1,44 @@
+import requests
+import streamlit as st
+
+from auth import require_auth
+from nightscout_client import NightscoutConfigError
+from reporting import HIGH, VERY_HIGH
+from ui_common import (
+ get_colors,
+ load_range_data,
+ render_event_level,
+ select_period_days,
+)
+
+st.set_page_config(page_title="Glucose dashboard ā Hyper events", page_icon="š", layout="wide")
+require_auth()
+
+st.title("Hyper events")
+st.caption(
+ "Detectie van hyperglykemie-events volgens dezelfde persistentieregel als de "
+ "Hypo Events-pagina (FR6), symmetrisch toegepast op de bovengrenzen."
+)
+
+start, end, days = select_period_days(default_label="90 dagen")
+
+try:
+ glucose, _treatments = load_range_data(start, end)
+except NightscoutConfigError as exc:
+ st.error(str(exc))
+ st.stop()
+except (requests.RequestException, ValueError) as exc:
+ st.error(f"Kon geen data ophalen van Nightscout: {exc}")
+ st.stop()
+
+if glucose.empty:
+ st.info("Geen glucosemetingen gevonden in deze periode.")
+ st.stop()
+
+colors = get_colors()
+
+render_event_level(glucose, HIGH, "above", f"Level 1 (>{HIGH} mmol/L)", days, colors)
+st.divider()
+render_event_level(glucose, VERY_HIGH, "above", f"Level 2 (>{VERY_HIGH} mmol/L)", days, colors)
+
+st.caption(f"Periode: {start.strftime('%d-%m-%Y')} t/m {end.strftime('%d-%m-%Y')}")
diff --git a/ui_common.py b/ui_common.py
index 37b31f2..ffc136e 100644
--- a/ui_common.py
+++ b/ui_common.py
@@ -10,9 +10,12 @@ from __future__ import annotations
from datetime import date, datetime, timedelta, timezone
+import pandas as pd
+import plotly.graph_objects as go
import streamlit as st
from nightscout_client import fetch_entries_range, fetch_treatments_range
+from reporting import detect_events, summarize_events
MMOL_HOVERTEMPLATE = "%{x|%d-%m %H:%M} Ā· %{y:.1f} mmol/L"
@@ -93,3 +96,54 @@ def load_range_data(start: date, end: date):
glucose = fetch_entries_range(start, end)
treatments = fetch_treatments_range(start, end)
return glucose, treatments
+
+
+def render_event_level(
+ glucose: pd.DataFrame,
+ threshold: float,
+ direction: str,
+ level_name: str,
+ period_days: int,
+ colors: dict,
+) -> None:
+ """Render de metrics/tabel/tijdstip-histogram voor ƩƩn hypo-/hyperniveau.
+
+ Gedeeld tussen de Hypo Events- en Hyper Events-pagina's (FR5/FR6), die
+ elk twee niveaus (Level 1/Level 2) op dezelfde manier tonen.
+ """
+ events = detect_events(glucose, threshold, direction)
+ summary = summarize_events(events, period_days)
+
+ st.subheader(level_name)
+ cols = st.columns(4)
+ cols[0].metric("Aantal events", summary["count"])
+ cols[1].metric("Gem. duur", f"{summary['avg_duration_minutes']:.0f} min")
+ cols[2].metric("Langste event", f"{summary['longest_duration_minutes']:.0f} min")
+ cols[3].metric("Events/week", f"{summary['events_per_week']:.1f}")
+
+ if events.empty:
+ st.info("Geen events gevonden in deze periode.")
+ return
+
+ bar_color = colors["low"] if direction == "below" else colors["high"]
+ hours = events["start"].dt.hour
+ hour_counts = hours.value_counts().reindex(range(24), fill_value=0).sort_index()
+ fig = go.Figure(go.Bar(x=list(hour_counts.index), y=hour_counts.to_numpy(), marker_color=bar_color))
+ fig.update_layout(
+ paper_bgcolor="rgba(0,0,0,0)",
+ plot_bgcolor="rgba(0,0,0,0)",
+ font_color=colors["text"],
+ height=220,
+ margin={"l": 10, "r": 10, "t": 10, "b": 10},
+ xaxis={"title": "Uur van de dag", "dtick": 2, "gridcolor": colors["grid"]},
+ yaxis={"title": "Aantal events", "gridcolor": colors["grid"]},
+ )
+ st.plotly_chart(fig, width="stretch")
+
+ display = events.copy()
+ display["start"] = display["start"].dt.strftime("%d-%m-%Y %H:%M")
+ display["end"] = display["end"].dt.strftime("%d-%m-%Y %H:%M")
+ display = display.rename(
+ columns={"start": "Start", "end": "Einde", "duration_minutes": "Duur (min)"}
+ )
+ st.dataframe(display, width="stretch", hide_index=True)