Files
Epicnabbo-Catalogus-Updated…/src/app/admin/navigation/page.tsx
T
openhands 928544100b Convert admin pages to new Tailwind design pattern
- 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]>
2026-07-02 16:05:35 +02:00

223 lines
7.7 KiB
TypeScript

import { Navigation } from "lucide-react";
import { StatusCard } from "@/components/admin/dashboard";
import { prisma } from "@/lib/prisma";
export const dynamic = "force-dynamic";
// navigator_flatcats — emulator-owned flat (private-room) categories shown in the
// navigator. The Prisma delegate exists because the table has a primary key.
type Flatcat = {
id: number;
caption: string;
captionSave: string;
minRank: number;
maxUserCount: number;
canTrade: string;
public: string;
listType: number;
orderNum: number;
};
// navigator_publics — emulator-owned public-room assignments. This table has no
// primary/unique key, so Prisma marks the model `@@ignore` and generates NO
// delegate (prisma.navigatorPublics does not exist). It must be read via raw SQL.
type PublicRow = {
public_cat_id: number;
room_id: number;
visible: string;
};
// Reusable yes/no pill so emulator boolean-ish "1"/"0" columns read consistently.
function YesNo({ on }: { on: boolean }) {
return (
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${on ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}>{on ? "Yes" : "No"}</span>
);
}
export default async function AdminNavigation() {
let flatcats: Flatcat[] = [];
try {
flatcats = await prisma.navigatorFlatcats.findMany({
select: {
id: true,
caption: true,
captionSave: true,
minRank: true,
maxUserCount: true,
canTrade: true,
public: true,
listType: true,
orderNum: true,
},
orderBy: [{ orderNum: "asc" }, { id: "asc" }],
});
} catch {
flatcats = [];
}
// Raw read because navigator_publics is an `@@ignore`d (keyless) model.
let publics: PublicRow[] = [];
try {
publics = await prisma.$queryRaw<PublicRow[]>`
SELECT public_cat_id, room_id, visible
FROM navigator_publics
ORDER BY public_cat_id ASC, room_id ASC
`;
} catch {
publics = [];
}
// Resolve the public-category names and room names referenced by the rows above
// so the read-only view is legible. Each lookup degrades to an empty map on error.
const catIds = Array.from(new Set(publics.map((p) => p.public_cat_id)));
const roomIds = Array.from(new Set(publics.map((p) => p.room_id)));
let catNameById = new Map<number, string>();
if (catIds.length) {
try {
const cats = await prisma.navigatorPubliccats.findMany({
where: { id: { in: catIds } },
select: { id: true, name: true },
});
catNameById = new Map(cats.map((c) => [c.id, c.name]));
} catch {
catNameById = new Map();
}
}
let roomNameById = new Map<number, string>();
if (roomIds.length) {
try {
const rooms = await prisma.rooms.findMany({
where: { id: { in: roomIds } },
select: { id: true, name: true },
});
roomNameById = new Map(rooms.map((r) => [r.id, r.name]));
} catch {
roomNameById = new Map();
}
}
const publicFlatcats = flatcats.filter((c) => c.public === "1").length;
const visiblePublics = publics.filter((p) => p.visible === "1").length;
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(--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="📂" />
<StatusCard
label="Public (flatcats)"
value={publicFlatcats}
hint="marked public"
icon="🌐"
/>
<StatusCard label="Public rooms" value={publics.length} icon="🚪" />
<StatusCard
label="Visible rooms"
value={visiblePublics}
state={visiblePublics > 0 ? "ok" : "neutral"}
icon="👁️"
/>
</div>
{/* ── navigator_flatcats ───────────────────────────────── */}
<section className="mt-6">
<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 ? (
<div className="admin-empty">No flat categories found.</div>
) : (
<div className="overflow-x-auto">
<table>
<thead>
<tr>
<th>ID</th>
<th>Caption</th>
<th>Caption (save)</th>
<th>Min rank</th>
<th>Max users</th>
<th>Can trade</th>
<th>Public</th>
<th>List type</th>
<th>Order</th>
</tr>
</thead>
<tbody>
{flatcats.map((c) => (
<tr key={c.id}>
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{c.id}</td>
<td>{c.caption || "—"}</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>
<YesNo on={c.canTrade === "1"} />
</td>
<td>
<YesNo on={c.public === "1"} />
</td>
<td>{c.listType}</td>
<td>{c.orderNum}</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</section>
{/* ── navigator_publics ────────────────────────────────── */}
<section className="mt-6">
<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 ? (
<div className="admin-empty">No public-room assignments found.</div>
) : (
<div className="overflow-x-auto">
<table>
<thead>
<tr>
<th>Public cat</th>
<th>Room</th>
<th>Visible</th>
</tr>
</thead>
<tbody>
{publics.map((p, i) => (
<tr key={`${p.public_cat_id}-${p.room_id}-${i}`}>
<td>
{catNameById.get(p.public_cat_id) ?? "—"}{" "}
<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="text-sm text-gray-500 dark:text-gray-400">#{p.room_id}</span>
</td>
<td>
<YesNo on={p.visible === "1"} />
</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</section>
</main>
);
}