From d07d47b974092081fd94eb8bb9f3bd8d0cde7144 Mon Sep 17 00:00:00 2001
From: seriouselly <supriyatinselly@gmail.com>
Date: Sun, 14 Jun 2026 23:19:42 +0700
Subject: [PATCH] refactor(diagnosis): enhance detail page usability and data
 robustness

- Implement `useEffect` to ensure smooth scroll-to-top on navigation.
- Add fallback logic to populate medicine recommendations from local seed data if backend payload is incomplete.
- Integrate dynamic `RiskBadge` component with automated severity-to-color mapping for better visual clarity.
---
 apps/web/src/components/diagnose-result-view.tsx | 15 +++++++++++----
 apps/web/src/pages/diagnosis-detail-page.tsx     |  4 ++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/diagnose-result-view.tsx b/apps/web/src/components/diagnose-result-view.tsx
index 4f6a6ba..cd1fbe3 100644
--- a/apps/web/src/components/diagnose-result-view.tsx
+++ b/apps/web/src/components/diagnose-result-view.tsx
@@ -7,7 +7,9 @@ import {
   ShieldCheck,
   Pill,
   RefreshCcw,
+  FlaskConical,
 } from "lucide-react";
+import { RiskBadge } from "./risk-badge";
 
 type Props = {
   imageUrl: string;
@@ -36,6 +38,13 @@ export function DiagnosisResultView({
 }: Props) {
   const [openSection, setOpenSection] = useState<string>("detail");
 
+  const getRiskLevelKey = (level: string): "low" | "medium" | "high" => {
+    const normalized = level.toLowerCase();
+    if (normalized.includes("rendah")) return "low";
+    if (normalized.includes("tinggi")) return "high";
+    return "medium";
+  };
+
   const toggleSection = (section: string) => {
     setOpenSection(openSection === section ? "" : section);
   };
@@ -94,9 +103,7 @@ export function DiagnosisResultView({
             <span className="text-sm font-medium text-slate-600">
               Tingkat Keparahan:
             </span>
-            <span className="px-3 py-1 bg-[#D97706] text-white text-xs font-bold rounded-full">
-              {riskLevel.toUpperCase()}
-            </span>
+            <RiskBadge level={getRiskLevelKey(riskLevel ?? "medium")} />
           </div>
         </div>
       </div>
@@ -201,7 +208,7 @@ export function DiagnosisResultView({
               <ul className="space-y-2">
                 {medicines.map((med, i) => (
                   <li key={i} className="flex gap-2 items-start">
-                    <span className="text-purple-400 shrink-0 mt-0.5">⚕️</span>{" "}
+                    <FlaskConical className="w-4 h-4 text-purple-500 shrink-0 mt-0.5" />{" "}
                     <span>{med}</span>
                   </li>
                 ))}
diff --git a/apps/web/src/pages/diagnosis-detail-page.tsx b/apps/web/src/pages/diagnosis-detail-page.tsx
index 11d1c74..8303407 100644
--- a/apps/web/src/pages/diagnosis-detail-page.tsx
+++ b/apps/web/src/pages/diagnosis-detail-page.tsx
@@ -45,7 +45,7 @@ export function DiagnosisDetailPage() {
 
   const diagnosis = query.data;
 
-  // fallback Logic for image and medicine recommendations
+  // Fallback logic for image and medicine recommendations
   const finalImageUrl =
     diagnosis.imageUrl || "/src/assets/images/placeholder-image.png";
 
@@ -64,7 +64,7 @@ export function DiagnosisDetailPage() {
     <div className="space-y-6">
       <div className="flex items-center justify-between gap-4">
         <div>
-          <h1 className="text-xl md:text-3xl font-extrabold text-[#214B11]">
+          <h1 className="text-xl md:text-2xl font-bold text-[#214B11]">
             Analisis & Modul Edukasi
           </h1>
           <p className="text-sm font-medium text-slate-500 mt-1">