simoleo89andCursor
d7278c77f9
Derive admin/public text colors from WCAG contrast, unify ThemeVars CSS emission, and keep navbar overrides in sync with readable vars. Co-authored-by: Cursor <[email protected]>
485 lines
12 KiB
TypeScript
485 lines
12 KiB
TypeScript
import {
|
|
Award,
|
|
Ban,
|
|
Bell,
|
|
Calendar,
|
|
ClipboardList,
|
|
Cog,
|
|
Compass,
|
|
CreditCard,
|
|
DoorOpen,
|
|
FileText,
|
|
Filter,
|
|
Gem,
|
|
Globe,
|
|
Group,
|
|
HelpCircle,
|
|
History,
|
|
Image,
|
|
Key,
|
|
Languages,
|
|
LayoutDashboard,
|
|
LogOut,
|
|
Mail,
|
|
Megaphone,
|
|
MessageSquare,
|
|
Monitor,
|
|
Music,
|
|
Newspaper,
|
|
Palette,
|
|
Radio,
|
|
Receipt,
|
|
Settings,
|
|
Shield,
|
|
ShoppingCart,
|
|
SquarePen,
|
|
Store,
|
|
Tags,
|
|
Terminal,
|
|
Ticket,
|
|
Trophy,
|
|
Upload,
|
|
Users,
|
|
Wrench,
|
|
} 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 { AdminMobileWrapper } from "@/components/admin/admin-mobile-wrapper";
|
|
import { AdminNavLink } from "@/components/admin/admin-nav-link";
|
|
import { requireStaff } from "@/lib/admin/guard";
|
|
import { prisma } from "@/lib/prisma";
|
|
import { siteSettings } from "@/lib/services/site-settings";
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
function getNavGroups(t: (key: string) => string) {
|
|
return [
|
|
{
|
|
label: t("overview"),
|
|
icon: <LayoutDashboard size={14} />,
|
|
items: [
|
|
{
|
|
href: "/admin",
|
|
label: t("dashboard"),
|
|
icon: <LayoutDashboard size={16} />,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: t("content"),
|
|
icon: <Newspaper size={14} />,
|
|
items: [
|
|
{
|
|
href: "/admin/articles",
|
|
label: t("articles"),
|
|
icon: <Newspaper size={16} />,
|
|
},
|
|
{ href: "/admin/tags", label: t("tags"), icon: <Tags size={16} /> },
|
|
{
|
|
href: "/admin/navigation",
|
|
label: t("navigator"),
|
|
icon: <Compass size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/help-questions",
|
|
label: t("helpCenter"),
|
|
icon: <HelpCircle size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/ads",
|
|
label: t("advertisements"),
|
|
icon: <Megaphone size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/writeable-boxes",
|
|
label: t("writeableBoxes"),
|
|
icon: <SquarePen size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/photos",
|
|
label: t("photos"),
|
|
icon: <Image size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/tickets",
|
|
label: t("tickets"),
|
|
icon: <MessageSquare size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/events",
|
|
label: t("events"),
|
|
icon: <Calendar size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/polls",
|
|
label: t("polls"),
|
|
icon: <ClipboardList size={16} />,
|
|
},
|
|
{ href: "/admin/banners", label: t("banners"), icon: <Image size={16} /> },
|
|
{
|
|
href: "/admin/prefixes",
|
|
label: t("prefixes"),
|
|
icon: <Languages size={16} />,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: t("usersAndAccess"),
|
|
icon: <Shield size={14} />,
|
|
items: [
|
|
{ href: "/admin/users", label: t("users"), icon: <Users size={16} /> },
|
|
{ href: "/admin/bans", label: t("bans"), icon: <Ban size={16} /> },
|
|
{
|
|
href: "/admin/ip",
|
|
label: t("ipManagement"),
|
|
icon: <Globe size={16} />,
|
|
},
|
|
{ href: "/admin/vpn", label: t("vpn"), icon: <Shield size={16} /> },
|
|
{
|
|
href: "/admin/applications",
|
|
label: t("applications"),
|
|
icon: <ClipboardList size={16} />,
|
|
},
|
|
{ href: "/admin/teams", label: t("teams"), icon: <Group size={16} /> },
|
|
{
|
|
href: "/admin/permissions",
|
|
label: t("permissions"),
|
|
icon: <Key size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/online",
|
|
label: t("onlineUsers"),
|
|
icon: <Users size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/moderation",
|
|
label: t("moderation"),
|
|
icon: <Shield size={16} />,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: t("economy"),
|
|
icon: <ShoppingCart size={14} />,
|
|
items: [
|
|
{
|
|
href: "/admin/catalog",
|
|
label: t("catalog"),
|
|
icon: <Store size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/shop",
|
|
label: t("shop"),
|
|
icon: <ShoppingCart size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/transactions",
|
|
label: t("transactions"),
|
|
icon: <Receipt size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/vouchers",
|
|
label: t("vouchers"),
|
|
icon: <Ticket size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/subscriptions",
|
|
label: t("subscriptions"),
|
|
icon: <CreditCard size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/rare-values",
|
|
label: t("rareValues"),
|
|
icon: <Gem size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/badges",
|
|
label: t("badges"),
|
|
icon: <Award size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/achievements",
|
|
label: t("achievements"),
|
|
icon: <Trophy size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/calendar",
|
|
label: t("calendar"),
|
|
icon: <Calendar size={16} />,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: t("radio"),
|
|
icon: <Radio size={14} />,
|
|
items: [
|
|
{ href: "/admin/radio", label: t("radio"), icon: <Radio size={16} /> },
|
|
{
|
|
href: "/admin/radio/history",
|
|
label: t("radioHistory"),
|
|
icon: <History size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/radio/banners",
|
|
label: t("radioBanners"),
|
|
icon: <Image size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/radio/embed",
|
|
label: t("radioEmbed"),
|
|
icon: <Radio size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/radio/api-keys",
|
|
label: t("radioApiKeys"),
|
|
icon: <Key size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/radio/moderation",
|
|
label: t("radioModeration"),
|
|
icon: <Shield size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/radio/settings",
|
|
label: t("radioSettings"),
|
|
icon: <Settings size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/radio/monitoring",
|
|
label: t("radioMonitoring"),
|
|
icon: <Monitor size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/radio/points",
|
|
label: t("radioPoints"),
|
|
icon: <Gem size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/radio/ranks",
|
|
label: t("radioRanks"),
|
|
icon: <Group size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/radio/autodj",
|
|
label: t("radioAutodj"),
|
|
icon: <Radio size={16} />,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
label: t("system"),
|
|
icon: <Settings size={14} />,
|
|
items: [
|
|
{
|
|
href: "/admin/commandocentrum",
|
|
label: t("commandocentrum"),
|
|
icon: <Terminal size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/emulator",
|
|
label: t("emulator"),
|
|
icon: <Monitor size={16} />,
|
|
},
|
|
{ href: "/admin/alerts", label: t("alerts"), icon: <Bell size={16} /> },
|
|
{ href: "/admin/logs", label: t("logs"), icon: <FileText size={16} /> },
|
|
{
|
|
href: "/admin/logs/audit",
|
|
label: t("auditLog"),
|
|
icon: <FileText size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/analytics",
|
|
label: t("analytics"),
|
|
icon: <LayoutDashboard size={16} />,
|
|
},
|
|
{ href: "/admin/devops", label: t("devops"), icon: <Monitor size={16} /> },
|
|
{
|
|
href: "/admin/wordfilter",
|
|
label: t("wordFilter"),
|
|
icon: <Filter size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/maintenance",
|
|
label: t("maintenance"),
|
|
icon: <Wrench size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/housekeeping",
|
|
label: t("housekeeping"),
|
|
icon: <Settings size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/rooms",
|
|
label: t("rooms"),
|
|
icon: <DoorOpen size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/email-templates",
|
|
label: t("emailTemplates"),
|
|
icon: <Mail size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/theme",
|
|
label: t("theme"),
|
|
icon: <Palette size={16} />,
|
|
},
|
|
{ href: "/admin/media", label: t("media"), icon: <Image size={16} /> },
|
|
{
|
|
href: "/admin/favicon",
|
|
label: t("favicon"),
|
|
icon: <Image size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/sounds",
|
|
label: t("sounds"),
|
|
icon: <Music size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/translations",
|
|
label: t("translations"),
|
|
icon: <Languages size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/import",
|
|
label: t("import"),
|
|
icon: <Upload size={16} />,
|
|
},
|
|
{
|
|
href: "/admin/settings",
|
|
label: t("settings"),
|
|
icon: <Cog size={16} />,
|
|
},
|
|
],
|
|
},
|
|
];
|
|
}
|
|
|
|
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">{children}</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();
|
|
const navGroups = getNavGroups(t);
|
|
|
|
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>
|
|
|
|
<nav className="flex-1 overflow-y-auto px-3 py-4">
|
|
{navGroups.map((group, gi) => (
|
|
<div
|
|
key={group.label}
|
|
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">
|
|
{group.icon}
|
|
<span>{group.label}</span>
|
|
</div>
|
|
<div className="space-y-0.5">
|
|
{group.items.map((item) => (
|
|
<AdminNavLink key={item.href} href={item.href} icon={item.icon}>
|
|
{item.label}
|
|
</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">
|
|
<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>
|
|
);
|
|
}
|