Merge pull request #25 from ATLAS-PJK-GM007/selly/frontend

Selly/frontend

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>
+  );
+}