EpicNext-Cms/src/app/admin/layout.tsx

import { LogOut } from "lucide-react";
import Link from "next/link";
import { redirect } from "next/navigation";
import { getTranslations } from "next-intl/server";
import type { ReactNode } from "react";
import { AdminHubChrome } from "@/components/admin/admin-hub-chrome";
import { AdminMobileWrapper } from "@/components/admin/admin-mobile-wrapper";
import { AdminNavLink } from "@/components/admin/admin-nav-link";
import { LanguageSwitcher } from "@/components/language-switcher";
import { ThemeSwitcher } from "@/components/theme-switcher";
import { requireStaff } from "@/lib/admin/guard";
import { ADMIN_NAV_GROUPS } from "@/lib/admin-nav";
import { prisma } from "@/lib/prisma";
import { siteSettings } from "@/lib/services/site-settings";

export const dynamic = "force-dynamic";

export default async function AdminLayout({
	children,
}: {
	children: ReactNode;
}) {
	const staff = await requireStaff();
	if (await siteSettings.getBool("force_staff_2fa", false)) {
		const u = await prisma.user
			.findUnique({
				where: { id: staff.id },
				select: { twoFactorConfirmedAt: true },
			})
			.catch(() => null);
		if (!u?.twoFactorConfirmedAt) redirect("/settings/2fa?error=staffrequired");
	}

	return (
		<AdminMobileWrapper sidebar={<Sidebar staff={staff} />}>
			<div
				data-admin
				className="flex flex-col min-w-0 p-5 lg:p-6 min-h-screen"
				style={{ backgroundColor: "var(--admin-canvas)" }}
			>
				<Topbar staff={staff} />
				<section className="admin-page flex-1">
					<AdminHubChrome>{children}</AdminHubChrome>
				</section>
			</div>
		</AdminMobileWrapper>
	);
}

async function Sidebar({
	staff,
}: {
	staff: { id: number; username: string; rank: number };
}) {
	const t = await getTranslations("pages.admin.nav");
	const initial = staff.username.charAt(0).toUpperCase();

	return (
		<aside
			data-admin
			className="max-lg:static sticky top-0 self-start h-full lg:h-screen overflow-y-auto bg-[var(--admin-sidebar-background)] text-[var(--admin-sidebar-text-readable)] shadow-xl flex flex-col"
		>
			<div className="flex items-center gap-3 px-4 py-5 border-b border-[var(--admin-border)]">
				<span
					className="flex-none w-10 h-10 rounded-xl grid place-items-center font-extrabold text-base text-[var(--admin-accent-foreground)] bg-[var(--admin-accent)] shadow-lg shadow-[var(--admin-accent)]/20"
					aria-hidden
				>
					{initial}
				</span>
				<div className="min-w-0 flex-1">
					<div className="font-semibold text-sm text-[var(--admin-sidebar-text-readable)] truncate">
						{staff.username}
					</div>
					<span className="inline-block mt-0.5 text-[0.6rem] font-bold uppercase tracking-widest text-[var(--admin-sidebar-muted-readable)]">
						{t("rankLabel", { rank: staff.rank })}
					</span>
				</div>
				<div className="flex items-center gap-1.5 shrink-0">
					<LanguageSwitcher variant="admin" />
					<ThemeSwitcher variant="admin" />
				</div>
			</div>

			<nav className="flex-1 overflow-y-auto px-3 py-4">
				{ADMIN_NAV_GROUPS.map((group, gi) => {
					const GroupIcon = group.icon;
					return (
						<div
							key={group.labelKey}
							className={
								gi > 0 ? "mt-4 pt-4 border-t border-[var(--admin-border)]" : ""
							}
						>
							<div className="flex items-center gap-1.5 px-2 pb-2 text-[0.65rem] font-extrabold uppercase tracking-[0.14em] text-[var(--admin-sidebar-text-readable)] opacity-70">
								<GroupIcon size={14} />
								<span>{t(group.labelKey)}</span>
							</div>
							<div className="space-y-0.5">
								{group.items.map((item) => {
									const ItemIcon = item.icon;
									return (
										<AdminNavLink
											key={`${group.labelKey}-${item.href}`}
											href={item.href}
											matchPrefixes={item.matchPrefixes}
											icon={<ItemIcon size={16} />}
										>
											{t(item.labelKey)}
										</AdminNavLink>
									);
								})}
							</div>
						</div>
					);
				})}
			</nav>

			<div className="px-3 py-3 border-t border-[var(--admin-border)]">
				<Link
					href="/"
					className="flex items-center gap-2.5 px-2.5 py-2 rounded-lg text-[var(--admin-sidebar-muted-readable)] text-xs font-medium hover:text-[var(--admin-sidebar-text-readable)] hover:bg-[var(--admin-accent)]/10 transition-all duration-150 no-underline"
				>
					<LogOut size={14} />
					<span>{t("backToSite")}</span>
				</Link>
			</div>
		</aside>
	);
}

async function Topbar({
	staff,
}: {
	staff: { id: number; username: string; rank: number };
}) {
	const t = await getTranslations("pages.admin.nav");

	return (
		<header className="flex items-center justify-between gap-4 bg-[var(--admin-surface)] border border-[var(--admin-border)] rounded-2xl px-5 py-3 mb-5 shadow-card">
			<div className="flex items-center gap-3">
				<h2 className="m-0 text-base font-extrabold text-[var(--admin-text)]">
					{t("housekeeping")}
				</h2>
				<span className="hidden sm:inline-block w-px h-5 bg-[var(--admin-border)]" />
				<span className="hidden sm:inline text-xs text-[var(--admin-text-muted)]">
					{t("hotelManagementPanel")}
				</span>
			</div>
			<div className="flex items-center gap-3">
				<div className="flex items-center gap-1.5 lg:hidden">
					<LanguageSwitcher variant="admin" />
					<ThemeSwitcher variant="admin" />
				</div>
				<span className="text-xs text-[var(--admin-text-muted)]">
					<strong className="text-[var(--admin-text)]">{staff.username}</strong>
				</span>
				<span className="inline-flex items-center gap-1.5 text-[0.6rem] font-bold uppercase tracking-wider text-[var(--admin-accent-foreground)] bg-[var(--admin-accent)] rounded-full px-2.5 py-1">
					{t("rankLabel", { rank: staff.rank })}
				</span>
			</div>
		</header>
	);
}