From d6bf0c20ee38de251514228367debcc5db3c8a57 Mon Sep 17 00:00:00 2001
From: ruby0322 <ruby0322@ntu.im>
Date: Tue, 28 Jul 2026 10:48:59 +0800
Subject: [PATCH 1/5] feat(admin): date-selectable dashboard with metric
 calendar

Move staff homepage to /admin?date= with calendar metrics, attention
patient cards, and history-overview deep links so triage is not today-only.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/backend/app/api/routes/staff.py          |   72 ++
 apps/backend/app/schemas/staff_dashboard.py   |   40 +
 apps/backend/app/services/staff_dashboard.py  |  243 +++-
 .../app/services/staff_history_overview.py    |   33 +
 apps/backend/app/services/taipei_dates.py     |   10 +-
 .../backend/tests/test_staff_dashboard_api.py |    8 +
 .../tests/test_staff_today_attention_api.py   |  336 +++++
 apps/backend/tests/test_taipei_dates.py       |    9 +-
 .../_components/active-uploaders-summary.tsx  |   26 +
 .../_components/dashboard-day-calendar.tsx    |  165 +++
 .../_components/pending-bindings-summary.tsx  |   52 +
 .../_components/recent-upload-thumbs.tsx      |  134 ++
 .../admin/_components/today-patient-pool.tsx  |   50 +
 .../admin/_components/today-patient-row.tsx   |  153 +++
 .../admin/_components/today-upload-count.tsx  |   34 +
 .../_components/today-workbench-header.tsx    |   15 +
 .../history-overview/__tests__/page.test.tsx  |   63 +-
 .../clinical-period-panel.tsx                 |  240 ++++
 .../app/admin/history-overview/page.tsx       |  278 ++---
 .../history-overview/usage-trends-tab.tsx     |  240 ++++
 apps/frontend/app/admin/layout.tsx            |    8 +-
 apps/frontend/app/admin/page.tsx              | 1107 ++++-------------
 .../lib/admin/use-admin-selected-date.ts      |   60 +
 apps/frontend/lib/api/staff.ts                |   51 +
 docs/product/history-overview-api-contract.md |    7 +-
 .../2026-07-25-admin-daily-workbench-v2.md    |   30 +
 ...07-25-admin-dashboard-homepage-renovate.md |   32 +
 ...6-07-25-admin-daily-workbench-v2-design.md |  121 ++
 ...dmin-dashboard-homepage-renovate-design.md |  220 ++++
 ...-25-admin-patient-card-risk-highlight.html |  136 ++
 30 files changed, 2899 insertions(+), 1074 deletions(-)
 create mode 100644 apps/backend/tests/test_staff_today_attention_api.py
 create mode 100644 apps/frontend/app/admin/_components/active-uploaders-summary.tsx
 create mode 100644 apps/frontend/app/admin/_components/dashboard-day-calendar.tsx
 create mode 100644 apps/frontend/app/admin/_components/pending-bindings-summary.tsx
 create mode 100644 apps/frontend/app/admin/_components/recent-upload-thumbs.tsx
 create mode 100644 apps/frontend/app/admin/_components/today-patient-pool.tsx
 create mode 100644 apps/frontend/app/admin/_components/today-patient-row.tsx
 create mode 100644 apps/frontend/app/admin/_components/today-upload-count.tsx
 create mode 100644 apps/frontend/app/admin/_components/today-workbench-header.tsx
 create mode 100644 apps/frontend/app/admin/history-overview/clinical-period-panel.tsx
 create mode 100644 apps/frontend/app/admin/history-overview/usage-trends-tab.tsx
 create mode 100644 apps/frontend/lib/admin/use-admin-selected-date.ts
 create mode 100644 docs/superpowers/plans/2026-07-25-admin-daily-workbench-v2.md
 create mode 100644 docs/superpowers/plans/2026-07-25-admin-dashboard-homepage-renovate.md
 create mode 100644 docs/superpowers/specs/2026-07-25-admin-daily-workbench-v2-design.md
 create mode 100644 docs/superpowers/specs/2026-07-25-admin-dashboard-homepage-renovate-design.md
 create mode 100644 docs/superpowers/specs/assets/2026-07-25-admin-patient-card-risk-highlight.html

diff --git a/apps/backend/app/api/routes/staff.py b/apps/backend/app/api/routes/staff.py
index 0abf63a..f7acd6f 100644
--- a/apps/backend/app/api/routes/staff.py
+++ b/apps/backend/app/api/routes/staff.py
@@ -50,6 +50,9 @@
     StaffPatientUploadsResponse,
     StaffUploadQueueItem,
     StaffUploadQueueResponse,
+    StaffTodayAttentionPatientItem,
+    StaffTodayAttentionResponse,
+    StaffTodayAttentionRiskHighlight,
     StaffUploadRecord,
     StaffHistoryOverviewCalendarItem,
     StaffHistoryOverviewCalendarResponse,
@@ -76,6 +79,7 @@
     list_patient_upload_records_page,
     list_pending_bindings,
     list_staff_patients,
+    list_today_attention_patients,
     list_upload_queue,
     preview_delete_inactive_patients,
     update_pending_binding_status,
@@ -495,6 +499,71 @@ async def get_staff_upload_queue(
         session.close()
 
 
+@router.get("/v1/staff/uploads/today-attention", response_model=StaffTodayAttentionResponse)
+async def get_staff_today_attention(
+    request: Request,
+    local_date: date | None = Query(default=None),
+    credentials=Depends(bearer_scheme),
+) -> StaffTodayAttentionResponse:
+    principal = require_staff_or_admin(get_current_principal(request, credentials))
+    session = get_session(request)
+    try:
+        accessible_patient_ids = _get_accessible_patient_ids(
+            session,
+            role=principal.role,
+            identity_id=principal.identity_id,
+        )
+        today, total_uploads, rows = list_today_attention_patients(
+            session,
+            accessible_patient_ids=accessible_patient_ids,
+            local_date=local_date,
+        )
+        suspected_patients = sum(1 for row in rows if row.tier == "suspected")
+        elevated_patients = sum(1 for row in rows if row.tier == "elevated")
+        other_patients = sum(1 for row in rows if row.tier == "other")
+        return StaffTodayAttentionResponse(
+            date=today.isoformat(),
+            total_uploads=total_uploads,
+            suspected_patients=suspected_patients,
+            elevated_patients=elevated_patients,
+            other_patients=other_patients,
+            items=[
+                StaffTodayAttentionPatientItem(
+                    patient_id=row.patient.id,
+                    case_number=row.patient.case_number,
+                    full_name=row.patient.full_name,
+                    tier=row.tier,
+                    representative_upload_id=row.representative_upload_id,
+                    sort_upload_at=row.sort_upload_at,
+                    has_annotation=row.has_annotation,
+                    picture_url=row.picture_url,
+                    day_upload_count=row.day_upload_count,
+                    preview_upload_ids=row.preview_upload_ids,
+                    risk_highlight=(
+                        StaffTodayAttentionRiskHighlight(
+                            upload_id=row.risk_highlight.upload_id,
+                            screening_result=row.risk_highlight.screening_result,
+                            probability=row.risk_highlight.probability,
+                            threshold=row.risk_highlight.threshold,
+                            symptom_pain=row.risk_highlight.symptom_pain,
+                            symptom_discharge=row.risk_highlight.symptom_discharge,
+                            symptom_pus=row.risk_highlight.symptom_pus,
+                            symptom_cloudy_dialysate=row.risk_highlight.symptom_cloudy_dialysate,
+                            has_high_risk_symptoms=row.risk_highlight.has_high_risk_symptoms,
+                            symptom_aware_priority=row.risk_highlight.symptom_aware_priority,
+                            created_at=row.risk_highlight.created_at,
+                        )
+                        if row.risk_highlight is not None
+                        else None
+                    ),
+                )
+                for row in rows
+            ],
+        )
+    finally:
+        session.close()
+
+
 @router.get("/v1/staff/uploads/history-overview/days", response_model=StaffHistoryOverviewDaysResponse)
 async def get_staff_history_overview_days(
     request: Request,
@@ -680,10 +749,13 @@ async def get_staff_history_overview_calendar(
             items=[
                 StaffHistoryOverviewCalendarItem(
                     local_date=item.local_date.isoformat(),
+                    upload_count=item.upload_count,
+                    uploaded_users=item.uploaded_users,
                     risky_patient_count=item.risky_patient_count,
                     has_infection_risk=item.has_infection_risk,
                     symptom_elevated_patient_count=item.symptom_elevated_patient_count,
                     has_symptom_elevated_risk=item.has_symptom_elevated_risk,
+                    unhandled_patient_count=item.unhandled_patient_count,
                 )
                 for item in rows
             ],
diff --git a/apps/backend/app/schemas/staff_dashboard.py b/apps/backend/app/schemas/staff_dashboard.py
index 9ff1782..7b4ed1a 100644
--- a/apps/backend/app/schemas/staff_dashboard.py
+++ b/apps/backend/app/schemas/staff_dashboard.py
@@ -101,6 +101,43 @@ class StaffUploadQueueResponse(BaseModel):
     items: list[StaffUploadQueueItem]
 
 
+class StaffTodayAttentionRiskHighlight(BaseModel):
+    upload_id: int
+    screening_result: str
+    probability: float | None
+    threshold: float | None
+    symptom_pain: bool
+    symptom_discharge: bool
+    symptom_pus: bool
+    symptom_cloudy_dialysate: bool
+    has_high_risk_symptoms: bool
+    symptom_aware_priority: Literal["normal", "suspected"]
+    created_at: datetime
+
+
+class StaffTodayAttentionPatientItem(BaseModel):
+    patient_id: int
+    case_number: str
+    full_name: str | None
+    tier: Literal["suspected", "elevated", "other"]
+    representative_upload_id: int
+    sort_upload_at: datetime
+    has_annotation: bool
+    picture_url: str | None = None
+    day_upload_count: int = 0
+    preview_upload_ids: list[int] = Field(default_factory=list)
+    risk_highlight: StaffTodayAttentionRiskHighlight | None = None
+
+
+class StaffTodayAttentionResponse(BaseModel):
+    date: str
+    total_uploads: int
+    suspected_patients: int
+    elevated_patients: int
+    other_patients: int
+    items: list[StaffTodayAttentionPatientItem]
+
+
 class StaffHistoryOverviewDayItem(BaseModel):
     local_date: str
     upload_count: int
@@ -182,10 +219,13 @@ class StaffHistoryOverviewResponse(BaseModel):
 
 class StaffHistoryOverviewCalendarItem(BaseModel):
     local_date: str
+    upload_count: int = 0
+    uploaded_users: int = 0
     risky_patient_count: int
     has_infection_risk: bool
     symptom_elevated_patient_count: int
     has_symptom_elevated_risk: bool
+    unhandled_patient_count: int = 0
 
 
 class StaffHistoryOverviewCalendarResponse(BaseModel):
diff --git a/apps/backend/app/services/staff_dashboard.py b/apps/backend/app/services/staff_dashboard.py
index d44d15d..92522ad 100644
--- a/apps/backend/app/services/staff_dashboard.py
+++ b/apps/backend/app/services/staff_dashboard.py
@@ -10,8 +10,8 @@
 from sqlalchemy.orm import Session, aliased
 
 from app.db.models import AIResult, Annotation, LiffIdentity, Notification, Patient, PendingBinding, StaffPatientAssignment, Upload
-from app.services.symptoms import calendar_risk_tier
-from app.services.taipei_dates import TAIPEI_TIMEZONE, resolve_taipei_day_bounds, to_taipei_date
+from app.services.symptoms import calendar_risk_tier, has_high_risk_symptoms, symptom_aware_priority
+from app.services.taipei_dates import TAIPEI_TIMEZONE, resolve_taipei_day_bounds, resolve_taipei_day_bounds_for_date, to_taipei_date
 from app.services.upload_history import summarize_patient_upload_history
 
 
@@ -993,6 +993,245 @@ def _summarize_tiered_uploads(
     )
 
 
+@dataclass
+class TodayAttentionRiskHighlight:
+    upload_id: int
+    screening_result: str
+    probability: float | None
+    threshold: float | None
+    symptom_pain: bool
+    symptom_discharge: bool
+    symptom_pus: bool
+    symptom_cloudy_dialysate: bool
+    has_high_risk_symptoms: bool
+    symptom_aware_priority: Literal["normal", "suspected"]
+    created_at: datetime
+
+
+@dataclass
+class TodayAttentionPatientRow:
+    patient: Patient
+    tier: Literal["suspected", "elevated", "other"]
+    representative_upload_id: int
+    sort_upload_at: datetime
+    has_annotation: bool
+    picture_url: str | None
+    day_upload_count: int
+    preview_upload_ids: list[int]
+    risk_highlight: TodayAttentionRiskHighlight | None
+
+
+_TIER_SORT_RANK: dict[str, int] = {"suspected": 0, "elevated": 1, "other": 2}
+
+
+def _attention_risk_rank(
+    *,
+    screening_result: str,
+    annotation_label: str | None,
+    symptom_pain: bool,
+    symptom_pus: bool,
+    symptom_cloudy_dialysate: bool,
+) -> int:
+    """Lower rank = higher priority. Matches history-overview risk sort."""
+    if annotation_label == "confirmed_infection":
+        return 0
+    if annotation_label == "suspected":
+        return 1
+    if annotation_label == "rejected":
+        return 4
+    if annotation_label == "normal":
+        return 3
+    if screening_result == "suspected":
+        return 1
+    tier = calendar_risk_tier(
+        screening_result=screening_result,
+        annotation_label=annotation_label,
+        symptom_pain=symptom_pain,
+        symptom_pus=symptom_pus,
+        symptom_cloudy_dialysate=symptom_cloudy_dialysate,
+    )
+    if tier == "elevated":
+        return 2
+    if screening_result == "normal":
+        return 3
+    return 4
+
+
+def _load_patient_picture_urls(session: Session, *, patient_ids: set[int]) -> dict[int, str | None]:
+    if not patient_ids:
+        return {}
+    rows = session.execute(
+        select(LiffIdentity)
+        .where(LiffIdentity.patient_id.in_(patient_ids))
+        .order_by(LiffIdentity.patient_id.asc(), LiffIdentity.id.asc())
+    ).scalars()
+    result: dict[int, str | None] = {}
+    for row in rows:
+        if row.patient_id is None or row.patient_id in result:
+            continue
+        result[row.patient_id] = row.picture_url
+    return result
+
+
+def _pick_risk_highlight(
+    patient_uploads: list[tuple[Upload, AIResult, str]],
+    *,
+    latest_annotation_by_upload: dict[int, Annotation],
+) -> TodayAttentionRiskHighlight:
+    def sort_key(item: tuple[Upload, AIResult, str]) -> tuple[int, float, float, int]:
+        upload, ai_result, _ = item
+        annotation = latest_annotation_by_upload.get(upload.id)
+        rank = _attention_risk_rank(
+            screening_result=ai_result.screening_result,
+            annotation_label=annotation.label if annotation else None,
+            symptom_pain=upload.symptom_pain,
+            symptom_pus=upload.symptom_pus,
+            symptom_cloudy_dialysate=upload.symptom_cloudy_dialysate,
+        )
+        # Lowest rank first; higher probability first; earlier created_at first.
+        prob = ai_result.probability if ai_result.probability is not None else -1.0
+        return (rank, -prob, upload.created_at.timestamp(), upload.id)
+
+    upload, ai_result, _ = min(patient_uploads, key=sort_key)
+    return TodayAttentionRiskHighlight(
+        upload_id=upload.id,
+        screening_result=ai_result.screening_result,
+        probability=ai_result.probability,
+        threshold=ai_result.threshold,
+        symptom_pain=upload.symptom_pain,
+        symptom_discharge=upload.symptom_discharge,
+        symptom_pus=upload.symptom_pus,
+        symptom_cloudy_dialysate=upload.symptom_cloudy_dialysate,
+        has_high_risk_symptoms=has_high_risk_symptoms(
+            symptom_pain=upload.symptom_pain,
+            symptom_pus=upload.symptom_pus,
+            symptom_cloudy_dialysate=upload.symptom_cloudy_dialysate,
+        ),
+        symptom_aware_priority=symptom_aware_priority(
+            ai_result.screening_result,
+            symptom_pain=upload.symptom_pain,
+            symptom_pus=upload.symptom_pus,
+            symptom_cloudy_dialysate=upload.symptom_cloudy_dialysate,
+        ),
+        created_at=upload.created_at,
+    )
+
+
+def list_today_attention_patients(
+    session: Session,
+    *,
+    accessible_patient_ids: set[int] | None = None,
+    local_date: date | None = None,
+) -> tuple[date, int, list[TodayAttentionPatientRow]]:
+    """Uploaders for a Taipei day, partitioned into suspected / elevated / other with triage sort."""
+    if local_date is None:
+        today, today_start, tomorrow_start = resolve_taipei_day_bounds()
+    else:
+        today, today_start, tomorrow_start = resolve_taipei_day_bounds_for_date(local_date)
+    if accessible_patient_ids is not None and not accessible_patient_ids:
+        return today, 0, []
+
+    base_query: Select = (
+        select(Upload, AIResult, Patient)
+        .join(AIResult, AIResult.upload_id == Upload.id)
+        .join(Patient, Patient.id == Upload.patient_id)
+        .where(
+            Upload.created_at >= today_start,
+            Upload.created_at < tomorrow_start,
+            AIResult.screening_result != "rejected",
+            Patient.is_active.is_(True),
+        )
+    )
+    if accessible_patient_ids is not None:
+        base_query = base_query.where(Patient.id.in_(accessible_patient_ids))
+    rows = session.execute(base_query).all()
+    if not rows:
+        return today, 0, []
+
+    upload_ids = {upload.id for upload, _, _ in rows}
+    latest_annotation_by_upload = _load_latest_annotation_by_upload_ids(session, upload_ids=upload_ids)
+    picture_by_patient = _load_patient_picture_urls(
+        session,
+        patient_ids={patient.id for _, _, patient in rows},
+    )
+
+    uploads_by_patient: dict[int, list[tuple[Upload, AIResult, str]]] = defaultdict(list)
+    patients_by_id: dict[int, Patient] = {}
+    for upload, ai_result, patient in rows:
+        tier = _tier_for_upload(
+            upload=upload,
+            screening_result=ai_result.screening_result,
+            annotation=latest_annotation_by_upload.get(upload.id),
+        )
+        uploads_by_patient[patient.id].append((upload, ai_result, tier))
+        patients_by_id[patient.id] = patient
+
+    attention_rows: list[TodayAttentionPatientRow] = []
+    for patient_id, patient_uploads in uploads_by_patient.items():
+        has_suspected = any(tier == "suspected" for _, _, tier in patient_uploads)
+        has_elevated = any(tier == "elevated" for _, _, tier in patient_uploads)
+        day_upload_count = len(patient_uploads)
+        preview_upload_ids: list[int] = []
+        risk_highlight: TodayAttentionRiskHighlight | None = None
+
+        if has_suspected:
+            patient_tier: Literal["suspected", "elevated", "other"] = "suspected"
+            candidates = [(upload, tier) for upload, _, tier in patient_uploads if tier == "suspected"]
+            representative = min(candidates, key=lambda item: (item[0].created_at, item[0].id))[0]
+            sort_upload_at = representative.created_at
+            risk_highlight = _pick_risk_highlight(
+                patient_uploads,
+                latest_annotation_by_upload=latest_annotation_by_upload,
+            )
+        elif has_elevated:
+            patient_tier = "elevated"
+            candidates = [(upload, tier) for upload, _, tier in patient_uploads if tier == "elevated"]
+            representative = min(candidates, key=lambda item: (item[0].created_at, item[0].id))[0]
+            sort_upload_at = representative.created_at
+            risk_highlight = _pick_risk_highlight(
+                patient_uploads,
+                latest_annotation_by_upload=latest_annotation_by_upload,
+            )
+        else:
+            patient_tier = "other"
+            representative = max(
+                (upload for upload, _, _ in patient_uploads),
+                key=lambda upload: (upload.created_at, upload.id),
+            )
+            # Other tier still sorts by earliest today upload (longer wait first within tier).
+            sort_upload_at = min(upload.created_at for upload, _, _ in patient_uploads)
+            ordered = sorted(
+                (upload for upload, _, _ in patient_uploads),
+                key=lambda upload: (upload.created_at, upload.id),
+            )
+            # ≤4: return all; >4: first 3 for FE "3 + n" display.
+            limit = day_upload_count if day_upload_count <= 4 else 3
+            preview_upload_ids = [upload.id for upload in ordered[:limit]]
+
+        attention_rows.append(
+            TodayAttentionPatientRow(
+                patient=patients_by_id[patient_id],
+                tier=patient_tier,
+                representative_upload_id=representative.id,
+                sort_upload_at=sort_upload_at,
+                has_annotation=representative.id in latest_annotation_by_upload,
+                picture_url=picture_by_patient.get(patient_id),
+                day_upload_count=day_upload_count,
+                preview_upload_ids=preview_upload_ids,
+                risk_highlight=risk_highlight,
+            )
+        )
+
+    attention_rows.sort(
+        key=lambda row: (
+            _TIER_SORT_RANK[row.tier],
+            row.sort_upload_at,
+            row.patient.id,
+        )
+    )
+    return today, len(rows), attention_rows
+
+
 def get_today_suspected_summary(
     session: Session,
     *,
diff --git a/apps/backend/app/services/staff_history_overview.py b/apps/backend/app/services/staff_history_overview.py
index 74511ca..1ef8e38 100644
--- a/apps/backend/app/services/staff_history_overview.py
+++ b/apps/backend/app/services/staff_history_overview.py
@@ -25,6 +25,7 @@ class HistoryOverviewDaySummary:
     has_infection_risk: bool
     symptom_elevated_patient_count: int
     has_symptom_elevated_risk: bool
+    unhandled_patient_count: int
 
 
 @dataclass(frozen=True)
@@ -89,10 +90,13 @@ class HistoryOverviewData:
 @dataclass(frozen=True)
 class HistoryOverviewCalendarItem:
     local_date: date
+    upload_count: int
+    uploaded_users: int
     risky_patient_count: int
     has_infection_risk: bool
     symptom_elevated_patient_count: int
     has_symptom_elevated_risk: bool
+    unhandled_patient_count: int
 
 
 @dataclass(frozen=True)
@@ -217,6 +221,31 @@ def _day_patient_risk_sets(day_rows: list[_RawUploadRow]) -> tuple[set[int], set
     return suspected_patient_ids, elevated_patient_ids, rate_patient_ids
 
 
+def _count_unhandled_for_day(day_rows: list[_RawUploadRow]) -> int:
+    """Count patients whose attention tier is suspected/elevated and representative upload is unannotated.
+
+    Matches list_today_attention_patients representative selection + has_annotation semantics.
+    """
+    by_patient: dict[int, list[_RawUploadRow]] = defaultdict(list)
+    for row in day_rows:
+        if row.screening_result == "rejected":
+            continue
+        by_patient[row.patient_id].append(row)
+
+    unhandled = 0
+    for patient_rows in by_patient.values():
+        has_suspected = any(_tier_for_row(row) == "suspected" for row in patient_rows)
+        has_elevated = any(_tier_for_row(row) == "elevated" for row in patient_rows)
+        if not has_suspected and not has_elevated:
+            continue
+        target_tier = "suspected" if has_suspected else "elevated"
+        candidates = [row for row in patient_rows if _tier_for_row(row) == target_tier]
+        representative = min(candidates, key=lambda row: (normalize_datetime(row.created_at), row.upload_id))
+        if representative.annotation_label is None:
+            unhandled += 1
+    return unhandled
+
+
 def _raw_rows(session: Session, *, accessible_patient_ids: set[int] | None = None) -> list[_RawUploadRow]:
     base_query: Select = (
         select(Upload, AIResult, Patient)
@@ -297,6 +326,7 @@ def list_history_overview_days(
                 has_infection_risk=suspected_infected_users > 0,
                 symptom_elevated_patient_count=symptom_elevated_users,
                 has_symptom_elevated_risk=symptom_elevated_users > 0,
+                unhandled_patient_count=_count_unhandled_for_day(day_rows),
             )
         )
     return result
@@ -452,10 +482,13 @@ def get_history_overview_calendar_month(
     return [
         HistoryOverviewCalendarItem(
             local_date=item.local_date,
+            upload_count=item.upload_count,
+            uploaded_users=item.uploaded_users,
             risky_patient_count=item.risky_patient_count,
             has_infection_risk=item.has_infection_risk,
             symptom_elevated_patient_count=item.symptom_elevated_patient_count,
             has_symptom_elevated_risk=item.has_symptom_elevated_risk,
+            unhandled_patient_count=item.unhandled_patient_count,
         )
         for item in days
         if item.local_date.year == year and item.local_date.month == month
diff --git a/apps/backend/app/services/taipei_dates.py b/apps/backend/app/services/taipei_dates.py
index 788bc57..b53de50 100644
--- a/apps/backend/app/services/taipei_dates.py
+++ b/apps/backend/app/services/taipei_dates.py
@@ -15,9 +15,13 @@ def to_taipei_date(raw_dt: datetime) -> date:
     return normalize_datetime(raw_dt).astimezone(TAIPEI_TIMEZONE).date()
 
 
-def resolve_taipei_day_bounds(reference_dt: datetime | None = None) -> tuple[date, datetime, datetime]:
-    resolved_reference = reference_dt if reference_dt is not None else datetime.now(tz=timezone.utc)
-    local_day = normalize_datetime(resolved_reference).astimezone(TAIPEI_TIMEZONE).date()
+def resolve_taipei_day_bounds_for_date(local_day: date) -> tuple[date, datetime, datetime]:
     local_start = datetime.combine(local_day, time.min, tzinfo=TAIPEI_TIMEZONE)
     local_end = local_start + timedelta(days=1)
     return local_day, local_start.astimezone(timezone.utc), local_end.astimezone(timezone.utc)
+
+
+def resolve_taipei_day_bounds(reference_dt: datetime | None = None) -> tuple[date, datetime, datetime]:
+    resolved_reference = reference_dt if reference_dt is not None else datetime.now(tz=timezone.utc)
+    local_day = normalize_datetime(resolved_reference).astimezone(TAIPEI_TIMEZONE).date()
+    return resolve_taipei_day_bounds_for_date(local_day)
diff --git a/apps/backend/tests/test_staff_dashboard_api.py b/apps/backend/tests/test_staff_dashboard_api.py
index 57d969e..692084a 100644
--- a/apps/backend/tests/test_staff_dashboard_api.py
+++ b/apps/backend/tests/test_staff_dashboard_api.py
@@ -1401,6 +1401,10 @@ def test_staff_history_overview_endpoints_return_expected_shape(tmp_path: Path)
         assert day_0529_calendar["has_infection_risk"] is True
         assert day_0529_calendar["symptom_elevated_patient_count"] == 0
         assert day_0529_calendar["has_symptom_elevated_risk"] is False
+        assert day_0529_calendar["upload_count"] >= 1
+        assert day_0529_calendar["uploaded_users"] >= 1
+        assert "unhandled_patient_count" in day_0529_calendar
+        assert isinstance(day_0529_calendar["unhandled_patient_count"], int)
 
 
 def test_staff_history_overview_uses_linked_admin_identity_profile(tmp_path: Path) -> None:
@@ -1642,4 +1646,8 @@ def test_staff_history_overview_counts_symptom_elevated_separately(tmp_path: Pat
         assert calendar_day["has_infection_risk"] is True
         assert calendar_day["symptom_elevated_patient_count"] == 1
         assert calendar_day["has_symptom_elevated_risk"] is True
+        assert calendar_day["upload_count"] == 6
+        assert calendar_day["uploaded_users"] == 5
+        # elevated + suspected + both are risk-tier without annotation on representative.
+        assert calendar_day["unhandled_patient_count"] == 3
 
diff --git a/apps/backend/tests/test_staff_today_attention_api.py b/apps/backend/tests/test_staff_today_attention_api.py
new file mode 100644
index 0000000..55b63f0
--- /dev/null
+++ b/apps/backend/tests/test_staff_today_attention_api.py
@@ -0,0 +1,336 @@
+from __future__ import annotations
+# pyright: reportMissingImports=false
+
+from datetime import datetime, timedelta, timezone
+from pathlib import Path
+from types import SimpleNamespace
+
+from fastapi.testclient import TestClient
+
+from app.config import Settings
+from app.db.models import AIResult, Annotation, LiffIdentity, Patient, StaffPatientAssignment, Upload
+from app.main import create_app
+from tests.db_test_utils import migrated_sqlite_database_url
+
+
+def make_settings(db_path: Path) -> Settings:
+    return Settings(
+        app_name="test-staff-today-attention-api",
+        app_env="test",
+        model_url="https://example.com/model.pt",
+        model_path=Path("/tmp/model.pt"),
+        model_cache_dir=Path("/tmp"),
+        model_timeout_seconds=5.0,
+        device="cpu",
+        model_backbone="mobilenet_v3_large",
+        model_arch="baseline",
+        transfer_dropout=0.4,
+        threshold=0.5,
+        image_size=384,
+        infection_class_index=4,
+        class_names=("class_0", "class_1", "class_2", "class_3", "class_4"),
+        max_upload_mb=10,
+        log_level="INFO",
+        accepted_content_types=("image/jpeg", "image/png"),
+        cors_allowed_origins=("http://localhost:3000",),
+        cors_allowed_origin_regex=r"^https?://(?:\d{1,3}\.){3}\d{1,3}:3000$",
+        workers=1,
+        eval_hflip_tta=False,
+        database_url=migrated_sqlite_database_url(db_path),
+        s3_endpoint_url="http://localhost:8333",
+        s3_region="us-east-1",
+        s3_access_key="seaweed-access",
+        s3_secret_key="seaweed-secret",
+        s3_bucket_name="pd-care-private",
+        image_access_token_secret="test-secret",
+        image_access_token_ttl_seconds=300,
+        auth_token_secret="test-auth-secret",
+        auth_token_ttl_seconds=3600,
+        line_verify_mode="stub",
+    )
+
+
+def _taipei_today_start_utc() -> datetime:
+    taipei_tz = timezone(timedelta(hours=8))
+    taipei_today = datetime.now(tz=timezone.utc).astimezone(taipei_tz).date()
+    return datetime.combine(taipei_today, datetime.min.time(), tzinfo=taipei_tz).astimezone(timezone.utc)
+
+
+def _seed_staff(client: TestClient, *, line_user_id: str = "U_STAFF", role: str = "staff") -> int:
+    session_factory = client.app.state.db_session_factory
+    with session_factory() as session:
+        staff_identity = LiffIdentity(
+            line_user_id=line_user_id,
+            display_name="Staff",
+            picture_url=None,
+            patient_id=None,
+            role=role,
+        )
+        session.add(staff_identity)
+        session.commit()
+        session.refresh(staff_identity)
+        return staff_identity.id
+
+
+def _login_staff_token(client: TestClient, line_user_id: str = "U_STAFF") -> str:
+    response = client.post("/v1/auth/login", json={"line_id_token": f"stub:{line_user_id}"})
+    assert response.status_code == 200
+    return response.json()["access_token"]
+
+
+def _assign_staff_patient(client: TestClient, *, staff_identity_id: int, patient_id: int) -> None:
+    session_factory = client.app.state.db_session_factory
+    with session_factory() as session:
+        session.add(StaffPatientAssignment(staff_identity_id=staff_identity_id, patient_id=patient_id))
+        session.commit()
+
+
+def _seed_today_patient(
+    client: TestClient,
+    *,
+    case_number: str,
+    line_user_id: str,
+    uploads: list[tuple[timedelta, str, dict[str, bool] | None]],
+) -> tuple[int, list[int]]:
+    day_start = _taipei_today_start_utc()
+    session_factory = client.app.state.db_session_factory
+    with session_factory() as session:
+        patient = Patient(
+            case_number=case_number,
+            birth_date="1985-01-01",
+            full_name=case_number,
+            is_active=True,
+        )
+        session.add(patient)
+        session.flush()
+        session.add(
+            LiffIdentity(
+                line_user_id=line_user_id,
+                display_name=case_number,
+                picture_url=None,
+                patient_id=patient.id,
+                role="patient",
+            )
+        )
+        upload_ids: list[int] = []
+        for index, (offset, result, symptoms) in enumerate(uploads, start=1):
+            upload = Upload(
+                patient_id=patient.id,
+                object_key=f"patients/{patient.id}/uploads/{index}.jpg",
+                content_type="image/jpeg",
+                created_at=day_start + offset,
+                symptom_pain=bool(symptoms and symptoms.get("pain")),
+                symptom_pus=bool(symptoms and symptoms.get("pus")),
+                symptom_cloudy_dialysate=bool(symptoms and symptoms.get("cloudy")),
+            )
+            session.add(upload)
+            session.flush()
+            session.add(AIResult(upload_id=upload.id, screening_result=result, probability=0.8, threshold=0.5))
+            upload_ids.append(upload.id)
+        session.commit()
+        return patient.id, upload_ids
+
+
+def test_today_attention_partitions_sorts_and_marks_annotation(tmp_path: Path) -> None:
+    settings = make_settings(tmp_path / "today-attention-partition.db")
+    app = create_app(settings=settings, loaded_model=SimpleNamespace(device="cpu"))
+    with TestClient(app) as client:
+        staff_identity_id = _seed_staff(client)
+        suspected_later_id, _ = _seed_today_patient(
+            client,
+            case_number="P-SUS-LATE",
+            line_user_id="U_SUS_LATE",
+            uploads=[(timedelta(hours=4), "suspected", None)],
+        )
+        suspected_earlier_id, suspected_upload_ids = _seed_today_patient(
+            client,
+            case_number="P-SUS-EARLY",
+            line_user_id="U_SUS_EARLY",
+            uploads=[(timedelta(hours=1), "suspected", None)],
+        )
+        elevated_id, elevated_upload_ids = _seed_today_patient(
+            client,
+            case_number="P-ELEV",
+            line_user_id="U_ELEV",
+            uploads=[(timedelta(hours=2), "normal", {"pain": True})],
+        )
+        other_id, other_upload_ids = _seed_today_patient(
+            client,
+            case_number="P-OTHER",
+            line_user_id="U_OTHER",
+            uploads=[
+                (timedelta(hours=1), "normal", None),
+                (timedelta(hours=5), "normal", None),
+            ],
+        )
+        _assign_staff_patient(client, staff_identity_id=staff_identity_id, patient_id=suspected_later_id)
+        _assign_staff_patient(client, staff_identity_id=staff_identity_id, patient_id=suspected_earlier_id)
+        _assign_staff_patient(client, staff_identity_id=staff_identity_id, patient_id=elevated_id)
+        _assign_staff_patient(client, staff_identity_id=staff_identity_id, patient_id=other_id)
+
+        session_factory = client.app.state.db_session_factory
+        with session_factory() as session:
+            session.add(
+                Annotation(
+                    patient_id=suspected_earlier_id,
+                    upload_id=suspected_upload_ids[0],
+                    reviewer_identity_id=staff_identity_id,
+                    label="suspected",
+                    comment=None,
+                )
+            )
+            session.commit()
+
+        token = _login_staff_token(client)
+        response = client.get(
+            "/v1/staff/uploads/today-attention",
+            headers={"Authorization": f"Bearer {token}"},
+        )
+        assert response.status_code == 200
+        payload = response.json()
+        assert payload["total_uploads"] == 5
+        assert payload["suspected_patients"] == 2
+        assert payload["elevated_patients"] == 1
+        assert payload["other_patients"] == 1
+
+        tiers = [item["tier"] for item in payload["items"]]
+        assert tiers == ["suspected", "suspected", "elevated", "other"]
+        assert payload["items"][0]["patient_id"] == suspected_earlier_id
+        assert payload["items"][0]["has_annotation"] is True
+        assert payload["items"][1]["patient_id"] == suspected_later_id
+        assert payload["items"][1]["has_annotation"] is False
+        assert payload["items"][2]["patient_id"] == elevated_id
+        assert payload["items"][2]["representative_upload_id"] == elevated_upload_ids[0]
+        # Other tier uses latest upload as representative, earliest for sort.
+        assert payload["items"][3]["patient_id"] == other_id
+        assert payload["items"][3]["representative_upload_id"] == other_upload_ids[1]
+        assert payload["items"][3]["day_upload_count"] == 2
+        assert payload["items"][3]["preview_upload_ids"] == other_upload_ids
+        assert payload["items"][3]["risk_highlight"] is None
+        assert payload["items"][0]["risk_highlight"] is not None
+        assert payload["items"][0]["risk_highlight"]["upload_id"] == suspected_upload_ids[0]
+        assert payload["items"][0]["day_upload_count"] == 1
+
+
+def test_today_attention_local_date_filters_day(tmp_path: Path) -> None:
+    settings = make_settings(tmp_path / "today-attention-local-date.db")
+    app = create_app(settings=settings, loaded_model=SimpleNamespace(device="cpu"))
+    with TestClient(app) as client:
+        staff_identity_id = _seed_staff(client)
+        today_patient_id, _ = _seed_today_patient(
+            client,
+            case_number="P-TODAY",
+            line_user_id="U_TODAY",
+            uploads=[(timedelta(hours=2), "suspected", None)],
+        )
+        past_day_start = _taipei_today_start_utc() - timedelta(days=2)
+        session_factory = client.app.state.db_session_factory
+        with session_factory() as session:
+            patient = Patient(
+                case_number="P-PAST",
+                birth_date="1985-01-01",
+                full_name="P-PAST",
+                is_active=True,
+            )
+            session.add(patient)
+            session.flush()
+            session.add(
+                LiffIdentity(
+                    line_user_id="U_PAST",
+                    display_name="P-PAST",
+                    picture_url="https://example.com/past.png",
+                    patient_id=patient.id,
+                    role="patient",
+                )
+            )
+            upload = Upload(
+                patient_id=patient.id,
+                object_key=f"patients/{patient.id}/uploads/1.jpg",
+                content_type="image/jpeg",
+                created_at=past_day_start + timedelta(hours=3),
+            )
+            session.add(upload)
+            session.flush()
+            session.add(AIResult(upload_id=upload.id, screening_result="suspected", probability=0.9, threshold=0.5))
+            past_patient_id = patient.id
+            past_upload_id = upload.id
+            session.commit()
+
+        _assign_staff_patient(client, staff_identity_id=staff_identity_id, patient_id=today_patient_id)
+        _assign_staff_patient(client, staff_identity_id=staff_identity_id, patient_id=past_patient_id)
+
+        token = _login_staff_token(client)
+        past_date = (past_day_start.astimezone(timezone(timedelta(hours=8))).date()).isoformat()
+        response = client.get(
+            "/v1/staff/uploads/today-attention",
+            params={"local_date": past_date},
+            headers={"Authorization": f"Bearer {token}"},
+        )
+        assert response.status_code == 200
+        payload = response.json()
+        assert payload["date"] == past_date
+        assert payload["total_uploads"] == 1
+        assert payload["suspected_patients"] == 1
+        assert [item["patient_id"] for item in payload["items"]] == [past_patient_id]
+        assert payload["items"][0]["picture_url"] == "https://example.com/past.png"
+        assert payload["items"][0]["risk_highlight"]["upload_id"] == past_upload_id
+
+        empty_response = client.get(
+            "/v1/staff/uploads/today-attention",
+            params={"local_date": "2020-01-01"},
+            headers={"Authorization": f"Bearer {token}"},
+        )
+        assert empty_response.status_code == 200
+        empty_payload = empty_response.json()
+        assert empty_payload["date"] == "2020-01-01"
+        assert empty_payload["total_uploads"] == 0
+        assert empty_payload["items"] == []
+
+
+def test_today_attention_respects_staff_assignment_scope(tmp_path: Path) -> None:
+    settings = make_settings(tmp_path / "today-attention-scope.db")
+    app = create_app(settings=settings, loaded_model=SimpleNamespace(device="cpu"))
+    with TestClient(app) as client:
+        staff_identity_id = _seed_staff(client)
+        assigned_id, _ = _seed_today_patient(
+            client,
+            case_number="P-ASSIGNED",
+            line_user_id="U_ASSIGNED",
+            uploads=[(timedelta(hours=3), "suspected", None)],
+        )
+        _seed_today_patient(
+            client,
+            case_number="P-UNASSIGNED",
+            line_user_id="U_UNASSIGNED",
+            uploads=[(timedelta(hours=2), "suspected", None)],
+        )
+        _assign_staff_patient(client, staff_identity_id=staff_identity_id, patient_id=assigned_id)
+
+        token = _login_staff_token(client)
+        response = client.get(
+            "/v1/staff/uploads/today-attention",
+            headers={"Authorization": f"Bearer {token}"},
+        )
+        assert response.status_code == 200
+        payload = response.json()
+        assert payload["suspected_patients"] == 1
+        assert [item["patient_id"] for item in payload["items"]] == [assigned_id]
+
+
+def test_today_attention_empty_day(tmp_path: Path) -> None:
+    settings = make_settings(tmp_path / "today-attention-empty.db")
+    app = create_app(settings=settings, loaded_model=SimpleNamespace(device="cpu"))
+    with TestClient(app) as client:
+        _seed_staff(client)
+        token = _login_staff_token(client)
+        response = client.get(
+            "/v1/staff/uploads/today-attention",
+            headers={"Authorization": f"Bearer {token}"},
+        )
+        assert response.status_code == 200
+        payload = response.json()
+        assert payload["total_uploads"] == 0
+        assert payload["suspected_patients"] == 0
+        assert payload["elevated_patients"] == 0
+        assert payload["other_patients"] == 0
+        assert payload["items"] == []
diff --git a/apps/backend/tests/test_taipei_dates.py b/apps/backend/tests/test_taipei_dates.py
index 148d23f..3d292e2 100644
--- a/apps/backend/tests/test_taipei_dates.py
+++ b/apps/backend/tests/test_taipei_dates.py
@@ -2,7 +2,7 @@
 
 from datetime import date, datetime, timezone
 
-from app.services.taipei_dates import resolve_taipei_day_bounds, to_taipei_date
+from app.services.taipei_dates import resolve_taipei_day_bounds, resolve_taipei_day_bounds_for_date, to_taipei_date
 
 
 def test_to_taipei_date_maps_utc_boundary_to_next_local_day() -> None:
@@ -17,3 +17,10 @@ def test_resolve_taipei_day_bounds_uses_reference_datetime() -> None:
     assert local_day == date(2026, 7, 1)
     assert local_start == datetime(2026, 6, 30, 16, 0, tzinfo=timezone.utc)
     assert local_end == datetime(2026, 7, 1, 16, 0, tzinfo=timezone.utc)
+
+
+def test_resolve_taipei_day_bounds_for_date() -> None:
+    local_day, local_start, local_end = resolve_taipei_day_bounds_for_date(date(2026, 7, 20))
+    assert local_day == date(2026, 7, 20)
+    assert local_start == datetime(2026, 7, 19, 16, 0, tzinfo=timezone.utc)
+    assert local_end == datetime(2026, 7, 20, 16, 0, tzinfo=timezone.utc)
diff --git a/apps/frontend/app/admin/_components/active-uploaders-summary.tsx b/apps/frontend/app/admin/_components/active-uploaders-summary.tsx
new file mode 100644
index 0000000..394135e
--- /dev/null
+++ b/apps/frontend/app/admin/_components/active-uploaders-summary.tsx
@@ -0,0 +1,26 @@
+import Link from "next/link";
+
+type ActiveUploadersSummaryProps = {
+  activeUsers: number | null;
+  loading: boolean;
+  error: string | null;
+};
+
+export function ActiveUploadersSummary({ activeUsers, loading, error }: ActiveUploadersSummaryProps) {
+  return (
+    <p className="text-xs text-zinc-400">
+      {loading ? (
+        "近 7 日活躍上傳者載入中…"
+      ) : error ? (
+        <span className="text-zinc-400">活躍摘要暫時無法載入</span>
+      ) : (
+        <>
+          近 7 日活躍上傳者 {activeUsers ?? "—"} ·{" "}
+          <Link href="/admin/history-overview" className="hover:text-zinc-700">
+            查看區間分析 →
+          </Link>
+        </>
+      )}
+    </p>
+  );
+}
diff --git a/apps/frontend/app/admin/_components/dashboard-day-calendar.tsx b/apps/frontend/app/admin/_components/dashboard-day-calendar.tsx
new file mode 100644
index 0000000..910c935
--- /dev/null
+++ b/apps/frontend/app/admin/_components/dashboard-day-calendar.tsx
@@ -0,0 +1,165 @@
+"use client";
+
+import { ChevronLeft, ChevronRight, Image as ImageIcon, TriangleAlert, Users } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+import { buildTaipeiMonthGrid, getRelativeMonthKey } from "@/lib/utils/upload-calendar";
+
+export type DayCalendarMetrics = {
+  uploadCount: number;
+  uploadedUsers: number;
+  riskyPatients: number;
+  unhandledPatients: number;
+};
+
+type DashboardDayCalendarProps = {
+  selectedDate: string;
+  monthKey: string;
+  metricsByDate: Record<string, DayCalendarMetrics>;
+  availableDates: Set<string> | string[];
+  loading?: boolean;
+  onSelectDate: (dateKey: string) => void;
+  onMonthChange: (monthKey: string) => void;
+};
+
+function MetricChip({
+  icon,
+  value,
+  selected,
+  risk,
+}: {
+  icon: ReactNode;
+  value: number;
+  selected: boolean;
+  risk?: boolean;
+}) {
+  const muted = risk ? value <= 0 : false;
+  return (
+    <div
+      className={cn(
+        "flex aspect-square min-w-0 flex-col items-center justify-center gap-0.5 overflow-hidden rounded-lg p-1",
+        selected ? "bg-zinc-100" : "bg-white",
+        risk && !muted && "text-red-600",
+        muted && "text-zinc-300"
+      )}
+    >
+      <span className={cn("shrink-0", risk && !muted ? "text-red-600" : muted ? "text-zinc-300" : "text-zinc-400")}>
+        {icon}
+      </span>
+      <span className="text-xs font-semibold tabular-nums leading-none">{value}</span>
+    </div>
+  );
+}
+
+export function DashboardDayCalendar({
+  selectedDate,
+  monthKey,
+  metricsByDate,
+  availableDates,
+  loading,
+  onSelectDate,
+  onMonthChange,
+}: DashboardDayCalendarProps) {
+  const available = availableDates instanceof Set ? availableDates : new Set(availableDates);
+  const grid = buildTaipeiMonthGrid(monthKey);
+  const title = `${grid.year} 年 ${grid.month} 月`;
+
+  return (
+    <section className="rounded-2xl border border-zinc-200 bg-white p-5">
+      <div className="mb-3 flex items-center justify-between gap-2">
+        <button
+          type="button"
+          aria-label="上個月"
+          className="rounded-md p-1 text-zinc-500 hover:bg-zinc-100 hover:text-zinc-800"
+          onClick={() => onMonthChange(getRelativeMonthKey(monthKey, -1))}
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </button>
+        <div className="text-sm font-semibold text-zinc-700">
+          {title}
+          {loading ? <span className="ml-2 text-xs font-normal text-zinc-400">載入中…</span> : null}
+        </div>
+        <button
+          type="button"
+          aria-label="下個月"
+          className="rounded-md p-1 text-zinc-500 hover:bg-zinc-100 hover:text-zinc-800"
+          onClick={() => onMonthChange(getRelativeMonthKey(monthKey, 1))}
+        >
+          <ChevronRight className="h-4 w-4" />
+        </button>
+      </div>
+
+      <div className="mb-2 grid w-full grid-cols-7 gap-2 text-center text-[11px] text-zinc-400">
+        {["日", "一", "二", "三", "四", "五", "六"].map((label) => (
+          <div key={label}>{label}</div>
+        ))}
+      </div>
+
+      <div className="grid w-full grid-cols-7 gap-2">
+        {grid.cells.map((cell) => {
+          if (!cell.isCurrentMonth) {
+            return <div key={cell.dateKey} className="min-h-[96px]" />;
+          }
+          const metrics = metricsByDate[cell.dateKey];
+          const isAvailable = available.has(cell.dateKey);
+          const selected = selectedDate === cell.dateKey;
+          const unhandled = metrics?.unhandledPatients ?? 0;
+          const uploadCount = metrics?.uploadCount ?? 0;
+          const uploadedUsers = metrics?.uploadedUsers ?? 0;
+          const riskyPatients = metrics?.riskyPatients ?? 0;
+
+          return (
+            <button
+              key={cell.dateKey}
+              type="button"
+              disabled={!isAvailable}
+              onClick={() => onSelectDate(cell.dateKey)}
+              className={cn(
+                "flex min-h-[96px] min-w-0 flex-col rounded-xl bg-zinc-50 p-2.5 text-left transition",
+                selected && "bg-white ring-2 ring-zinc-900",
+                !isAvailable && "cursor-not-allowed border border-dashed border-zinc-200 bg-transparent opacity-60"
+              )}
+              title={
+                isAvailable
+                  ? `${cell.dateKey} · 上傳 ${uploadCount} · 人數 ${uploadedUsers} · 風險 ${riskyPatients}`
+                  : `${cell.dateKey} 無資料`
+              }
+            >
+              <div className="flex shrink-0 items-baseline justify-between gap-1">
+                <span className={cn("text-[13px] font-semibold leading-tight", selected && "font-bold")}>
+                  {cell.dayOfMonth}
+                </span>
+                {unhandled > 0 ? (
+                  <span className="min-w-0 text-right text-[9px] font-medium leading-tight text-rose-400">
+                    尚有 {unhandled} 未處理
+                  </span>
+                ) : null}
+              </div>
+              {isAvailable ? (
+                <div className="mt-auto grid w-full grid-cols-3 gap-1 pt-2">
+                  <MetricChip
+                    selected={selected}
+                    icon={<ImageIcon className="h-3.5 w-3.5" />}
+                    value={uploadCount}
+                  />
+                  <MetricChip
+                    selected={selected}
+                    icon={<Users className="h-3.5 w-3.5" />}
+                    value={uploadedUsers}
+                  />
+                  <MetricChip
+                    selected={selected}
+                    risk
+                    icon={<TriangleAlert className="h-3.5 w-3.5" />}
+                    value={riskyPatients}
+                  />
+                </div>
+              ) : null}
+            </button>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
diff --git a/apps/frontend/app/admin/_components/pending-bindings-summary.tsx b/apps/frontend/app/admin/_components/pending-bindings-summary.tsx
new file mode 100644
index 0000000..8ef236b
--- /dev/null
+++ b/apps/frontend/app/admin/_components/pending-bindings-summary.tsx
@@ -0,0 +1,52 @@
+import Link from "next/link";
+
+import type { StaffPendingBindingItem } from "@/lib/api/staff";
+
+type PendingBindingsSummaryProps = {
+  items: StaffPendingBindingItem[];
+  loading: boolean;
+  error: string | null;
+};
+
+export function PendingBindingsSummary({ items, loading, error }: PendingBindingsSummaryProps) {
+  const visible = items.slice(0, 3);
+  return (
+    <section className="rounded-xl border border-zinc-200 bg-white p-3 shadow-sm">
+      <div className="mb-2 flex items-center justify-between gap-2">
+        <h2 className="text-sm font-semibold text-zinc-900">待審綁定</h2>
+        <span className="text-xs text-zinc-500">{items.length}</span>
+      </div>
+      {loading ? <p className="py-3 text-center text-sm text-zinc-400">載入中…</p> : null}
+      {!loading && error ? <p className="py-3 text-center text-sm text-red-600">{error}</p> : null}
+      {!loading && !error && items.length === 0 ? (
+        <p className="py-3 text-center text-sm text-zinc-400">目前沒有待審核綁定。</p>
+      ) : null}
+      {!loading && !error && visible.length > 0 ? (
+        <div className="flex flex-col gap-2">
+          {visible.map((item) => (
+            <div
+              key={item.id}
+              className="flex items-center justify-between gap-2 rounded-lg border border-zinc-200 bg-zinc-50 px-2.5 py-2"
+            >
+              <div className="min-w-0">
+                <p className="truncate text-xs font-medium text-zinc-900">
+                  {item.case_number} / {item.birth_date}
+                </p>
+                <p className="truncate font-mono text-[10px] text-zinc-400">{item.line_user_id}</p>
+              </div>
+              <span className="shrink-0 text-[11px] text-zinc-500">
+                {item.candidates.length > 0 ? `${item.candidates.length} 候選` : "無候選"}
+              </span>
+            </div>
+          ))}
+        </div>
+      ) : null}
+      <Link
+        href="/admin/registration-review"
+        className="mt-2 inline-block text-xs text-zinc-500 hover:text-zinc-800"
+      >
+        前往註冊審核 →
+      </Link>
+    </section>
+  );
+}
diff --git a/apps/frontend/app/admin/_components/recent-upload-thumbs.tsx b/apps/frontend/app/admin/_components/recent-upload-thumbs.tsx
new file mode 100644
index 0000000..072a398
--- /dev/null
+++ b/apps/frontend/app/admin/_components/recent-upload-thumbs.tsx
@@ -0,0 +1,134 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+
+import type { StaffUploadQueueItem } from "@/lib/api/staff";
+import { fetchUploadImageAccess } from "@/lib/api/staff";
+import { cn } from "@/lib/utils";
+
+const VISIBLE_THUMBS = 5;
+
+function formatLocalTime(raw: string): string {
+  return new Intl.DateTimeFormat("zh-TW", {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+    timeZone: "Asia/Taipei",
+  }).format(new Date(raw));
+}
+
+function queueRisk(item: StaffUploadQueueItem): { label: string; className: string } {
+  if (item.screening_result === "suspected") {
+    return { label: "疑似", className: "bg-red-50 text-red-700" };
+  }
+  if (item.has_high_risk_symptoms && item.screening_result === "normal") {
+    return { label: "高風險", className: "bg-amber-50 text-amber-700" };
+  }
+  if (item.screening_result === "rejected") {
+    return { label: "退回", className: "bg-zinc-100 text-zinc-600" };
+  }
+  return { label: "正常", className: "bg-zinc-100 text-zinc-600" };
+}
+
+type RecentUploadThumbsProps = {
+  items: StaffUploadQueueItem[];
+  loading: boolean;
+  error: string | null;
+};
+
+export function RecentUploadThumbs({ items, loading, error }: RecentUploadThumbsProps) {
+  const visible = useMemo(() => items.slice(0, VISIBLE_THUMBS), [items]);
+  const overflow = Math.max(0, items.length - VISIBLE_THUMBS);
+  const [imageUrlById, setImageUrlById] = useState<Record<number, string>>({});
+  const [imageErrorById, setImageErrorById] = useState<Record<number, boolean>>({});
+
+  useEffect(() => {
+    const missing = visible.filter((item) => !imageUrlById[item.upload_id] && !imageErrorById[item.upload_id]);
+    if (missing.length === 0) {
+      return;
+    }
+    let cancelled = false;
+    void Promise.allSettled(missing.map((item) => fetchUploadImageAccess(item.upload_id))).then((results) => {
+      if (cancelled) {
+        return;
+      }
+      setImageUrlById((current) => {
+        const next = { ...current };
+        results.forEach((result, index) => {
+          if (result.status === "fulfilled") {
+            next[missing[index].upload_id] = result.value.image_url;
+          }
+        });
+        return next;
+      });
+      setImageErrorById((current) => {
+        const next = { ...current };
+        results.forEach((result, index) => {
+          if (result.status === "rejected") {
+            next[missing[index].upload_id] = true;
+          }
+        });
+        return next;
+      });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [visible, imageUrlById, imageErrorById]);
+
+  return (
+    <section className="rounded-xl border border-zinc-200 bg-white p-3 shadow-sm">
+      <div className="mb-2 flex items-center justify-between gap-2">
+        <h2 className="text-sm font-semibold text-zinc-900">最新上傳</h2>
+        <Link href="/admin/review-fast" className="text-xs text-zinc-500 hover:text-zinc-800">
+          極速審核 →
+        </Link>
+      </div>
+      {loading ? <p className="py-4 text-center text-sm text-zinc-400">載入中…</p> : null}
+      {!loading && error ? <p className="py-4 text-center text-sm text-red-600">{error}</p> : null}
+      {!loading && !error && items.length === 0 ? (
+        <p className="py-4 text-center text-sm text-zinc-400">目前沒有上傳資料。</p>
+      ) : null}
+      {!loading && !error && items.length > 0 ? (
+        <div className="grid grid-cols-3 gap-1.5">
+          {visible.map((item) => {
+            const risk = queueRisk(item);
+            const imageUrl = imageUrlById[item.upload_id];
+            const imageError = imageErrorById[item.upload_id] ?? false;
+            return (
+              <Link
+                key={item.upload_id}
+                href={`/admin/patients/${item.patient_id}`}
+                className="group relative aspect-square overflow-hidden rounded-lg bg-zinc-100 ring-1 ring-zinc-200 transition hover:ring-zinc-400"
+              >
+                {imageUrl ? (
+                  <Image src={imageUrl} alt="" fill unoptimized className="object-cover" />
+                ) : (
+                  <div className="flex h-full items-center justify-center text-[10px] text-zinc-400">
+                    {imageError ? "失敗" : "…"}
+                  </div>
+                )}
+                <span className={cn("absolute left-1 top-1 rounded-full px-1.5 py-0.5 text-[10px] font-medium", risk.className)}>
+                  {risk.label}
+                </span>
+                <span className="absolute bottom-1 right-1 rounded bg-zinc-900/75 px-1.5 py-0.5 text-[10px] text-white">
+                  {formatLocalTime(item.created_at)}
+                </span>
+              </Link>
+            );
+          })}
+          {overflow > 0 ? (
+            <Link
+              href="/admin/history-overview"
+              className="flex aspect-square items-center justify-center rounded-lg border border-dashed border-zinc-300 bg-zinc-50 text-sm font-semibold text-zinc-600 hover:bg-zinc-100"
+            >
+              +{overflow}
+            </Link>
+          ) : null}
+        </div>
+      ) : null}
+    </section>
+  );
+}
diff --git a/apps/frontend/app/admin/_components/today-patient-pool.tsx b/apps/frontend/app/admin/_components/today-patient-pool.tsx
new file mode 100644
index 0000000..e56ccfd
--- /dev/null
+++ b/apps/frontend/app/admin/_components/today-patient-pool.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import type { StaffTodayAttentionPatientItem } from "@/lib/api/staff";
+
+import { TodayPatientRow } from "./today-patient-row";
+
+type TodayPatientPoolProps = {
+  loading: boolean;
+  error: string | null;
+  suspectedPatients: number;
+  elevatedPatients: number;
+  otherPatients: number;
+  items: StaffTodayAttentionPatientItem[];
+  dayScopeLabel: string;
+  isTodaySelected: boolean;
+};
+
+export function TodayPatientPool({
+  loading,
+  error,
+  suspectedPatients,
+  elevatedPatients,
+  otherPatients,
+  items,
+  dayScopeLabel,
+  isTodaySelected,
+}: TodayPatientPoolProps) {
+  return (
+    <section className="rounded-xl border border-dashed border-zinc-300 bg-zinc-50/80 p-3">
+      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
+        <h2 className="text-sm font-semibold text-zinc-900">{dayScopeLabel}上傳病患</h2>
+        <p className="text-xs text-zinc-500">
+          疑似 {suspectedPatients} · 高風險 {elevatedPatients} · 其餘 {otherPatients}
+        </p>
+      </div>
+      {loading ? <p className="py-6 text-center text-sm text-zinc-400">載入中…</p> : null}
+      {!loading && error ? <p className="py-6 text-center text-sm text-red-600">{error}</p> : null}
+      {!loading && !error && items.length === 0 ? (
+        <p className="py-6 text-center text-sm text-zinc-400">{dayScopeLabel}尚無上傳病患。</p>
+      ) : null}
+      {!loading && !error && items.length > 0 ? (
+        <div className="grid grid-cols-1 gap-2 lg:grid-cols-2 xl:grid-cols-3">
+          {items.map((item) => (
+            <TodayPatientRow key={item.patient_id} item={item} isTodaySelected={isTodaySelected} />
+          ))}
+        </div>
+      ) : null}
+    </section>
+  );
+}
diff --git a/apps/frontend/app/admin/_components/today-patient-row.tsx b/apps/frontend/app/admin/_components/today-patient-row.tsx
new file mode 100644
index 0000000..61fd8f2
--- /dev/null
+++ b/apps/frontend/app/admin/_components/today-patient-row.tsx
@@ -0,0 +1,153 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+
+import { PersonAvatar } from "@/app/admin/patient-assignment/person-avatar";
+import type { StaffTodayAttentionPatientItem, StaffTodayAttentionRiskHighlight } from "@/lib/api/staff";
+import { fetchUploadImageAccess } from "@/lib/api/staff";
+import { activeSymptomLabels } from "@/lib/symptoms";
+import { cn } from "@/lib/utils";
+
+function formatTime(raw: string): string {
+  return new Intl.DateTimeFormat("zh-TW", {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+    timeZone: "Asia/Taipei",
+  }).format(new Date(raw));
+}
+
+function statusLabel(item: StaffTodayAttentionPatientItem, isTodaySelected: boolean): {
+  text: string;
+  className: string;
+} {
+  if (item.tier === "other") {
+    return {
+      text: isTodaySelected ? "今日已上傳" : "當日已上傳",
+      className: "text-zinc-500",
+    };
+  }
+  if (item.has_annotation) {
+    return { text: "已註解", className: "text-green-600" };
+  }
+  return { text: "未處理", className: "text-red-600" };
+}
+
+function riskMainLine(highlight: StaffTodayAttentionRiskHighlight): string {
+  if (highlight.screening_result === "suspected") {
+    const pct =
+      highlight.probability != null ? ` · AI ${Math.round(highlight.probability * 100)}%` : "";
+    return `suspected${pct}`;
+  }
+  return "症狀高風險";
+}
+
+function UploadThumb({ uploadId }: { uploadId: number }) {
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+  const [imageError, setImageError] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    void fetchUploadImageAccess(uploadId)
+      .then((result) => {
+        if (!cancelled) {
+          setImageUrl(result.image_url);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setImageError(true);
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [uploadId]);
+
+  return (
+    <div className="relative h-full w-full overflow-hidden rounded-md bg-zinc-100 ring-1 ring-zinc-200">
+      {imageUrl ? (
+        <Image src={imageUrl} alt="" fill unoptimized className="object-cover" />
+      ) : (
+        <div className="flex h-full items-center justify-center text-[10px] text-zinc-400">
+          {imageError ? "失敗" : "…"}
+        </div>
+      )}
+    </div>
+  );
+}
+
+type TodayPatientRowProps = {
+  item: StaffTodayAttentionPatientItem;
+  isTodaySelected: boolean;
+};
+
+export function TodayPatientRow({ item, isTodaySelected }: TodayPatientRowProps) {
+  const name = item.full_name || item.case_number;
+  const status = statusLabel(item, isTodaySelected);
+  const highlight = item.risk_highlight;
+  const isRiskTier = item.tier === "suspected" || item.tier === "elevated";
+
+  const symptomLine =
+    highlight != null
+      ? activeSymptomLabels({
+          pain: highlight.symptom_pain,
+          discharge: highlight.symptom_discharge,
+          pus: highlight.symptom_pus,
+          cloudyDialysate: highlight.symptom_cloudy_dialysate,
+        }).join("、")
+      : "";
+
+  const previewIds = item.preview_upload_ids ?? [];
+  const overflow =
+    !isRiskTier && item.day_upload_count > 4 ? item.day_upload_count - Math.min(previewIds.length, 3) : 0;
+
+  return (
+    <Link
+      href={`/admin/patients/${item.patient_id}`}
+      className="flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3 transition hover:border-zinc-400"
+    >
+      <div className="flex items-start gap-2.5">
+        <PersonAvatar name={name} pictureUrl={item.picture_url} size="lg" />
+        <div className="min-w-0 flex-1">
+          <p className="truncate text-sm font-semibold text-zinc-900">{name}</p>
+          <p className="mt-0.5 truncate text-xs text-zinc-500">
+            當日 {item.day_upload_count} 張上傳
+            <span className="mx-1 text-zinc-300">·</span>
+            <span className={cn(status.className)}>{status.text}</span>
+          </p>
+        </div>
+      </div>
+
+      {isRiskTier && highlight ? (
+        <div className="flex h-14 overflow-hidden rounded-lg bg-zinc-50 ring-1 ring-zinc-200">
+          <div className="relative h-14 w-14 shrink-0">
+            <UploadThumb uploadId={highlight.upload_id} />
+          </div>
+          <div className="min-w-0 flex-1 px-2.5 py-1.5">
+            <p className="text-[10px] text-zinc-400">最高風險 · {formatTime(highlight.created_at)}</p>
+            <p className="truncate text-xs font-medium text-zinc-700">{riskMainLine(highlight)}</p>
+            {symptomLine ? <p className="truncate text-[11px] text-zinc-500">{symptomLine}</p> : null}
+          </div>
+        </div>
+      ) : null}
+
+      {!isRiskTier && previewIds.length > 0 ? (
+        <div className="flex h-14 gap-1.5">
+          {previewIds.slice(0, overflow > 0 ? 3 : 4).map((uploadId) => (
+            <div key={uploadId} className="h-14 w-14 shrink-0">
+              <UploadThumb uploadId={uploadId} />
+            </div>
+          ))}
+          {overflow > 0 ? (
+            <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-md bg-zinc-100 text-xs font-semibold text-zinc-600 ring-1 ring-zinc-200">
+              +{overflow}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </Link>
+  );
+}
diff --git a/apps/frontend/app/admin/_components/today-upload-count.tsx b/apps/frontend/app/admin/_components/today-upload-count.tsx
new file mode 100644
index 0000000..eb82b12
--- /dev/null
+++ b/apps/frontend/app/admin/_components/today-upload-count.tsx
@@ -0,0 +1,34 @@
+import Link from "next/link";
+
+type TodayUploadCountProps = {
+  totalUploads: number | null;
+  loading?: boolean;
+  dayScopeLabel: string;
+  selectedDate: string;
+};
+
+export function TodayUploadCount({
+  totalUploads,
+  loading,
+  dayScopeLabel,
+  selectedDate,
+}: TodayUploadCountProps) {
+  return (
+    <section className="rounded-xl border border-zinc-200 bg-white p-3 shadow-sm">
+      <div className="flex items-start justify-between gap-2">
+        <div>
+          <p className="text-xs text-zinc-500">{dayScopeLabel}上傳</p>
+          <p className="mt-1 text-2xl font-semibold text-zinc-900">
+            {loading ? "…" : (totalUploads ?? "—")}
+          </p>
+        </div>
+        <Link
+          href={`/admin/history-overview?date=${encodeURIComponent(selectedDate)}&tab=clinical`}
+          className="text-xs text-zinc-400 hover:text-zinc-700"
+        >
+          完整日檢視 →
+        </Link>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/frontend/app/admin/_components/today-workbench-header.tsx b/apps/frontend/app/admin/_components/today-workbench-header.tsx
new file mode 100644
index 0000000..e3e7627
--- /dev/null
+++ b/apps/frontend/app/admin/_components/today-workbench-header.tsx
@@ -0,0 +1,15 @@
+type TodayWorkbenchHeaderProps = {
+  selectedDate: string;
+  dayScopeLabel: string;
+};
+
+export function TodayWorkbenchHeader({ selectedDate, dayScopeLabel }: TodayWorkbenchHeaderProps) {
+  return (
+    <header>
+      <h1 className="text-xl font-semibold text-zinc-900">儀表板</h1>
+      <p className="mt-1 text-sm text-zinc-500">
+        {selectedDate} · {dayScopeLabel}需關注的病患與工作佇列
+      </p>
+    </header>
+  );
+}
diff --git a/apps/frontend/app/admin/history-overview/__tests__/page.test.tsx b/apps/frontend/app/admin/history-overview/__tests__/page.test.tsx
index d12e363..feeaeb3 100644
--- a/apps/frontend/app/admin/history-overview/__tests__/page.test.tsx
+++ b/apps/frontend/app/admin/history-overview/__tests__/page.test.tsx
@@ -3,7 +3,6 @@ import { fireEvent, render, screen, waitFor, within } from "@testing-library/rea
 import AdminHistoryOverviewPage from "@/app/admin/history-overview/page";
 import {
   fetchHistoryOverview,
-  fetchHistoryOverviewCalendar,
   fetchHistoryOverviewDays,
   fetchUploadImageAccess,
   StaffHistoryOverviewResponse,
@@ -20,6 +19,15 @@ jest.mock("next/image", () => ({
   },
 }));
 
+const mockReplace = jest.fn();
+const mockSearchParams = new URLSearchParams();
+
+jest.mock("next/navigation", () => ({
+  useRouter: () => ({ replace: mockReplace }),
+  usePathname: () => "/admin/history-overview",
+  useSearchParams: () => mockSearchParams,
+}));
+
 jest.mock("sonner", () => ({
   toast: {
     success: jest.fn(),
@@ -30,11 +38,18 @@ jest.mock("sonner", () => ({
 jest.mock("@/lib/api/staff", () => ({
   fetchHistoryOverviewDays: jest.fn(),
   fetchHistoryOverview: jest.fn(),
-  fetchHistoryOverviewCalendar: jest.fn(),
   fetchUploadImageAccess: jest.fn(),
   upsertUploadAnnotation: jest.fn(),
 }));
 
+jest.mock("@/app/admin/history-overview/clinical-period-panel", () => ({
+  ClinicalPeriodPanel: () => <div data-testid="clinical-period-panel">period</div>,
+}));
+
+jest.mock("@/app/admin/history-overview/usage-trends-tab", () => ({
+  UsageTrendsTab: () => <div data-testid="usage-trends-tab">usage</div>,
+}));
+
 class MockIntersectionObserver {
   observe = jest.fn();
   unobserve = jest.fn();
@@ -136,22 +151,21 @@ describe("AdminHistoryOverviewPage grouped patient navigation", () => {
       ],
     });
     (fetchHistoryOverview as jest.Mock).mockResolvedValue(makeOverviewResponse());
-    (fetchHistoryOverviewCalendar as jest.Mock).mockResolvedValue({
-      year: 2026,
-      month: 7,
-      items: [
-        {
-          local_date: "2026-07-10",
-          risky_patient_count: 1,
-          has_infection_risk: true,
-          symptom_elevated_patient_count: 0,
-          has_symptom_elevated_risk: false,
-        },
-      ],
-    });
     (fetchUploadImageAccess as jest.Mock).mockResolvedValue({ image_url: "/mock-upload.jpg" });
   });
 
+  test("shows clinical period panel and dashboard date link without month calendar", async () => {
+    render(<AdminHistoryOverviewPage />);
+
+    expect(await screen.findByTestId("clinical-period-panel")).toBeInTheDocument();
+    expect(screen.getByText("檢視日期")).toBeInTheDocument();
+    expect(screen.getByRole("link", { name: "在儀表板變更日期 →" })).toHaveAttribute(
+      "href",
+      "/admin?date=2026-07-10"
+    );
+    expect(screen.queryByText("月曆風險分布")).not.toBeInTheDocument();
+  });
+
   test("links grouped avatar and patient name to the staff patient detail page", async () => {
     render(<AdminHistoryOverviewPage />);
 
@@ -318,23 +332,10 @@ describe("AdminHistoryOverviewPage symptom elevated risk", () => {
         ],
       })
     );
-    (fetchHistoryOverviewCalendar as jest.Mock).mockResolvedValue({
-      year: 2026,
-      month: 7,
-      items: [
-        {
-          local_date: "2026-07-10",
-          risky_patient_count: 0,
-          has_infection_risk: false,
-          symptom_elevated_patient_count: 1,
-          has_symptom_elevated_risk: true,
-        },
-      ],
-    });
     (fetchUploadImageAccess as jest.Mock).mockResolvedValue({ image_url: "/mock-upload.jpg" });
   });
 
-  test("shows elevated KPI and orange calendar tone when only symptom elevated risk is present", async () => {
+  test("shows elevated KPI when only symptom elevated risk is present", async () => {
     render(<AdminHistoryOverviewPage />);
 
     expect(await screen.findByText("症狀高風險人數")).toBeInTheDocument();
@@ -342,8 +343,6 @@ describe("AdminHistoryOverviewPage symptom elevated risk", () => {
       const card = screen.getByText("症狀高風險人數").closest("div");
       expect(card).toHaveTextContent("1");
     });
-
-    const elevatedDay = await screen.findByTitle("2026-07-10 症狀高風險 1");
-    expect(elevatedDay.className).toContain("bg-orange-200");
+    expect(screen.queryByText("月曆風險分布")).not.toBeInTheDocument();
   });
 });
diff --git a/apps/frontend/app/admin/history-overview/clinical-period-panel.tsx b/apps/frontend/app/admin/history-overview/clinical-period-panel.tsx
new file mode 100644
index 0000000..2eea6e7
--- /dev/null
+++ b/apps/frontend/app/admin/history-overview/clinical-period-panel.tsx
@@ -0,0 +1,240 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import clsx from "clsx";
+import { Bar, BarChart, CartesianGrid, Cell, Pie, PieChart, XAxis, YAxis } from "recharts";
+
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/components/ui/chart";
+import { getElevatedUserKpi, getSuspectedKpi } from "@/lib/admin/dashboard-kpi";
+import { getReadableApiError } from "@/lib/api/client";
+import { fetchAdminSuspectedSummary, fetchStaffPatients } from "@/lib/api/staff";
+
+const PERIOD_OPTIONS = ["today", 1, 2, 3, 6, 12, 24, 36, 60] as const;
+type Period = (typeof PERIOD_OPTIONS)[number];
+type ChartType = "bar" | "pie";
+
+const todayChartConfig = {
+  count: { label: "筆數" },
+  suspected: { label: "疑似感染", color: "#dc2626" },
+  elevated: { label: "症狀高風險", color: "#f97316" },
+  normal: { label: "正常", color: "#16a34a" },
+  risk: { label: "風險合計", color: "#dc2626" },
+} satisfies ChartConfig;
+
+export function ClinicalPeriodPanel() {
+  const [months, setMonths] = useState<Period>(1);
+  const [riskChartMode, setRiskChartMode] = useState<"split" | "aggregate">("split");
+  const [chartType, setChartType] = useState<ChartType>("bar");
+  const [patientCount, setPatientCount] = useState(0);
+  const [riskSummary, setRiskSummary] = useState<{
+    total_uploads: number;
+    suspected_uploads: number;
+    symptom_elevated_uploads: number;
+    suspected_users: number;
+    symptom_elevated_users: number;
+    normal_uploads: number;
+    suspected_ratio: number;
+  } | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const queryMonths = months === "today" ? 1 : months;
+
+  useEffect(() => {
+    let cancelled = false;
+    async function load() {
+      setLoading(true);
+      setError(null);
+      try {
+        const [patientsData, summary] = await Promise.all([
+          fetchStaffPatients({
+            months: queryMonths,
+            infectionStatus: "all",
+            isActiveFilter: "active",
+            sortKey: "latest_upload",
+            sortDir: "desc",
+            limit: 1,
+          }),
+          months === "today"
+            ? fetchAdminSuspectedSummary({ isActiveFilter: "active" })
+            : fetchAdminSuspectedSummary({ months, isActiveFilter: "active" }),
+        ]);
+        if (cancelled) {
+          return;
+        }
+        setPatientCount(patientsData.total_patients);
+        setRiskSummary(summary);
+      } catch (err) {
+        if (!cancelled) {
+          setError(getReadableApiError(err));
+          setRiskSummary(null);
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    }
+    void load();
+    return () => {
+      cancelled = true;
+    };
+  }, [months, queryMonths]);
+
+  const riskChartData = useMemo(() => {
+    const suspected = riskSummary?.suspected_uploads ?? 0;
+    const elevated = riskSummary?.symptom_elevated_uploads ?? 0;
+    const normal = riskSummary?.normal_uploads ?? 0;
+    if (riskChartMode === "aggregate") {
+      return [
+        { key: "risk", label: "風險合計", count: suspected + elevated, fill: "#dc2626" },
+        { key: "normal", label: "正常", count: normal, fill: "#16a34a" },
+      ];
+    }
+    return [
+      { key: "suspected", label: "疑似感染", count: suspected, fill: "#dc2626" },
+      { key: "elevated", label: "症狀高風險", count: elevated, fill: "#f97316" },
+      { key: "normal", label: "正常", count: normal, fill: "#16a34a" },
+    ];
+  }, [riskChartMode, riskSummary]);
+
+  const riskChartRatio = useMemo(() => {
+    if (!riskSummary || riskSummary.total_uploads <= 0) {
+      return 0;
+    }
+    if (riskChartMode === "aggregate") {
+      return (riskSummary.suspected_uploads + riskSummary.symptom_elevated_uploads) / riskSummary.total_uploads;
+    }
+    return riskSummary.suspected_ratio;
+  }, [riskChartMode, riskSummary]);
+
+  const suspectedKpi = getSuspectedKpi(months, riskSummary?.suspected_users);
+  const elevatedKpi = getElevatedUserKpi(months, riskSummary?.symptom_elevated_users);
+  const uploadLabel = months === "today" ? "今日上傳次數" : `${months} 月上傳次數`;
+  const chartTitle = months === "today" ? "今日疑似感染" : `${months} 月疑似感染`;
+
+  return (
+    <section className="space-y-3 rounded-xl border border-zinc-200 bg-white p-4">
+      <div className="flex flex-wrap gap-1.5">
+        {PERIOD_OPTIONS.map((option) => (
+          <button
+            key={String(option)}
+            type="button"
+            onClick={() => setMonths(option)}
+            className={clsx(
+              "rounded-lg px-2.5 py-1 text-xs font-medium",
+              months === option ? "bg-zinc-900 text-white" : "border border-zinc-200 text-zinc-600 hover:bg-zinc-50"
+            )}
+          >
+            {option === "today" ? "今日" : `${option} 月`}
+          </button>
+        ))}
+      </div>
+
+      {loading ? <p className="text-sm text-zinc-400">載入區間指標…</p> : null}
+      {error ? <p className="text-sm text-zinc-500">{error}</p> : null}
+
+      {!loading && !error ? (
+        <>
+          <div className="grid grid-cols-2 gap-2 md:grid-cols-4">
+            <div className="rounded-lg border border-zinc-200 bg-zinc-50 p-3">
+              <p className="text-xs text-zinc-500">{suspectedKpi.label}</p>
+              <p className="mt-1 text-xl font-semibold text-zinc-900">{suspectedKpi.value}</p>
+            </div>
+            <div className="rounded-lg border border-zinc-200 bg-zinc-50 p-3">
+              <p className="text-xs text-zinc-500">{elevatedKpi.label}</p>
+              <p className="mt-1 text-xl font-semibold text-zinc-900">{elevatedKpi.value}</p>
+            </div>
+            <div className="rounded-lg border border-zinc-200 bg-zinc-50 p-3">
+              <p className="text-xs text-zinc-500">{uploadLabel}</p>
+              <p className="mt-1 text-xl font-semibold text-zinc-900">{riskSummary?.total_uploads ?? 0}</p>
+            </div>
+            <div className="rounded-lg border border-zinc-200 bg-zinc-50 p-3">
+              <p className="text-xs text-zinc-500">篩選病患數</p>
+              <p className="mt-1 text-xl font-semibold text-zinc-900">{patientCount}</p>
+            </div>
+          </div>
+
+          <div className="rounded-lg border border-zinc-200 p-3">
+            <div className="mb-2 flex flex-wrap items-center justify-between gap-2">
+              <h3 className="text-sm font-medium text-zinc-900">{chartTitle}</h3>
+              <div className="flex flex-wrap items-center gap-2 text-xs">
+                <div className="flex items-center gap-1 rounded-lg border border-zinc-200 p-1">
+                  <button
+                    type="button"
+                    className={clsx("rounded px-2 py-1", riskChartMode === "split" ? "bg-zinc-900 text-white" : "text-zinc-600")}
+                    onClick={() => setRiskChartMode("split")}
+                  >
+                    分開
+                  </button>
+                  <button
+                    type="button"
+                    className={clsx(
+                      "rounded px-2 py-1",
+                      riskChartMode === "aggregate" ? "bg-zinc-900 text-white" : "text-zinc-600"
+                    )}
+                    onClick={() => setRiskChartMode("aggregate")}
+                  >
+                    合計
+                  </button>
+                </div>
+                <div className="flex items-center gap-1 rounded-lg border border-zinc-200 p-1">
+                  <button
+                    type="button"
+                    className={clsx("rounded px-2 py-1", chartType === "bar" ? "bg-zinc-900 text-white" : "text-zinc-600")}
+                    onClick={() => setChartType("bar")}
+                  >
+                    長條
+                  </button>
+                  <button
+                    type="button"
+                    className={clsx("rounded px-2 py-1", chartType === "pie" ? "bg-zinc-900 text-white" : "text-zinc-600")}
+                    onClick={() => setChartType("pie")}
+                  >
+                    圓餅
+                  </button>
+                </div>
+              </div>
+            </div>
+            <p className="mb-2 text-xs text-zinc-500">
+              {riskChartMode === "aggregate" ? "風險比例" : "疑似比例"} {(riskChartRatio * 100).toFixed(1)}%（共{" "}
+              {riskSummary?.total_uploads ?? 0} 筆）
+            </p>
+            <ChartContainer className="h-64 w-full" config={todayChartConfig}>
+              {chartType === "bar" ? (
+                <BarChart data={riskChartData}>
+                  <CartesianGrid vertical={false} />
+                  <XAxis dataKey="label" tickLine={false} axisLine={false} />
+                  <YAxis allowDecimals={false} tickLine={false} axisLine={false} />
+                  <ChartTooltip content={<ChartTooltipContent />} />
+                  <Bar dataKey="count" radius={6}>
+                    {riskChartData.map((item) => (
+                      <Cell key={item.key} fill={item.fill} />
+                    ))}
+                  </Bar>
+                </BarChart>
+              ) : (
+                <PieChart>
+                  <ChartTooltip content={<ChartTooltipContent />} />
+                  <Pie data={riskChartData} dataKey="count" nameKey="label" outerRadius={90}>
+                    {riskChartData.map((item) => (
+                      <Cell key={item.key} fill={item.fill} />
+                    ))}
+                  </Pie>
+                  <ChartLegend content={<ChartLegendContent />} />
+                </PieChart>
+              )}
+            </ChartContainer>
+          </div>
+        </>
+      ) : null}
+    </section>
+  );
+}
diff --git a/apps/frontend/app/admin/history-overview/page.tsx b/apps/frontend/app/admin/history-overview/page.tsx
index cc528e4..5ab1d26 100644
--- a/apps/frontend/app/admin/history-overview/page.tsx
+++ b/apps/frontend/app/admin/history-overview/page.tsx
@@ -2,14 +2,14 @@
 
 import Image from "next/image";
 import Link from "next/link";
-import { CalendarDays, ChevronLeft, ChevronRight, RefreshCw, X } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { ChevronLeft, ChevronRight, RefreshCw, X } from "lucide-react";
+import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 
 import { getReadableApiError } from "@/lib/api/client";
 import {
   fetchHistoryOverview,
-  fetchHistoryOverviewCalendar,
   fetchHistoryOverviewDays,
   fetchUploadImageAccess,
   StaffAnnotationItem,
@@ -17,10 +17,14 @@ import {
   StaffHistoryOverviewUploadItem,
   upsertUploadAnnotation,
 } from "@/lib/api/staff";
-import { buildTaipeiMonthGrid, getMonthKeyFromDateKey, parseTaipeiDateKey } from "@/lib/utils/upload-calendar";
+import { parseTaipeiDateKey } from "@/lib/utils/upload-calendar";
+
+import { ClinicalPeriodPanel } from "./clinical-period-panel";
+import { UsageTrendsTab } from "./usage-trends-tab";
 
 type SortBy = "timeline" | "risk";
 type GroupSortBy = "uploads" | "age" | "infection_risk";
+type OverviewTab = "clinical" | "usage";
 type DraftVerdict = {
   label: StaffAnnotationItem["label"];
   comment: string;
@@ -93,10 +97,35 @@ function suggestedLabel(upload: StaffHistoryOverviewUploadItem): StaffAnnotation
 }
 
 export default function AdminHistoryOverviewPage() {
+  return (
+    <Suspense fallback={<div className="py-16 text-center text-sm text-zinc-500">載入區間分析中...</div>}>
+      <AdminHistoryOverviewPageInner />
+    </Suspense>
+  );
+}
+
+function AdminHistoryOverviewPageInner() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const initialTab = searchParams.get("tab") === "usage" ? "usage" : "clinical";
+  const initialDateParam = searchParams.get("date");
+  let initialDateFromUrl: string | null = null;
+  if (initialDateParam) {
+    try {
+      parseTaipeiDateKey(initialDateParam);
+      initialDateFromUrl = initialDateParam;
+    } catch {
+      initialDateFromUrl = null;
+    }
+  }
+
+  const [overviewTab, setOverviewTab] = useState<OverviewTab>(initialTab);
   const [daysLoading, setDaysLoading] = useState(true);
   const [daysError, setDaysError] = useState<string | null>(null);
   const [days, setDays] = useState<string[]>([]);
-  const [selectedDate, setSelectedDate] = useState<string | null>(null);
+  const [selectedDate, setSelectedDate] = useState<string | null>(initialDateFromUrl);
 
   const [overviewLoading, setOverviewLoading] = useState(false);
   const [overviewError, setOverviewError] = useState<string | null>(null);
@@ -106,11 +135,6 @@ export default function AdminHistoryOverviewPage() {
   const [groupByUser, setGroupByUser] = useState(true);
   const [groupSortBy, setGroupSortBy] = useState<GroupSortBy>("infection_risk");
 
-  const [calendarLoading, setCalendarLoading] = useState(false);
-  const [calendarRiskByDate, setCalendarRiskByDate] = useState<
-    Record<string, { risky: number; elevated: number }>
-  >({});
-
   const [ungroupedVisibleCount, setUngroupedVisibleCount] = useState(INITIAL_UNGROUPED_VISIBLE);
   const [groupVisibleCountByPatient, setGroupVisibleCountByPatient] = useState<Record<number, number>>({});
   const [selectedUploadId, setSelectedUploadId] = useState<number | null>(null);
@@ -121,6 +145,27 @@ export default function AdminHistoryOverviewPage() {
   const [imageErrorByUploadId, setImageErrorByUploadId] = useState<Record<number, boolean>>({});
   const sentinelRef = useRef<HTMLDivElement | null>(null);
 
+  const syncUrl = useCallback(
+    (next: { date?: string | null; tab?: OverviewTab }) => {
+      const params = new URLSearchParams(searchParams.toString());
+      const dateValue = next.date !== undefined ? next.date : selectedDate;
+      const tabValue = next.tab ?? overviewTab;
+      if (dateValue) {
+        params.set("date", dateValue);
+      } else {
+        params.delete("date");
+      }
+      if (tabValue === "clinical") {
+        params.delete("tab");
+      } else {
+        params.set("tab", tabValue);
+      }
+      const query = params.toString();
+      router.replace(query ? `${pathname}?${query}` : pathname, { scroll: false });
+    },
+    [overviewTab, pathname, router, searchParams, selectedDate]
+  );
+
   const loadDays = useCallback(async () => {
     setDaysLoading(true);
     try {
@@ -185,28 +230,10 @@ export default function AdminHistoryOverviewPage() {
     if (!selectedDate) {
       return;
     }
-    const { year, month } = parseTaipeiDateKey(selectedDate);
-    const timer = window.setTimeout(() => {
-      setCalendarLoading(true);
-      void fetchHistoryOverviewCalendar({ year, month })
-        .then((response) => {
-          const riskMap: Record<string, { risky: number; elevated: number }> = {};
-          response.items.forEach((item) => {
-            riskMap[item.local_date] = {
-              risky: item.risky_patient_count,
-              elevated: item.symptom_elevated_patient_count,
-            };
-          });
-          setCalendarRiskByDate(riskMap);
-        })
-        .finally(() => {
-          setCalendarLoading(false);
-        });
-    }, 0);
-    return () => {
-      window.clearTimeout(timer);
-    };
-  }, [selectedDate]);
+    syncUrl({ date: selectedDate, tab: overviewTab });
+    // Intentionally only when date/tab change; syncUrl identity would loop.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedDate, overviewTab]);
 
   useEffect(() => {
     const timer = window.setTimeout(() => {
@@ -353,46 +380,58 @@ export default function AdminHistoryOverviewPage() {
   const canGoPrev = selectedDateIndex >= 0 && selectedDateIndex < days.length - 1;
   const canGoNext = selectedDateIndex > 0;
 
-  const calendarDates = useMemo(() => {
-    if (!selectedDate) {
-      return [] as Array<{ day: number; localDate: string | null }>;
-    }
-    const monthKey = getMonthKeyFromDateKey(selectedDate);
-    const grid = buildTaipeiMonthGrid(monthKey);
-    return grid.cells.map((cell) => ({
-      day: cell.dayOfMonth,
-      localDate: cell.isCurrentMonth ? cell.dateKey : null,
-    }));
-  }, [selectedDate]);
-
-  const monthRiskMax = useMemo(() => {
-    const values = Object.values(calendarRiskByDate).map((entry) => entry.risky);
-    return values.length > 0 ? Math.max(...values) : 0;
-  }, [calendarRiskByDate]);
-
-  if (daysLoading && !selectedDate) {
-    return <div className="py-16 text-center text-sm text-zinc-500">載入歷史總覽中...</div>;
-  }
-
   return (
     <div className="mx-auto flex w-full max-w-7xl flex-col gap-4">
       <header className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
         <div>
-          <h1 className="text-lg font-semibold text-zinc-900">歷史總覽</h1>
-          <p className="text-xs text-zinc-500">依台灣時區日期檢視上傳紀錄與感染風險分布。</p>
+          <h1 className="text-lg font-semibold text-zinc-900">區間分析</h1>
+          <p className="text-xs text-zinc-500">臨床回顧與使用趨勢（依台灣時區）。</p>
         </div>
+        {overviewTab === "clinical" ? (
+          <button
+            type="button"
+            onClick={() => {
+              void loadDays();
+              void loadOverview();
+            }}
+            className="inline-flex items-center justify-center gap-2 rounded-xl border border-zinc-200 px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-50"
+          >
+            <RefreshCw className="h-4 w-4" />
+            重新整理
+          </button>
+        ) : null}
+      </header>
+
+      <div className="flex gap-2 border-b border-zinc-200 pb-2">
         <button
           type="button"
-          onClick={() => {
-            void loadDays();
-            void loadOverview();
-          }}
-          className="inline-flex items-center justify-center gap-2 rounded-xl border border-zinc-200 px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-50"
+          onClick={() => setOverviewTab("clinical")}
+          className={`rounded-lg px-3 py-1.5 text-sm font-medium ${
+            overviewTab === "clinical" ? "bg-zinc-900 text-white" : "bg-zinc-100 text-zinc-600 hover:bg-zinc-200"
+          }`}
         >
-          <RefreshCw className="h-4 w-4" />
-          重新整理
+          臨床
         </button>
-      </header>
+        <button
+          type="button"
+          onClick={() => setOverviewTab("usage")}
+          className={`rounded-lg px-3 py-1.5 text-sm font-medium ${
+            overviewTab === "usage" ? "bg-zinc-900 text-white" : "bg-zinc-100 text-zinc-600 hover:bg-zinc-200"
+          }`}
+        >
+          使用趨勢
+        </button>
+      </div>
+
+      {overviewTab === "usage" ? <UsageTrendsTab /> : null}
+
+      {overviewTab === "clinical" && daysLoading && !selectedDate ? (
+        <div className="py-16 text-center text-sm text-zinc-500">載入區間分析中...</div>
+      ) : null}
+
+      {overviewTab === "clinical" && !(daysLoading && !selectedDate) ? (
+        <>
+      <ClinicalPeriodPanel />
 
       {daysError ? <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{daysError}</div> : null}
       {overviewError ? (
@@ -400,24 +439,37 @@ export default function AdminHistoryOverviewPage() {
       ) : null}
 
       <section className="grid gap-3 rounded-2xl border border-zinc-200 bg-white p-4 md:grid-cols-[1fr_auto] md:items-center">
-        <div className="inline-flex items-center gap-2">
-          <button
-            type="button"
-            disabled={!canGoPrev}
-            onClick={() => canGoPrev && setSelectedDate(days[selectedDateIndex + 1])}
-            className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-zinc-200 text-zinc-700 disabled:cursor-not-allowed disabled:opacity-40"
-          >
-            <ChevronLeft className="h-4 w-4" />
-          </button>
-          <div className="rounded-lg bg-zinc-100 px-3 py-2 text-sm font-medium text-zinc-800">{selectedDate ?? "—"}</div>
-          <button
-            type="button"
-            disabled={!canGoNext}
-            onClick={() => canGoNext && setSelectedDate(days[selectedDateIndex - 1])}
-            className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-zinc-200 text-zinc-700 disabled:cursor-not-allowed disabled:opacity-40"
-          >
-            <ChevronRight className="h-4 w-4" />
-          </button>
+        <div className="flex flex-col gap-2">
+          <div className="inline-flex items-center gap-2">
+            <span className="text-xs text-zinc-500">檢視日期</span>
+            <button
+              type="button"
+              disabled={!canGoPrev}
+              onClick={() => canGoPrev && setSelectedDate(days[selectedDateIndex + 1])}
+              className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-zinc-200 text-zinc-700 disabled:cursor-not-allowed disabled:opacity-40"
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </button>
+            <div className="rounded-lg bg-zinc-100 px-3 py-2 text-sm font-medium text-zinc-800">
+              {selectedDate ?? "—"}
+            </div>
+            <button
+              type="button"
+              disabled={!canGoNext}
+              onClick={() => canGoNext && setSelectedDate(days[selectedDateIndex - 1])}
+              className="inline-flex h-9 w-9 items-center justify-center rounded-lg border border-zinc-200 text-zinc-700 disabled:cursor-not-allowed disabled:opacity-40"
+            >
+              <ChevronRight className="h-4 w-4" />
+            </button>
+          </div>
+          {selectedDate ? (
+            <Link
+              href={`/admin?date=${encodeURIComponent(selectedDate)}`}
+              className="text-xs text-zinc-500 hover:text-zinc-800"
+            >
+              在儀表板變更日期 →
+            </Link>
+          ) : null}
         </div>
 
         <div className="grid grid-cols-2 gap-2 md:flex md:items-center md:gap-2">
@@ -473,68 +525,6 @@ export default function AdminHistoryOverviewPage() {
         </div>
       </section>
 
-      <section className="rounded-2xl border border-zinc-200 bg-white p-4">
-        <div className="mb-3 flex items-center gap-2 text-sm text-zinc-700">
-          <CalendarDays className="h-4 w-4" />
-          月曆風險分布
-          {calendarLoading ? <span className="text-xs text-zinc-400">載入中...</span> : null}
-        </div>
-        <div className="grid grid-cols-7 gap-1 text-xs text-zinc-500">
-          {["日", "一", "二", "三", "四", "五", "六"].map((label) => (
-            <div key={label} className="py-1 text-center">
-              {label}
-            </div>
-          ))}
-        </div>
-        <div className="mt-1 grid grid-cols-7 gap-1">
-          {calendarDates.map((entry, index) => {
-            if (!entry.localDate) {
-              return <div key={`blank-${index}`} className="h-10 rounded-md bg-zinc-50" />;
-            }
-            const isAvailable = days.includes(entry.localDate);
-            const dayRisk = calendarRiskByDate[entry.localDate];
-            const riskyCount = dayRisk?.risky ?? 0;
-            const elevatedCount = dayRisk?.elevated ?? 0;
-            const ratio = monthRiskMax > 0 ? riskyCount / monthRiskMax : 0;
-            let toneClass = "bg-zinc-100 text-zinc-500";
-            if (isAvailable && riskyCount <= 0 && elevatedCount <= 0) {
-              toneClass = "bg-emerald-100 text-emerald-700";
-            } else if (isAvailable && riskyCount > 0) {
-              if (ratio <= 0.25) {
-                toneClass = "bg-red-100 text-red-700";
-              } else if (ratio <= 0.5) {
-                toneClass = "bg-red-200 text-red-800";
-              } else if (ratio <= 0.75) {
-                toneClass = "bg-red-300 text-red-900";
-              } else {
-                toneClass = "bg-red-500 text-white";
-              }
-            } else if (isAvailable && elevatedCount > 0) {
-              toneClass = "bg-orange-200 text-orange-800";
-            }
-            const selectedClass = selectedDate === entry.localDate ? "ring-2 ring-zinc-900" : "";
-            const titleRisk =
-              riskyCount > 0
-                ? `疑似 ${riskyCount}`
-                : elevatedCount > 0
-                  ? `症狀高風險 ${elevatedCount}`
-                  : "無風險";
-            return (
-              <button
-                key={entry.localDate}
-                type="button"
-                disabled={!isAvailable}
-                onClick={() => setSelectedDate(entry.localDate)}
-                className={`h-10 rounded-md text-center text-xs font-medium ${toneClass} ${selectedClass} disabled:cursor-not-allowed disabled:opacity-50`}
-                title={isAvailable ? `${entry.localDate} ${titleRisk}` : `${entry.localDate} 無資料`}
-              >
-                {entry.day}
-              </button>
-            );
-          })}
-        </div>
-      </section>
-
       {overviewLoading ? <div className="py-8 text-center text-sm text-zinc-500">載入當日資料中...</div> : null}
 
       {!groupByUser ? (
@@ -764,6 +754,8 @@ export default function AdminHistoryOverviewPage() {
           </div>
         </div>
       ) : null}
+        </>
+      ) : null}
     </div>
   );
 }
diff --git a/apps/frontend/app/admin/history-overview/usage-trends-tab.tsx b/apps/frontend/app/admin/history-overview/usage-trends-tab.tsx
new file mode 100644
index 0000000..3e06f45
--- /dev/null
+++ b/apps/frontend/app/admin/history-overview/usage-trends-tab.tsx
@@ -0,0 +1,240 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import clsx from "clsx";
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
+
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/components/ui/chart";
+import { getReadableApiError } from "@/lib/api/client";
+import { fetchAdminActiveUsersSeries, fetchAdminDailySuspectedSeries } from "@/lib/api/staff";
+
+const ACTIVE_WINDOW_OPTIONS = [3, 7, 14, 30] as const;
+const LOOKBACK_OPTIONS = [30, 60, 90] as const;
+
+const activeChartConfig = {
+  active_users: { label: "活躍用戶", color: "#2563eb" },
+} satisfies ChartConfig;
+
+const dailyChartConfig = {
+  suspected_uploads: { label: "疑似上傳", color: "#dc2626" },
+  symptom_elevated_uploads: { label: "症狀高風險", color: "#f97316" },
+  risk_total: { label: "風險合計", color: "#dc2626" },
+  ratio_pct: { label: "比例 %", color: "#71717a" },
+} satisfies ChartConfig;
+
+export function UsageTrendsTab() {
+  const [activeWindowDays, setActiveWindowDays] = useState<(typeof ACTIVE_WINDOW_OPTIONS)[number]>(7);
+  const [activeLookbackDays, setActiveLookbackDays] = useState<(typeof LOOKBACK_OPTIONS)[number]>(30);
+  const [activeInterval, setActiveInterval] = useState<"day" | "week">("day");
+  const [dailyLookbackDays, setDailyLookbackDays] = useState<(typeof LOOKBACK_OPTIONS)[number]>(30);
+  const [riskChartMode, setRiskChartMode] = useState<"split" | "aggregate">("split");
+  const [activeUsersSeries, setActiveUsersSeries] = useState<{ date: string; active_users: number }[]>([]);
+  const [dailySuspectedSeries, setDailySuspectedSeries] = useState<
+    {
+      date: string;
+      total_uploads: number;
+      suspected_uploads: number;
+      symptom_elevated_uploads: number;
+      suspected_ratio: number;
+    }[]
+  >([]);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    async function load() {
+      setLoading(true);
+      setError(null);
+      try {
+        const [activeData, dailyData] = await Promise.all([
+          fetchAdminActiveUsersSeries({
+            activeWindowDays,
+            lookbackDays: activeLookbackDays,
+            interval: activeInterval,
+          }),
+          fetchAdminDailySuspectedSeries({ lookbackDays: dailyLookbackDays }),
+        ]);
+        if (cancelled) {
+          return;
+        }
+        setActiveUsersSeries(activeData.items);
+        setDailySuspectedSeries(dailyData.items);
+      } catch (err) {
+        if (!cancelled) {
+          setError(getReadableApiError(err));
+          setActiveUsersSeries([]);
+          setDailySuspectedSeries([]);
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    }
+    void load();
+    return () => {
+      cancelled = true;
+    };
+  }, [activeInterval, activeLookbackDays, activeWindowDays, dailyLookbackDays]);
+
+  const activeUserChartData = useMemo(
+    () =>
+      activeUsersSeries.map((point) => ({
+        ...point,
+        shortDate: new Date(point.date).toLocaleDateString("zh-TW", { month: "numeric", day: "numeric" }),
+      })),
+    [activeUsersSeries]
+  );
+
+  const dailySuspectedChartData = useMemo(
+    () =>
+      dailySuspectedSeries.map((point) => {
+        const elevated = point.symptom_elevated_uploads ?? 0;
+        const ratio =
+          point.total_uploads > 0
+            ? riskChartMode === "aggregate"
+              ? (point.suspected_uploads + elevated) / point.total_uploads
+              : point.suspected_ratio
+            : 0;
+        return {
+          ...point,
+          symptom_elevated_uploads: elevated,
+          risk_total: point.suspected_uploads + elevated,
+          ratio_pct: Number((ratio * 100).toFixed(1)),
+          shortDate: new Date(point.date).toLocaleDateString("zh-TW", { month: "numeric", day: "numeric" }),
+        };
+      }),
+    [dailySuspectedSeries, riskChartMode]
+  );
+
+  return (
+    <div className="space-y-4">
+      {loading ? <p className="text-sm text-zinc-400">載入使用趨勢…</p> : null}
+      {error ? <p className="rounded-xl border border-zinc-200 bg-white p-4 text-sm text-zinc-500">{error}</p> : null}
+
+      <section className="rounded-xl border border-zinc-200 bg-white p-4">
+        <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
+          <h3 className="text-sm font-medium text-zinc-900">活躍用戶趨勢</h3>
+          <div className="flex flex-wrap items-center gap-2 text-xs">
+            <select
+              className="rounded-lg border border-zinc-200 px-2 py-1"
+              value={activeWindowDays}
+              onChange={(event) => setActiveWindowDays(Number(event.target.value) as (typeof ACTIVE_WINDOW_OPTIONS)[number])}
+            >
+              {ACTIVE_WINDOW_OPTIONS.map((value) => (
+                <option key={value} value={value}>
+                  近{value}天活躍
+                </option>
+              ))}
+            </select>
+            <select
+              className="rounded-lg border border-zinc-200 px-2 py-1"
+              value={activeLookbackDays}
+              onChange={(event) => setActiveLookbackDays(Number(event.target.value) as (typeof LOOKBACK_OPTIONS)[number])}
+            >
+              {LOOKBACK_OPTIONS.map((value) => (
+                <option key={value} value={value}>
+                  最近{value}天
+                </option>
+              ))}
+            </select>
+            <select
+              className="rounded-lg border border-zinc-200 px-2 py-1"
+              value={activeInterval}
+              onChange={(event) => setActiveInterval(event.target.value as "day" | "week")}
+            >
+              <option value="day">日</option>
+              <option value="week">週</option>
+            </select>
+          </div>
+        </div>
+        <ChartContainer className="h-64 w-full" config={activeChartConfig}>
+          <LineChart data={activeUserChartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis dataKey="shortDate" tickLine={false} axisLine={false} minTickGap={24} />
+            <YAxis allowDecimals={false} tickLine={false} axisLine={false} />
+            <ChartTooltip content={<ChartTooltipContent />} />
+            <Line dataKey="active_users" stroke="var(--color-active_users)" strokeWidth={2} dot={false} />
+          </LineChart>
+        </ChartContainer>
+      </section>
+
+      <section className="rounded-xl border border-zinc-200 bg-white p-4">
+        <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
+          <h3 className="text-sm font-medium text-zinc-900">每日疑似感染比例與數量</h3>
+          <div className="flex flex-wrap items-center gap-2 text-xs">
+            <div className="flex items-center gap-1 rounded-lg border border-zinc-200 p-1">
+              <button
+                type="button"
+                className={clsx("rounded px-2 py-1", riskChartMode === "split" ? "bg-zinc-900 text-white" : "text-zinc-600")}
+                onClick={() => setRiskChartMode("split")}
+              >
+                分開
+              </button>
+              <button
+                type="button"
+                className={clsx(
+                  "rounded px-2 py-1",
+                  riskChartMode === "aggregate" ? "bg-zinc-900 text-white" : "text-zinc-600"
+                )}
+                onClick={() => setRiskChartMode("aggregate")}
+              >
+                合計
+              </button>
+            </div>
+            <select
+              className="rounded-lg border border-zinc-200 px-2 py-1 text-xs"
+              value={dailyLookbackDays}
+              onChange={(event) => setDailyLookbackDays(Number(event.target.value) as (typeof LOOKBACK_OPTIONS)[number])}
+            >
+              {LOOKBACK_OPTIONS.map((value) => (
+                <option key={value} value={value}>
+                  最近{value}天
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+        <ChartContainer className="h-72 w-full" config={dailyChartConfig}>
+          <LineChart data={dailySuspectedChartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis dataKey="shortDate" tickLine={false} axisLine={false} minTickGap={24} />
+            <YAxis yAxisId="left" tickLine={false} axisLine={false} allowDecimals={false} />
+            <YAxis yAxisId="right" orientation="right" tickLine={false} axisLine={false} unit="%" />
+            <ChartTooltip content={<ChartTooltipContent />} />
+            {riskChartMode === "aggregate" ? (
+              <Line yAxisId="left" dataKey="risk_total" stroke="var(--color-risk_total)" strokeWidth={2} dot={false} />
+            ) : (
+              <>
+                <Line
+                  yAxisId="left"
+                  dataKey="suspected_uploads"
+                  stroke="var(--color-suspected_uploads)"
+                  strokeWidth={2}
+                  dot={false}
+                />
+                <Line
+                  yAxisId="left"
+                  dataKey="symptom_elevated_uploads"
+                  stroke="var(--color-symptom_elevated_uploads)"
+                  strokeWidth={2}
+                  dot={false}
+                />
+              </>
+            )}
+            <Line yAxisId="right" dataKey="ratio_pct" stroke="var(--color-ratio_pct)" strokeWidth={2} dot={false} />
+            <ChartLegend content={<ChartLegendContent />} />
+          </LineChart>
+        </ChartContainer>
+      </section>
+    </div>
+  );
+}
diff --git a/apps/frontend/app/admin/layout.tsx b/apps/frontend/app/admin/layout.tsx
index 5aa4383..70f6c3a 100644
--- a/apps/frontend/app/admin/layout.tsx
+++ b/apps/frontend/app/admin/layout.tsx
@@ -190,7 +190,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
               }`}
             >
               <CalendarDays className="w-4 h-4" strokeWidth={1.5} />
-              歷史總覽
+              區間分析
             </Link>
             <Link
               href="/admin/registration-review"
@@ -343,11 +343,11 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
                   ? "bg-zinc-900 text-white"
                   : "text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900"
               }`}
-              aria-label="歷史總覽"
-              title={isSidebarCollapsed ? "歷史總覽" : undefined}
+              aria-label="區間分析"
+              title={isSidebarCollapsed ? "區間分析" : undefined}
             >
               <CalendarDays className="w-4 h-4" strokeWidth={1.5} />
-              {!isSidebarCollapsed ? "歷史總覽" : null}
+              {!isSidebarCollapsed ? "區間分析" : null}
             </Link>
             <Link
               href="/admin/registration-review"
diff --git a/apps/frontend/app/admin/page.tsx b/apps/frontend/app/admin/page.tsx
index e6f6008..60e6d78 100644
--- a/apps/frontend/app/admin/page.tsx
+++ b/apps/frontend/app/admin/page.tsx
@@ -1,935 +1,266 @@
 "use client";
 
-import { useEffect, useMemo, useState } from "react";
+import { Suspense, useEffect, useMemo, useState } from "react";
 import Link from "next/link";
-import {
-  AlertTriangle,
-  Bell,
-  Clock3,
-  Download,
-  Filter,
-  Link2,
-  Hospital,
-  Upload,
-  Users,
-} from "lucide-react";
-import clsx from "clsx";
-import { toast } from "sonner";
-import { Bar, BarChart, CartesianGrid, Cell, Line, LineChart, Pie, PieChart, XAxis, YAxis } from "recharts";
 
-import { useAdminNotifications } from "@/app/admin/_components/admin-notification-context";
+import { ActiveUploadersSummary } from "@/app/admin/_components/active-uploaders-summary";
 import {
-  ChartContainer,
-  ChartLegend,
-  ChartLegendContent,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "@/components/ui/chart";
-import { getReadableApiError } from "@/lib/api/client";
-import { getElevatedUserKpi, getSuspectedKpi } from "@/lib/admin/dashboard-kpi";
+  DashboardDayCalendar,
+  type DayCalendarMetrics,
+} from "@/app/admin/_components/dashboard-day-calendar";
+import { PendingBindingsSummary } from "@/app/admin/_components/pending-bindings-summary";
+import { TodayPatientPool } from "@/app/admin/_components/today-patient-pool";
+import { TodayUploadCount } from "@/app/admin/_components/today-upload-count";
+import { TodayWorkbenchHeader } from "@/app/admin/_components/today-workbench-header";
+import { useAdminSelectedDate } from "@/lib/admin/use-admin-selected-date";
+import { getStaffRole } from "@/lib/auth/staff-session";
 import {
   fetchAdminActiveUsersSeries,
-  fetchAdminDailySuspectedSeries,
-  fetchAdminSuspectedSummary,
-  approvePendingBinding,
+  fetchHistoryOverviewCalendar,
+  fetchHistoryOverviewDays,
   fetchPendingBindings,
-  fetchStaffPatients,
-  fetchUploadQueue,
-  createPatientAndLinkPendingBinding,
-  linkPendingBinding,
-  rejectPendingBinding,
-  StaffPatientSummary,
-  StaffPendingBindingItem,
-  StaffUploadQueueItem,
+  fetchTodayAttention,
+  type StaffPendingBindingItem,
+  type StaffTodayAttentionResponse,
 } from "@/lib/api/staff";
+import { getMonthKeyFromDateKey } from "@/lib/utils/upload-calendar";
 
-const PERIOD_OPTIONS = ["today", 1, 2, 3, 6, 12, 24, 36, 60] as const;
-type Period = (typeof PERIOD_OPTIONS)[number];
-type InfectionStatus = "all" | "suspected" | "normal";
+function AdminDashboardInner() {
+  const { selectedDate, setSelectedDate, isTodaySelected, dayScopeLabel, monthKey } =
+    useAdminSelectedDate();
 
-const INFECTION_OPTIONS = [
-  { value: "all", label: "全部" },
-  { value: "suspected", label: "疑似感染" },
-  { value: "normal", label: "無感染" },
-] as const;
+  const [attention, setAttention] = useState<StaffTodayAttentionResponse | null>(null);
+  const [attentionLoading, setAttentionLoading] = useState(true);
+  const [attentionError, setAttentionError] = useState<string | null>(null);
 
-const ACTIVE_WINDOW_OPTIONS = [3, 7, 14, 30] as const;
-const LOOKBACK_OPTIONS = [30, 60, 90] as const;
-type ChartType = "bar" | "pie";
+  const [pendingItems, setPendingItems] = useState<StaffPendingBindingItem[]>([]);
+  const [pendingLoading, setPendingLoading] = useState(true);
+  const [pendingError, setPendingError] = useState<string | null>(null);
 
-function exportCSV(items: StaffPatientSummary[]) {
-  const headers = ["病例號", "姓名", "LINE 名稱", "年齡", "LINE 帳號", "期間上傳次數", "疑似感染次數", "最近上傳日"];
-  const rows = items.map((item) =>
-    [
-      item.case_number,
-      item.full_name ?? "未命名",
-      item.line_display_name ?? "-",
-      item.age ?? "-",
-      item.line_user_id ?? "-",
-      item.upload_count,
-      item.suspected_count,
-      item.latest_upload_at ? new Date(item.latest_upload_at).toLocaleDateString("zh-TW") : "-",
-    ].join(",")
-  );
-  const csv = [headers.join(","), ...rows].join("\n");
-  const blob = new Blob(["\uFEFF" + csv], { type: "text/csv;charset=utf-8;" });
-  const url = URL.createObjectURL(blob);
-  const anchor = document.createElement("a");
-  anchor.href = url;
-  anchor.download = `pd-care-report-${new Date().toISOString().slice(0, 10)}.csv`;
-  anchor.click();
-  URL.revokeObjectURL(url);
-}
+  const isAdmin = getStaffRole() === "admin";
+  const [activeUsers, setActiveUsers] = useState<number | null>(null);
+  const [activeLoading, setActiveLoading] = useState(isAdmin);
+  const [activeError, setActiveError] = useState<string | null>(null);
 
-export default function AdminDashboard() {
-  const [months, setMonths] = useState<Period>("today");
-  const [ageMin, setAgeMin] = useState("");
-  const [ageMax, setAgeMax] = useState("");
-  const [infectionStatus, setInfectionStatus] = useState<InfectionStatus>("all");
-  const [showFilters, setShowFilters] = useState(false);
-  const [patients, setPatients] = useState<StaffPatientSummary[]>([]);
-  const [queue, setQueue] = useState<StaffUploadQueueItem[]>([]);
-  const [pending, setPending] = useState<StaffPendingBindingItem[]>([]);
-  const [stats, setStats] = useState({
-    totalPatients: 0,
-    totalUploads: 0,
-  });
-  const [selectedCandidate, setSelectedCandidate] = useState<Record<number, string>>({});
-  const [workingPendingId, setWorkingPendingId] = useState<number | null>(null);
-  const [newPatientNameByPendingId, setNewPatientNameByPendingId] = useState<Record<number, string>>({});
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  const [showAllNotifications, setShowAllNotifications] = useState(false);
-  const [showAllQueue, setShowAllQueue] = useState(false);
-  const [showAllPending, setShowAllPending] = useState(false);
-  const [todayChartType, setTodayChartType] = useState<ChartType>("bar");
-  const [riskChartMode, setRiskChartMode] = useState<"split" | "aggregate">("split");
-  const [activeWindowDays, setActiveWindowDays] = useState<(typeof ACTIVE_WINDOW_OPTIONS)[number]>(7);
-  const [activeLookbackDays, setActiveLookbackDays] = useState<(typeof LOOKBACK_OPTIONS)[number]>(30);
-  const [activeInterval, setActiveInterval] = useState<"day" | "week">("day");
-  const [dailyLookbackDays, setDailyLookbackDays] = useState<(typeof LOOKBACK_OPTIONS)[number]>(30);
-  const [riskSummary, setRiskSummary] = useState<{
-    total_uploads: number;
-    suspected_uploads: number;
-    symptom_elevated_uploads: number;
-    suspected_users: number;
-    symptom_elevated_users: number;
-    normal_uploads: number;
-    suspected_ratio: number;
-  } | null>(null);
-  const [activeUsersSeries, setActiveUsersSeries] = useState<{ date: string; active_users: number }[]>([]);
-  const [dailySuspectedSeries, setDailySuspectedSeries] = useState<
-    {
-      date: string;
-      total_uploads: number;
-      suspected_uploads: number;
-      symptom_elevated_uploads: number;
-      suspected_ratio: number;
-    }[]
-  >([]);
-  const [analyticsError, setAnalyticsError] = useState<string | null>(null);
-  const { notifications, unreadCount, markNotificationRead, markingIds, error: notificationError } = useAdminNotifications();
-  const queryMonths = months === "today" ? 1 : months;
+  const [browseMonthKey, setBrowseMonthKey] = useState<string | null>(null);
+  const calendarMonthKey = browseMonthKey ?? monthKey;
+  const [availableDates, setAvailableDates] = useState<string[]>([]);
+  const [metricsByDate, setMetricsByDate] = useState<Record<string, DayCalendarMetrics>>({});
+  const [calendarLoading, setCalendarLoading] = useState(true);
 
   useEffect(() => {
     let cancelled = false;
-    async function loadDashboard() {
-      setErrorMessage(null);
-      try {
-        const [patientsData, queueData, pendingData] = await Promise.all([
-          fetchStaffPatients({
-            months: queryMonths,
-            ageMin: ageMin ? Number(ageMin) : undefined,
-            ageMax: ageMax ? Number(ageMax) : undefined,
-            infectionStatus,
-            isActiveFilter: "active",
-            sortKey: "latest_upload",
-            sortDir: "desc",
-          }),
-          fetchUploadQueue({ limit: 12 }),
-          fetchPendingBindings(),
-        ]);
-        if (cancelled) {
-          return;
-        }
-        setPatients(patientsData.items);
-        setStats({
-          totalPatients: patientsData.total_patients,
-          totalUploads: patientsData.total_uploads,
+    const timer = window.setTimeout(() => {
+      setAttentionLoading(true);
+      void fetchTodayAttention({ localDate: selectedDate })
+        .then((data) => {
+          if (!cancelled) {
+            setAttention(data);
+            setAttentionError(null);
+          }
+        })
+        .catch(() => {
+          if (!cancelled) {
+            setAttentionError(`無法載入${dayScopeLabel}上傳病患`);
+            setAttention(null);
+          }
+        })
+        .finally(() => {
+          if (!cancelled) {
+            setAttentionLoading(false);
+          }
         });
-        setQueue(queueData.items);
-        setPending(pendingData);
-      } catch (error) {
-        if (!cancelled) {
-          setErrorMessage(getReadableApiError(error));
-        }
-      }
-    }
-    void loadDashboard();
+    }, 0);
     return () => {
       cancelled = true;
+      window.clearTimeout(timer);
     };
-  }, [ageMax, ageMin, infectionStatus, queryMonths]);
+  }, [selectedDate, dayScopeLabel]);
 
   useEffect(() => {
     let cancelled = false;
-    async function loadAnalytics() {
-      setAnalyticsError(null);
-      try {
-        const summaryFilters = {
-          ageMin: ageMin ? Number(ageMin) : undefined,
-          ageMax: ageMax ? Number(ageMax) : undefined,
-          infectionStatus,
-          isActiveFilter: "active" as const,
-        };
-        const [riskData, activeData, dailyData] = await Promise.all([
-          months === "today"
-            ? fetchAdminSuspectedSummary(summaryFilters)
-            : fetchAdminSuspectedSummary({ months, ...summaryFilters }),
-          fetchAdminActiveUsersSeries({
-            activeWindowDays,
-            lookbackDays: activeLookbackDays,
-            interval: activeInterval,
-          }),
-          fetchAdminDailySuspectedSeries({ lookbackDays: dailyLookbackDays }),
-        ]);
-        if (cancelled) {
-          return;
+    void fetchHistoryOverviewDays()
+      .then((data) => {
+        if (!cancelled) {
+          setAvailableDates(data.items.map((item) => item.local_date));
         }
-        setRiskSummary(riskData);
-        setActiveUsersSeries(activeData.items);
-        setDailySuspectedSeries(dailyData.items);
-      } catch (error) {
+      })
+      .catch(() => {
         if (!cancelled) {
-          setAnalyticsError(getReadableApiError(error));
+          setAvailableDates([]);
         }
-      }
-    }
-    void loadAnalytics();
+      });
     return () => {
       cancelled = true;
     };
-  }, [activeInterval, activeLookbackDays, activeWindowDays, ageMax, ageMin, dailyLookbackDays, infectionStatus, months]);
-
-  const pendingItems = useMemo(() => pending.filter((item) => item.status === "pending"), [pending]);
-  const visibleNotifications = useMemo(
-    () => (showAllNotifications ? notifications : notifications.slice(0, 3)),
-    [notifications, showAllNotifications]
-  );
-  const visibleQueue = useMemo(() => (showAllQueue ? queue : queue.slice(0, 3)), [queue, showAllQueue]);
-  const visiblePending = useMemo(
-    () => (showAllPending ? pendingItems : pendingItems.slice(0, 3)),
-    [pendingItems, showAllPending]
-  );
-  const riskChartData = useMemo(() => {
-    const suspected = riskSummary?.suspected_uploads ?? 0;
-    const elevated = riskSummary?.symptom_elevated_uploads ?? 0;
-    const normal = riskSummary?.normal_uploads ?? 0;
-    if (riskChartMode === "aggregate") {
-      return [
-        { key: "risk", label: "風險合計", count: suspected + elevated, fill: "#dc2626" },
-        { key: "normal", label: "正常", count: normal, fill: "#16a34a" },
-      ];
-    }
-    return [
-      { key: "suspected", label: "疑似感染", count: suspected, fill: "#dc2626" },
-      { key: "elevated", label: "症狀高風險", count: elevated, fill: "#f97316" },
-      { key: "normal", label: "正常", count: normal, fill: "#16a34a" },
-    ];
-  }, [riskChartMode, riskSummary]);
-  const activeUserChartData = useMemo(
-    () =>
-      activeUsersSeries.map((point) => ({
-        ...point,
-        shortDate: new Date(point.date).toLocaleDateString("zh-TW", { month: "numeric", day: "numeric" }),
-      })),
-    [activeUsersSeries]
-  );
-  const dailySuspectedChartData = useMemo(
-    () =>
-      dailySuspectedSeries.map((point) => {
-        const elevated = point.symptom_elevated_uploads ?? 0;
-        const riskTotal = point.suspected_uploads + elevated;
-        const ratioBase = riskChartMode === "aggregate" ? riskTotal : point.suspected_uploads;
-        return {
-          ...point,
-          symptom_elevated_uploads: elevated,
-          risk_total: riskTotal,
-          shortDate: new Date(point.date).toLocaleDateString("zh-TW", { month: "numeric", day: "numeric" }),
-          ratio_pct: Number(
-            (point.total_uploads > 0 ? (ratioBase / point.total_uploads) * 100 : 0).toFixed(1)
-          ),
-        };
-      }),
-    [dailySuspectedSeries, riskChartMode]
-  );
-  const riskChartRatio = useMemo(() => {
-    if (!riskSummary || riskSummary.total_uploads <= 0) {
-      return 0;
-    }
-    if (riskChartMode === "aggregate") {
-      return (
-        (riskSummary.suspected_uploads + riskSummary.symptom_elevated_uploads) / riskSummary.total_uploads
-      );
-    }
-    return riskSummary.suspected_ratio;
-  }, [riskChartMode, riskSummary]);
-  const todayChartConfig: ChartConfig = {
-    suspected: { label: "疑似感染", color: "#dc2626" },
-    elevated: { label: "症狀高風險", color: "#f97316" },
-    risk: { label: "風險合計", color: "#dc2626" },
-    normal: { label: "正常", color: "#16a34a" },
-    count: { label: "筆數" },
-  };
-  const activeChartConfig: ChartConfig = {
-    active_users: { label: "活躍用戶", color: "#2563eb" },
-  };
-  const dailyChartConfig: ChartConfig =
-    riskChartMode === "aggregate"
-      ? {
-          risk_total: { label: "風險合計", color: "#dc2626" },
-          ratio_pct: { label: "風險比例(%)", color: "#2563eb" },
-        }
-      : {
-          suspected_uploads: { label: "疑似數量", color: "#dc2626" },
-          symptom_elevated_uploads: { label: "症狀高風險", color: "#f97316" },
-          ratio_pct: { label: "疑似比例(%)", color: "#2563eb" },
-        };
-  const suspectedKpi = getSuspectedKpi(months, riskSummary?.suspected_users);
-  const elevatedKpi = getElevatedUserKpi(months, riskSummary?.symptom_elevated_users);
-  const riskChartTitle = months === "today" ? "今日疑似感染" : `${months} 月疑似感染`;
-
-  async function refreshPending() {
-    const items = await fetchPendingBindings();
-    setPending(items);
-  }
+  }, []);
 
-  async function handleApprove(item: StaffPendingBindingItem) {
-    setWorkingPendingId(item.id);
-    try {
-      await approvePendingBinding(item.id);
-      await refreshPending();
-      toast.success("已核准綁定申請");
-    } catch (error) {
-      toast.error(getReadableApiError(error));
-    } finally {
-      setWorkingPendingId(null);
-    }
-  }
-
-  async function handleReject(item: StaffPendingBindingItem) {
-    setWorkingPendingId(item.id);
-    try {
-      await rejectPendingBinding(item.id);
-      await refreshPending();
-      toast.success("已駁回綁定申請");
-    } catch (error) {
-      toast.error(getReadableApiError(error));
-    } finally {
-      setWorkingPendingId(null);
-    }
-  }
+  useEffect(() => {
+    let cancelled = false;
+    const [year, month] = calendarMonthKey.split("-").map(Number);
+    const timer = window.setTimeout(() => {
+      setCalendarLoading(true);
+      void fetchHistoryOverviewCalendar({ year, month })
+        .then((data) => {
+          if (cancelled) {
+            return;
+          }
+          const next: Record<string, DayCalendarMetrics> = {};
+          for (const item of data.items) {
+            next[item.local_date] = {
+              uploadCount: item.upload_count ?? 0,
+              uploadedUsers: item.uploaded_users ?? 0,
+              riskyPatients: item.risky_patient_count ?? 0,
+              unhandledPatients: item.unhandled_patient_count ?? 0,
+            };
+          }
+          setMetricsByDate(next);
+        })
+        .catch(() => {
+          if (!cancelled) {
+            setMetricsByDate({});
+          }
+        })
+        .finally(() => {
+          if (!cancelled) {
+            setCalendarLoading(false);
+          }
+        });
+    }, 0);
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timer);
+    };
+  }, [calendarMonthKey]);
 
-  async function handleLink(item: StaffPendingBindingItem) {
-    const patientId = Number(selectedCandidate[item.id]);
-    if (!patientId) {
-      toast.error("請先選擇要綁定的病患。");
-      return;
-    }
-    setWorkingPendingId(item.id);
-    try {
-      await linkPendingBinding(item.id, patientId);
-      await refreshPending();
-      toast.success("已完成指定綁定");
-    } catch (error) {
-      toast.error(getReadableApiError(error));
-    } finally {
-      setWorkingPendingId(null);
-    }
-  }
+  useEffect(() => {
+    let cancelled = false;
+    void fetchPendingBindings()
+      .then((items) => {
+        if (!cancelled) {
+          setPendingItems(items);
+          setPendingError(null);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setPendingError("無法載入待審綁定");
+          setPendingItems([]);
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setPendingLoading(false);
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
 
-  async function handleCreateAndLink(item: StaffPendingBindingItem) {
-    const fullName = (newPatientNameByPendingId[item.id] ?? "").trim();
-    if (!fullName) {
-      toast.error("請先輸入病患姓名再建檔。");
+  useEffect(() => {
+    if (!isAdmin) {
       return;
     }
-    setWorkingPendingId(item.id);
-    try {
-      await createPatientAndLinkPendingBinding(item.id, { full_name: fullName });
-      await refreshPending();
-      toast.success("建檔並綁定完成");
-    } catch (error) {
-      toast.error(getReadableApiError(error));
-    } finally {
-      setWorkingPendingId(null);
-    }
-  }
-
-  async function handleMarkNotificationRead(notificationId: number) {
-    try {
-      await markNotificationRead(notificationId);
-      toast.success("已標記為已讀");
-    } catch (error) {
-      toast.error(getReadableApiError(error));
-    }
-  }
+    let cancelled = false;
+    void fetchAdminActiveUsersSeries({ activeWindowDays: 7, lookbackDays: 7, interval: "day" })
+      .then((data) => {
+        if (!cancelled) {
+          const last = data.items[data.items.length - 1];
+          setActiveUsers(last?.active_users ?? 0);
+          setActiveError(null);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setActiveError("failed");
+          setActiveUsers(null);
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setActiveLoading(false);
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [isAdmin]);
 
-  function handleExportReport() {
-    try {
-      exportCSV(patients);
-      toast.success("報表已匯出");
-    } catch {
-      toast.error("匯出失敗，請稍後再試");
-    }
-  }
+  const availableSet = useMemo(() => new Set(availableDates), [availableDates]);
 
   return (
-    <div className="max-w-6xl mx-auto flex flex-col gap-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-lg font-semibold text-zinc-900">儀表板</h1>
-          <p className="text-xs text-zinc-400 mt-0.5">腹膜透析出口感染監測</p>
-        </div>
-        <div className="flex items-center gap-2">
-          <Link
-            href="/admin/patients"
-            className="inline-flex items-center gap-2 rounded-xl border border-zinc-200 px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-50"
-          >
-            <Hospital className="h-4 w-4" />
-            病患管理
-          </Link>
-          <button
-            onClick={handleExportReport}
-            className="flex items-center gap-2 px-4 py-2 rounded-xl border border-zinc-200 text-zinc-700 text-sm hover:bg-zinc-50 transition-colors"
-          >
-            <Download className="w-4 h-4" strokeWidth={1.5} />
-            匯出報表
-          </button>
-        </div>
-      </div>
-
-      {errorMessage ? (
-        <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{errorMessage}</div>
-      ) : null}
-      {notificationError ? (
-        <div className="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700">{notificationError}</div>
-      ) : null}
-      {analyticsError ? (
-        <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{analyticsError}</div>
-      ) : null}
+    <main className="space-y-4 p-4 md:p-6">
+      <TodayWorkbenchHeader selectedDate={selectedDate} dayScopeLabel={dayScopeLabel} />
 
-      <div className="flex flex-wrap gap-3 items-center order-2">
-        <div className="flex items-center gap-1 bg-white border border-zinc-200 rounded-xl p-1 flex-wrap">
-          {PERIOD_OPTIONS.map((option) => (
-            <button
-              key={option}
-              onClick={() => setMonths(option)}
-              className={clsx(
-                "px-3 py-1.5 rounded-lg text-xs font-medium transition-colors",
-                months === option ? "bg-zinc-900 text-white" : "text-zinc-500 hover:text-zinc-800"
-              )}
-            >
-              {option === "today" ? "今日" : `${option}月`}
-            </button>
-          ))}
-        </div>
-        <button
-          onClick={() => setShowFilters(!showFilters)}
-          className={clsx(
-            "flex items-center gap-2 px-4 py-2 rounded-xl border text-sm transition-colors",
-            showFilters ? "border-zinc-900 bg-zinc-900 text-white" : "border-zinc-200 text-zinc-600 hover:bg-zinc-50"
-          )}
-        >
-          <Filter className="w-3.5 h-3.5" strokeWidth={1.5} />
-          篩選
-        </button>
-      </div>
+      <DashboardDayCalendar
+        selectedDate={selectedDate}
+        monthKey={calendarMonthKey}
+        metricsByDate={metricsByDate}
+        availableDates={availableSet}
+        loading={calendarLoading}
+        onSelectDate={(dateKey) => {
+          setBrowseMonthKey(null);
+          setSelectedDate(dateKey);
+        }}
+        onMonthChange={(nextMonth) => {
+          const first = availableDates.find((d) => getMonthKeyFromDateKey(d) === nextMonth);
+          if (first) {
+            setBrowseMonthKey(null);
+            setSelectedDate(first);
+          } else {
+            setBrowseMonthKey(nextMonth);
+          }
+        }}
+      />
 
-      {showFilters && (
-        <div className="bg-white border border-zinc-100 rounded-2xl p-5 flex flex-wrap gap-5 order-2">
-          <div className="flex flex-col gap-1.5">
-            <label className="text-xs text-zinc-400 font-medium">年齡區間</label>
-            <div className="flex items-center gap-2">
-              <input
-                type="number"
-                placeholder="最小"
-                value={ageMin}
-                onChange={(event) => setAgeMin(event.target.value)}
-                className="w-20 px-3 py-2 rounded-lg border border-zinc-200 text-sm text-zinc-900 outline-none focus:border-zinc-400"
-              />
-              <span className="text-zinc-300 text-sm">–</span>
-              <input
-                type="number"
-                placeholder="最大"
-                value={ageMax}
-                onChange={(event) => setAgeMax(event.target.value)}
-                className="w-20 px-3 py-2 rounded-lg border border-zinc-200 text-sm text-zinc-900 outline-none focus:border-zinc-400"
-              />
-            </div>
-          </div>
-
-          <div className="flex flex-col gap-1.5">
-            <label className="text-xs text-zinc-400 font-medium">感染狀態</label>
-            <div className="flex items-center gap-1.5">
-              {INFECTION_OPTIONS.map((option) => (
-                <button
-                  key={option.value}
-                  onClick={() => setInfectionStatus(option.value)}
-                  className={clsx(
-                    "px-3 py-2 rounded-lg border text-sm transition-colors",
-                    infectionStatus === option.value
-                      ? "bg-zinc-900 border-zinc-900 text-white"
-                      : "border-zinc-200 text-zinc-600 hover:bg-zinc-50"
-                  )}
-                >
-                  {option.label}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          <div className="flex items-end">
-            <button
-              onClick={() => {
-                setAgeMin("");
-                setAgeMax("");
-                setInfectionStatus("all");
-              }}
-              className="px-3 py-2 rounded-lg text-sm text-zinc-400 hover:text-zinc-700 transition-colors"
-            >
-              清除篩選
-            </button>
-          </div>
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-start">
+        <div className="min-w-0 flex-[1.5]">
+          <TodayPatientPool
+            loading={attentionLoading}
+            error={attentionError}
+            suspectedPatients={attention?.suspected_patients ?? 0}
+            elevatedPatients={attention?.elevated_patients ?? 0}
+            otherPatients={attention?.other_patients ?? 0}
+            items={attention?.items ?? []}
+            dayScopeLabel={dayScopeLabel}
+            isTodaySelected={isTodaySelected}
+          />
         </div>
-      )}
 
-      <div className="grid grid-cols-2 gap-3 order-2 md:grid-cols-4">
-        {[
-          { icon: Users, label: "篩選病患數", value: stats.totalPatients },
-          {
-            icon: Upload,
-            label: months === "today" ? "今日上傳次數" : `${months} 月上傳次數`,
-            value: riskSummary?.total_uploads ?? stats.totalUploads,
-          },
-          { icon: AlertTriangle, label: suspectedKpi.label, value: suspectedKpi.value },
-          { icon: AlertTriangle, label: elevatedKpi.label, value: elevatedKpi.value },
-        ].map(({ icon: Icon, label, value }) => (
-          <div key={label} className="bg-white border border-zinc-100 rounded-2xl p-5 flex flex-col gap-3">
-            <div className="w-8 h-8 rounded-xl flex items-center justify-center bg-zinc-50">
-              <Icon className="w-4 h-4 text-zinc-500" strokeWidth={1.5} />
-            </div>
-            <div>
-              <div className="text-2xl font-semibold text-zinc-900">{value}</div>
-              <div className="text-xs text-zinc-400 mt-0.5">{label}</div>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      <section className="order-2 flex flex-col gap-4">
-        <div className="mb-2">
-          <h2 className="text-base font-semibold text-zinc-900">分析圖表</h2>
-          <p className="text-xs text-zinc-500">活躍用戶與每日疑似感染趨勢</p>
-        </div>
-
-        <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
-          <div className="space-y-3">
-            <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
-              <h3 className="text-sm font-medium text-zinc-900">{riskChartTitle}</h3>
-              <div className="flex flex-wrap items-center gap-2">
-                <div className="flex items-center gap-1 rounded-lg border border-zinc-200 p-1 text-xs">
-                  <button
-                    className={clsx(
-                      "rounded px-2 py-1",
-                      riskChartMode === "split" ? "bg-zinc-900 text-white" : "text-zinc-600 hover:bg-zinc-100"
-                    )}
-                    onClick={() => setRiskChartMode("split")}
-                  >
-                    分開
-                  </button>
-                  <button
-                    className={clsx(
-                      "rounded px-2 py-1",
-                      riskChartMode === "aggregate" ? "bg-zinc-900 text-white" : "text-zinc-600 hover:bg-zinc-100"
-                    )}
-                    onClick={() => setRiskChartMode("aggregate")}
-                  >
-                    合計
-                  </button>
-                </div>
-                <div className="flex items-center gap-1 rounded-lg border border-zinc-200 p-1 text-xs">
-                  <button
-                    className={clsx(
-                      "rounded px-2 py-1",
-                      todayChartType === "bar" ? "bg-zinc-900 text-white" : "text-zinc-600 hover:bg-zinc-100"
-                    )}
-                    onClick={() => setTodayChartType("bar")}
-                  >
-                    長條
-                  </button>
-                  <button
-                    className={clsx(
-                      "rounded px-2 py-1",
-                      todayChartType === "pie" ? "bg-zinc-900 text-white" : "text-zinc-600 hover:bg-zinc-100"
-                    )}
-                    onClick={() => setTodayChartType("pie")}
-                  >
-                    圓餅
-                  </button>
-                </div>
-              </div>
-            </div>
-            <p className="mb-2 text-xs text-zinc-500">
-              {riskChartMode === "aggregate" ? "風險比例" : "疑似比例"}{" "}
-              {(riskChartRatio * 100).toFixed(1)}%（共 {riskSummary?.total_uploads ?? 0} 筆）
+        <div className="flex min-w-0 flex-1 flex-col gap-3">
+          <TodayUploadCount
+            totalUploads={attention?.total_uploads ?? null}
+            loading={attentionLoading}
+            dayScopeLabel={dayScopeLabel}
+            selectedDate={selectedDate}
+          />
+          <PendingBindingsSummary items={pendingItems} loading={pendingLoading} error={pendingError} />
+          {isAdmin ? (
+            <ActiveUploadersSummary activeUsers={activeUsers} loading={activeLoading} error={activeError} />
+          ) : (
+            <p className="text-xs text-zinc-400">
+              <Link href="/admin/history-overview" className="hover:text-zinc-700">
+                查看區間分析 →
+              </Link>
             </p>
-            <ChartContainer className="h-64 w-full" config={todayChartConfig}>
-              {todayChartType === "bar" ? (
-                <BarChart data={riskChartData}>
-                  <CartesianGrid vertical={false} />
-                  <XAxis dataKey="label" tickLine={false} axisLine={false} />
-                  <YAxis allowDecimals={false} tickLine={false} axisLine={false} />
-                  <ChartTooltip content={<ChartTooltipContent />} />
-                  <Bar dataKey="count" radius={6}>
-                    {riskChartData.map((item) => (
-                      <Cell key={item.key} fill={item.fill} />
-                    ))}
-                  </Bar>
-                </BarChart>
-              ) : (
-                <PieChart>
-                  <ChartTooltip content={<ChartTooltipContent />} />
-                  <Pie data={riskChartData} dataKey="count" nameKey="label" outerRadius={90}>
-                    {riskChartData.map((item) => (
-                      <Cell key={item.key} fill={item.fill} />
-                    ))}
-                  </Pie>
-                  <ChartLegend content={<ChartLegendContent />} />
-                </PieChart>
-              )}
-            </ChartContainer>
-          </div>
-
-          <div className="space-y-3">
-            <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
-              <h3 className="text-sm font-medium text-zinc-900">活躍用戶趨勢</h3>
-              <div className="flex flex-wrap items-center gap-2 text-xs">
-                <select
-                  className="rounded-lg border border-zinc-200 px-2 py-1"
-                  value={activeWindowDays}
-                  onChange={(event) => setActiveWindowDays(Number(event.target.value) as (typeof ACTIVE_WINDOW_OPTIONS)[number])}
-                >
-                  {ACTIVE_WINDOW_OPTIONS.map((value) => (
-                    <option key={value} value={value}>
-                      近{value}天活躍
-                    </option>
-                  ))}
-                </select>
-                <select
-                  className="rounded-lg border border-zinc-200 px-2 py-1"
-                  value={activeLookbackDays}
-                  onChange={(event) => setActiveLookbackDays(Number(event.target.value) as (typeof LOOKBACK_OPTIONS)[number])}
-                >
-                  {LOOKBACK_OPTIONS.map((value) => (
-                    <option key={value} value={value}>
-                      最近{value}天
-                    </option>
-                  ))}
-                </select>
-                <select
-                  className="rounded-lg border border-zinc-200 px-2 py-1"
-                  value={activeInterval}
-                  onChange={(event) => setActiveInterval(event.target.value as "day" | "week")}
-                >
-                  <option value="day">日</option>
-                  <option value="week">週</option>
-                </select>
-              </div>
-            </div>
-            <ChartContainer className="h-64 w-full" config={activeChartConfig}>
-              <LineChart data={activeUserChartData}>
-                <CartesianGrid vertical={false} />
-                <XAxis dataKey="shortDate" tickLine={false} axisLine={false} minTickGap={24} />
-                <YAxis allowDecimals={false} tickLine={false} axisLine={false} />
-                <ChartTooltip content={<ChartTooltipContent />} />
-                <Line dataKey="active_users" stroke="var(--color-active_users)" strokeWidth={2} dot={false} />
-              </LineChart>
-            </ChartContainer>
-          </div>
-
-          <div className="space-y-3 xl:col-span-2">
-            <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
-              <h3 className="text-sm font-medium text-zinc-900">每日疑似感染比例與數量</h3>
-              <div className="flex flex-wrap items-center gap-2 text-xs">
-                <div className="flex items-center gap-1 rounded-lg border border-zinc-200 p-1">
-                  <button
-                    className={clsx(
-                      "rounded px-2 py-1",
-                      riskChartMode === "split" ? "bg-zinc-900 text-white" : "text-zinc-600 hover:bg-zinc-100"
-                    )}
-                    onClick={() => setRiskChartMode("split")}
-                  >
-                    分開
-                  </button>
-                  <button
-                    className={clsx(
-                      "rounded px-2 py-1",
-                      riskChartMode === "aggregate" ? "bg-zinc-900 text-white" : "text-zinc-600 hover:bg-zinc-100"
-                    )}
-                    onClick={() => setRiskChartMode("aggregate")}
-                  >
-                    合計
-                  </button>
-                </div>
-                <select
-                  className="rounded-lg border border-zinc-200 px-2 py-1 text-xs"
-                  value={dailyLookbackDays}
-                  onChange={(event) => setDailyLookbackDays(Number(event.target.value) as (typeof LOOKBACK_OPTIONS)[number])}
-                >
-                  {LOOKBACK_OPTIONS.map((value) => (
-                    <option key={value} value={value}>
-                      最近{value}天
-                    </option>
-                  ))}
-                </select>
-              </div>
-            </div>
-            <ChartContainer className="h-72 w-full" config={dailyChartConfig}>
-              <LineChart data={dailySuspectedChartData}>
-                <CartesianGrid vertical={false} />
-                <XAxis dataKey="shortDate" tickLine={false} axisLine={false} minTickGap={24} />
-                <YAxis yAxisId="left" tickLine={false} axisLine={false} allowDecimals={false} />
-                <YAxis yAxisId="right" orientation="right" tickLine={false} axisLine={false} unit="%" />
-                <ChartTooltip content={<ChartTooltipContent />} />
-                {riskChartMode === "aggregate" ? (
-                  <Line yAxisId="left" dataKey="risk_total" stroke="var(--color-risk_total)" strokeWidth={2} dot={false} />
-                ) : (
-                  <>
-                    <Line
-                      yAxisId="left"
-                      dataKey="suspected_uploads"
-                      stroke="var(--color-suspected_uploads)"
-                      strokeWidth={2}
-                      dot={false}
-                    />
-                    <Line
-                      yAxisId="left"
-                      dataKey="symptom_elevated_uploads"
-                      stroke="var(--color-symptom_elevated_uploads)"
-                      strokeWidth={2}
-                      dot={false}
-                    />
-                  </>
-                )}
-                <Line yAxisId="right" dataKey="ratio_pct" stroke="var(--color-ratio_pct)" strokeWidth={2} dot={false} />
-                <ChartLegend content={<ChartLegendContent />} />
-              </LineChart>
-            </ChartContainer>
-          </div>
+          )}
         </div>
-      </section>
-
-      <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4 order-3">
-        <section className="bg-white border border-zinc-100 rounded-2xl overflow-hidden">
-          <div className="px-4 py-3 border-b border-zinc-100 flex items-center justify-between gap-2">
-            <div className="flex items-center gap-2">
-              <Bell className="w-4 h-4 text-zinc-500" />
-              <h3 className="text-sm font-medium text-zinc-900">疑似感染通知</h3>
-            </div>
-            <span
-              className={clsx(
-                "max-w-16 whitespace-normal break-words rounded-full px-2 py-0.5 text-center text-xs leading-tight",
-                unreadCount > 0 ? "bg-red-50 text-red-600" : "bg-zinc-100 text-zinc-500"
-              )}
-            >
-              未讀 {unreadCount}
-            </span>
-          </div>
-          <div className="divide-y divide-zinc-50">
-            {notifications.length === 0 ? (
-              <p className="px-4 py-6 text-sm text-zinc-400">目前沒有疑似感染通知。</p>
-            ) : (
-              visibleNotifications.map((item) => (
-                <div key={item.id} className="px-4 py-3 flex flex-col gap-2">
-                  <div className="flex items-start justify-between gap-2">
-                    <div>
-                      <p className="text-sm text-zinc-900">{item.patient_full_name ?? "未命名"} ({item.patient_case_number})</p>
-                      <p className="text-xs text-zinc-500">{new Date(item.created_at).toLocaleString("zh-TW")}</p>
-                      {item.summary ? <p className="text-xs text-zinc-500 mt-1">{item.summary}</p> : null}
-                    </div>
-                    <span
-                      className={clsx(
-                        "max-w-16 whitespace-normal break-words rounded-full px-2 py-0.5 text-center text-[11px] leading-tight",
-                        item.status === "new" ? "bg-red-50 text-red-600" : "bg-zinc-100 text-zinc-500"
-                      )}
-                    >
-                      {item.status === "new" ? "新通知" : item.status === "reviewed" ? "已讀" : "已處理"}
-                    </span>
-                  </div>
-                  <div className="flex items-center justify-between">
-                    <Link href={`/admin/patients/${item.patient_id}`} className="text-xs text-zinc-500 hover:text-zinc-800">
-                      檢視病患
-                    </Link>
-                    {item.status === "new" ? (
-                      <button
-                        onClick={() => void handleMarkNotificationRead(item.id)}
-                        disabled={Boolean(markingIds[item.id])}
-                        className="rounded-lg border border-zinc-200 px-2 py-1 text-xs text-zinc-700 hover:bg-zinc-50 disabled:text-zinc-300"
-                      >
-                        標記已讀
-                      </button>
-                    ) : null}
-                  </div>
-                </div>
-              ))
-            )}
-          </div>
-          {notifications.length > 3 ? (
-            <button
-              type="button"
-              onClick={() => setShowAllNotifications((current) => !current)}
-              className="w-full border-t border-zinc-100 px-4 py-2 text-xs text-zinc-500 hover:bg-zinc-50"
-            >
-              {showAllNotifications ? "收合" : "查看全部"}
-            </button>
-          ) : null}
-        </section>
-
-        <section className="bg-white border border-zinc-100 rounded-2xl overflow-hidden">
-          <div className="px-4 py-3 border-b border-zinc-100 flex items-center justify-between gap-2">
-            <div className="flex items-center gap-2">
-              <Clock3 className="w-4 h-4 text-zinc-500" />
-              <h3 className="text-sm font-medium text-zinc-900">最新上傳佇列</h3>
-            </div>
-            <Link href="/admin/review" className="text-xs text-zinc-500 hover:text-zinc-800">
-              進入快速審核
-            </Link>
-          </div>
-          <div className="divide-y divide-zinc-50">
-            {queue.length === 0 ? (
-              <p className="px-4 py-6 text-sm text-zinc-400">目前沒有上傳資料。</p>
-            ) : (
-              visibleQueue.map((item) => (
-                <div key={item.upload_id} className="px-4 py-3 flex items-center justify-between gap-2">
-                  <div>
-                    <p className="text-sm text-zinc-900">{item.full_name ?? "未命名"}</p>
-                    <p className="text-xs text-zinc-500">
-                      {item.case_number} · {item.screening_result} · {new Date(item.created_at).toLocaleString("zh-TW")}
-                    </p>
-                  </div>
-                  <Link href={`/admin/patients/${item.patient_id}`} className="text-xs text-zinc-500 hover:text-zinc-800">
-                    檢視
-                  </Link>
-                </div>
-              ))
-            )}
-          </div>
-          {queue.length > 3 ? (
-            <button
-              type="button"
-              onClick={() => setShowAllQueue((current) => !current)}
-              className="w-full border-t border-zinc-100 px-4 py-2 text-xs text-zinc-500 hover:bg-zinc-50"
-            >
-              {showAllQueue ? "收合" : "查看全部"}
-            </button>
-          ) : null}
-        </section>
-
-        <section className="bg-white border border-zinc-100 rounded-2xl overflow-hidden">
-          <div className="px-4 py-3 border-b border-zinc-100 flex items-center justify-between gap-2">
-            <div className="flex items-center gap-2">
-              <Link2 className="w-4 h-4 text-zinc-500" />
-              <h3 className="text-sm font-medium text-zinc-900">待審核綁定</h3>
-            </div>
-            <Link href="/admin/registration-review" className="text-xs text-zinc-500 hover:text-zinc-800">
-              進入註冊審核
-            </Link>
-          </div>
-          <div className="divide-y divide-zinc-50">
-            {pendingItems.length === 0 ? (
-              <p className="px-4 py-6 text-sm text-zinc-400">目前沒有待審核綁定。</p>
-            ) : (
-              visiblePending.map((item) => (
-                <div key={item.id} className="px-4 py-3 flex flex-col gap-2">
-                  <p className="text-sm text-zinc-900">
-                    {item.case_number} / {item.birth_date}
-                  </p>
-                  <p className="text-xs text-zinc-500 font-mono">{item.line_user_id}</p>
-                  <div className="flex flex-wrap items-center gap-2">
-                    {item.candidates.length > 0 ? (
-                      <>
-                        <select
-                          className="rounded-lg border border-zinc-200 px-2 py-1 text-xs"
-                          value={selectedCandidate[item.id] ?? ""}
-                          onChange={(event) =>
-                            setSelectedCandidate((current) => ({ ...current, [item.id]: event.target.value }))
-                          }
-                        >
-                          <option value="">選擇病患</option>
-                          {item.candidates.map((candidate) => (
-                            <option key={candidate.patient_id} value={candidate.patient_id}>
-                              {candidate.case_number} - {candidate.full_name ?? "未命名"}
-                            </option>
-                          ))}
-                        </select>
-                        <button
-                          onClick={() => void handleLink(item)}
-                          disabled={workingPendingId === item.id}
-                          className="rounded-lg border border-zinc-200 px-2 py-1 text-xs text-zinc-700 hover:bg-zinc-50"
-                        >
-                          指定綁定
-                        </button>
-                        <button
-                          onClick={() => void handleApprove(item)}
-                          disabled={workingPendingId === item.id || item.candidates.length !== 1}
-                          className="rounded-lg border border-zinc-200 px-2 py-1 text-xs text-zinc-700 hover:bg-zinc-50 disabled:text-zinc-300"
-                        >
-                          一鍵核准
-                        </button>
-                      </>
-                    ) : (
-                      <div className="flex flex-wrap items-center gap-2">
-                        <input
-                          value={newPatientNameByPendingId[item.id] ?? ""}
-                          onChange={(event) =>
-                            setNewPatientNameByPendingId((current) => ({ ...current, [item.id]: event.target.value }))
-                          }
-                          className="rounded-lg border border-zinc-200 px-2 py-1 text-xs"
-                          placeholder="新病患姓名"
-                        />
-                        <button
-                          onClick={() => void handleCreateAndLink(item)}
-                          disabled={workingPendingId === item.id}
-                          className="rounded-lg border border-zinc-200 px-2 py-1 text-xs text-zinc-700 hover:bg-zinc-50"
-                        >
-                          建檔並綁定
-                        </button>
-                      </div>
-                    )}
-                    <button
-                      onClick={() => void handleReject(item)}
-                      disabled={workingPendingId === item.id}
-                      className="rounded-lg border border-red-200 px-2 py-1 text-xs text-red-600 hover:bg-red-50"
-                    >
-                      駁回
-                    </button>
-                  </div>
-                </div>
-              ))
-            )}
-          </div>
-          {pendingItems.length > 3 ? (
-            <button
-              type="button"
-              onClick={() => setShowAllPending((current) => !current)}
-              className="w-full border-t border-zinc-100 px-4 py-2 text-xs text-zinc-500 hover:bg-zinc-50"
-            >
-              {showAllPending ? "收合" : "查看全部"}
-            </button>
-          ) : null}
-        </section>
       </div>
-    </div>
+    </main>
+  );
+}
+
+export default function AdminDashboard() {
+  return (
+    <Suspense
+      fallback={
+        <main className="space-y-4 p-4 md:p-6">
+          <p className="text-sm text-zinc-400">載入儀表板…</p>
+        </main>
+      }
+    >
+      <AdminDashboardInner />
+    </Suspense>
   );
 }
diff --git a/apps/frontend/lib/admin/use-admin-selected-date.ts b/apps/frontend/lib/admin/use-admin-selected-date.ts
new file mode 100644
index 0000000..deb7cce
--- /dev/null
+++ b/apps/frontend/lib/admin/use-admin-selected-date.ts
@@ -0,0 +1,60 @@
+"use client";
+
+import { useCallback, useMemo } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+
+import { getMonthKeyFromDateKey, getTaipeiTodayKey, parseTaipeiDateKey } from "@/lib/utils/upload-calendar";
+
+function isValidDateKey(raw: string | null): raw is string {
+  if (!raw) {
+    return false;
+  }
+  try {
+    parseTaipeiDateKey(raw);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function useAdminSelectedDate() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const todayKey = getTaipeiTodayKey();
+
+  const selectedDate = useMemo(() => {
+    const fromUrl = searchParams.get("date");
+    return isValidDateKey(fromUrl) ? fromUrl : todayKey;
+  }, [searchParams, todayKey]);
+
+  const isTodaySelected = selectedDate === todayKey;
+  const dayScopeLabel = isTodaySelected ? "今日" : "當日";
+  const monthKey = getMonthKeyFromDateKey(selectedDate);
+
+  const setSelectedDate = useCallback(
+    (nextDate: string) => {
+      if (!isValidDateKey(nextDate)) {
+        return;
+      }
+      const params = new URLSearchParams(searchParams.toString());
+      if (nextDate === todayKey) {
+        params.delete("date");
+      } else {
+        params.set("date", nextDate);
+      }
+      const query = params.toString();
+      router.replace(query ? `${pathname}?${query}` : pathname, { scroll: false });
+    },
+    [pathname, router, searchParams, todayKey]
+  );
+
+  return {
+    selectedDate,
+    setSelectedDate,
+    isTodaySelected,
+    dayScopeLabel,
+    monthKey,
+    todayKey,
+  };
+}
diff --git a/apps/frontend/lib/api/staff.ts b/apps/frontend/lib/api/staff.ts
index 81fb868..600ea42 100644
--- a/apps/frontend/lib/api/staff.ts
+++ b/apps/frontend/lib/api/staff.ts
@@ -114,6 +114,45 @@ export type StaffUploadQueueItem = {
 
 export type StaffUploadQueueResponse = { items: StaffUploadQueueItem[] };
 
+export type StaffTodayAttentionTier = "suspected" | "elevated" | "other";
+
+export type StaffTodayAttentionRiskHighlight = {
+  upload_id: number;
+  screening_result: string;
+  probability: number | null;
+  threshold: number | null;
+  symptom_pain: boolean;
+  symptom_discharge: boolean;
+  symptom_pus: boolean;
+  symptom_cloudy_dialysate: boolean;
+  has_high_risk_symptoms: boolean;
+  symptom_aware_priority: "normal" | "suspected";
+  created_at: string;
+};
+
+export type StaffTodayAttentionPatientItem = {
+  patient_id: number;
+  case_number: string;
+  full_name: string | null;
+  tier: StaffTodayAttentionTier;
+  representative_upload_id: number;
+  sort_upload_at: string;
+  has_annotation: boolean;
+  picture_url: string | null;
+  day_upload_count: number;
+  preview_upload_ids: number[];
+  risk_highlight: StaffTodayAttentionRiskHighlight | null;
+};
+
+export type StaffTodayAttentionResponse = {
+  date: string;
+  total_uploads: number;
+  suspected_patients: number;
+  elevated_patients: number;
+  other_patients: number;
+  items: StaffTodayAttentionPatientItem[];
+};
+
 export type StaffRapidReviewQueueItem = StaffUploadQueueItem & {
   risk_rank: number;
 };
@@ -199,10 +238,13 @@ export type StaffHistoryOverviewResponse = {
 
 export type StaffHistoryOverviewCalendarItem = {
   local_date: string;
+  upload_count: number;
+  uploaded_users: number;
   risky_patient_count: number;
   has_infection_risk: boolean;
   symptom_elevated_patient_count: number;
   has_symptom_elevated_risk: boolean;
+  unhandled_patient_count: number;
 };
 
 export type StaffHistoryOverviewCalendarResponse = {
@@ -552,6 +594,15 @@ export async function fetchUploadQueue(params?: {
   }
 }
 
+export async function fetchTodayAttention(params?: {
+  localDate?: string;
+}): Promise<StaffTodayAttentionResponse> {
+  const { data } = await apiClient.get<StaffTodayAttentionResponse>("/v1/staff/uploads/today-attention", {
+    params: params?.localDate ? { local_date: params.localDate } : undefined,
+  });
+  return data;
+}
+
 export async function fetchHistoryOverviewDays(): Promise<StaffHistoryOverviewDaysResponse> {
   const { data } = await apiClient.get<StaffHistoryOverviewDaysResponse>("/v1/staff/uploads/history-overview/days");
   return data;
diff --git a/docs/product/history-overview-api-contract.md b/docs/product/history-overview-api-contract.md
index e1ff87a..f6f1eae 100644
--- a/docs/product/history-overview-api-contract.md
+++ b/docs/product/history-overview-api-contract.md
@@ -115,15 +115,20 @@ Response shape:
   "items": [
     {
       "local_date": "2026-05-29",
+      "upload_count": 12,
+      "uploaded_users": 7,
       "risky_patient_count": 3,
       "has_infection_risk": true,
       "symptom_elevated_patient_count": 2,
-      "has_symptom_elevated_risk": true
+      "has_symptom_elevated_risk": true,
+      "unhandled_patient_count": 1
     }
   ]
 }
 ```
 
+`unhandled_patient_count`: patients whose attention tier that day is `suspected` or `elevated` and whose representative upload has no staff annotation.
+
 ## Semantic Rules
 
 - Timezone for date bucketing is always `Asia/Taipei` (`UTC+8`).
diff --git a/docs/superpowers/plans/2026-07-25-admin-daily-workbench-v2.md b/docs/superpowers/plans/2026-07-25-admin-daily-workbench-v2.md
new file mode 100644
index 0000000..037473c
--- /dev/null
+++ b/docs/superpowers/plans/2026-07-25-admin-daily-workbench-v2.md
@@ -0,0 +1,30 @@
+# 儀表板 v2 實作計畫（設計已鎖定）
+
+> **Design source of truth:** companion `admin-dashboard-final-overall-v16-metrics-gap.html`（月曆 `mt-auto pt-2`、全寬 7 欄 grid、Image/Users/TriangleAlert chips）
+>
+> **Agent execution:** Use executing-plans skill task-by-task after approval.
+>
+> Canonical Cursor plan: `.cursor/plans/admin_dashboard_v2_d17eaf43.plan.md` (do not edit that file during implementation; keep this docs copy in sync if the approved plan changes).
+
+**Goal:** `/admin?date=YYYY-MM-DD` 可切換台北日；月曆選日驅動病患池與上傳次數；大螢幕病患池多欄；移除首頁縮圖牆。
+
+**Baseline:** v1 workbench 已存在（`apps/frontend/app/admin/page.tsx` + `today-*` 元件），但 **today-only**、horizontal patient row、tier badge pills、dimmed annotated cards、`RecentUploadThumbs`。月曆僅在 `history-overview/page.tsx`（risk 染色舊版，需移出）。
+
+See full phased plan in `.cursor/plans/admin_dashboard_v2_d17eaf43.plan.md`.
+
+## Phases (summary)
+
+1. Spec + plan doc 落檔
+2. Backend: `local_date` + attention 欄位 + calendar metrics + pytest
+3. FE: API types + hook + `DashboardDayCalendar`
+4. FE: homepage wiring + patient card rewrite
+5. FE: history-overview URL sync + 移除舊月曆
+6. Tests + lint + smoke
+
+## Deliberately out of scope
+
+- Route rename（保留 `/today-attention`）
+- 首頁 inline annotation modal
+- 首頁 upload thumb grid
+- Upload queue date filter
+- 大規模 `Today*` → `Daily*` 檔名 rename
diff --git a/docs/superpowers/plans/2026-07-25-admin-dashboard-homepage-renovate.md b/docs/superpowers/plans/2026-07-25-admin-dashboard-homepage-renovate.md
new file mode 100644
index 0000000..5b56843
--- /dev/null
+++ b/docs/superpowers/plans/2026-07-25-admin-dashboard-homepage-renovate.md
@@ -0,0 +1,32 @@
+# Admin Dashboard Homepage Renovate Implementation Plan
+
+> **For agentic workers:** Use the approved design at `docs/superpowers/specs/2026-07-25-admin-dashboard-homepage-renovate-design.md`.
+
+**Goal:** Replace the metric-soup `/admin` homepage with an actionable today workbench, and make `/admin/history-overview` the period analytics home (臨床 | 使用趨勢).
+
+**Architecture:** New staff-scoped `GET /v1/staff/uploads/today-attention` returns today’s uploaders partitioned into suspected / elevated / other with sort + representative upload. Frontend rebuilds `/admin` as Layout B (left pool / right stack). Charts and period KPIs move into `history-overview` tabs.
+
+**Defaults:**
+- Visible recent thumbs = 5 + `+n`
+- Sidebar label 歷史總覽 → 區間分析
+- Homepage「近 7 日活躍」admin-only
+- Binding panel = summary + deep link only
+
+## Implemented deliverables
+
+### Backend
+- Schemas: `StaffTodayAttentionPatientItem`, `StaffTodayAttentionResponse`
+- Service: `list_today_attention_patients`
+- Route: `GET /v1/staff/uploads/today-attention`
+- Tests: `apps/backend/tests/test_staff_today_attention_api.py`
+
+### Frontend
+- `fetchTodayAttention` + types in `lib/api/staff.ts`
+- Today workbench components under `app/admin/_components/`
+- Rewritten `app/admin/page.tsx` (Layout B)
+- `history-overview` tabs: `clinical-period-panel.tsx`, `usage-trends-tab.tsx`
+- Nav rename to 區間分析 in `layout.tsx`
+
+## Out of scope
+
+- Notification bell removal, overdue compliance, inline bindings, thumb→review-fast, Grafana monitoring
diff --git a/docs/superpowers/specs/2026-07-25-admin-daily-workbench-v2-design.md b/docs/superpowers/specs/2026-07-25-admin-daily-workbench-v2-design.md
new file mode 100644
index 0000000..665afb9
--- /dev/null
+++ b/docs/superpowers/specs/2026-07-25-admin-daily-workbench-v2-design.md
@@ -0,0 +1,121 @@
+# Admin daily workbench v2 (儀表板)
+
+**Date:** 2026-07-25  
+**Status:** Approved (design locked via companion v16)  
+**Companion:** `.superpowers/brainstorm/1648867-1784983471/content/admin-dashboard-final-overall-v16-metrics-gap.html`  
+**Supersedes (homepage IA):** parts of `2026-07-25-admin-dashboard-homepage-renovate-design.md` that conflict with date-selectable dashboard and removal of homepage thumb grid.
+
+## Problem
+
+v1 `/admin` is a today-only workbench. Staff cannot review a past Taipei day without leaving the homepage for history-overview’s risk-colored calendar. Patient rows are horizontal with tier badge pills; risk patients lack a clear “highest risk” hero; homepage still shows a recent-upload thumb wall that duplicates the patient pool.
+
+## Goals
+
+1. Make `/admin` a **date-selectable 儀表板** (`?date=YYYY-MM-DD`, default today Taipei).
+2. Move metric month calendar onto the homepage (full-width cells with upload / users / risk chips).
+3. Redesign patient pool as vertical cards with avatar + day upload count + risk hero or preview thumbs.
+4. Keep full-day thumbnail review + annotation on `/admin/history-overview?tab=clinical`.
+5. Remove homepage `RecentUploadThumbs`.
+
+## Non-goals
+
+- Renaming `/v1/staff/uploads/today-attention`.
+- Inline annotation modal on `/admin`.
+- Homepage upload thumb grid.
+- Date filter on upload queue endpoint.
+- Mass rename of `Today*` component filenames.
+
+## Information architecture
+
+| Surface | Role |
+| --- | --- |
+| `/admin?date=` | **儀表板** — metric calendar + attention pool + light ops |
+| `/admin/history-overview?date=&tab=clinical` | **區間分析** — period KPIs + full day browser + annotation |
+| `/admin/history-overview?tab=usage` | Usage trends (unchanged) |
+
+```mermaid
+flowchart TB
+  subgraph admin ["/admin?date=YYYY-MM-DD"]
+    Cal[DashboardDayCalendar]
+    Pool[AttentionPatientGrid]
+    Count[DailyUploadCount]
+    Ops[PendingBindings + ActiveUsers]
+  end
+  subgraph history ["/admin/history-overview?date=&tab=clinical"]
+    Period[ClinicalPeriodPanel]
+    Review[FullDayThumbnailBrowser + AnnotationModal]
+  end
+  Cal -->|select date| admin
+  Pool -->|card click| Patient["/admin/patients/id"]
+  Count -->|optional deep link| history
+```
+
+### Date scope
+
+| Widget | Follows `selectedDate` |
+| --- | --- |
+| Metric calendar, patient pool, upload count | Yes |
+| Pending bindings, last-7-day active uploaders | No |
+| Clinical period KPIs / charts | No (period dimension) |
+| History-overview day browser | Yes (from URL `date`) |
+
+### Naming & copy
+
+- Sidebar + page h1: **儀表板**
+- Subtitle uses **今日** vs **當日** based on whether `selectedDate` is Taipei today
+
+## Calendar cell (v16 locked)
+
+- Section: `rounded-2xl border border-zinc-200 bg-white p-5`
+- Grid: `grid-cols-7 gap-2 w-full` (no max-width)
+- Cell: `flex flex-col min-h-[96px] rounded-xl bg-zinc-50 p-2.5 min-w-0`; selected `bg-white ring-2 ring-zinc-900`
+- Date row (top): day number `text-[13px]` + optional `尚有 {n} 未處理` `text-[9px] text-rose-400`
+- Metrics row (bottom): `mt-auto pt-2` + `grid grid-cols-3 gap-1`
+- Chips: Lucide `Image` / `Users` / `TriangleAlert`; icon above, number below; risk >0 red, =0 muted zinc
+- No badge dots; no whole-cell risk tint; days without uploads dashed + disabled
+
+**Unhandled definition:** patient tier is `suspected` or `elevated` and the representative upload has no staff annotation.
+
+**Calendar API fields per day:** `upload_count`, `uploaded_users`, `risky_patient_count`, `unhandled_patient_count`
+
+## Patient pool cards (v2 locked)
+
+- Vertical card; whole card links to `/admin/patients/[id]`
+- Top: LINE `PersonAvatar` + name; one-line subline `當日 N 張上傳 · status`
+- Status colors: 未處理 `text-red-600` / 已註解 `text-green-600` / 今日已上傳 `text-zinc-500`
+- No tier badge pills; annotated cards are **not** dimmed
+- Multi-column: `grid-cols-1 lg:grid-cols-2 xl:grid-cols-3`
+
+### Risk tiers (`suspected` / `elevated`)
+
+- Hero row only (`h-14`): `[highest-risk thumb | metadata]`
+- Hero pick: day’s non-rejected uploads by `_risk_rank` desc, then `probability` desc, then `created_at` asc
+- Metadata (zinc text only): `最高風險 · HH:mm` → main line → optional symptom subline
+
+### Other tier
+
+- Plain thumb row `h-14`; show ≤4 or 3 + `+n`
+- Backend returns up to 3 `preview_upload_ids` (created_at asc); FE derives `+n` from `day_upload_count`
+
+### Attention API extensions
+
+`StaffTodayAttentionPatientItem` adds:
+
+- `picture_url`
+- `day_upload_count`
+- `preview_upload_ids` (other tier only)
+- `risk_highlight` (risk tiers only): upload id, screening/probability/threshold, symptoms, `created_at`
+
+`GET /v1/staff/uploads/today-attention` accepts optional `local_date=YYYY-MM-DD`.
+
+## History-overview changes
+
+- Read `?date=` and `?tab=` from URL; sync via `router.replace`
+- Remove embedded risk-colored month calendar
+- Keep day prev/next, period panel, KPI, grouping, thumb wall, annotation modal
+- Add link back: `在儀表板變更日期 → /admin?date=…`
+
+## Deep links
+
+- Full day review: `/admin/history-overview?date=YYYY-MM-DD&tab=clinical`
+- Optional: upload-count card links to the same day on history-overview
diff --git a/docs/superpowers/specs/2026-07-25-admin-dashboard-homepage-renovate-design.md b/docs/superpowers/specs/2026-07-25-admin-dashboard-homepage-renovate-design.md
new file mode 100644
index 0000000..10293dc
--- /dev/null
+++ b/docs/superpowers/specs/2026-07-25-admin-dashboard-homepage-renovate-design.md
@@ -0,0 +1,220 @@
+# Admin dashboard homepage renovate
+
+**Date:** 2026-07-25  
+**Status:** Approved  
+**Companion session:** `.superpowers/brainstorm/1424761-1784972892/`
+
+## Problem
+
+`/admin` mixes informative but weakly actionable metrics (period KPIs, active-user charts, daily suspected series) with operational queues. Staff cannot quickly answer: how many patients need attention, who is most urgent, and what to do next. Visual language is denser and noisier than `/admin/patient-assignment`.
+
+## Goals
+
+1. Split **today workbench** from **period analytics**.
+2. Make the homepage patient-centric and actionable.
+3. Separate **clinical** vs **system/usage** presentation.
+4. Restyle to quiet zinc chrome aligned with patient-assignment (full UI redo, not card polish).
+
+## Non-goals
+
+- Changing `/admin/monitoring` (Grafana / infra).
+- Redesigning patient-assignment, review-fast, or registration-review pages (homepage only deep-links into them).
+- Adding overdue-compliance (N days without upload) in v1.
+- Keeping suspected-infection **notifications panel** on the homepage (removed from this surface).
+
+## Information architecture
+
+| Surface | Role |
+| --- | --- |
+| `/admin` | **今日工作台** — triage + light ops |
+| `/admin/history-overview` | **區間分析** — clinical period KPIs + day browser + usage trends |
+| `/admin/monitoring` | System observability (unchanged) |
+
+Homepage period chips / Recharts analytics panels move off `/admin` into `history-overview`.
+
+```mermaid
+flowchart LR
+  subgraph today [AdminHomepage]
+    List[TodayUploadPatients]
+    UploadCount[TodayUploadCount]
+    Thumbs[RecentUploadThumbs]
+    Bind[PendingBindingsLink]
+    Active[ActiveUsersSummary]
+  end
+  subgraph period [HistoryOverview]
+    ClinicalTab[ClinicalTab]
+    UsageTab[UsageTrendsTab]
+  end
+  List -->|row click| PatientDetail["/admin/patients/id"]
+  Thumbs -->|thumb click| PatientDetail
+  Thumbs -->|plusN| period
+  Bind -->|deep link| RegReview["/admin/registration-review"]
+  Active -->|link| period
+```
+
+## Metric taxonomy
+
+### Clinical — today (`/admin`)
+
+| Metric | Definition | Action |
+| --- | --- | --- |
+| 今日疑似病患數 | Distinct patients with ≥1 **suspected** upload today (Taipei day) | Hero tier count |
+| 今日高風險病患數 | Distinct patients with ≥1 **elevated** and **no** suspected today | Hero tier count |
+| 今日其餘上傳病患數 | Distinct patients with ≥1 non-rejected upload today who are in neither tier above | Hero tier count |
+| 今日上傳病患列表 | Union of the three tiers (same set as hero) | Primary triage list |
+| 今日上傳次數 | Non-rejected upload count today | Scalar support |
+| 最新上傳縮圖 | Recent uploads with risk badge + time | Browse → patient; `+n` → history-overview |
+| 待審綁定 | Pending LINE↔patient bindings (count + summary rows) | Deep link to registration-review |
+
+**Removed from homepage:** unread notification panel; period filters; risk pie/bar; active-users chart; daily suspected series; “篩選病患數” as a homepage hero KPI.
+
+### Clinical — period (`history-overview` → 臨床 tab)
+
+| Metric / block | Notes |
+| --- | --- |
+| Period chips (months / range) | Moved from homepage |
+| Suspected / elevated patient counts | Period window |
+| Upload count | Period window |
+| Registered / filtered patient count | Scale |
+| Risk composition chart | From homepage |
+| Existing calendar + thumbnail browser | Keep / integrate |
+
+### System / usage (`history-overview` → 使用趨勢 tab; homepage summary only)
+
+| Metric | Where |
+| --- | --- |
+| Active uploaders series | Usage tab (from homepage) |
+| Daily upload / suspected series | Usage tab (from homepage) |
+| 近 7 日活躍上傳者 (single number) | Homepage footer summary + link to 區間分析 |
+
+Infra metrics stay on `/admin/monitoring`.
+
+## Today list rules
+
+### Membership
+
+List = all distinct patients with ≥1 non-rejected upload **today** (Taipei), scoped by existing staff assignment rules (staff see assigned patients; admin see accessible set).
+
+Hero counts are a partition of that same set into three tiers:
+
+1. **suspected**
+2. **elevated** (elevated uploads, no suspected in window)
+3. **other** (today uploads, neither of the above)
+
+### Sort
+
+1. Tier: suspected → elevated → other  
+2. Within tier: **earlier** qualifying upload time first (longer wait = higher priority)  
+3. Stable tie-break: patient id
+
+### Row content (design C + single thumb A)
+
+- Small representative thumbnail (not large)
+- Patient name + tier badge（疑似 / 高風險 / 今日上傳）
+- Subline status:
+  - suspected / elevated: **已註解** iff the **representative** risk upload has a staff annotation; otherwise **未處理**; show wait-from time for that representative upload
+  - other: **今日已上傳** (no annotation gate)
+- Trailing `開啟 →`
+- Annotated risk rows may be visually de-emphasized (opacity)
+
+### Representative thumbnail
+
+- Risk tiers: the upload used for sort priority (highest severity, then earliest)
+- Other tier: latest today upload
+- Thumbnails only need preview for the representative upload (small square, history-overview visual language at reduced size)
+
+### Click
+
+Entire row (including thumb) → `/admin/patients/[id]`
+
+## Homepage layout
+
+### Desktop — Layout B (left / right board)
+
+- Quiet header: title + one-line helper (patient-assignment tone)
+- **Left (primary):** dashed pool section「今日上傳病患」with hero tier counts in header + sorted rows
+- **Right (stacked, no tabs):**
+  1. 今日上傳次數 scalar
+  2. 最新上傳 — compact thumbnail grid (history-overview style: risk badge + time), ~5 visible + `+n` overflow cell
+  3. 待審綁定 — summary rows + deep link to registration-review (no full inline approve/link/create/reject on homepage)
+  4. 近 7 日活躍上傳者 + link to history-overview
+
+### Mobile
+
+Single column: list first, then the same right-stack blocks.
+
+### Visual language
+
+Align with patient-assignment:
+
+- `bg-zinc-50` page, white panels, `rounded-xl`, zinc borders
+- Dashed pool for the primary work list
+- Compact controls, muted empty/loading copy
+- Cards only as interaction containers
+- No metric-soup KPI wall; no notification panel
+
+## Upload thumb grid
+
+- Same interaction language as history-overview thumbnails, smaller cells
+- Only recent N uploads; overflow shows `+n` (assignment-lot style), not infinite “load more” on the homepage
+- Thumb click → `/admin/patients/[id]` (not modal)
+- `+n` → `/admin/history-overview` (today / default clinical view)
+- Header link may still point to 極速審核 as secondary egress
+
+## Pending bindings
+
+- Homepage shows count + compact summary (case number / birth date / candidate hint)
+- Primary action: navigate to `/admin/registration-review`
+- Do **not** port the full inline binding workspace onto the homepage in this redesign
+
+## Notifications
+
+- Remove homepage「疑似感染通知」panel from this renovate
+- Admin layout notification bell may remain unchanged unless a follow-up explicitly removes it
+
+## History-overview renovate
+
+### Tabs
+
+1. **臨床** — period KPIs (suspected/elevated patients, uploads, patient scale) + risk composition chart + existing calendar/thumbnail browser  
+2. **使用趨勢** — active uploaders series + daily upload/suspected series (moved from homepage)
+
+Period controls live on this page (not homepage).
+
+Visual chrome should move toward the same quiet zinc language where touched; full pixel rewrite of every history control is not required in v1 if structure/tabs land cleanly, but new KPI/chart sections should match homepage tokens.
+
+## Backend / API implications
+
+Likely need a **today attention / today uploaders** endpoint (or extend suspected summary) that returns:
+
+- tier counts (suspected, elevated, other)
+- ordered patient rows with: patient identity, tier, representative upload id + image access, sort timestamp, annotation-handled flag (for risk tiers)
+
+Reuse existing:
+
+- upload queue (limit for thumb grid)
+- pending bindings list (summary only on FE)
+- active-users series (for 7-day summary number and usage tab)
+- period suspected summary + chart series (history-overview)
+
+Exact shapes are implementation-plan details; this spec locks product semantics above.
+
+## RBAC
+
+- Preserve current rules: staff assignment-scoped lists; admin analytics where already admin-gated
+- Homepage today list must respect the same visibility as current staff patient/upload queues
+- History-overview admin-only charts remain admin-gated if that is current behavior
+
+## Success criteria
+
+- Staff can open `/admin` and within one viewport see who to handle first (risk-first, oldest first) with handled state visible for risk rows
+- Counts answer “how many patients” by tier, not only “how many uploads”
+- Period/trend questions are answered on history-overview, not the homepage
+- Visual density comparable to patient-assignment; no notification panel; no three-column metric soup
+
+## Open follow-ups (out of v1)
+
+- Overdue non-uploaders (compliance)
+- Notification bell / global notification UX cleanup
+- Inline binding actions on homepage
+- Upload thumb → review-fast deep link
diff --git a/docs/superpowers/specs/assets/2026-07-25-admin-patient-card-risk-highlight.html b/docs/superpowers/specs/assets/2026-07-25-admin-patient-card-risk-highlight.html
new file mode 100644
index 0000000..05ea84c
--- /dev/null
+++ b/docs/superpowers/specs/assets/2026-07-25-admin-patient-card-risk-highlight.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="zh-Hant">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Admin patient card — risk highlight row</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-zinc-100 p-8 text-zinc-900">
+  <div class="mx-auto max-w-4xl space-y-8">
+    <header>
+      <h1 class="text-xl font-semibold">儀表板病患卡片 v2 — 風險 highlight 列</h1>
+      <p class="mt-1 text-sm text-zinc-500">tier=suspected / elevated 時，上傳預覽列下方加「最高風險上傳」列</p>
+    </header>
+
+    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <!-- Suspected + AI -->
+      <a href="#" class="block rounded-xl border border-zinc-200 bg-white p-3 transition hover:border-zinc-400">
+        <div class="flex items-start gap-2.5">
+          <div class="h-11 w-11 shrink-0 rounded-full bg-emerald-100 ring-1 ring-zinc-200"></div>
+          <div class="min-w-0 flex-1">
+            <div class="flex flex-wrap items-center gap-1.5">
+              <span class="truncate text-sm font-semibold">王小明</span>
+              <span class="rounded bg-red-50 px-1.5 py-0.5 text-[10px] font-semibold text-red-700">疑似</span>
+            </div>
+            <p class="mt-0.5 text-[11px] text-zinc-500">未處理 · 自 09:12 等待</p>
+          </div>
+        </div>
+        <div class="mt-2.5 grid grid-cols-4 gap-1">
+          <div class="aspect-square rounded-md bg-zinc-200"></div>
+          <div class="aspect-square rounded-md bg-zinc-200"></div>
+          <div class="aspect-square rounded-md bg-zinc-200"></div>
+          <div class="flex aspect-square items-center justify-center rounded-md bg-zinc-100 text-xs font-semibold text-zinc-500">+2</div>
+        </div>
+        <div class="mt-2 flex items-start gap-2 rounded-lg border border-rose-100 bg-rose-50/40 p-2">
+          <div class="relative h-14 w-14 shrink-0 overflow-hidden rounded-md bg-zinc-300 ring-1 ring-rose-200">
+            <span class="absolute left-0.5 top-0.5 rounded bg-rose-600 px-1 py-px text-[8px] font-medium text-white">最高</span>
+          </div>
+          <div class="min-w-0 flex-1 space-y-1">
+            <p class="text-[10px] font-medium text-zinc-500">最高風險上傳 · 10:48</p>
+            <div class="flex flex-wrap items-center gap-1.5">
+              <span class="rounded-full bg-red-50 px-2 py-0.5 text-[10px] font-medium text-red-700">suspected</span>
+              <span class="text-[11px] font-semibold text-zinc-800">AI 82.3%</span>
+            </div>
+            <div class="flex flex-wrap gap-1">
+              <span class="rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-medium text-amber-800">疼痛</span>
+              <span class="rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-medium text-amber-800">膿</span>
+            </div>
+          </div>
+        </div>
+      </a>
+
+      <!-- Elevated only -->
+      <a href="#" class="block rounded-xl border border-zinc-200 bg-white p-3 transition hover:border-zinc-400">
+        <div class="flex items-start gap-2.5">
+          <div class="h-11 w-11 shrink-0 rounded-full bg-sky-100 ring-1 ring-zinc-200"></div>
+          <div class="min-w-0 flex-1">
+            <div class="flex flex-wrap items-center gap-1.5">
+              <span class="truncate text-sm font-semibold">陳美玲</span>
+              <span class="rounded bg-amber-50 px-1.5 py-0.5 text-[10px] font-semibold text-amber-700">高風險</span>
+            </div>
+            <p class="mt-0.5 text-[11px] text-zinc-500">未處理 · 自 08:05 等待</p>
+          </div>
+        </div>
+        <div class="mt-2.5 grid grid-cols-4 gap-1">
+          <div class="aspect-square rounded-md bg-zinc-200"></div>
+          <div class="aspect-square rounded-md bg-zinc-200"></div>
+          <div class="aspect-square rounded-md bg-zinc-100"></div>
+          <div class="aspect-square rounded-md bg-zinc-100"></div>
+        </div>
+        <div class="mt-2 flex items-start gap-2 rounded-lg border border-amber-100 bg-amber-50/40 p-2">
+          <div class="relative h-14 w-14 shrink-0 overflow-hidden rounded-md bg-zinc-300 ring-1 ring-amber-200">
+            <span class="absolute left-0.5 top-0.5 rounded bg-amber-600 px-1 py-px text-[8px] font-medium text-white">最高</span>
+          </div>
+          <div class="min-w-0 flex-1 space-y-1">
+            <p class="text-[10px] font-medium text-zinc-500">最高風險上傳 · 08:05</p>
+            <div class="flex flex-wrap items-center gap-1.5">
+              <span class="rounded-full bg-emerald-50 px-2 py-0.5 text-[10px] font-medium text-emerald-700">normal</span>
+              <span class="rounded-full bg-orange-50 px-2 py-0.5 text-[10px] font-medium text-orange-700">症狀高風險</span>
+            </div>
+            <div class="flex flex-wrap gap-1">
+              <span class="rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-medium text-amber-800">透析液混濁</span>
+            </div>
+          </div>
+        </div>
+      </a>
+
+      <!-- Other tier — no highlight row -->
+      <a href="#" class="block rounded-xl border border-zinc-200 bg-white p-3 transition hover:border-zinc-400">
+        <div class="flex items-start gap-2.5">
+          <div class="h-11 w-11 shrink-0 rounded-full bg-violet-100 ring-1 ring-zinc-200"></div>
+          <div class="min-w-0 flex-1">
+            <div class="flex flex-wrap items-center gap-1.5">
+              <span class="truncate text-sm font-semibold">林志豪</span>
+              <span class="rounded bg-zinc-100 px-1.5 py-0.5 text-[10px] font-semibold text-zinc-600">今日上傳</span>
+            </div>
+            <p class="mt-0.5 text-[11px] text-zinc-500">今日已上傳</p>
+          </div>
+        </div>
+        <div class="mt-2.5 grid grid-cols-4 gap-1">
+          <div class="aspect-square rounded-md bg-zinc-200"></div>
+          <div class="aspect-square rounded-md bg-zinc-100"></div>
+          <div class="aspect-square rounded-md bg-zinc-100"></div>
+          <div class="aspect-square rounded-md bg-zinc-100"></div>
+        </div>
+        <!-- no risk highlight -->
+      </a>
+
+      <!-- Annotated suspected — dimmed -->
+      <a href="#" class="block rounded-xl border border-zinc-200 bg-white p-3 opacity-55 transition hover:border-zinc-400">
+        <div class="flex items-start gap-2.5">
+          <div class="h-11 w-11 shrink-0 rounded-full bg-pink-100 ring-1 ring-zinc-200"></div>
+          <div class="min-w-0 flex-1">
+            <div class="flex flex-wrap items-center gap-1.5">
+              <span class="truncate text-sm font-semibold">張雅婷</span>
+              <span class="rounded bg-red-50 px-1.5 py-0.5 text-[10px] font-semibold text-red-700">疑似</span>
+            </div>
+            <p class="mt-0.5 text-[11px] text-green-600">已註解 · 11:20</p>
+          </div>
+        </div>
+        <div class="mt-2.5 grid grid-cols-4 gap-1">
+          <div class="aspect-square rounded-md bg-zinc-200"></div>
+        </div>
+        <div class="mt-2 flex items-start gap-2 rounded-lg border border-zinc-200 bg-zinc-50 p-2">
+          <div class="h-14 w-14 shrink-0 rounded-md bg-zinc-300"></div>
+          <div class="min-w-0 flex-1 space-y-1">
+            <p class="text-[10px] font-medium text-zinc-500">最高風險上傳 · 11:20</p>
+            <span class="rounded-full bg-red-50 px-2 py-0.5 text-[10px] font-medium text-red-700">suspected</span>
+            <span class="text-[11px] font-semibold text-zinc-700">AI 91.0%</span>
+          </div>
+        </div>
+      </a>
+    </div>
+  </div>
+</body>
+</html>

From 7a4bc8a3892f38b3db1d6475b82955be26212d80 Mon Sep 17 00:00:00 2001
From: ruby0322 <ruby0322@ntu.im>
Date: Fri, 7 Aug 2026 00:14:27 +0800
Subject: [PATCH 2/5] feat(admin): refine dashboard UX, review modal, and
 history tabs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Polish the date-selectable workbench with week/mobile calendar, master-detail
patient panel with in-app upload review, 歷史總覽 tab split, upload trend chart,
and dashboard demo seed for UI review.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../backend/sql/manual/seed_dashboard_demo.py | 325 ++++++++++++++
 .../_components/active-uploaders-summary.tsx  |  26 --
 .../_components/dashboard-day-calendar.tsx    | 327 +++++++++++----
 .../history-upload-annotation-modal.tsx       | 146 +++++++
 .../history-upload-review-helpers.ts          |  69 +++
 .../history-upload-thumbnail-grid.tsx         |  77 ++++
 .../patient-day-upload-review-modal.tsx       | 221 ++++++++++
 .../_components/pending-bindings-summary.tsx  |  52 ---
 .../today-patient-detail-panel.tsx            | 210 ++++++++++
 .../admin/_components/today-patient-pool.tsx  |  37 +-
 .../admin/_components/today-patient-row.tsx   |  57 +--
 .../admin/_components/today-upload-count.tsx  |  34 --
 .../app/admin/_components/upload-thumb.tsx    |  48 +++
 .../_components/use-upload-image-urls.ts      |  47 +++
 .../history-overview/__tests__/page.test.tsx  |  14 +-
 .../__tests__/usage-trends-tab.test.tsx       | 100 +++++
 .../app/admin/history-overview/page.tsx       | 395 +++++-------------
 .../history-overview/usage-trends-tab.tsx     |  82 +++-
 .../usage-upload-chart-data.ts                |  18 +
 apps/frontend/app/admin/layout.tsx            |   8 +-
 apps/frontend/app/admin/page.tsx              | 203 ++++-----
 .../utils/__tests__/upload-calendar.test.ts   |  19 +
 apps/frontend/lib/utils/upload-calendar.ts    |  46 ++
 docs/ops/local-dev-without-line.md            |   8 +
 package.json                                  |   1 +
 25 files changed, 1875 insertions(+), 695 deletions(-)
 create mode 100644 apps/backend/sql/manual/seed_dashboard_demo.py
 delete mode 100644 apps/frontend/app/admin/_components/active-uploaders-summary.tsx
 create mode 100644 apps/frontend/app/admin/_components/history-upload-annotation-modal.tsx
 create mode 100644 apps/frontend/app/admin/_components/history-upload-review-helpers.ts
 create mode 100644 apps/frontend/app/admin/_components/history-upload-thumbnail-grid.tsx
 create mode 100644 apps/frontend/app/admin/_components/patient-day-upload-review-modal.tsx
 delete mode 100644 apps/frontend/app/admin/_components/pending-bindings-summary.tsx
 create mode 100644 apps/frontend/app/admin/_components/today-patient-detail-panel.tsx
 delete mode 100644 apps/frontend/app/admin/_components/today-upload-count.tsx
 create mode 100644 apps/frontend/app/admin/_components/upload-thumb.tsx
 create mode 100644 apps/frontend/app/admin/_components/use-upload-image-urls.ts
 create mode 100644 apps/frontend/app/admin/history-overview/__tests__/usage-trends-tab.test.tsx
 create mode 100644 apps/frontend/app/admin/history-overview/usage-upload-chart-data.ts

diff --git a/apps/backend/sql/manual/seed_dashboard_demo.py b/apps/backend/sql/manual/seed_dashboard_demo.py
new file mode 100644
index 0000000..78664b8
--- /dev/null
+++ b/apps/backend/sql/manual/seed_dashboard_demo.py
@@ -0,0 +1,325 @@
+#!/usr/bin/env python3
+"""Seed ~30 days of dashboard demo uploads for local UI review.
+
+Creates P-DEV-DASH-* patients with mixed suspected / elevated / other tiers,
+staff assignments (U_DEV_STAFF), and optional staff annotations. Dates anchor to
+Taipei today so the admin week calendar always shows a realistic month of activity.
+
+Run after personas (and optionally fake patients):
+
+    npm run seed:dev-personas
+    npm run seed:dashboard-demo
+
+Requires DATABASE_URL (loads apps/backend/.env when python-dotenv is installed).
+"""
+
+from __future__ import annotations
+
+import os
+import random
+import sys
+from dataclasses import dataclass
+from datetime import date, datetime, timedelta
+from pathlib import Path
+from zoneinfo import ZoneInfo
+
+_BACKEND_ROOT = Path(__file__).resolve().parents[2]
+if str(_BACKEND_ROOT) not in sys.path:
+    sys.path.insert(0, str(_BACKEND_ROOT))
+
+try:
+    from dotenv import load_dotenv
+except ImportError:
+    load_dotenv = None  # type: ignore[misc, assignment]
+
+from sqlalchemy import delete, inspect, select, text
+from sqlalchemy.orm import Session
+
+from app.db.migrations import upgrade_database
+from app.db.models import AIResult, Annotation, LiffIdentity, Notification, Patient, StaffPatientAssignment, Upload
+from app.db.session import create_engine_from_url, create_session_factory
+
+TZ = ZoneInfo("Asia/Taipei")
+CASE_PREFIX = "P-DEV-DASH-"
+LINE_PREFIX = "U_DEV_DASH_"
+LOOKBACK_DAYS = 30
+RNG = random.Random(20260806)
+
+
+@dataclass(frozen=True)
+class DemoPatientSpec:
+    suffix: str
+    full_name: str
+    gender: str
+    birth_date: str
+    picture_url: str | None
+
+
+_PATIENTS: tuple[DemoPatientSpec, ...] = (
+    DemoPatientSpec("001", "陳志明", "male", "1968-04-12", "https://i.pravatar.cc/150?u=dash001"),
+    DemoPatientSpec("002", "林美華", "female", "1972-09-03", "https://i.pravatar.cc/150?u=dash002"),
+    DemoPatientSpec("003", "王淑芬", "female", "1960-11-28", "https://i.pravatar.cc/150?u=dash003"),
+    DemoPatientSpec("004", "張文雄", "male", "1955-07-19", "https://i.pravatar.cc/150?u=dash004"),
+    DemoPatientSpec("005", "黃雅婷", "female", "1988-02-14", "https://i.pravatar.cc/150?u=dash005"),
+    DemoPatientSpec("006", "李俊傑", "male", "1991-06-08", "https://i.pravatar.cc/150?u=dash006"),
+    DemoPatientSpec("007", "吳佳玲", "female", "1979-12-22", "https://i.pravatar.cc/150?u=dash007"),
+    DemoPatientSpec("008", "蔡明德", "male", "1963-03-30", None),
+    DemoPatientSpec("009", "許麗娟", "female", "1974-08-17", "https://i.pravatar.cc/150?u=dash009"),
+    DemoPatientSpec("010", "楊志豪", "male", "1982-01-05", "https://i.pravatar.cc/150?u=dash010"),
+    DemoPatientSpec("011", "鄭心怡", "female", "1995-10-11", "https://i.pravatar.cc/150?u=dash011"),
+    DemoPatientSpec("012", "謝承恩", "male", "1970-05-25", "https://i.pravatar.cc/150?u=dash012"),
+)
+
+
+def _taipei_today() -> date:
+    return datetime.now(tz=TZ).date()
+
+
+def _parse_local_dt(day: date, hour: int, minute: int) -> datetime:
+    return datetime.combine(day, datetime.min.time().replace(hour=hour, minute=minute), tzinfo=TZ)
+
+
+def _resolve_staff_identity_id(session: Session) -> int | None:
+    for line_user_id in ("U_DEV_ADMIN", "U_DEV_STAFF", "U_DEV_DUAL"):
+        row = session.scalar(
+            select(LiffIdentity.id).where(
+                LiffIdentity.line_user_id == line_user_id,
+                LiffIdentity.role.in_(("staff", "admin")),
+                LiffIdentity.is_active.is_(True),
+            )
+        )
+        if row is not None:
+            return int(row)
+    return None
+
+
+def _clear_demo(session: Session) -> None:
+    case_numbers = [f"{CASE_PREFIX}{spec.suffix}" for spec in _PATIENTS]
+    line_user_ids = [f"{LINE_PREFIX}{spec.suffix}" for spec in _PATIENTS]
+    patient_ids = list(session.scalars(select(Patient.id).where(Patient.case_number.in_(case_numbers))).all())
+    if patient_ids:
+        upload_ids = select(Upload.id).where(Upload.patient_id.in_(patient_ids))
+        session.execute(delete(Annotation).where(Annotation.upload_id.in_(upload_ids)))
+        session.execute(delete(Notification).where(Notification.patient_id.in_(patient_ids)))
+        session.execute(delete(AIResult).where(AIResult.upload_id.in_(upload_ids)))
+        session.execute(delete(Upload).where(Upload.patient_id.in_(patient_ids)))
+        session.execute(delete(StaffPatientAssignment).where(StaffPatientAssignment.patient_id.in_(patient_ids)))
+        session.execute(delete(LiffIdentity).where(LiffIdentity.patient_id.in_(patient_ids)))
+        session.execute(delete(Patient).where(Patient.id.in_(patient_ids)))
+    session.execute(delete(LiffIdentity).where(LiffIdentity.line_user_id.in_(line_user_ids)))
+
+
+def _add_annotation(
+    session: Session,
+    *,
+    patient_id: int,
+    upload_id: int,
+    reviewer_identity_id: int,
+    label: str,
+) -> None:
+    bind = session.get_bind()
+    column_names = {column["name"] for column in inspect(bind).get_columns("annotations")}
+    if "staff_user_id" in column_names:
+        session.execute(
+            text(
+                """
+                INSERT INTO annotations (
+                    patient_id, upload_id, reviewer_identity_id, staff_user_id, label, comment, patient_read_at
+                ) VALUES (
+                    :patient_id, :upload_id, :reviewer_identity_id, :staff_user_id, :label, :comment, NULL
+                )
+                """
+            ),
+            {
+                "patient_id": patient_id,
+                "upload_id": upload_id,
+                "reviewer_identity_id": reviewer_identity_id,
+                "staff_user_id": reviewer_identity_id,
+                "label": label,
+                "comment": "dashboard demo",
+            },
+        )
+        return
+    session.add(
+        Annotation(
+            patient_id=patient_id,
+            upload_id=upload_id,
+            reviewer_identity_id=reviewer_identity_id,
+            label=label,
+            comment="dashboard demo",
+        )
+    )
+
+
+def _upload_profile(day_offset: int, patient_index: int, upload_index: int) -> tuple[str, dict[str, bool], float, bool]:
+    """Return screening_result, symptoms, probability, should_annotate."""
+    roll = RNG.random()
+    # Today / yesterday: richer risk mix for UI review.
+    if day_offset >= -1:
+        if roll < 0.28:
+            return ("suspected", {}, 0.82 + RNG.random() * 0.12, roll < 0.12)
+        if roll < 0.48:
+            symptoms = RNG.choice(
+                (
+                    {"symptom_pain": True},
+                    {"symptom_pus": True},
+                    {"symptom_cloudy_dialysate": True},
+                    {"symptom_pain": True, "symptom_pus": True},
+                )
+            )
+            return ("normal", symptoms, 0.12 + RNG.random() * 0.15, roll < 0.22)
+        return ("normal", {}, 0.05 + RNG.random() * 0.2, False)
+
+    if day_offset >= -7 and roll < 0.18:
+        return ("suspected", {}, 0.75 + RNG.random() * 0.2, roll < 0.35)
+    if roll < 0.12:
+        return ("suspected", {}, 0.7 + RNG.random() * 0.25, RNG.random() < 0.4)
+    if roll < 0.22:
+        return (
+            "normal",
+            RNG.choice(({"symptom_pain": True}, {"symptom_pus": True}, {"symptom_cloudy_dialysate": True})),
+            0.1 + RNG.random() * 0.2,
+            RNG.random() < 0.3,
+        )
+    return ("normal", {}, 0.05 + RNG.random() * 0.25, False)
+
+
+def _seed_demo(session: Session, *, staff_identity_id: int | None) -> list[str]:
+    patients_by_suffix: dict[str, Patient] = {}
+    for spec in _PATIENTS:
+        patient = Patient(
+            case_number=f"{CASE_PREFIX}{spec.suffix}",
+            birth_date=spec.birth_date,
+            full_name=spec.full_name,
+            gender=spec.gender,
+            is_active=True,
+        )
+        session.add(patient)
+        session.flush()
+        session.add(
+            LiffIdentity(
+                line_user_id=f"{LINE_PREFIX}{spec.suffix}",
+                display_name=spec.full_name,
+                picture_url=spec.picture_url,
+                patient_id=patient.id,
+                role="patient",
+                is_active=True,
+            )
+        )
+        if staff_identity_id is not None:
+            session.add(
+                StaffPatientAssignment(
+                    staff_identity_id=staff_identity_id,
+                    patient_id=patient.id,
+                )
+            )
+        patients_by_suffix[spec.suffix] = patient
+
+    today = _taipei_today()
+    active_days: list[str] = []
+
+    for day_offset in range(-LOOKBACK_DAYS, 1):
+        local_day = today + timedelta(days=day_offset)
+        weekday = local_day.weekday()
+        # Skip some days; weekends slightly quieter.
+        skip_chance = 0.35 if weekday >= 5 else 0.22
+        if day_offset not in (0, -1, -3, -7, -14, -21) and RNG.random() < skip_chance:
+            continue
+
+        active_days.append(local_day.isoformat())
+        upload_target = RNG.randint(5, 14) if day_offset >= -7 else RNG.randint(3, 10)
+        if weekday >= 5:
+            upload_target = max(2, upload_target - 2)
+
+        chosen_suffixes = RNG.sample(
+            [spec.suffix for spec in _PATIENTS],
+            k=min(len(_PATIENTS), RNG.randint(3, min(9, upload_target))),
+        )
+        upload_count = 0
+        patient_cycle = 0
+        while upload_count < upload_target:
+            suffix = chosen_suffixes[patient_cycle % len(chosen_suffixes)]
+            patient_cycle += 1
+            patient = patients_by_suffix[suffix]
+            patient_index = int(suffix)
+            screening, symptoms, probability, annotate = _upload_profile(day_offset, patient_index, upload_count)
+            hour = 7 + (upload_count * 2 + patient_index) % 14
+            minute = (upload_count * 11 + patient_index * 7) % 60
+
+            upload = Upload(
+                patient_id=patient.id,
+                object_key=f"patients/dashboard-demo/{patient.id}/{local_day.isoformat()}-{upload_count}.jpg",
+                content_type="image/jpeg",
+                created_at=_parse_local_dt(local_day, hour, minute),
+                symptom_pain=bool(symptoms.get("symptom_pain")),
+                symptom_discharge=bool(symptoms.get("symptom_discharge")),
+                symptom_pus=bool(symptoms.get("symptom_pus")),
+                symptom_cloudy_dialysate=bool(symptoms.get("symptom_cloudy_dialysate")),
+            )
+            session.add(upload)
+            session.flush()
+            session.add(
+                AIResult(
+                    upload_id=upload.id,
+                    screening_result=screening,
+                    probability=probability,
+                    threshold=0.5,
+                    predicted_class="class_4" if screening == "suspected" else "class_1",
+                    model_version="dashboard-demo-v1",
+                )
+            )
+            if annotate and staff_identity_id is not None and screening in ("suspected", "normal"):
+                label = "suspected" if screening == "suspected" else "normal"
+                _add_annotation(
+                    session,
+                    patient_id=patient.id,
+                    upload_id=upload.id,
+                    reviewer_identity_id=staff_identity_id,
+                    label=label,
+                )
+            upload_count += 1
+
+    return active_days
+
+
+def main() -> int:
+    if load_dotenv:
+        load_dotenv(_BACKEND_ROOT / ".env")
+
+    database_url = os.getenv("PDCARE_DATABASE_URL") or os.getenv("DATABASE_URL")
+    if not database_url:
+        print(
+            "Neither PDCARE_DATABASE_URL nor DATABASE_URL is set. "
+            "Set one of them or put it in apps/backend/.env",
+            file=sys.stderr,
+        )
+        return 1
+
+    print(f"Using database URL: {database_url}")
+    engine = create_engine_from_url(database_url)
+    upgrade_database(str(engine.url))
+    session_factory = create_session_factory(engine)
+
+    with session_factory() as session:
+        try:
+            staff_identity_id = _resolve_staff_identity_id(session)
+            if staff_identity_id is None:
+                print("Warning: no U_DEV_STAFF/U_DEV_ADMIN identity — run seed:dev-personas first.", file=sys.stderr)
+            _clear_demo(session)
+            active_days = _seed_demo(session, staff_identity_id=staff_identity_id)
+            session.commit()
+        except Exception:
+            session.rollback()
+            raise
+
+    today = _taipei_today()
+    print(f"\nDashboard demo seeded ({len(_PATIENTS)} patients, {len(active_days)} active days).")
+    print(f"Taipei today: {today.isoformat()}")
+    print("Login as U_DEV_ADMIN or U_DEV_STAFF → /admin")
+    print("Use arrow keys / week nav / calendar icon on the week strip.")
+    print(f"Sample active range: {active_days[0]} … {active_days[-1]}")
+    return 0
+
+
+if __name__ == "__main__":
+    raise SystemExit(main())
diff --git a/apps/frontend/app/admin/_components/active-uploaders-summary.tsx b/apps/frontend/app/admin/_components/active-uploaders-summary.tsx
deleted file mode 100644
index 394135e..0000000
--- a/apps/frontend/app/admin/_components/active-uploaders-summary.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import Link from "next/link";
-
-type ActiveUploadersSummaryProps = {
-  activeUsers: number | null;
-  loading: boolean;
-  error: string | null;
-};
-
-export function ActiveUploadersSummary({ activeUsers, loading, error }: ActiveUploadersSummaryProps) {
-  return (
-    <p className="text-xs text-zinc-400">
-      {loading ? (
-        "近 7 日活躍上傳者載入中…"
-      ) : error ? (
-        <span className="text-zinc-400">活躍摘要暫時無法載入</span>
-      ) : (
-        <>
-          近 7 日活躍上傳者 {activeUsers ?? "—"} ·{" "}
-          <Link href="/admin/history-overview" className="hover:text-zinc-700">
-            查看區間分析 →
-          </Link>
-        </>
-      )}
-    </p>
-  );
-}
diff --git a/apps/frontend/app/admin/_components/dashboard-day-calendar.tsx b/apps/frontend/app/admin/_components/dashboard-day-calendar.tsx
index 910c935..9f43900 100644
--- a/apps/frontend/app/admin/_components/dashboard-day-calendar.tsx
+++ b/apps/frontend/app/admin/_components/dashboard-day-calendar.tsx
@@ -1,10 +1,16 @@
 "use client";
 
-import { ChevronLeft, ChevronRight, Image as ImageIcon, TriangleAlert, Users } from "lucide-react";
-import type { ReactNode } from "react";
+import { CalendarDays, ChevronLeft, ChevronRight, Image as ImageIcon, TriangleAlert, Users } from "lucide-react";
+import { useCallback, useEffect, useId, useMemo, useRef, type ReactNode } from "react";
 
 import { cn } from "@/lib/utils";
-import { buildTaipeiMonthGrid, getRelativeMonthKey } from "@/lib/utils/upload-calendar";
+import {
+  buildTaipeiWeekRow,
+  formatTaipeiWeekRangeLabel,
+  getWeekStartDateKey,
+  parseTaipeiDateKey,
+  shiftTaipeiDateKey,
+} from "@/lib/utils/upload-calendar";
 
 export type DayCalendarMetrics = {
   uploadCount: number;
@@ -15,12 +21,12 @@ export type DayCalendarMetrics = {
 
 type DashboardDayCalendarProps = {
   selectedDate: string;
-  monthKey: string;
+  weekStartDateKey: string;
   metricsByDate: Record<string, DayCalendarMetrics>;
   availableDates: Set<string> | string[];
   loading?: boolean;
   onSelectDate: (dateKey: string) => void;
-  onMonthChange: (monthKey: string) => void;
+  onWeekChange: (weekStartDateKey: string) => void;
 };
 
 function MetricChip({
@@ -52,113 +58,264 @@ function MetricChip({
   );
 }
 
+const WEEKDAY_LABELS = ["日", "一", "二", "三", "四", "五", "六"] as const;
+
+function formatTaipeiDateLabel(dateKey: string): string {
+  const { year, month, day } = parseTaipeiDateKey(dateKey);
+  const weekday = new Date(Date.UTC(year, month - 1, day)).getUTCDay();
+  return `${year} 年 ${month} 月 ${day} 日（${WEEKDAY_LABELS[weekday]}）`;
+}
+
+function DayCellButton({
+  cell,
+  metricsByDate,
+  available,
+  selected,
+  onSelectDate,
+  className,
+}: {
+  cell: { dateKey: string; dayOfMonth: number };
+  metricsByDate: Record<string, DayCalendarMetrics>;
+  available: Set<string>;
+  selected: boolean;
+  onSelectDate: (dateKey: string) => void;
+  className?: string;
+}) {
+  const metrics = metricsByDate[cell.dateKey];
+  const isAvailable = available.has(cell.dateKey);
+  const unhandled = metrics?.unhandledPatients ?? 0;
+  const uploadCount = metrics?.uploadCount ?? 0;
+  const uploadedUsers = metrics?.uploadedUsers ?? 0;
+  const riskyPatients = metrics?.riskyPatients ?? 0;
+
+  return (
+    <button
+      type="button"
+      disabled={!isAvailable}
+      onClick={() => onSelectDate(cell.dateKey)}
+      className={cn(
+        "flex min-h-[96px] min-w-0 flex-col rounded-xl bg-zinc-50 p-2.5 text-left transition",
+        selected && "bg-white ring-2 ring-zinc-900",
+        !isAvailable && "cursor-not-allowed border border-dashed border-zinc-200 bg-transparent opacity-60",
+        className
+      )}
+      title={
+        isAvailable
+          ? `${cell.dateKey} · 上傳 ${uploadCount} · 人數 ${uploadedUsers} · 風險 ${riskyPatients}`
+          : `${cell.dateKey} 無資料`
+      }
+    >
+      <div className="flex shrink-0 items-baseline justify-between gap-1">
+        <span className={cn("text-[13px] font-semibold leading-tight", selected && "font-bold")}>
+          {cell.dayOfMonth}
+        </span>
+        {unhandled > 0 ? (
+          <span className="min-w-0 text-right text-[9px] font-medium leading-tight text-rose-400">
+            尚有 {unhandled} 未處理
+          </span>
+        ) : null}
+      </div>
+      {isAvailable ? (
+        <div className="mt-auto grid w-full grid-cols-3 gap-1 pt-2">
+          <MetricChip selected={selected} icon={<ImageIcon className="h-3.5 w-3.5" />} value={uploadCount} />
+          <MetricChip selected={selected} icon={<Users className="h-3.5 w-3.5" />} value={uploadedUsers} />
+          <MetricChip selected={selected} risk icon={<TriangleAlert className="h-3.5 w-3.5" />} value={riskyPatients} />
+        </div>
+      ) : null}
+    </button>
+  );
+}
+
 export function DashboardDayCalendar({
   selectedDate,
-  monthKey,
+  weekStartDateKey,
   metricsByDate,
   availableDates,
   loading,
   onSelectDate,
-  onMonthChange,
+  onWeekChange,
 }: DashboardDayCalendarProps) {
-  const available = availableDates instanceof Set ? availableDates : new Set(availableDates);
-  const grid = buildTaipeiMonthGrid(monthKey);
-  const title = `${grid.year} 年 ${grid.month} 月`;
+  const available = useMemo(
+    () => (availableDates instanceof Set ? availableDates : new Set(availableDates)),
+    [availableDates]
+  );
+  const weekCells = buildTaipeiWeekRow(weekStartDateKey);
+  const weekTitle = formatTaipeiWeekRangeLabel(weekStartDateKey);
+  const mobileTitle = formatTaipeiDateLabel(selectedDate);
+  const selectedCell = useMemo(() => {
+    const { day } = parseTaipeiDateKey(selectedDate);
+    return { dateKey: selectedDate, dayOfMonth: day };
+  }, [selectedDate]);
+  const datePickerId = useId();
+  const dateInputRef = useRef<HTMLInputElement>(null);
+  const panelRef = useRef<HTMLElement>(null);
+
+  const moveSelectedByDays = useCallback(
+    (offsetDays: number) => {
+      let candidate = selectedDate;
+      for (let step = 0; step < 366; step += 1) {
+        candidate = shiftTaipeiDateKey(candidate, offsetDays);
+        if (available.has(candidate)) {
+          onSelectDate(candidate);
+          const weekStart = getWeekStartDateKey(candidate);
+          if (weekStart !== weekStartDateKey) {
+            onWeekChange(weekStart);
+          }
+          return;
+        }
+      }
+    },
+    [available, onSelectDate, onWeekChange, selectedDate, weekStartDateKey]
+  );
+
+  useEffect(() => {
+    const panel = panelRef.current;
+    if (!panel) {
+      return;
+    }
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        moveSelectedByDays(-1);
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        moveSelectedByDays(1);
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        onWeekChange(shiftTaipeiDateKey(weekStartDateKey, -7));
+      } else if (event.key === "ArrowDown") {
+        event.preventDefault();
+        onWeekChange(shiftTaipeiDateKey(weekStartDateKey, 7));
+      }
+    };
+    panel.addEventListener("keydown", onKeyDown);
+    return () => {
+      panel.removeEventListener("keydown", onKeyDown);
+    };
+  }, [moveSelectedByDays, onWeekChange, weekStartDateKey]);
+
+  const openDatePicker = () => {
+    const input = dateInputRef.current;
+    if (!input) {
+      return;
+    }
+    if (typeof input.showPicker === "function") {
+      input.showPicker();
+    } else {
+      input.focus();
+      input.click();
+    }
+  };
 
   return (
-    <section className="rounded-2xl border border-zinc-200 bg-white p-5">
+    <section
+      ref={panelRef}
+      tabIndex={0}
+      aria-label="儀表板日期選擇"
+      className="rounded-2xl border border-zinc-200 bg-white p-3 outline-none focus-visible:ring-2 focus-visible:ring-zinc-900 focus-visible:ring-offset-2 md:p-5"
+    >
       <div className="mb-3 flex items-center justify-between gap-2">
         <button
           type="button"
-          aria-label="上個月"
-          className="rounded-md p-1 text-zinc-500 hover:bg-zinc-100 hover:text-zinc-800"
-          onClick={() => onMonthChange(getRelativeMonthKey(monthKey, -1))}
+          aria-label="前一日"
+          className="rounded-md p-1 text-zinc-500 hover:bg-zinc-100 hover:text-zinc-800 md:hidden"
+          onClick={() => moveSelectedByDays(-1)}
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </button>
+        <button
+          type="button"
+          aria-label="上週"
+          className="hidden rounded-md p-1 text-zinc-500 hover:bg-zinc-100 hover:text-zinc-800 md:inline-flex"
+          onClick={() => onWeekChange(shiftTaipeiDateKey(weekStartDateKey, -7))}
         >
           <ChevronLeft className="h-4 w-4" />
         </button>
-        <div className="text-sm font-semibold text-zinc-700">
-          {title}
-          {loading ? <span className="ml-2 text-xs font-normal text-zinc-400">載入中…</span> : null}
+        <div className="flex min-w-0 items-center gap-2">
+          <button
+            type="button"
+            aria-label="選擇日期"
+            className="rounded-md p-1 text-zinc-500 hover:bg-zinc-100 hover:text-zinc-800"
+            onClick={openDatePicker}
+          >
+            <CalendarDays className="h-4 w-4" />
+          </button>
+          <div className="truncate text-sm font-semibold text-zinc-700">
+            <span className="md:hidden">{mobileTitle}</span>
+            <span className="hidden md:inline">{weekTitle}</span>
+            {loading ? <span className="ml-2 text-xs font-normal text-zinc-400">載入中…</span> : null}
+          </div>
+          <input
+            ref={dateInputRef}
+            id={datePickerId}
+            type="date"
+            value={selectedDate}
+            className="sr-only"
+            onChange={(event) => {
+              const next = event.target.value;
+              if (!next) {
+                return;
+              }
+              try {
+                parseTaipeiDateKey(next);
+              } catch {
+                return;
+              }
+              onSelectDate(next);
+              onWeekChange(getWeekStartDateKey(next));
+            }}
+          />
         </div>
         <button
           type="button"
-          aria-label="下個月"
-          className="rounded-md p-1 text-zinc-500 hover:bg-zinc-100 hover:text-zinc-800"
-          onClick={() => onMonthChange(getRelativeMonthKey(monthKey, 1))}
+          aria-label="下一日"
+          className="rounded-md p-1 text-zinc-500 hover:bg-zinc-100 hover:text-zinc-800 md:hidden"
+          onClick={() => moveSelectedByDays(1)}
+        >
+          <ChevronRight className="h-4 w-4" />
+        </button>
+        <button
+          type="button"
+          aria-label="下週"
+          className="hidden rounded-md p-1 text-zinc-500 hover:bg-zinc-100 hover:text-zinc-800 md:inline-flex"
+          onClick={() => onWeekChange(shiftTaipeiDateKey(weekStartDateKey, 7))}
         >
           <ChevronRight className="h-4 w-4" />
         </button>
       </div>
 
-      <div className="mb-2 grid w-full grid-cols-7 gap-2 text-center text-[11px] text-zinc-400">
-        {["日", "一", "二", "三", "四", "五", "六"].map((label) => (
+      <p className="mb-2 hidden text-[10px] text-zinc-400 md:block">
+        方向鍵：← → 切換日期 · ↑ ↓ 切換週 · 點日曆圖示選日期
+      </p>
+
+      <div className="md:hidden">
+        <DayCellButton
+          cell={selectedCell}
+          metricsByDate={metricsByDate}
+          available={available}
+          selected
+          onSelectDate={onSelectDate}
+          className="w-full"
+        />
+      </div>
+
+      <div className="mb-2 hidden w-full grid-cols-7 gap-2 text-center text-[11px] text-zinc-400 md:grid">
+        {WEEKDAY_LABELS.map((label) => (
           <div key={label}>{label}</div>
         ))}
       </div>
 
-      <div className="grid w-full grid-cols-7 gap-2">
-        {grid.cells.map((cell) => {
-          if (!cell.isCurrentMonth) {
-            return <div key={cell.dateKey} className="min-h-[96px]" />;
-          }
-          const metrics = metricsByDate[cell.dateKey];
-          const isAvailable = available.has(cell.dateKey);
-          const selected = selectedDate === cell.dateKey;
-          const unhandled = metrics?.unhandledPatients ?? 0;
-          const uploadCount = metrics?.uploadCount ?? 0;
-          const uploadedUsers = metrics?.uploadedUsers ?? 0;
-          const riskyPatients = metrics?.riskyPatients ?? 0;
-
-          return (
-            <button
-              key={cell.dateKey}
-              type="button"
-              disabled={!isAvailable}
-              onClick={() => onSelectDate(cell.dateKey)}
-              className={cn(
-                "flex min-h-[96px] min-w-0 flex-col rounded-xl bg-zinc-50 p-2.5 text-left transition",
-                selected && "bg-white ring-2 ring-zinc-900",
-                !isAvailable && "cursor-not-allowed border border-dashed border-zinc-200 bg-transparent opacity-60"
-              )}
-              title={
-                isAvailable
-                  ? `${cell.dateKey} · 上傳 ${uploadCount} · 人數 ${uploadedUsers} · 風險 ${riskyPatients}`
-                  : `${cell.dateKey} 無資料`
-              }
-            >
-              <div className="flex shrink-0 items-baseline justify-between gap-1">
-                <span className={cn("text-[13px] font-semibold leading-tight", selected && "font-bold")}>
-                  {cell.dayOfMonth}
-                </span>
-                {unhandled > 0 ? (
-                  <span className="min-w-0 text-right text-[9px] font-medium leading-tight text-rose-400">
-                    尚有 {unhandled} 未處理
-                  </span>
-                ) : null}
-              </div>
-              {isAvailable ? (
-                <div className="mt-auto grid w-full grid-cols-3 gap-1 pt-2">
-                  <MetricChip
-                    selected={selected}
-                    icon={<ImageIcon className="h-3.5 w-3.5" />}
-                    value={uploadCount}
-                  />
-                  <MetricChip
-                    selected={selected}
-                    icon={<Users className="h-3.5 w-3.5" />}
-                    value={uploadedUsers}
-                  />
-                  <MetricChip
-                    selected={selected}
-                    risk
-                    icon={<TriangleAlert className="h-3.5 w-3.5" />}
-                    value={riskyPatients}
-                  />
-                </div>
-              ) : null}
-            </button>
-          );
-        })}
+      <div className="hidden w-full grid-cols-7 gap-2 md:grid">
+        {weekCells.map((cell) => (
+          <DayCellButton
+            key={cell.dateKey}
+            cell={cell}
+            metricsByDate={metricsByDate}
+            available={available}
+            selected={selectedDate === cell.dateKey}
+            onSelectDate={onSelectDate}
+          />
+        ))}
       </div>
     </section>
   );
diff --git a/apps/frontend/app/admin/_components/history-upload-annotation-modal.tsx b/apps/frontend/app/admin/_components/history-upload-annotation-modal.tsx
new file mode 100644
index 0000000..b1ecb04
--- /dev/null
+++ b/apps/frontend/app/admin/_components/history-upload-annotation-modal.tsx
@@ -0,0 +1,146 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { X } from "lucide-react";
+
+import type { StaffAnnotationItem, StaffHistoryOverviewUploadItem } from "@/lib/api/staff";
+
+import { historyUploadRiskLabel, type HistoryUploadDraftVerdict } from "./history-upload-review-helpers";
+
+type HistoryUploadAnnotationModalProps = {
+  upload: StaffHistoryOverviewUploadItem;
+  imageUrl: string | null;
+  draft: HistoryUploadDraftVerdict;
+  saving: boolean;
+  onDraftChange: (next: HistoryUploadDraftVerdict) => void;
+  onSave: () => void;
+  onClose: () => void;
+};
+
+export function HistoryUploadAnnotationModal({
+  upload,
+  imageUrl,
+  draft,
+  saving,
+  onDraftChange,
+  onSave,
+  onClose,
+}: HistoryUploadAnnotationModalProps) {
+  return (
+    <div className="fixed inset-0 z-[60] flex items-end justify-center bg-zinc-900/60 p-0 sm:items-center sm:p-4">
+      <div className="h-[90vh] w-full overflow-auto rounded-t-2xl bg-white shadow-xl sm:h-auto sm:max-w-3xl sm:rounded-2xl">
+        <div className="sticky top-0 z-10 flex items-center justify-between border-b border-zinc-100 bg-white px-4 py-3">
+          <div>
+            <p className="text-sm font-medium text-zinc-900">{upload.patient_full_name ?? "未命名病患"}</p>
+            <p className="font-mono text-xs text-zinc-500">{upload.case_number}</p>
+          </div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="inline-flex h-8 w-8 items-center justify-center rounded-lg text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"
+            aria-label="關閉"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+        <div className="grid gap-4 p-4 md:grid-cols-[minmax(0,1fr)_22rem]">
+          <div className="relative h-80 overflow-hidden rounded-xl bg-zinc-100">
+            {imageUrl ? (
+              <Image
+                src={imageUrl}
+                alt={`history-preview-${upload.upload_id}`}
+                fill
+                unoptimized
+                className="object-contain"
+              />
+            ) : (
+              <div className="flex h-full items-center justify-center text-sm text-zinc-400">載入影像中...</div>
+            )}
+          </div>
+          <div className="flex flex-col gap-3">
+            <dl className="space-y-2 text-sm">
+              <div className="flex items-start justify-between gap-4">
+                <dt className="text-zinc-400">年齡</dt>
+                <dd className="text-right text-zinc-900">{upload.age ?? "-"}</dd>
+              </div>
+              <div className="flex items-start justify-between gap-4">
+                <dt className="text-zinc-400">上傳時間</dt>
+                <dd className="text-right text-zinc-900">{new Date(upload.created_at).toLocaleString("zh-TW")}</dd>
+              </div>
+              <div className="flex items-start justify-between gap-4">
+                <dt className="text-zinc-400">臨床風險</dt>
+                <dd className="text-right text-zinc-900">{historyUploadRiskLabel(upload)}</dd>
+              </div>
+              <div className="flex items-start justify-between gap-4">
+                <dt className="text-zinc-400">影像判讀</dt>
+                <dd className="text-right text-zinc-900">{upload.screening_result}</dd>
+              </div>
+              <div className="flex items-start justify-between gap-4">
+                <dt className="text-zinc-400">症狀綜合</dt>
+                <dd className="text-right text-zinc-900">{upload.symptom_aware_priority}</dd>
+              </div>
+              <div className="flex items-start justify-between gap-4">
+                <dt className="text-zinc-400">機率</dt>
+                <dd className="text-right text-zinc-900">
+                  {upload.probability !== null ? `${(upload.probability * 100).toFixed(1)}%` : "-"}
+                </dd>
+              </div>
+              <div className="flex items-start justify-between gap-4">
+                <dt className="text-zinc-400">Threshold</dt>
+                <dd className="text-right text-zinc-900">
+                  {upload.threshold !== null ? upload.threshold.toFixed(2) : "-"}
+                </dd>
+              </div>
+              <div className="flex items-start justify-between gap-4">
+                <dt className="text-zinc-400">Model</dt>
+                <dd className="text-right text-zinc-900">{upload.model_version ?? "-"}</dd>
+              </div>
+            </dl>
+            <div>
+              <Link href={`/admin/patients/${upload.patient_id}`} className="text-xs text-zinc-500 hover:text-zinc-800">
+                開啟病患完整頁
+              </Link>
+            </div>
+            <label className="flex flex-col gap-1 text-xs text-zinc-500">
+              標註標籤
+              <select
+                value={draft.label}
+                onChange={(event) =>
+                  onDraftChange({
+                    ...draft,
+                    label: event.target.value as StaffAnnotationItem["label"],
+                  })
+                }
+                className="rounded-lg border border-zinc-200 px-3 py-2 text-sm text-zinc-900"
+              >
+                <option value="normal">normal</option>
+                <option value="suspected">suspected</option>
+                <option value="confirmed_infection">confirmed_infection</option>
+                <option value="rejected">rejected</option>
+              </select>
+            </label>
+            <label className="flex flex-col gap-1 text-xs text-zinc-500">
+              備註
+              <textarea
+                value={draft.comment}
+                onChange={(event) => onDraftChange({ ...draft, comment: event.target.value })}
+                rows={6}
+                className="resize-none rounded-lg border border-zinc-200 px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400"
+                placeholder="comment..."
+              />
+            </label>
+            <button
+              type="button"
+              onClick={onSave}
+              disabled={saving}
+              className="mt-auto rounded-xl bg-zinc-900 px-4 py-2.5 text-sm font-medium text-white hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-zinc-300"
+            >
+              {saving ? "儲存中..." : "儲存"}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/frontend/app/admin/_components/history-upload-review-helpers.ts b/apps/frontend/app/admin/_components/history-upload-review-helpers.ts
new file mode 100644
index 0000000..1b0d7e9
--- /dev/null
+++ b/apps/frontend/app/admin/_components/history-upload-review-helpers.ts
@@ -0,0 +1,69 @@
+import type { StaffAnnotationItem, StaffHistoryOverviewUploadItem } from "@/lib/api/staff";
+
+export type HistoryUploadDraftVerdict = {
+  label: StaffAnnotationItem["label"];
+  comment: string;
+};
+
+export function formatHistoryUploadLocalTime(raw: string): string {
+  return new Intl.DateTimeFormat("zh-TW", {
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false,
+    timeZone: "Asia/Taipei",
+  }).format(new Date(raw));
+}
+
+export function historyUploadRiskBadgeClass(upload: StaffHistoryOverviewUploadItem): string {
+  if (upload.risk_rank === 0) {
+    return "bg-rose-100 text-rose-700";
+  }
+  if (upload.risk_rank === 1) {
+    return "bg-red-100 text-red-700";
+  }
+  if (upload.risk_rank === 2) {
+    return "bg-orange-100 text-orange-700";
+  }
+  if (upload.risk_rank === 3) {
+    return "bg-emerald-100 text-emerald-700";
+  }
+  return "bg-zinc-200 text-zinc-700";
+}
+
+export function historyUploadRiskLabel(upload: StaffHistoryOverviewUploadItem): string {
+  if (upload.annotation_label === "confirmed_infection") {
+    return "confirmed_infection";
+  }
+  if (upload.annotation_label === "suspected") {
+    return "suspected";
+  }
+  if (upload.annotation_label === "normal") {
+    return "normal";
+  }
+  if (upload.annotation_label === "rejected") {
+    return "rejected";
+  }
+  if (upload.risk_rank === 2) {
+    return "症狀高風險";
+  }
+  return upload.screening_result;
+}
+
+export function suggestedHistoryUploadLabel(
+  upload: StaffHistoryOverviewUploadItem
+): StaffAnnotationItem["label"] {
+  if (upload.annotation_label) {
+    return upload.annotation_label;
+  }
+  if (upload.screening_result === "rejected" || upload.screening_result === "technical_error") {
+    return "rejected";
+  }
+  if (upload.symptom_aware_priority === "suspected" || upload.screening_result === "suspected") {
+    return "suspected";
+  }
+  if (upload.screening_result === "normal") {
+    return "normal";
+  }
+  return "rejected";
+}
diff --git a/apps/frontend/app/admin/_components/history-upload-thumbnail-grid.tsx b/apps/frontend/app/admin/_components/history-upload-thumbnail-grid.tsx
new file mode 100644
index 0000000..d142b1c
--- /dev/null
+++ b/apps/frontend/app/admin/_components/history-upload-thumbnail-grid.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import Image from "next/image";
+
+import type { StaffHistoryOverviewUploadItem } from "@/lib/api/staff";
+
+import {
+  formatHistoryUploadLocalTime,
+  historyUploadRiskBadgeClass,
+  historyUploadRiskLabel,
+} from "./history-upload-review-helpers";
+
+type HistoryUploadThumbnailGridProps = {
+  uploads: StaffHistoryOverviewUploadItem[];
+  imageUrlByUploadId: Record<number, string>;
+  imageErrorByUploadId: Record<number, boolean>;
+  onSelectUpload: (uploadId: number) => void;
+  hasMore?: boolean;
+  onLoadMore?: () => void;
+};
+
+export function HistoryUploadThumbnailGrid({
+  uploads,
+  imageUrlByUploadId,
+  imageErrorByUploadId,
+  onSelectUpload,
+  hasMore,
+  onLoadMore,
+}: HistoryUploadThumbnailGridProps) {
+  return (
+    <div className="grid grid-cols-2 gap-2 md:grid-cols-4">
+      {uploads.map((item) => {
+        const imageUrl = imageUrlByUploadId[item.upload_id];
+        const imageError = imageErrorByUploadId[item.upload_id] ?? false;
+        return (
+          <button
+            key={item.upload_id}
+            type="button"
+            onClick={() => onSelectUpload(item.upload_id)}
+            className="group relative aspect-square overflow-hidden rounded-xl bg-zinc-100 text-left ring-1 ring-zinc-200 transition hover:ring-zinc-400"
+          >
+            {imageUrl ? (
+              <Image
+                src={imageUrl}
+                alt={`history-upload-${item.upload_id}`}
+                fill
+                unoptimized
+                className="object-cover"
+              />
+            ) : (
+              <div className="flex h-full items-center justify-center text-xs text-zinc-400">
+                {imageError ? "載入失敗" : "載入中"}
+              </div>
+            )}
+            <span
+              className={`absolute left-1 top-1 rounded-full px-1.5 py-0.5 text-[10px] font-medium ${historyUploadRiskBadgeClass(item)}`}
+            >
+              {historyUploadRiskLabel(item)}
+            </span>
+            <span className="absolute bottom-1 right-1 rounded bg-zinc-900/75 px-1.5 py-0.5 text-[10px] text-white">
+              {formatHistoryUploadLocalTime(item.created_at)}
+            </span>
+          </button>
+        );
+      })}
+      {hasMore && onLoadMore ? (
+        <button
+          type="button"
+          onClick={onLoadMore}
+          className="flex aspect-square items-center justify-center rounded-xl border border-dashed border-zinc-300 text-sm font-medium text-zinc-600 hover:bg-zinc-50"
+        >
+          Load more
+        </button>
+      ) : null}
+    </div>
+  );
+}
diff --git a/apps/frontend/app/admin/_components/patient-day-upload-review-modal.tsx b/apps/frontend/app/admin/_components/patient-day-upload-review-modal.tsx
new file mode 100644
index 0000000..7244075
--- /dev/null
+++ b/apps/frontend/app/admin/_components/patient-day-upload-review-modal.tsx
@@ -0,0 +1,221 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { X } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+
+import { getReadableApiError } from "@/lib/api/client";
+import {
+  fetchHistoryOverview,
+  type StaffHistoryOverviewUploadItem,
+  type StaffHistoryOverviewUserGroupItem,
+  upsertUploadAnnotation,
+} from "@/lib/api/staff";
+
+import { HistoryUploadAnnotationModal } from "./history-upload-annotation-modal";
+import {
+  suggestedHistoryUploadLabel,
+  type HistoryUploadDraftVerdict,
+} from "./history-upload-review-helpers";
+import { HistoryUploadThumbnailGrid } from "./history-upload-thumbnail-grid";
+import { useUploadImageUrls } from "./use-upload-image-urls";
+
+const INITIAL_VISIBLE = 7;
+const LOAD_STEP = 8;
+
+type PatientDayUploadReviewModalProps = {
+  open: boolean;
+  onClose: () => void;
+  patientId: number;
+  localDate: string;
+  fallbackName?: string;
+  fallbackCaseNumber?: string;
+  fallbackPictureUrl?: string | null;
+  onReviewSaved?: () => void;
+};
+
+export function PatientDayUploadReviewModal({
+  open,
+  onClose,
+  patientId,
+  localDate,
+  fallbackName,
+  fallbackCaseNumber,
+  fallbackPictureUrl,
+  onReviewSaved,
+}: PatientDayUploadReviewModalProps) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [group, setGroup] = useState<StaffHistoryOverviewUserGroupItem | null>(null);
+  const [visibleCount, setVisibleCount] = useState(INITIAL_VISIBLE);
+  const [selectedUploadId, setSelectedUploadId] = useState<number | null>(null);
+  const [draft, setDraft] = useState<HistoryUploadDraftVerdict>({ label: "suspected", comment: "" });
+  const [saving, setSaving] = useState(false);
+
+  const loadGroup = useCallback(async () => {
+    setLoading(true);
+    try {
+      const response = await fetchHistoryOverview({
+        localDate,
+        sortBy: "timeline",
+        groupByUser: true,
+        groupSortBy: "infection_risk",
+      });
+      const nextGroup = response.groups.find((item) => item.patient_id === patientId) ?? null;
+      setGroup(nextGroup);
+      setError(nextGroup ? null : "找不到當日上傳紀錄");
+    } catch (loadError) {
+      setGroup(null);
+      setError(getReadableApiError(loadError));
+    } finally {
+      setLoading(false);
+    }
+  }, [localDate, patientId]);
+
+  useEffect(() => {
+    const timer = window.setTimeout(() => {
+      void loadGroup();
+    }, 0);
+    return () => {
+      window.clearTimeout(timer);
+    };
+  }, [loadGroup]);
+
+  const visibleUploads = useMemo(() => {
+    if (!group) {
+      return [] as StaffHistoryOverviewUploadItem[];
+    }
+    return group.uploads.slice(0, visibleCount);
+  }, [group, visibleCount]);
+
+  const selectedUpload = useMemo(
+    () =>
+      selectedUploadId != null
+        ? group?.uploads.find((item) => item.upload_id === selectedUploadId) ?? null
+        : null,
+    [group?.uploads, selectedUploadId]
+  );
+
+  const uploadIdsForImages = useMemo(() => {
+    const ids = visibleUploads.map((item) => item.upload_id);
+    if (selectedUpload && !ids.includes(selectedUpload.upload_id)) {
+      ids.push(selectedUpload.upload_id);
+    }
+    return ids;
+  }, [selectedUpload, visibleUploads]);
+
+  const { imageUrlByUploadId, imageErrorByUploadId } = useUploadImageUrls(uploadIdsForImages);
+
+  useEffect(() => {
+    if (!selectedUpload) {
+      return;
+    }
+    const timer = window.setTimeout(() => {
+      setDraft({
+        label: suggestedHistoryUploadLabel(selectedUpload),
+        comment: selectedUpload.annotation_comment ?? "",
+      });
+    }, 0);
+    return () => {
+      window.clearTimeout(timer);
+    };
+  }, [selectedUpload]);
+
+  async function onSaveSelected() {
+    if (!selectedUpload) {
+      return;
+    }
+    setSaving(true);
+    try {
+      await upsertUploadAnnotation(selectedUpload.upload_id, {
+        label: draft.label,
+        comment: draft.comment,
+      });
+      toast.success("已儲存標註");
+      setSelectedUploadId(null);
+      await loadGroup();
+      onReviewSaved?.();
+    } catch {
+      toast.error("儲存失敗，請稍後重試");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  if (!open) {
+    return null;
+  }
+
+  const displayName = group?.real_name ?? group?.patient_full_name ?? fallbackName ?? "未命名";
+  const caseNumber = group?.case_number ?? fallbackCaseNumber ?? "—";
+  const pictureUrl = group?.picture_url ?? fallbackPictureUrl ?? null;
+  const hasMore = group ? visibleCount < group.uploads.length : false;
+
+  return (
+    <>
+      <div className="fixed inset-0 z-50 flex items-end justify-center bg-zinc-900/60 p-0 sm:items-center sm:p-4">
+        <div className="flex max-h-[90vh] w-full flex-col overflow-hidden rounded-t-2xl bg-white shadow-xl sm:max-w-4xl sm:rounded-2xl">
+          <div className="flex items-center justify-between border-b border-zinc-100 px-4 py-3">
+            <div className="flex min-w-0 items-center gap-3">
+              <Link
+                href={`/admin/patients/${patientId}`}
+                className="relative block h-10 w-10 shrink-0 overflow-hidden rounded-full bg-zinc-100 ring-1 ring-zinc-200 transition hover:ring-zinc-400"
+                aria-label={`查看 ${displayName} 詳情`}
+              >
+                {pictureUrl ? (
+                  <Image src={pictureUrl} alt={`avatar-${patientId}`} fill unoptimized className="object-cover" />
+                ) : (
+                  <div className="flex h-full items-center justify-center text-xs text-zinc-400">N/A</div>
+                )}
+              </Link>
+              <div className="min-w-0">
+                <p className="truncate text-sm font-medium text-zinc-900">{displayName}</p>
+                <p className="truncate text-xs text-zinc-500">
+                  {caseNumber}
+                  {group ? ` · 當日上傳 ${group.upload_count} 張` : null}
+                </p>
+              </div>
+            </div>
+            <button
+              type="button"
+              onClick={onClose}
+              className="inline-flex h-8 w-8 items-center justify-center rounded-lg text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"
+              aria-label="關閉"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+
+          <div className="overflow-y-auto p-4">
+            {loading ? <p className="py-8 text-center text-sm text-zinc-400">載入上傳紀錄中…</p> : null}
+            {!loading && error ? <p className="py-8 text-center text-sm text-red-600">{error}</p> : null}
+            {!loading && !error && group ? (
+              <HistoryUploadThumbnailGrid
+                uploads={visibleUploads}
+                imageUrlByUploadId={imageUrlByUploadId}
+                imageErrorByUploadId={imageErrorByUploadId}
+                onSelectUpload={setSelectedUploadId}
+                hasMore={hasMore}
+                onLoadMore={() => setVisibleCount((current) => current + LOAD_STEP)}
+              />
+            ) : null}
+          </div>
+        </div>
+      </div>
+
+      {selectedUpload ? (
+        <HistoryUploadAnnotationModal
+          upload={selectedUpload}
+          imageUrl={imageUrlByUploadId[selectedUpload.upload_id] ?? null}
+          draft={draft}
+          saving={saving}
+          onDraftChange={setDraft}
+          onSave={() => void onSaveSelected()}
+          onClose={() => setSelectedUploadId(null)}
+        />
+      ) : null}
+    </>
+  );
+}
diff --git a/apps/frontend/app/admin/_components/pending-bindings-summary.tsx b/apps/frontend/app/admin/_components/pending-bindings-summary.tsx
deleted file mode 100644
index 8ef236b..0000000
--- a/apps/frontend/app/admin/_components/pending-bindings-summary.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import Link from "next/link";
-
-import type { StaffPendingBindingItem } from "@/lib/api/staff";
-
-type PendingBindingsSummaryProps = {
-  items: StaffPendingBindingItem[];
-  loading: boolean;
-  error: string | null;
-};
-
-export function PendingBindingsSummary({ items, loading, error }: PendingBindingsSummaryProps) {
-  const visible = items.slice(0, 3);
-  return (
-    <section className="rounded-xl border border-zinc-200 bg-white p-3 shadow-sm">
-      <div className="mb-2 flex items-center justify-between gap-2">
-        <h2 className="text-sm font-semibold text-zinc-900">待審綁定</h2>
-        <span className="text-xs text-zinc-500">{items.length}</span>
-      </div>
-      {loading ? <p className="py-3 text-center text-sm text-zinc-400">載入中…</p> : null}
-      {!loading && error ? <p className="py-3 text-center text-sm text-red-600">{error}</p> : null}
-      {!loading && !error && items.length === 0 ? (
-        <p className="py-3 text-center text-sm text-zinc-400">目前沒有待審核綁定。</p>
-      ) : null}
-      {!loading && !error && visible.length > 0 ? (
-        <div className="flex flex-col gap-2">
-          {visible.map((item) => (
-            <div
-              key={item.id}
-              className="flex items-center justify-between gap-2 rounded-lg border border-zinc-200 bg-zinc-50 px-2.5 py-2"
-            >
-              <div className="min-w-0">
-                <p className="truncate text-xs font-medium text-zinc-900">
-                  {item.case_number} / {item.birth_date}
-                </p>
-                <p className="truncate font-mono text-[10px] text-zinc-400">{item.line_user_id}</p>
-              </div>
-              <span className="shrink-0 text-[11px] text-zinc-500">
-                {item.candidates.length > 0 ? `${item.candidates.length} 候選` : "無候選"}
-              </span>
-            </div>
-          ))}
-        </div>
-      ) : null}
-      <Link
-        href="/admin/registration-review"
-        className="mt-2 inline-block text-xs text-zinc-500 hover:text-zinc-800"
-      >
-        前往註冊審核 →
-      </Link>
-    </section>
-  );
-}
diff --git a/apps/frontend/app/admin/_components/today-patient-detail-panel.tsx b/apps/frontend/app/admin/_components/today-patient-detail-panel.tsx
new file mode 100644
index 0000000..b74ae0e
--- /dev/null
+++ b/apps/frontend/app/admin/_components/today-patient-detail-panel.tsx
@@ -0,0 +1,210 @@
+"use client";
+
+import Link from "next/link";
+import { UserRound } from "lucide-react";
+import { useState } from "react";
+
+import { PersonAvatar } from "@/app/admin/patient-assignment/person-avatar";
+import { PatientDayUploadReviewModal } from "@/app/admin/_components/patient-day-upload-review-modal";
+import { UploadThumb } from "@/app/admin/_components/upload-thumb";
+import type { StaffTodayAttentionPatientItem } from "@/lib/api/staff";
+import { activeSymptomLabels } from "@/lib/symptoms";
+import { cn } from "@/lib/utils";
+
+type TodayPatientDetailPanelProps = {
+  item: StaffTodayAttentionPatientItem | null;
+  selectedDate: string;
+  dayScopeLabel: string;
+  isTodaySelected: boolean;
+  className?: string;
+  onReviewSaved?: () => void;
+};
+
+function tierLabel(tier: StaffTodayAttentionPatientItem["tier"]): { text: string; className: string } {
+  if (tier === "suspected") {
+    return { text: "疑似感染", className: "bg-red-50 text-red-700" };
+  }
+  if (tier === "elevated") {
+    return { text: "症狀高風險", className: "bg-amber-50 text-amber-800" };
+  }
+  return { text: "一般", className: "bg-zinc-100 text-zinc-600" };
+}
+
+function statusLabel(item: StaffTodayAttentionPatientItem, isTodaySelected: boolean): {
+  text: string;
+  className: string;
+} {
+  if (item.tier === "other") {
+    return {
+      text: isTodaySelected ? "今日已上傳" : "當日已上傳",
+      className: "text-zinc-500",
+    };
+  }
+  if (item.has_annotation) {
+    return { text: "已註解", className: "text-green-600" };
+  }
+  return { text: "未處理", className: "text-red-600" };
+}
+
+function formatTime(raw: string): string {
+  return new Intl.DateTimeFormat("zh-TW", {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+    timeZone: "Asia/Taipei",
+  }).format(new Date(raw));
+}
+
+function collectUploadIds(item: StaffTodayAttentionPatientItem): number[] {
+  const ids: number[] = [];
+  const seen = new Set<number>();
+  const push = (uploadId: number) => {
+    if (seen.has(uploadId)) {
+      return;
+    }
+    seen.add(uploadId);
+    ids.push(uploadId);
+  };
+  if (item.risk_highlight) {
+    push(item.risk_highlight.upload_id);
+  }
+  for (const uploadId of item.preview_upload_ids ?? []) {
+    push(uploadId);
+  }
+  if (ids.length === 0) {
+    push(item.representative_upload_id);
+  }
+  return ids;
+}
+
+export function TodayPatientDetailPanel({
+  item,
+  selectedDate,
+  dayScopeLabel,
+  isTodaySelected,
+  className,
+  onReviewSaved,
+}: TodayPatientDetailPanelProps) {
+  const [reviewOpen, setReviewOpen] = useState(false);
+
+  if (!item) {
+    return (
+      <aside
+        className={cn(
+          "rounded-xl border border-dashed border-zinc-300 bg-zinc-50/80 p-4 text-center",
+          className
+        )}
+      >
+        <p className="text-sm font-medium text-zinc-700">病患預覽</p>
+        <p className="mt-2 text-xs text-zinc-400">點選左側病患卡片以查看當日上傳預覽與快速操作。</p>
+      </aside>
+    );
+  }
+
+  const name = item.full_name || item.case_number;
+  const tier = tierLabel(item.tier);
+  const status = statusLabel(item, isTodaySelected);
+  const highlight = item.risk_highlight;
+  const uploadIds = collectUploadIds(item);
+  const overflow = Math.max(0, item.day_upload_count - uploadIds.length);
+  const canReview = item.day_upload_count > 0;
+
+  const symptomLine =
+    highlight != null
+      ? activeSymptomLabels({
+          pain: highlight.symptom_pain,
+          discharge: highlight.symptom_discharge,
+          pus: highlight.symptom_pus,
+          cloudyDialysate: highlight.symptom_cloudy_dialysate,
+        }).join("、")
+      : "";
+
+  return (
+    <>
+      <aside className={cn("rounded-xl border border-zinc-200 bg-white p-4 shadow-sm", className)}>
+      <div className="flex items-start gap-3">
+        <PersonAvatar name={name} pictureUrl={item.picture_url} size="lg" />
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-2">
+            <h2 className="truncate text-sm font-semibold text-zinc-900">{name}</h2>
+            <span className={cn("rounded-full px-2 py-0.5 text-[10px] font-medium", tier.className)}>
+              {tier.text}
+            </span>
+          </div>
+          <p className="mt-0.5 font-mono text-xs text-zinc-500">{item.case_number}</p>
+          <p className="mt-1 text-xs text-zinc-500">
+            {dayScopeLabel} {item.day_upload_count} 張上傳
+            <span className="mx-1 text-zinc-300">·</span>
+            <span className={status.className}>{status.text}</span>
+          </p>
+        </div>
+      </div>
+
+      {highlight ? (
+        <div className="mt-3 rounded-lg bg-zinc-50 p-3 ring-1 ring-zinc-200">
+          <p className="text-[10px] font-medium uppercase tracking-wide text-zinc-400">最高風險上傳</p>
+          <p className="mt-1 text-xs text-zinc-700">
+            {highlight.screening_result === "suspected"
+              ? `suspected${
+                  highlight.probability != null ? ` · AI ${Math.round(highlight.probability * 100)}%` : ""
+                }`
+              : "症狀高風險"}
+            <span className="mx-1 text-zinc-300">·</span>
+            {formatTime(highlight.created_at)}
+          </p>
+          {symptomLine ? <p className="mt-1 text-[11px] text-zinc-500">{symptomLine}</p> : null}
+        </div>
+      ) : null}
+
+      <div className="mt-3">
+        <p className="mb-2 text-[10px] font-medium uppercase tracking-wide text-zinc-400">上傳預覽</p>
+        <div className="grid grid-cols-2 gap-2">
+          {uploadIds.map((uploadId) => (
+            <div key={uploadId} className="aspect-square">
+              <UploadThumb uploadId={uploadId} />
+            </div>
+          ))}
+          {overflow > 0 ? (
+            <div className="flex aspect-square items-center justify-center rounded-md bg-zinc-100 text-sm font-semibold text-zinc-600 ring-1 ring-zinc-200">
+              +{overflow}
+            </div>
+          ) : null}
+        </div>
+      </div>
+
+      <div className="mt-4 flex flex-col gap-2">
+        <Link
+          href={`/admin/patients/${item.patient_id}`}
+          className="inline-flex items-center justify-center gap-2 rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm font-medium text-zinc-800 transition hover:border-zinc-400"
+        >
+          <UserRound className="h-4 w-4" />
+          病患資料
+        </Link>
+        {canReview ? (
+          <button
+            type="button"
+            onClick={() => setReviewOpen(true)}
+            className="inline-flex items-center justify-center gap-2 rounded-lg bg-zinc-900 px-3 py-2 text-sm font-medium text-white transition hover:bg-zinc-800"
+          >
+            審核
+          </button>
+        ) : null}
+      </div>
+      </aside>
+
+      {reviewOpen ? (
+        <PatientDayUploadReviewModal
+          key={`${item.patient_id}-${selectedDate}`}
+          open
+          onClose={() => setReviewOpen(false)}
+          patientId={item.patient_id}
+          localDate={selectedDate}
+          fallbackName={name}
+          fallbackCaseNumber={item.case_number}
+          fallbackPictureUrl={item.picture_url}
+          onReviewSaved={onReviewSaved}
+        />
+      ) : null}
+    </>
+  );
+}
diff --git a/apps/frontend/app/admin/_components/today-patient-pool.tsx b/apps/frontend/app/admin/_components/today-patient-pool.tsx
index e56ccfd..4f23480 100644
--- a/apps/frontend/app/admin/_components/today-patient-pool.tsx
+++ b/apps/frontend/app/admin/_components/today-patient-pool.tsx
@@ -2,6 +2,7 @@
 
 import type { StaffTodayAttentionPatientItem } from "@/lib/api/staff";
 
+import { TodayPatientDetailPanel } from "./today-patient-detail-panel";
 import { TodayPatientRow } from "./today-patient-row";
 
 type TodayPatientPoolProps = {
@@ -13,6 +14,10 @@ type TodayPatientPoolProps = {
   items: StaffTodayAttentionPatientItem[];
   dayScopeLabel: string;
   isTodaySelected: boolean;
+  selectedDate: string;
+  selectedPatientId: number | null;
+  onSelectPatient: (patientId: number) => void;
+  onReviewSaved?: () => void;
 };
 
 export function TodayPatientPool({
@@ -24,9 +29,17 @@ export function TodayPatientPool({
   items,
   dayScopeLabel,
   isTodaySelected,
+  selectedDate,
+  selectedPatientId,
+  onSelectPatient,
+  onReviewSaved,
 }: TodayPatientPoolProps) {
+  const selectedItem =
+    selectedPatientId != null ? items.find((item) => item.patient_id === selectedPatientId) ?? null : null;
+
   return (
-    <section className="rounded-xl border border-dashed border-zinc-300 bg-zinc-50/80 p-3">
+    <div className="flex flex-col gap-4 lg:flex-row lg:items-start">
+      <section className="min-w-0 flex-1 rounded-xl border border-dashed border-zinc-300 bg-zinc-50/80 p-3 lg:flex-[1.5]">
       <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
         <h2 className="text-sm font-semibold text-zinc-900">{dayScopeLabel}上傳病患</h2>
         <p className="text-xs text-zinc-500">
@@ -39,12 +52,28 @@ export function TodayPatientPool({
         <p className="py-6 text-center text-sm text-zinc-400">{dayScopeLabel}尚無上傳病患。</p>
       ) : null}
       {!loading && !error && items.length > 0 ? (
-        <div className="grid grid-cols-1 gap-2 lg:grid-cols-2 xl:grid-cols-3">
+        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3">
           {items.map((item) => (
-            <TodayPatientRow key={item.patient_id} item={item} isTodaySelected={isTodaySelected} />
+            <TodayPatientRow
+              key={item.patient_id}
+              item={item}
+              isTodaySelected={isTodaySelected}
+              selected={item.patient_id === selectedPatientId}
+              onSelect={onSelectPatient}
+            />
           ))}
         </div>
       ) : null}
-    </section>
+      </section>
+
+      <TodayPatientDetailPanel
+        item={selectedItem}
+        selectedDate={selectedDate}
+        dayScopeLabel={dayScopeLabel}
+        isTodaySelected={isTodaySelected}
+        className="w-full shrink-0 lg:sticky lg:top-4 lg:w-[320px] xl:w-[360px]"
+        onReviewSaved={onReviewSaved}
+      />
+    </div>
   );
 }
diff --git a/apps/frontend/app/admin/_components/today-patient-row.tsx b/apps/frontend/app/admin/_components/today-patient-row.tsx
index 61fd8f2..fccd323 100644
--- a/apps/frontend/app/admin/_components/today-patient-row.tsx
+++ b/apps/frontend/app/admin/_components/today-patient-row.tsx
@@ -1,12 +1,8 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import Image from "next/image";
-import Link from "next/link";
-
 import { PersonAvatar } from "@/app/admin/patient-assignment/person-avatar";
+import { UploadThumb } from "@/app/admin/_components/upload-thumb";
 import type { StaffTodayAttentionPatientItem, StaffTodayAttentionRiskHighlight } from "@/lib/api/staff";
-import { fetchUploadImageAccess } from "@/lib/api/staff";
 import { activeSymptomLabels } from "@/lib/symptoms";
 import { cn } from "@/lib/utils";
 
@@ -44,47 +40,14 @@ function riskMainLine(highlight: StaffTodayAttentionRiskHighlight): string {
   return "症狀高風險";
 }
 
-function UploadThumb({ uploadId }: { uploadId: number }) {
-  const [imageUrl, setImageUrl] = useState<string | null>(null);
-  const [imageError, setImageError] = useState(false);
-
-  useEffect(() => {
-    let cancelled = false;
-    void fetchUploadImageAccess(uploadId)
-      .then((result) => {
-        if (!cancelled) {
-          setImageUrl(result.image_url);
-        }
-      })
-      .catch(() => {
-        if (!cancelled) {
-          setImageError(true);
-        }
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [uploadId]);
-
-  return (
-    <div className="relative h-full w-full overflow-hidden rounded-md bg-zinc-100 ring-1 ring-zinc-200">
-      {imageUrl ? (
-        <Image src={imageUrl} alt="" fill unoptimized className="object-cover" />
-      ) : (
-        <div className="flex h-full items-center justify-center text-[10px] text-zinc-400">
-          {imageError ? "失敗" : "…"}
-        </div>
-      )}
-    </div>
-  );
-}
-
 type TodayPatientRowProps = {
   item: StaffTodayAttentionPatientItem;
   isTodaySelected: boolean;
+  selected: boolean;
+  onSelect: (patientId: number) => void;
 };
 
-export function TodayPatientRow({ item, isTodaySelected }: TodayPatientRowProps) {
+export function TodayPatientRow({ item, isTodaySelected, selected, onSelect }: TodayPatientRowProps) {
   const name = item.full_name || item.case_number;
   const status = statusLabel(item, isTodaySelected);
   const highlight = item.risk_highlight;
@@ -105,9 +68,13 @@ export function TodayPatientRow({ item, isTodaySelected }: TodayPatientRowProps)
     !isRiskTier && item.day_upload_count > 4 ? item.day_upload_count - Math.min(previewIds.length, 3) : 0;
 
   return (
-    <Link
-      href={`/admin/patients/${item.patient_id}`}
-      className="flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3 transition hover:border-zinc-400"
+    <button
+      type="button"
+      onClick={() => onSelect(item.patient_id)}
+      className={cn(
+        "flex w-full flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3 text-left transition hover:border-zinc-400",
+        selected && "ring-2 ring-zinc-900"
+      )}
     >
       <div className="flex items-start gap-2.5">
         <PersonAvatar name={name} pictureUrl={item.picture_url} size="lg" />
@@ -148,6 +115,6 @@ export function TodayPatientRow({ item, isTodaySelected }: TodayPatientRowProps)
           ) : null}
         </div>
       ) : null}
-    </Link>
+    </button>
   );
 }
diff --git a/apps/frontend/app/admin/_components/today-upload-count.tsx b/apps/frontend/app/admin/_components/today-upload-count.tsx
deleted file mode 100644
index eb82b12..0000000
--- a/apps/frontend/app/admin/_components/today-upload-count.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import Link from "next/link";
-
-type TodayUploadCountProps = {
-  totalUploads: number | null;
-  loading?: boolean;
-  dayScopeLabel: string;
-  selectedDate: string;
-};
-
-export function TodayUploadCount({
-  totalUploads,
-  loading,
-  dayScopeLabel,
-  selectedDate,
-}: TodayUploadCountProps) {
-  return (
-    <section className="rounded-xl border border-zinc-200 bg-white p-3 shadow-sm">
-      <div className="flex items-start justify-between gap-2">
-        <div>
-          <p className="text-xs text-zinc-500">{dayScopeLabel}上傳</p>
-          <p className="mt-1 text-2xl font-semibold text-zinc-900">
-            {loading ? "…" : (totalUploads ?? "—")}
-          </p>
-        </div>
-        <Link
-          href={`/admin/history-overview?date=${encodeURIComponent(selectedDate)}&tab=clinical`}
-          className="text-xs text-zinc-400 hover:text-zinc-700"
-        >
-          完整日檢視 →
-        </Link>
-      </div>
-    </section>
-  );
-}
diff --git a/apps/frontend/app/admin/_components/upload-thumb.tsx b/apps/frontend/app/admin/_components/upload-thumb.tsx
new file mode 100644
index 0000000..d280f12
--- /dev/null
+++ b/apps/frontend/app/admin/_components/upload-thumb.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Image from "next/image";
+
+import { fetchUploadImageAccess } from "@/lib/api/staff";
+import { cn } from "@/lib/utils";
+
+type UploadThumbProps = {
+  uploadId: number;
+  className?: string;
+  imageClassName?: string;
+};
+
+export function UploadThumb({ uploadId, className, imageClassName }: UploadThumbProps) {
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+  const [imageError, setImageError] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    void fetchUploadImageAccess(uploadId)
+      .then((result) => {
+        if (!cancelled) {
+          setImageUrl(result.image_url);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setImageError(true);
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [uploadId]);
+
+  return (
+    <div className={cn("relative h-full w-full overflow-hidden rounded-md bg-zinc-100 ring-1 ring-zinc-200", className)}>
+      {imageUrl ? (
+        <Image src={imageUrl} alt="" fill unoptimized className={cn("object-cover", imageClassName)} />
+      ) : (
+        <div className="flex h-full items-center justify-center text-[10px] text-zinc-400">
+          {imageError ? "失敗" : "…"}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/frontend/app/admin/_components/use-upload-image-urls.ts b/apps/frontend/app/admin/_components/use-upload-image-urls.ts
new file mode 100644
index 0000000..b4f2f16
--- /dev/null
+++ b/apps/frontend/app/admin/_components/use-upload-image-urls.ts
@@ -0,0 +1,47 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import { fetchUploadImageAccess } from "@/lib/api/staff";
+
+export function useUploadImageUrls(uploadIds: number[]) {
+  const [imageUrlByUploadId, setImageUrlByUploadId] = useState<Record<number, string>>({});
+  const [imageErrorByUploadId, setImageErrorByUploadId] = useState<Record<number, boolean>>({});
+
+  useEffect(() => {
+    if (uploadIds.length === 0) {
+      return;
+    }
+    const missing = uploadIds.filter((uploadId) => !imageUrlByUploadId[uploadId]);
+    if (missing.length === 0) {
+      return;
+    }
+    let cancelled = false;
+    void Promise.allSettled(missing.map((uploadId) => fetchUploadImageAccess(uploadId))).then((results) => {
+      if (cancelled) {
+        return;
+      }
+      setImageUrlByUploadId((current) => {
+        const next = { ...current };
+        results.forEach((result, index) => {
+          if (result.status === "fulfilled") {
+            next[missing[index]] = result.value.image_url;
+          }
+        });
+        return next;
+      });
+      setImageErrorByUploadId((current) => {
+        const next = { ...current };
+        results.forEach((result, index) => {
+          next[missing[index]] = result.status === "rejected";
+        });
+        return next;
+      });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [imageUrlByUploadId, uploadIds]);
+
+  return { imageUrlByUploadId, imageErrorByUploadId };
+}
diff --git a/apps/frontend/app/admin/history-overview/__tests__/page.test.tsx b/apps/frontend/app/admin/history-overview/__tests__/page.test.tsx
index feeaeb3..a9f8396 100644
--- a/apps/frontend/app/admin/history-overview/__tests__/page.test.tsx
+++ b/apps/frontend/app/admin/history-overview/__tests__/page.test.tsx
@@ -154,15 +154,25 @@ describe("AdminHistoryOverviewPage grouped patient navigation", () => {
     (fetchUploadImageAccess as jest.Mock).mockResolvedValue({ image_url: "/mock-upload.jpg" });
   });
 
-  test("shows clinical period panel and dashboard date link without month calendar", async () => {
+  test("shows clinical period panel on the clinical-period tab", async () => {
     render(<AdminHistoryOverviewPage />);
 
+    fireEvent.click(screen.getByRole("button", { name: "臨床區間" }));
+
     expect(await screen.findByTestId("clinical-period-panel")).toBeInTheDocument();
-    expect(screen.getByText("檢視日期")).toBeInTheDocument();
+    expect(screen.queryByText("檢視日期")).not.toBeInTheDocument();
+    expect(screen.queryByText("月曆風險分布")).not.toBeInTheDocument();
+  });
+
+  test("shows dashboard date link on the clinical-day tab without month calendar", async () => {
+    render(<AdminHistoryOverviewPage />);
+
+    expect(await screen.findByText("檢視日期")).toBeInTheDocument();
     expect(screen.getByRole("link", { name: "在儀表板變更日期 →" })).toHaveAttribute(
       "href",
       "/admin?date=2026-07-10"
     );
+    expect(screen.queryByTestId("clinical-period-panel")).not.toBeInTheDocument();
     expect(screen.queryByText("月曆風險分布")).not.toBeInTheDocument();
   });
 
diff --git a/apps/frontend/app/admin/history-overview/__tests__/usage-trends-tab.test.tsx b/apps/frontend/app/admin/history-overview/__tests__/usage-trends-tab.test.tsx
new file mode 100644
index 0000000..f6b1f68
--- /dev/null
+++ b/apps/frontend/app/admin/history-overview/__tests__/usage-trends-tab.test.tsx
@@ -0,0 +1,100 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+
+import { UsageTrendsTab } from "@/app/admin/history-overview/usage-trends-tab";
+import { buildUploadChartData } from "@/app/admin/history-overview/usage-upload-chart-data";
+import { fetchAdminActiveUsersSeries, fetchAdminDailySuspectedSeries } from "@/lib/api/staff";
+
+jest.mock("@/components/ui/chart", () => ({
+  ChartContainer: ({ children }: { children: React.ReactNode }) => <div data-testid="chart-container">{children}</div>,
+  ChartTooltip: () => null,
+  ChartTooltipContent: () => null,
+  ChartLegend: () => null,
+  ChartLegendContent: () => null,
+}));
+
+jest.mock("recharts", () => ({
+  CartesianGrid: () => null,
+  Line: () => null,
+  LineChart: ({ data }: { data: { upload_count?: number }[] }) => (
+    <div data-testid="line-chart">{JSON.stringify(data)}</div>
+  ),
+  XAxis: () => null,
+  YAxis: () => null,
+}));
+
+jest.mock("@/lib/api/staff", () => ({
+  fetchAdminActiveUsersSeries: jest.fn(),
+  fetchAdminDailySuspectedSeries: jest.fn(),
+}));
+
+const uploadSeriesFixture = [
+  { date: "2026-07-01", total_uploads: 2, suspected_uploads: 0, symptom_elevated_uploads: 0, suspected_ratio: 0 },
+  { date: "2026-07-02", total_uploads: 3, suspected_uploads: 1, symptom_elevated_uploads: 0, suspected_ratio: 0.33 },
+  { date: "2026-07-03", total_uploads: 1, suspected_uploads: 0, symptom_elevated_uploads: 1, suspected_ratio: 0 },
+];
+
+describe("buildUploadChartData", () => {
+  test("maps daily upload counts", () => {
+    const result = buildUploadChartData(
+      uploadSeriesFixture.map(({ date, total_uploads }) => ({ date, total_uploads })),
+      "daily"
+    );
+    expect(result.map((point) => point.upload_count)).toEqual([2, 3, 1]);
+  });
+
+  test("maps cumulative upload counts within the window", () => {
+    const result = buildUploadChartData(
+      uploadSeriesFixture.map(({ date, total_uploads }) => ({ date, total_uploads })),
+      "cumulative"
+    );
+    expect(result.map((point) => point.upload_count)).toEqual([2, 5, 6]);
+  });
+});
+
+describe("UsageTrendsTab", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (fetchAdminActiveUsersSeries as jest.Mock).mockResolvedValue({
+      active_window_days: 7,
+      lookback_days: 30,
+      interval: "day",
+      items: [{ date: "2026-07-01", active_users: 4 }],
+    });
+    (fetchAdminDailySuspectedSeries as jest.Mock).mockResolvedValue({
+      lookback_days: 30,
+      items: uploadSeriesFixture,
+    });
+  });
+
+  test("renders upload trend section", async () => {
+    render(<UsageTrendsTab />);
+
+    expect(await screen.findByText("上傳數趨勢")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "單日" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "累進" })).toBeInTheDocument();
+  });
+
+  test("switches upload chart to cumulative mode", async () => {
+    render(<UsageTrendsTab />);
+
+    await screen.findByText("上傳數趨勢");
+    const charts = screen.getAllByTestId("line-chart");
+    const uploadChart = charts[1];
+    expect(uploadChart.textContent).toContain('"upload_count":2');
+
+    fireEvent.click(screen.getByRole("button", { name: "累進" }));
+
+    await waitFor(() => {
+      expect(uploadChart.textContent).toContain('"upload_count":6');
+    });
+  });
+
+  test("fetches upload series with independent lookback", async () => {
+    render(<UsageTrendsTab />);
+
+    await screen.findByText("上傳數趨勢");
+
+    expect(fetchAdminDailySuspectedSeries).toHaveBeenCalledWith({ lookbackDays: 30 });
+    expect(fetchAdminDailySuspectedSeries).toHaveBeenCalledTimes(2);
+  });
+});
diff --git a/apps/frontend/app/admin/history-overview/page.tsx b/apps/frontend/app/admin/history-overview/page.tsx
index 5ab1d26..b330a90 100644
--- a/apps/frontend/app/admin/history-overview/page.tsx
+++ b/apps/frontend/app/admin/history-overview/page.tsx
@@ -3,7 +3,7 @@
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { ChevronLeft, ChevronRight, RefreshCw, X } from "lucide-react";
+import { ChevronLeft, ChevronRight, RefreshCw } from "lucide-react";
 import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
 
@@ -11,94 +11,47 @@ import { getReadableApiError } from "@/lib/api/client";
 import {
   fetchHistoryOverview,
   fetchHistoryOverviewDays,
-  fetchUploadImageAccess,
-  StaffAnnotationItem,
   StaffHistoryOverviewResponse,
   StaffHistoryOverviewUploadItem,
   upsertUploadAnnotation,
 } from "@/lib/api/staff";
 import { parseTaipeiDateKey } from "@/lib/utils/upload-calendar";
 
+import { HistoryUploadAnnotationModal } from "@/app/admin/_components/history-upload-annotation-modal";
+import {
+  suggestedHistoryUploadLabel,
+  type HistoryUploadDraftVerdict,
+} from "@/app/admin/_components/history-upload-review-helpers";
+import { HistoryUploadThumbnailGrid } from "@/app/admin/_components/history-upload-thumbnail-grid";
+import { useUploadImageUrls } from "@/app/admin/_components/use-upload-image-urls";
 import { ClinicalPeriodPanel } from "./clinical-period-panel";
 import { UsageTrendsTab } from "./usage-trends-tab";
 
 type SortBy = "timeline" | "risk";
 type GroupSortBy = "uploads" | "age" | "infection_risk";
-type OverviewTab = "clinical" | "usage";
-type DraftVerdict = {
-  label: StaffAnnotationItem["label"];
-  comment: string;
-};
-
-const INITIAL_UNGROUPED_VISIBLE = 16;
-const UNGROUPED_STEP = 16;
-const INITIAL_GROUP_VISIBLE = 7;
-const GROUP_STEP = 8;
-
-function formatLocalTime(raw: string): string {
-  return new Intl.DateTimeFormat("zh-TW", {
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-    hour12: false,
-    timeZone: "Asia/Taipei",
-  }).format(new Date(raw));
-}
+type OverviewTab = "clinical-day" | "clinical-period" | "usage";
 
-function riskBadgeClass(upload: StaffHistoryOverviewUploadItem): string {
-  if (upload.risk_rank === 0) {
-    return "bg-rose-100 text-rose-700";
+function parseOverviewTab(raw: string | null): OverviewTab {
+  if (raw === "usage") {
+    return "usage";
   }
-  if (upload.risk_rank === 1) {
-    return "bg-red-100 text-red-700";
+  if (raw === "clinical-period") {
+    return "clinical-period";
   }
-  if (upload.risk_rank === 2) {
-    return "bg-orange-100 text-orange-700";
+  if (raw === "clinical" || raw === "clinical-day" || raw == null) {
+    return "clinical-day";
   }
-  if (upload.risk_rank === 3) {
-    return "bg-emerald-100 text-emerald-700";
-  }
-  return "bg-zinc-200 text-zinc-700";
+  return "clinical-day";
 }
 
-function riskLabel(upload: StaffHistoryOverviewUploadItem): string {
-  if (upload.annotation_label === "confirmed_infection") {
-    return "confirmed_infection";
-  }
-  if (upload.annotation_label === "suspected") {
-    return "suspected";
-  }
-  if (upload.annotation_label === "normal") {
-    return "normal";
-  }
-  if (upload.annotation_label === "rejected") {
-    return "rejected";
-  }
-  if (upload.risk_rank === 2) {
-    return "症狀高風險";
-  }
-  return upload.screening_result;
-}
-
-function suggestedLabel(upload: StaffHistoryOverviewUploadItem): StaffAnnotationItem["label"] {
-  if (upload.annotation_label) {
-    return upload.annotation_label;
-  }
-  if (upload.screening_result === "rejected" || upload.screening_result === "technical_error") {
-    return "rejected";
-  }
-  if (upload.symptom_aware_priority === "suspected" || upload.screening_result === "suspected") {
-    return "suspected";
-  }
-  if (upload.screening_result === "normal") {
-    return "normal";
-  }
-  return "rejected";
-}
+const INITIAL_UNGROUPED_VISIBLE = 16;
+const UNGROUPED_STEP = 16;
+const INITIAL_GROUP_VISIBLE = 7;
+const GROUP_STEP = 8;
 
 export default function AdminHistoryOverviewPage() {
   return (
-    <Suspense fallback={<div className="py-16 text-center text-sm text-zinc-500">載入區間分析中...</div>}>
+    <Suspense fallback={<div className="py-16 text-center text-sm text-zinc-500">載入歷史總覽中...</div>}>
       <AdminHistoryOverviewPageInner />
     </Suspense>
   );
@@ -109,7 +62,7 @@ function AdminHistoryOverviewPageInner() {
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
-  const initialTab = searchParams.get("tab") === "usage" ? "usage" : "clinical";
+  const initialTab = parseOverviewTab(searchParams.get("tab"));
   const initialDateParam = searchParams.get("date");
   let initialDateFromUrl: string | null = null;
   if (initialDateParam) {
@@ -138,11 +91,9 @@ function AdminHistoryOverviewPageInner() {
   const [ungroupedVisibleCount, setUngroupedVisibleCount] = useState(INITIAL_UNGROUPED_VISIBLE);
   const [groupVisibleCountByPatient, setGroupVisibleCountByPatient] = useState<Record<number, number>>({});
   const [selectedUploadId, setSelectedUploadId] = useState<number | null>(null);
-  const [draft, setDraft] = useState<DraftVerdict>({ label: "suspected", comment: "" });
+  const [draft, setDraft] = useState<HistoryUploadDraftVerdict>({ label: "suspected", comment: "" });
   const [saving, setSaving] = useState(false);
 
-  const [imageUrlByUploadId, setImageUrlByUploadId] = useState<Record<number, string>>({});
-  const [imageErrorByUploadId, setImageErrorByUploadId] = useState<Record<number, boolean>>({});
   const sentinelRef = useRef<HTMLDivElement | null>(null);
 
   const syncUrl = useCallback(
@@ -155,7 +106,7 @@ function AdminHistoryOverviewPageInner() {
       } else {
         params.delete("date");
       }
-      if (tabValue === "clinical") {
+      if (tabValue === "clinical-day") {
         params.delete("tab");
       } else {
         params.set("tab", tabValue);
@@ -209,22 +160,28 @@ function AdminHistoryOverviewPageInner() {
   }, [groupByUser, groupSortBy, selectedDate, sortBy]);
 
   useEffect(() => {
+    if (overviewTab !== "clinical-day") {
+      return;
+    }
     const timer = window.setTimeout(() => {
       void loadDays();
     }, 0);
     return () => {
       window.clearTimeout(timer);
     };
-  }, [loadDays]);
+  }, [loadDays, overviewTab]);
 
   useEffect(() => {
+    if (overviewTab !== "clinical-day") {
+      return;
+    }
     const timer = window.setTimeout(() => {
       void loadOverview();
     }, 0);
     return () => {
       window.clearTimeout(timer);
     };
-  }, [loadOverview]);
+  }, [loadOverview, overviewTab]);
 
   useEffect(() => {
     if (!selectedDate) {
@@ -267,7 +224,7 @@ function AdminHistoryOverviewPageInner() {
     }
     const timer = window.setTimeout(() => {
       setDraft({
-        label: suggestedLabel(selectedUpload),
+        label: suggestedHistoryUploadLabel(selectedUpload),
         comment: selectedUpload.annotation_comment ?? "",
       });
     }, 0);
@@ -296,40 +253,15 @@ function AdminHistoryOverviewPageInner() {
     });
   }, [groupByUser, groupVisibleCountByPatient, overviewData, ungroupedVisibleItems]);
 
-  useEffect(() => {
-    if (visibleUploadsForImageLoading.length === 0) {
-      return;
-    }
-    const missing = visibleUploadsForImageLoading.filter((item) => !imageUrlByUploadId[item.upload_id]);
-    if (missing.length === 0) {
-      return;
+  const uploadIdsForImages = useMemo(() => {
+    const ids = visibleUploadsForImageLoading.map((item) => item.upload_id);
+    if (selectedUpload && !ids.includes(selectedUpload.upload_id)) {
+      ids.push(selectedUpload.upload_id);
     }
-    let cancelled = false;
-    void Promise.allSettled(missing.map((item) => fetchUploadImageAccess(item.upload_id))).then((results) => {
-      if (cancelled) {
-        return;
-      }
-      setImageUrlByUploadId((current) => {
-        const next = { ...current };
-        results.forEach((result, index) => {
-          if (result.status === "fulfilled") {
-            next[missing[index].upload_id] = result.value.image_url;
-          }
-        });
-        return next;
-      });
-      setImageErrorByUploadId((current) => {
-        const next = { ...current };
-        results.forEach((result, index) => {
-          next[missing[index].upload_id] = result.status === "rejected";
-        });
-        return next;
-      });
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [imageUrlByUploadId, visibleUploadsForImageLoading]);
+    return ids;
+  }, [selectedUpload, visibleUploadsForImageLoading]);
+
+  const { imageUrlByUploadId, imageErrorByUploadId } = useUploadImageUrls(uploadIdsForImages);
 
   useEffect(() => {
     if (groupByUser || !overviewData) {
@@ -384,10 +316,10 @@ function AdminHistoryOverviewPageInner() {
     <div className="mx-auto flex w-full max-w-7xl flex-col gap-4">
       <header className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
         <div>
-          <h1 className="text-lg font-semibold text-zinc-900">區間分析</h1>
+          <h1 className="text-lg font-semibold text-zinc-900">歷史總覽</h1>
           <p className="text-xs text-zinc-500">臨床回顧與使用趨勢（依台灣時區）。</p>
         </div>
-        {overviewTab === "clinical" ? (
+        {overviewTab === "clinical-day" ? (
           <button
             type="button"
             onClick={() => {
@@ -402,15 +334,24 @@ function AdminHistoryOverviewPageInner() {
         ) : null}
       </header>
 
-      <div className="flex gap-2 border-b border-zinc-200 pb-2">
+      <div className="flex flex-wrap gap-2 border-b border-zinc-200 pb-2">
+        <button
+          type="button"
+          onClick={() => setOverviewTab("clinical-day")}
+          className={`rounded-lg px-3 py-1.5 text-sm font-medium ${
+            overviewTab === "clinical-day" ? "bg-zinc-900 text-white" : "bg-zinc-100 text-zinc-600 hover:bg-zinc-200"
+          }`}
+        >
+          臨床單日
+        </button>
         <button
           type="button"
-          onClick={() => setOverviewTab("clinical")}
+          onClick={() => setOverviewTab("clinical-period")}
           className={`rounded-lg px-3 py-1.5 text-sm font-medium ${
-            overviewTab === "clinical" ? "bg-zinc-900 text-white" : "bg-zinc-100 text-zinc-600 hover:bg-zinc-200"
+            overviewTab === "clinical-period" ? "bg-zinc-900 text-white" : "bg-zinc-100 text-zinc-600 hover:bg-zinc-200"
           }`}
         >
-          臨床
+          臨床區間
         </button>
         <button
           type="button"
@@ -425,14 +366,14 @@ function AdminHistoryOverviewPageInner() {
 
       {overviewTab === "usage" ? <UsageTrendsTab /> : null}
 
-      {overviewTab === "clinical" && daysLoading && !selectedDate ? (
-        <div className="py-16 text-center text-sm text-zinc-500">載入區間分析中...</div>
+      {overviewTab === "clinical-period" ? <ClinicalPeriodPanel /> : null}
+
+      {overviewTab === "clinical-day" && daysLoading && !selectedDate ? (
+        <div className="py-16 text-center text-sm text-zinc-500">載入歷史總覽中...</div>
       ) : null}
 
-      {overviewTab === "clinical" && !(daysLoading && !selectedDate) ? (
+      {overviewTab === "clinical-day" && !(daysLoading && !selectedDate) ? (
         <>
-      <ClinicalPeriodPanel />
-
       {daysError ? <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{daysError}</div> : null}
       {overviewError ? (
         <div className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{overviewError}</div>
@@ -528,32 +469,14 @@ function AdminHistoryOverviewPageInner() {
       {overviewLoading ? <div className="py-8 text-center text-sm text-zinc-500">載入當日資料中...</div> : null}
 
       {!groupByUser ? (
-        <section className="grid grid-cols-2 gap-2 md:grid-cols-4">
-          {ungroupedVisibleItems.map((item) => {
-            const imageUrl = imageUrlByUploadId[item.upload_id];
-            const imageError = imageErrorByUploadId[item.upload_id] ?? false;
-            return (
-              <button
-                key={item.upload_id}
-                type="button"
-                onClick={() => setSelectedUploadId(item.upload_id)}
-                className="group relative aspect-square overflow-hidden rounded-xl bg-zinc-100 text-left ring-1 ring-zinc-200 transition hover:ring-zinc-400"
-              >
-                {imageUrl ? (
-                  <Image src={imageUrl} alt={`history-upload-${item.upload_id}`} fill unoptimized className="object-cover" />
-                ) : (
-                  <div className="flex h-full items-center justify-center text-xs text-zinc-400">{imageError ? "載入失敗" : "載入中"}</div>
-                )}
-                <span className={`absolute left-1 top-1 rounded-full px-1.5 py-0.5 text-[10px] font-medium ${riskBadgeClass(item)}`}>
-                  {riskLabel(item)}
-                </span>
-                <span className="absolute bottom-1 right-1 rounded bg-zinc-900/75 px-1.5 py-0.5 text-[10px] text-white">
-                  {formatLocalTime(item.created_at)}
-                </span>
-              </button>
-            );
-          })}
-          <div ref={sentinelRef} className="h-1 w-full col-span-full" />
+        <section>
+          <HistoryUploadThumbnailGrid
+            uploads={ungroupedVisibleItems}
+            imageUrlByUploadId={imageUrlByUploadId}
+            imageErrorByUploadId={imageErrorByUploadId}
+            onSelectUpload={setSelectedUploadId}
+          />
+          <div ref={sentinelRef} className="h-1 w-full" />
         </section>
       ) : (
         <section className="flex flex-col gap-4">
@@ -590,47 +513,20 @@ function AdminHistoryOverviewPageInner() {
                   </div>
                   <p className="text-xs text-zinc-500">當日上傳 {group.upload_count} 張</p>
                 </header>
-                <div className="grid grid-cols-2 gap-2 md:grid-cols-4">
-                  {visibleUploads.map((item) => {
-                    const imageUrl = imageUrlByUploadId[item.upload_id];
-                    const imageError = imageErrorByUploadId[item.upload_id] ?? false;
-                    return (
-                      <button
-                        key={item.upload_id}
-                        type="button"
-                        onClick={() => setSelectedUploadId(item.upload_id)}
-                        className="group relative aspect-square overflow-hidden rounded-xl bg-zinc-100 text-left ring-1 ring-zinc-200 transition hover:ring-zinc-400"
-                      >
-                        {imageUrl ? (
-                          <Image src={imageUrl} alt={`history-upload-${item.upload_id}`} fill unoptimized className="object-cover" />
-                        ) : (
-                          <div className="flex h-full items-center justify-center text-xs text-zinc-400">
-                            {imageError ? "載入失敗" : "載入中"}
-                          </div>
-                        )}
-                        <span className={`absolute left-1 top-1 rounded-full px-1.5 py-0.5 text-[10px] font-medium ${riskBadgeClass(item)}`}>
-                          {riskLabel(item)}
-                        </span>
-                        <span className="absolute bottom-1 right-1 rounded bg-zinc-900/75 px-1.5 py-0.5 text-[10px] text-white">
-                          {formatLocalTime(item.created_at)}
-                        </span>
-                      </button>
-                    );
-                  })}
-                  {hasMore ? (
-                    <button
-                      type="button"
-                      onClick={() =>
-                        setGroupVisibleCountByPatient((current) => ({
-                          ...current,
-                          [group.patient_id]: (current[group.patient_id] ?? INITIAL_GROUP_VISIBLE) + GROUP_STEP,
-                        }))
-                      }
-                      className="flex aspect-square items-center justify-center rounded-xl border border-dashed border-zinc-300 text-sm font-medium text-zinc-600 hover:bg-zinc-50"
-                    >
-                      Load more
-                    </button>
-                  ) : null}
+                <div>
+                  <HistoryUploadThumbnailGrid
+                    uploads={visibleUploads}
+                    imageUrlByUploadId={imageUrlByUploadId}
+                    imageErrorByUploadId={imageErrorByUploadId}
+                    onSelectUpload={setSelectedUploadId}
+                    hasMore={hasMore}
+                    onLoadMore={() =>
+                      setGroupVisibleCountByPatient((current) => ({
+                        ...current,
+                        [group.patient_id]: (current[group.patient_id] ?? INITIAL_GROUP_VISIBLE) + GROUP_STEP,
+                      }))
+                    }
+                  />
                 </div>
               </article>
             );
@@ -639,120 +535,15 @@ function AdminHistoryOverviewPageInner() {
       )}
 
       {selectedUpload ? (
-        <div className="fixed inset-0 z-50 flex items-end justify-center bg-zinc-900/60 p-0 sm:items-center sm:p-4">
-          <div className="h-[90vh] w-full overflow-auto rounded-t-2xl bg-white shadow-xl sm:h-auto sm:max-w-3xl sm:rounded-2xl">
-            <div className="sticky top-0 z-10 flex items-center justify-between border-b border-zinc-100 bg-white px-4 py-3">
-              <div>
-                <p className="text-sm font-medium text-zinc-900">{selectedUpload.patient_full_name ?? "未命名病患"}</p>
-                <p className="font-mono text-xs text-zinc-500">{selectedUpload.case_number}</p>
-              </div>
-              <button
-                type="button"
-                onClick={() => setSelectedUploadId(null)}
-                className="inline-flex h-8 w-8 items-center justify-center rounded-lg text-zinc-500 hover:bg-zinc-100 hover:text-zinc-900"
-                aria-label="關閉"
-              >
-                <X className="h-4 w-4" />
-              </button>
-            </div>
-            <div className="grid gap-4 p-4 md:grid-cols-[minmax(0,1fr)_22rem]">
-              <div className="relative h-80 overflow-hidden rounded-xl bg-zinc-100">
-                {imageUrlByUploadId[selectedUpload.upload_id] ? (
-                  <Image
-                    src={imageUrlByUploadId[selectedUpload.upload_id]}
-                    alt={`history-preview-${selectedUpload.upload_id}`}
-                    fill
-                    unoptimized
-                    className="object-contain"
-                  />
-                ) : (
-                  <div className="flex h-full items-center justify-center text-sm text-zinc-400">載入影像中...</div>
-                )}
-              </div>
-              <div className="flex flex-col gap-3">
-                <dl className="space-y-2 text-sm">
-                  <div className="flex items-start justify-between gap-4">
-                    <dt className="text-zinc-400">年齡</dt>
-                    <dd className="text-right text-zinc-900">{selectedUpload.age ?? "-"}</dd>
-                  </div>
-                  <div className="flex items-start justify-between gap-4">
-                    <dt className="text-zinc-400">上傳時間</dt>
-                    <dd className="text-right text-zinc-900">{new Date(selectedUpload.created_at).toLocaleString("zh-TW")}</dd>
-                  </div>
-                  <div className="flex items-start justify-between gap-4">
-                    <dt className="text-zinc-400">臨床風險</dt>
-                    <dd className="text-right text-zinc-900">{riskLabel(selectedUpload)}</dd>
-                  </div>
-                  <div className="flex items-start justify-between gap-4">
-                    <dt className="text-zinc-400">影像判讀</dt>
-                    <dd className="text-right text-zinc-900">{selectedUpload.screening_result}</dd>
-                  </div>
-                  <div className="flex items-start justify-between gap-4">
-                    <dt className="text-zinc-400">症狀綜合</dt>
-                    <dd className="text-right text-zinc-900">{selectedUpload.symptom_aware_priority}</dd>
-                  </div>
-                  <div className="flex items-start justify-between gap-4">
-                    <dt className="text-zinc-400">機率</dt>
-                    <dd className="text-right text-zinc-900">
-                      {selectedUpload.probability !== null ? `${(selectedUpload.probability * 100).toFixed(1)}%` : "-"}
-                    </dd>
-                  </div>
-                  <div className="flex items-start justify-between gap-4">
-                    <dt className="text-zinc-400">Threshold</dt>
-                    <dd className="text-right text-zinc-900">
-                      {selectedUpload.threshold !== null ? selectedUpload.threshold.toFixed(2) : "-"}
-                    </dd>
-                  </div>
-                  <div className="flex items-start justify-between gap-4">
-                    <dt className="text-zinc-400">Model</dt>
-                    <dd className="text-right text-zinc-900">{selectedUpload.model_version ?? "-"}</dd>
-                  </div>
-                </dl>
-                <div>
-                  <Link
-                    href={`/admin/patients/${selectedUpload.patient_id}`}
-                    className="text-xs text-zinc-500 hover:text-zinc-800"
-                  >
-                    開啟病患完整頁
-                  </Link>
-                </div>
-                <label className="flex flex-col gap-1 text-xs text-zinc-500">
-                  標註標籤
-                  <select
-                    value={draft.label}
-                    onChange={(event) =>
-                      setDraft((current) => ({ ...current, label: event.target.value as StaffAnnotationItem["label"] }))
-                    }
-                    className="rounded-lg border border-zinc-200 px-3 py-2 text-sm text-zinc-900"
-                  >
-                    <option value="normal">normal</option>
-                    <option value="suspected">suspected</option>
-                    <option value="confirmed_infection">confirmed_infection</option>
-                    <option value="rejected">rejected</option>
-                  </select>
-                </label>
-                <label className="flex flex-col gap-1 text-xs text-zinc-500">
-                  備註
-                  <textarea
-                    value={draft.comment}
-                    onChange={(event) => setDraft((current) => ({ ...current, comment: event.target.value }))}
-                    rows={6}
-                    className="resize-none rounded-lg border border-zinc-200 px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400"
-                    placeholder="comment..."
-                  />
-                </label>
-                <button
-                  type="button"
-                  onClick={() => void onSaveSelected()}
-                  disabled={saving}
-                  className="mt-auto rounded-xl bg-zinc-900 px-4 py-2.5 text-sm font-medium text-white hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-zinc-300"
-                >
-                  {saving ? "儲存中..." : "儲存"}
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
+        <HistoryUploadAnnotationModal
+          upload={selectedUpload}
+          imageUrl={imageUrlByUploadId[selectedUpload.upload_id] ?? null}
+          draft={draft}
+          saving={saving}
+          onDraftChange={setDraft}
+          onSave={() => void onSaveSelected()}
+          onClose={() => setSelectedUploadId(null)}
+        />
       ) : null}
         </>
       ) : null}
diff --git a/apps/frontend/app/admin/history-overview/usage-trends-tab.tsx b/apps/frontend/app/admin/history-overview/usage-trends-tab.tsx
index 3e06f45..8b414a2 100644
--- a/apps/frontend/app/admin/history-overview/usage-trends-tab.tsx
+++ b/apps/frontend/app/admin/history-overview/usage-trends-tab.tsx
@@ -13,8 +13,11 @@ import {
   type ChartConfig,
 } from "@/components/ui/chart";
 import { getReadableApiError } from "@/lib/api/client";
+import type { AdminDailySuspectedSeriesPoint } from "@/lib/api/staff";
 import { fetchAdminActiveUsersSeries, fetchAdminDailySuspectedSeries } from "@/lib/api/staff";
 
+import { buildUploadChartData, type UploadChartMode } from "./usage-upload-chart-data";
+
 const ACTIVE_WINDOW_OPTIONS = [3, 7, 14, 30] as const;
 const LOOKBACK_OPTIONS = [30, 60, 90] as const;
 
@@ -22,6 +25,10 @@ const activeChartConfig = {
   active_users: { label: "活躍用戶", color: "#2563eb" },
 } satisfies ChartConfig;
 
+const uploadChartConfig = {
+  upload_count: { label: "上傳數", color: "#0891b2" },
+} satisfies ChartConfig;
+
 const dailyChartConfig = {
   suspected_uploads: { label: "疑似上傳", color: "#dc2626" },
   symptom_elevated_uploads: { label: "症狀高風險", color: "#f97316" },
@@ -33,18 +40,13 @@ export function UsageTrendsTab() {
   const [activeWindowDays, setActiveWindowDays] = useState<(typeof ACTIVE_WINDOW_OPTIONS)[number]>(7);
   const [activeLookbackDays, setActiveLookbackDays] = useState<(typeof LOOKBACK_OPTIONS)[number]>(30);
   const [activeInterval, setActiveInterval] = useState<"day" | "week">("day");
+  const [uploadLookbackDays, setUploadLookbackDays] = useState<(typeof LOOKBACK_OPTIONS)[number]>(30);
+  const [uploadChartMode, setUploadChartMode] = useState<UploadChartMode>("daily");
   const [dailyLookbackDays, setDailyLookbackDays] = useState<(typeof LOOKBACK_OPTIONS)[number]>(30);
   const [riskChartMode, setRiskChartMode] = useState<"split" | "aggregate">("split");
   const [activeUsersSeries, setActiveUsersSeries] = useState<{ date: string; active_users: number }[]>([]);
-  const [dailySuspectedSeries, setDailySuspectedSeries] = useState<
-    {
-      date: string;
-      total_uploads: number;
-      suspected_uploads: number;
-      symptom_elevated_uploads: number;
-      suspected_ratio: number;
-    }[]
-  >([]);
+  const [uploadSeries, setUploadSeries] = useState<AdminDailySuspectedSeriesPoint[]>([]);
+  const [dailySuspectedSeries, setDailySuspectedSeries] = useState<AdminDailySuspectedSeriesPoint[]>([]);
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
 
@@ -54,23 +56,26 @@ export function UsageTrendsTab() {
       setLoading(true);
       setError(null);
       try {
-        const [activeData, dailyData] = await Promise.all([
+        const [activeData, uploadData, dailyData] = await Promise.all([
           fetchAdminActiveUsersSeries({
             activeWindowDays,
             lookbackDays: activeLookbackDays,
             interval: activeInterval,
           }),
+          fetchAdminDailySuspectedSeries({ lookbackDays: uploadLookbackDays }),
           fetchAdminDailySuspectedSeries({ lookbackDays: dailyLookbackDays }),
         ]);
         if (cancelled) {
           return;
         }
         setActiveUsersSeries(activeData.items);
+        setUploadSeries(uploadData.items);
         setDailySuspectedSeries(dailyData.items);
       } catch (err) {
         if (!cancelled) {
           setError(getReadableApiError(err));
           setActiveUsersSeries([]);
+          setUploadSeries([]);
           setDailySuspectedSeries([]);
         }
       } finally {
@@ -83,7 +88,7 @@ export function UsageTrendsTab() {
     return () => {
       cancelled = true;
     };
-  }, [activeInterval, activeLookbackDays, activeWindowDays, dailyLookbackDays]);
+  }, [activeInterval, activeLookbackDays, activeWindowDays, dailyLookbackDays, uploadLookbackDays]);
 
   const activeUserChartData = useMemo(
     () =>
@@ -94,6 +99,11 @@ export function UsageTrendsTab() {
     [activeUsersSeries]
   );
 
+  const uploadChartData = useMemo(
+    () => buildUploadChartData(uploadSeries, uploadChartMode),
+    [uploadChartMode, uploadSeries]
+  );
+
   const dailySuspectedChartData = useMemo(
     () =>
       dailySuspectedSeries.map((point) => {
@@ -167,6 +177,56 @@ export function UsageTrendsTab() {
         </ChartContainer>
       </section>
 
+      <section className="rounded-xl border border-zinc-200 bg-white p-4">
+        <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
+          <h3 className="text-sm font-medium text-zinc-900">上傳數趨勢</h3>
+          <div className="flex flex-wrap items-center gap-2 text-xs">
+            <div className="flex items-center gap-1 rounded-lg border border-zinc-200 p-1">
+              <button
+                type="button"
+                className={clsx(
+                  "rounded px-2 py-1",
+                  uploadChartMode === "daily" ? "bg-zinc-900 text-white" : "text-zinc-600"
+                )}
+                onClick={() => setUploadChartMode("daily")}
+              >
+                單日
+              </button>
+              <button
+                type="button"
+                className={clsx(
+                  "rounded px-2 py-1",
+                  uploadChartMode === "cumulative" ? "bg-zinc-900 text-white" : "text-zinc-600"
+                )}
+                onClick={() => setUploadChartMode("cumulative")}
+              >
+                累進
+              </button>
+            </div>
+            <select
+              className="rounded-lg border border-zinc-200 px-2 py-1 text-xs"
+              value={uploadLookbackDays}
+              onChange={(event) => setUploadLookbackDays(Number(event.target.value) as (typeof LOOKBACK_OPTIONS)[number])}
+            >
+              {LOOKBACK_OPTIONS.map((value) => (
+                <option key={value} value={value}>
+                  最近{value}天
+                </option>
+              ))}
+            </select>
+          </div>
+        </div>
+        <ChartContainer className="h-64 w-full" config={uploadChartConfig}>
+          <LineChart data={uploadChartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis dataKey="shortDate" tickLine={false} axisLine={false} minTickGap={24} />
+            <YAxis allowDecimals={false} tickLine={false} axisLine={false} />
+            <ChartTooltip content={<ChartTooltipContent />} />
+            <Line dataKey="upload_count" stroke="var(--color-upload_count)" strokeWidth={2} dot={false} />
+          </LineChart>
+        </ChartContainer>
+      </section>
+
       <section className="rounded-xl border border-zinc-200 bg-white p-4">
         <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
           <h3 className="text-sm font-medium text-zinc-900">每日疑似感染比例與數量</h3>
diff --git a/apps/frontend/app/admin/history-overview/usage-upload-chart-data.ts b/apps/frontend/app/admin/history-overview/usage-upload-chart-data.ts
new file mode 100644
index 0000000..4a0b284
--- /dev/null
+++ b/apps/frontend/app/admin/history-overview/usage-upload-chart-data.ts
@@ -0,0 +1,18 @@
+export type UploadSeriesPoint = {
+  date: string;
+  total_uploads: number;
+};
+
+export type UploadChartMode = "daily" | "cumulative";
+
+export function buildUploadChartData(series: UploadSeriesPoint[], mode: UploadChartMode) {
+  let running = 0;
+  return series.map((point) => {
+    running += point.total_uploads;
+    return {
+      date: point.date,
+      shortDate: new Date(point.date).toLocaleDateString("zh-TW", { month: "numeric", day: "numeric" }),
+      upload_count: mode === "daily" ? point.total_uploads : running,
+    };
+  });
+}
diff --git a/apps/frontend/app/admin/layout.tsx b/apps/frontend/app/admin/layout.tsx
index 70f6c3a..5aa4383 100644
--- a/apps/frontend/app/admin/layout.tsx
+++ b/apps/frontend/app/admin/layout.tsx
@@ -190,7 +190,7 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
               }`}
             >
               <CalendarDays className="w-4 h-4" strokeWidth={1.5} />
-              區間分析
+              歷史總覽
             </Link>
             <Link
               href="/admin/registration-review"
@@ -343,11 +343,11 @@ export default function AdminLayout({ children }: { children: React.ReactNode })
                   ? "bg-zinc-900 text-white"
                   : "text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900"
               }`}
-              aria-label="區間分析"
-              title={isSidebarCollapsed ? "區間分析" : undefined}
+              aria-label="歷史總覽"
+              title={isSidebarCollapsed ? "歷史總覽" : undefined}
             >
               <CalendarDays className="w-4 h-4" strokeWidth={1.5} />
-              {!isSidebarCollapsed ? "區間分析" : null}
+              {!isSidebarCollapsed ? "歷史總覽" : null}
             </Link>
             <Link
               href="/admin/registration-review"
diff --git a/apps/frontend/app/admin/page.tsx b/apps/frontend/app/admin/page.tsx
index 60e6d78..707c1de 100644
--- a/apps/frontend/app/admin/page.tsx
+++ b/apps/frontend/app/admin/page.tsx
@@ -1,53 +1,54 @@
 "use client";
 
-import { Suspense, useEffect, useMemo, useState } from "react";
-import Link from "next/link";
+import { Suspense, useCallback, useEffect, useMemo, useState } from "react";
 
-import { ActiveUploadersSummary } from "@/app/admin/_components/active-uploaders-summary";
 import {
   DashboardDayCalendar,
   type DayCalendarMetrics,
 } from "@/app/admin/_components/dashboard-day-calendar";
-import { PendingBindingsSummary } from "@/app/admin/_components/pending-bindings-summary";
 import { TodayPatientPool } from "@/app/admin/_components/today-patient-pool";
-import { TodayUploadCount } from "@/app/admin/_components/today-upload-count";
 import { TodayWorkbenchHeader } from "@/app/admin/_components/today-workbench-header";
 import { useAdminSelectedDate } from "@/lib/admin/use-admin-selected-date";
-import { getStaffRole } from "@/lib/auth/staff-session";
 import {
-  fetchAdminActiveUsersSeries,
   fetchHistoryOverviewCalendar,
   fetchHistoryOverviewDays,
-  fetchPendingBindings,
   fetchTodayAttention,
-  type StaffPendingBindingItem,
   type StaffTodayAttentionResponse,
 } from "@/lib/api/staff";
-import { getMonthKeyFromDateKey } from "@/lib/utils/upload-calendar";
+import { getMonthKeysForWeek, getWeekStartDateKey } from "@/lib/utils/upload-calendar";
 
 function AdminDashboardInner() {
-  const { selectedDate, setSelectedDate, isTodaySelected, dayScopeLabel, monthKey } =
-    useAdminSelectedDate();
+  const { selectedDate, setSelectedDate, isTodaySelected, dayScopeLabel } = useAdminSelectedDate();
 
   const [attention, setAttention] = useState<StaffTodayAttentionResponse | null>(null);
   const [attentionLoading, setAttentionLoading] = useState(true);
   const [attentionError, setAttentionError] = useState<string | null>(null);
+  const [selectedPatientId, setSelectedPatientId] = useState<number | null>(null);
 
-  const [pendingItems, setPendingItems] = useState<StaffPendingBindingItem[]>([]);
-  const [pendingLoading, setPendingLoading] = useState(true);
-  const [pendingError, setPendingError] = useState<string | null>(null);
+  const [browseWeekStart, setBrowseWeekStart] = useState<string | null>(null);
+  const weekStartDateKey = browseWeekStart ?? getWeekStartDateKey(selectedDate);
+  const weekMonthKeys = useMemo(() => getMonthKeysForWeek(weekStartDateKey), [weekStartDateKey]);
 
-  const isAdmin = getStaffRole() === "admin";
-  const [activeUsers, setActiveUsers] = useState<number | null>(null);
-  const [activeLoading, setActiveLoading] = useState(isAdmin);
-  const [activeError, setActiveError] = useState<string | null>(null);
-
-  const [browseMonthKey, setBrowseMonthKey] = useState<string | null>(null);
-  const calendarMonthKey = browseMonthKey ?? monthKey;
   const [availableDates, setAvailableDates] = useState<string[]>([]);
   const [metricsByDate, setMetricsByDate] = useState<Record<string, DayCalendarMetrics>>({});
   const [calendarLoading, setCalendarLoading] = useState(true);
 
+  const refreshAttention = useCallback(() => {
+    setAttentionLoading(true);
+    return fetchTodayAttention({ localDate: selectedDate })
+      .then((data) => {
+        setAttention(data);
+        setAttentionError(null);
+      })
+      .catch(() => {
+        setAttentionError(`無法載入${dayScopeLabel}上傳病患`);
+        setAttention(null);
+      })
+      .finally(() => {
+        setAttentionLoading(false);
+      });
+  }, [dayScopeLabel, selectedDate]);
+
   useEffect(() => {
     let cancelled = false;
     const timer = window.setTimeout(() => {
@@ -97,22 +98,28 @@ function AdminDashboardInner() {
 
   useEffect(() => {
     let cancelled = false;
-    const [year, month] = calendarMonthKey.split("-").map(Number);
     const timer = window.setTimeout(() => {
       setCalendarLoading(true);
-      void fetchHistoryOverviewCalendar({ year, month })
-        .then((data) => {
+      void Promise.all(
+        weekMonthKeys.map((monthKey) => {
+          const [year, month] = monthKey.split("-").map(Number);
+          return fetchHistoryOverviewCalendar({ year, month });
+        })
+      )
+        .then((responses) => {
           if (cancelled) {
             return;
           }
           const next: Record<string, DayCalendarMetrics> = {};
-          for (const item of data.items) {
-            next[item.local_date] = {
-              uploadCount: item.upload_count ?? 0,
-              uploadedUsers: item.uploaded_users ?? 0,
-              riskyPatients: item.risky_patient_count ?? 0,
-              unhandledPatients: item.unhandled_patient_count ?? 0,
-            };
+          for (const response of responses) {
+            for (const item of response.items) {
+              next[item.local_date] = {
+                uploadCount: item.upload_count ?? 0,
+                uploadedUsers: item.uploaded_users ?? 0,
+                riskyPatients: item.risky_patient_count ?? 0,
+                unhandledPatients: item.unhandled_patient_count ?? 0,
+              };
+            }
           }
           setMetricsByDate(next);
         })
@@ -131,63 +138,22 @@ function AdminDashboardInner() {
       cancelled = true;
       window.clearTimeout(timer);
     };
-  }, [calendarMonthKey]);
-
-  useEffect(() => {
-    let cancelled = false;
-    void fetchPendingBindings()
-      .then((items) => {
-        if (!cancelled) {
-          setPendingItems(items);
-          setPendingError(null);
-        }
-      })
-      .catch(() => {
-        if (!cancelled) {
-          setPendingError("無法載入待審綁定");
-          setPendingItems([]);
-        }
-      })
-      .finally(() => {
-        if (!cancelled) {
-          setPendingLoading(false);
-        }
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!isAdmin) {
-      return;
-    }
-    let cancelled = false;
-    void fetchAdminActiveUsersSeries({ activeWindowDays: 7, lookbackDays: 7, interval: "day" })
-      .then((data) => {
-        if (!cancelled) {
-          const last = data.items[data.items.length - 1];
-          setActiveUsers(last?.active_users ?? 0);
-          setActiveError(null);
-        }
-      })
-      .catch(() => {
-        if (!cancelled) {
-          setActiveError("failed");
-          setActiveUsers(null);
-        }
-      })
-      .finally(() => {
-        if (!cancelled) {
-          setActiveLoading(false);
-        }
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [isAdmin]);
+  }, [weekMonthKeys]);
 
   const availableSet = useMemo(() => new Set(availableDates), [availableDates]);
+  const resolvedPatientId = useMemo(() => {
+    const items = attention?.items ?? [];
+    if (items.length === 0) {
+      return null;
+    }
+    if (
+      selectedPatientId != null &&
+      items.some((item) => item.patient_id === selectedPatientId)
+    ) {
+      return selectedPatientId;
+    }
+    return items[0].patient_id;
+  }, [attention?.items, selectedPatientId]);
 
   return (
     <main className="space-y-4 p-4 md:p-6">
@@ -195,58 +161,35 @@ function AdminDashboardInner() {
 
       <DashboardDayCalendar
         selectedDate={selectedDate}
-        monthKey={calendarMonthKey}
+        weekStartDateKey={weekStartDateKey}
         metricsByDate={metricsByDate}
         availableDates={availableSet}
         loading={calendarLoading}
         onSelectDate={(dateKey) => {
-          setBrowseMonthKey(null);
+          setBrowseWeekStart(null);
           setSelectedDate(dateKey);
         }}
-        onMonthChange={(nextMonth) => {
-          const first = availableDates.find((d) => getMonthKeyFromDateKey(d) === nextMonth);
-          if (first) {
-            setBrowseMonthKey(null);
-            setSelectedDate(first);
-          } else {
-            setBrowseMonthKey(nextMonth);
-          }
+        onWeekChange={(nextWeekStart) => {
+          setBrowseWeekStart(nextWeekStart);
         }}
       />
 
-      <div className="flex flex-col gap-4 lg:flex-row lg:items-start">
-        <div className="min-w-0 flex-[1.5]">
-          <TodayPatientPool
-            loading={attentionLoading}
-            error={attentionError}
-            suspectedPatients={attention?.suspected_patients ?? 0}
-            elevatedPatients={attention?.elevated_patients ?? 0}
-            otherPatients={attention?.other_patients ?? 0}
-            items={attention?.items ?? []}
-            dayScopeLabel={dayScopeLabel}
-            isTodaySelected={isTodaySelected}
-          />
-        </div>
-
-        <div className="flex min-w-0 flex-1 flex-col gap-3">
-          <TodayUploadCount
-            totalUploads={attention?.total_uploads ?? null}
-            loading={attentionLoading}
-            dayScopeLabel={dayScopeLabel}
-            selectedDate={selectedDate}
-          />
-          <PendingBindingsSummary items={pendingItems} loading={pendingLoading} error={pendingError} />
-          {isAdmin ? (
-            <ActiveUploadersSummary activeUsers={activeUsers} loading={activeLoading} error={activeError} />
-          ) : (
-            <p className="text-xs text-zinc-400">
-              <Link href="/admin/history-overview" className="hover:text-zinc-700">
-                查看區間分析 →
-              </Link>
-            </p>
-          )}
-        </div>
-      </div>
+      <TodayPatientPool
+        loading={attentionLoading}
+        error={attentionError}
+        suspectedPatients={attention?.suspected_patients ?? 0}
+        elevatedPatients={attention?.elevated_patients ?? 0}
+        otherPatients={attention?.other_patients ?? 0}
+        items={attention?.items ?? []}
+        dayScopeLabel={dayScopeLabel}
+        isTodaySelected={isTodaySelected}
+        selectedDate={selectedDate}
+        selectedPatientId={resolvedPatientId}
+        onSelectPatient={setSelectedPatientId}
+        onReviewSaved={() => {
+          void refreshAttention();
+        }}
+      />
     </main>
   );
 }
diff --git a/apps/frontend/lib/utils/__tests__/upload-calendar.test.ts b/apps/frontend/lib/utils/__tests__/upload-calendar.test.ts
index 95a457e..933d35f 100644
--- a/apps/frontend/lib/utils/__tests__/upload-calendar.test.ts
+++ b/apps/frontend/lib/utils/__tests__/upload-calendar.test.ts
@@ -1,8 +1,12 @@
 import {
   buildTaipeiMonthGrid,
+  buildTaipeiWeekRow,
   getMonthKeyFromDateKey,
+  getMonthKeysForWeek,
+  getWeekStartDateKey,
   parseTaipeiDateKey,
   getRelativeMonthKey,
+  shiftTaipeiDateKey,
 } from "@/lib/utils/upload-calendar";
 
 describe("upload-calendar month helpers", () => {
@@ -39,4 +43,19 @@ describe("upload-calendar month helpers", () => {
       isCurrentMonth: true,
     });
   });
+
+  test("week helpers align Sunday-start rows and cross-month weeks", () => {
+    expect(getWeekStartDateKey("2026-07-30")).toBe("2026-07-26");
+    expect(buildTaipeiWeekRow("2026-07-26").map((cell) => cell.dateKey)).toEqual([
+      "2026-07-26",
+      "2026-07-27",
+      "2026-07-28",
+      "2026-07-29",
+      "2026-07-30",
+      "2026-07-31",
+      "2026-08-01",
+    ]);
+    expect(getMonthKeysForWeek("2026-07-26")).toEqual(["2026-07", "2026-08"]);
+    expect(shiftTaipeiDateKey("2026-07-30", 3)).toBe("2026-08-02");
+  });
 });
diff --git a/apps/frontend/lib/utils/upload-calendar.ts b/apps/frontend/lib/utils/upload-calendar.ts
index f110082..58acd74 100644
--- a/apps/frontend/lib/utils/upload-calendar.ts
+++ b/apps/frontend/lib/utils/upload-calendar.ts
@@ -126,3 +126,49 @@ export function buildTaipeiMonthGrid(monthKey: string): TaipeiMonthGrid {
     cells,
   };
 }
+
+export function shiftTaipeiDateKey(dateKey: string, offsetDays: number): string {
+  const { year, month, day } = parseTaipeiDateKey(dateKey);
+  const shiftedUtc = Date.UTC(year, month - 1, day + offsetDays);
+  return formatDateKeyFromUtc(new Date(shiftedUtc));
+}
+
+/** Sunday-start week containing `dateKey` (Taipei calendar dates). */
+export function getWeekStartDateKey(dateKey: string): string {
+  const { year, month, day } = parseTaipeiDateKey(dateKey);
+  const weekday = new Date(Date.UTC(year, month - 1, day)).getUTCDay();
+  return shiftTaipeiDateKey(dateKey, -weekday);
+}
+
+export function buildTaipeiWeekRow(weekStartDateKey: string): TaipeiMonthGridCell[] {
+  parseTaipeiDateKey(weekStartDateKey);
+  return Array.from({ length: 7 }, (_, index) => {
+    const dateKey = shiftTaipeiDateKey(weekStartDateKey, index);
+    const { day } = parseTaipeiDateKey(dateKey);
+    return {
+      dateKey,
+      dayOfMonth: day,
+      isCurrentMonth: true,
+    };
+  });
+}
+
+export function getMonthKeysForWeek(weekStartDateKey: string): string[] {
+  const monthKeys = buildTaipeiWeekRow(weekStartDateKey).map((cell) =>
+    getMonthKeyFromDateKey(cell.dateKey)
+  );
+  return [...new Set(monthKeys)];
+}
+
+export function formatTaipeiWeekRangeLabel(weekStartDateKey: string): string {
+  const cells = buildTaipeiWeekRow(weekStartDateKey);
+  const start = parseTaipeiDateKey(cells[0].dateKey);
+  const end = parseTaipeiDateKey(cells[6].dateKey);
+  if (start.year === end.year && start.month === end.month) {
+    return `${start.year} 年 ${start.month} 月 ${start.day}–${end.day} 日`;
+  }
+  if (start.year === end.year) {
+    return `${start.year} 年 ${start.month}/${start.day} – ${end.month}/${end.day}`;
+  }
+  return `${start.year}/${start.month}/${start.day} – ${end.year}/${end.month}/${end.day}`;
+}
diff --git a/docs/ops/local-dev-without-line.md b/docs/ops/local-dev-without-line.md
index 9dfdb6d..fb08d7e 100644
--- a/docs/ops/local-dev-without-line.md
+++ b/docs/ops/local-dev-without-line.md
@@ -80,6 +80,14 @@ For richer staff grids, also run
 `cd apps/backend && python sql/manual/seed_dev_fake_patients.py` after infra is up
 (the root `npm run seed:dev-fake-patients` script targets K8s by default).
 
+For **儀表板 UI review** (week calendar + 30-day activity), after personas:
+
+```bash
+npm run seed:dashboard-demo
+```
+
+Then open `/admin` as `U_DEV_ADMIN` or `U_DEV_STAFF` (patients are assigned to staff).
+
 ## Flow diagram
 
 ```mermaid
diff --git a/package.json b/package.json
index c9c3f60..183798a 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "test": "npm run test:backend",
     "test:backend": "bash -lc 'cd apps/backend && PYTHON_BIN=\"python3\" && if [ -x .venv/bin/python ]; then PYTHON_BIN=\"$(pwd)/.venv/bin/python\"; fi && \"$PYTHON_BIN\" -m pytest'",
     "seed:dev-personas": "bash -lc 'cd apps/backend && PYTHON_BIN=\"python3\" && if [ -x .venv/bin/python ]; then PYTHON_BIN=\"$(pwd)/.venv/bin/python\"; fi && \"$PYTHON_BIN\" sql/manual/seed_dev_personas.py'",
+    "seed:dashboard-demo": "bash -lc 'cd apps/backend && PYTHON_BIN=\"python3\" && if [ -x .venv/bin/python ]; then PYTHON_BIN=\"$(pwd)/.venv/bin/python\"; fi && \"$PYTHON_BIN\" sql/manual/seed_dashboard_demo.py'",
     "seed:dev-fake-patients": "bash ops/deploy/seed-dev-fake-patients.sh",
     "docker:up": "docker compose up --build",
     "docker:up:frontend": "docker compose up --build frontend",

From c2522faf5e91cd6b66215a1e43cd6d4de35cc6f9 Mon Sep 17 00:00:00 2001
From: ruby0322 <ruby0322@ntu.im>
Date: Fri, 7 Aug 2026 00:40:15 +0800
Subject: [PATCH 3/5] refactor(admin): shared triage, batch thumbs, and busy
 demo seed

Extract attention triage so today-attention and calendar unhandled counts
stay aligned; batch upload image URLs in the patient pool; seed showcase
days (today + Aug 6) with all 12 demo patients using UTC timestamps.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/backend/app/services/attention_triage.py |  44 ++++++
 apps/backend/app/services/staff_dashboard.py  |  34 +++--
 .../app/services/staff_history_overview.py    |  32 ++---
 .../backend/sql/manual/seed_dashboard_demo.py |  78 ++++++++--
 apps/backend/tests/test_attention_triage.py   |  54 +++++++
 .../_components/recent-upload-thumbs.tsx      | 134 ------------------
 .../today-patient-detail-panel.tsx            |  10 +-
 .../admin/_components/today-patient-pool.tsx  |  92 +++++++++---
 .../admin/_components/today-patient-row.tsx   |  23 ++-
 .../app/admin/_components/upload-thumb.tsx    |  28 +++-
 apps/frontend/app/admin/page.tsx              |  55 +++----
 11 files changed, 340 insertions(+), 244 deletions(-)
 create mode 100644 apps/backend/app/services/attention_triage.py
 create mode 100644 apps/backend/tests/test_attention_triage.py
 delete mode 100644 apps/frontend/app/admin/_components/recent-upload-thumbs.tsx

diff --git a/apps/backend/app/services/attention_triage.py b/apps/backend/app/services/attention_triage.py
new file mode 100644
index 0000000..57f059d
--- /dev/null
+++ b/apps/backend/app/services/attention_triage.py
@@ -0,0 +1,44 @@
+"""Shared attention triage helpers for calendar unhandled counts and today-attention.
+
+Representative selection for risk patients: earliest upload in suspected tier, else elevated.
+Unhandled = risk patient whose representative has no annotation.
+"""
+
+from __future__ import annotations
+
+from datetime import datetime
+from typing import Literal, Mapping, NamedTuple, Sequence
+
+from app.services.taipei_dates import normalize_datetime
+
+AttentionTier = Literal["suspected", "elevated", "other"]
+
+
+class TriageUploadRef(NamedTuple):
+    upload_id: int
+    created_at: datetime
+    tier: AttentionTier
+    has_annotation: bool
+
+
+def select_risk_representative(refs: Sequence[TriageUploadRef]) -> TriageUploadRef | None:
+    """Return earliest upload in suspected tier, else elevated; None if neither."""
+    if not refs:
+        return None
+    has_suspected = any(ref.tier == "suspected" for ref in refs)
+    has_elevated = any(ref.tier == "elevated" for ref in refs)
+    if not has_suspected and not has_elevated:
+        return None
+    target_tier: AttentionTier = "suspected" if has_suspected else "elevated"
+    candidates = [ref for ref in refs if ref.tier == target_tier]
+    return min(candidates, key=lambda ref: (normalize_datetime(ref.created_at), ref.upload_id))
+
+
+def count_unhandled_patients(groups: Mapping[int, Sequence[TriageUploadRef]]) -> int:
+    """Count patients with a risk representative that has no annotation."""
+    unhandled = 0
+    for refs in groups.values():
+        representative = select_risk_representative(refs)
+        if representative is not None and not representative.has_annotation:
+            unhandled += 1
+    return unhandled
diff --git a/apps/backend/app/services/staff_dashboard.py b/apps/backend/app/services/staff_dashboard.py
index 92522ad..22d99fd 100644
--- a/apps/backend/app/services/staff_dashboard.py
+++ b/apps/backend/app/services/staff_dashboard.py
@@ -10,6 +10,7 @@
 from sqlalchemy.orm import Session, aliased
 
 from app.db.models import AIResult, Annotation, LiffIdentity, Notification, Patient, PendingBinding, StaffPatientAssignment, Upload
+from app.services.attention_triage import TriageUploadRef, select_risk_representative
 from app.services.symptoms import calendar_risk_tier, has_high_risk_symptoms, symptom_aware_priority
 from app.services.taipei_dates import TAIPEI_TIMEZONE, resolve_taipei_day_bounds, resolve_taipei_day_bounds_for_date, to_taipei_date
 from app.services.upload_history import summarize_patient_upload_history
@@ -1168,30 +1169,32 @@ def list_today_attention_patients(
 
     attention_rows: list[TodayAttentionPatientRow] = []
     for patient_id, patient_uploads in uploads_by_patient.items():
-        has_suspected = any(tier == "suspected" for _, _, tier in patient_uploads)
-        has_elevated = any(tier == "elevated" for _, _, tier in patient_uploads)
         day_upload_count = len(patient_uploads)
         preview_upload_ids: list[int] = []
         risk_highlight: TodayAttentionRiskHighlight | None = None
 
-        if has_suspected:
-            patient_tier: Literal["suspected", "elevated", "other"] = "suspected"
-            candidates = [(upload, tier) for upload, _, tier in patient_uploads if tier == "suspected"]
-            representative = min(candidates, key=lambda item: (item[0].created_at, item[0].id))[0]
-            sort_upload_at = representative.created_at
-            risk_highlight = _pick_risk_highlight(
-                patient_uploads,
-                latest_annotation_by_upload=latest_annotation_by_upload,
+        triage_refs = [
+            TriageUploadRef(
+                upload_id=upload.id,
+                created_at=upload.created_at,
+                tier="other" if tier not in {"suspected", "elevated"} else tier,  # type: ignore[arg-type]
+                has_annotation=upload.id in latest_annotation_by_upload,
+            )
+            for upload, _, tier in patient_uploads
+        ]
+        risk_representative = select_risk_representative(triage_refs)
+
+        if risk_representative is not None:
+            patient_tier: Literal["suspected", "elevated", "other"] = risk_representative.tier  # type: ignore[assignment]
+            representative = next(
+                upload for upload, _, _ in patient_uploads if upload.id == risk_representative.upload_id
             )
-        elif has_elevated:
-            patient_tier = "elevated"
-            candidates = [(upload, tier) for upload, _, tier in patient_uploads if tier == "elevated"]
-            representative = min(candidates, key=lambda item: (item[0].created_at, item[0].id))[0]
             sort_upload_at = representative.created_at
             risk_highlight = _pick_risk_highlight(
                 patient_uploads,
                 latest_annotation_by_upload=latest_annotation_by_upload,
             )
+            has_annotation = risk_representative.has_annotation
         else:
             patient_tier = "other"
             representative = max(
@@ -1207,6 +1210,7 @@ def list_today_attention_patients(
             # ≤4: return all; >4: first 3 for FE "3 + n" display.
             limit = day_upload_count if day_upload_count <= 4 else 3
             preview_upload_ids = [upload.id for upload in ordered[:limit]]
+            has_annotation = representative.id in latest_annotation_by_upload
 
         attention_rows.append(
             TodayAttentionPatientRow(
@@ -1214,7 +1218,7 @@ def list_today_attention_patients(
                 tier=patient_tier,
                 representative_upload_id=representative.id,
                 sort_upload_at=sort_upload_at,
-                has_annotation=representative.id in latest_annotation_by_upload,
+                has_annotation=has_annotation,
                 picture_url=picture_by_patient.get(patient_id),
                 day_upload_count=day_upload_count,
                 preview_upload_ids=preview_upload_ids,
diff --git a/apps/backend/app/services/staff_history_overview.py b/apps/backend/app/services/staff_history_overview.py
index 1ef8e38..54a32c1 100644
--- a/apps/backend/app/services/staff_history_overview.py
+++ b/apps/backend/app/services/staff_history_overview.py
@@ -8,6 +8,7 @@
 from sqlalchemy.orm import Session
 
 from app.db.models import AIResult, Annotation, LiffIdentity, Patient, Upload
+from app.services.attention_triage import TriageUploadRef, count_unhandled_patients
 from app.services.staff_dashboard import calculate_age
 from app.services.symptoms import CalendarRiskTier, calendar_risk_tier, counts_toward_suspected_rate
 from app.services.taipei_dates import normalize_datetime, to_taipei_date
@@ -222,28 +223,21 @@ def _day_patient_risk_sets(day_rows: list[_RawUploadRow]) -> tuple[set[int], set
 
 
 def _count_unhandled_for_day(day_rows: list[_RawUploadRow]) -> int:
-    """Count patients whose attention tier is suspected/elevated and representative upload is unannotated.
-
-    Matches list_today_attention_patients representative selection + has_annotation semantics.
-    """
-    by_patient: dict[int, list[_RawUploadRow]] = defaultdict(list)
+    """Count patients whose attention tier is suspected/elevated and representative upload is unannotated."""
+    by_patient: dict[int, list[TriageUploadRef]] = defaultdict(list)
     for row in day_rows:
         if row.screening_result == "rejected":
             continue
-        by_patient[row.patient_id].append(row)
-
-    unhandled = 0
-    for patient_rows in by_patient.values():
-        has_suspected = any(_tier_for_row(row) == "suspected" for row in patient_rows)
-        has_elevated = any(_tier_for_row(row) == "elevated" for row in patient_rows)
-        if not has_suspected and not has_elevated:
-            continue
-        target_tier = "suspected" if has_suspected else "elevated"
-        candidates = [row for row in patient_rows if _tier_for_row(row) == target_tier]
-        representative = min(candidates, key=lambda row: (normalize_datetime(row.created_at), row.upload_id))
-        if representative.annotation_label is None:
-            unhandled += 1
-    return unhandled
+        raw_tier = _tier_for_row(row)
+        by_patient[row.patient_id].append(
+            TriageUploadRef(
+                upload_id=row.upload_id,
+                created_at=row.created_at,
+                tier="other" if raw_tier == "none" else raw_tier,  # type: ignore[arg-type]
+                has_annotation=row.annotation_label is not None,
+            )
+        )
+    return count_unhandled_patients(by_patient)
 
 
 def _raw_rows(session: Session, *, accessible_patient_ids: set[int] | None = None) -> list[_RawUploadRow]:
diff --git a/apps/backend/sql/manual/seed_dashboard_demo.py b/apps/backend/sql/manual/seed_dashboard_demo.py
index 78664b8..7bd51be 100644
--- a/apps/backend/sql/manual/seed_dashboard_demo.py
+++ b/apps/backend/sql/manual/seed_dashboard_demo.py
@@ -19,7 +19,7 @@
 import random
 import sys
 from dataclasses import dataclass
-from datetime import date, datetime, timedelta
+from datetime import date, datetime, timedelta, timezone
 from pathlib import Path
 from zoneinfo import ZoneInfo
 
@@ -43,6 +43,7 @@
 CASE_PREFIX = "P-DEV-DASH-"
 LINE_PREFIX = "U_DEV_DASH_"
 LOOKBACK_DAYS = 30
+SHOWCASE_MIN_UPLOADERS = 11  # e.g. 8/6 UI review: calendar "uploaded users" > 10
 RNG = random.Random(20260806)
 
 
@@ -76,7 +77,8 @@ def _taipei_today() -> date:
 
 
 def _parse_local_dt(day: date, hour: int, minute: int) -> datetime:
-    return datetime.combine(day, datetime.min.time().replace(hour=hour, minute=minute), tzinfo=TZ)
+    local = datetime.combine(day, datetime.min.time().replace(hour=hour, minute=minute), tzinfo=TZ)
+    return local.astimezone(timezone.utc)
 
 
 def _resolve_staff_identity_id(session: Session) -> int | None:
@@ -184,6 +186,13 @@ def _upload_profile(day_offset: int, patient_index: int, upload_index: int) -> t
     return ("normal", {}, 0.05 + RNG.random() * 0.25, False)
 
 
+def _is_showcase_day(local_day: date, today: date) -> bool:
+    """Days that should show a busy patient pool (today + Aug 6 when in window)."""
+    if local_day == today:
+        return True
+    return local_day.month == 8 and local_day.day == 6
+
+
 def _seed_demo(session: Session, *, staff_identity_id: int | None) -> list[str]:
     patients_by_suffix: dict[str, Patient] = {}
     for spec in _PATIENTS:
@@ -221,22 +230,69 @@ def _seed_demo(session: Session, *, staff_identity_id: int | None) -> list[str]:
     for day_offset in range(-LOOKBACK_DAYS, 1):
         local_day = today + timedelta(days=day_offset)
         weekday = local_day.weekday()
-        # Skip some days; weekends slightly quieter.
+        showcase = _is_showcase_day(local_day, today)
+        # Skip some days; weekends slightly quieter. Never skip showcase days.
         skip_chance = 0.35 if weekday >= 5 else 0.22
-        if day_offset not in (0, -1, -3, -7, -14, -21) and RNG.random() < skip_chance:
+        if not showcase and day_offset not in (-1, -3, -7, -14, -21) and RNG.random() < skip_chance:
             continue
 
         active_days.append(local_day.isoformat())
-        upload_target = RNG.randint(5, 14) if day_offset >= -7 else RNG.randint(3, 10)
-        if weekday >= 5:
-            upload_target = max(2, upload_target - 2)
 
-        chosen_suffixes = RNG.sample(
-            [spec.suffix for spec in _PATIENTS],
-            k=min(len(_PATIENTS), RNG.randint(3, min(9, upload_target))),
-        )
+        if showcase:
+            chosen_suffixes = [spec.suffix for spec in _PATIENTS]
+            upload_target = max(SHOWCASE_MIN_UPLOADERS + 2, RNG.randint(14, 20))
+        else:
+            upload_target = RNG.randint(5, 14) if day_offset >= -7 else RNG.randint(3, 10)
+            if weekday >= 5:
+                upload_target = max(2, upload_target - 2)
+            chosen_suffixes = RNG.sample(
+                [spec.suffix for spec in _PATIENTS],
+                k=min(len(_PATIENTS), RNG.randint(3, min(9, upload_target))),
+            )
+
         upload_count = 0
         patient_cycle = 0
+        # Showcase: every patient uploads at least once before extras.
+        if showcase:
+            for suffix in chosen_suffixes:
+                patient = patients_by_suffix[suffix]
+                patient_index = int(suffix)
+                screening, symptoms, probability, annotate = _upload_profile(day_offset, patient_index, upload_count)
+                hour = 7 + (upload_count * 2 + patient_index) % 14
+                minute = (upload_count * 11 + patient_index * 7) % 60
+                upload = Upload(
+                    patient_id=patient.id,
+                    object_key=f"patients/dashboard-demo/{patient.id}/{local_day.isoformat()}-{upload_count}.jpg",
+                    content_type="image/jpeg",
+                    created_at=_parse_local_dt(local_day, hour, minute),
+                    symptom_pain=bool(symptoms.get("symptom_pain")),
+                    symptom_discharge=bool(symptoms.get("symptom_discharge")),
+                    symptom_pus=bool(symptoms.get("symptom_pus")),
+                    symptom_cloudy_dialysate=bool(symptoms.get("symptom_cloudy_dialysate")),
+                )
+                session.add(upload)
+                session.flush()
+                session.add(
+                    AIResult(
+                        upload_id=upload.id,
+                        screening_result=screening,
+                        probability=probability,
+                        threshold=0.5,
+                        predicted_class="class_4" if screening == "suspected" else "class_1",
+                        model_version="dashboard-demo-v1",
+                    )
+                )
+                if annotate and staff_identity_id is not None and screening in ("suspected", "normal"):
+                    label = "suspected" if screening == "suspected" else "normal"
+                    _add_annotation(
+                        session,
+                        patient_id=patient.id,
+                        upload_id=upload.id,
+                        reviewer_identity_id=staff_identity_id,
+                        label=label,
+                    )
+                upload_count += 1
+
         while upload_count < upload_target:
             suffix = chosen_suffixes[patient_cycle % len(chosen_suffixes)]
             patient_cycle += 1
diff --git a/apps/backend/tests/test_attention_triage.py b/apps/backend/tests/test_attention_triage.py
new file mode 100644
index 0000000..57f86cc
--- /dev/null
+++ b/apps/backend/tests/test_attention_triage.py
@@ -0,0 +1,54 @@
+from datetime import datetime, timezone
+
+from app.services.attention_triage import TriageUploadRef, count_unhandled_patients, select_risk_representative
+
+
+def _ref(
+    upload_id: int,
+    *,
+    tier: str,
+    has_annotation: bool = False,
+    minute: int = 0,
+) -> TriageUploadRef:
+    return TriageUploadRef(
+        upload_id=upload_id,
+        created_at=datetime(2026, 8, 6, 10, minute, tzinfo=timezone.utc),
+        tier=tier,  # type: ignore[arg-type]
+        has_annotation=has_annotation,
+    )
+
+
+def test_select_risk_representative_prefers_suspected_over_elevated() -> None:
+    refs = [
+        _ref(1, tier="elevated", minute=1),
+        _ref(2, tier="suspected", minute=5),
+        _ref(3, tier="other", minute=0),
+    ]
+    representative = select_risk_representative(refs)
+    assert representative is not None
+    assert representative.upload_id == 2
+    assert representative.tier == "suspected"
+
+
+def test_select_risk_representative_picks_earliest_in_target_tier() -> None:
+    refs = [
+        _ref(10, tier="suspected", minute=20),
+        _ref(11, tier="suspected", minute=5),
+        _ref(12, tier="elevated", minute=1),
+    ]
+    representative = select_risk_representative(refs)
+    assert representative is not None
+    assert representative.upload_id == 11
+
+
+def test_select_risk_representative_none_for_other_only() -> None:
+    assert select_risk_representative([_ref(1, tier="other")]) is None
+
+
+def test_count_unhandled_patients_ignores_annotated_representative() -> None:
+    groups = {
+        1: [_ref(1, tier="suspected", has_annotation=True)],
+        2: [_ref(2, tier="elevated", has_annotation=False)],
+        3: [_ref(3, tier="other")],
+    }
+    assert count_unhandled_patients(groups) == 1
diff --git a/apps/frontend/app/admin/_components/recent-upload-thumbs.tsx b/apps/frontend/app/admin/_components/recent-upload-thumbs.tsx
deleted file mode 100644
index 072a398..0000000
--- a/apps/frontend/app/admin/_components/recent-upload-thumbs.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
-import Image from "next/image";
-import Link from "next/link";
-
-import type { StaffUploadQueueItem } from "@/lib/api/staff";
-import { fetchUploadImageAccess } from "@/lib/api/staff";
-import { cn } from "@/lib/utils";
-
-const VISIBLE_THUMBS = 5;
-
-function formatLocalTime(raw: string): string {
-  return new Intl.DateTimeFormat("zh-TW", {
-    hour: "2-digit",
-    minute: "2-digit",
-    hour12: false,
-    timeZone: "Asia/Taipei",
-  }).format(new Date(raw));
-}
-
-function queueRisk(item: StaffUploadQueueItem): { label: string; className: string } {
-  if (item.screening_result === "suspected") {
-    return { label: "疑似", className: "bg-red-50 text-red-700" };
-  }
-  if (item.has_high_risk_symptoms && item.screening_result === "normal") {
-    return { label: "高風險", className: "bg-amber-50 text-amber-700" };
-  }
-  if (item.screening_result === "rejected") {
-    return { label: "退回", className: "bg-zinc-100 text-zinc-600" };
-  }
-  return { label: "正常", className: "bg-zinc-100 text-zinc-600" };
-}
-
-type RecentUploadThumbsProps = {
-  items: StaffUploadQueueItem[];
-  loading: boolean;
-  error: string | null;
-};
-
-export function RecentUploadThumbs({ items, loading, error }: RecentUploadThumbsProps) {
-  const visible = useMemo(() => items.slice(0, VISIBLE_THUMBS), [items]);
-  const overflow = Math.max(0, items.length - VISIBLE_THUMBS);
-  const [imageUrlById, setImageUrlById] = useState<Record<number, string>>({});
-  const [imageErrorById, setImageErrorById] = useState<Record<number, boolean>>({});
-
-  useEffect(() => {
-    const missing = visible.filter((item) => !imageUrlById[item.upload_id] && !imageErrorById[item.upload_id]);
-    if (missing.length === 0) {
-      return;
-    }
-    let cancelled = false;
-    void Promise.allSettled(missing.map((item) => fetchUploadImageAccess(item.upload_id))).then((results) => {
-      if (cancelled) {
-        return;
-      }
-      setImageUrlById((current) => {
-        const next = { ...current };
-        results.forEach((result, index) => {
-          if (result.status === "fulfilled") {
-            next[missing[index].upload_id] = result.value.image_url;
-          }
-        });
-        return next;
-      });
-      setImageErrorById((current) => {
-        const next = { ...current };
-        results.forEach((result, index) => {
-          if (result.status === "rejected") {
-            next[missing[index].upload_id] = true;
-          }
-        });
-        return next;
-      });
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [visible, imageUrlById, imageErrorById]);
-
-  return (
-    <section className="rounded-xl border border-zinc-200 bg-white p-3 shadow-sm">
-      <div className="mb-2 flex items-center justify-between gap-2">
-        <h2 className="text-sm font-semibold text-zinc-900">最新上傳</h2>
-        <Link href="/admin/review-fast" className="text-xs text-zinc-500 hover:text-zinc-800">
-          極速審核 →
-        </Link>
-      </div>
-      {loading ? <p className="py-4 text-center text-sm text-zinc-400">載入中…</p> : null}
-      {!loading && error ? <p className="py-4 text-center text-sm text-red-600">{error}</p> : null}
-      {!loading && !error && items.length === 0 ? (
-        <p className="py-4 text-center text-sm text-zinc-400">目前沒有上傳資料。</p>
-      ) : null}
-      {!loading && !error && items.length > 0 ? (
-        <div className="grid grid-cols-3 gap-1.5">
-          {visible.map((item) => {
-            const risk = queueRisk(item);
-            const imageUrl = imageUrlById[item.upload_id];
-            const imageError = imageErrorById[item.upload_id] ?? false;
-            return (
-              <Link
-                key={item.upload_id}
-                href={`/admin/patients/${item.patient_id}`}
-                className="group relative aspect-square overflow-hidden rounded-lg bg-zinc-100 ring-1 ring-zinc-200 transition hover:ring-zinc-400"
-              >
-                {imageUrl ? (
-                  <Image src={imageUrl} alt="" fill unoptimized className="object-cover" />
-                ) : (
-                  <div className="flex h-full items-center justify-center text-[10px] text-zinc-400">
-                    {imageError ? "失敗" : "…"}
-                  </div>
-                )}
-                <span className={cn("absolute left-1 top-1 rounded-full px-1.5 py-0.5 text-[10px] font-medium", risk.className)}>
-                  {risk.label}
-                </span>
-                <span className="absolute bottom-1 right-1 rounded bg-zinc-900/75 px-1.5 py-0.5 text-[10px] text-white">
-                  {formatLocalTime(item.created_at)}
-                </span>
-              </Link>
-            );
-          })}
-          {overflow > 0 ? (
-            <Link
-              href="/admin/history-overview"
-              className="flex aspect-square items-center justify-center rounded-lg border border-dashed border-zinc-300 bg-zinc-50 text-sm font-semibold text-zinc-600 hover:bg-zinc-100"
-            >
-              +{overflow}
-            </Link>
-          ) : null}
-        </div>
-      ) : null}
-    </section>
-  );
-}
diff --git a/apps/frontend/app/admin/_components/today-patient-detail-panel.tsx b/apps/frontend/app/admin/_components/today-patient-detail-panel.tsx
index b74ae0e..8835559 100644
--- a/apps/frontend/app/admin/_components/today-patient-detail-panel.tsx
+++ b/apps/frontend/app/admin/_components/today-patient-detail-panel.tsx
@@ -18,6 +18,8 @@ type TodayPatientDetailPanelProps = {
   isTodaySelected: boolean;
   className?: string;
   onReviewSaved?: () => void;
+  imageUrlByUploadId?: Record<number, string>;
+  imageErrorByUploadId?: Record<number, boolean>;
 };
 
 function tierLabel(tier: StaffTodayAttentionPatientItem["tier"]): { text: string; className: string } {
@@ -84,6 +86,8 @@ export function TodayPatientDetailPanel({
   isTodaySelected,
   className,
   onReviewSaved,
+  imageUrlByUploadId = {},
+  imageErrorByUploadId = {},
 }: TodayPatientDetailPanelProps) {
   const [reviewOpen, setReviewOpen] = useState(false);
 
@@ -161,7 +165,11 @@ export function TodayPatientDetailPanel({
         <div className="grid grid-cols-2 gap-2">
           {uploadIds.map((uploadId) => (
             <div key={uploadId} className="aspect-square">
-              <UploadThumb uploadId={uploadId} />
+              <UploadThumb
+                uploadId={uploadId}
+                imageUrl={imageUrlByUploadId[uploadId] ?? null}
+                imageError={imageErrorByUploadId[uploadId]}
+              />
             </div>
           ))}
           {overflow > 0 ? (
diff --git a/apps/frontend/app/admin/_components/today-patient-pool.tsx b/apps/frontend/app/admin/_components/today-patient-pool.tsx
index 4f23480..0e4d646 100644
--- a/apps/frontend/app/admin/_components/today-patient-pool.tsx
+++ b/apps/frontend/app/admin/_components/today-patient-pool.tsx
@@ -1,9 +1,12 @@
 "use client";
 
+import { useMemo } from "react";
+
 import type { StaffTodayAttentionPatientItem } from "@/lib/api/staff";
 
 import { TodayPatientDetailPanel } from "./today-patient-detail-panel";
 import { TodayPatientRow } from "./today-patient-row";
+import { useUploadImageUrls } from "./use-upload-image-urls";
 
 type TodayPatientPoolProps = {
   loading: boolean;
@@ -20,6 +23,28 @@ type TodayPatientPoolProps = {
   onReviewSaved?: () => void;
 };
 
+function collectItemUploadIds(item: StaffTodayAttentionPatientItem): number[] {
+  const ids: number[] = [];
+  const seen = new Set<number>();
+  const push = (uploadId: number) => {
+    if (seen.has(uploadId)) {
+      return;
+    }
+    seen.add(uploadId);
+    ids.push(uploadId);
+  };
+  if (item.risk_highlight) {
+    push(item.risk_highlight.upload_id);
+  }
+  for (const uploadId of item.preview_upload_ids ?? []) {
+    push(uploadId);
+  }
+  if (ids.length === 0) {
+    push(item.representative_upload_id);
+  }
+  return ids;
+}
+
 export function TodayPatientPool({
   loading,
   error,
@@ -37,33 +62,52 @@ export function TodayPatientPool({
   const selectedItem =
     selectedPatientId != null ? items.find((item) => item.patient_id === selectedPatientId) ?? null : null;
 
+  const uploadIdsForImages = useMemo(() => {
+    const seen = new Set<number>();
+    const ids: number[] = [];
+    for (const item of items) {
+      for (const uploadId of collectItemUploadIds(item)) {
+        if (seen.has(uploadId)) {
+          continue;
+        }
+        seen.add(uploadId);
+        ids.push(uploadId);
+      }
+    }
+    return ids;
+  }, [items]);
+
+  const { imageUrlByUploadId, imageErrorByUploadId } = useUploadImageUrls(uploadIdsForImages);
+
   return (
     <div className="flex flex-col gap-4 lg:flex-row lg:items-start">
       <section className="min-w-0 flex-1 rounded-xl border border-dashed border-zinc-300 bg-zinc-50/80 p-3 lg:flex-[1.5]">
-      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
-        <h2 className="text-sm font-semibold text-zinc-900">{dayScopeLabel}上傳病患</h2>
-        <p className="text-xs text-zinc-500">
-          疑似 {suspectedPatients} · 高風險 {elevatedPatients} · 其餘 {otherPatients}
-        </p>
-      </div>
-      {loading ? <p className="py-6 text-center text-sm text-zinc-400">載入中…</p> : null}
-      {!loading && error ? <p className="py-6 text-center text-sm text-red-600">{error}</p> : null}
-      {!loading && !error && items.length === 0 ? (
-        <p className="py-6 text-center text-sm text-zinc-400">{dayScopeLabel}尚無上傳病患。</p>
-      ) : null}
-      {!loading && !error && items.length > 0 ? (
-        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3">
-          {items.map((item) => (
-            <TodayPatientRow
-              key={item.patient_id}
-              item={item}
-              isTodaySelected={isTodaySelected}
-              selected={item.patient_id === selectedPatientId}
-              onSelect={onSelectPatient}
-            />
-          ))}
+        <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
+          <h2 className="text-sm font-semibold text-zinc-900">{dayScopeLabel}上傳病患</h2>
+          <p className="text-xs text-zinc-500">
+            疑似 {suspectedPatients} · 高風險 {elevatedPatients} · 其餘 {otherPatients}
+          </p>
         </div>
-      ) : null}
+        {loading ? <p className="py-6 text-center text-sm text-zinc-400">載入中…</p> : null}
+        {!loading && error ? <p className="py-6 text-center text-sm text-red-600">{error}</p> : null}
+        {!loading && !error && items.length === 0 ? (
+          <p className="py-6 text-center text-sm text-zinc-400">{dayScopeLabel}尚無上傳病患。</p>
+        ) : null}
+        {!loading && !error && items.length > 0 ? (
+          <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3">
+            {items.map((item) => (
+              <TodayPatientRow
+                key={item.patient_id}
+                item={item}
+                isTodaySelected={isTodaySelected}
+                selected={item.patient_id === selectedPatientId}
+                onSelect={onSelectPatient}
+                imageUrlByUploadId={imageUrlByUploadId}
+                imageErrorByUploadId={imageErrorByUploadId}
+              />
+            ))}
+          </div>
+        ) : null}
       </section>
 
       <TodayPatientDetailPanel
@@ -73,6 +117,8 @@ export function TodayPatientPool({
         isTodaySelected={isTodaySelected}
         className="w-full shrink-0 lg:sticky lg:top-4 lg:w-[320px] xl:w-[360px]"
         onReviewSaved={onReviewSaved}
+        imageUrlByUploadId={imageUrlByUploadId}
+        imageErrorByUploadId={imageErrorByUploadId}
       />
     </div>
   );
diff --git a/apps/frontend/app/admin/_components/today-patient-row.tsx b/apps/frontend/app/admin/_components/today-patient-row.tsx
index fccd323..96dac3d 100644
--- a/apps/frontend/app/admin/_components/today-patient-row.tsx
+++ b/apps/frontend/app/admin/_components/today-patient-row.tsx
@@ -45,9 +45,18 @@ type TodayPatientRowProps = {
   isTodaySelected: boolean;
   selected: boolean;
   onSelect: (patientId: number) => void;
+  imageUrlByUploadId: Record<number, string>;
+  imageErrorByUploadId: Record<number, boolean>;
 };
 
-export function TodayPatientRow({ item, isTodaySelected, selected, onSelect }: TodayPatientRowProps) {
+export function TodayPatientRow({
+  item,
+  isTodaySelected,
+  selected,
+  onSelect,
+  imageUrlByUploadId,
+  imageErrorByUploadId,
+}: TodayPatientRowProps) {
   const name = item.full_name || item.case_number;
   const status = statusLabel(item, isTodaySelected);
   const highlight = item.risk_highlight;
@@ -91,7 +100,11 @@ export function TodayPatientRow({ item, isTodaySelected, selected, onSelect }: T
       {isRiskTier && highlight ? (
         <div className="flex h-14 overflow-hidden rounded-lg bg-zinc-50 ring-1 ring-zinc-200">
           <div className="relative h-14 w-14 shrink-0">
-            <UploadThumb uploadId={highlight.upload_id} />
+            <UploadThumb
+              uploadId={highlight.upload_id}
+              imageUrl={imageUrlByUploadId[highlight.upload_id] ?? null}
+              imageError={imageErrorByUploadId[highlight.upload_id]}
+            />
           </div>
           <div className="min-w-0 flex-1 px-2.5 py-1.5">
             <p className="text-[10px] text-zinc-400">最高風險 · {formatTime(highlight.created_at)}</p>
@@ -105,7 +118,11 @@ export function TodayPatientRow({ item, isTodaySelected, selected, onSelect }: T
         <div className="flex h-14 gap-1.5">
           {previewIds.slice(0, overflow > 0 ? 3 : 4).map((uploadId) => (
             <div key={uploadId} className="h-14 w-14 shrink-0">
-              <UploadThumb uploadId={uploadId} />
+              <UploadThumb
+                uploadId={uploadId}
+                imageUrl={imageUrlByUploadId[uploadId] ?? null}
+                imageError={imageErrorByUploadId[uploadId]}
+              />
             </div>
           ))}
           {overflow > 0 ? (
diff --git a/apps/frontend/app/admin/_components/upload-thumb.tsx b/apps/frontend/app/admin/_components/upload-thumb.tsx
index d280f12..bfcfec4 100644
--- a/apps/frontend/app/admin/_components/upload-thumb.tsx
+++ b/apps/frontend/app/admin/_components/upload-thumb.tsx
@@ -10,29 +10,45 @@ type UploadThumbProps = {
   uploadId: number;
   className?: string;
   imageClassName?: string;
+  /** When provided (including null), parent owns loading — skip self-fetch. */
+  imageUrl?: string | null;
+  imageError?: boolean;
 };
 
-export function UploadThumb({ uploadId, className, imageClassName }: UploadThumbProps) {
-  const [imageUrl, setImageUrl] = useState<string | null>(null);
-  const [imageError, setImageError] = useState(false);
+export function UploadThumb({
+  uploadId,
+  className,
+  imageClassName,
+  imageUrl: controlledUrl,
+  imageError: controlledError,
+}: UploadThumbProps) {
+  const isControlled = controlledUrl !== undefined || controlledError !== undefined;
+  const [fetchedUrl, setFetchedUrl] = useState<string | null>(null);
+  const [fetchedError, setFetchedError] = useState(false);
 
   useEffect(() => {
+    if (isControlled) {
+      return;
+    }
     let cancelled = false;
     void fetchUploadImageAccess(uploadId)
       .then((result) => {
         if (!cancelled) {
-          setImageUrl(result.image_url);
+          setFetchedUrl(result.image_url);
         }
       })
       .catch(() => {
         if (!cancelled) {
-          setImageError(true);
+          setFetchedError(true);
         }
       });
     return () => {
       cancelled = true;
     };
-  }, [uploadId]);
+  }, [isControlled, uploadId]);
+
+  const imageUrl = isControlled ? (controlledUrl ?? null) : fetchedUrl;
+  const imageError = isControlled ? Boolean(controlledError) : fetchedError;
 
   return (
     <div className={cn("relative h-full w-full overflow-hidden rounded-md bg-zinc-100 ring-1 ring-zinc-200", className)}>
diff --git a/apps/frontend/app/admin/page.tsx b/apps/frontend/app/admin/page.tsx
index 707c1de..85fb605 100644
--- a/apps/frontend/app/admin/page.tsx
+++ b/apps/frontend/app/admin/page.tsx
@@ -33,50 +33,41 @@ function AdminDashboardInner() {
   const [metricsByDate, setMetricsByDate] = useState<Record<string, DayCalendarMetrics>>({});
   const [calendarLoading, setCalendarLoading] = useState(true);
 
-  const refreshAttention = useCallback(() => {
+  const loadAttention = useCallback(async (isCancelled?: () => boolean) => {
+    const cancelled = isCancelled ?? (() => false);
     setAttentionLoading(true);
-    return fetchTodayAttention({ localDate: selectedDate })
-      .then((data) => {
-        setAttention(data);
-        setAttentionError(null);
-      })
-      .catch(() => {
-        setAttentionError(`無法載入${dayScopeLabel}上傳病患`);
-        setAttention(null);
-      })
-      .finally(() => {
+    try {
+      const data = await fetchTodayAttention({ localDate: selectedDate });
+      if (cancelled()) {
+        return;
+      }
+      setAttention(data);
+      setAttentionError(null);
+    } catch {
+      if (cancelled()) {
+        return;
+      }
+      setAttentionError(`無法載入${dayScopeLabel}上傳病患`);
+      setAttention(null);
+    } finally {
+      if (!cancelled()) {
         setAttentionLoading(false);
-      });
+      }
+    }
   }, [dayScopeLabel, selectedDate]);
 
+  const refreshAttention = useCallback(() => loadAttention(), [loadAttention]);
+
   useEffect(() => {
     let cancelled = false;
     const timer = window.setTimeout(() => {
-      setAttentionLoading(true);
-      void fetchTodayAttention({ localDate: selectedDate })
-        .then((data) => {
-          if (!cancelled) {
-            setAttention(data);
-            setAttentionError(null);
-          }
-        })
-        .catch(() => {
-          if (!cancelled) {
-            setAttentionError(`無法載入${dayScopeLabel}上傳病患`);
-            setAttention(null);
-          }
-        })
-        .finally(() => {
-          if (!cancelled) {
-            setAttentionLoading(false);
-          }
-        });
+      void loadAttention(() => cancelled);
     }, 0);
     return () => {
       cancelled = true;
       window.clearTimeout(timer);
     };
-  }, [selectedDate, dayScopeLabel]);
+  }, [loadAttention]);
 
   useEffect(() => {
     let cancelled = false;

From 32335993b2c18d172070ee50b774e48f2a4862ec Mon Sep 17 00:00:00 2001
From: ruby0322 <ruby0322@ntu.im>
Date: Fri, 7 Aug 2026 00:55:20 +0800
Subject: [PATCH 4/5] fix(auth): restore bindIdentityWithRetry out of admin PR
 scope

Revert identity bind retry, structured LINE verify errors, and guarded
onboarding bootstrap redirect so admin dashboard work does not regress
transient LINE verify handling.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/backend/app/api/routes/identity.py       |  18 ++--
 apps/backend/tests/test_identity_api.py       |  23 ++++
 apps/frontend/app/admin/page.tsx              |   4 +-
 apps/frontend/app/onboarding/patient/page.tsx |  27 +++--
 apps/frontend/app/patient/page.tsx            |  17 +--
 .../lib/api/__tests__/identity.test.ts        | 102 ++++++++++++++++++
 apps/frontend/lib/api/identity.ts             |  21 +++-
 7 files changed, 182 insertions(+), 30 deletions(-)
 create mode 100644 apps/frontend/lib/api/__tests__/identity.test.ts

diff --git a/apps/backend/app/api/routes/identity.py b/apps/backend/app/api/routes/identity.py
index bf854e3..fc1c317 100644
--- a/apps/backend/app/api/routes/identity.py
+++ b/apps/backend/app/api/routes/identity.py
@@ -11,6 +11,8 @@
 )
 from app.schemas.identity import BindIdentityRequest, IdentityBindResponse, IdentityStatusRequest, IdentityStatusResponse
 from app.services.auth import LineIdentityProvider
+from app.services.auth.line_provider import LineTokenVerifyError
+from app.services.auth.line_verify_http import line_verify_http_error
 from app.services.admin_user_management import (
     create_or_replace_healthcare_permission_request,
     get_latest_healthcare_permission_request_status,
@@ -45,8 +47,8 @@ async def bind_patient_identity(request: Request, payload: BindIdentityRequest)
         line_provider = _build_line_provider(request)
         try:
             profile = line_provider.verify_id_token(line_id_token=payload.line_id_token)
-        except ValueError as exc:
-            raise HTTPException(status_code=400, detail=str(exc)) from exc
+        except LineTokenVerifyError as exc:
+            raise line_verify_http_error(exc) from exc
         status, patient_id, can_upload = bind_identity(
             session,
             line_user_id=profile.line_user_id,
@@ -70,8 +72,8 @@ async def patient_identity_status(
         line_provider = _build_line_provider(request)
         try:
             profile = line_provider.verify_id_token(line_id_token=payload.line_id_token)
-        except ValueError as exc:
-            raise HTTPException(status_code=400, detail=str(exc)) from exc
+        except LineTokenVerifyError as exc:
+            raise line_verify_http_error(exc) from exc
         status, patient_id, can_upload = get_identity_status(session, line_user_id=profile.line_user_id)
         return IdentityStatusResponse(status=status, patient_id=patient_id, can_upload=can_upload)
     finally:
@@ -88,8 +90,8 @@ async def create_healthcare_access_request(
         line_provider = _build_line_provider(request)
         try:
             profile = line_provider.verify_id_token(line_id_token=payload.line_id_token)
-        except ValueError as exc:
-            raise HTTPException(status_code=400, detail=str(exc)) from exc
+        except LineTokenVerifyError as exc:
+            raise line_verify_http_error(exc) from exc
         access_request = create_or_replace_healthcare_permission_request(
             session,
             line_user_id=profile.line_user_id,
@@ -114,8 +116,8 @@ async def get_healthcare_access_request_status(
         line_provider = _build_line_provider(request)
         try:
             profile = line_provider.verify_id_token(line_id_token=payload.line_id_token)
-        except ValueError as exc:
-            raise HTTPException(status_code=400, detail=str(exc)) from exc
+        except LineTokenVerifyError as exc:
+            raise line_verify_http_error(exc) from exc
         access_request = get_latest_healthcare_permission_request_status(session, line_user_id=profile.line_user_id)
         if access_request is None:
             return HealthcarePermissionRequestStatusResponse(
diff --git a/apps/backend/tests/test_identity_api.py b/apps/backend/tests/test_identity_api.py
index 65baf65..c4f08c0 100644
--- a/apps/backend/tests/test_identity_api.py
+++ b/apps/backend/tests/test_identity_api.py
@@ -4,6 +4,7 @@
 from pathlib import Path
 from types import SimpleNamespace
 
+import pytest
 from fastapi.testclient import TestClient
 
 from app.config import Settings
@@ -194,3 +195,25 @@ def test_bind_status_rejects_invalid_line_token(tmp_path: Path) -> None:
     with TestClient(app) as client:
         response = client.post("/v1/identity/bind/status", json={"line_id_token": "not-a-stub-token"})
         assert response.status_code == 400
+        payload = response.json()
+        assert payload["detail"]["code"] == "LINE_TOKEN_INVALID"
+        assert payload["detail"]["message"] == "LINE 登入失敗，請重新開啟。"
+
+
+def test_bind_status_returns_structured_line_verify_unavailable(tmp_path: Path, monkeypatch: pytest.MonkeyPatch) -> None:
+    from app.services.auth.line_provider import LineIdentityProvider, LineTokenVerifyError
+
+    settings = make_settings(tmp_path / "verify-unavailable.db")
+    app = create_app(settings=settings, loaded_model=SimpleNamespace(device="cpu"))
+
+    def fake_verify(_self: LineIdentityProvider, *, line_id_token: str) -> None:
+        raise LineTokenVerifyError("LINE_VERIFY_UNAVAILABLE", "無法連上 LINE，請稍後再試。")
+
+    monkeypatch.setattr(LineIdentityProvider, "verify_id_token", fake_verify)
+
+    with TestClient(app) as client:
+        response = client.post("/v1/identity/bind/status", json={"line_id_token": "stub:U_LINE_X"})
+        assert response.status_code == 400
+        payload = response.json()
+        assert payload["detail"]["code"] == "LINE_VERIFY_UNAVAILABLE"
+        assert payload["detail"]["message"] == "無法連上 LINE，請稍後再試。"
diff --git a/apps/frontend/app/admin/page.tsx b/apps/frontend/app/admin/page.tsx
index 85fb605..f73d62a 100644
--- a/apps/frontend/app/admin/page.tsx
+++ b/apps/frontend/app/admin/page.tsx
@@ -56,8 +56,6 @@ function AdminDashboardInner() {
     }
   }, [dayScopeLabel, selectedDate]);
 
-  const refreshAttention = useCallback(() => loadAttention(), [loadAttention]);
-
   useEffect(() => {
     let cancelled = false;
     const timer = window.setTimeout(() => {
@@ -178,7 +176,7 @@ function AdminDashboardInner() {
         selectedPatientId={resolvedPatientId}
         onSelectPatient={setSelectedPatientId}
         onReviewSaved={() => {
-          void refreshAttention();
+          void loadAttention();
         }}
       />
     </main>
diff --git a/apps/frontend/app/onboarding/patient/page.tsx b/apps/frontend/app/onboarding/patient/page.tsx
index c6fd5e1..ff08e5b 100644
--- a/apps/frontend/app/onboarding/patient/page.tsx
+++ b/apps/frontend/app/onboarding/patient/page.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Suspense, useEffect, useState } from "react";
 
-import { bindIdentity, fetchAuthBootstrap, fetchIdentityStatus, IdentityStatus } from "@/lib/api/identity";
+import { bindIdentityWithRetry, fetchAuthBootstrap, fetchIdentityStatus, IdentityStatus } from "@/lib/api/identity";
 import { getApiErrorDetail } from "@/lib/api/client";
 import { buildLoginPath, getLiffLoginProof } from "@/lib/auth/liff";
 import { PATIENT_ONBOARDING_INTENT } from "@/lib/auth/patient-onboarding-intent";
@@ -87,19 +87,24 @@ function PatientOnboardingPageInner() {
     try {
       setSubmitting(true);
       setError(null);
-      const proof = await getLiffLoginProof();
-      const bindResult = await bindIdentity({
-        line_id_token: proof.idToken,
-        case_number: caseNumber.trim(),
-        birth_date: birthDate,
-      });
+      const bindResult = await bindIdentityWithRetry(
+        {
+          case_number: caseNumber.trim(),
+          birth_date: birthDate,
+        },
+        async () => (await getLiffLoginProof()).idToken,
+        () => setError("連線失敗，正在重試…")
+      );
       setStatus(bindResult.status);
-      const bootstrap = await fetchAuthBootstrap(proof.idToken);
-      if (bootstrap.next_step === "patient_app") {
-        router.replace(buildLoginPath("/patient"));
+      if (bindResult.status === "matched") {
+        const freshProof = await getLiffLoginProof();
+        const bootstrap = await fetchAuthBootstrap(freshProof.idToken);
+        if (bootstrap.next_step === "patient_app") {
+          router.replace(buildLoginPath("/patient"));
+        }
       }
     } catch (err) {
-      setError(getApiErrorDetail(err) ?? "綁定失敗，請稍後再試或聯絡護理師。");
+      setError(getApiErrorDetail(err) ?? "綁定失敗，請稍後再試。");
     } finally {
       setSubmitting(false);
     }
diff --git a/apps/frontend/app/patient/page.tsx b/apps/frontend/app/patient/page.tsx
index 9be5be5..cc7a85f 100644
--- a/apps/frontend/app/patient/page.tsx
+++ b/apps/frontend/app/patient/page.tsx
@@ -2,7 +2,7 @@
 
 import { PatientDailyCalendar } from "@/components/patient-daily-calendar";
 import { getApiErrorDetail } from "@/lib/api/client";
-import { bindIdentity, fetchIdentityStatus, IdentityStatus } from "@/lib/api/identity";
+import { bindIdentityWithRetry, fetchIdentityStatus, IdentityStatus } from "@/lib/api/identity";
 import {
     fetchPatientMessages,
     fetchUploadHistoryByMonthWindow,
@@ -246,14 +246,17 @@ export default function PatientPage() {
     try {
       setSubmitting(true);
       setError(null);
-      const result = await bindIdentity({
-        line_id_token: (await getLiffLoginProof()).idToken,
-        case_number: caseNumber.trim(),
-        birth_date: birthDate,
-      });
+      const result = await bindIdentityWithRetry(
+        {
+          case_number: caseNumber.trim(),
+          birth_date: birthDate,
+        },
+        async () => (await getLiffLoginProof()).idToken,
+        () => setError("連線失敗，正在重試…")
+      );
       setStatus(result.status);
     } catch (err) {
-      setError(getApiErrorDetail(err) ?? "綁定失敗，請稍後再試或聯絡護理師。");
+      setError(getApiErrorDetail(err) ?? "綁定失敗，請稍後再試。");
     } finally {
       setSubmitting(false);
     }
diff --git a/apps/frontend/lib/api/__tests__/identity.test.ts b/apps/frontend/lib/api/__tests__/identity.test.ts
new file mode 100644
index 0000000..a22722b
--- /dev/null
+++ b/apps/frontend/lib/api/__tests__/identity.test.ts
@@ -0,0 +1,102 @@
+import { AxiosError } from "axios";
+
+import { apiClient, getApiErrorCode } from "@/lib/api/client";
+import { bindIdentity, bindIdentityWithRetry } from "@/lib/api/identity";
+import { getLiffLoginProof } from "@/lib/auth/liff";
+
+jest.mock("@/lib/api/client", () => ({
+  apiClient: {
+    post: jest.fn(),
+  },
+  getApiErrorCode: jest.fn(),
+}));
+
+jest.mock("@/lib/auth/liff", () => ({
+  getLiffLoginProof: jest.fn(),
+}));
+
+describe("bindIdentityWithRetry", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (getLiffLoginProof as jest.Mock).mockResolvedValue({
+      idToken: "token-1",
+      profile: { displayName: "Patient" },
+    });
+  });
+
+  it("retries once when LINE verify is temporarily unavailable", async () => {
+    const unavailableError = new AxiosError("bad request");
+    unavailableError.response = {
+      status: 400,
+      data: { detail: { code: "LINE_VERIFY_UNAVAILABLE", message: "無法連上 LINE，請稍後再試。" } },
+      statusText: "Bad Request",
+      headers: {},
+      config: {} as never,
+    };
+    (getApiErrorCode as jest.Mock)
+      .mockReturnValueOnce("LINE_VERIFY_UNAVAILABLE")
+      .mockReturnValueOnce(null);
+    (apiClient.post as jest.Mock)
+      .mockRejectedValueOnce(unavailableError)
+      .mockResolvedValueOnce({
+        data: { status: "pending", patient_id: null, can_upload: false },
+      });
+    (getLiffLoginProof as jest.Mock)
+      .mockResolvedValueOnce({ idToken: "token-1", profile: { displayName: "Patient" } })
+      .mockResolvedValueOnce({ idToken: "token-2", profile: { displayName: "Patient" } });
+
+    const onRetry = jest.fn();
+    const result = await bindIdentityWithRetry(
+      { case_number: "P123456", birth_date: "1980-01-02" },
+      async () => (await getLiffLoginProof()).idToken,
+      onRetry
+    );
+
+    expect(onRetry).toHaveBeenCalledTimes(1);
+    expect(apiClient.post).toHaveBeenCalledTimes(2);
+    expect(result.status).toBe("pending");
+  });
+
+  it("does not retry for other errors", async () => {
+    const invalidError = new AxiosError("bad request");
+    invalidError.response = {
+      status: 400,
+      data: { detail: { code: "LINE_TOKEN_INVALID", message: "LINE 登入失敗，請重新開啟。" } },
+      statusText: "Bad Request",
+      headers: {},
+      config: {} as never,
+    };
+    (getApiErrorCode as jest.Mock).mockReturnValue("LINE_TOKEN_INVALID");
+    (apiClient.post as jest.Mock).mockRejectedValueOnce(invalidError);
+
+    await expect(
+      bindIdentityWithRetry({ case_number: "P123456", birth_date: "1980-01-02" })
+    ).rejects.toBe(invalidError);
+    expect(apiClient.post).toHaveBeenCalledTimes(1);
+  });
+});
+
+describe("bindIdentity", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("posts bind payload to the identity endpoint", async () => {
+    (apiClient.post as jest.Mock).mockResolvedValue({
+      data: { status: "matched", patient_id: 1, can_upload: true },
+    });
+
+    const result = await bindIdentity({
+      line_id_token: "token",
+      case_number: "P123456",
+      birth_date: "1980-01-02",
+    });
+
+    expect(apiClient.post).toHaveBeenCalledWith("/v1/identity/bind", {
+      line_id_token: "token",
+      case_number: "P123456",
+      birth_date: "1980-01-02",
+    });
+    expect(result.status).toBe("matched");
+  });
+});
diff --git a/apps/frontend/lib/api/identity.ts b/apps/frontend/lib/api/identity.ts
index 807195e..237a390 100644
--- a/apps/frontend/lib/api/identity.ts
+++ b/apps/frontend/lib/api/identity.ts
@@ -1,4 +1,5 @@
-import { apiClient } from "@/lib/api/client";
+import { apiClient, getApiErrorCode } from "@/lib/api/client";
+import { getLiffLoginProof } from "@/lib/auth/liff";
 
 export type IdentityStatus = "matched" | "pending" | "unbound";
 export type HealthcareAccessStatus = "none" | "pending" | "approved" | "rejected";
@@ -71,6 +72,24 @@ export async function bindIdentity(payload: BindIdentityPayload): Promise<Identi
   return data;
 }
 
+export async function bindIdentityWithRetry(
+  payload: Omit<BindIdentityPayload, "line_id_token">,
+  getLineIdToken: () => Promise<string> = async () => (await getLiffLoginProof()).idToken,
+  onRetry?: () => void
+): Promise<IdentityStatusResponse> {
+  const lineIdToken = await getLineIdToken();
+  try {
+    return await bindIdentity({ ...payload, line_id_token: lineIdToken });
+  } catch (error) {
+    if (getApiErrorCode(error) !== "LINE_VERIFY_UNAVAILABLE") {
+      throw error;
+    }
+    onRetry?.();
+    const refreshedToken = await getLineIdToken();
+    return bindIdentity({ ...payload, line_id_token: refreshedToken });
+  }
+}
+
 export async function fetchPatientProfile(): Promise<PatientProfileResponse> {
   const { data } = await apiClient.get<PatientProfileResponse>("/v1/patient/profile");
   return data;

From 700b149d048f3d9b154b4fa8df92816d072aea1a Mon Sep 17 00:00:00 2001
From: ruby0322 <ruby0322@ntu.im>
Date: Fri, 7 Aug 2026 01:08:13 +0800
Subject: [PATCH 5/5] fix(auth): restore line verify stack broken by partial
 identity revert

Identity routes from main require LineTokenVerifyError and
line_verify_http; restore matching auth provider and bootstrap routes
so backend imports and local stub login work again.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 apps/backend/app/api/routes/auth.py           |   6 +
 .../app/services/auth/line_provider.py        | 132 ++++++++++++------
 .../app/services/auth/line_verify_http.py     |   9 ++
 3 files changed, 107 insertions(+), 40 deletions(-)
 create mode 100644 apps/backend/app/services/auth/line_verify_http.py

diff --git a/apps/backend/app/api/routes/auth.py b/apps/backend/app/api/routes/auth.py
index 83e1b55..f90be90 100644
--- a/apps/backend/app/api/routes/auth.py
+++ b/apps/backend/app/api/routes/auth.py
@@ -6,6 +6,8 @@
 from app.api.deps.auth import get_session
 from app.schemas.auth import AuthBootstrapResponse, AuthTokenResponse, StaffLineLoginRequest
 from app.services.auth import AuthService, AuthTokenService, LineIdentityProvider
+from app.services.auth.line_provider import LineTokenVerifyError
+from app.services.auth.line_verify_http import line_verify_http_error
 from app.services.auth.service import AuthFlowPermissionError
 
 
@@ -53,6 +55,8 @@ async def login_staff_or_admin(request: Request, payload: StaffLineLoginRequest)
                 session,
                 line_id_token=payload.line_id_token,
             )
+        except LineTokenVerifyError as exc:
+            raise line_verify_http_error(exc) from exc
         except ValueError as exc:
             raise HTTPException(status_code=400, detail=str(exc)) from exc
         except AuthFlowPermissionError as exc:
@@ -86,6 +90,8 @@ async def auth_bootstrap(request: Request, payload: StaffLineLoginRequest) -> Au
                 session,
                 line_id_token=payload.line_id_token,
             )
+        except LineTokenVerifyError as exc:
+            raise line_verify_http_error(exc) from exc
         except ValueError as exc:
             raise HTTPException(status_code=400, detail=str(exc)) from exc
 
diff --git a/apps/backend/app/services/auth/line_provider.py b/apps/backend/app/services/auth/line_provider.py
index 8a965e1..1e41d4f 100644
--- a/apps/backend/app/services/auth/line_provider.py
+++ b/apps/backend/app/services/auth/line_provider.py
@@ -1,10 +1,35 @@
 from __future__ import annotations
 
+import logging
+import time
 from dataclasses import dataclass
 from typing import Any
 
 import requests
 
+logger = logging.getLogger(__name__)
+
+LINE_VERIFY_UNAVAILABLE = "LINE_VERIFY_UNAVAILABLE"
+LINE_TOKEN_EXPIRED = "LINE_TOKEN_EXPIRED"
+LINE_TOKEN_INVALID = "LINE_TOKEN_INVALID"
+LINE_VERIFY_MISCONFIGURED = "LINE_VERIFY_MISCONFIGURED"
+
+MSG_VERIFY_UNAVAILABLE = "無法連上 LINE，請稍後再試。"
+MSG_TOKEN_EXPIRED = "LINE 登入已過期，請重新開啟。"
+MSG_TOKEN_INVALID = "LINE 登入失敗，請重新開啟。"
+MSG_VERIFY_MISCONFIGURED = "系統異常，請聯絡護理師。"
+
+LINE_VERIFY_MAX_ATTEMPTS = 3
+LINE_VERIFY_RETRY_BACKOFF_SECONDS = (0.3, 0.6)
+LINE_VERIFY_RETRYABLE_STATUS_CODES = frozenset({408, 429})
+
+
+class LineTokenVerifyError(ValueError):
+    def __init__(self, code: str, message: str) -> None:
+        self.code = code
+        self.message = message
+        super().__init__(message)
+
 
 @dataclass(frozen=True)
 class LineIdentityProfile:
@@ -33,16 +58,11 @@ def verify_id_token(self, *, line_id_token: str) -> LineIdentityProfile:
         return self._verify_line_id_token(line_id_token=line_id_token)
 
     def _verify_stub_token(self, *, line_id_token: str) -> LineIdentityProfile:
-        # Test-only / host-local mode; enables deterministic verify without LINE network.
         if not line_id_token.startswith("stub:"):
-            raise ValueError(
-                "Invalid LINE id token (stub mode): expected stub:<line_user_id>. "
-                "Frontend must leave NEXT_PUBLIC_LIFF_ID unset and use "
-                "apps/frontend/.env.local.example (see docs/ops/local-dev-without-line.md)."
-            )
+            raise LineTokenVerifyError(LINE_TOKEN_INVALID, MSG_TOKEN_INVALID)
         line_user_id = line_id_token.replace("stub:", "", 1).strip()
         if not line_user_id:
-            raise ValueError("Invalid LINE id token subject")
+            raise LineTokenVerifyError(LINE_TOKEN_INVALID, MSG_TOKEN_INVALID)
         return LineIdentityProfile(
             line_user_id=line_user_id,
             display_name=None,
@@ -51,41 +71,73 @@ def _verify_stub_token(self, *, line_id_token: str) -> LineIdentityProfile:
 
     def _verify_line_id_token(self, *, line_id_token: str) -> LineIdentityProfile:
         if line_id_token.startswith("stub:"):
-            raise ValueError(
-                "Received stub:<line_user_id> token but LINE_VERIFY_MODE is not stub. "
-                "For host-local verification set LINE_VERIFY_MODE=stub "
-                "(copy apps/backend/.env.local.example → .env; see docs/ops/local-dev-without-line.md)."
-            )
+            raise LineTokenVerifyError(LINE_VERIFY_MISCONFIGURED, MSG_VERIFY_MISCONFIGURED)
         if not self._channel_id:
-            raise ValueError("LINE_CHANNEL_ID is required for LINE token verification")
+            raise LineTokenVerifyError(LINE_VERIFY_MISCONFIGURED, MSG_VERIFY_MISCONFIGURED)
 
         payload = {"id_token": line_id_token, "client_id": self._channel_id}
-        try:
-            response = requests.post(self._verify_endpoint, data=payload, timeout=self._timeout_seconds)
-        except requests.RequestException as exc:
-            raise ValueError("Failed to verify LINE id token") from exc
+        last_request_error: requests.RequestException | None = None
 
-        if response.status_code != 200:
-            verify_error = ""
+        for attempt in range(1, LINE_VERIFY_MAX_ATTEMPTS + 1):
             try:
-                body_json: Any = response.json()
-                error_code = str(body_json.get("error", "")).strip()
-                error_description = str(body_json.get("error_description", "")).strip()
-                if error_code or error_description:
-                    verify_error = f"{error_code} {error_description}".strip()
-            except ValueError:
-                verify_error = response.text[:200].strip()
-            detail = f" (LINE verify {response.status_code}: {verify_error})" if verify_error else f" (LINE verify {response.status_code})"
-            raise ValueError(f"Invalid LINE id token{detail}")
-
-        body: Any = response.json()
-        line_user_id = str(body.get("sub", "")).strip()
-        if not line_user_id:
-            raise ValueError("LINE verify response missing subject")
-        display_name = body.get("name")
-        picture_url = body.get("picture")
-        return LineIdentityProfile(
-            line_user_id=line_user_id,
-            display_name=str(display_name).strip() if isinstance(display_name, str) and display_name.strip() else None,
-            picture_url=str(picture_url).strip() if isinstance(picture_url, str) and picture_url.strip() else None,
-        )
+                response = requests.post(
+                    self._verify_endpoint,
+                    data=payload,
+                    timeout=self._timeout_seconds,
+                )
+            except requests.RequestException as exc:
+                last_request_error = exc
+                logger.warning(
+                    "LINE verify request failed (attempt %s/%s): %s",
+                    attempt,
+                    LINE_VERIFY_MAX_ATTEMPTS,
+                    type(exc).__name__,
+                )
+                if attempt < LINE_VERIFY_MAX_ATTEMPTS:
+                    time.sleep(LINE_VERIFY_RETRY_BACKOFF_SECONDS[attempt - 1])
+                    continue
+                raise LineTokenVerifyError(LINE_VERIFY_UNAVAILABLE, MSG_VERIFY_UNAVAILABLE) from exc
+
+            if response.status_code >= 500 or response.status_code in LINE_VERIFY_RETRYABLE_STATUS_CODES:
+                logger.warning(
+                    "LINE verify returned %s (attempt %s/%s)",
+                    response.status_code,
+                    attempt,
+                    LINE_VERIFY_MAX_ATTEMPTS,
+                )
+                if attempt < LINE_VERIFY_MAX_ATTEMPTS:
+                    time.sleep(LINE_VERIFY_RETRY_BACKOFF_SECONDS[attempt - 1])
+                    continue
+                raise LineTokenVerifyError(LINE_VERIFY_UNAVAILABLE, MSG_VERIFY_UNAVAILABLE)
+
+            if response.status_code != 200:
+                verify_error = self._extract_verify_error(response)
+                if "expired" in verify_error.lower():
+                    raise LineTokenVerifyError(LINE_TOKEN_EXPIRED, MSG_TOKEN_EXPIRED)
+                raise LineTokenVerifyError(LINE_TOKEN_INVALID, MSG_TOKEN_INVALID)
+
+            body: Any = response.json()
+            line_user_id = str(body.get("sub", "")).strip()
+            if not line_user_id:
+                raise LineTokenVerifyError(LINE_VERIFY_MISCONFIGURED, MSG_VERIFY_MISCONFIGURED)
+            display_name = body.get("name")
+            picture_url = body.get("picture")
+            return LineIdentityProfile(
+                line_user_id=line_user_id,
+                display_name=str(display_name).strip() if isinstance(display_name, str) and display_name.strip() else None,
+                picture_url=str(picture_url).strip() if isinstance(picture_url, str) and picture_url.strip() else None,
+            )
+
+        raise LineTokenVerifyError(LINE_VERIFY_UNAVAILABLE, MSG_VERIFY_UNAVAILABLE) from last_request_error
+
+    @staticmethod
+    def _extract_verify_error(response: requests.Response) -> str:
+        try:
+            body_json: Any = response.json()
+            error_code = str(body_json.get("error", "")).strip()
+            error_description = str(body_json.get("error_description", "")).strip()
+            if error_code or error_description:
+                return f"{error_code} {error_description}".strip()
+        except ValueError:
+            pass
+        return response.text[:200].strip()
diff --git a/apps/backend/app/services/auth/line_verify_http.py b/apps/backend/app/services/auth/line_verify_http.py
new file mode 100644
index 0000000..f01f6cb
--- /dev/null
+++ b/apps/backend/app/services/auth/line_verify_http.py
@@ -0,0 +1,9 @@
+from __future__ import annotations
+
+from fastapi import HTTPException
+
+from app.services.auth.line_provider import LineTokenVerifyError
+
+
+def line_verify_http_error(exc: LineTokenVerifyError) -> HTTPException:
+    return HTTPException(status_code=400, detail={"code": exc.code, "message": exc.message})