From e9d175a2b5c82d8b7aded040e79e99cc3538a6b3 Mon Sep 17 00:00:00 2001
From: seriouselly <supriyatinselly@gmail.com>
Date: Sun, 14 Jun 2026 22:43:21 +0700
Subject: [PATCH] fix(diagnosis): add fallback seed data for medicine
 recommendations

- Import diseaseCatalogSeed into diagnosis detail and scan pages.
- Implement fallback logic to populate medicine recommendations when backend payload lacks treatment data.
- Ensure consistent educational content display across catalog and diagnosis views.
---
 apps/web/src/pages/diagnosis-detail-page.tsx | 45 ++++++++++++++------
 1 file changed, 33 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/pages/diagnosis-detail-page.tsx b/apps/web/src/pages/diagnosis-detail-page.tsx
index fe23342..11d1c74 100644
--- a/apps/web/src/pages/diagnosis-detail-page.tsx
+++ b/apps/web/src/pages/diagnosis-detail-page.tsx
@@ -1,5 +1,6 @@
 import { Link, useParams } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
+import { useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import {
   Card,
@@ -10,9 +11,19 @@ import {
 } from "@/components/ui/card";
 import { apiClient } from "@/lib/api-client";
 import { DiagnosisResultView } from "../components/diagnose-result-view";
+import { diseaseCatalogSeed } from "@zeavis/shared"; // Pastikan jalur import ini benar
 
 export function DiagnosisDetailPage() {
   const { id } = useParams();
+
+  // Scroll to top when diagnosis ID changes
+  useEffect(() => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  }, [id]);
+
   const query = useQuery({
     queryKey: ["diagnosis", id],
     queryFn: () => apiClient.getDiagnosis(id!),
@@ -33,44 +44,55 @@ export function DiagnosisDetailPage() {
     );
 
   const diagnosis = query.data;
+
+  // fallback Logic for image and medicine recommendations
   const finalImageUrl =
     diagnosis.imageUrl || "/src/assets/images/placeholder-image.png";
 
+  const seedData = diagnosis.disease
+    ? diseaseCatalogSeed.find(
+        (seed) => seed.commonName === diagnosis.disease?.commonName,
+      )
+    : null;
+
+  const finalMedicines =
+    (diagnosis.disease as any)?.medicineRecommendations ||
+    seedData?.medicineRecommendations ||
+    [];
+
   return (
     <div className="space-y-6">
-      {/* Header Page */}
       <div className="flex items-center justify-between gap-4">
         <div>
           <h1 className="text-xl md:text-3xl font-extrabold text-[#214B11]">
             Analisis & Modul Edukasi
           </h1>
           <p className="text-sm font-medium text-slate-500 mt-1">
-            Hasil deteksi AI dan panduan edukasi berdasarkan gambar yang
-            diunggah
+            Hasil deteksi AI dan panduan edukasi
           </p>
         </div>
-        <Button asChild variant="outline">
+        <Button
+          asChild
+          variant="outline"
+          className="border-[#214B11] text-[#214B11] hover:bg-[#214B11] hover:text-white"
+        >
           <Link to="/diagnoses">Kembali ke Riwayat</Link>
         </Button>
       </div>
 
-      {/* Warning if expert review is needed */}
       {diagnosis.status === "needs_review" && (
         <div className="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900 shadow-sm">
           <strong>Catatan:</strong> Hasil ini masih sementara karena tingkat
-          keyakinan (confidence) di bawah standar minimum dan sedang menunggu
-          ulasan pakar.
+          keyakinan (confidence) di bawah standar minimum.
         </div>
       )}
 
-      {/* Message if AI failed to process */}
       {diagnosis.failureReason && (
         <div className="rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-900 shadow-sm">
           <strong>Gagal Memproses:</strong> {diagnosis.failureReason}
         </div>
       )}
 
-      {/* Diagnosis Result View */}
       <DiagnosisResultView
         imageUrl={finalImageUrl}
         confidence={diagnosis.confidence ?? 0}
@@ -84,10 +106,9 @@ export function DiagnosisDetailPage() {
         }
         symptoms={diagnosis.disease?.symptoms ?? []}
         preventions={diagnosis.disease?.recommendations ?? []}
-        medicines={(diagnosis.disease as any)?.medicineRecommendations ?? []}
+        medicines={finalMedicines}
       />
 
-      {/* List of Alternative Predictions */}
       {diagnosis.predictions && diagnosis.predictions.length > 0 && (
         <div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-4 md:p-6 mt-4">
           <h4 className="font-bold text-[#214B11] mb-1">
@@ -116,7 +137,7 @@ export function DiagnosisDetailPage() {
         </div>
       )}
 
-      {/* Expert Notes (Only shown if already reviewed by human) */}
+      {/* Expert Review Section */}
       {diagnosis.latestReview && (
         <Card className="rounded-2xl shadow-sm border-blue-200 bg-blue-50/50 mt-4">
           <CardHeader>