From 21ca1befcd0ffb64fe6c4d09efbd2750154a8907 Mon Sep 17 00:00:00 2001
From: seriouselly <supriyatinselly@gmail.com>
Date: Sun, 14 Jun 2026 23:59:59 +0700
Subject: [PATCH] refactor(diagnosis/catalog): improve UI consistency and fix
 data rendering

- Fix reference error in `DiagnosisResultView` by correctly mapping `riskLevel` prop.
- Integrate dynamic `RiskBadge` with automated severity-to-color mapping for both diagnosis and catalog views.
- Update icons in the medicine recommendation section of `catalog-page` and `DiagnosisResultView` for better visual consistency and intuition.
---
 .../src/components/diagnose-result-view.tsx   | 29 ++++---------------
 apps/web/src/pages/catalog-page.tsx           |  3 +-
 2 files changed, 6 insertions(+), 26 deletions(-)

diff --git a/apps/web/src/components/diagnose-result-view.tsx b/apps/web/src/components/diagnose-result-view.tsx
index cd1fbe3..88cc2f1 100644
--- a/apps/web/src/components/diagnose-result-view.tsx
+++ b/apps/web/src/components/diagnose-result-view.tsx
@@ -8,8 +8,9 @@ import {
   Pill,
   RefreshCcw,
   FlaskConical,
+  CheckCircle2,
 } from "lucide-react";
-import { RiskBadge } from "./risk-badge";
+import { RiskBadge } from "@/components/risk-badge";
 
 type Props = {
   imageUrl: string;
@@ -103,7 +104,7 @@ export function DiagnosisResultView({
             <span className="text-sm font-medium text-slate-600">
               Tingkat Keparahan:
             </span>
-            <RiskBadge level={getRiskLevelKey(riskLevel ?? "medium")} />
+            <RiskBadge level={getRiskLevelKey(riskLevel)} />
           </div>
         </div>
       </div>
@@ -193,7 +194,7 @@ export function DiagnosisResultView({
           >
             <div className="flex items-center gap-3 font-bold text-[#6B21A8]">
               <div className="w-8 h-8 rounded-lg bg-purple-100 flex items-center justify-center">
-                <Pill className="w-4 h-4 text-purple-700" />
+                <FlaskConical className="w-4 h-4 text-purple-700" />
               </div>
               Rekomendasi Obat
             </div>
@@ -208,7 +209,7 @@ export function DiagnosisResultView({
               <ul className="space-y-2">
                 {medicines.map((med, i) => (
                   <li key={i} className="flex gap-2 items-start">
-                    <FlaskConical className="w-4 h-4 text-purple-500 shrink-0 mt-0.5" />{" "}
+                    <Pill className="w-4 h-4 text-purple-500 shrink-0 mt-0.5" />{" "}
                     <span>{med}</span>
                   </li>
                 ))}
@@ -237,23 +238,3 @@ export function DiagnosisResultView({
     </div>
   );
 }
-
-function CheckCircle2(props: any) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <circle cx="12" cy="12" r="10" />
-      <path d="m9 12 2 2 4-4" />
-    </svg>
-  );
-}
diff --git a/apps/web/src/pages/catalog-page.tsx b/apps/web/src/pages/catalog-page.tsx
index 775a638..e77106b 100644
--- a/apps/web/src/pages/catalog-page.tsx
+++ b/apps/web/src/pages/catalog-page.tsx
@@ -8,7 +8,6 @@ import {
   Pill,
   ShieldCheck,
   Search,
-  Leaf,
   FlaskConical,
 } from "lucide-react";
 import { apiClient } from "@/lib/api-client";
@@ -105,7 +104,7 @@ export function CatalogPage() {
           <div className="text-center py-10 bg-white rounded-2xl border border-slate-200">
             <p className="text-slate-500">
               Tidak ada penyakit yang sesuai dengan pencarianmu.
-            </p>
+            </p>F
           </div>
         ) : (
           filteredDiseases.map((disease) => {