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

@@ -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">
+            <RiskBadge level={getRiskLevelKey(riskLevel ?? "medium")} />
-              {riskLevel.toUpperCase()}
-            </span>
           </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>
                 ))}

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">