fix(frontend): align pages with DB schema, fix auth, and improve UX

- Fix auth system: remove redirect bugs in login/register pages, register
  routes, wrap protected routes with AuthGuard, add AuthInitializer
- Add missing navbar links (Diagnosa, Pustaka, expert Review)
- Fix DiagnosesPage status filter to match DB DiagnosisStatus enum,
  support URL params (?status=, ?risk=) from dashboard links
- Replace hardcoded disease data on Dashboard with API-driven data,
  fix layout bugs (invalid gap-57 class, empty Button)
- Rewrite LibraryPage to use API instead of mock-diseases.ts
- Indonesian-ize Expert Reviews page labels and text
- Wrap DiagnosisDetailPage with MainLayout for consistent layout
- Improve ScanPage UX: image preview before upload, lucide icons,
  proper disease names in result modal, file size validation
- Delete dead code: mock-diseases.ts, unused form components,
  tailwind.config.ts (Tailwind v4 does not read v3 config)

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

apps/web/src/app.tsx

@@ -4,6 +4,8 @@ import {
   RouterProvider,
   Navigate,
 } from "react-router-dom";
+import { AuthInitializer } from "@/components/auth-initializer";
+import { AuthGuard } from "@/components/auth-guard";
 import { DashboardPage } from "@/pages/dashboard-page";
 import { ScanPage } from "@/pages/scan-page";
 import { LibraryPage } from "@/pages/library-page";
@@ -12,59 +14,73 @@ import { DiseaseDetailPage } from "@/pages/disease-detail-page";
 import { DiagnosisDetailPage } from "@/pages/diagnosis-detail-page";
 import { ExpertReviewsPage } from "@/pages/expert-reviews-page";
 import { DiagnosesPage } from "@/pages/diagnoses-page";
+import { LoginPage } from "@/pages/login-page";
+import { RegisterPage } from "@/pages/register-page";
 import { MainLayout } from "@/components/layout/main-layout";
 
 const queryClient = new QueryClient();
 
 const router = createBrowserRouter([
+  { path: "/", element: <Navigate to="/login" replace /> },
+  { path: "/login", element: <LoginPage /> },
+  { path: "/register", element: <RegisterPage /> },
   {
-    path: "/",
+    path: "/dashboard",
-    element: <Navigate to="/dashboard" replace />,
+    element: (
-  },
+      <AuthGuard>
-  {
+        <MainLayout>
-    path: "/",
+          <DashboardPage />
-    element: <Navigate to="/dashboard" replace />,
+        </MainLayout>
+      </AuthGuard>
+    ),
   },
   {
     path: "/scan",
     element: (
+      <AuthGuard>
         <MainLayout>
           <ScanPage />
         </MainLayout>
+      </AuthGuard>
     ),
   },
   {
     path: "/library",
     element: (
+      <AuthGuard>
         <MainLayout>
           <LibraryPage />
         </MainLayout>
+      </AuthGuard>
     ),
   },
-  
-  {
-    path: "/dashboard",
-    element: (
-      <MainLayout>
-        <DashboardPage />
-      </MainLayout>
-    ),
-  },
-  {
-    path: "/diagnoses/:id",
-    element: <DiagnosisDetailPage />,
-  },
   {
     path: "/diagnoses",
     element: (
+      <AuthGuard>
         <MainLayout>
           <DiagnosesPage />
         </MainLayout>
+      </AuthGuard>
+    ),
+  },
+  {
+    path: "/diagnoses/:id",
+    element: (
+      <AuthGuard>
+        <MainLayout>
+          <DiagnosisDetailPage />
+        </MainLayout>
+      </AuthGuard>
     ),
   },
   {
     path: "/expert/reviews",
-    element: <ExpertReviewsPage />,
+    element: (
+      <AuthGuard requireExpert>
+        <ExpertReviewsPage />
+      </AuthGuard>
+    ),
   },
   { path: "/catalog", element: <CatalogPage /> },
   { path: "/catalog/:slug", element: <DiseaseDetailPage /> },
@@ -73,6 +89,7 @@ const router = createBrowserRouter([
 export function App() {
   return (
     <QueryClientProvider client={queryClient}>
+      <AuthInitializer />
       <RouterProvider router={router} />
     </QueryClientProvider>
   );

apps/web/src/components/auth-initializer.tsx

@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { apiClient } from '@/lib/api-client';
+import { useAuthStore } from '@/store/auth-store';
+
+export function AuthInitializer() {
+  const setUser = useAuthStore((state) => state.setUser);
+  const query = useQuery({
+    queryKey: ['auth', 'me'],
+    queryFn: () => apiClient.getMe(),
+    retry: false,
+  });
+
+  useEffect(() => {
+    if (query.data) {
+      setUser(query.data.user);
+    }
+  }, [query.data, setUser]);
+
+  return null;
+}

apps/web/src/components/image-classification-form.tsx

@@ -1,138 +0,0 @@
-import { ChangeEvent, FormEvent, useRef, useState, useEffect } from 'react';
-import type { DiagnosisRecord } from '@zeavis/shared';
-import { Upload } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { DiagnosisStatusBadge } from '@/components/diagnosis-status-badge';
-
-type ImageClassificationFormProps = {
-  onSubmit: (file: File) => Promise<void>;
-  isSubmitting: boolean;
-  latestResult: DiagnosisRecord | null;
-};
-
-export function ImageClassificationForm({
-  onSubmit,
-  isSubmitting,
-  latestResult,
-}: ImageClassificationFormProps) {
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const previewUrlRef = useRef<string | null>(null);
-  const [file, setFile] = useState<File | null>(null);
-  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  // Revoke object URL on component unmount
-  useEffect(() => {
-    return () => {
-      if (previewUrlRef.current) {
-        URL.revokeObjectURL(previewUrlRef.current);
-        previewUrlRef.current = null;
-      }
-    };
-  }, []);
-
-  function handleFileChange(event: ChangeEvent<HTMLInputElement>) {
-    const selectedFile = event.target.files?.[0] ?? null;
-    setError(null);
-    setFile(selectedFile);
-
-    // Revoke previous preview URL before replacing it
-    if (previewUrlRef.current) {
-      URL.revokeObjectURL(previewUrlRef.current);
-      previewUrlRef.current = null;
-    }
-
-    const newUrl = selectedFile ? URL.createObjectURL(selectedFile) : null;
-    previewUrlRef.current = newUrl;
-    setPreviewUrl(newUrl);
-  }
-
-  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    if (!file) {
-      setError('Pilih gambar terlebih dahulu');
-      return;
-    }
-
-    try {
-      await onSubmit(file);
-
-      // Revoke current preview URL after successful submit before setting null
-      if (previewUrlRef.current) {
-        URL.revokeObjectURL(previewUrlRef.current);
-        previewUrlRef.current = null;
-      }
-
-      setFile(null);
-      setPreviewUrl(null);
-      if (fileInputRef.current) {
-        fileInputRef.current.value = '';
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Gagal mengirim gambar');
-    }
-  }
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <Upload className="h-5 w-5" /> Diagnosis Gambar
-        </CardTitle>
-        <CardDescription>
-          Upload gambar daun jagung untuk klasifikasi AI dan review pakar jika confidence rendah.
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        <form onSubmit={handleSubmit} className="space-y-4">
-          <div>
-            <label htmlFor="image-file" className="block text-sm font-medium">
-              Pilih Gambar
-            </label>
-            <input
-              ref={fileInputRef}
-              id="image-file"
-              type="file"
-              accept="image/jpeg,image/png"
-              onChange={handleFileChange}
-              disabled={isSubmitting}
-              className="mt-1 block w-full text-sm file:mr-4 file:rounded-md file:border-0 file:bg-primary file:px-4 file:py-2 file:text-sm file:font-semibold file:text-primary-foreground hover:file:bg-primary/90 disabled:opacity-50"
-            />
-            {file && (
-              <p className="mt-2 text-sm text-muted-foreground">
-                File dipilih: {file.name}
-              </p>
-            )}
-          </div>
-
-          {previewUrl && (
-            <img src={previewUrl} alt="Pratinjau gambar daun jagung untuk diagnosis" className="h-48 rounded-lg object-cover" />
-          )}
-
-          {error && <p className="text-sm text-red-600">{error}</p>}
-
-          <Button type="submit" disabled={isSubmitting} className="w-full">
-            {isSubmitting ? 'Memproses...' : 'Upload dan Diagnosis'}
-          </Button>
-        </form>
-
-        {latestResult && (
-          <div className="rounded-lg border p-4">
-            <div className="mb-2 flex items-center justify-between gap-3">
-              <h3 className="font-semibold">
-                {latestResult.disease?.commonName ?? 'Diagnosis gagal'}
-              </h3>
-              <DiagnosisStatusBadge status={latestResult.status} />
-            </div>
-            <p className="text-sm text-muted-foreground">
-              {latestResult.confidence === null
-                ? 'Tidak ada confidence'
-                : `Confidence ${(latestResult.confidence * 100).toFixed(1)}%`}
-            </p>
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-}

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

@@ -10,14 +10,14 @@ export function Navbar() {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const setUser = useAuthStore((state) => state.setUser);
-  const isDashboard = location.pathname === "/dashboard";
+  const user = useAuthStore((state) => state.user);
-  const isScan = location.pathname === "/scan";
-  const isLibrary = location.pathname === "/library";
 
-  const navLinkClassName = (isActive: boolean) =>
+  const isActive = (path: string) => location.pathname === path;
+
+  const navLinkClassName = (active: boolean) =>
     [
-      "inline-flex items-center rounded-full px-4 py-2 text-[18px] font-medium transition-colors",
+      "inline-flex items-center rounded-full px-4 py-2 text-[16px] font-medium transition-colors",
-      isActive
+      active
         ? "bg-[#48A111] text-white shadow-sm"
         : "text-white/85 hover:bg-white/10 hover:text-white",
     ].join(" ");
@@ -29,12 +29,10 @@ export function Navbar() {
     onSuccess: () => {
       setUser(null);
       queryClient.clear();
-      navigate("/");
+      navigate("/login");
     },
   });
 
-  const user = useAuthStore((state) => state.user);
-
   return (
     <header className="sticky top-0 z-40 bg-[#306D29] text-white shadow-sm backdrop-blur">
       <div className="mx-auto flex h-20 max-w-6xl items-center justify-between px-6">
@@ -52,27 +50,33 @@ export function Navbar() {
           </div>
         </div>
 
-        <nav className="flex items-center gap-3">
+        <nav className="flex items-center gap-2">
-          <Button asChild variant="ghost" className="rounded-full">
+          <Link to="/dashboard" className={navLinkClassName(isActive("/dashboard"))}>
-            <Link to="/dashboard" className={navLinkClassName(isDashboard)}>
             Dashboard
           </Link>
-          </Button>
+          <Link to="/scan" className={navLinkClassName(isActive("/scan"))}>
-          <Button asChild variant="ghost" className="rounded-full">
+            Scan
-            <Link to="/scan" className={navLinkClassName(isScan)}>
-              Scan Tanaman
           </Link>
-          </Button>
+          <Link to="/diagnoses" className={navLinkClassName(isActive("/diagnoses"))}>
-          <Button asChild variant="ghost" className="rounded-full">
+            Diagnosa
-            <Link to="/library" className={navLinkClassName(isLibrary)}>
-              Pustaka Penyakit
           </Link>
-          </Button>
+          <Link to="/catalog" className={navLinkClassName(isActive("/catalog") || isActive("/library"))}>
+            Pustaka
+          </Link>
+          {user?.role === "expert" && (
+            <Link
+              to="/expert/reviews"
+              className={navLinkClassName(isActive("/expert/reviews"))}
+            >
+              Review
+            </Link>
+          )}
           {user && (
             <Button
               variant="outline"
               onClick={() => logoutMutation.mutate()}
               disabled={logoutMutation.isPending}
+              className="ml-2 bg-white/10 border-white/20 text-white hover:bg-white/20"
             >
               {logoutMutation.isPending ? "Keluar..." : "Keluar"}
             </Button>

apps/web/src/components/manual-classification-form.tsx

@@ -1,132 +0,0 @@
-import { useEffect, useState } from 'react';
-import type { DiseaseSlug, DiseaseCatalogItem, ManualClassificationRequest } from '@zeavis/shared';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-
-export interface ManualClassificationFormProps {
-  diseases: DiseaseCatalogItem[];
-  onSubmit: (payload: ManualClassificationRequest) => Promise<void>;
-  isSubmitting: boolean;
-}
-
-export function ManualClassificationForm({
-  diseases,
-  onSubmit,
-  isSubmitting,
-}: ManualClassificationFormProps) {
-  const [selectedSlug, setSelectedSlug] = useState<DiseaseSlug | ''>('');
-  const [observation, setObservation] = useState('');
-  const [location, setLocation] = useState('');
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (diseases.length > 0 && !selectedSlug) {
-      setSelectedSlug(diseases[0].slug);
-    }
-  }, [diseases, selectedSlug]);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError(null);
-
-    if (!selectedSlug || !observation.trim() || !location.trim()) {
-      setError('Semua field harus diisi');
-      return;
-    }
-
-    try {
-      await onSubmit({
-        diseaseSlug: selectedSlug,
-        observation: observation.trim(),
-        location: location.trim(),
-      });
-
-      setObservation('');
-      setLocation('');
-      if (diseases.length > 0) {
-        setSelectedSlug(diseases[0].slug);
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Terjadi kesalahan saat mengirim data');
-    }
-  };
-
-  const isFormValid = selectedSlug && observation.trim() && location.trim();
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Klasifikasi Manual</CardTitle>
-        <CardDescription>Laporkan penyakit daun jagung yang Anda temukan</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form onSubmit={handleSubmit} className="space-y-4">
-          {error && (
-            <div className="rounded-md bg-red-50 p-3 text-sm text-red-800">{error}</div>
-          )}
-
-          <div>
-            <label htmlFor="disease" className="block text-sm font-medium">
-              Jenis Penyakit
-            </label>
-            <select
-              id="disease"
-              value={selectedSlug}
-              onChange={(e) => setSelectedSlug(e.target.value as DiseaseSlug)}
-              disabled={diseases.length === 0 || isSubmitting}
-              className="mt-1 block w-full rounded-md border border-border bg-background px-3 py-2 text-sm disabled:opacity-50"
-            >
-              {diseases.length === 0 ? (
-                <option value="">Memuat penyakit...</option>
-              ) : (
-                diseases.map((disease) => (
-                  <option key={disease.slug} value={disease.slug}>
-                    {disease.commonName} ({disease.label})
-                  </option>
-                ))
-              )}
-            </select>
-          </div>
-
-          <div>
-            <label htmlFor="observation" className="block text-sm font-medium">
-              Pengamatan
-            </label>
-            <textarea
-              id="observation"
-              value={observation}
-              onChange={(e) => setObservation(e.target.value)}
-              placeholder="Jelaskan gejala atau kondisi daun yang Anda amati..."
-              disabled={isSubmitting}
-              rows={4}
-              className="mt-1 block w-full rounded-md border border-border bg-background px-3 py-2 text-sm disabled:opacity-50"
-            />
-          </div>
-
-          <div>
-            <label htmlFor="location" className="block text-sm font-medium">
-              Lokasi
-            </label>
-            <input
-              id="location"
-              type="text"
-              value={location}
-              onChange={(e) => setLocation(e.target.value)}
-              placeholder="Lokasi penemuan penyakit (desa, kecamatan, kabupaten)"
-              disabled={isSubmitting}
-              className="mt-1 block w-full rounded-md border border-border bg-background px-3 py-2 text-sm disabled:opacity-50"
-            />
-          </div>
-
-          <Button
-            type="submit"
-            disabled={!isFormValid || isSubmitting || diseases.length === 0}
-            className="w-full"
-          >
-            {isSubmitting ? 'Mengirim...' : 'Kirim Laporan'}
-          </Button>
-        </form>
-      </CardContent>
-    </Card>
-  );
-}

apps/web/src/data/mock-diseases.ts

@@ -1,61 +0,0 @@
-export const mockDiseases = [
-  {
-    id: "nlb",
-    name: "Hawar Daun",
-    slug: "hawar-daun",
-    severity: "Tinggi",
-    imageUrl: "https://via.placeholder.com/320x180?text=Hawar+Daun",
-    pathogen: "Exserohilum turcicum",
-    description:
-      "Penyakit jamur yang menyebabkan lesi pada daun dan dapat menurunkan hasil panen.",
-    symptoms: [
-      "Lesi lonjong berbentuk cerutu, 2.5 - 15 cm",
-      "Warna abu-kehijauan berkembang menjadi coklat -abu",
-      "Nekrosis parah pada seluruh permukaan daun",
-    ],
-    prevention:
-      "Gunakan varietas tahan, rotasi tanaman, dan hapus sisa tanaman terinfeksi.",
-  },
-  {
-    id: "rust",
-    name: "Karat Daun",
-    slug: "karat-daun",
-    imageUrl: "https://via.placeholder.com/320x180?text=Karat+Daun",
-    pathogen: "Puccinia spp.",
-    severity: "Sedang",
-    description:
-      "Pustulan oranye pada permukaan daun yang dapat mengurangi fotosintesis.",
-    symptoms: [
-      "Pustula oranye pada permukaan daun",
-      "Daun menguning dan rontok pada serangan berat",
-    ],
-    prevention:
-      "Hindari kelembapan tinggi, gunakan fungisida bila perlu, dan perbaiki sirkulasi udara.",
-  },
-  {
-    id: "spot",
-    name: "Bercak Abu-abu",
-    slug: "bercak-abu-abu",
-    imageUrl: "https://via.placeholder.com/320x180?text=Bercak+Abu-abu",
-    pathogen: "Cercospora spp.",
-    severity: "Rendah",
-    description:
-      "Bercak kecil berwarna abu-abu yang umumnya tidak menyebabkan kematian tanaman.",
-    symptoms: [
-      "Bercak kecil bundar hingga tidak beraturan",
-      "Daun kering pada area bercak",
-    ],
-    prevention:
-      "Praktek sanitasi, buang daun yang berat terinfeksi, dan pemantauan rutin.",
-  },
-  {
-    id: "healthy",
-    name: "Daun Sehat",
-    slug: "daun-sehat",
-    imageUrl: "https://via.placeholder.com/320x180?text=Daun+Sehat",
-    severity: "Sehat",
-    description: "Daun tanpa tanda penyakit.",
-    symptoms: [],
-    prevention: "-",
-  },
-];

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

@@ -1,5 +1,6 @@
-import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
 import { Link } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
 import { BookOpen, ChevronRight, Pill, Shield, Scan } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -14,7 +15,24 @@ export function DashboardPage() {
     queryFn: () => apiClient.getDashboardSummary(),
   });
 
+  const diseasesQuery = useQuery({
+    queryKey: ["diseases"],
+    queryFn: () => apiClient.getDiseases(),
+  });
+
   const summary = summaryQuery.data;
+  const diseases = diseasesQuery.data ?? [];
+
+  const diseasesQuick = useMemo(() =>
+    diseases
+      .sort((a, b) => a.displayOrder - b.displayOrder)
+      .map((d) => ({
+        name: d.commonName,
+        sci: d.label,
+        color: d.accentColor,
+      })),
+    [diseases]
+  );
 
   const missionCards = [
     {
@@ -47,25 +65,17 @@ export function DashboardPage() {
     },
   ];
 
-  const diseasesQuick = [
-    { name: "Hawar Daun", sci: "Northern Leaf Blight", color: "#b91c1c" },
-    { name: "Karat Daun", sci: "Common Rust", color: "#d97706" },
-    { name: "Bercak Abu-abu", sci: "Gray Leaf Spot", color: "#6b7280" },
-    { name: "Daun Sehat", sci: "Healthy", color: "#16a34a" },
-  ];
-
   const isLoadingData = summaryQuery.isLoading;
   const hasError = Boolean(summaryQuery.error);
 
   return (
-    <main className="p-6">
+    <div className="space-y-8">
-      <div className="mx-auto max-w-6xl space-y-8">
       {/* Hero header */}
       <header
         className="relative overflow-hidden rounded-3xl bg-cover bg-center bg-no-repeat shadow-sm"
         style={{ backgroundImage: `url(${bg})` }}
       >
-          <div className="absolute inset-0 bg-linear-to-b from-[#2F6E1A]/60 to-black/30" />
+        <div className="absolute inset-0 bg-gradient-to-b from-[#2F6E1A]/60 to-black/30" />
         <div className="relative z-10 flex flex-col md:flex-row items-center justify-between gap-6 p-10">
           <div className="space-y-3 w-full md:w-2/3 text-white">
             <span className="inline-block rounded-full bg-[#1E8A2A]/80 px-4 py-2 text-xs font-semibold">
@@ -97,7 +107,7 @@ export function DashboardPage() {
                 className="px-6 py-6 text-lg font-semibold text-white hover:bg-[#1E8A2A]"
               >
                 <Link
-                    to="/library"
+                  to="/catalog"
                   className="inline-flex items-center gap-2"
                 >
                   Pustaka Penyakit
@@ -252,7 +262,7 @@ export function DashboardPage() {
             </div>
           </section>
 
-            {/* Diseases quick access */}
+          {/* Diseases quick access - now API-driven */}
           <section className="space-y-4">
             <div className="mb-2 flex items-start justify-between">
               <div>
@@ -260,17 +270,22 @@ export function DashboardPage() {
                   Penyakit yang Dapat Dideteksi
                 </h3>
                 <p className="text-[15px] font-normal text-muted-foreground">
-                    4 kelas penyakit dan kondisi daun jagung dalam sistem kami
+                  {diseases.length} kelas penyakit dan kondisi daun jagung dalam sistem kami
                 </p>
               </div>
               <Link
-                  to="/library"
+                to="/catalog"
                 className="text-emerald-600 font-semibold inline-flex items-center gap-1"
               >
                 Lihat Pustaka <ChevronRight className="w-4 h-4" />
               </Link>
             </div>
 
+            {diseasesQuery.isLoading ? (
+              <div className="text-center text-muted-foreground py-4">
+                Memuat data penyakit...
+              </div>
+            ) : (
               <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
                 {diseasesQuick.map((d) => (
                   <Card
@@ -296,38 +311,31 @@ export function DashboardPage() {
                   </Card>
                 ))}
               </div>
+            )}
           </section>
 
           {/* Scan quick access */}
-            <div className="mt-15 flex items-center gap-57 bg-[#1E8A2A] rounded-3xl p-6">
+          <div className="mt-12 flex items-center gap-6 bg-[#1E8A2A] rounded-3xl p-6">
-              <div className="text-2xl font-bold text-white">
+            <div className="flex-1 text-white">
-                <h3>Siap Mendeteksi Penyakit Daun?</h3>
+              <h3 className="text-2xl font-bold">Siap Mendeteksi Penyakit Daun?</h3>
-                <div>
               <p className="text-sm text-[#9AD872] font-normal mt-2">
                 Unggah foto daun jagung Anda dan dapatkan hasil analisis AI
                 dalam hitungan detik.
               </p>
             </div>
-              </div>
             <Button
               asChild
               variant="outline"
-                className="bg-white hover:bg-[#1E8A2A]/90 hover:text-white px-6 py-6 text-lg font-bold text-[#214B11]"
+              className="bg-white hover:bg-[#1E8A2A]/90 hover:text-white px-6 py-6 text-lg font-bold text-[#214B11] shrink-0"
             >
               <Link to="/scan" className="inline-flex items-center gap-2">
                 <Scan className="h-5 w-6" />
                 Mulai Scan Sekarang
               </Link>
             </Button>
-              <Button
-                asChild
-                variant="outline"
-                className="px-6 py-6 text-lg font-bold text-white hover:bg-[#1E8A2A]"
-              ></Button>
           </div>
         </>
       )}
     </div>
-    </main>
   );
 }

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

@@ -1,19 +1,40 @@
 import { useMemo, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useSearchParams } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent } from "@/components/ui/card";
 import { DiagnosisStatusBadge } from "@/components/diagnosis-status-badge";
 import { RiskBadge } from "@/components/risk-badge";
 import { apiClient } from "@/lib/api-client";
+import type { DiagnosisStatus, RiskLevel } from "@zeavis/shared";
+
+const STATUS_OPTIONS: { value: "all" | DiagnosisStatus; label: string }[] = [
+  { value: "all", label: "Semua" },
+  { value: "ai_verified", label: "Terverifikasi AI" },
+  { value: "needs_review", label: "Menunggu Review" },
+  { value: "expert_verified", label: "Diverifikasi Pakar" },
+  { value: "expert_corrected", label: "Dikoreksi Pakar" },
+  { value: "failed", label: "Gagal" },
+];
+
+const RISK_OPTIONS: { value: "all" | RiskLevel; label: string }[] = [
+  { value: "all", label: "Semua Risiko" },
+  { value: "high", label: "Risiko Tinggi" },
+  { value: "medium", label: "Risiko Sedang" },
+  { value: "low", label: "Risiko Rendah" },
+];
 
 export function DiagnosesPage() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const initialStatus = searchParams.get("status") as DiagnosisStatus | null;
+  const initialRisk = searchParams.get("risk") as RiskLevel | null;
+
   const [statusFilter, setStatusFilter] = useState<
-    "all" | "needs_review" | "verified" | "failed"
+    "all" | DiagnosisStatus
-  >("all");
+  >(initialStatus ?? "all");
   const [riskFilter, setRiskFilter] = useState<
-    "all" | "high" | "medium" | "low"
+    "all" | RiskLevel
-  >("all");
+  >(initialRisk ?? "all");
 
   const query = useQuery({
     queryKey: ["diagnoses"],
@@ -32,9 +53,26 @@ export function DiagnosesPage() {
     });
   }, [diagnoses, statusFilter, riskFilter]);
 
+  const handleStatusChange = (value: string) => {
+    const v = value as "all" | DiagnosisStatus;
+    setStatusFilter(v);
+    const next = new URLSearchParams(searchParams);
+    if (v === "all") next.delete("status");
+    else next.set("status", v);
+    setSearchParams(next);
+  };
+
+  const handleRiskChange = (value: string) => {
+    const v = value as "all" | RiskLevel;
+    setRiskFilter(v);
+    const next = new URLSearchParams(searchParams);
+    if (v === "all") next.delete("risk");
+    else next.set("risk", v);
+    setSearchParams(next);
+  };
+
   return (
-    <main className="min-h-screen px-6 py-8">
+    <div className="space-y-6">
-      <div className="mx-auto max-w-6xl space-y-6">
       <div className="flex items-center justify-between gap-4">
         <div>
           <p className="text-sm font-medium text-primary">
@@ -43,9 +81,9 @@ export function DiagnosesPage() {
           <h1 className="text-3xl font-bold">Daftar Diagnosis</h1>
         </div>
         <div className="flex items-center gap-3">
-            <Link to="/dashboard">
+          <Button asChild variant="outline">
-              <Button variant="outline">Dashboard</Button>
+            <Link to="/scan">Scan Baru</Link>
-            </Link>
+          </Button>
         </div>
       </div>
 
@@ -55,25 +93,27 @@ export function DiagnosesPage() {
             <label className="text-sm font-medium">Status</label>
             <select
               value={statusFilter}
-                onChange={(e) => setStatusFilter(e.target.value as any)}
+              onChange={(e) => handleStatusChange(e.target.value)}
-                className="rounded-md border border-border bg-background px-2 py-1"
+              className="rounded-md border border-border bg-background px-3 py-2 text-sm"
             >
-                <option value="all">All</option>
+              {STATUS_OPTIONS.map((opt) => (
-                <option value="needs_review">Needs review</option>
+                <option key={opt.value} value={opt.value}>
-                <option value="verified">Verified</option>
+                  {opt.label}
-                <option value="failed">Failed</option>
+                </option>
+              ))}
             </select>
 
             <label className="text-sm font-medium">Risiko</label>
             <select
               value={riskFilter}
-                onChange={(e) => setRiskFilter(e.target.value as any)}
+              onChange={(e) => handleRiskChange(e.target.value)}
-                className="rounded-md border border-border bg-background px-2 py-1"
+              className="rounded-md border border-border bg-background px-3 py-2 text-sm"
             >
-                <option value="all">All</option>
+              {RISK_OPTIONS.map((opt) => (
-                <option value="high">High</option>
+                <option key={opt.value} value={opt.value}>
-                <option value="medium">Medium</option>
+                  {opt.label}
-                <option value="low">Low</option>
+                </option>
+              ))}
             </select>
 
             <div className="ml-auto text-sm text-muted-foreground">
@@ -82,16 +122,27 @@ export function DiagnosesPage() {
           </div>
 
           {query.isLoading ? (
-              <div className="p-6 text-center text-muted-foreground">
+            <div className="py-12 text-center text-muted-foreground">
               Memuat diagnosis...
             </div>
           ) : query.isError ? (
-              <div className="p-6 text-center text-red-600">
+            <div className="py-12 text-center text-red-600">
               Gagal memuat diagnosis
             </div>
           ) : filtered.length === 0 ? (
-              <div className="p-6 text-center text-muted-foreground">
+            <div className="py-12 text-center">
+              <p className="text-muted-foreground">
                 Tidak ada diagnosis sesuai filter
+              </p>
+              {diagnoses.length === 0 && (
+                <p className="mt-2 text-sm text-muted-foreground">
+                  Mulai dengan{" "}
+                  <Link to="/scan" className="text-primary underline">
+                    melakukan scan daun
+                  </Link>
+                  .
+                </p>
+              )}
             </div>
           ) : (
             <div className="grid gap-4 md:grid-cols-2">
@@ -101,31 +152,36 @@ export function DiagnosesPage() {
                     <img
                       src={d.imageUrl}
                       alt="Daun"
-                        className="h-24 w-24 rounded-md object-cover"
+                      className="h-24 w-24 rounded-md object-cover bg-muted"
                     />
-                      <div className="flex-1">
+                    <div className="flex-1 min-w-0">
                       <div className="flex items-center justify-between gap-2">
-                          <div>
+                        <div className="min-w-0">
-                            <h3 className="text-lg font-semibold">
+                          <h3 className="text-lg font-semibold truncate">
-                              {d.disease?.commonName ?? "Unknown"}
+                            {d.disease?.commonName ?? "Diagnosis gagal"}
                           </h3>
                           <p className="text-sm text-muted-foreground">
-                              {d.predictedDiseaseSlug ?? ""}
+                            {d.disease?.label ?? d.predictedDiseaseSlug}
                           </p>
                         </div>
-                          <div className="flex flex-col items-end gap-1">
+                        <div className="flex flex-col items-end gap-1 shrink-0">
                           <DiagnosisStatusBadge status={d.status} />
                           <RiskBadge level={d.disease?.riskLevel ?? "low"} />
                         </div>
                       </div>
 
-                        <div className="mt-3 flex items-center justify-between gap-4">
+                      <div className="mt-2 flex items-center justify-between gap-4">
                         <div className="text-sm text-muted-foreground">
                           {new Date(d.createdAt).toLocaleString("id-ID")}
+                          {d.confidence !== null && (
+                            <span className="ml-2">
+                              • {(d.confidence * 100).toFixed(0)}%
+                            </span>
+                          )}
                         </div>
                         <Link
                           to={`/diagnoses/${d.id}`}
-                            className="text-emerald-600 font-semibold"
+                          className="text-emerald-600 font-semibold text-sm shrink-0"
                         >
                           Lihat detail
                         </Link>
@@ -139,7 +195,6 @@ export function DiagnosesPage() {
         </CardContent>
       </Card>
     </div>
-    </main>
   );
 }
 

apps/web/src/pages/expert-reviews-page.tsx

@@ -1,7 +1,7 @@
 import { FormEvent, useMemo, useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
 import { useMutation, useQueries, useQueryClient } from '@tanstack/react-query';
-import type { DiseaseSlug } from '@zeavis/shared';
+import type { DiseaseSlug, DiagnosisStatus } from '@zeavis/shared';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { DiagnosisStatusBadge } from '@/components/diagnosis-status-badge';
@@ -47,11 +47,24 @@ export function ExpertReviewsPage() {
     await mutation.mutateAsync();
   }
 
+  const statusLabel = (status: DiagnosisStatus) => {
+    switch (status) {
+      case 'ai_verified': return 'Terverifikasi AI';
+      case 'needs_review': return 'Menunggu Review';
+      case 'expert_verified': return 'Diverifikasi Pakar';
+      case 'expert_corrected': return 'Dikoreksi Pakar';
+      case 'failed': return 'Gagal';
+    }
+  };
+
   return (
     <main className="min-h-screen bg-background">
       <header className="border-b bg-card">
         <div className="mx-auto flex max-w-7xl items-center justify-between p-6">
-          <h1 className="text-2xl font-bold">Expert Reviews</h1>
+          <div>
+            <p className="text-sm font-medium text-primary">Review Pakar</p>
+            <h1 className="text-2xl font-bold">Diagnosis Menunggu Review</h1>
+          </div>
           <Link to="/dashboard">
             <Button variant="outline">Dashboard</Button>
           </Link>
@@ -63,15 +76,15 @@ export function ExpertReviewsPage() {
           {/* Left: List of reviews */}
           <div className="space-y-3">
             <div className="flex items-center justify-between">
-              <h2 className="font-semibold">Diagnoses to Review</h2>
+              <h2 className="font-semibold">Daftar Diagnosis</h2>
               <span className="rounded-full bg-muted px-2.5 py-0.5 text-xs font-medium">{reviews.length}</span>
             </div>
 
             <div className="space-y-2">
               {reviewsQuery.isPending || diseasesQuery.isPending ? (
-                <p className="text-sm text-muted-foreground">Loading reviews and diseases...</p>
+                <p className="text-sm text-muted-foreground">Memuat diagnosis...</p>
               ) : reviews.length === 0 ? (
-                <p className="text-sm text-muted-foreground">No diagnoses pending review</p>
+                <p className="text-sm text-muted-foreground">Tidak ada diagnosis yang menunggu review</p>
               ) : (
                 reviews.map((review) => (
                   <button
@@ -114,7 +127,7 @@ export function ExpertReviewsPage() {
             {reviewsQuery.isPending || diseasesQuery.isPending ? (
               <Card>
                 <CardContent className="p-6 text-center text-muted-foreground">
-                  Loading reviews and diseases...
+                  Memuat diagnosis...
                 </CardContent>
               </Card>
             ) : selected ? (
@@ -150,7 +163,7 @@ export function ExpertReviewsPage() {
                     {/* Top predictions */}
                     {selected.predictions.length > 0 && (
                       <div className="space-y-2">
-                        <h4 className="text-sm font-medium">Top Predictions</h4>
+                        <h4 className="text-sm font-medium">Prediksi Teratas</h4>
                         <div className="space-y-1">
                           {selected.predictions.map((pred) => (
                             <div key={pred.id} className="flex items-center justify-between text-sm">
@@ -167,13 +180,13 @@ export function ExpertReviewsPage() {
                 {/* Review form */}
                 <Card>
                   <CardHeader>
-                    <CardTitle className="text-lg">Expert Review</CardTitle>
+                    <CardTitle className="text-lg">Review Pakar</CardTitle>
                   </CardHeader>
                   <CardContent>
                     <form onSubmit={handleSubmit} className="space-y-4">
                       {/* Verdict selection */}
                       <div className="space-y-2">
-                        <label className="text-sm font-medium">Verdict</label>
+                        <label className="text-sm font-medium">Keputusan</label>
                         <div className="flex gap-3">
                           <label htmlFor="verdict-verified" className="flex items-center gap-2">
                             <input
@@ -188,7 +201,7 @@ export function ExpertReviewsPage() {
                               }}
                               className="h-4 w-4"
                             />
-                            <span className="text-sm">Verified</span>
+                            <span className="text-sm">Terverifikasi</span>
                           </label>
                           <label htmlFor="verdict-corrected" className="flex items-center gap-2">
                             <input
@@ -200,7 +213,7 @@ export function ExpertReviewsPage() {
                               onChange={(e) => setVerdict(e.target.value as 'verified' | 'corrected')}
                               className="h-4 w-4"
                             />
-                            <span className="text-sm">Corrected</span>
+                            <span className="text-sm">Dikoreksi</span>
                           </label>
                         </div>
                       </div>
@@ -209,7 +222,7 @@ export function ExpertReviewsPage() {
                       {verdict === 'corrected' && (
                         <div className="space-y-2">
                           <label htmlFor="disease" className="text-sm font-medium">
-                            Correct Disease
+                            Penyakit yang Benar
                           </label>
                           <select
                             id="disease"
@@ -218,7 +231,7 @@ export function ExpertReviewsPage() {
                             required={verdict === 'corrected'}
                             className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
                           >
-                            <option value="">Select a disease...</option>
+                            <option value="">Pilih penyakit...</option>
                             {diseases.map((disease) => (
                               <option key={disease.slug} value={disease.slug}>
                                 {disease.commonName}
@@ -231,13 +244,13 @@ export function ExpertReviewsPage() {
                       {/* Notes */}
                       <div className="space-y-2">
                         <label htmlFor="notes" className="text-sm font-medium">
-                          Notes <span className="text-red-500">*</span>
+                          Catatan <span className="text-red-500">*</span>
                         </label>
                         <textarea
                           id="notes"
                           value={notes}
                           onChange={(e) => setNotes(e.target.value)}
-                          placeholder="Enter your review notes..."
+                          placeholder="Tulis catatan review Anda..."
                           required
                           className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
                           rows={4}
@@ -250,12 +263,12 @@ export function ExpertReviewsPage() {
                         disabled={mutation.isPending || (verdict === 'corrected' && !correctedDiseaseSlug) || !notes.trim()}
                         className="w-full"
                       >
-                        {mutation.isPending ? 'Submitting...' : 'Submit Review'}
+                        {mutation.isPending ? 'Mengirim...' : 'Kirim Review'}
                       </Button>
 
                       {mutation.isError && (
                         <p className="text-sm text-red-500">
-                          Error: {mutation.error instanceof Error ? mutation.error.message : 'Unknown error'}
+                          Error: {mutation.error instanceof Error ? mutation.error.message : 'Terjadi kesalahan'}
                         </p>
                       )}
                     </form>
@@ -265,7 +278,7 @@ export function ExpertReviewsPage() {
             ) : (
               <Card>
                 <CardContent className="p-6 text-center text-muted-foreground">
-                  No diagnoses available for review
+                  Tidak ada diagnosis yang tersedia untuk review
                 </CardContent>
               </Card>
             )}

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

@@ -1,182 +1,95 @@
-import React, { useMemo, useState } from "react";
+import { useState } from "react";
-import { Link } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
-import { BookOpen } from "lucide-react";
+import { DiseaseCard } from "@/components/disease-card";
-import { Button } from "@/components/ui/button";
+import { apiClient } from "@/lib/api-client";
-import { Modal } from "@/components/ui/modal";
+import type { RiskLevel } from "@zeavis/shared";
-import { mockDiseases } from "@/data/mock-diseases";
 
 export function LibraryPage() {
-  type Disease = (typeof mockDiseases)[number];
+  const [searchQuery, setSearchQuery] = useState("");
+  const [riskFilter, setRiskFilter] = useState<RiskLevel | "all">("all");
 
-  const [filter, setFilter] = useState<string | null>(null);
+  const { data: diseases, isLoading, error } = useQuery({
-  const [expandedId, setExpandedId] = useState<string | null>(null);
+    queryKey: ["diseases"],
-  const [selected, setSelected] = useState<Disease | null>(null);
+    queryFn: () => apiClient.getDiseases(),
-  const [modalOpen, setModalOpen] = useState(false);
+  });
 
-  const items = useMemo(() => {
+  const filteredDiseases = (diseases || []).filter((disease) => {
-    if (!filter) return mockDiseases;
+    const matchesSearch =
-    return mockDiseases.filter((d) =>
+      disease.commonName.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      d.name.toLowerCase().includes(filter.toLowerCase()),
+      disease.label.toLowerCase().includes(searchQuery.toLowerCase()) ||
-    );
+      disease.summary.toLowerCase().includes(searchQuery.toLowerCase());
-  }, [filter]);
+
+    const matchesRisk = riskFilter === "all" || disease.riskLevel === riskFilter;
+
+    return matchesSearch && matchesRisk;
+  });
 
   return (
-    <main className="p-6">
+    <div className="space-y-6">
-      <h1 className="text-2xl font-semibold mb-4">Pustaka Penyakit</h1>
+      <div className="flex items-center justify-between">
-      <div className="mb-4">
+        <div>
-        <input
+          <p className="text-sm font-medium text-primary">Edukasi Penyakit</p>
-          placeholder="Filter penyakit..."
+          <h1 className="text-3xl font-bold">Pustaka Penyakit</h1>
-          value={filter ?? ""}
+        </div>
-          onChange={(e) => setFilter(e.target.value || null)}
-          className="border px-3 py-2 rounded-md w-full max-w-sm"
-        />
       </div>
 
-      <div className="grid grid-cols-1 gap-4">
+      <div className="flex flex-col gap-4 md:flex-row md:items-end">
-        {items.map((d) => (
-          <article key={d.id} className="bg-white p-4 rounded-lg shadow">
-            <div className="flex gap-4">
-              <img
-                src={d.imageUrl}
-                alt={d.name}
-                className="h-28 w-48 rounded-md object-cover"
-              />
         <div className="flex-1">
-                <div className="flex items-start justify-between">
+          <label htmlFor="search" className="block text-sm font-medium mb-2">
-                  <div>
+            Cari penyakit
-                    <h2 className="font-semibold text-lg">
+          </label>
-                      {d.name}{" "}
+          <input
-                      <span className="text-sm text-muted-foreground">
+            id="search"
-                        {d.severity}
+            type="text"
-                      </span>
+            placeholder="Cari berdasarkan nama atau gejala..."
-                    </h2>
+            value={searchQuery}
-                    <p className="text-sm text-muted-foreground mt-2">
+            onChange={(e) => setSearchQuery(e.target.value)}
-                      {d.description}
+            className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
-                    </p>
+          />
-                    {d.pathogen && (
-                      <div className="mt-2 text-sm">
-                        <strong>Patogen:</strong> {d.pathogen}
-                      </div>
-                    )}
-                    <div className="mt-3 flex items-center gap-3">
-                      <Button
-                        variant="default"
-                        onClick={() => {
-                          setSelected(d);
-                          setModalOpen(true);
-                        }}
-                        className="inline-flex items-center gap-2 bg-green-600 text-white px-3 py-1 rounded"
-                      >
-                        <BookOpen className="h-4 w-4" />
-                        <span className="text-sm">Baca lebih lanjut</span>
-                      </Button>
-                      <Link
-                        to={`/catalog/${d.slug}`}
-                        className="text-sm text-muted-foreground"
-                      >
-                        Lihat halaman katalog
-                      </Link>
-                    </div>
         </div>
         <div>
-                    <button
+          <label htmlFor="risk-filter" className="block text-sm font-medium mb-2">
-                      className="text-sm text-primary underline"
+            Filter risiko
-                      onClick={() =>
+          </label>
-                        setExpandedId(expandedId === d.id ? null : d.id)
+          <select
-                      }
+            id="risk-filter"
+            value={riskFilter}
+            onChange={(e) => setRiskFilter(e.target.value as RiskLevel | "all")}
+            className="rounded-md border border-border bg-background px-3 py-2 text-sm"
           >
-                      {expandedId === d.id ? "Tutup" : "Detail"}
+            <option value="all">Semua Risiko</option>
-                    </button>
+            <option value="low">Risiko Rendah</option>
+            <option value="medium">Risiko Sedang</option>
+            <option value="high">Risiko Tinggi</option>
+          </select>
         </div>
       </div>
 
-                {expandedId === d.id && (
+      {isLoading && (
-                  <div className="mt-4 grid grid-cols-2 gap-4">
+        <div className="py-12 text-center text-muted-foreground">
-                    <div>
+          Memuat pustaka penyakit...
-                      <h3 className="font-medium">Gejala</h3>
-                      <ul className="list-disc list-inside text-sm mt-2">
-                        {(d.symptoms || []).length > 0 ? (
-                          d.symptoms.map((s: string, i: number) => (
-                            <li key={`${d.id}-symptom-${i}`}>{s}</li>
-                          ))
-                        ) : (
-                          <li>Tidak ada gejala khusus</li>
-                        )}
-                      </ul>
-                    </div>
-                    <div>
-                      <h3 className="font-medium">Pencegahan</h3>
-                      <p className="text-sm mt-2">{d.prevention}</p>
-                    </div>
         </div>
       )}
+
+      {error && (
+        <div className="py-12 text-center text-red-600">
+          Gagal memuat pustaka penyakit
         </div>
+      )}
+
+      {!isLoading && !error && filteredDiseases.length === 0 && (
+        <div className="py-12 text-center text-muted-foreground">
+          Tidak ada penyakit yang cocok dengan filter ini.
         </div>
-          </article>
+      )}
+
+      {!isLoading && !error && filteredDiseases.length > 0 && (
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {filteredDiseases.map((disease) => (
+            <DiseaseCard key={disease.slug} disease={disease} />
           ))}
         </div>
-
-      <Modal
-        open={modalOpen}
-        onClose={() => {
-          setModalOpen(false);
-          setSelected(null);
-        }}
-        title={selected?.name}
-        footer={
-          selected && (
-            <div className="flex items-center justify-end gap-3">
-              <Link
-                to={`/catalog/${selected.slug}`}
-                className="px-3 py-2 rounded bg-green-600 text-white text-sm"
-              >
-                Buka halaman katalog
-              </Link>
-              <button
-                onClick={() => {
-                  setModalOpen(false);
-                  setSelected(null);
-                }}
-                className="px-3 py-2 rounded bg-gray-200 text-sm"
-              >
-                Tutup
-              </button>
-            </div>
-          )
-        }
-      >
-        {selected ? (
-          <div className="grid grid-cols-1 gap-4">
-            <img
-              src={selected.imageUrl}
-              alt={selected.name}
-              className="w-full rounded-md object-cover"
-            />
-            <div>
-              <p className="text-sm text-muted-foreground">
-                {selected.description}
-              </p>
-              {selected.pathogen && (
-                <p className="mt-2">
-                  <strong>Patogen:</strong> {selected.pathogen}
-                </p>
       )}
-              <h4 className="mt-3 font-medium">Gejala</h4>
-              <ul className="list-disc list-inside text-sm mt-2">
-                {(selected.symptoms || []).length > 0 ? (
-                  selected.symptoms.map((s: string, i: number) => (
-                    <li key={`${selected.id}-symptom-${i}`}>{s}</li>
-                  ))
-                ) : (
-                  <li>Tidak ada gejala khusus</li>
-                )}
-              </ul>
-              <h4 className="mt-3 font-medium">Pencegahan</h4>
-              <p className="text-sm mt-2">{selected.prevention}</p>
     </div>
-          </div>
-        ) : null}
-      </Modal>
-    </main>
   );
 }

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { AuthForm } from "@/components/auth-form";
@@ -7,9 +7,6 @@ import { useAuthStore } from "@/store/auth-store";
 
 export function LoginPage() {
   const navigate = useNavigate();
-  useEffect(() => {
-    navigate("/dashboard");
-  }, [navigate]);
   const queryClient = useQueryClient();
   const setUser = useAuthStore((state) => state.setUser);
   const [error, setError] = useState<string | null>(null);

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { AuthForm } from "@/components/auth-form";
@@ -7,9 +7,6 @@ import { useAuthStore } from "@/store/auth-store";
 
 export function RegisterPage() {
   const navigate = useNavigate();
-  useEffect(() => {
-    navigate("/dashboard");
-  }, [navigate]);
   const queryClient = useQueryClient();
   const setUser = useAuthStore((state) => state.setUser);
   const [error, setError] = useState<string | null>(null);

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

@@ -1,12 +1,17 @@
-import React, { useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { useNavigate, Link } from "react-router-dom";
 import { useMutation, useQueryClient, useQuery } from "@tanstack/react-query";
-import { apiClient } from "@/lib/api-client";
+import { Camera, Upload, X, CheckCircle, ImageOff } from "lucide-react";
+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";
 
 export function ScanPage() {
   const [fileName, setFileName] = useState<string | null>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
   const inputRef = useRef<HTMLInputElement | null>(null);
   const navigate = useNavigate();
   const queryClient = useQueryClient();
@@ -15,16 +20,28 @@ export function ScanPage() {
     mutationFn: (file: File) => apiClient.createDiagnosis(file),
     onSuccess: (diagnosis) => {
       queryClient.invalidateQueries({ queryKey: ["diagnoses"] });
-      // show preview modal instead of immediate navigation
       setDiagnosisPreview(diagnosis);
       setPreviewOpen(true);
+      setFileName(null);
+      setPreviewUrl(null);
+      if (inputRef.current) inputRef.current.value = "";
     },
   });
 
   const handleFile = (f?: File) => {
     if (!f) return;
+    if (f.size > 5 * 1024 * 1024) {
+      alert("Ukuran file melebihi batas 5MB");
+      return;
+    }
     setFileName(f.name);
-    mutation.mutate(f);
+    setPreviewUrl(URL.createObjectURL(f));
+  };
+
+  const handleUpload = () => {
+    const file = inputRef.current?.files?.[0];
+    if (!file) return;
+    mutation.mutate(file);
   };
 
   const [previewOpen, setPreviewOpen] = useState(false);
@@ -38,23 +55,85 @@ export function ScanPage() {
   });
 
   return (
-    <main className="p-6">
+    <div className="space-y-6">
-      <h1 className="text-2xl font-semibold mb-4">Scan Tanaman</h1>
+      <div className="flex items-center justify-between gap-4">
-      <div className="grid grid-cols-3 gap-6">
+        <div>
-        <div className="col-span-2 bg-white p-6 rounded-lg shadow">
+          <p className="text-sm font-medium text-primary">Deteksi Penyakit</p>
+          <h1 className="text-3xl font-bold">Scan Tanaman</h1>
+        </div>
+        <Button asChild variant="outline">
+          <Link to="/diagnoses">Riwayat Diagnosis</Link>
+        </Button>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div className="lg:col-span-2 space-y-4">
+          <Card>
+            <CardContent className="p-6">
+              {/* Upload area */}
+              {!previewUrl ? (
                 <button
                   type="button"
-            className="w-full border-2 border-dashed border-green-300 rounded-md p-8 text-center cursor-pointer"
+                  className="w-full border-2 border-dashed border-green-300 rounded-xl p-12 text-center cursor-pointer hover:border-green-500 hover:bg-green-50/50 transition-colors group"
                   onClick={() => inputRef.current?.click()}
                 >
-            <div className="text-green-600">Area Unggah Gambar</div>
+                  <Camera className="mx-auto h-12 w-12 text-green-400 group-hover:text-green-500 transition-colors" />
-            <div className="mt-4 text-sm text-muted-foreground">
+                  <div className="mt-4 text-green-600 text-lg font-medium">
+                    Unggah Gambar Daun
+                  </div>
+                  <div className="mt-2 text-sm text-muted-foreground">
                     Seret & Lepas atau klik untuk memilih file (PNG/JPG, maks 5MB)
                   </div>
-            {fileName && (
-              <div className="mt-3 text-sm">Dipilih: {fileName}</div>
-            )}
                 </button>
+              ) : (
+                <div className="space-y-4">
+                  <div className="relative rounded-xl overflow-hidden bg-muted">
+                    <img
+                      src={previewUrl}
+                      alt="Preview"
+                      className="w-full max-h-80 object-contain"
+                    />
+                    <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"
+                      onClick={() => {
+                        setPreviewUrl(null);
+                        setFileName(null);
+                        if (inputRef.current) inputRef.current.value = "";
+                      }}
+                    >
+                      <X className="h-4 w-4" />
+                    </button>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <p className="text-sm text-muted-foreground">
+                      File: <span className="font-medium">{fileName}</span>
+                    </p>
+                    <div className="flex gap-3">
+                      <Button
+                        variant="outline"
+                        onClick={() => {
+                          setPreviewUrl(null);
+                          setFileName(null);
+                          if (inputRef.current) inputRef.current.value = "";
+                        }}
+                      >
+                        <ImageOff className="mr-2 h-4 w-4" />
+                        Ganti Foto
+                      </Button>
+                      <Button
+                        onClick={handleUpload}
+                        disabled={mutation.isPending}
+                        className="bg-green-600 hover:bg-green-700 text-white"
+                      >
+                        <Upload className="mr-2 h-4 w-4" />
+                        {mutation.isPending ? "Memproses..." : "Analisis"}
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              )}
+
               <input
                 ref={inputRef}
                 type="file"
@@ -62,102 +141,143 @@ export function ScanPage() {
                 className="hidden"
                 onChange={(e) => handleFile(e.target.files?.[0])}
               />
-          <div className="mt-6 flex items-center gap-3">
+
-            <button
+              {/* Error state */}
-              className="bg-green-600 text-white px-4 py-2 rounded-md"
-              onClick={() => inputRef.current?.click()}
-            >
-              Pilih Berkas
-            </button>
-            {mutation.isPending && (
-              <div className="text-sm text-muted-foreground">Mengunggah...</div>
-            )}
               {mutation.isError && (
-              <div className="text-sm text-red-600">
+                <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
-                  : String(mutation.error) || "Upload gagal"}
+                      : "Terjadi kesalahan saat memproses gambar"}
+                  </p>
                 </div>
               )}
+            </CardContent>
+          </Card>
         </div>
-        </div>
+
-        <aside className="bg-white p-6 rounded-lg shadow">
+        <aside className="space-y-4">
-          <h2 className="font-medium mb-2">Panduan Pengambilan Foto</h2>
+          <Card>
-          <ul className="text-sm space-y-2 text-muted-foreground">
+            <CardContent className="p-4">
-            <li>Jarak 15–30 cm dari daun</li>
+              <h2 className="font-medium mb-3">Panduan Pengambilan Foto</h2>
-            <li>Pencahayaan cukup, hindari blur</li>
+              <ul className="text-sm space-y-3 text-muted-foreground">
-            <li>Daun memenuhi bingkai</li>
+                <li className="flex items-start gap-2">
+                  <CheckCircle className="h-4 w-4 text-green-600 mt-0.5 shrink-0" />
+                  Jarak 15–30 cm dari daun
+                </li>
+                <li className="flex items-start gap-2">
+                  <CheckCircle className="h-4 w-4 text-green-600 mt-0.5 shrink-0" />
+                  Pencahayaan cukup, hindari blur
+                </li>
+                <li className="flex items-start gap-2">
+                  <CheckCircle className="h-4 w-4 text-green-600 mt-0.5 shrink-0" />
+                  Daun memenuhi bingkai
+                </li>
+                <li className="flex items-start gap-2">
+                  <CheckCircle className="h-4 w-4 text-green-600 mt-0.5 shrink-0" />
+                  Hindari bayangan dan background berantakan
+                </li>
               </ul>
+            </CardContent>
+          </Card>
         </aside>
       </div>
+
+      {/* Result Modal */}
       <Modal
         open={previewOpen}
         onClose={() => {
           setPreviewOpen(false);
           setDiagnosisPreview(null);
         }}
-        title={diagnosisPreview?.predictedDiseaseSlug ?? "Hasil Diagnosis"}
+        title={diagnosisPreview?.disease?.commonName ?? "Hasil Diagnosis"}
-        size="sm"
+        size="md"
         footer={
           diagnosisPreview && (
             <div className="flex items-center justify-end gap-3">
-              <button
+              <Button
-                className="px-3 py-2 rounded bg-green-600 text-white text-sm"
+                variant="outline"
-                onClick={() => navigate(`/diagnoses/${diagnosisPreview.id}`)}
-              >
-                Lihat detail
-              </button>
-              <button
-                className="px-3 py-2 rounded bg-gray-200 text-sm"
                 onClick={() => {
                   setPreviewOpen(false);
                   setDiagnosisPreview(null);
                 }}
               >
                 Tutup
-              </button>
+              </Button>
+              <Button
+                onClick={() => navigate(`/diagnoses/${diagnosisPreview.id}`)}
+                className="bg-green-600 hover:bg-green-700"
+              >
+                Lihat Detail Lengkap
+              </Button>
             </div>
           )
         }
       >
         {diagnosisPreview ? (
-          <div className="grid grid-cols-1 gap-4">
+          <div className="space-y-4">
-            {diagnosisPreview.imageUrl && (
+            <div className="flex items-center gap-2">
-              <img
+              <DiagnosisStatusBadge status={diagnosisPreview.status} />
-                src={diagnosisPreview.imageUrl}
+              {diagnosisPreview.confidence !== null && (
-                alt="hasil"
+                <span className="text-sm font-medium">
-                className="w-full rounded-md object-cover"
+                  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">
-                Prediksi:{" "}
+                  {diagnosisPreview.disease.summary}
-                <strong>{diagnosisPreview.predictedDiseaseSlug}</strong>
-              </p>
-              <p className="text-sm text-muted-foreground">
-                Confidence:{" "}
-                <strong>
-                  {Math.round((diagnosisPreview.confidence ?? 0) * 100)}%
-                </strong>
                 </p>
               </div>
+            )}
+
+            {diagnosisPreview.failureReason && (
+              <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">
+                {diagnosisPreview.failureReason}
+              </div>
+            )}
+
+            {diagnosisPreview.predictions.length > 0 && (
+              <div>
+                <h4 className="text-sm font-medium mb-2">Semua Prediksi</h4>
+                <div className="space-y-2">
+                  {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"
+                      >
+                        <span>{pred.modelLabel}</span>
+                        <span className="font-semibold">
+                          {(pred.confidence * 100).toFixed(1)}%
+                        </span>
+                      </div>
+                    ))}
+                </div>
+              </div>
+            )}
+
             <div className="pt-4 border-t">
-              <h4 className="text-sm font-medium mb-2">
+              <h4 className="text-sm font-medium mb-3">
-                Daftar Diagnosis Terbaru
+                Riwayat Diagnosis Terbaru
               </h4>
               {diagnosesQuery.isLoading && (
                 <div className="text-sm text-muted-foreground">
-                  Memuat daftar...
+                  Memuat riwayat...
-                </div>
-              )}
-              {diagnosesQuery.isError && (
-                <div className="text-sm text-red-600">
-                  Gagal memuat daftar diagnosis
                 </div>
               )}
               {!diagnosesQuery.isLoading && !diagnosesQuery.isError && (
                 <div className="space-y-2">
-                  {(diagnosesQuery.data ?? []).slice(0, 5).map((d) => (
+                  {(diagnosesQuery.data ?? [])
+                    .slice(0, 5)
+                    .map((d) => (
                       <div
                         key={d.id}
                         className="flex items-center justify-between rounded-md p-2 hover:bg-muted"
@@ -166,11 +286,11 @@ export function ScanPage() {
                           <img
                             src={d.imageUrl}
                             alt="thumb"
-                          className="h-10 w-10 rounded object-cover"
+                            className="h-10 w-10 rounded object-cover bg-muted"
                           />
                           <div className="text-sm">
                             <div className="font-medium">
-                            {d.disease?.commonName ?? d.predictedDiseaseSlug}
+                              {d.disease?.commonName ?? "Unknown"}
                             </div>
                             <div className="text-xs text-muted-foreground">
                               {new Date(d.createdAt).toLocaleString("id-ID")}
@@ -191,6 +311,6 @@ export function ScanPage() {
           </div>
         ) : null}
       </Modal>
-    </main>
+    </div>
   );
 }

apps/web/tailwind.config.ts

@@ -1,31 +0,0 @@
-export default {
-  darkMode: ['class'],
-  content: ['./index.html', './src/**/*.{ts,tsx}'],
-  theme: {
-    extend: {
-      colors: {
-        border: 'hsl(var(--border) / <alpha-value>)',
-        background: 'hsl(var(--background) / <alpha-value>)',
-        foreground: 'hsl(var(--foreground) / <alpha-value>)',
-        primary: {
-          DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
-          foreground: 'hsl(var(--primary-foreground) / <alpha-value>)',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
-          foreground: 'hsl(var(--muted-foreground) / <alpha-value>)',
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card) / <alpha-value>)',
-          foreground: 'hsl(var(--card-foreground) / <alpha-value>)',
-        },
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-    },
-  },
-  plugins: [],
-};

bun.lock

@@ -1,5 +1,6 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "devDependencies": {