Merge branch 'main' of https://github.com/ATLAS-PJK-GM007/ZeaVis-Edu into selly/frontend

.gitignore

@@ -4,7 +4,7 @@ node_modules/
 .env
 .env.*
 !.env.example
-
+.codegraph/
 dist/
 build/
 coverage/

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,67 +14,98 @@ 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>
+        <MainLayout>
+          <ExpertReviewsPage />
+        </MainLayout>
+      </AuthGuard>
+    ),
+  },
+  {
+    path: "/catalog",
+    element: (
+      <MainLayout>
+        <CatalogPage />
+      </MainLayout>
+    ),
+  },
+  {
+    path: "/catalog/:slug",
+    element: (
+      <MainLayout>
+        <DiseaseDetailPage />
+      </MainLayout>
+    ),
   },
-  { path: "/catalog", element: <CatalogPage /> },
-  { path: "/catalog/:slug", element: <DiseaseDetailPage /> },
 ]);
 
 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/disease-card.tsx

@@ -14,8 +14,8 @@ export function DiseaseCard({ disease }: DiseaseCardProps) {
     <Link to={`/catalog/${disease.slug}`} className="block transition-transform hover:scale-105">
       <Card className="h-full">
         <CardHeader>
-          <div className="flex items-start justify-between gap-4">
+          <div className="flex flex-wrap items-start justify-between gap-4">
-            <div className="flex-1">
+            <div className="min-w-0 flex-1">
               <CardTitle className="text-xl">{disease.commonName}</CardTitle>
               <CardDescription className="mt-1">{disease.label}</CardDescription>
             </div>

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/catalog-page.tsx

@@ -1,26 +1,40 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { Link } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
+import { AlertCircle } from 'lucide-react';
 import type { RiskLevel } from '@zeavis/shared';
 import { Button } from '@/components/ui/button';
-import { Card } from '@/components/ui/card';
+import { Card, CardContent } from '@/components/ui/card';
-import { DiseaseCard } from '@/components/disease-card';
+import { RiskBadge } from '@/components/risk-badge';
 import { apiClient } from '@/lib/api-client';
 
 export function CatalogPage() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const initialRisk = searchParams.get('risk') as RiskLevel | null;
+
   const [searchQuery, setSearchQuery] = useState('');
-  const [riskFilter, setRiskFilter] = useState<RiskLevel | 'all'>('all');
+  const [riskFilter, setRiskFilter] = useState<RiskLevel | 'all'>(initialRisk ?? 'all');
+
+  // Sync URL params with state
+  useEffect(() => {
+    if (initialRisk && initialRisk !== riskFilter) {
+      setRiskFilter(initialRisk);
+    }
+  }, [initialRisk]);
 
   const { data: diseases, isLoading, error } = useQuery({
     queryKey: ['diseases'],
     queryFn: () => apiClient.getDiseases(),
   });
 
-  const filteredDiseases = (diseases || []).filter((disease) => {
+  const filteredDiseases = (diseases || [])
+    .sort((a, b) => a.displayOrder - b.displayOrder)
+    .filter((disease) => {
       const matchesSearch =
         disease.commonName.toLowerCase().includes(searchQuery.toLowerCase()) ||
         disease.label.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      disease.summary.toLowerCase().includes(searchQuery.toLowerCase());
+        disease.summary.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        disease.symptoms.some((s) => s.toLowerCase().includes(searchQuery.toLowerCase()));
 
       const matchesRisk = riskFilter === 'all' || disease.riskLevel === riskFilter;
 
@@ -28,37 +42,32 @@ export function CatalogPage() {
     });
 
   return (
-    <main className="min-h-screen px-6 py-8">
+    <div className="space-y-6">
-      <div className="mx-auto max-w-6xl space-y-8">
-        <header className="space-y-4">
       <div className="flex items-center justify-between">
         <div>
+          <p className="text-sm font-medium text-primary">Edukasi Penyakit</p>
           <h1 className="text-3xl font-bold tracking-tight">Katalog Penyakit</h1>
-              <p className="mt-2 text-muted-foreground">
-                Pelajari tentang penyakit daun jagung dan cara penanganannya
-              </p>
         </div>
-            <Button asChild variant="outline">
-              <Link to="/dashboard">Kembali ke Dashboard</Link>
-            </Button>
       </div>
-        </header>
 
-        <div className="space-y-4">
+      {/* Filters */}
         <div className="flex flex-col gap-4 md:flex-row md:items-end">
           <div className="flex-1">
             <label htmlFor="search" className="block text-sm font-medium mb-2">
               Cari penyakit
             </label>
+            <div className="relative">
+              <AlertCircle className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
               <input
                 id="search"
                 type="text"
                 placeholder="Cari berdasarkan nama atau gejala..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm"
+                className="w-full rounded-md border border-border bg-background pl-10 pr-3 py-2 text-sm"
               />
             </div>
+          </div>
           <div>
             <label htmlFor="risk-filter" className="block text-sm font-medium mb-2">
               Filter risiko
@@ -66,7 +75,14 @@ export function CatalogPage() {
             <select
               id="risk-filter"
               value={riskFilter}
-                onChange={(e) => setRiskFilter(e.target.value as RiskLevel | 'all')}
+              onChange={(e) => {
+                const v = e.target.value as RiskLevel | 'all';
+                setRiskFilter(v);
+                const next = new URLSearchParams(searchParams);
+                if (v === 'all') next.delete('risk');
+                else next.set('risk', v);
+                setSearchParams(next);
+              }}
               className="rounded-md border border-border bg-background px-3 py-2 text-sm"
             >
               <option value="all">Semua Risiko</option>
@@ -76,7 +92,6 @@ export function CatalogPage() {
             </select>
           </div>
         </div>
-        </div>
 
         {isLoading && (
           <Card className="p-8 text-center text-muted-foreground">
@@ -97,13 +112,62 @@ export function CatalogPage() {
         )}
 
         {!isLoading && !error && filteredDiseases.length > 0 && (
-          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
             {filteredDiseases.map((disease) => (
-              <DiseaseCard key={disease.slug} disease={disease} />
+              <Link
+                key={disease.slug}
+                to={`/catalog/${disease.slug}`}
+                className="block transition-transform hover:scale-[1.03]"
+              >
+                <Card className="h-full rounded-2xl bg-white shadow-sm hover:shadow-md">
+                  <CardContent className="p-5 space-y-4">
+                    <div className="flex flex-wrap items-start justify-between gap-2">
+                      <div className="min-w-0">
+                        <h3 className="text-lg font-bold text-[#214B11]">
+                          {disease.commonName}
+                        </h3>
+                        <p className="text-sm text-slate-400 italic">
+                          {disease.label}
+                        </p>
+                      </div>
+                      <RiskBadge level={disease.riskLevel} />
+                    </div>
+
+                    <p className="text-sm text-muted-foreground line-clamp-3">
+                      {disease.summary}
+                    </p>
+
+                    {disease.symptoms.length > 0 && (
+                      <div>
+                        <h4 className="text-xs font-semibold text-muted-foreground mb-1">
+                          Gejala:
+                        </h4>
+                        <ul className="space-y-1">
+                          {disease.symptoms.slice(0, 2).map((symptom, index) => (
+                            <li key={index} className="text-xs text-muted-foreground flex items-start gap-1.5">
+                              <span className="text-primary mt-0.5">•</span>
+                              {symptom}
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    )}
+
+                    <div className="flex items-center justify-between pt-2 border-t">
+                      <div
+                        className="h-2.5 w-2.5 rounded-full"
+                        style={{ backgroundColor: disease.accentColor }}
+                      />
+                      <span className="text-xs text-primary font-medium">
+                        Lihat detail →
+                      </span>
+                    </div>
+                  </CardContent>
+                </Card>
+              </Link>
             ))}
           </div>
         )}
     </div>
-    </main>
   );
 }

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,25 @@ 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,
+        slug: d.slug,
+      })),
+    [diseases]
+  );
 
   const missionCards = [
     {
@@ -47,25 +66,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 +108,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
@@ -146,44 +157,25 @@ export function DashboardPage() {
                   perkembangan dan hasil deteksi penyakit daun jagung
                 </p>
               </div>
-                <Card>
-                  <CardHeader className="pb-2">
-                    <CardTitle className="text-sm font-medium text-muted-foreground">
-                      Total Penyakit
-                    </CardTitle>
-                  </CardHeader>
-                  <CardContent className="h-full flex flex-col justify-start pt-2">
-                    <div className="text-3xl font-bold">
-                      {summary.diseaseCount}
-                    </div>
-                    <Link
-                      to="/diagnoses"
-                      className="text-emerald-600 text-sm ml-auto hover:underline"
-                    >
-                      Lihat daftar
-                    </Link>
-                  </CardContent>
-                </Card>
 
+              {/* Total Diagnoses — the actual count from diagnoses table */}
               <Card>
                 <CardHeader className="pb-2">
                   <CardTitle className="text-sm font-medium text-muted-foreground">
-                      Total Diagnosis
+                    Total Diagnosa
                   </CardTitle>
                 </CardHeader>
                 <CardContent className="h-full flex flex-col justify-start pt-2">
                   <div className="text-3xl font-bold">
                     {summary.imageClassificationCount}
                   </div>
-                    <Link
+                  <Link to="/diagnoses" className="text-emerald-600 ml-auto hover:underline">
-                      to="/diagnoses"
-                      className="text-emerald-600 text-sm ml-auto hover:underline"
-                    >
                     Lihat daftar
                   </Link>
                 </CardContent>
               </Card>
 
+              {/* Menunggu Review */}
               <Card>
                 <CardHeader className="pb-2">
                   <CardTitle className="text-sm font-medium text-muted-foreground">
@@ -194,30 +186,42 @@ export function DashboardPage() {
                   <div className="text-3xl font-bold text-amber-600">
                     {summary.needsReviewCount}
                   </div>
-                    <Link
+                  <Link to="/diagnoses?status=needs_review" className="text-amber-600 ml-auto hover:underline">
-                      to="/diagnoses?status=needs_review"
-                      className="text-amber-600 text-sm ml-auto hover:underline"
-                    >
                     Lihat daftar
                   </Link>
                 </CardContent>
               </Card>
 
+              {/* Diagnosa Gagal */}
               <Card>
                 <CardHeader className="pb-2">
                   <CardTitle className="text-sm font-medium text-muted-foreground">
-                      Risiko Tinggi
+                    Gagal
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="h-full flex flex-col justify-start pt-2">
+                  <div className="text-3xl font-bold text-red-600">
+                    —
+                  </div>
+                  <Link to="/diagnoses?status=failed" className="text-red-600 ml-auto hover:underline">
+                    Lihat daftar
+                  </Link>
+                </CardContent>
+              </Card>
+
+              {/* Risiko Tinggi — catalog count, link to catalog filtered */}
+              <Card>
+                <CardHeader className="pb-2">
+                  <CardTitle className="text-sm font-medium text-muted-foreground">
+                    Kategori Risiko Tinggi
                   </CardTitle>
                 </CardHeader>
                 <CardContent className="h-full flex flex-col justify-start pt-2">
                   <div className="text-3xl font-bold text-red-600">
                     {summary.riskDistribution.high}
                   </div>
-                    <Link
+                  <Link to="/catalog?risk=high" className="text-red-600 ml-auto hover:underline">
-                      to="/diagnoses?risk=high"
+                    Lihat pustaka
-                      className="text-red-600 text-sm ml-auto hover:underline"
-                    >
-                      Lihat daftar
                   </Link>
                 </CardContent>
               </Card>
@@ -264,7 +268,7 @@ export function DashboardPage() {
             </div>
           </section>
 
-            {/* Diseases quick access */}
+          {/* Diseases quick access - now clickable, link to catalog/:slug */}
           <section className="space-y-4">
             <div className="mb-2 flex items-start justify-between">
               <div>
@@ -272,74 +276,73 @@ 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 hover:underline"
+                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) => (
+                  <Link key={d.slug} to={`/catalog/${d.slug}`}>
                     <Card
-                    key={d.name}
+                      className="rounded-2xl bg-white p-4 shadow-sm h-full transition-transform hover:scale-[1.03] hover:shadow-md cursor-pointer"
-                    className="rounded-2xl bg-white p-4 shadow-sm h-full"
                     >
                       <CardContent className="h-full p-4 flex flex-col justify-between">
                         <div className="flex items-start gap-3">
                           <div
-                          className="mt-1 h-3 w-3 rounded-full"
+                            className="mt-1 h-3 w-3 rounded-full shrink-0"
                             style={{ backgroundColor: d.color }}
                           />
                           <div>
-                          <div className="font-bold text-[#214B11]">
+                            <div className="text-sm font-bold text-[#214B11]">
                               {d.name}
                             </div>
-                          <div className="text-sm text-slate-400 italic mt-1">
+                            <div className="text-xs text-slate-400 italic mt-1">
                               {d.sci}
                             </div>
                           </div>
                         </div>
                       </CardContent>
                     </Card>
+                  </Link>
                 ))}
               </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/disease-detail-page.tsx

@@ -1,7 +1,7 @@
 import { useParams, Link } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import { isDiseaseSlug } from '@zeavis/shared';
-import { ArrowLeft, BookOpen, AlertCircle } from 'lucide-react';
+import { ArrowLeft, AlertCircle, BookOpen } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { RiskBadge } from '@/components/risk-badge';
@@ -20,37 +20,37 @@ export function DiseaseDetailPage() {
 
   if (!validatedSlug || error || (!isLoading && !disease)) {
     return (
-      <main className="min-h-screen px-6 py-8">
+      <div className="space-y-6">
-        <div className="mx-auto max-w-4xl">
+        <div className="flex items-center gap-4">
-          <Button asChild variant="ghost" className="mb-8">
+          <Button asChild variant="ghost">
             <Link to="/catalog">
               <ArrowLeft className="mr-2 h-4 w-4" />
               Kembali ke Katalog
             </Link>
           </Button>
+        </div>
         <Card className="p-8 text-center">
           <p className="text-muted-foreground">Materi tidak ditemukan</p>
         </Card>
       </div>
-      </main>
     );
   }
 
   if (isLoading) {
     return (
-      <main className="min-h-screen px-6 py-8">
+      <div className="space-y-6">
-        <div className="mx-auto max-w-4xl">
+        <div className="flex items-center gap-4">
-          <Button asChild variant="ghost" className="mb-8">
+          <Button asChild variant="ghost">
             <Link to="/catalog">
               <ArrowLeft className="mr-2 h-4 w-4" />
               Kembali ke Katalog
             </Link>
           </Button>
+        </div>
         <Card className="p-8 text-center">
           <p className="text-muted-foreground">Memuat materi...</p>
         </Card>
       </div>
-      </main>
     );
   }
 
@@ -59,8 +59,7 @@ export function DiseaseDetailPage() {
   }
 
   return (
-    <main className="min-h-screen px-6 py-8">
+    <div className="space-y-6">
-      <div className="mx-auto max-w-4xl space-y-8">
       <div className="flex items-center justify-between">
         <Button asChild variant="ghost">
           <Link to="/catalog">
@@ -141,6 +140,5 @@ export function DiseaseDetailPage() {
         </Button>
       </div>
     </div>
-    </main>
   );
 }

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

@@ -1,5 +1,5 @@
 import { FormEvent, useMemo, useState } from 'react';
-import { Link, useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
 import { useMutation, useQueries, useQueryClient } from '@tanstack/react-query';
 import type { DiseaseSlug } from '@zeavis/shared';
 import { Button } from '@/components/ui/button';
@@ -24,10 +24,14 @@ export function ExpertReviewsPage() {
 
   const reviews = reviewsQuery.data || [];
   const diseases = diseasesQuery.data || [];
-  const selected = useMemo(() => reviews.find((item) => item.id === selectedId) ?? reviews[0] ?? null, [reviews, selectedId]);
+  const selected = useMemo(
+    () => reviews.find((item) => item.id === selectedId) ?? reviews[0] ?? null,
+    [reviews, selectedId],
+  );
 
   const mutation = useMutation({
-    mutationFn: () => apiClient.reviewDiagnosis(selected!.id, {
+    mutationFn: () =>
+      apiClient.reviewDiagnosis(selected!.id, {
         verdict,
         correctedDiseaseSlug: verdict === 'corrected' ? correctedDiseaseSlug || undefined : undefined,
         notes,
@@ -47,31 +51,30 @@ export function ExpertReviewsPage() {
     await mutation.mutateAsync();
   }
 
+  const isLoading = reviewsQuery.isPending || diseasesQuery.isPending;
+
   return (
-    <main className="min-h-screen bg-background">
+    <div className="space-y-6">
-      <header className="border-b bg-card">
+      <div className="flex items-center justify-between">
-        <div className="mx-auto flex max-w-7xl items-center justify-between p-6">
+        <div>
-          <h1 className="text-2xl font-bold">Expert Reviews</h1>
+          <p className="text-sm font-medium text-primary">Review Pakar</p>
-          <Link to="/dashboard">
+          <h1 className="text-3xl font-bold">Diagnosis Menunggu Review</h1>
-            <Button variant="outline">Dashboard</Button>
-          </Link>
         </div>
-      </header>
+      </div>
 
-      <div className="mx-auto max-w-7xl p-6">
       <div className="grid gap-6 lg:grid-cols-3">
         {/* 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 ? (
+            {isLoading ? (
-                <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
@@ -111,10 +114,10 @@ export function ExpertReviewsPage() {
 
         {/* Right: Detail and form */}
         <div className="lg:col-span-2 space-y-6">
-            {reviewsQuery.isPending || diseasesQuery.isPending ? (
+          {isLoading ? (
             <Card>
               <CardContent className="p-6 text-center text-muted-foreground">
-                  Loading reviews and diseases...
+                Memuat diagnosis...
               </CardContent>
             </Card>
           ) : selected ? (
@@ -147,10 +150,9 @@ export function ExpertReviewsPage() {
                     </div>
                   </div>
 
-                    {/* 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 +169,12 @@ 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 +189,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,16 +201,15 @@ 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>
 
-                      {/* Disease selection (only if corrected) */}
                     {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 +218,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}
@@ -228,34 +228,32 @@ export function ExpertReviewsPage() {
                       </div>
                     )}
 
-                      {/* 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}
                       />
                     </div>
 
-                      {/* Submit button */}
                     <Button
                       type="submit"
                       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,13 +263,12 @@ 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>
           )}
         </div>
       </div>
     </div>
-    </main>
   );
 }

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,9 +1,12 @@
-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 { 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 {
   AlignCenter,
   Camera,
@@ -16,6 +19,7 @@ import {
 
 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();
@@ -24,16 +28,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);
@@ -290,68 +306,93 @@ export function ScanPage() {
           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"
@@ -360,11 +401,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")}

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": {

docker-compose.yml

@@ -14,7 +14,7 @@ services:
       - .env
     labels:
       traefik.enable: "true"
-      traefik.http.routers.zeavis-web.rule: Host(`zeavisedu.asepharyana.tech`)
+      traefik.http.routers.zeavis-web.rule: Host(`zeavisedu.asepharyana.my.id`)
       traefik.http.routers.zeavis-web.entrypoints: websecure
       traefik.http.routers.zeavis-web.tls: "true"
       traefik.http.routers.zeavis-web.tls.certresolver: letsencrypt
@@ -31,11 +31,11 @@ services:
     environment:
       NODE_ENV: production
       API_PORT: "3000"
-      WEB_APP_URL: https://zeavisedu.asepharyana.tech
+      WEB_APP_URL: https://zeavisedu.asepharyana.my.id
       ML_SERVICE_URL: ${ML_SERVICE_URL:-http://zeavis-ml:8000}
     labels:
       traefik.enable: "true"
-      traefik.http.routers.zeavis-api.rule: Host(`api.zeavisedu.asepharyana.tech`)
+      traefik.http.routers.zeavis-api.rule: Host(`api-zeavisedu.asepharyana.my.id`)
       traefik.http.routers.zeavis-api.entrypoints: websecure
       traefik.http.routers.zeavis-api.tls: "true"
       traefik.http.routers.zeavis-api.tls.certresolver: letsencrypt
@@ -54,7 +54,7 @@ services:
       MODEL_INPUT_SIZE: "224"
     labels:
       traefik.enable: "true"
-      traefik.http.routers.zeavis-ml.rule: Host(`ml.zeavisedu.asepharyana.tech`)
+      traefik.http.routers.zeavis-ml.rule: Host(`ml-zeavisedu.asepharyana.my.id`)
       traefik.http.routers.zeavis-ml.entrypoints: websecure
       traefik.http.routers.zeavis-ml.tls: "true"
       traefik.http.routers.zeavis-ml.tls.certresolver: letsencrypt