Merge pull request 'feat(admin): hub polish - headers, events/polls, empty states' (#6) from feat/admin-hub-polish into main

Reviewed-on: #6

src/app/admin/applications/page.tsx

@@ -1,4 +1,3 @@
-import { ClipboardList } from "lucide-react";
 import { formatDate } from "@/lib/format-date";
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
@@ -53,20 +52,6 @@ export default async function AdminApplications() {
 
 	return (
 		<main>
-			<div className="flex items-center gap-3 mb-6">
-				<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
-					<ClipboardList size={20} className="text-[var(--admin-accent)]" />
-				</div>
-				<div>
-					<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">
-						{t("title")}
-					</h1>
-					<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">
-						{t("subtitle")}
-					</p>
-				</div>
-			</div>
-
 			<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
 				<StatusCard
 					label={t("pending")}

src/app/admin/articles/page.tsx

@@ -53,17 +53,9 @@ export default async function AdminArticles({
 
 	return (
 		<main>
-			<div className="flex items-center justify-between mb-6">
-				<div>
-					<h1 className="m-0 text-2xl font-extrabold text-[var(--admin-text)]">
-						{t("title")}
-					</h1>
-					<p className="m-0 text-sm text-[var(--admin-text-muted)] mt-1">
-						{t("subtitle")}
-					</p>
-				</div>
+			<div className="flex justify-end mb-6">
 				<Link href="/admin/articles/new" className="btn btn-primary">
-					+ {t("newArticle")}
+					{t("newArticle")}
 				</Link>
 			</div>
 

src/app/admin/devops/errors/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import { redirect } from "next/navigation";
 import { Card, CardContent } from "@/components/ui/card";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
@@ -13,6 +14,7 @@ export default async function EmulatorErrorsPage({
 		redirect("/admin");
 	}
 
+	const t = await getTranslations("pages.admin.devops");
 	const params = await searchParams;
 	const page = Math.max(1, Number(params.page) || 1);
 	const perPage = 50;
@@ -37,9 +39,7 @@ export default async function EmulatorErrorsPage({
 			<Card>
 				<CardContent className="p-0">
 					{errors.length === 0 ? (
-						<div className="p-6 text-center text-muted-foreground">
-							No emulator errors found
-						</div>
+						<div className="admin-empty">{t("noEmulatorErrors")}</div>
 					) : (
 						<div className="divide-y">
 							{errors.map((error) => (

src/app/admin/devops/page.tsx

@@ -1,4 +1,5 @@
 import { AlertTriangle, Database, HeartPulse, Server } from "lucide-react";
+import { getTranslations } from "next-intl/server";
 import { redirect } from "next/navigation";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -55,6 +56,7 @@ export default async function DevOpsPage() {
 		redirect("/admin");
 	}
 
+	const t = await getTranslations("pages.admin.devops");
 	const data = await getDevOpsData();
 
 	return (
@@ -127,7 +129,7 @@ export default async function DevOpsPage() {
 				</CardHeader>
 				<CardContent>
 					{data.recentErrors.length === 0 ? (
-						<p className="text-sm text-muted-foreground">No recent errors</p>
+						<div className="admin-empty">{t("noRecentErrors")}</div>
 					) : (
 						<div className="space-y-2 max-h-[500px] overflow-y-auto">
 							{data.recentErrors.map((error) => (

src/app/admin/events/create/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import { redirect } from "next/navigation";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
@@ -9,6 +10,7 @@ export default async function CreateEventPage() {
 		redirect("/admin/events");
 	}
 
+	const t = await getTranslations("pages.admin.events");
 	const eventTypes = await prisma.websiteEventType.findMany({
 		where: { isActive: 1 },
 		orderBy: { name: "asc" },
@@ -17,8 +19,12 @@ export default async function CreateEventPage() {
 	return (
 		<div className="space-y-6">
 			<div>
-				<h1 className="text-3xl font-bold tracking-tight">Create Event</h1>
-				<p className="text-muted-foreground">Schedule a new hotel event</p>
+				<h1 className="m-0 text-2xl font-extrabold text-[var(--admin-text)]">
+					{t("createTitle")}
+				</h1>
+				<p className="m-0 mt-1 text-sm text-[var(--admin-text-muted)]">
+					{t("createSubtitle")}
+				</p>
 			</div>
 
 			<EventForm eventTypes={eventTypes} />

src/app/admin/events/page.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { Button } from "@/components/ui/button";
+import { getTranslations } from "next-intl/server";
 import { fetchAdminList } from "@/lib/admin-list";
 import { PERMS } from "@/lib/permissions";
 import { EventsTable } from "./events-table";
@@ -11,6 +11,7 @@ export default async function EventsPage({
 	params: Promise<{ locale: string }>;
 	searchParams: Promise<Record<string, string>>;
 }) {
+	const t = await getTranslations("pages.admin.events");
 	const result = await fetchAdminList(
 		{
 			permission: PERMS.EVENTS_VIEW,
@@ -45,9 +46,9 @@ export default async function EventsPage({
 	return (
 		<div className="space-y-6">
 			<div className="flex justify-end">
-				<Button asChild>
-					<Link href="/admin/events/create">New Event</Link>
-				</Button>
+				<Link href="/admin/events/create" className="btn btn-primary">
+					{t("newEvent")}
+				</Link>
 			</div>
 
 			<EventsTable

src/app/admin/media/page.tsx

@@ -1,4 +1,3 @@
-import { getTranslations } from "next-intl/server";
 import { AdminMediaGrid } from "@/components/admin/media-grid";
 import { redirect } from "next/navigation";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
@@ -9,18 +8,8 @@ export default async function AdminMediaPage() {
 		redirect("/admin");
 	}
 
-	const t = await getTranslations("pages.admin.media");
-
 	return (
 		<main>
-			<div className="mb-6">
-				<h1 className="m-0 text-2xl font-extrabold text-[var(--admin-text)]">
-					{t("title")}
-				</h1>
-				<p className="m-0 text-sm text-[var(--admin-text-muted)] mt-1">
-					{t("subtitle")}
-				</p>
-			</div>
 			<AdminMediaGrid />
 		</main>
 	);

src/app/admin/polls/create/page.tsx

@@ -1,3 +1,4 @@
+import { getTranslations } from "next-intl/server";
 import { redirect } from "next/navigation";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { PollForm } from "../poll-form";
@@ -8,12 +9,16 @@ export default async function CreatePollPage() {
 		redirect("/admin/polls");
 	}
 
+	const t = await getTranslations("pages.admin.polls");
+
 	return (
 		<div className="space-y-6">
 			<div>
-				<h1 className="text-3xl font-bold tracking-tight">Create Poll</h1>
-				<p className="text-muted-foreground">
-					Create a new community poll or survey
+				<h1 className="m-0 text-2xl font-extrabold text-[var(--admin-text)]">
+					{t("createTitle")}
+				</h1>
+				<p className="m-0 mt-1 text-sm text-[var(--admin-text-muted)]">
+					{t("createSubtitle")}
 				</p>
 			</div>
 

src/app/admin/polls/page.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { Button } from "@/components/ui/button";
+import { getTranslations } from "next-intl/server";
 import { fetchAdminList } from "@/lib/admin-list";
 import { PERMS } from "@/lib/permissions";
 import { PollsTable } from "./polls-table";
@@ -11,6 +11,7 @@ export default async function PollsPage({
 	params: Promise<{ locale: string }>;
 	searchParams: Promise<Record<string, string>>;
 }) {
+	const t = await getTranslations("pages.admin.polls");
 	const result = await fetchAdminList(
 		{
 			permission: PERMS.POLLS_VIEW,
@@ -44,9 +45,9 @@ export default async function PollsPage({
 	return (
 		<div className="space-y-6">
 			<div className="flex justify-end">
-				<Button asChild>
-					<Link href="/admin/polls/create">New Poll</Link>
-				</Button>
+				<Link href="/admin/polls/create" className="btn btn-primary">
+					{t("newPoll")}
+				</Link>
 			</div>
 
 			<PollsTable

src/app/admin/teams/page.tsx

@@ -1,4 +1,3 @@
-import { Users } from "lucide-react";
 import { getTranslations } from "next-intl/server";
 import { createTeam, deleteTeam } from "@/actions/admin-teams";
 import { StatusCard } from "@/components/admin/dashboard";
@@ -45,20 +44,6 @@ export default async function AdminTeams() {
 
 	return (
 		<main>
-			<div className="flex items-center gap-3 mb-6">
-				<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--admin-accent)]/20 to-[var(--admin-accent)]/5 grid place-items-center">
-					<Users size={20} className="text-[var(--admin-accent)]" />
-				</div>
-				<div>
-					<h1 className="m-0 text-xl font-extrabold text-[var(--admin-text)]">
-						{t("title")}
-					</h1>
-					<p className="m-0 text-xs text-[var(--admin-text-muted)] mt-0.5">
-						{t("subtitle")}
-					</p>
-				</div>
-			</div>
-
 			<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
 				<StatusCard label={t("teamRanks")} value={teams.length} icon="🛡️" />
 				<StatusCard
@@ -70,11 +55,11 @@ export default async function AdminTeams() {
 				<StatusCard label={t("hidden")} value={hidden} icon="🙈" />
 			</div>
 
-			<div className="admin-card" style={{ marginBottom: "1.5rem" }}>
-				<h3 style={{ marginTop: 0 }}>{t("newTeamRank")}</h3>
-				<form action={createTeam} style={{ display: "grid", gap: "0.6rem" }}>
+			<div className="admin-card mb-6">
+				<h3 className="mt-0">{t("newTeamRank")}</h3>
+				<form action={createTeam} className="grid gap-2.5">
 					<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-						<label style={{ display: "grid", gap: "0.25rem" }}>
+						<label className="grid gap-1">
 							<span className="text-sm theme-text-muted dark:theme-text-muted">
 								{t("rankName")}
 							</span>
@@ -84,13 +69,13 @@ export default async function AdminTeams() {
 								required
 							/>
 						</label>
-						<label style={{ display: "grid", gap: "0.25rem" }}>
+						<label className="grid gap-1">
 							<span className="text-sm theme-text-muted dark:theme-text-muted">
 								{t("badgeCode")}
 							</span>
 							<input name="badge" placeholder={t("badgeCodePlaceholder")} />
 						</label>
-						<label style={{ display: "grid", gap: "0.25rem" }}>
+						<label className="grid gap-1">
 							<span className="text-sm theme-text-muted dark:theme-text-muted">
 								{t("jobDescription")}
 							</span>
@@ -99,7 +84,7 @@ export default async function AdminTeams() {
 								placeholder={t("jobDescriptionPlaceholder")}
 							/>
 						</label>
-						<label style={{ display: "grid", gap: "0.25rem" }}>
+						<label className="grid gap-1">
 							<span className="text-sm theme-text-muted dark:theme-text-muted">
 								{t("staffColor")}
 							</span>
@@ -110,14 +95,8 @@ export default async function AdminTeams() {
 							/>
 						</label>
 					</div>
-					<label
-						style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}
-					>
-						<input
-							type="checkbox"
-							name="hiddenRank"
-							style={{ width: "auto" }}
-						/>
+					<label className="flex items-center gap-1.5">
+						<input type="checkbox" name="hiddenRank" className="w-auto" />
 						<span className="text-sm theme-text-muted dark:theme-text-muted">
 							{t("hiddenRank")}
 						</span>
@@ -164,22 +143,11 @@ export default async function AdminTeams() {
 											{team.jobDescription ?? "—"}
 										</td>
 										<td>
-											<span
-												style={{
-													display: "inline-flex",
-													alignItems: "center",
-													gap: "0.4rem",
-												}}
-											>
+											<span className="inline-flex items-center gap-1.5">
 												<span
 													aria-hidden
-													style={{
-														width: 14,
-														height: 14,
-														borderRadius: 4,
-														border: "1px solid var(--admin-border)",
-														background: team.staffColor,
-													}}
+													className="h-3.5 w-3.5 rounded border border-[var(--admin-border)]"
+													style={{ background: team.staffColor }}
 												/>
 												{team.staffColor}
 											</span>

src/app/admin/users/multi-accounts/page.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { getTranslations } from "next-intl/server";
 import { redirect } from "next/navigation";
 import {
 	detectMultiAccounts,
@@ -17,6 +18,7 @@ export default async function MultiAccountsPage({
 	if (!canAccess(permissions, PERMS.USERS_VIEW, session.user.rank))
 		redirect("/admin");
 
+	const t = await getTranslations("pages.admin.multiAccounts");
 	const params = await searchParams;
 	const minAccounts = Math.max(2, Number(params.min) || 2);
 	const limit = Math.min(200, Number(params.limit) || 50);
@@ -31,7 +33,7 @@ export default async function MultiAccountsPage({
 			<form className="flex flex-wrap items-end gap-3" action="">
 				<label className="text-sm">
 					<span className="block text-muted-foreground">
-						Min accounts per cluster
+						{t("minAccounts")}
 					</span>
 					<input
 						type="number"
@@ -43,7 +45,7 @@ export default async function MultiAccountsPage({
 					/>
 				</label>
 				<label className="text-sm">
-					<span className="block text-muted-foreground">Result limit</span>
+					<span className="block text-muted-foreground">{t("resultLimit")}</span>
 					<input
 						type="number"
 						name="limit"
@@ -57,16 +59,12 @@ export default async function MultiAccountsPage({
 					type="submit"
 					className="h-9 rounded-md bg-primary px-4 text-sm text-primary-foreground"
 				>
-					Refresh
+					{t("refresh")}
 				</button>
 			</form>
 
 			{clusters.length === 0 ? (
-				<Card>
-					<CardContent className="py-10 text-center text-muted-foreground">
-						No clusters found at the current thresholds.
-					</CardContent>
-				</Card>
+				<div className="admin-empty">{t("noClusters")}</div>
 			) : (
 				<div className="grid gap-4">
 					{clusters.map((cluster) => (

src/messages/en.json

@@ -835,6 +835,26 @@
 					"cancel": "Cancel"
 				}
 			},
+			"events": {
+				"newEvent": "+ New event",
+				"createTitle": "Create event",
+				"createSubtitle": "Schedule a new hotel event"
+			},
+			"polls": {
+				"newPoll": "+ New poll",
+				"createTitle": "Create poll",
+				"createSubtitle": "Create a new community poll or survey"
+			},
+			"multiAccounts": {
+				"minAccounts": "Min accounts per cluster",
+				"resultLimit": "Result limit",
+				"refresh": "Refresh",
+				"noClusters": "No clusters found at the current thresholds."
+			},
+			"devops": {
+				"noEmulatorErrors": "No emulator errors found",
+				"noRecentErrors": "No recent errors"
+			},
 			"tags": {
 				"title": "Tags",
 				"subtitle": "Article tags / categories",

src/messages/it.json

@@ -799,6 +799,26 @@
 					"cancel": "Annulla"
 				}
 			},
+			"events": {
+				"newEvent": "+ Nuovo evento",
+				"createTitle": "Crea evento",
+				"createSubtitle": "Programma un nuovo evento dell'hotel"
+			},
+			"polls": {
+				"newPoll": "+ Nuovo sondaggio",
+				"createTitle": "Crea sondaggio",
+				"createSubtitle": "Crea un nuovo sondaggio o survey della community"
+			},
+			"multiAccounts": {
+				"minAccounts": "Min. account per cluster",
+				"resultLimit": "Limite risultati",
+				"refresh": "Aggiorna",
+				"noClusters": "Nessun cluster trovato con le soglie attuali."
+			},
+			"devops": {
+				"noEmulatorErrors": "Nessun errore emulator trovato",
+				"noRecentErrors": "Nessun errore recente"
+			},
 			"tags": {
 				"title": "Tag",
 				"subtitle": "Tag / categorie degli articoli",

src/messages/nl.json

@@ -835,6 +835,26 @@
 					"cancel": "Annuleren"
 				}
 			},
+			"events": {
+				"newEvent": "+ Nieuw evenement",
+				"createTitle": "Evenement aanmaken",
+				"createSubtitle": "Plan een nieuw hotel-evenement"
+			},
+			"polls": {
+				"newPoll": "+ Nieuwe poll",
+				"createTitle": "Poll aanmaken",
+				"createSubtitle": "Maak een nieuwe community-poll of enquête"
+			},
+			"multiAccounts": {
+				"minAccounts": "Min. accounts per cluster",
+				"resultLimit": "Resultaatlimiet",
+				"refresh": "Vernieuwen",
+				"noClusters": "Geen clusters gevonden met de huidige drempels."
+			},
+			"devops": {
+				"noEmulatorErrors": "Geen emulatorfouten gevonden",
+				"noRecentErrors": "Geen recente fouten"
+			},
 			"tags": {
 				"title": "Tags",
 				"subtitle": "Artikel tags / categorieën",