Improve admin UX: hub i18n, dynamic topbar, settings strings, staff logs DataTable.

Co-authored-by: Cursor <[email protected]>

src/app/admin/layout.tsx

@@ -6,6 +6,7 @@ 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 { AdminTopbar } from "@/components/admin/admin-topbar";
 import { LanguageSwitcher } from "@/components/language-switcher";
 import { ThemeSwitcher } from "@/components/theme-switcher";
 import { requireStaff } from "@/lib/admin/guard";
@@ -38,7 +39,7 @@ export default async function AdminLayout({
 				className="flex flex-col min-w-0 p-5 lg:p-6 min-h-screen"
 				style={{ backgroundColor: "var(--admin-canvas)" }}
 			>
-				<Topbar staff={staff} />
+				<AdminTopbar staff={staff} />
 				<section className="admin-page flex-1">
 					<AdminHubChrome>{children}</AdminHubChrome>
 				</section>
@@ -128,36 +129,3 @@ async function Sidebar({
 	);
 }
 
-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>
-	);
-}