feat: push deploy pipeline - auth, sidebar layout, ML artifacts, LFS

Notable changes:
- Add .gitattributes for LFS tracking on ML model artifacts
- Add AuthGuard to all protected routes + login/register/logout flow
- Add collapsible Sidebar replacing old Navbar
- Redesign MainLayout with sidebar + mobile header
- Add password show/hide toggle to AuthForm
- Add Logout button to MobileNav
- Update footer credit to ATLAS Project - Pijak x IBM SkillsBuild
- Update deploy.yml: generate ONNX in CI (vs HuggingFace download)
- Remove deprecated ML scripts (download/upload model .sh, .gitignore)
- Remove stale MEMORY.md
- Add ML model artifacts (TFLite, SavedModel, TFJS)
- Update notebook.ipynb training pipeline

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

.gitattributes

@@ -0,0 +1,6 @@
+best_model/best_model.keras filter=lfs diff=lfs merge=lfs -text
+model/saved_model/variables/variables.data-00000-of-00001 filter=lfs diff=lfs merge=lfs -text
+model/tfjs_model/*.bin filter=lfs diff=lfs merge=lfs -text
+**/best_model.keras filter=lfs diff=lfs merge=lfs -text
+**/variables.data* filter=lfs diff=lfs merge=lfs -text
+**/tfjs_model/*.bin filter=lfs diff=lfs merge=lfs -text

.github/workflows/deploy.yml

@@ -28,6 +28,8 @@ jobs:
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4
+        with:
+          lfs: true
 
       - name: Set image prefix
         run: echo "IMAGE_PREFIX=ghcr.io/${GITHUB_REPOSITORY,,}" >> "$GITHUB_ENV"
@@ -35,19 +37,19 @@ jobs:
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
 
-      - name: Download ONNX model from Hugging Face Hub
+      - name: Set up Python for ONNX conversion
         if: matrix.service.name == 'ml'
-        env:
-          HF_TOKEN: ${{ secrets.HUGGINGFACE_TOKEN }}
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.11'
+
+      - name: Generate ONNX model artifact
+        if: matrix.service.name == 'ml'
+        working-directory: Machine_Learning
         run: |
-          mkdir -p Machine_Learning/model
-          if [ -n "$HF_TOKEN" ]; then
-            AUTH_HEADER="-H Authorization: Bearer $HF_TOKEN"
-          fi
-          curl -fL $AUTH_HEADER \
-            "https://huggingface.co/MythEclipse2737/zeavis-edu-model/resolve/main/model/model.onnx" \
-            -o "Machine_Learning/model/model.onnx"
-          ls -lh Machine_Learning/model/model.onnx
+          python -m pip install --upgrade pip
+          python -m pip install 'tensorflow>=2.13.0' 'tf2onnx>=1.16.1' 'onnx>=1.16.0'
+          python convert_onnx.py
 
       - name: Log in to GHCR
         uses: docker/login-action@v3

MEMORY.md

@@ -1,27 +0,0 @@
-# Durable Memory Wiki
-
-Consolidated knowledge and long-term facts.
-
-## Core Learnings
-
-- **Topic:** error response daemon
-  **Context:** Failure observation: Exit code 1
-Error response from daemon: No such container: telemetry-prometheus
-  *Promoted on:* 2026-06-11T12:19:50.638Z
-
-- **Topic:** error 32603 pattern
-  **Context:** Failure observation: MCP error -32603: pattern must be a non-empty string.
-  *Promoted on:* 2026-06-11T12:19:50.638Z
-
-- **Topic:** traceback recent string
-  **Context:** Failure observation: Exit code 1
-Traceback (most recent call last):
-  File "<string>", line 25, in <module>
-    with urllib.request.urlopen(req) as resp:
-         ~~~~~~~~~~~~~~~~~~~~~~^^^^^
-  File "/usr/lib/python3.14/ur
-  *Promoted on:* 2026-06-11T12:58:56.451Z
-
-- **Topic:** exist current working
-  **Context:** Failure observation: File does not exist. Note: your current working directory is /mnt/code/ZeaVis-Edu.
-  *Promoted on:* 2026-06-11T13:03:39.178Z

Machine_Learning/.gitignore

@@ -1,9 +0,0 @@
-# Model artifacts — not stored in git. Uploaded to Hugging Face Hub after training.
-best_model/
-model/
-dataset/
-dataset.zip
-venv/
-__pycache__/
-*.pyc
-*.pyo

Machine_Learning/download_model.sh

@@ -1,43 +0,0 @@
-#!/usr/bin/env bash
-set -euo pipefail
-
-# Download best_model.keras from Hugging Face Hub.
-#
-# Usage:
-#   bash download_model.sh                 # public repo — no auth needed
-#   HF_TOKEN=hf_xxx bash download_model.sh # private repo
-
-SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
-DEST="${SCRIPT_DIR}/best_model/best_model.keras"
-REPO_ID="MythEclipse2737/zeavis-edu-model"
-
-: "${HF_TOKEN:=}"
-
-FORCE="${1:-}"
-
-if [ -f "$DEST" ] && [ "$FORCE" != "--force" ]; then
-    echo "Model already exists at $DEST (use --force to overwrite)"
-    exit 0
-fi
-
-mkdir -p "$(dirname "$DEST")"
-
-if command -v huggingface-cli &>/dev/null; then
-    huggingface-cli download "$REPO_ID" "best_model/best_model.keras" --local-dir "$(dirname "$DEST")" $( [ -n "$HF_TOKEN" ] && echo "--token $HF_TOKEN" )
-elif command -v hf &>/dev/null; then
-    hf download "$REPO_ID" "best_model/best_model.keras" --output "$DEST"
-elif command -v curl &>/dev/null; then
-    URL="https://huggingface.co/${REPO_ID}/resolve/main/best_model/best_model.keras"
-    curl -fL -o "$DEST" $( [ -n "$HF_TOKEN" ] && echo "-H Authorization: Bearer $HF_TOKEN" ) "$URL"
-else
-    echo "ERROR: Need curl or huggingface-cli installed."
-    exit 1
-fi
-
-if [ -f "$DEST" ]; then
-    echo "Downloaded: $DEST"
-    ls -lh "$DEST"
-else
-    echo "ERROR: Download failed."
-    exit 1
-fi

Machine_Learning/model/saved_model/fingerprint.pb

@@ -0,0 +1 @@
+©©ءّ¸ث‡ق¬
§¢¥ؤج™إأà
’–‎سèز÷ئخ
 ’ڑھ¸¥ؤي—·
(،وظ—ئƒ„÷ٌ
2
:10851638082828504866

Machine_Learning/upload_model.sh

@@ -1,62 +0,0 @@
-#!/usr/bin/env bash
-set -euo pipefail
-
-# Upload exported model artifacts (ONNX, TFLite) to Hugging Face Hub.
-#
-# Usage:
-#   bash upload_model.sh
-#   HF_TOKEN=hf_xxx bash upload_model.sh
-
-SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
-REPO_ID="MythEclipse2737/zeavis-edu-model"
-: "${HF_TOKEN:=}"
-: "${HF_USER:=MythEclipse2737}"
-
-echo "Uploading model artifacts to Hugging Face Hub..."
-
-if ! command -v huggingface-cli &>/dev/null && ! python3 -c "from huggingface_hub import HfApi" 2>/dev/null; then
-    echo "ERROR: huggingface_hub not installed. pip install huggingface_hub"
-    exit 1
-fi
-
-python3 << PYEOF
-import os, sys
-sys.path.insert(0, "${SCRIPT_DIR}")
-
-from huggingface_hub import HfApi
-
-api = HfApi(token="${HF_TOKEN}" if "${HF_TOKEN}" else None)
-
-model_dir = "${SCRIPT_DIR}/model"
-onnx = os.path.join(model_dir, "model.onnx")
-tflite = os.path.join(model_dir, "model.tflite")
-saved_model_pb = os.path.join(model_dir, "saved_model", "saved_model.pb")
-repo_id = "${REPO_ID}"
-
-files_to_upload = []
-for local, remote in [
-    (onnx, "model/model.onnx"),
-    (tflite, "model/model.tflite"),
-    (saved_model_pb, "model/saved_model/saved_model.pb"),
-]:
-    if os.path.isfile(local):
-        files_to_upload.append((local, remote))
-        print(f"  Queued: {local} -> {remote}")
-    else:
-        print(f"  Skip (not found): {local}")
-
-for local, remote in files_to_upload:
-    print(f"  Uploading {remote}...")
-    api.upload_file(
-        path_or_fileobj=local,
-        path_in_repo=remote,
-        repo_id=repo_id,
-        repo_type="model",
-    )
-    print(f"  ✅ {remote} uploaded")
-
-if not files_to_upload:
-    print("  Nothing to upload.")
-else:
-    print(f"Upload complete: https://huggingface.co/{repo_id}")
-PYEOF

apps/web/src/app.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import {
   createBrowserRouter,
@@ -6,6 +5,7 @@ import {
   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";
@@ -15,75 +15,120 @@ import { DiagnosisDetailPage } from "@/pages/diagnosis-detail-page";
 import { ExpertReviewsPage } from "@/pages/expert-reviews-page";
 import { DiagnosesPage } from "@/pages/diagnoses-page";
 import { TelemetryPage } from "@/pages/telemetry-page";
+import { LoginPage } from "@/pages/login-page";
+import { RegisterPage } from "@/pages/register-page";
 import { MainLayout } from "@/components/layout/main-layout";
+import { useEffect } from "react";
+import { useAuthStore } from "@/store/auth-store";
+import { apiClient } from "@/lib/api-client";
+
+function LogoutProses() {
+  const setUser = useAuthStore((state) => state.setUser);
+
+  useEffect(() => {
+    apiClient.logout().then(() => {
+      setUser(null);
+
+    }).catch((error) => {
+      console.error("Oops, gagal logout dari server:", error);
+      setUser(null); 
+    });
+  }, [setUser]);
+
+  return <Navigate to="/login" replace />;
+}
 import { trackPageView, trackError } from "./lib/telemetry";
 
 const queryClient = new QueryClient();
 
 const router = createBrowserRouter([
-  { path: "/", element: <Navigate to="/dashboard" replace /> },
+  { path: "/", element: <Navigate to="/login" replace /> },
+  { path: "/login", element: <LoginPage /> },
+  { path: "/register", element: <RegisterPage /> },
   {
     path: "/dashboard",
     element: (
-      <MainLayout>
-        <DashboardPage />
-      </MainLayout>
+      <AuthGuard>
+        <MainLayout>
+          <DashboardPage />
+        </MainLayout>
+      </AuthGuard>
     ),
   },
   {
     path: "/scan",
     element: (
-      <MainLayout>
-        <ScanPage />
-      </MainLayout>
+      <AuthGuard>
+        <MainLayout>
+          <ScanPage />
+        </MainLayout>
+      </AuthGuard>
     ),
   },
   {
     path: "/library",
     element: (
-      <MainLayout>
-        <LibraryPage />
-      </MainLayout>
+      <AuthGuard>
+        <MainLayout>
+          <LibraryPage />
+        </MainLayout>
+      </AuthGuard>
     ),
   },
   {
     path: "/diagnoses",
     element: (
-      <MainLayout>
-        <DiagnosesPage />
-      </MainLayout>
+      <AuthGuard>
+        <MainLayout>
+          <DiagnosesPage />
+        </MainLayout>
+      </AuthGuard>
     ),
   },
   {
     path: "/diagnoses/:id",
     element: (
-      <MainLayout>
-        <DiagnosisDetailPage />
-      </MainLayout>
+      <AuthGuard>
+        <MainLayout>
+          <DiagnosisDetailPage />
+        </MainLayout>
+      </AuthGuard>
     ),
   },
   {
     path: "/expert/reviews",
     element: (
-      <MainLayout>
-        <ExpertReviewsPage />
-      </MainLayout>
+      <AuthGuard requireExpert={true}>
+        <MainLayout>
+          <ExpertReviewsPage />
+        </MainLayout>
+      </AuthGuard>
     ),
   },
   {
     path: "/catalog",
     element: (
-      <MainLayout>
-        <CatalogPage />
-      </MainLayout>
+      <AuthGuard>
+        <MainLayout>
+          <CatalogPage />
+        </MainLayout>
+      </AuthGuard>
     ),
   },
   {
     path: "/catalog/:slug",
     element: (
-      <MainLayout>
-        <DiseaseDetailPage />
-      </MainLayout>
+      <AuthGuard>
+        <MainLayout>
+          <DiseaseDetailPage />
+        </MainLayout>
+      </AuthGuard>
+    ),
+  },
+  {
+    path: "/logout",
+    element: (
+      <LogoutProses />
     ),
   },
   {

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

@@ -1,4 +1,5 @@
 import { FormEvent, useState } from 'react';
+import { Eye, EyeOff } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
@@ -17,6 +18,7 @@ export function AuthForm({ mode, isSubmitting, error, googleOAuthEnabled, onSubm
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
 
   async function handleSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
@@ -53,10 +55,19 @@ export function AuthForm({ mode, isSubmitting, error, googleOAuthEnabled, onSubm
           </div>
           <div className="space-y-2">
             <Label htmlFor="password">Password</Label>
-            <Input id="password" type="password" minLength={8} value={password} onChange={(event) => {
-              setPassword(event.target.value);
-              onFieldChange?.();
-            }} required />
+            <div className="relative">
+              <Input id="password" type={showPassword ? "text" : "password"} minLength={8} value={password} onChange={(event) => {
+                setPassword(event.target.value);
+                onFieldChange?.();
+              }} required />
+              <button
+                type="button"
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground focus:outline-none"
+                onClick={() => setShowPassword(!showPassword)}
+              >
+                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              </button>
+            </div>
           </div>
           {error && <p className="text-sm text-red-600" role="alert">{error}</p>}
           <Button className="w-full" type="submit" disabled={isSubmitting}>

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

@@ -1,9 +1,9 @@
 export function Footer() {
   return (
-    <footer className="border-t bg-[#ECF4E8]">
-      <div className="mx-auto max-w-6xl px-6 py-6 text-sm text-muted-foreground text-center">
-        © 2026 ZeaVis Edu - AI for Smart Education
+    <footer className="h-18 shrink-0 border-t bg-[#ECF4E8] flex items-center justify-center">
+      <div className="mx-auto max-w-5xl px-6 py-6 text-sm text-muted-foreground text-center">
+        &copy; {new Date().getFullYear()} ATLAS Project - Pijak in collaboration with IBM SkillsBuild.
       </div>
     </footer>
   );
-}
+}

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

@@ -1,17 +1,60 @@
-import { ReactNode } from "react";
-import { Navbar } from "./navbar";
+import { ReactNode, useState } from "react";
 import { Footer } from "./footer";
+import { Sidebar } from "./sidebar";
+import { MobileNav } from "./mobile-nav";
+import { Leaf, Menu } from "lucide-react";
 
 type Props = { children: ReactNode };
 
 export function MainLayout({ children }: Props) {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
   return (
-    <div className="min-h-screen flex flex-col bg-[#ECF4E8]">
-      <Navbar />
-      <main className="mx-auto w-full max-w-6xl flex-1 px-4 sm:px-6 py-6 sm:py-8">
-        {children}
-      </main>
-      <Footer />
+    <div className="flex w-full h-screen bg-[#ECF4E8] overflow-hidden relative">
+      {/* Sidebar Desktop */}
+      <Sidebar />
+
+      {/* Main Content */}
+      <div className="flex-1 flex flex-col w-full h-screen overflow-hidden">
+        {/* Header Mobile */}
+        <div className="md:hidden flex items-center justify-between px-5 h-20 bg-[#306D29] text-white shrink-0 shadow-sm z-20">
+          <div className="flex items-center gap-3 font-semibold">
+            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-[#48A111]">
+              <Leaf className="h-5 w-5 text-white" />
+            </div>
+            <div className="leading-tight">
+              <div className="text-[17px] font-bold">ZeaVis Edu</div>
+              <div className="text-[11px] font-normal text-[#9AD872]">
+                Smart AI for Corn Disease Detection
+              </div>
+            </div>
+          </div>
+
+          <button
+            onClick={() => setMobileMenuOpen(true)}
+            className="rounded-xl p-2 bg-white/10 text-white hover:bg-white/20 transition-colors shrink-0"
+            aria-label="Buka menu navigasi"
+          >
+            <Menu className="h-6 w-6" />
+          </button>
+        </div>
+
+        {/* Mobile Navigation */}
+        <MobileNav
+          open={mobileMenuOpen}
+          onClose={() => setMobileMenuOpen(false)}
+        />
+
+        {/* Page Content */}
+        <main className="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8">
+          <div className="mx-auto w-full max-w-6xl flex flex-col">
+            {children}
+          </div>
+        </main>
+
+        {/* Footer */}
+        <Footer />
+      </div>
     </div>
   );
 }

apps/web/src/components/layout/mobile-nav.tsx

@@ -1,47 +1,55 @@
 import { createPortal } from "react-dom";
 import { Link, useLocation } from "react-router-dom";
-import { X, Leaf } from "lucide-react";
+import {
+  X,
+  Leaf,
+  LogOut,
+  LayoutDashboard,
+  Scan,
+  Activity,
+  BookOpen,
+  UserCheck,
+  ChartBar,
+} from "lucide-react";
 
 type Props = {
   open: boolean;
   onClose: () => void;
 };
 
+// Daftar menu disamakan persis dengan sidebar.tsx
 const NAV_ITEMS = [
-  { path: "/dashboard", label: "Dashboard" },
-  { path: "/scan", label: "Scan Tanaman" },
-  { path: "/diagnoses", label: "Diagnosa" },
-  { path: "/catalog", label: "Pustaka", altPath: "/library" },
-  { path: "/expert/reviews", label: "Review" },
-  { path: "/telemetry", label: "Telemetry" },
+  { path: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
+  { path: "/scan", label: "Scan Daun", icon: Scan },
+  { path: "/diagnoses", label: "Diagnosa", icon: Activity },
+  { path: "/catalog", label: "Pustaka", icon: BookOpen, altPath: "/library" },
+  { path: "/expert/reviews", label: "Tinjauan Pakar", icon: UserCheck },
+  { path: "/telemetry", label: "Telemetry", icon: ChartBar },
 ];
 
 export function MobileNav({ open, onClose }: Props) {
   const location = useLocation();
-
   const isActive = (path: string) => location.pathname === path;
 
   const navContent = (
     <div
-      // 2. Ubah z-50 menjadi z-[999] agar levelnya mentok paling atas
-      className={`fixed inset-0 z-[999] lg:hidden transition-opacity duration-300 ease-in-out ${
+      className={`fixed inset-0 z-999 lg:hidden transition-opacity duration-300 ease-in-out ${
         open ? "opacity-100" : "opacity-0 pointer-events-none"
       }`}
-      aria-hidden={!open}
     >
       {/* Backdrop */}
       <div
-        className="fixed inset-0 bg-black/60 backdrop-blur-sm"
+        className="fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity duration-300 ease-in-out"
         onClick={onClose}
       />
 
-      {/* Panel */}
+      {/* Menu */}
       <div
-        className={`fixed inset-y-0 right-0 z-[999] flex w-full max-w-sm flex-col bg-[#306D29] shadow-2xl transition-transform duration-300 ease-in-out ${
+        className={`fixed inset-y-0 right-0 z-999 flex w-full max-w-sm flex-col bg-[#306D29] shadow-2xl transition-transform duration-300 ease-in-out ${
           open ? "translate-x-0" : "translate-x-full"
         }`}
       >
-        {/* Header */}
+        {/* Header Menu Mobile */}
         <div className="flex items-center justify-between px-6 h-20 border-b border-white/10 shrink-0">
           <div className="flex items-center gap-3 font-semibold text-white">
             <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-[#48A111]">
@@ -50,42 +58,57 @@ export function MobileNav({ open, onClose }: Props) {
               </Link>
             </div>
             <div className="leading-tight">
-              <div className="text-lg font-bold">ZeaVis Edu</div>
-              <div className="text-[13px] font-normal text-[#9AD872]">
+              <div className="text-[18px] font-bold">ZeaVis Edu</div>
+              <div className="text-[12px] font-normal text-[#9AD872]">
                 Smart AI for Corn Disease Detection
               </div>
             </div>
           </div>
           <button
             onClick={onClose}
-            className="rounded-full p-2 text-white/80 hover:bg-white/10 hover:text-white transition-colors"
+            className="rounded-xl p-2 bg-white/10 text-white hover:bg-white/20 transition-colors"
             aria-label="Tutup menu"
           >
             <X className="h-6 w-6" />
           </button>
         </div>
 
-        {/* Nav items */}
-        <nav className="flex flex-col gap-2 overflow-y-auto px-4 py-6 flex-1">
+        {/* Item Menu */}
+        <nav className="flex flex-col gap-2 overflow-y-auto px-5 py-6 flex-1">
           {NAV_ITEMS.map((item) => {
             const active =
               isActive(item.path) || (item.altPath && isActive(item.altPath));
+            const Icon = item.icon; // Ambil icon dari daftar
+
             return (
               <Link
                 key={item.path}
                 to={item.path}
                 onClick={onClose}
-                className={`rounded-full px-4 py-3 text-[16px] font-medium transition-colors ${
+                className={`flex items-center gap-3 rounded-full px-4 py-3 text-[16px] font-medium transition-colors ${
                   active
                     ? "bg-[#48A111] text-white shadow-sm"
                     : "text-white/85 hover:bg-white/10 hover:text-white"
                 }`}
               >
-                {item.label}
+                <Icon className="w-5 h-5 shrink-0" />
+                <span>{item.label}</span>
               </Link>
             );
           })}
         </nav>
+
+        {/* Logout */}
+        <div className="p-5 border-t border-white/10 shrink-0">
+          <Link
+            to="/logout"
+            onClick={onClose}
+            className="flex items-center justify-between w-full rounded-full bg-[#ECF4E8] border border-white/50 px-5 py-3 text-[16px] font-medium text-black transition-colors hover:bg-white/80"
+          >
+            <span>Keluar</span>
+            <LogOut className="h-5 w-5 shrink-0" />
+          </Link>
+        </div>
       </div>
     </div>
   );

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

@@ -1,91 +0,0 @@
-import { useState } from "react";
-import { Link, useLocation } from "react-router-dom";
-import { Leaf, Menu } from "lucide-react";
-import { MobileNav } from "./mobile-nav";
-
-export function Navbar() {
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-  const location = useLocation();
-  //
-
-  const isActive = (path: string) => location.pathname === path;
-
-  const navLinkClassName = (active: boolean) =>
-    [
-      "inline-flex items-center rounded-full px-4 py-2 text-[16px] font-medium transition-colors",
-      active
-        ? "bg-[#48A111] text-white shadow-sm"
-        : "text-white/85 hover:bg-white/10 hover:text-white",
-    ].join(" ");
-
-  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">
-        <div className="flex items-center gap-3 font-semibold">
-          <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-[#48A111] text-primary-foreground">
-            <Link to="/dashboard">
-              <Leaf className="h-5 w-5" />
-            </Link>
-          </div>
-          <div className="leading-tight font-bold text-2xl">
-            <div>ZeaVis Edu</div>
-            <div className="text-[14px] font-normal text-[#9AD872]">
-              Smart AI for Corn Disease Detection
-            </div>
-          </div>
-        </div>
-
-        <nav className="hidden lg:flex items-center gap-2">
-          <Link
-            to="/dashboard"
-            className={navLinkClassName(isActive("/dashboard"))}
-          >
-            Dashboard
-          </Link>
-          <Link to="/scan" className={navLinkClassName(isActive("/scan"))}>
-            Scan Tanaman
-          </Link>
-          <Link
-            to="/diagnoses"
-            className={navLinkClassName(isActive("/diagnoses"))}
-          >
-            Diagnosa
-          </Link>
-          <Link
-            to="/catalog"
-            className={navLinkClassName(
-              isActive("/catalog") || isActive("/library"),
-            )}
-          >
-            Pustaka
-          </Link>
-          <Link
-            to="/expert/reviews"
-            className={navLinkClassName(isActive("/expert/reviews"))}
-          >
-            Review
-          </Link>
-          <Link
-            to="/telemetry"
-            className={navLinkClassName(isActive("/telemetry"))}
-          >
-            Telemetry
-          </Link>
-        </nav>
-
-        <button
-          onClick={() => setMobileMenuOpen(true)}
-          className="lg:hidden rounded-full p-2 text-white/80 hover:bg-white/10 hover:text-white transition-colors"
-          aria-label="Buka menu navigasi"
-        >
-          <Menu className="h-6 w-6" />
-        </button>
-
-        <MobileNav
-          open={mobileMenuOpen}
-          onClose={() => setMobileMenuOpen(false)}
-        />
-      </div>
-    </header>
-  );
-}

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

@@ -0,0 +1,139 @@
+import { useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import {
+  Leaf,
+  LogOut,
+  Menu,
+  ChevronLeft,
+  LayoutDashboard,
+  Scan,
+  Activity,
+  BookOpen,
+  UserCheck,
+  ChartBar,
+} from "lucide-react";
+import { MobileNav } from "./mobile-nav";
+
+const NAV_ITEMS = [
+  { path: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
+  { path: "/scan", label: "Pindai Daun", icon: Scan },
+  { path: "/diagnoses", label: "Diagnosa", icon: Activity },
+  { path: "/catalog", label: "Pustaka", icon: BookOpen, altPath: "/library" },
+  { path: "/expert/reviews", label: "Tinjauan Pakar", icon: UserCheck },
+  { path: "/telemetry", label: "Telemetry", icon: ChartBar },
+];
+
+export function Sidebar() {
+  const location = useLocation();
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  const isActive = (path: string, altPath?: string) => {
+    if (path === "/dashboard" || path === "/scan") {
+      return location.pathname === path;
+    }
+    return (
+      location.pathname.startsWith(path) ||
+      (altPath && location.pathname.startsWith(altPath))
+    );
+  };
+
+  return (
+    <aside
+      className={`hidden md:flex flex-col bg-[#306D29] shadow-xl z-30 text-white transition-all duration-300 ease-in-out ${
+        isSidebarOpen ? "w-80" : "w-30"
+      }`}
+    >
+      {/* logo & header area */}
+      <div
+        className={`h-30 flex items-center border-b border-white/10 shrink-0 transition-all duration-300 ${isSidebarOpen ? "px-6 justify-between" : "justify-center"}`}
+      >
+        <div
+          className={`flex items-center gap-3 font-semibold text-white overflow-hidden transition-all duration-300 ${isSidebarOpen ? "opacity-100 w-[180px]" : "opacity-0 w-0 hidden"}`}
+        >
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-[#48A111] p-6">
+            <Leaf className="h-8 w-8 shrink-0" />
+          </div>
+          <div className="leading-tight flex-1 ">
+            <div className="text-[20px] font-bold">ZeaVis Edu</div>
+            <div className="text-[13px] font-normal text-[#9AD872] leading-tight">
+              Smart AI for Corn Disease Detection
+            </div>
+          </div>
+        </div>
+
+        <button
+          onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+          className={`rounded-xl transition-colors flex items-center justify-center shrink-0 ${
+            isSidebarOpen
+              ? "p-1.5 bg-white/10 hover:bg-white/20 text-white"
+              : "w-12 h-12 bg-[#48A111] hover:bg-[#52B713] text-white shadow-sm"
+          }`}
+          title={isSidebarOpen ? "Sembunyikan Menu" : "Buka Menu"}
+        >
+          {isSidebarOpen ? (
+            <ChevronLeft className="w-5 h-5" />
+          ) : (
+            <Menu className="w-6 h-6" />
+          )}
+        </button>
+      </div>
+
+      {/* List Menu */}
+      <nav
+        className={`flex-1 overflow-y-auto py-6 flex flex-col gap-3 ${isSidebarOpen ? "px-5" : "px-0 items-center"}`}
+      >
+        {NAV_ITEMS.map((item) => {
+          const active = isActive(item.path, item.altPath);
+          const Icon = item.icon;
+
+          return (
+            <Link
+              key={item.path}
+              to={item.path}
+              title={item.label}
+              onClick={() => setIsSidebarOpen(true)}
+              className={`flex items-center rounded-full font-medium transition-all ${
+                isSidebarOpen
+                  ? "px-4 py-3 gap-3 text-[16px] w-full"
+                  : "justify-center w-12 h-12"
+              } ${
+                active
+                  ? "bg-[#48A111] text-white shadow-sm"
+                  : "text-white/85 hover:bg-white/10 hover:text-white"
+              }`}
+            >
+              <Icon className="w-5 h-5 shrink-0" />
+              {isSidebarOpen && (
+                <span className="whitespace-nowrap">{item.label}</span>
+              )}
+            </Link>
+          );
+        })}
+      </nav>
+
+      {/* Logout Button */}
+      <div
+        className={`h-18 px-5 border-t border-white/10 shrink-0 flex items-center ${isSidebarOpen ? "" : "justify-center"}`}
+      >
+        <Link
+          to="/logout"
+          title="Keluar"
+          className={`flex items-center rounded-full transition-all ${
+            isSidebarOpen
+              ? "justify-between w-full bg-[#ECF4E8] border border-white/50 px-5 py-3 text-[16px] font-medium text-black hover:bg-white/80"
+              : "justify-center w-12 h-12 bg-[#ECF4E8] text-black hover:bg-white shadow-sm"
+          }`}
+        >
+          {isSidebarOpen && <span className="whitespace-nowrap">Keluar</span>}
+          <LogOut className="h-5 w-5 shrink-0" />
+        </Link>
+      </div>
+
+      <MobileNav
+        open={mobileMenuOpen}
+        onClose={() => setMobileMenuOpen(false)}
+      />
+    </aside>
+  );
+}