Soultan

README.md

@@ -108,15 +108,16 @@ src/
 
 ## Routes
 
-### Public / auth routes
+### Public / Auth Routes
 
-- `/auth/login`
-- `/auth/register`
+- `/` - Public Interactive Landing Page (features, tech stack, live ESP32 simulator, and system telemetry console)
+- `/auth/login` - User Sign-in Page (Credentials login + Google Google login)
+- `/auth/register` - User Registration Page
 
-### Main app routes
+### Protected App Routes (Dashboard)
 
-- `/` - dashboard
-- `/monitoring` - live bin monitoring
+- `/dashboard` - Summary cards, attention list, and pickup priority leaderboard
+- `/monitoring` - Live monitoring sheet of all bins with status/building filters
 - `/monitoring/[id]` - bin detail / action page
 - `/manage` - bin management
 - `/notifications` - derived alerts

src/components/layout/navbar/index.tsx

@@ -39,7 +39,7 @@ export default function Navbar({ onMenuClick }: NavbarProps) {
       {/* Menu Button - Mobile Only */}
       <div className="flex sm:hidden shrink-0">
         <button
-          onClick={onMenuClick || (() => {})}
+          onClick={onMenuClick || (() => { })}
           className="flex h-8 w-8 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-700 shadow-sm transition hover:bg-gray-50"
           aria-label="Buka menu"
         >
@@ -93,7 +93,7 @@ export default function Navbar({ onMenuClick }: NavbarProps) {
             </span>
           )}
         </button>
-        
+
         {/* User Profile */}
         <div className="flex items-center gap-1.5 border-l pl-2 sm:gap-3 sm:pl-6 border-gray-200">
           <button onClick={() => router.push("/profile")} className="flex items-center gap-3 hover:opacity-80 transition">
@@ -105,7 +105,7 @@ export default function Navbar({ onMenuClick }: NavbarProps) {
               <Image src={session.user.image} alt="avatar" width={40} height={40} className="w-8 h-8 rounded-full object-cover border-2 border-white shadow-sm sm:h-10 sm:w-10" />
             ) : (
               <div className="w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center text-emerald-600 font-bold text-xs border-2 border-white shadow-sm sm:h-10 sm:w-10 sm:text-sm">
-                {(session?.user?.name || "").split(" ").map((n: string) => n[0]).slice(0,2).join("")}
+                {(session?.user?.name || "").split(" ").map((n: string) => n[0]).slice(0, 2).join("")}
               </div>
             )}
           </button>

src/components/layout/sidebar/index.tsx

@@ -6,7 +6,7 @@ import { signOut, useSession } from "next-auth/react";
 import Image from "next/image";
 
 const menuItems = [
-  { name: "Dashboard", icon: <FiGrid />, path: "/", role: ["admin", "petugas"] },
+  { name: "Dashboard", icon: <FiGrid />, path: "/dashboard", role: ["admin", "petugas"] },
   { name: "Monitoring", icon: <FiTrash2 />, path: "/monitoring", role: ["admin", "petugas"] },
   { name: "Manage Bin", icon: <FiMapPin />, path: "/manage", role: ["admin"] }, // hanya admin
   // { name: "Analytics", icon: <FiBarChart2 />, path: "/analytics", role: ["admin", "petugas"] },

src/pages/_app.tsx

@@ -11,7 +11,7 @@ export default function App({ Component, pageProps }: AppProps) {
   const router = useRouter();
   const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
 
-  const disableLayout = ["/auth/login", "/auth/register"];
+  const disableLayout = ["/", "/auth/login", "/auth/register"];
   const isDisable = disableLayout.includes(router.pathname);
 
   return (

src/pages/dashboard/index.tsx

@@ -0,0 +1,23 @@
+import DashboardView from "@/views/dashboard";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
+export default function DashboardPage() {
+  const { status } = useSession();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (status === "unauthenticated") {
+      router.push("/auth/login");
+    }
+  }, [status, router]);
+
+  if (status === "loading") return (
+    <div className="flex items-center justify-center min-h-[50vh]">
+      <div className="text-emerald-500 font-bold animate-pulse text-2xl">Loading Session...</div>
+    </div>
+  );
+
+  return <DashboardView />;
+}

src/views/auth/login/index.tsx

@@ -23,7 +23,7 @@ export default function LoginPage() {
     });
 
     if (res?.ok) {
-      router.push("/"); // redirect ke dashboard/home
+      router.push("/dashboard"); // redirect ke dashboard/home
     } else {
       alert("Login gagal!");
     }
@@ -121,7 +121,7 @@ export default function LoginPage() {
               </div>
 
               {/* Google */}
-              <button type="button" onClick={() => signIn("google", { callbackUrl: "/" })} className="w-full flex items-center justify-center gap-2 border border-slate-200 hover:bg-slate-50 py-3 rounded-xl transition">
+              <button type="button" onClick={() => signIn("google", { callbackUrl: "/dashboard" })} className="w-full flex items-center justify-center gap-2 border border-slate-200 hover:bg-slate-50 py-3 rounded-xl transition">
                 <FcGoogle className="text-xl" />
 
                 <span className="text-sm font-medium text-slate-700">Masuk dengan Google</span>

src/views/auth/register/index.tsx

@@ -131,7 +131,7 @@ export default function RegisterPage() {
               </div>
 
               {/* Google Login */}
-              <button type="button" onClick={() => signIn("google", { callbackUrl: "/" })} className="w-full flex items-center justify-center gap-2 border border-slate-200 hover:bg-slate-50 py-3 rounded-xl transition">
+              <button type="button" onClick={() => signIn("google", { callbackUrl: "/dashboard" })} className="w-full flex items-center justify-center gap-2 border border-slate-200 hover:bg-slate-50 py-3 rounded-xl transition">
                 <FcGoogle className="text-xl" />
                 <span className="text-sm font-medium text-slate-700">Daftar dengan Google</span>
               </button>