feat: update landing page and add new library and scan pages

- Refactor landing page content and links for better user experience. - Introduce a new library page to display disease information with filtering and modal details. - Add a scan page for users to upload images for diagnosis with a preview modal. - Enhance login and registration pages with automatic navigation to the dashboard. - Integrate vite-tsconfig-paths for improved path resolution in Vite configuration.
2026-06-02 02:42:07 +07:00
parent 73772f5f56
commit 0745dd903d
20 changed files with 1029 additions and 287 deletions
@@ -0,0 +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
+      </div>
+    </footer>
+  );
+}
@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+import { Navbar } from "./navbar";
+import { Footer } from "./footer";
+
+type Props = { children: ReactNode };
+
+export function MainLayout({ children }: Props) {
+  return (
+    <div className="min-h-screen flex flex-col bg-[#ECF4E8]">
+      <Navbar />
+      <main className="mx-auto w-full max-w-6xl flex-1 px-6 py-8">
+        {children}
+      </main>
+      <Footer />
+    </div>
+  );
+}
@@ -0,0 +1,84 @@
+import { Link, useLocation, useNavigate } from "react-router-dom";
+import { Leaf } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useAuthStore } from "@/store/auth-store";
+import { apiClient } from "@/lib/api-client";
+
+export function Navbar() {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const setUser = useAuthStore((state) => state.setUser);
+  const isDashboard = location.pathname === "/dashboard";
+  const isScan = location.pathname === "/scan";
+  const isLibrary = location.pathname === "/library";
+
+  const navLinkClassName = (isActive: boolean) =>
+    [
+      "inline-flex items-center rounded-full px-4 py-2 text-[18px] font-medium transition-colors",
+      isActive
+        ? "bg-[#48A111] text-white shadow-sm"
+        : "text-white/85 hover:bg-white/10 hover:text-white",
+    ].join(" ");
+
+  const logoutMutation = useMutation({
+    mutationFn: async () => {
+      await apiClient.logout();
+    },
+    onSuccess: () => {
+      setUser(null);
+      queryClient.clear();
+      navigate("/");
+    },
+  });
+
+  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">
+        <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="flex items-center gap-3">
+          <Button asChild variant="ghost" className="rounded-full">
+            <Link to="/dashboard" className={navLinkClassName(isDashboard)}>
+              Dashboard
+            </Link>
+          </Button>
+          <Button asChild variant="ghost" className="rounded-full">
+            <Link to="/scan" className={navLinkClassName(isScan)}>
+              Scan Tanaman
+            </Link>
+          </Button>
+          <Button asChild variant="ghost" className="rounded-full">
+            <Link to="/library" className={navLinkClassName(isLibrary)}>
+              Pustaka Penyakit
+            </Link>
+          </Button>
+          {user && (
+            <Button
+              variant="outline"
+              onClick={() => logoutMutation.mutate()}
+              disabled={logoutMutation.isPending}
+            >
+              {logoutMutation.isPending ? "Keluar..." : "Keluar"}
+            </Button>
+          )}
+        </nav>
+      </div>
+    </header>
+  );
+}
@@ -1,25 +1,25 @@
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-import type { ButtonHTMLAttributes } from 'react';
-import { cn } from '@/lib/utils';
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ButtonHTMLAttributes } from "react";
+import { cn } from "@/lib/utils";

 const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50',
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        outline: 'border border-border bg-transparent hover:bg-muted',
-        ghost: 'hover:bg-muted',
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        outline: "border border-border bg-transparent hover:bg-muted",
+        ghost: "hover:bg-[#48A111] hover:text-primary-foreground hover:rounded-[50px]",
      },
      size: {
-        default: 'h-10 px-4 py-2',
-        lg: 'h-12 rounded-lg px-6',
+        default: "h-10 px-4 py-2",
+        lg: "h-12 rounded-lg px-6",
      },
    },
    defaultVariants: {
-      variant: 'default',
-      size: 'default',
+      variant: "default",
+      size: "default",
    },
  },
 );
@@ -29,8 +29,19 @@ type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
    asChild?: boolean;
  };

-export function Button({ className, variant, size, asChild = false, ...props }: ButtonProps) {
-  const Comp = asChild ? Slot : 'button';
+export function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: ButtonProps) {
+  const Comp = asChild ? Slot : "button";

-  return <Comp className={cn(buttonVariants({ variant, size, className }))} {...props} />;
+  return (
+    <Comp
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
 }
@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+
+type Props = {
+  children?: ReactNode;
+  className?: string;
+};
+
+export function ModalFooter({ children, className }: Props) {
+  return <div className={`mt-4 text-right ${className ?? ''}`}>{children}</div>;
+}
+
+export default ModalFooter;
@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+
+type Props = {
+  children?: ReactNode;
+  right?: ReactNode;
+  className?: string;
+};
+
+export function ModalHeader({ children, right, className }: Props) {
+  return (
+    <div className={`flex items-start justify-between ${className ?? ''}`}>
+      <div>{children}</div>
+      {right && <div>{right}</div>}
+    </div>
+  );
+}
+
+export default ModalHeader;
@@ -0,0 +1,82 @@
+import React, { ReactNode, useEffect, useRef } from "react";
+import { ModalHeader } from "./modal-header";
+import { ModalFooter } from "./modal-footer";
+
+type Size = "sm" | "md" | "lg" | "full";
+
+const sizeClass: Record<Size, string> = {
+  sm: "max-w-xl",
+  md: "max-w-3xl",
+  lg: "max-w-5xl",
+  full: "max-w-full h-full",
+};
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  children: ReactNode;
+  title?: string;
+  footer?: ReactNode;
+  headerRight?: ReactNode;
+  size?: Size;
+  closeOnBackdrop?: boolean;
+  className?: string;
+};
+
+export function Modal({
+  open,
+  onClose,
+  children,
+  title,
+  footer,
+  headerRight,
+  size = "md",
+  closeOnBackdrop = true,
+  className,
+}: Props) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    if (open) window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  useEffect(() => {
+    if (open) {
+      containerRef.current?.focus();
+    }
+  }, [open]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      <div
+        className="absolute inset-0 bg-black/40"
+        onClick={() => closeOnBackdrop && onClose()}
+      />
+      <div
+        role="dialog"
+        aria-modal="true"
+        tabIndex={-1}
+        ref={containerRef}
+        className={`relative z-10 w-full ${sizeClass[size]} rounded-lg bg-white p-6 shadow-lg ${className ?? ""}`}
+      >
+        <ModalHeader right={headerRight}>
+          {title ? <h2 className="text-lg font-semibold">{title}</h2> : null}
+        </ModalHeader>
+        <div className="mt-4">{children}</div>
+        <ModalFooter>
+          {footer ?? (
+            <button onClick={onClose} className="px-4 py-2 rounded bg-gray-200">
+              Tutup
+            </button>
+          )}
+        </ModalFooter>
+      </div>
+    </div>
+  );
+}