Polish admin hub pages: drop duplicate headers, align CTAs and empties.

Remove redundant titles under AdminHubChrome, style events/polls create flows with admin chrome + i18n, and standardize empty states / teams form classes.

Co-authored-by: Cursor <[email protected]>
This commit is contained in:
SimoandCursor committed 2026-07-18 21:28:15 +02:00
1 parent 0582eed5ab
commit 3cb8b92cb3
14 files changed
+112 -105

No files matched your search

-15
View File
@@ -1,4 +1,3 @@
import { ClipboardList } from "lucide-react";
import { formatDate } from "@/lib/format-date"; import { formatDate } from "@/lib/format-date";
import Link from "next/link"; import Link from "next/link";
import { getTranslations } from "next-intl/server"; import { getTranslations } from "next-intl/server";
@@ -53,20 +52,6 @@ export default async function AdminApplications() {
return ( return (
<main> <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"> <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard <StatusCard
label={t("pending")} label={t("pending")}
+2 -10
View File
@@ -53,17 +53,9 @@ export default async function AdminArticles({
return ( return (
<main> <main>
<div className="flex items-center justify-between mb-6"> <div className="flex justify-end 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>
<Link href="/admin/articles/new" className="btn btn-primary"> <Link href="/admin/articles/new" className="btn btn-primary">
+ {t("newArticle")} {t("newArticle")}
</Link> </Link>
</div> </div>
+3 -3
View File
@@ -1,3 +1,4 @@
import { getTranslations } from "next-intl/server";
import { redirect } from "next/navigation"; import { redirect } from "next/navigation";
import { Card, CardContent } from "@/components/ui/card"; import { Card, CardContent } from "@/components/ui/card";
import { canAccess, getAdminContext, PERMS } from "@/lib/permissions"; import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
@@ -13,6 +14,7 @@ export default async function EmulatorErrorsPage({
redirect("/admin"); redirect("/admin");
} }
const t = await getTranslations("pages.admin.devops");
const params = await searchParams; const params = await searchParams;
const page = Math.max(1, Number(params.page) || 1); const page = Math.max(1, Number(params.page) || 1);
const perPage = 50; const perPage = 50;
@@ -37,9 +39,7 @@ export default async function EmulatorErrorsPage({
<Card> <Card>
<CardContent className="p-0"> <CardContent className="p-0">
{errors.length === 0 ? ( {errors.length === 0 ? (
<div className="p-6 text-center text-muted-foreground"> <div className="admin-empty">{t("noEmulatorErrors")}</div>
No emulator errors found
</div>
) : ( ) : (
<div className="divide-y"> <div className="divide-y">
{errors.map((error) => ( {errors.map((error) => (
+3 -1
View File
@@ -1,4 +1,5 @@
import { AlertTriangle, Database, HeartPulse, Server } from "lucide-react"; import { AlertTriangle, Database, HeartPulse, Server } from "lucide-react";
import { getTranslations } from "next-intl/server";
import { redirect } from "next/navigation"; import { redirect } from "next/navigation";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -55,6 +56,7 @@ export default async function DevOpsPage() {
redirect("/admin"); redirect("/admin");
} }
const t = await getTranslations("pages.admin.devops");
const data = await getDevOpsData(); const data = await getDevOpsData();
return ( return (
@@ -127,7 +129,7 @@ export default async function DevOpsPage() {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
{data.recentErrors.length === 0 ? ( {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"> <div className="space-y-2 max-h-[500px] overflow-y-auto">
{data.recentErrors.map((error) => ( {data.recentErrors.map((error) => (
+8 -2
View File
@@ -1,3 +1,4 @@
import { getTranslations } from "next-intl/server";
import { redirect } from "next/navigation"; import { redirect } from "next/navigation";
import { canAccess, getAdminContext, PERMS } from "@/lib/permissions"; import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
import { prisma } from "@/lib/prisma"; import { prisma } from "@/lib/prisma";
@@ -9,6 +10,7 @@ export default async function CreateEventPage() {
redirect("/admin/events"); redirect("/admin/events");
} }
const t = await getTranslations("pages.admin.events");
const eventTypes = await prisma.websiteEventType.findMany({ const eventTypes = await prisma.websiteEventType.findMany({
where: { isActive: 1 }, where: { isActive: 1 },
orderBy: { name: "asc" }, orderBy: { name: "asc" },
@@ -17,8 +19,12 @@ export default async function CreateEventPage() {
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<h1 className="text-3xl font-bold tracking-tight">Create Event</h1> <h1 className="m-0 text-2xl font-extrabold text-[var(--admin-text)]">
<p className="text-muted-foreground">Schedule a new hotel event</p> {t("createTitle")}
</h1>
<p className="m-0 mt-1 text-sm text-[var(--admin-text-muted)]">
{t("createSubtitle")}
</p>
</div> </div>
<EventForm eventTypes={eventTypes} /> <EventForm eventTypes={eventTypes} />
+5 -4
View File
@@ -1,5 +1,5 @@
import Link from "next/link"; import Link from "next/link";
import { Button } from "@/components/ui/button"; import { getTranslations } from "next-intl/server";
import { fetchAdminList } from "@/lib/admin-list"; import { fetchAdminList } from "@/lib/admin-list";
import { PERMS } from "@/lib/permissions"; import { PERMS } from "@/lib/permissions";
import { EventsTable } from "./events-table"; import { EventsTable } from "./events-table";
@@ -11,6 +11,7 @@ export default async function EventsPage({
params: Promise<{ locale: string }>; params: Promise<{ locale: string }>;
searchParams: Promise<Record<string, string>>; searchParams: Promise<Record<string, string>>;
}) { }) {
const t = await getTranslations("pages.admin.events");
const result = await fetchAdminList( const result = await fetchAdminList(
{ {
permission: PERMS.EVENTS_VIEW, permission: PERMS.EVENTS_VIEW,
@@ -45,9 +46,9 @@ export default async function EventsPage({
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<div className="flex justify-end"> <div className="flex justify-end">
<Button asChild> <Link href="/admin/events/create" className="btn btn-primary">
<Link href="/admin/events/create">New Event</Link> {t("newEvent")}
</Button> </Link>
</div> </div>
<EventsTable <EventsTable
-11
View File
@@ -1,4 +1,3 @@
import { getTranslations } from "next-intl/server";
import { AdminMediaGrid } from "@/components/admin/media-grid"; import { AdminMediaGrid } from "@/components/admin/media-grid";
import { redirect } from "next/navigation"; import { redirect } from "next/navigation";
import { canAccess, getAdminContext, PERMS } from "@/lib/permissions"; import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
@@ -9,18 +8,8 @@ export default async function AdminMediaPage() {
redirect("/admin"); redirect("/admin");
} }
const t = await getTranslations("pages.admin.media");
return ( return (
<main> <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 /> <AdminMediaGrid />
</main> </main>
); );
+8 -3
View File
@@ -1,3 +1,4 @@
import { getTranslations } from "next-intl/server";
import { redirect } from "next/navigation"; import { redirect } from "next/navigation";
import { canAccess, getAdminContext, PERMS } from "@/lib/permissions"; import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
import { PollForm } from "../poll-form"; import { PollForm } from "../poll-form";
@@ -8,12 +9,16 @@ export default async function CreatePollPage() {
redirect("/admin/polls"); redirect("/admin/polls");
} }
const t = await getTranslations("pages.admin.polls");
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<h1 className="text-3xl font-bold tracking-tight">Create Poll</h1> <h1 className="m-0 text-2xl font-extrabold text-[var(--admin-text)]">
<p className="text-muted-foreground"> {t("createTitle")}
Create a new community poll or survey </h1>
<p className="m-0 mt-1 text-sm text-[var(--admin-text-muted)]">
{t("createSubtitle")}
</p> </p>
</div> </div>
+5 -4
View File
@@ -1,5 +1,5 @@
import Link from "next/link"; import Link from "next/link";
import { Button } from "@/components/ui/button"; import { getTranslations } from "next-intl/server";
import { fetchAdminList } from "@/lib/admin-list"; import { fetchAdminList } from "@/lib/admin-list";
import { PERMS } from "@/lib/permissions"; import { PERMS } from "@/lib/permissions";
import { PollsTable } from "./polls-table"; import { PollsTable } from "./polls-table";
@@ -11,6 +11,7 @@ export default async function PollsPage({
params: Promise<{ locale: string }>; params: Promise<{ locale: string }>;
searchParams: Promise<Record<string, string>>; searchParams: Promise<Record<string, string>>;
}) { }) {
const t = await getTranslations("pages.admin.polls");
const result = await fetchAdminList( const result = await fetchAdminList(
{ {
permission: PERMS.POLLS_VIEW, permission: PERMS.POLLS_VIEW,
@@ -44,9 +45,9 @@ export default async function PollsPage({
return ( return (
<div className="space-y-6"> <div className="space-y-6">
<div className="flex justify-end"> <div className="flex justify-end">
<Button asChild> <Link href="/admin/polls/create" className="btn btn-primary">
<Link href="/admin/polls/create">New Poll</Link> {t("newPoll")}
</Button> </Link>
</div> </div>
<PollsTable <PollsTable
+12 -44
View File
@@ -1,4 +1,3 @@
import { Users } from "lucide-react";
import { getTranslations } from "next-intl/server"; import { getTranslations } from "next-intl/server";
import { createTeam, deleteTeam } from "@/actions/admin-teams"; import { createTeam, deleteTeam } from "@/actions/admin-teams";
import { StatusCard } from "@/components/admin/dashboard"; import { StatusCard } from "@/components/admin/dashboard";
@@ -45,20 +44,6 @@ export default async function AdminTeams() {
return ( return (
<main> <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"> <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 label={t("teamRanks")} value={teams.length} icon="🛡️" />
<StatusCard <StatusCard
@@ -70,11 +55,11 @@ export default async function AdminTeams() {
<StatusCard label={t("hidden")} value={hidden} icon="🙈" /> <StatusCard label={t("hidden")} value={hidden} icon="🙈" />
</div> </div>
<div className="admin-card" style={{ marginBottom: "1.5rem" }}> <div className="admin-card mb-6">
<h3 style={{ marginTop: 0 }}>{t("newTeamRank")}</h3> <h3 className="mt-0">{t("newTeamRank")}</h3>
<form action={createTeam} style={{ display: "grid", gap: "0.6rem" }}> <form action={createTeam} className="grid gap-2.5">
<div className="grid grid-cols-1 gap-4 md:grid-cols-2"> <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"> <span className="text-sm theme-text-muted dark:theme-text-muted">
{t("rankName")} {t("rankName")}
</span> </span>
@@ -84,13 +69,13 @@ export default async function AdminTeams() {
required required
/> />
</label> </label>
<label style={{ display: "grid", gap: "0.25rem" }}> <label className="grid gap-1">
<span className="text-sm theme-text-muted dark:theme-text-muted"> <span className="text-sm theme-text-muted dark:theme-text-muted">
{t("badgeCode")} {t("badgeCode")}
</span> </span>
<input name="badge" placeholder={t("badgeCodePlaceholder")} /> <input name="badge" placeholder={t("badgeCodePlaceholder")} />
</label> </label>
<label style={{ display: "grid", gap: "0.25rem" }}> <label className="grid gap-1">
<span className="text-sm theme-text-muted dark:theme-text-muted"> <span className="text-sm theme-text-muted dark:theme-text-muted">
{t("jobDescription")} {t("jobDescription")}
</span> </span>
@@ -99,7 +84,7 @@ export default async function AdminTeams() {
placeholder={t("jobDescriptionPlaceholder")} placeholder={t("jobDescriptionPlaceholder")}
/> />
</label> </label>
<label style={{ display: "grid", gap: "0.25rem" }}> <label className="grid gap-1">
<span className="text-sm theme-text-muted dark:theme-text-muted"> <span className="text-sm theme-text-muted dark:theme-text-muted">
{t("staffColor")} {t("staffColor")}
</span> </span>
@@ -110,14 +95,8 @@ export default async function AdminTeams() {
/> />
</label> </label>
</div> </div>
<label <label className="flex items-center gap-1.5">
style={{ display: "flex", alignItems: "center", gap: "0.4rem" }} <input type="checkbox" name="hiddenRank" className="w-auto" />
>
<input
type="checkbox"
name="hiddenRank"
style={{ width: "auto" }}
/>
<span className="text-sm theme-text-muted dark:theme-text-muted"> <span className="text-sm theme-text-muted dark:theme-text-muted">
{t("hiddenRank")} {t("hiddenRank")}
</span> </span>
@@ -164,22 +143,11 @@ export default async function AdminTeams() {
{team.jobDescription ?? "—"} {team.jobDescription ?? "—"}
</td> </td>
<td> <td>
<span <span className="inline-flex items-center gap-1.5">
style={{
display: "inline-flex",
alignItems: "center",
gap: "0.4rem",
}}
>
<span <span
aria-hidden aria-hidden
style={{ className="h-3.5 w-3.5 rounded border border-[var(--admin-border)]"
width: 14, style={{ background: team.staffColor }}
height: 14,
borderRadius: 4,
border: "1px solid var(--admin-border)",
background: team.staffColor,
}}
/> />
{team.staffColor} {team.staffColor}
</span> </span>
+6 -8
View File
@@ -1,4 +1,5 @@
import Link from "next/link"; import Link from "next/link";
import { getTranslations } from "next-intl/server";
import { redirect } from "next/navigation"; import { redirect } from "next/navigation";
import { import {
detectMultiAccounts, detectMultiAccounts,
@@ -17,6 +18,7 @@ export default async function MultiAccountsPage({
if (!canAccess(permissions, PERMS.USERS_VIEW, session.user.rank)) if (!canAccess(permissions, PERMS.USERS_VIEW, session.user.rank))
redirect("/admin"); redirect("/admin");
const t = await getTranslations("pages.admin.multiAccounts");
const params = await searchParams; const params = await searchParams;
const minAccounts = Math.max(2, Number(params.min) || 2); const minAccounts = Math.max(2, Number(params.min) || 2);
const limit = Math.min(200, Number(params.limit) || 50); 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=""> <form className="flex flex-wrap items-end gap-3" action="">
<label className="text-sm"> <label className="text-sm">
<span className="block text-muted-foreground"> <span className="block text-muted-foreground">
Min accounts per cluster {t("minAccounts")}
</span> </span>
<input <input
type="number" type="number"
@@ -43,7 +45,7 @@ export default async function MultiAccountsPage({
/> />
</label> </label>
<label className="text-sm"> <label className="text-sm">
<span className="block text-muted-foreground">Result limit</span> <span className="block text-muted-foreground">{t("resultLimit")}</span>
<input <input
type="number" type="number"
name="limit" name="limit"
@@ -57,16 +59,12 @@ export default async function MultiAccountsPage({
type="submit" type="submit"
className="h-9 rounded-md bg-primary px-4 text-sm text-primary-foreground" className="h-9 rounded-md bg-primary px-4 text-sm text-primary-foreground"
> >
Refresh {t("refresh")}
</button> </button>
</form> </form>
{clusters.length === 0 ? ( {clusters.length === 0 ? (
<Card> <div className="admin-empty">{t("noClusters")}</div>
<CardContent className="py-10 text-center text-muted-foreground">
No clusters found at the current thresholds.
</CardContent>
</Card>
) : ( ) : (
<div className="grid gap-4"> <div className="grid gap-4">
{clusters.map((cluster) => ( {clusters.map((cluster) => (
+20
View File
@@ -835,6 +835,26 @@
"cancel": "Cancel" "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": { "tags": {
"title": "Tags", "title": "Tags",
"subtitle": "Article tags / categories", "subtitle": "Article tags / categories",
+20
View File
@@ -799,6 +799,26 @@
"cancel": "Annulla" "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": { "tags": {
"title": "Tag", "title": "Tag",
"subtitle": "Tag / categorie degli articoli", "subtitle": "Tag / categorie degli articoli",
+20
View File
@@ -835,6 +835,26 @@
"cancel": "Annuleren" "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": { "tags": {
"title": "Tags", "title": "Tags",
"subtitle": "Artikel tags / categorieën", "subtitle": "Artikel tags / categorieën",