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]>
This commit is contained in:
openhands committed
1 parent
b621ec79a3
commit
928544100b
46 files changed
+790
-635
No files matched your search
@@ -1,6 +1,7 @@
|
||||
import Link from "next/link";
|
||||
import { notFound } from "next/navigation";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { Calendar } from "lucide-react";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
@@ -91,23 +92,22 @@ export default async function AdminCalendarCampaign({
|
||||
|
||||
return (
|
||||
<main>
|
||||
<p className="muted">
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mb-4">
|
||||
<Link href="/admin/calendar">← Calendar campaigns</Link>
|
||||
</p>
|
||||
|
||||
<div className="card" style={{ display: "flex", gap: "1.25rem", alignItems: "center", marginBottom: "1.5rem" }}>
|
||||
<div className="admin-card flex items-center gap-5 mb-6">
|
||||
{campaign.image ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img
|
||||
className="avatar"
|
||||
className="w-24 h-24 object-cover"
|
||||
src={campaign.image}
|
||||
alt={campaign.name}
|
||||
style={{ width: 96, height: 96, objectFit: "cover" }}
|
||||
/>
|
||||
) : null}
|
||||
<div>
|
||||
<h1 style={{ margin: "0 0 0.25rem" }}>{campaign.name || `Campaign #${campaign.id}`}</h1>
|
||||
<p className="muted" style={{ margin: 0 }}>
|
||||
<h1 className="m-0 mb-1">{campaign.name || `Campaign #${campaign.id}`}</h1>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 m-0">
|
||||
#{campaign.id} · {campaign.totalDays} day{campaign.totalDays === 1 ? "" : "s"} · starts{" "}
|
||||
{fmtDate(campaign.startTimestamp)}
|
||||
{disabled ? " · Disabled" : " · Enabled"}
|
||||
@@ -116,13 +116,13 @@ export default async function AdminCalendarCampaign({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 style={{ marginTop: "1.5rem" }}>Rewards</h2>
|
||||
<h2 className="admin-section-title">Rewards</h2>
|
||||
{rewards.length === 0 ? (
|
||||
<p className="muted">No rewards configured for this campaign.</p>
|
||||
<div className="admin-empty">No rewards configured for this campaign.</div>
|
||||
) : (
|
||||
<table style={{ width: "100%", borderCollapse: "collapse" }}>
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr style={{ textAlign: "left", color: "var(--muted)" }}>
|
||||
<tr className="text-left text-[var(--muted)]">
|
||||
<th>ID</th>
|
||||
<th>Product</th>
|
||||
<th>Item</th>
|
||||
@@ -135,21 +135,21 @@ export default async function AdminCalendarCampaign({
|
||||
</thead>
|
||||
<tbody>
|
||||
{rewards.map((r) => (
|
||||
<tr key={r.id} style={{ borderTop: "1px solid var(--border)" }}>
|
||||
<tr key={r.id} className="border-t border-[var(--border)]">
|
||||
<td>{r.id}</td>
|
||||
<td>{r.productName || <span className="muted">—</span>}</td>
|
||||
<td className="muted">{r.itemId > 0 ? r.itemId : "—"}</td>
|
||||
<td>{r.credits > 0 ? r.credits : <span className="muted">—</span>}</td>
|
||||
<td>{r.pixels > 0 ? r.pixels : <span className="muted">—</span>}</td>
|
||||
<td>{r.productName || <span className="text-sm text-gray-500 dark:text-gray-400">—</span>}</td>
|
||||
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{r.itemId > 0 ? r.itemId : "—"}</td>
|
||||
<td>{r.credits > 0 ? r.credits : <span className="text-sm text-gray-500 dark:text-gray-400">—</span>}</td>
|
||||
<td>{r.pixels > 0 ? r.pixels : <span className="text-sm text-gray-500 dark:text-gray-400">—</span>}</td>
|
||||
<td>
|
||||
{r.points > 0 ? (
|
||||
`${r.points} (type ${r.pointsType})`
|
||||
) : (
|
||||
<span className="muted">—</span>
|
||||
<span className="text-sm text-gray-500 dark:text-gray-400">—</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="muted">{r.badge || "—"}</td>
|
||||
<td className="muted">
|
||||
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{r.badge || "—"}</td>
|
||||
<td className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">
|
||||
{r.subscriptionType
|
||||
? `${r.subscriptionType} · ${r.subscriptionDays}d`
|
||||
: "—"}
|
||||
@@ -160,7 +160,7 @@ export default async function AdminCalendarCampaign({
|
||||
</table>
|
||||
)}
|
||||
|
||||
<p className="muted" style={{ marginTop: "1rem" }}>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-4">
|
||||
{rewards.length} reward{rewards.length === 1 ? "" : "s"}
|
||||
</p>
|
||||
</main>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import Link from "next/link";
|
||||
import { StatusCard } from "@/components/admin/dashboard";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { Calendar } from "lucide-react";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
@@ -57,10 +58,15 @@ export default async function AdminCalendar() {
|
||||
|
||||
return (
|
||||
<main>
|
||||
<h1>Calendar campaigns</h1>
|
||||
<p className="muted" style={{ marginTop: "-0.4rem" }}>
|
||||
Read-only · {campaigns.length} campaign{campaigns.length === 1 ? "" : "s"}.
|
||||
</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">
|
||||
<Calendar size={20} className="text-[var(--color-primary)]" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Calendar campaigns</h1>
|
||||
<p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Read-only · {campaigns.length} campaign{campaigns.length === 1 ? "" : "s"}.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
|
||||
<StatusCard label="Campaigns" value={campaigns.length} icon="📅" />
|
||||
@@ -74,7 +80,7 @@ export default async function AdminCalendar() {
|
||||
</div>
|
||||
|
||||
{campaigns.length === 0 ? (
|
||||
<p className="muted">No calendar campaigns found.</p>
|
||||
<div className="admin-empty">No calendar campaigns found.</div>
|
||||
) : (
|
||||
<div className="grid cols-3">
|
||||
{campaigns.map((c) => {
|
||||
@@ -84,8 +90,7 @@ export default async function AdminCalendar() {
|
||||
<Link
|
||||
key={c.id}
|
||||
href={`/admin/calendar/${c.id}`}
|
||||
className="card hover article"
|
||||
style={{ color: "inherit" }}
|
||||
className="admin-card hover article"
|
||||
>
|
||||
{c.image ? (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
@@ -94,25 +99,17 @@ export default async function AdminCalendar() {
|
||||
<div className="article-img" />
|
||||
)}
|
||||
<div className="body">
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "0.5rem",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
margin: "0 0 0.35rem",
|
||||
}}
|
||||
>
|
||||
<h3 style={{ margin: 0 }}>{c.name || `Campaign #${c.id}`}</h3>
|
||||
<div className="flex items-center justify-between gap-2 mb-1">
|
||||
<h3 className="m-0">{c.name || `Campaign #${c.id}`}</h3>
|
||||
<span className={`inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full ${enabled ? "bg-green-600/20 text-[var(--color-text)]" : "bg-red-500/22 text-[var(--color-text)]"}`}>
|
||||
{enabled ? "enabled" : "disabled"}
|
||||
</span>
|
||||
</div>
|
||||
<p className="muted" style={{ margin: 0 }}>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 m-0">
|
||||
#{c.id} · {c.totalDays} day{c.totalDays === 1 ? "" : "s"} · {count} reward
|
||||
{count === 1 ? "" : "s"}
|
||||
</p>
|
||||
<p className="muted" style={{ margin: "0.35rem 0 0" }}>
|
||||
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
Starts {fmtDate(c.startTimestamp)}
|
||||
{c.lockExpired === "1" ? " · Locks expired" : ""}
|
||||
</p>
|
||||
|
||||
Reference in new issue
Block a user