Add src/app/admin/dashboard/layout.tsx

2026-06-10 16:33:49 +00:00
parent b176c95021
commit 7d747ad29a
1 changed files with 101 additions and 0 deletions
--- a/src/app/admin/dashboard/layout.tsx
+++ b/src/app/admin/dashboard/layout.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import { Home, ShoppingCart, Users, Settings, Package } from "lucide-react";
+
+// Mock authentication check
+const isAuthenticated = () => {
+  // In a real app, this would check tokens, sessions, etc.
+  // For this exercise, we'll simulate a logged-in state.
+  return typeof window !== "undefined" && localStorage.getItem("admin_logged_in") === "true";
+};
+
+const logout = () => {
+  if (typeof window !== "undefined") {
+    localStorage.removeItem("admin_logged_in");
+  }
+};
+
+const adminNavItems = [
+  { name: "Overview", href: "/admin/dashboard/overview", icon: Home },
+  { name: "Services", href: "/admin/dashboard/services", icon: Package },
+  { name: "Orders", href: "/admin/dashboard/orders", icon: ShoppingCart },
+  { name: "Users", href: "/admin/dashboard/users", icon: Users },
+  { name: "Settings", href: "/admin/dashboard/settings", icon: Settings },
+];
+
+export default function AdminDashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const [isAuth, setIsAuth] = useState(false);
+
+  useEffect(() => {
+    if (!isAuthenticated()) {
+      router.push("/admin/login");
+    } else {
+      setIsAuth(true);
+    }
+  }, [router]);
+
+  const handleLogout = () => {
+    logout();
+    router.push("/admin/login");
+  };
+
+  if (!isAuth) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-gray-100 dark:bg-gray-900">
+        <p className="text-gray-700 dark:text-gray-300">Redirecting to login...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-screen bg-gray-100 dark:bg-gray-900">
+      {/* Sidebar */}
+      <aside className="w-64 bg-white p-4 shadow-md dark:bg-gray-800">
+        <div className="mb-8 text-2xl font-bold text-gray-900 dark:text-white">
+          Admin Panel
+        </div>
+        <nav>
+          <ul>
+            {adminNavItems.map((item) => {
+              const Icon = item.icon;
+              const isActive = pathname.startsWith(item.href);
+              return (
+                <li key={item.name} className="mb-2">
+                  <Link
+                    href={item.href}
+                    className={`flex items-center rounded-md px-4 py-2 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 ${
+                      isActive ? "bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-300" : ""
+                    }`}
+                  >
+                    <Icon className="mr-3 h-5 w-5" />
+                    {item.name}
+                  </Link>
+                </li>
+              );
+            })}
+          </ul>
+        </nav>
+        <div className="mt-auto pt-8">
+          <button
+            onClick={handleLogout}
+            className="flex w-full items-center rounded-md px-4 py-2 text-red-600 hover:bg-red-100 dark:text-red-400 dark:hover:bg-red-900"
+          >
+            Logout
+          </button>
+        </div>
+      </aside>
+
+      {/* Main Content */}
+      <main className="flex-1 p-8">{children}</main>
+    </div>
+  );
+}