feat: implement authentication flow with login page, middleware protection, and session-based role management

src/components/LayoutContent.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import Sidebar from "@/components/Sidebar";
+
+interface LayoutContentProps {
+  children: React.ReactNode;
+}
+
+export default function LayoutContent({ children }: LayoutContentProps) {
+  const pathname = usePathname();
+  const showSidebar = pathname !== "/" && pathname !== "/login";
+  return (
+    <>
+      {showSidebar && <Sidebar />}
+      <main className={showSidebar ? "lg:ml-64 min-h-screen pb-20 lg:pb-0" : "min-h-screen pb-20 lg:pb-0"}>
+        {children}
+      </main>
+    </>
+  );
+}

src/components/Sidebar.tsx

@@ -154,7 +154,20 @@ export default function Sidebar() {
               <p className="text-sm font-medium text-slate-700 truncate">Admin User</p>
               <p className="text-xs text-slate-400">admin@jaiben.com</p>
             </div>
-            <button className="p-1.5 hover:bg-slate-100 rounded-lg">
+            <button 
+              onClick={() => {
+                // Import and call logout function
+                // Note: We can't use client-only imports in server components directly
+                // For now, we'll just clear sessionStorage and redirect
+                if (typeof window !== 'undefined') {
+                  window.sessionStorage.removeItem('authToken');
+                  window.sessionStorage.removeItem('userRole');
+                  window.sessionStorage.removeItem('userName');
+                  window.location.href = '/login';
+                }
+              }}
+              className="p-1.5 hover:bg-slate-100 rounded-lg"
+            >
               <LogOut className="w-4 h-4 text-slate-400" />
             </button>
           </Link>