Merge pull request #34 from ATLAS-PJK-GM007/selly/frontend

Selly/frontend

apps/web/src/components/diagnose-result-view.tsx

@@ -1,7 +1,16 @@
 import { useState } from "react";
-import { ChevronDown, ChevronUp, AlertTriangle, BookOpen, ShieldCheck, Pill, RefreshCcw } from "lucide-react";
+import {
+  ChevronDown,
+  ChevronUp,
+  AlertTriangle,
+  BookOpen,
+  ShieldCheck,
+  Pill,
+  RefreshCcw,
+  FlaskConical,
+} from "lucide-react";
+import { RiskBadge } from "./risk-badge";
 
-// Spesifikasi data yang dibutuhkan oleh cetakan ini
 type Props = {
   imageUrl: string;
   confidence: number; // contoh: 0.95
@@ -12,7 +21,7 @@ type Props = {
   symptoms: string[];
   preventions: string[];
   medicines: string[];
-  onRescan?: () => void; // Tombol opsional untuk Scan Ulang
+  onRescan?: () => void;
 };
 
 export function DiagnosisResultView({
@@ -27,9 +36,15 @@ export function DiagnosisResultView({
   medicines,
   onRescan,
 }: Props) {
-  // Ingatan untuk laci (accordion) sebelah kanan
   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);
   };
@@ -38,65 +53,67 @@ export function DiagnosisResultView({
 
   return (
     <div className="flex flex-col lg:flex-row gap-6 bg-[#FAFAF8] p-4 md:p-6 rounded-3xl">
-      
+      {/* Image Area & Result */}
-      {/* KIRI: Area Gambar & Hasil Deteksi ML */}
       <div className="w-full lg:w-1/3 flex flex-col gap-4">
-        {/* Gambar Daun */}
         <div className="bg-white p-3 rounded-2xl border border-slate-200 shadow-sm">
-          <img 
+          <img
-            src={imageUrl} 
+            src={imageUrl}
-            alt="Daun yang dianalisis" 
+            alt="Daun yang dianalisis"
             className="w-full h-48 md:h-64 object-cover rounded-xl"
           />
           <div className="mt-3 flex items-center gap-2 text-slate-500 text-sm px-1">
-            <span className="w-4 h-4 bg-slate-200 rounded flex items-center justify-center text-[10px]">📷</span>
+            <span className="w-4 h-4 bg-slate-200 rounded flex items-center justify-center text-[10px]">
+              📷
+            </span>
             Gambar yang dianalisis
           </div>
         </div>
 
-        {/* Kartu Hasil Deteksi ML */}
+        {/* Result Card */}
         <div className="bg-[#FCF9EE] border border-[#F2E5C5] p-5 rounded-2xl shadow-sm relative overflow-hidden">
           <div className="flex items-center gap-2 text-amber-700 font-semibold text-sm mb-4">
             <AlertTriangle className="w-4 h-4" />
             HASIL DETEKSI ML
           </div>
-          
+
-          <h2 className="text-2xl font-extrabold text-[#D97706]">{diseaseName}</h2>
+          <h2 className="text-2xl font-extrabold text-[#D97706]">
+            {diseaseName}
+          </h2>
           <p className="text-slate-500 italic text-sm mb-6">{scientificName}</p>
 
-          {/* Bar Tingkat Keyakinan AI */}
+          {/* Confidence Bar */}
           <div className="space-y-2 mb-4">
             <div className="flex justify-between text-sm font-bold text-slate-700">
               <span>Tingkat Keyakinan AI</span>
               <span className="text-emerald-600">{confidencePercent}%</span>
             </div>
             <div className="w-full bg-slate-200 rounded-full h-2.5 overflow-hidden">
-              <div 
+              <div
-                className="bg-emerald-500 h-2.5 rounded-full transition-all duration-1000" 
+                className="bg-emerald-500 h-2.5 rounded-full transition-all duration-1000"
                 style={{ width: `${confidencePercent}%` }}
               ></div>
             </div>
             <p className="text-[11px] text-emerald-600 flex items-center gap-1 font-medium">
-              <CheckCircle2 className="w-3 h-3" /> Di atas ambang batas minimum (75%)
+              <CheckCircle2 className="w-3 h-3" /> Di atas ambang batas minimum
+              (75%)
             </p>
           </div>
 
           <div className="flex items-center gap-3 pt-4 border-t border-amber-200/50">
-            <span className="text-sm font-medium text-slate-600">Tingkat Keparahan:</span>
+            <span className="text-sm font-medium text-slate-600">
-            <span className="px-3 py-1 bg-[#D97706] text-white text-xs font-bold rounded-full">
+              Tingkat Keparahan:
-              {riskLevel.toUpperCase()}
             </span>
+            <RiskBadge level={getRiskLevelKey(riskLevel ?? "medium")} />
           </div>
         </div>
       </div>
 
-      {/* KANAN: Area Edukasi (Accordion) & Referensi */}
+      {/* Education & References */}
       <div className="w-full lg:w-2/3 flex flex-col gap-4">
-        
+        {/* Rescan Button */}
-        {/* Tombol Header (Jika ada fungsi onRescan) */}
         {onRescan && (
           <div className="flex justify-end mb-2">
-            <button 
+            <button
               onClick={onRescan}
               className="flex items-center gap-2 px-4 py-2 bg-white border border-[#214B11] text-[#214B11] rounded-full text-sm font-bold hover:bg-[#214B11] hover:text-white transition-all shadow-sm"
             >
@@ -105,9 +122,9 @@ export function DiagnosisResultView({
           </div>
         )}
 
-        {/* Laci 1: Detail Penyakit */}
+        {/* Detail Section */}
         <div className="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm">
-          <div 
+          <div
             onClick={() => toggleSection("detail")}
             className="flex items-center justify-between p-4 cursor-pointer hover:bg-slate-50"
           >
@@ -117,22 +134,28 @@ export function DiagnosisResultView({
               </div>
               Detail Penyakit
             </div>
-            {openSection === "detail" ? <ChevronUp className="w-5 h-5 text-slate-400" /> : <ChevronDown className="w-5 h-5 text-slate-400" />}
+            {openSection === "detail" ? (
+              <ChevronUp className="w-5 h-5 text-slate-400" />
+            ) : (
+              <ChevronDown className="w-5 h-5 text-slate-400" />
+            )}
           </div>
           {openSection === "detail" && (
             <div className="p-4 pt-0 border-t border-slate-100 text-sm text-slate-600 leading-relaxed">
               <p className="mb-4">{description}</p>
               <h5 className="font-bold text-[#214B11] mb-2">Gejala Umum:</h5>
               <ul className="space-y-1 pl-4 list-disc marker:text-emerald-500">
-                {symptoms.map((sym, i) => <li key={i}>{sym}</li>)}
+                {symptoms.map((sym, i) => (
+                  <li key={i}>{sym}</li>
+                ))}
               </ul>
             </div>
           )}
         </div>
 
-        {/* Laci 2: Panduan Pencegahan */}
+        {/* Prevention Section */}
         <div className="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm">
-          <div 
+          <div
             onClick={() => toggleSection("cegah")}
             className="flex items-center justify-between p-4 cursor-pointer hover:bg-slate-50"
           >
@@ -142,14 +165,19 @@ export function DiagnosisResultView({
               </div>
               Panduan Pencegahan
             </div>
-            {openSection === "cegah" ? <ChevronUp className="w-5 h-5 text-slate-400" /> : <ChevronDown className="w-5 h-5 text-slate-400" />}
+            {openSection === "cegah" ? (
+              <ChevronUp className="w-5 h-5 text-slate-400" />
+            ) : (
+              <ChevronDown className="w-5 h-5 text-slate-400" />
+            )}
           </div>
           {openSection === "cegah" && (
             <div className="p-4 pt-0 border-t border-slate-100 text-sm text-slate-600">
               <ul className="space-y-2">
                 {preventions.map((prev, i) => (
                   <li key={i} className="flex gap-2 items-start">
-                    <CheckCircle2 className="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" /> <span>{prev}</span>
+                    <CheckCircle2 className="w-4 h-4 text-emerald-500 shrink-0 mt-0.5" />{" "}
+                    <span>{prev}</span>
                   </li>
                 ))}
               </ul>
@@ -157,9 +185,9 @@ export function DiagnosisResultView({
           )}
         </div>
 
-        {/* Laci 3: Rekomendasi Obat */}
+        {/* Medicine Section */}
         <div className="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm">
-          <div 
+          <div
             onClick={() => toggleSection("obat")}
             className="flex items-center justify-between p-4 cursor-pointer hover:bg-slate-50"
           >
@@ -169,14 +197,19 @@ export function DiagnosisResultView({
               </div>
               Rekomendasi Obat
             </div>
-            {openSection === "obat" ? <ChevronUp className="w-5 h-5 text-slate-400" /> : <ChevronDown className="w-5 h-5 text-slate-400" />}
+            {openSection === "obat" ? (
+              <ChevronUp className="w-5 h-5 text-slate-400" />
+            ) : (
+              <ChevronDown className="w-5 h-5 text-slate-400" />
+            )}
           </div>
           {openSection === "obat" && (
             <div className="p-4 pt-0 border-t border-slate-100 text-sm text-slate-600">
-               <ul className="space-y-2">
+              <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> <span>{med}</span>
+                    <FlaskConical className="w-4 h-4 text-purple-500 shrink-0 mt-0.5" />{" "}
+                    <span>{med}</span>
                   </li>
                 ))}
               </ul>
@@ -184,22 +217,43 @@ export function DiagnosisResultView({
           )}
         </div>
 
-        {/* Kotak Disclaimer Penting */}
+        {/* Disclaimer */}
         <div className="bg-[#FFFBEB] border border-[#FDE68A] rounded-2xl p-4 mt-2">
           <div className="flex items-center gap-2 text-amber-600 font-bold mb-2">
             <AlertTriangle className="w-5 h-5" /> Disclaimer Penting
           </div>
           <p className="text-[13px] text-amber-900 leading-relaxed">
-            ZeaVis Edu adalah <strong>alat bantu edukasi awal</strong>, bukan pengganti diagnosis profesional. Hasil ini tidak dapat dijadikan dasar keputusan agronomis tanpa konfirmasi dari <strong>ahli pertanian atau Petugas Pengamat Organisme Pengganggu Tanaman (POPT)</strong> yang berwenang.
+            ZeaVis Edu adalah <strong>alat bantu edukasi awal</strong>, bukan
+            pengganti diagnosis profesional. Hasil ini tidak dapat dijadikan
+            dasar keputusan agronomis tanpa konfirmasi dari{" "}
+            <strong>
+              ahli pertanian atau Petugas Pengamat Organisme Pengganggu Tanaman
+              (POPT)
+            </strong>{" "}
+            yang berwenang.
           </p>
         </div>
-
       </div>
     </div>
   );
 }
 
-// Ikon bantuan untuk persentase
 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>
+  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>
+  );
+}

apps/web/src/components/layout/main-layout.tsx

@@ -19,13 +19,7 @@ export function MainLayout({ children }: Props) {
       <Sidebar />
 
       {/* Main Content */}
-      <div className="flex-1 flex flex-col w-full h-screen overflow-hidden"
+      <div className="flex-1 flex flex-col w-full h-screen overflow-hidden">
-        onClick={() => {
-          if (isSidebarOpen) {
-            setIsSidebarOpen(false);
-          }
-        }}
-      >
         {/* Header Mobile */}
         <div className="md:hidden flex items-center justify-between px-5 h-20 bg-[#306D29] text-white shrink-0 shadow-sm z-20">
           <div className="flex items-center gap-3 font-semibold">

apps/web/src/components/layout/sidebar.tsx

@@ -3,14 +3,14 @@ import { Link, useLocation } from "react-router-dom";
 import {
   Leaf,
   LogOut,
-  Menu,
+  ChevronsLeft,
-  ChevronLeft,
   LayoutDashboard,
   Scan,
   Activity,
   BookOpen,
   UserCheck,
   ChartBar,
+  ChevronsRight,
 } from "lucide-react";
 import { MobileNav } from "./mobile-nav";
 import { useAuthStore } from "@/store/auth-store";
@@ -81,6 +81,7 @@ export function Sidebar() {
           </div>
         </div>
 
+        {/* Toggle Button */}
         <button
           onClick={() => setIsSidebarOpen(!isSidebarOpen)}
           className={`rounded-xl transition-colors flex items-center justify-center shrink-0 ${
@@ -91,9 +92,9 @@ export function Sidebar() {
           title={isSidebarOpen ? "Sembunyikan Menu" : "Buka Menu"}
         >
           {isSidebarOpen ? (
-            <ChevronLeft className="w-5 h-5" />
+            <ChevronsLeft className="w-7 h-7" />
           ) : (
-            <Menu className="w-6 h-6" />
+            <ChevronsRight className="w-7 h-7" />
           )}
         </button>
       </div>
@@ -103,7 +104,6 @@ export function Sidebar() {
         className={`flex-1 overflow-y-auto py-6 flex flex-col gap-3 ${isSidebarOpen ? "px-5" : "px-0 items-center"}`}
       >
         {filteredNavItems.map((item) => {
-          // Skip expert-only items for non-expert users
           if (item.expertOnly && !isExpert) {
             return null;
           }
@@ -116,7 +116,6 @@ export function Sidebar() {
               key={item.path}
               to={item.path}
               title={item.label}
-              onClick={() => setIsSidebarOpen(!isSidebarOpen)}
               className={`flex items-center rounded-full font-medium transition-all ${
                 isSidebarOpen
                   ? "px-4 py-3 gap-3 text-[16px] w-full"
@@ -160,4 +159,4 @@ export function Sidebar() {
       />
     </aside>
   );
-}
+}

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]">
+          <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">
-            Hasil deteksi AI dan panduan edukasi berdasarkan gambar yang
+            Hasil deteksi AI dan panduan edukasi
-            diunggah
           </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
+          keyakinan (confidence) di bawah standar minimum.
-          ulasan pakar.
         </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>

apps/web/src/pages/scan-page.tsx

@@ -18,12 +18,15 @@ import { Modal } from "@/components/ui/modal";
 import type { DiagnosisRecord } from "@zeavis/shared";
 import { apiClient } from "@/lib/api-client";
 import { trackScan, trackDiagnosisResult } from "@/lib/telemetry";
-import { DiagnosisResultView } from "../components/diagnose-result-view"; 
+import { DiagnosisResultView } from "../components/diagnose-result-view";
 
 export function ScanPage() {
   const [fileName, setFileName] = useState<string | null>(null);
   const [previewUrl, setPreviewUrl] = useState<string | null>(null);
-  const [imageDimensions, setImageDimensions] = useState<{ width: number; height: number } | null>(null);
+  const [imageDimensions, setImageDimensions] = useState<{
+    width: number;
+    height: number;
+  } | null>(null);
   const inputRef = useRef<HTMLInputElement | null>(null);
   const imageRef = useRef<HTMLImageElement | null>(null);
   const navigate = useNavigate();
@@ -36,6 +39,8 @@ export function ScanPage() {
       queryClient.invalidateQueries({ queryKey: ["diagnoses"] });
       setDiagnosisPreview(diagnosis);
       setPreviewOpen(true);
+      setFileName(null);
+      setPreviewUrl(null);
       if (inputRef.current) inputRef.current.value = "";
     },
     onError: () => {
@@ -68,7 +73,8 @@ export function ScanPage() {
   };
 
   const [previewOpen, setPreviewOpen] = useState(false);
-  const [diagnosisPreview, setDiagnosisPreview] = useState<DiagnosisRecord | null>(null);
+  const [diagnosisPreview, setDiagnosisPreview] =
+    useState<DiagnosisRecord | null>(null);
 
   const diagnosesQuery = useQuery({
     queryKey: ["diagnoses"],
@@ -83,7 +89,8 @@ export function ScanPage() {
         <div>
           <h1 className="text-2xl font-bold text-emerald-800">Scan Tanaman</h1>
           <p className="text-gray-500 mt-1 text-md">
-            Unggah foto daun jagung untuk dianalisis oleh sistem AI kami secara real-time.
+            Unggah foto daun jagung untuk dianalisis oleh sistem AI kami secara
+            real-time.
           </p>
         </div>
         <Button asChild variant="outline">
@@ -109,8 +116,12 @@ export function ScanPage() {
                     onClick={() => inputRef.current?.click()}
                   >
                     <Upload className="mx-auto text-green-500 mb-3" size={48} />
-                    <h3 className="font-semibold text-base text-gray-800 mb-1">Seret & Lepas Foto Daun</h3>
+                    <h3 className="font-semibold text-base text-gray-800 mb-1">
-                    <p className="text-xs text-gray-500 mb-3">atau klik untuk memilih file berkas dari perangkat Anda</p>
+                      Seret & Lepas Foto Daun
+                    </h3>
+                    <p className="text-xs text-gray-500 mb-3">
+                      atau klik untuk memilih file berkas dari perangkat Anda
+                    </p>
                     <div className="flex flex-wrap gap-2 justify-center">
                       <div className="bg-green-100 text-green-700 px-3 py-1 rounded-full inline-flex items-center gap-1 text-xs font-medium">
                         <Check size={14} /> PNG, JPG, JPEG, WEBP
@@ -138,7 +149,10 @@ export function ScanPage() {
                       className="w-full max-h-80 object-contain"
                       onLoad={(e) => {
                         const img = e.currentTarget;
-                        setImageDimensions({ width: img.naturalWidth, height: img.naturalHeight });
+                        setImageDimensions({
+                          width: img.naturalWidth,
+                          height: img.naturalHeight,
+                        });
                       }}
                     />
                     {imageDimensions && (
@@ -156,7 +170,9 @@ export function ScanPage() {
                           <div className="absolute bottom-0 left-0 w-6 h-6 border-b-2 border-l-2 border-lime-300" />
                           <div className="absolute bottom-0 right-0 w-6 h-6 border-b-2 border-r-2 border-lime-300" />
                           <div className="text-white text-center flex flex-col gap-1">
-                            <span className="text-xs font-semibold tracking-widest">AREA SCAN</span>
+                            <span className="text-xs font-semibold tracking-widest">
+                              AREA SCAN
+                            </span>
                             <span className="text-[10px] text-lime-200 font-medium">
                               {imageDimensions.width} × {imageDimensions.height}
                             </span>
@@ -218,7 +234,9 @@ export function ScanPage() {
                 <div className="mt-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">
                   <p className="font-medium">Upload gagal</p>
                   <p className="mt-1">
-                    {mutation.error instanceof Error ? mutation.error.message : "Terjadi kesalahan saat memproses gambar"}
+                    {mutation.error instanceof Error
+                      ? mutation.error.message
+                      : "Terjadi kesalahan saat memproses gambar"}
                   </p>
                 </div>
               )}
@@ -234,32 +252,42 @@ export function ScanPage() {
                 <div className="inline-flex h-9 w-9 items-center justify-center rounded-full">
                   <CircleAlert className="text-emerald-600" size={20} />
                 </div>
-                <h2 className="font-bold text-emerald-800">Panduan Pengambilan Foto</h2>
+                <h2 className="font-bold text-emerald-800">
+                  Panduan Pengambilan Foto
+                </h2>
               </div>
               <ul className="space-y-3">
                 <li className="flex items-center gap-3">
                   <div className="h-9 w-9 rounded bg-[#ECF4E8] flex items-center justify-center shrink-0">
                     <ZoomIn className="text-emerald-600" size={20} />
                   </div>
-                  <div className="text-sm text-slate-700">Jarak 15–30 cm dari daun</div>
+                  <div className="text-sm text-slate-700">
+                    Jarak 15–30 cm dari daun
+                  </div>
                 </li>
                 <li className="flex items-center gap-3">
                   <div className="h-9 w-9 rounded bg-[#ECF4E8] flex items-center justify-center shrink-0">
                     <Sun className="text-emerald-600" size={20} />
                   </div>
-                  <div className="text-sm text-slate-700">Pencahayaan cukup merata</div>
+                  <div className="text-sm text-slate-700">
+                    Pencahayaan cukup merata
+                  </div>
                 </li>
                 <li className="flex items-center gap-3">
                   <div className="h-9 w-9 rounded bg-[#ECF4E8] flex items-center justify-center shrink-0">
                     <AlignCenter className="text-emerald-600" size={20} />
                   </div>
-                  <div className="text-sm text-slate-700">Posisi daun mengisi bingkai dengan jelas</div>
+                  <div className="text-sm text-slate-700">
+                    Posisi daun mengisi bingkai dengan jelas
+                  </div>
                 </li>
                 <li className="flex items-center gap-3">
                   <div className="h-9 w-9 rounded bg-[#ECF4E8] flex items-center justify-center shrink-0">
                     <Camera className="text-emerald-600" size={20} />
                   </div>
-                  <div className="text-sm text-slate-700">Hindari bayangan, pantulan, & blur</div>
+                  <div className="text-sm text-slate-700">
+                    Hindari bayangan, pantulan, & blur
+                  </div>
                 </li>
               </ul>
             </CardContent>
@@ -267,7 +295,9 @@ export function ScanPage() {
 
           <Card className="w-full h-max">
             <CardContent className="px-6 py-4">
-              <h3 className="font-bold text-emerald-800 flex items-center gap-3 mb-4">Persyaratan Berkas</h3>
+              <h3 className="font-bold text-emerald-800 flex items-center gap-3 mb-4">
+                Persyaratan Berkas
+              </h3>
               <div className="flex flex-col gap-2">
                 {[
                   { label: "Format", value: "PNG, JPG, JPEG, WEBP" },
@@ -275,9 +305,17 @@ export function ScanPage() {
                   { label: "Resolusi Min.", value: "512 × 512 px" },
                   { label: "Objek Foto", value: "Daun jagung tunggal" },
                 ].map((r, i) => (
-                  <div key={i} className="flex items-center justify-between py-1.5" style={{ borderBottom: i < 3 ? "1px solid #f0f0f0" : "none" }}>
+                  <div
+                    key={i}
+                    className="flex items-center justify-between py-1.5"
+                    style={{
+                      borderBottom: i < 3 ? "1px solid #f0f0f0" : "none",
+                    }}
+                  >
                     <span className="text-gray-400 text-xs">{r.label}</span>
-                    <span className="text-sm font-medium text-gray-700">{r.value}</span>
+                    <span className="text-sm font-medium text-gray-700">
+                      {r.value}
+                    </span>
                   </div>
                 ))}
               </div>
@@ -319,58 +357,78 @@ export function ScanPage() {
       >
         {diagnosisPreview ? (
           <div className="space-y-6 p-1">
-            
             {/* Warning if expert review is needed */}
             {diagnosisPreview.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.
+                <strong>Catatan:</strong> Hasil ini masih sementara karena
+                tingkat keyakinan (confidence) di bawah standar minimum.
               </div>
             )}
 
             {/* Message if AI fails to process */}
             {diagnosisPreview.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> {diagnosisPreview.failureReason}
+                <strong>Gagal Memproses:</strong>{" "}
+                {diagnosisPreview.failureReason}
               </div>
             )}
 
-            <DiagnosisResultView 
+            <DiagnosisResultView
-              imageUrl={previewUrl || diagnosisPreview.imageUrl || "https://placehold.co/600x400?text=Foto+Daun"}
+              imageUrl={
+                previewUrl ||
+                diagnosisPreview.imageUrl ||
+                "https://placehold.co/600x400?text=Foto+Daun"
+              }
               confidence={diagnosisPreview.confidence ?? 0}
-              diseaseName={diagnosisPreview.disease?.commonName ?? "Tidak Diketahui"}
+              diseaseName={
+                diagnosisPreview.disease?.commonName ?? "Tidak Diketahui"
+              }
               scientificName={diagnosisPreview.disease?.label ?? ""}
               riskLevel={diagnosisPreview.disease?.riskLevel ?? "Sedang"}
-              description={diagnosisPreview.disease?.description ?? diagnosisPreview.disease?.summary ?? "Deskripsi tidak tersedia."}
+              description={
+                diagnosisPreview.disease?.description ??
+                diagnosisPreview.disease?.summary ??
+                "Deskripsi tidak tersedia."
+              }
               symptoms={diagnosisPreview.disease?.symptoms ?? []}
               preventions={diagnosisPreview.disease?.recommendations ?? []}
-              medicines={(diagnosisPreview.disease as any)?.medicineRecommendations ?? []}
+              medicines={
+                (diagnosisPreview.disease as any)?.medicineRecommendations ?? []
+              }
             />
 
             {/* All Model Predictions */}
-            {diagnosisPreview.predictions && diagnosisPreview.predictions.length > 0 && (
+            {diagnosisPreview.predictions &&
-              <div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-4 md:p-6 mt-4">
+              diagnosisPreview.predictions.length > 0 && (
-                <h4 className="font-bold text-[#214B11] mb-1">Semua Prediksi Model</h4>
+                <div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-4 md:p-6 mt-4">
-                <p className="text-xs text-slate-500 mb-4">Tebakan alternatif lain dari sistem AI ZeaVis</p>
+                  <h4 className="font-bold text-[#214B11] mb-1">
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                    Semua Prediksi Model
-                  {diagnosisPreview.predictions
+                  </h4>
-                    .sort((a, b) => a.rank - b.rank)
+                  <p className="text-xs text-slate-500 mb-4">
-                    .map((pred) => (
+                    Tebakan alternatif lain dari sistem AI ZeaVis
-                      <div
+                  </p>
-                        key={pred.id}
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                        className="flex items-center justify-between rounded-xl border border-slate-100 bg-slate-50 p-3 text-sm"
+                    {diagnosisPreview.predictions
-                      >
+                      .sort((a, b) => a.rank - b.rank)
-                        <span className="text-slate-600 font-medium">{pred.modelLabel}</span>
+                      .map((pred) => (
-                        <span className="font-bold text-slate-700">
+                        <div
-                          {(pred.confidence * 100).toFixed(1)}%
+                          key={pred.id}
-                        </span>
+                          className="flex items-center justify-between rounded-xl border border-slate-100 bg-slate-50 p-3 text-sm"
-                      </div>
+                        >
-                    ))}
+                          <span className="text-slate-600 font-medium">
+                            {pred.modelLabel}
+                          </span>
+                          <span className="font-bold text-slate-700">
+                            {(pred.confidence * 100).toFixed(1)}%
+                          </span>
+                        </div>
+                      ))}
+                  </div>
                 </div>
-              </div>
+              )}
-            )}
           </div>
         ) : null}
       </Modal>
     </div>
   );
-}
+}