aboutsummaryrefslogtreecommitdiffstats
path: root/frontend/src/components/layouts/AdminLayout.js
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components/layouts/AdminLayout.js')
-rw-r--r--frontend/src/components/layouts/AdminLayout.js300
1 files changed, 300 insertions, 0 deletions
diff --git a/frontend/src/components/layouts/AdminLayout.js b/frontend/src/components/layouts/AdminLayout.js
new file mode 100644
index 0000000..fc05708
--- /dev/null
+++ b/frontend/src/components/layouts/AdminLayout.js
@@ -0,0 +1,300 @@
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/context/auth-context';
+import { useTheme } from '@/context/theme-context';
+
+const AdminLayout = ({ children }) => {
+ const { user, logout } = useAuth();
+ const { theme, toggleTheme } = useTheme();
+ const router = useRouter();
+
+ // Redirect if not admin
+ if (user && user.role !== 'admin') {
+ router.push('/login');
+ return null;
+ }
+
+ return (
+ <div className="flex min-h-screen bg-gray-50 dark:bg-slate-900">
+ {/* Sidebar */}
+ <aside className="w-64 bg-white dark:bg-slate-800 border-r border-gray-200 dark:border-slate-700 fixed h-full">
+ <div className="p-4 border-b border-gray-200 dark:border-slate-700">
+ <Link href="/admin" className="text-xl font-bold text-primary">
+ Admin Dashboard
+ </Link>
+ </div>
+
+ <nav className="p-4">
+ <ul className="space-y-2">
+ <li>
+ <Link
+ href="/admin"
+ className="flex items-center p-2 rounded-md hover:bg-gray-100 dark:hover:bg-slate-700"
+ >
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="18"
+ height="18"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ className="mr-2"
+ >
+ <rect width="7" height="9" x="3" y="3" rx="1" />
+ <rect width="7" height="5" x="14" y="3" rx="1" />
+ <rect width="7" height="9" x="14" y="12" rx="1" />
+ <rect width="7" height="5" x="3" y="16" rx="1" />
+ </svg>
+ Dashboard
+ </Link>
+ </li>
+ <li>
+ <Link
+ href="/admin/users"
+ className="flex items-center p-2 rounded-md hover:bg-gray-100 dark:hover:bg-slate-700"
+ >
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="18"
+ height="18"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ className="mr-2"
+ >
+ <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+ <circle cx="9" cy="7" r="4" />
+ <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
+ <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+ </svg>
+ Users
+ </Link>
+ </li>
+ <li>
+ <Link
+ href="/admin/menu"
+ className="flex items-center p-2 rounded-md hover:bg-gray-100 dark:hover:bg-slate-700"
+ >
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="18"
+ height="18"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ className="mr-2"
+ >
+ <path d="M3 3h18v18H3V3z" />
+ <path d="M9 3v18" />
+ </svg>
+ Menu Management
+ </Link>
+ </li>
+ <li>
+ <Link
+ href="/admin/orders"
+ className="flex items-center p-2 rounded-md hover:bg-gray-100 dark:hover:bg-slate-700"
+ >
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="18"
+ height="18"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ className="mr-2"
+ >
+ <path d="M5 7 3 5" />
+ <path d="M9 3 3 9H2v4.5L7 9" />
+ <circle cx="9" cy="15" r="6" />
+ </svg>
+ Orders
+ </Link>
+ </li>
+ <li>
+ <Link
+ href="/admin/reservations"
+ className="flex items-center p-2 rounded-md hover:bg-gray-100 dark:hover:bg-slate-700"
+ >
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="18"
+ height="18"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ className="mr-2"
+ >
+ <rect width="18" height="18" x="3" y="4" rx="2" ry="2" />
+ <line x1="16" x2="16" y1="2" y2="6" />
+ <line x1="8" x2="8" y1="2" y2="6" />
+ <line x1="3" x2="21" y1="10" y2="10" />
+ </svg>
+ Reservations
+ </Link>
+ </li>
+ <li>
+ <Link
+ href="/admin/reports"
+ className="flex items-center p-2 rounded-md hover:bg-gray-100 dark:hover:bg-slate-700"
+ >
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="18"
+ height="18"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ className="mr-2"
+ >
+ <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+ </svg>
+ Reports
+ </Link>
+ </li>
+ <li>
+ <Link
+ href="/admin/feedback"
+ className="flex items-center p-2 rounded-md hover:bg-gray-100 dark:hover:bg-slate-700"
+ >
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="18"
+ height="18"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ className="mr-2"
+ >
+ <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+ </svg>
+ Feedback
+ </Link>
+ </li>
+ </ul>
+ </nav>
+ </aside>
+
+ {/* Main Content */}
+ <div className="ml-64 flex-1 flex flex-col">
+ {/* Header */}
+ <header className="bg-white dark:bg-slate-800 border-b border-gray-200 dark:border-slate-700 py-4 px-6 flex justify-between items-center">
+ <h1 className="text-xl font-semibold">Admin Dashboard</h1>
+
+ <div className="flex items-center space-x-4">
+ {/* Theme Toggle */}
+ <button onClick={toggleTheme} className="hover:text-primary transition-colors">
+ {theme === 'light' ? (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ >
+ <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+ </svg>
+ ) : (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="20"
+ height="20"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ >
+ <circle cx="12" cy="12" r="4" />
+ <path d="M12 2v2" />
+ <path d="M12 20v2" />
+ <path d="m4.93 4.93 1.41 1.41" />
+ <path d="m17.66 17.66 1.41 1.41" />
+ <path d="M2 12h2" />
+ <path d="M20 12h2" />
+ <path d="m6.34 17.66-1.41 1.41" />
+ <path d="m19.07 4.93-1.41 1.41" />
+ </svg>
+ )}
+ </button>
+
+ {/* User Menu */}
+ <div className="relative group">
+ <button className="flex items-center hover:text-primary transition-colors">
+ <span className="mr-2">{user?.name || 'Admin'}</span>
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="16"
+ height="16"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ >
+ <path d="m6 9 6 6 6-6" />
+ </svg>
+ </button>
+
+ {/* Dropdown Menu */}
+ <div className="absolute right-0 mt-2 w-48 bg-white dark:bg-slate-800 rounded-md shadow-lg border border-gray-200 dark:border-slate-700 hidden group-hover:block">
+ <div className="py-1">
+ <Link
+ href="/profile"
+ className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-slate-700"
+ >
+ Profile
+ </Link>
+ <Link
+ href="/"
+ className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-slate-700"
+ >
+ View Website
+ </Link>
+ <button
+ onClick={logout}
+ className="block w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-slate-700 text-red-600"
+ >
+ Logout
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ {/* Main Content */}
+ <main className="flex-1 p-6 bg-gray-50 dark:bg-slate-900">{children}</main>
+ </div>
+ </div>
+ );
+};
+
+export default AdminLayout; \ No newline at end of file
generated by cgit v1.2.3-59-g8ed1b (git 2.39.0) at 2025-06-15 23:25:46 +0000