fix(scan): resolve double scrollbar and modal size type errors

- Remove nested overflow and fixed height classes (`max-h-[75vh]`, `overflow-y-auto`) from the inner modal container to fix the double scrollbar UI glitch.
- Adjust the Modal `size` property to a supported type to resolve TypeScript compilation errors.
- Ensure a cleaner, more seamless scrolling experience for the diagnosis result pop-up.

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

@@ -0,0 +1,205 @@
+import { useState } from "react";
+import { ChevronDown, ChevronUp, AlertTriangle, BookOpen, ShieldCheck, Pill, RefreshCcw } from "lucide-react";
+
+// Spesifikasi data yang dibutuhkan oleh cetakan ini
+type Props = {
+  imageUrl: string;
+  confidence: number; // contoh: 0.95
+  diseaseName: string;
+  scientificName: string;
+  riskLevel: string;
+  description: string;
+  symptoms: string[];
+  preventions: string[];
+  medicines: string[];
+  onRescan?: () => void; // Tombol opsional untuk Scan Ulang
+};
+
+export function DiagnosisResultView({
+  imageUrl,
+  confidence,
+  diseaseName,
+  scientificName,
+  riskLevel,
+  description,
+  symptoms,
+  preventions,
+  medicines,
+  onRescan,
+}: Props) {
+  // Ingatan untuk laci (accordion) sebelah kanan
+  const [openSection, setOpenSection] = useState<string>("detail");
+
+  const toggleSection = (section: string) => {
+    setOpenSection(openSection === section ? "" : section);
+  };
+
+  const confidencePercent = Math.round(confidence * 100);
+
+  return (
+    <div className="flex flex-col lg:flex-row gap-6 bg-[#FAFAF8] p-4 md:p-6 rounded-3xl">
+      
+      {/* 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 
+            src={imageUrl} 
+            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>
+            Gambar yang dianalisis
+          </div>
+        </div>
+
+        {/* Kartu Hasil Deteksi ML */}
+        <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>
+          <p className="text-slate-500 italic text-sm mb-6">{scientificName}</p>
+
+          {/* Bar Tingkat Keyakinan AI */}
+          <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 
+                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%)
+            </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="px-3 py-1 bg-[#D97706] text-white text-xs font-bold rounded-full">
+              {riskLevel.toUpperCase()}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      {/* KANAN: Area Edukasi (Accordion) & Referensi */}
+      <div className="w-full lg:w-2/3 flex flex-col gap-4">
+        
+        {/* Tombol Header (Jika ada fungsi onRescan) */}
+        {onRescan && (
+          <div className="flex justify-end mb-2">
+            <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"
+            >
+              <RefreshCcw className="w-4 h-4" /> Scan Ulang
+            </button>
+          </div>
+        )}
+
+        {/* Laci 1: Detail Penyakit */}
+        <div className="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm">
+          <div 
+            onClick={() => toggleSection("detail")}
+            className="flex items-center justify-between p-4 cursor-pointer hover:bg-slate-50"
+          >
+            <div className="flex items-center gap-3 font-bold text-[#1E3A8A]">
+              <div className="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center">
+                <BookOpen className="w-4 h-4 text-blue-700" />
+              </div>
+              Detail Penyakit
+            </div>
+            {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>)}
+              </ul>
+            </div>
+          )}
+        </div>
+
+        {/* Laci 2: Panduan Pencegahan */}
+        <div className="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm">
+          <div 
+            onClick={() => toggleSection("cegah")}
+            className="flex items-center justify-between p-4 cursor-pointer hover:bg-slate-50"
+          >
+            <div className="flex items-center gap-3 font-bold text-[#1E40AF]">
+              <div className="w-8 h-8 rounded-lg bg-indigo-100 flex items-center justify-center">
+                <ShieldCheck className="w-4 h-4 text-indigo-700" />
+              </div>
+              Panduan Pencegahan
+            </div>
+            {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>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+
+        {/* Laci 3: Rekomendasi Obat */}
+        <div className="bg-white border border-slate-200 rounded-2xl overflow-hidden shadow-sm">
+          <div 
+            onClick={() => toggleSection("obat")}
+            className="flex items-center justify-between p-4 cursor-pointer hover:bg-slate-50"
+          >
+            <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" />
+              </div>
+              Rekomendasi Obat
+            </div>
+            {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">
+                {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>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+
+        {/* Kotak Disclaimer Penting */}
+        <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.
+          </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>
+}

apps/web/src/pages/diagnosis-detail-page.tsx

@@ -1,102 +1,139 @@
-import { Link, useParams } from 'react-router-dom';
-import { useQuery } from '@tanstack/react-query';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { DiagnosisStatusBadge } from '@/components/diagnosis-status-badge';
-import { RiskBadge } from '@/components/risk-badge';
-import { apiClient } from '@/lib/api-client';
+import { Link, useParams } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { apiClient } from "@/lib/api-client";
+import { DiagnosisResultView } from "../components/diagnose-result-view";
 
 export function DiagnosisDetailPage() {
   const { id } = useParams();
   const query = useQuery({
-    queryKey: ['diagnosis', id],
+    queryKey: ["diagnosis", id],
     queryFn: () => apiClient.getDiagnosis(id!),
     enabled: Boolean(id),
   });
 
-  if (query.isLoading) return <div className="p-8 text-center text-muted-foreground">Memuat diagnosis...</div>;
-  if (query.error || !query.data) return <div className="p-8 text-center text-red-600">Diagnosis tidak ditemukan</div>;
+  if (query.isLoading)
+    return (
+      <div className="p-8 text-center text-muted-foreground">
+        Memuat diagnosis...
+      </div>
+    );
+  if (query.error || !query.data)
+    return (
+      <div className="p-8 text-center text-red-600">
+        Diagnosis tidak ditemukan
+      </div>
+    );
 
   const diagnosis = query.data;
+  const finalImageUrl =
+    diagnosis.imageUrl || "/src/assets/images/placeholder-image.png";
 
   return (
     <div className="space-y-6">
+      {/* Header Page */}
       <div className="flex items-center justify-between gap-4">
-          <div>
-            <p className="text-sm font-medium text-primary">Detail Diagnosis</p>
-            <h1 className="text-xl md:text-3xl font-bold">{diagnosis.disease?.commonName ?? 'Diagnosis gagal'}</h1>
-          </div>
-          <Button asChild variant="outline"><Link to="/dashboard">Kembali</Link></Button>
+        <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
+          </p>
         </div>
+        <Button asChild variant="outline">
+          <Link to="/diagnoses">Kembali ke Riwayat</Link>
+        </Button>
+      </div>
 
-        <section className="grid gap-6 lg:grid-cols-2">
-          <Card>
-            <CardContent className="p-4">
-              <img src={diagnosis.imageUrl} alt="Daun jagung" className="w-full rounded-xl object-cover" />
-            </CardContent>
-          </Card>
+      {/* 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.
+        </div>
+      )}
 
-          <Card>
-            <CardHeader>
-              <div className="flex items-center justify-between gap-3">
-                <CardTitle>Hasil AI</CardTitle>
-                <DiagnosisStatusBadge status={diagnosis.status} />
-              </div>
-              <CardDescription>
-                {diagnosis.confidence === null ? 'Model gagal memproses gambar.' : `Confidence ${(diagnosis.confidence * 100).toFixed(1)}%`}
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              {diagnosis.status === 'needs_review' && (
-                <div className="rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">
-                  Hasil ini masih sementara karena confidence di bawah 70% dan sedang menunggu review pakar.
+      {/* 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}
+        diseaseName={diagnosis.disease?.commonName ?? "Tidak Diketahui"}
+        scientificName={diagnosis.disease?.label ?? ""}
+        riskLevel={diagnosis.disease?.riskLevel ?? "Sedang"}
+        description={
+          diagnosis.disease?.description ??
+          diagnosis.disease?.summary ??
+          "Deskripsi tidak tersedia."
+        }
+        symptoms={diagnosis.disease?.symptoms ?? []}
+        preventions={diagnosis.disease?.recommendations ?? []}
+        medicines={(diagnosis.disease as any)?.medicineRecommendations ?? []}
+      />
+
+      {/* 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">
+            Semua Prediksi Model
+          </h4>
+          <p className="text-xs text-slate-500 mb-4">
+            Tebakan alternatif lain dari sistem AI ZeaVis
+          </p>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            {diagnosis.predictions
+              .sort((a, b) => a.rank - b.rank)
+              .map((pred) => (
+                <div
+                  key={pred.id}
+                  className="flex items-center justify-between rounded-xl border border-slate-100 bg-slate-50 p-3 text-sm"
+                >
+                  <span className="text-slate-600 font-medium">
+                    {pred.modelLabel}
+                  </span>
+                  <span className="font-bold text-slate-700">
+                    {(pred.confidence * 100).toFixed(1)}%
+                  </span>
                 </div>
-              )}
-              {diagnosis.failureReason && <p className="text-sm text-red-600">{diagnosis.failureReason}</p>}
-              {diagnosis.disease && (
-                <div className="space-y-3">
-                  <div className="flex items-center gap-2">
-                    <h2 className="text-xl font-semibold">{diagnosis.disease.label}</h2>
-                    <RiskBadge level={diagnosis.disease.riskLevel} />
-                  </div>
-                  <p className="text-muted-foreground">{diagnosis.disease.summary}</p>
-                  <div>
-                    <h3 className="font-semibold">Rekomendasi</h3>
-                    <ul className="mt-2 list-disc space-y-1 pl-5 text-sm text-muted-foreground">
-                      {diagnosis.disease.recommendations.map((item) => <li key={item}>{item}</li>)}
-                    </ul>
-                  </div>
-                </div>
-              )}
-            </CardContent>
-          </Card>
-        </section>
+              ))}
+          </div>
+        </div>
+      )}
 
-        <Card>
+      {/* Expert Notes (Only shown if already reviewed by human) */}
+      {diagnosis.latestReview && (
+        <Card className="rounded-2xl shadow-sm border-blue-200 bg-blue-50/50 mt-4">
           <CardHeader>
-            <CardTitle>Top Predictions</CardTitle>
+            <CardTitle className="text-blue-800">
+              Catatan Pakar Agronomi
+            </CardTitle>
+            <CardDescription className="text-blue-600/70">
+              Ditinjau oleh: {diagnosis.latestReview.expert.name}
+            </CardDescription>
           </CardHeader>
-          <CardContent className="space-y-2">
-            {diagnosis.predictions.map((prediction) => (
-              <div key={prediction.id} className="flex items-center justify-between rounded-lg border p-3 text-sm">
-                <span>{prediction.rank}. {prediction.modelLabel}</span>
-                <span className="font-semibold">{(prediction.confidence * 100).toFixed(1)}%</span>
-              </div>
-            ))}
+          <CardContent>
+            <p className="text-sm text-slate-700 leading-relaxed bg-white p-4 rounded-xl border border-blue-100 shadow-sm">
+              "{diagnosis.latestReview.notes}"
+            </p>
           </CardContent>
         </Card>
-
-        {diagnosis.latestReview && (
-          <Card>
-            <CardHeader>
-              <CardTitle>Catatan Pakar</CardTitle>
-              <CardDescription>{diagnosis.latestReview.expert.name}</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <p className="text-sm text-muted-foreground">{diagnosis.latestReview.notes}</p>
-            </CardContent>
-          </Card>
-        )}
-      </div>
-    );
-  }
+      )}
+    </div>
+  );
+}

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

@@ -15,10 +15,10 @@ import {
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Modal } from "@/components/ui/modal";
-import { DiagnosisStatusBadge } from "@/components/diagnosis-status-badge";
 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"; 
 
 export function ScanPage() {
   const [fileName, setFileName] = useState<string | null>(null);
@@ -36,8 +36,6 @@ export function ScanPage() {
       queryClient.invalidateQueries({ queryKey: ["diagnoses"] });
       setDiagnosisPreview(diagnosis);
       setPreviewOpen(true);
-      setFileName(null);
-      setPreviewUrl(null);
       if (inputRef.current) inputRef.current.value = "";
     },
     onError: () => {
@@ -55,7 +53,6 @@ export function ScanPage() {
     const url = URL.createObjectURL(f);
     setPreviewUrl(url);
 
-    // Detect image dimensions
     const img = new Image();
     img.onload = () => {
       setImageDimensions({ width: img.width, height: img.height });
@@ -71,8 +68,7 @@ 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"],
@@ -82,12 +78,12 @@ export function ScanPage() {
 
   return (
     <div className="space-y-6">
+      {/* Main Header */}
       <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4">
         <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">
@@ -95,17 +91,17 @@ export function ScanPage() {
         </Button>
       </div>
 
+      {/* Main Content */}
       <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Left Column: Upload Area */}
         <div className="lg:col-span-2 space-y-4">
           <Card className="w-full lg:h-117 py-3">
             <CardContent className="px-6 py-4 h-full flex flex-col">
-              {/* Left Sidebar */}
               <div className="text-black flex items-center gap-2 mb-3 text-lg font-semibold">
                 <Camera className="text-green-500" size={25} />
                 Area Unggah Gambar
               </div>
 
-              {/* Upload area */}
               {!previewUrl ? (
                 <div className="space-y-3">
                   <div
@@ -113,31 +109,23 @@ 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>
-                    <p className="text-xs text-gray-500 mb-3">
-                      atau klik untuk memilih file berkas dari perangkat Anda
-                    </p>
+                    <h3 className="font-semibold text-base text-gray-800 mb-1">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
+                        <Check size={14} /> PNG, JPG, JPEG, WEBP
                       </div>
                       <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} />
-                        Maks. 5 MB
+                        <Check size={14} /> Maks. 5 MB
                       </div>
                     </div>
                   </div>
-
                   <button
                     type="button"
                     onClick={() => inputRef.current?.click()}
                     className="w-full bg-green-600 hover:bg-green-700 text-white font-medium py-2.5 px-4 rounded-lg transition-colors flex items-center justify-center gap-2"
                   >
-                    <Upload size={18} />
-                    Pilih Berkas
+                    <Upload size={18} /> Pilih Berkas
                   </button>
                 </div>
               ) : (
@@ -150,19 +138,12 @@ 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 });
                       }}
                     />
-                    {/* Scanner area detection overlay */}
                     {imageDimensions && (
                       <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
-                        {/* Outer dark overlay */}
                         <div className="absolute inset-0 bg-black/20" />
-
-                        {/* Scan area frame - responsive to image */}
                         <div
                           className="relative flex items-center justify-center"
                           style={{
@@ -170,13 +151,10 @@ export function ScanPage() {
                             height: `${Math.min(imageDimensions.height * 0.7, 320)}px`,
                           }}
                         >
-                          {/* Corner markers */}
                           <div className="absolute top-0 left-0 w-6 h-6 border-t-2 border-l-2 border-lime-300" />
                           <div className="absolute top-0 right-0 w-6 h-6 border-t-2 border-r-2 border-lime-300" />
                           <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" />
-
-                          {/* Center text */}
                           <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-[10px] text-lime-200 font-medium">
@@ -186,7 +164,6 @@ export function ScanPage() {
                         </div>
                       </div>
                     )}
-
                     <button
                       type="button"
                       className="absolute top-3 right-3 bg-black/60 text-white rounded-full p-1.5 hover:bg-black/80 transition-colors z-10"
@@ -214,8 +191,7 @@ export function ScanPage() {
                           if (inputRef.current) inputRef.current.value = "";
                         }}
                       >
-                        <ImageOff className="mr-2 h-4 w-4" />
-                        Ganti Foto
+                        <ImageOff className="mr-2 h-4 w-4" /> Ganti Foto
                       </Button>
                       <Button
                         onClick={handleUpload}
@@ -233,19 +209,16 @@ export function ScanPage() {
               <input
                 ref={inputRef}
                 type="file"
-                accept="image/png,image/jpeg"
+                accept="image/png,image/jpeg,image/webp"
                 className="hidden"
                 onChange={(e) => handleFile(e.target.files?.[0])}
               />
 
-              {/* Error state */}
               {mutation.isError && (
                 <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>
               )}
@@ -253,109 +226,58 @@ export function ScanPage() {
           </Card>
         </div>
 
-        {/* Right Sidebar */}
+        {/* Right Column: Guidelines */}
         <aside className="lg:col-span-1 flex flex-col gap-5">
-          {/* Card 1: Panduan Pengambilan Foto */}
           <Card className="w-full h-max">
             <CardContent className="px-6 py-4">
               <div className="flex items-center gap-3 mb-4">
                 <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 atau pantulan pada daun & blur pada gambar
-                  </div>
+                  <div className="text-sm text-slate-700">Hindari bayangan, pantulan, & blur</div>
                 </li>
               </ul>
-
-              <div className="mt-4">
-                <div className="rounded-lg overflow-hidden mt-4">
-                  <div className="relative h-36 overflow-hidden bg-[url('/src/assets/images/scan-guide-bg.webp')] bg-cover bg-center text-white md:h-44">
-                    <div className="absolute inset-0 bg-black/25" />
-                    <div className="absolute inset-0 bg-linear-to-b from-black/5 via-transparent to-black/35" />
-                    <div className="relative z-10 flex h-full flex-col items-center justify-center gap-5 text-center">
-                      <div className="relative flex h-full w-30 items-center justify-center mt-8">
-                        <span className="absolute left-0 top-0 h-4 w-4 border-l-2 border-t-2 border-l-lime-300 border-t-lime-300" />
-                        <span className="absolute right-0 top-0 h-4 w-4 border-r-2 border-t-2 border-r-lime-300 border-t-lime-300" />
-                        <span className="absolute bottom-0 left-0 h-4 w-4 border-b-2 border-l-2 border-b-lime-300 border-l-lime-300" />
-                        <span className="absolute bottom-0 right-0 h-4 w-4 border-b-2 border-r-2 border-b-lime-300 border-r-lime-300" />
-                        <span className="relative z-10 text-xs font-semibold tracking-[0.28em] text-white">
-                          AREA SCAN
-                        </span>
-                      </div>
-                      <div className="text-[11px] font-medium text-lime-100 bg-black/30 w-full py-1 rounded">
-                        Posisi ideal: daun memenuhi bingkai
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
             </CardContent>
           </Card>
 
-          {/* Card 2: Persyaratan Berkas */}
           <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" },
+                  { label: "Format", value: "PNG, JPG, JPEG, WEBP" },
                   { label: "Ukuran Maks.", value: "5 MB" },
                   { 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",
-                    }}
-                  >
-                    <span
-                      className="text-gray-400"
-                      style={{ fontSize: "0.75rem" }}
-                    >
-                      {r.label}
-                    </span>
-                    <span className="text-sm font-medium text-gray-700">
-                      {r.value}
-                    </span>
+                  <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>
                   </div>
                 ))}
               </div>
@@ -364,18 +286,18 @@ export function ScanPage() {
         </aside>
       </div>
 
-      {/* Result Modal */}
+      {/* Modal Preview Diagnosis */}
       <Modal
         open={previewOpen}
         onClose={() => {
           setPreviewOpen(false);
           setDiagnosisPreview(null);
         }}
-        title={diagnosisPreview?.disease?.commonName ?? "Hasil Diagnosis"}
-        size="md"
+        title="Hasil Analisis AI"
+        size="lg"
         footer={
           diagnosisPreview && (
-            <div className="flex items-center justify-end gap-3">
+            <div className="flex items-center justify-end gap-3 w-full">
               <Button
                 variant="outline"
                 onClick={() => {
@@ -383,59 +305,62 @@ export function ScanPage() {
                   setDiagnosisPreview(null);
                 }}
               >
-                Tutup
+                Tutup Jendela
               </Button>
               <Button
                 onClick={() => navigate(`/diagnoses/${diagnosisPreview.id}`)}
-                className="bg-green-600 hover:bg-green-700"
+                className="bg-[#214B11] hover:bg-[#1a3a0d] text-white"
               >
-                Lihat Detail Lengkap
+                Masuk ke Halaman Riwayat
               </Button>
             </div>
           )
         }
       >
         {diagnosisPreview ? (
-          <div className="space-y-4">
-            <div className="flex items-center gap-2">
-              <DiagnosisStatusBadge status={diagnosisPreview.status} />
-              {diagnosisPreview.confidence !== null && (
-                <span className="text-sm font-medium">
-                  Confidence: {(diagnosisPreview.confidence * 100).toFixed(1)}%
-                </span>
-              )}
-            </div>
-
-            {diagnosisPreview.disease && (
-              <div>
-                <h3 className="font-semibold text-lg">
-                  {diagnosisPreview.disease.commonName}
-                </h3>
-                <p className="text-sm text-muted-foreground">
-                  {diagnosisPreview.disease.summary}
-                </p>
+          <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.
               </div>
             )}
 
+            {/* Message if AI fails to process */}
             {diagnosisPreview.failureReason && (
-              <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">
-                {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}
               </div>
             )}
 
-            {diagnosisPreview.predictions.length > 0 && (
-              <div>
-                <h4 className="text-sm font-medium mb-2">Semua Prediksi</h4>
-                <div className="space-y-2">
+            <DiagnosisResultView 
+              imageUrl={previewUrl || diagnosisPreview.imageUrl || "https://placehold.co/600x400?text=Foto+Daun"}
+              confidence={diagnosisPreview.confidence ?? 0}
+              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."}
+              symptoms={diagnosisPreview.disease?.symptoms ?? []}
+              preventions={diagnosisPreview.disease?.recommendations ?? []}
+              medicines={(diagnosisPreview.disease as any)?.medicineRecommendations ?? []}
+            />
+
+            {/* All Model Predictions */}
+            {diagnosisPreview.predictions && diagnosisPreview.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">Semua Prediksi Model</h4>
+                <p className="text-xs text-slate-500 mb-4">Tebakan alternatif lain dari sistem AI ZeaVis</p>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                   {diagnosisPreview.predictions
                     .sort((a, b) => a.rank - b.rank)
                     .map((pred) => (
                       <div
                         key={pred.id}
-                        className="flex items-center justify-between rounded-lg border p-2 text-sm"
+                        className="flex items-center justify-between rounded-xl border border-slate-100 bg-slate-50 p-3 text-sm"
                       >
-                        <span>{pred.modelLabel}</span>
-                        <span className="font-semibold">
+                        <span className="text-slate-600 font-medium">{pred.modelLabel}</span>
+                        <span className="font-bold text-slate-700">
                           {(pred.confidence * 100).toFixed(1)}%
                         </span>
                       </div>
@@ -443,52 +368,9 @@ export function ScanPage() {
                 </div>
               </div>
             )}
-
-            <div className="pt-4 border-t">
-              <h4 className="text-sm font-medium mb-3">
-                Riwayat Diagnosis Terbaru
-              </h4>
-              {diagnosesQuery.isLoading && (
-                <div className="text-sm text-muted-foreground">
-                  Memuat riwayat...
-                </div>
-              )}
-              {!diagnosesQuery.isLoading && !diagnosesQuery.isError && (
-                <div className="space-y-2">
-                  {(diagnosesQuery.data ?? []).slice(0, 5).map((d) => (
-                    <div
-                      key={d.id}
-                      className="flex items-center justify-between rounded-md p-2 hover:bg-muted"
-                    >
-                      <div className="flex items-center gap-3">
-                        <img
-                          src={d.imageUrl}
-                          alt="thumb"
-                          className="h-10 w-10 rounded object-cover bg-muted"
-                        />
-                        <div className="text-sm">
-                          <div className="font-medium">
-                            {d.disease?.commonName ?? "Unknown"}
-                          </div>
-                          <div className="text-xs text-muted-foreground">
-                            {new Date(d.createdAt).toLocaleString("id-ID")}
-                          </div>
-                        </div>
-                      </div>
-                      <Link
-                        to={`/diagnoses/${d.id}`}
-                        className="text-emerald-600 text-sm font-semibold"
-                      >
-                        Lihat
-                      </Link>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
           </div>
         ) : null}
       </Modal>
     </div>
   );
-}
+}