remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Convert admin pages to new Tailwind design pattern

Browse Source 
- Replace 'card' class with 'admin-card' (gradient cards, dark mode support)
- Replace 'muted' class with consistent Tailwind muted states
- Standardize page headers with gradient backgrounds and Lucide icons
- Convert all inline styles to Tailwind classes
- Add admin-page CSS helpers (admin-card, admin-filter-bar, admin-section-title)
- Apply pattern to all 42 admin pages (was only 6 before)
- Zero TypeScript errors, production builds successfully

Co-authored-by: openhands <[email protected]>
This commit is contained in:
openhands committed 2026-07-02 16:05:35 +02:00
1 parent b621ec79a3
commit 928544100b
46 files changed
+790 -635
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/admin/navigation/page.tsx
+22 -17
View File
@@ -1,3 +1,4 @@
import { Navigation } from "lucide-react";
import { StatusCard } from "@/components/admin/dashboard";
import { prisma } from "@/lib/prisma";
@@ -102,11 +103,15 @@ export default async function AdminNavigation() {
return (
<main>
<h1>Navigator</h1>
<p className="muted" style={{ marginTop: "-0.4rem" }}>
Read-only · the navigator config is owned by the emulator. Edit it in your
emulator tooling, not here.
</p>
<div className="flex items-center gap-3 mb-6">
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-primary)]/5 grid place-items-center">
<Navigation size={20} className="text-[var(--color-primary)]" />
</div>
<div>
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Navigator</h1>
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Read-only · the navigator config is owned by the emulator. Edit it in your emulator tooling, not here.</p>
</div>
</div>
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
<StatusCard label="Flat categories" value={flatcats.length} icon="📂" />
@@ -127,14 +132,14 @@ export default async function AdminNavigation() {
{/* ── navigator_flatcats ───────────────────────────────── */}
<section className="mt-6">
<h2>Flat categories</h2>
<p className="muted" style={{ marginTop: "-0.4rem" }}>
<h2 className="admin-section-title">Flat categories</h2>
<p className="text-xs text-gray-500 dark:text-gray-400">
<code>navigator_flatcats</code> · {flatcats.length} rows
</p>
{flatcats.length === 0 ? (
<p className="muted">No flat categories found.</p>
<div className="admin-empty">No flat categories found.</div>
) : (
<div style={{ overflowX: "auto" }}>
<div className="overflow-x-auto">
<table>
<thead>
<tr>
@@ -152,9 +157,9 @@ export default async function AdminNavigation() {
<tbody>
{flatcats.map((c) => (
<tr key={c.id}>
<td className="muted">{c.id}</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{c.id}</td>
<td>{c.caption || "—"}</td>
<td className="muted">{c.captionSave || "—"}</td>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{c.captionSave || "—"}</td>
<td>{c.minRank}</td>
<td>{c.maxUserCount}</td>
<td>
@@ -175,14 +180,14 @@ export default async function AdminNavigation() {
{/* ── navigator_publics ────────────────────────────────── */}
<section className="mt-6">
<h2>Public rooms</h2>
<p className="muted" style={{ marginTop: "-0.4rem" }}>
<h2 className="admin-section-title">Public rooms</h2>
<p className="text-xs text-gray-500 dark:text-gray-400">
<code>navigator_publics</code> · {publics.length} rows
</p>
{publics.length === 0 ? (
<p className="muted">No public-room assignments found.</p>
<div className="admin-empty">No public-room assignments found.</div>
) : (
<div style={{ overflowX: "auto" }}>
<div className="overflow-x-auto">
<table>
<thead>
<tr>
@@ -196,11 +201,11 @@ export default async function AdminNavigation() {
<tr key={`${p.public_cat_id}-${p.room_id}-${i}`}>
<td>
{catNameById.get(p.public_cat_id) ?? "—"}{" "}
<span className="muted">#{p.public_cat_id}</span>
<span className="text-sm text-gray-500 dark:text-gray-400">#{p.public_cat_id}</span>
</td>
<td>
{roomNameById.get(p.room_id) || "(unnamed)"}{" "}
<span className="muted">#{p.room_id}</span>
<span className="text-sm text-gray-500 dark:text-gray-400">#{p.room_id}</span>
</td>
<td>
<YesNo on={p.visible === "1"} />