refactor: improve Scan page layout and error messaging

- Reorganize sidebar: stack "Persyaratan Berkas" below "Panduan Pengambilan Foto"
- Add responsive grid layout for mobile devices
- Display service-specific error messages (uploader vs model service)
- Reduce padding and optimize spacing throughout
- Enhance error handling with source field detection

apps/web/src/lib/api-client.ts

@@ -15,6 +15,11 @@ import type {
 
 const apiBaseUrl = import.meta.env.VITE_API_BASE_URL ?? '';
 
+export interface ApiError extends Error {
+  status: number;
+  source?: 'uploader' | 'model-service' | 'unknown';
+}
+
 async function fetchApi<T>(endpoint: string, options?: RequestInit): Promise<T> {
   const url = `${apiBaseUrl}${endpoint}`;
   const response = await fetch(url, {
@@ -25,14 +30,21 @@ async function fetchApi<T>(endpoint: string, options?: RequestInit): Promise<T>
 
   if (!response.ok) {
     let errorMessage = `HTTP ${response.status}`;
+    let source: 'uploader' | 'model-service' | 'unknown' | undefined;
     try {
       const errorData = await response.json();
       if (errorData.error) {
         errorMessage = errorData.error;
       }
+      if (errorData.source) {
+        source = errorData.source;
+      }
     } catch {
     }
-    throw new Error(errorMessage);
+    const error = new Error(errorMessage) as ApiError;
+    error.status = response.status;
+    error.source = source;
+    throw error;
   }
 
   return response.json();

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

@@ -4,6 +4,15 @@ import { useMutation, useQueryClient, useQuery } from "@tanstack/react-query";
 import { apiClient } from "@/lib/api-client";
 import { Modal } from "@/components/ui/modal";
 import type { DiagnosisRecord } from "@zeavis/shared";
+import {
+  AlignCenter,
+  Camera,
+  Check,
+  CircleAlert,
+  Sun,
+  Upload,
+  ZoomIn,
+} from "lucide-react";
 
 export function ScanPage() {
   const [fileName, setFileName] = useState<string | null>(null);
@@ -37,24 +46,110 @@ export function ScanPage() {
     enabled: previewOpen,
   });
 
+  const getUploadErrorMessage = (error: unknown): string => {
+    let raw = "";
+    let source: string | undefined;
+
+    if (error instanceof Error) {
+      raw = error.message;
+      // Check if error has source property from our ApiError
+      source = (error as any).source;
+    } else if (typeof error === "string") {
+      raw = error;
+    }
+
+    // Distinguish between uploader service down vs model service down
+    if (raw.includes("HTTP 502")) {
+      if (source === "uploader") {
+        return "Layanan penyimpanan gambar sedang down. Hubungi administrator.";
+      }
+      if (source === "model-service") {
+        return "Layanan AI model sedang down. Hubungi administrator.";
+      }
+      return "Layanan backend sedang bermasalah (502). Silakan coba lagi.";
+    }
+
+    if (raw.includes("Failed to fetch")) {
+      return "Koneksi ke server gagal. Pastikan API dan koneksi jaringan aktif.";
+    }
+
+    if (raw.includes("Upload service error")) {
+      return "Layanan penyimpanan gambar sedang bermasalah. Coba beberapa saat lagi.";
+    }
+
+    if (raw.includes("Model service error")) {
+      return "Layanan AI model sedang bermasalah. Coba beberapa saat lagi.";
+    }
+
+    if (raw.includes("File type is not allowed")) {
+      return "Format file tidak didukung. Gunakan PNG, JPG, atau JPEG.";
+    }
+
+    if (raw.includes("File must be smaller")) {
+      return "Ukuran file terlalu besar. Maksimal 5 MB.";
+    }
+
+    if (raw.includes("File is empty")) {
+      return "File kosong. Silakan pilih file gambar yang valid.";
+    }
+
+    return raw || "Upload gagal. Silakan coba lagi.";
+  };
+
   return (
-    <main className="p-6">
-      <h1 className="text-2xl font-semibold mb-4">Scan Tanaman</h1>
-      <div className="grid grid-cols-3 gap-6">
-        <div className="col-span-2 bg-white p-6 rounded-lg shadow">
+    <main className="max-w-6xl mx-auto flex flex-col">
+      {/* Header */}
+      <div className="mb-4">
+        <h1 className="text-2xl font-bold text-emerald-800">Scan Tanaman</h1>
+        <p className="text-gray-500 mt-1" text-sm>
+          Unggah foto daun jagung untuk dianalisis oleh sistem AI kami secara
+          real-time.
+        </p>
+      </div>
+
+      {/* Main Content */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
+        {/* Left Sidebar */}
+        <div className="md:col-span-2 bg-white p-4 rounded-lg shadow h-fit">
+          <div className="text-black flex items-center gap-2 mb-3 text-lg font-semibold">
+            <Camera className="text-green-500" size={25} />
+            Area Unggah Gambar
+          </div>
+
           <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-md p-6 h-80 text-center cursor-pointer"
             onClick={() => inputRef.current?.click()}
           >
-            <div className="text-green-600">Area Unggah Gambar</div>
-            <div className="mt-4 text-sm text-muted-foreground">
-              Seret & Lepas atau klik untuk memilih file (PNG/JPG, maks 5MB)
+            <Upload
+              className="mx-auto text-green-500 bg-[#ECF4E8] p-3 rounded-lg"
+              size={60}
+            />
+            <div className="mt-2 text-muted-foreground">
+              <h3 className="font-semibold text-base pb-1">
+                Seret & Lepas Foto Daun
+              </h3>
+              <p className="text-xs pb-2">
+                atau klik untuk memilih file berkas dari perangkat Anda
+              </p>
+              <div className="flex flex-wrap gap-2 justify-center pt-1">
+                <div className="bg-[#ECF4E8] p-1.5 rounded-lg inline-flex items-center gap-1">
+                  <Check className="text-green-500" size={14} />
+                  <span className="text-xs">PNG, JPG, JPEG</span>
+                </div>
+                <div className="bg-[#ECF4E8] p-1.5 rounded-lg inline-flex items-center gap-1">
+                  <Check className="text-green-500" size={14} />
+                  <span className="text-xs">Maks. 5MB</span>
+                </div>
+              </div>
             </div>
             {fileName && (
-              <div className="mt-3 text-sm">Dipilih: {fileName}</div>
+              <div className="mt-2 text-xs text-slate-600">
+                Dipilih: {fileName}
+              </div>
             )}
           </button>
+
           <input
             ref={inputRef}
             type="file"
@@ -62,34 +157,133 @@ export function ScanPage() {
             className="hidden"
             onChange={(e) => handleFile(e.target.files?.[0])}
           />
-          <div className="mt-6 flex items-center gap-3">
+
+          <div className="mt-3 flex flex-col gap-2">
             <button
-              className="bg-green-600 text-white px-4 py-2 rounded-md"
+              className="w-full bg-green-600 text-white px-4 py-2.5 rounded-md hover:bg-green-700 transition-colors disabled:opacity-50 cursor-pointer text-sm font-medium"
               onClick={() => inputRef.current?.click()}
             >
               Pilih Berkas
             </button>
             {mutation.isPending && (
-              <div className="text-sm text-muted-foreground">Mengunggah...</div>
+              <div className="text-xs text-muted-foreground text-center">
+                Mengunggah...
+              </div>
             )}
             {mutation.isError && (
-              <div className="text-sm text-red-600">
-                {mutation.error instanceof Error
-                  ? mutation.error.message
-                  : String(mutation.error) || "Upload gagal"}
+              <div className="text-xs text-red-600 text-center">
+                {getUploadErrorMessage(mutation.error)}
               </div>
             )}
           </div>
         </div>
-        <aside className="bg-white p-6 rounded-lg shadow">
-          <h2 className="font-medium mb-2">Panduan Pengambilan Foto</h2>
-          <ul className="text-sm space-y-2 text-muted-foreground">
-            <li>Jarak 15–30 cm dari daun</li>
-            <li>Pencahayaan cukup, hindari blur</li>
-            <li>Daun memenuhi bingkai</li>
-          </ul>
-        </aside>
+
+        {/* Right Sidebar */}
+        <div className="md:col-span-1 flex flex-col gap-5">
+          {/* Card 1: Panduan Pengambilan Foto */}
+          <div className="bg-white rounded-2xl p-5 shadow-sm">
+            <div className="flex items-center gap-3 mb-4">
+              <div className="inline-flex h-9 w-9 items-center justify-center rounded-full">
+                <CircleAlert className="text-emerald-600" size={18} />
+              </div>
+              <h2 className="text-md font-bold text-emerald-800">
+                Panduan Pengambilan Foto
+              </h2>
+            </div>
+
+            <ul className="space-y-3">
+              <li className="flex items-center gap-3">
+                <div className="h-9 w-9 rounded-lg bg-emerald-50 flex items-center justify-center shrink-0">
+                  <ZoomIn className="text-emerald-600" size={18} />
+                </div>
+                <div className="text-sm text-slate-700">
+                  Jarak 15–30 cm dari daun
+                </div>
+              </li>
+              <li className="flex items-center gap-3">
+                <div className="h-9 w-9 rounded-lg bg-emerald-50 flex items-center justify-center shrink-0">
+                  <Sun className="text-emerald-600" size={18} />
+                </div>
+                <div className="text-sm text-slate-700">
+                  Pencahayaan cukup merata
+                </div>
+              </li>
+              <li className="flex items-center gap-3">
+                <div className="h-9 w-9 rounded-lg bg-emerald-50 flex items-center justify-center shrink-0">
+                  <AlignCenter className="text-emerald-600" size={18} />
+                </div>
+                <div className="text-sm text-slate-700">
+                  Posisi daun mengisi bingkai dengan jelas
+                </div>
+              </li>
+              <li className="flex items-center gap-3">
+                <div className="h-9 w-9 rounded-lg bg-emerald-50 flex items-center justify-center shrink-0">
+                  <Camera className="text-emerald-600" size={18} />
+                </div>
+                <div className="text-sm text-slate-700">
+                  Hindari bayangan atau pantulan pada daun & blur pada gambar
+                </div>
+              </li>
+            </ul>
+
+            <div className="mt-4">
+              <div className="rounded-lg overflow-hidden mt-4">
+                <div className="relative h-36 overflow-hidden bg-[url('/src/assets/images/scan-guide-bg.png')] bg-cover bg-center text-white md:h-44">
+                  <div className="absolute inset-0 bg-black/25" />
+                  <div className="absolute inset-0 bg-linear-to-b from-black/5 via-transparent to-black/35" />
+                  <div className="relative z-10 flex h-full flex-col items-center justify-center gap-5 text-center">
+                    <div className="relative flex h-full w-30 items-center justify-center mt-8">
+                      <span className="absolute left-0 top-0 h-4 w-4 border-l-2 border-t-2 border-l-lime-300 border-t-lime-300" />
+                      <span className="absolute right-0 top-0 h-4 w-4 border-r-2 border-t-2 border-r-lime-300 border-t-lime-300" />
+                      <span className="absolute bottom-0 left-0 h-4 w-4 border-b-2 border-l-2 border-b-lime-300 border-l-lime-300" />
+                      <span className="absolute bottom-0 right-0 h-4 w-4 border-b-2 border-r-2 border-b-lime-300 border-r-lime-300" />
+                      <span className="relative z-10 text-xs font-semibold tracking-[0.28em] text-white">
+                        AREA SCAN
+                      </span>
+                    </div>
+                    <div className="text-[11px] font-medium text-lime-100 bg-black/30 w-full py-1 rounded">
+                      Posisi ideal: daun memenuhi bingkai
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Card 2: Persyaratan Berkas */}
+          <div className="bg-white rounded-2xl shadow-sm p-5">
+            <h3 className="text-md font-bold text-emerald-800 flex items-center gap-3 mb-4">
+              Persyaratan Berkas
+            </h3>
+            <div className="flex flex-col gap-2">
+              {[
+                { label: "Format", value: "PNG, JPG, JPEG" },
+                { label: "Ukuran Maks.", value: "5 MB" },
+                { label: "Resolusi Min.", value: "512 × 512 px" },
+                { label: "Objek Foto", value: "Daun jagung tunggal" },
+              ].map((r, i) => (
+                <div
+                  key={i}
+                  className="flex items-center justify-between py-1.5"
+                  style={{ borderBottom: i < 3 ? "1px solid #f0f0f0" : "none" }}
+                >
+                  <span
+                    className="text-gray-400"
+                    style={{ fontSize: "0.75rem" }}
+                  >
+                    {r.label}
+                  </span>
+                  <span className="text-sm font-medium text-gray-700">
+                    {r.value}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
       </div>
+
+      {/* Modal Section */}
       <Modal
         open={previewOpen}
         onClose={() => {