Revert "Merge pull request 'Complete Housekeeping migration and /ase cutover' (#52) from codex/housekeeping-complete into main"
CI / check (push) Successful in 27s
CI / release (push) Skipped
CI / deploy (push) Successful in 43s

This reverts commit 488b6e57c4, reversing
changes made to b506b4499a.
This commit is contained in:
Simo committed 2026-08-30 21:31:34 +02:00
1 parent 488b6e57c4
commit b1ddda66ff
802 files changed
+61370 -76659

No files matched your search

+215
View File
@@ -0,0 +1,215 @@
"use client";
import { Plus, Trash2 } from "lucide-react";
import { useTranslations } from "next-intl";
import { useState } from "react";
import { addEventPrize, deleteEventPrize } from "@/actions/events";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { useServerAction } from "@/hooks/use-server-action";
import type { EventPrizeInput } from "@/lib/validators/event";
type PrizeType = "badge" | "credits" | "pixels" | "points" | "item";
interface Prize {
id: number;
position: number;
prizeType: string;
badgeCode: string | null;
credits: number;
pixels: number;
points: number;
itemId: number | null;
description: string;
}
interface Props {
eventId: number;
prizes: Prize[];
}
export function EventPrizesManager({ eventId, prizes }: Props) {
const t = useTranslations("pages.admin.events");
const { run, isPending } = useServerAction();
const [showForm, setShowForm] = useState(false);
const [form, setForm] = useState<EventPrizeInput>({
eventId,
position: prizes.length + 1,
prizeType: "badge",
badgeCode: "",
credits: 0,
pixels: 0,
points: 0,
description: "",
});
function handleAdd(e: React.FormEvent) {
e.preventDefault();
run(() => addEventPrize(form), {
successMessage: "Prize added!",
onSuccess: () => {
setShowForm(false);
setForm({
...form,
position: form.position + 1,
badgeCode: "",
description: "",
});
},
});
}
return (
<Card>
<CardHeader className="flex flex-row items-center justify-between">
<CardTitle>{t("statPrizes")}</CardTitle>
<Button size="sm" onClick={() => setShowForm(!showForm)}>
<Plus className="h-4 w-4 mr-1" /> {t("addPrize")}
</Button>
</CardHeader>
<CardContent className="space-y-4">
{showForm && (
<form
onSubmit={handleAdd}
className="border rounded-lg p-4 space-y-3"
>
<div className="grid grid-cols-2 md:grid-cols-4 gap-3">
<div className="space-y-1">
<Label>Position</Label>
<Input
type="number"
value={form.position}
onChange={(e) =>
setForm({ ...form, position: Number(e.target.value) })
}
/>
</div>
<div className="space-y-1">
<Label>Type</Label>
<Select
value={form.prizeType}
onValueChange={(v) =>
setForm({ ...form, prizeType: v as PrizeType })
}
>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="badge">Badge</SelectItem>
<SelectItem value="credits">Credits</SelectItem>
<SelectItem value="pixels">Pixels</SelectItem>
<SelectItem value="points">Points</SelectItem>
<SelectItem value="item">Item</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-1">
<Label>Badge Code</Label>
<Input
value={form.badgeCode ?? ""}
onChange={(e) =>
setForm({ ...form, badgeCode: e.target.value })
}
placeholder="ACH_..."
/>
</div>
<div className="space-y-1">
<Label>Credits</Label>
<Input
type="number"
value={form.credits}
onChange={(e) =>
setForm({ ...form, credits: Number(e.target.value) })
}
/>
</div>
</div>
<div className="space-y-1">
<Label>Description</Label>
<Input
value={form.description}
onChange={(e) =>
setForm({ ...form, description: e.target.value })
}
/>
</div>
<div className="flex gap-2 justify-end">
<Button
type="button"
variant="outline"
size="sm"
onClick={() => setShowForm(false)}
>
Cancel
</Button>
<Button type="submit" size="sm" disabled={isPending}>
Add
</Button>
</div>
</form>
)}
{prizes.length === 0 && !showForm && (
<div className="admin-empty">{t("noPrizes")}</div>
)}
{prizes.map((prize) => (
<div
key={prize.id}
className="flex items-center justify-between border rounded-lg px-4 py-3"
>
<div className="flex items-center gap-3">
<span className="flex h-8 w-8 items-center justify-center rounded-full bg-accent font-bold text-sm">
#{prize.position}
</span>
<div>
<div className="flex items-center gap-2">
<Badge variant="secondary">{prize.prizeType}</Badge>
{prize.badgeCode && (
<span className="text-sm font-mono">{prize.badgeCode}</span>
)}
{prize.credits > 0 && (
<span className="text-sm">{prize.credits} credits</span>
)}
{prize.pixels > 0 && (
<span className="text-sm">{prize.pixels} pixels</span>
)}
{prize.points > 0 && (
<span className="text-sm">{prize.points} points</span>
)}
</div>
{prize.description && (
<p className="text-xs text-muted-foreground">
{prize.description}
</p>
)}
</div>
</div>
<Button
variant="ghost"
size="icon"
onClick={() =>
run(() => deleteEventPrize({ id: prize.id }), {
successMessage: "Prize removed",
})
}
>
<Trash2 className="h-4 w-4 text-destructive" />
</Button>
</div>
))}
</CardContent>
</Card>
);
}
@@ -0,0 +1,48 @@
"use client";
import { useTranslations } from "next-intl";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
interface Registration {
id: number;
userId: number;
username: string;
createdAt: Date;
}
interface Props {
registrations: Registration[];
}
export function EventRegistrations({ registrations }: Props) {
const t = useTranslations("pages.admin.events");
return (
<Card>
<CardHeader>
<CardTitle>
{t("registrationsTitle", { count: registrations.length })}
</CardTitle>
</CardHeader>
<CardContent>
{registrations.length === 0 ? (
<div className="admin-empty">{t("noRegistrations")}</div>
) : (
<div className="divide-y max-h-[400px] overflow-y-auto">
{registrations.map((r) => (
<div
key={r.id}
className="flex items-center justify-between py-2"
>
<span className="text-sm font-medium">{r.username}</span>
<span className="text-xs text-muted-foreground">
{new Date(r.createdAt).toLocaleString()}
</span>
</div>
))}
</div>
)}
</CardContent>
</Card>
);
}
+104
View File
@@ -0,0 +1,104 @@
"use client";
import { Plus } from "lucide-react";
import { useTranslations } from "next-intl";
import { useState } from "react";
import { addEventWinner } from "@/actions/events";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useServerAction } from "@/hooks/use-server-action";
interface Winner {
id: number;
userId: number;
position: number;
username: string;
createdAt: Date;
}
interface Props {
eventId: number;
winners: Winner[];
}
export function EventWinnersManager({ eventId, winners }: Props) {
const t = useTranslations("pages.admin.events");
const { run, isPending } = useServerAction();
const [showForm, setShowForm] = useState(false);
const [userId, setUserId] = useState("");
const [position, setPosition] = useState(winners.length + 1);
function handleAdd(e: React.FormEvent) {
e.preventDefault();
run(() => addEventWinner({ eventId, userId: Number(userId), position }), {
successMessage: "Winner added!",
onSuccess: () => {
setShowForm(false);
setUserId("");
setPosition(position + 1);
},
});
}
return (
<Card>
<CardHeader className="flex flex-row items-center justify-between">
<CardTitle>{t("statWinners")}</CardTitle>
<Button size="sm" onClick={() => setShowForm(!showForm)}>
<Plus className="h-4 w-4 mr-1" /> {t("addWinner")}
</Button>
</CardHeader>
<CardContent className="space-y-3">
{showForm && (
<form
onSubmit={handleAdd}
className="border rounded-lg p-4 flex gap-3 items-end"
>
<div className="space-y-1">
<Label>User ID</Label>
<Input
type="number"
value={userId}
onChange={(e) => setUserId(e.target.value)}
required
placeholder="12345"
/>
</div>
<div className="space-y-1">
<Label>Position</Label>
<Input
type="number"
value={position}
onChange={(e) => setPosition(Number(e.target.value))}
min={1}
/>
</div>
<Button type="submit" size="sm" disabled={isPending}>
Add
</Button>
</form>
)}
{winners.length === 0 && !showForm && (
<div className="admin-empty">{t("noWinners")}</div>
)}
<div className="divide-y">
{winners.map((w) => (
<div key={w.id} className="flex items-center gap-3 py-2.5">
<span className="flex h-7 w-7 items-center justify-center rounded-full bg-primary text-primary-foreground text-xs font-bold">
{w.position}
</span>
<span className="font-medium text-sm">{w.username}</span>
<span className="text-xs text-muted-foreground ml-auto">
{new Date(w.createdAt).toLocaleDateString()}
</span>
</div>
))}
</div>
</CardContent>
</Card>
);
}
+213
View File
@@ -0,0 +1,213 @@
import { asc, eq, inArray } from "drizzle-orm";
import { CalendarDays, Gift, Trophy, Users } from "lucide-react";
import { notFound, redirect } from "next/navigation";
import { getTranslations } from "next-intl/server";
import { AdminBreadcrumb } from "@/components/admin/admin-breadcrumb";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { db, User, WebsiteEvent, WebsiteEventType } from "@/lib/db";
import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
import { EventForm } from "../event-form";
import { EventPrizesManager } from "./event-prizes";
import { EventRegistrations } from "./event-registrations";
import { EventWinnersManager } from "./event-winners";
export default async function EventDetailPage({
params,
}: {
params: Promise<{ locale: string; id: string }>;
}) {
const { id } = await params;
const { session, permissions } = await getAdminContext();
if (!canAccess(permissions, PERMS.EVENTS_EDIT, session.user.rank)) {
redirect("/admin/events");
}
const eventId = parseInt(id, 10);
if (Number.isNaN(eventId)) notFound();
const t = await getTranslations("pages.admin.events");
const tHubs = await getTranslations("pages.admin.hubs");
const event = await db.query.WebsiteEvent.findFirst({
where: eq(WebsiteEvent.id, eventId),
with: {
type: true,
prizes: { orderBy: (p, { asc: a }) => [a(p.position)] },
winners: { orderBy: (w, { asc: a }) => [a(w.position)] },
registrations: { orderBy: (r, { desc: d }) => [d(r.createdAt)] },
},
});
if (!event) notFound();
const eventTypes = await db
.select()
.from(WebsiteEventType)
.where(eq(WebsiteEventType.isActive, 1))
.orderBy(asc(WebsiteEventType.name));
// Fetch usernames for registrations and winners
const userIds = [
...event.registrations.map((r) => r.userId),
...event.winners.map((w) => w.userId),
];
const users =
userIds.length > 0
? await db
.select({ id: User.id, username: User.username })
.from(User)
.where(inArray(User.id, [...new Set(userIds)]))
: [];
const userMap = new Map(users.map((u) => [u.id, u.username]));
const statusLabel: Record<string, string> = {
published: t("statusPublished"),
draft: t("statusDraft"),
cancelled: t("statusCancelled"),
completed: t("statusCompleted"),
};
return (
<div className="space-y-6">
<div>
<AdminBreadcrumb
items={[
{ label: tHubs("tabs.events"), href: "/admin/events" },
{ label: event.title },
]}
/>
<div className="flex items-center gap-3">
<h1 className="m-0 text-2xl font-extrabold text-[var(--admin-text)]">
{event.title}
</h1>
<Badge
variant={
event.status === "published"
? "default"
: event.status === "cancelled"
? "destructive"
: "secondary"
}
>
{statusLabel[event.status] ?? event.status}
</Badge>
</div>
<p className="m-0 mt-1 text-sm text-[var(--admin-text-muted)]">
{event.type.name} &middot; {new Date(event.startsAt).toLocaleString()}
</p>
</div>
{/* Stats */}
<div className="grid gap-4 md:grid-cols-4">
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">
{t("statRegistrations")}
</CardTitle>
<Users className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">
{event.registrations.length}
</div>
{event.maxPlayers && (
<p className="text-xs text-muted-foreground">
{t("maxPlayers", { count: event.maxPlayers })}
</p>
)}
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">
{t("statPrizes")}
</CardTitle>
<Gift className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{event.prizes.length}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">
{t("statWinners")}
</CardTitle>
<Trophy className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{event.winners.length}</div>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">
{t("statTime")}
</CardTitle>
<CalendarDays className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-sm font-medium">
{new Date(event.startsAt) > new Date()
? t("timeUpcoming")
: t("timePast")}
</div>
{event.endsAt && (
<p className="text-xs text-muted-foreground">
{t("endsAt", {
date: new Date(event.endsAt).toLocaleString(),
})}
</p>
)}
</CardContent>
</Card>
</div>
{/* Edit form */}
<EventForm
eventTypes={eventTypes}
defaultValues={{
id: event.id,
title: event.title,
description: event.description,
typeId: event.typeId,
roomId: event.roomId,
startsAt: event.startsAt,
endsAt: event.endsAt,
maxPlayers: event.maxPlayers,
isRecurring: event.isRecurring,
recurrenceRule: event.recurrenceRule,
status: event.status as
| "draft"
| "published"
| "cancelled"
| "completed",
image: event.image,
}}
/>
{/* Prizes */}
<EventPrizesManager eventId={event.id} prizes={event.prizes} />
{/* Winners */}
<EventWinnersManager
eventId={event.id}
winners={event.winners.map((w) => ({
...w,
username:
userMap.get(w.userId) ?? t("userFallback", { id: w.userId }),
}))}
/>
{/* Registrations */}
<EventRegistrations
registrations={event.registrations.map((r) => ({
...r,
username:
userMap.get(r.userId) ?? t("userFallback", { id: r.userId }),
}))}
/>
</div>
);
}
+35
View File
@@ -0,0 +1,35 @@
import { asc, eq } from "drizzle-orm";
import { redirect } from "next/navigation";
import { getTranslations } from "next-intl/server";
import { db, WebsiteEventType } from "@/lib/db";
import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
import { EventForm } from "../event-form";
export default async function CreateEventPage() {
const { session, permissions } = await getAdminContext();
if (!canAccess(permissions, PERMS.EVENTS_EDIT, session.user.rank)) {
redirect("/admin/events");
}
const t = await getTranslations("pages.admin.events");
const eventTypes = await db
.select()
.from(WebsiteEventType)
.where(eq(WebsiteEventType.isActive, 1))
.orderBy(asc(WebsiteEventType.name));
return (
<div className="space-y-6">
<div>
<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} />
</div>
);
}
+230
View File
@@ -0,0 +1,230 @@
"use client";
import { useTranslations } from "next-intl";
import { useForm } from "react-hook-form";
import { createEvent, updateEvent } from "@/actions/events";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { DateTimePicker } from "@/components/ui/date-time-picker";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { useServerAction } from "@/hooks/use-server-action";
import type {
CreateEventInput,
UpdateEventInput,
} from "@/lib/validators/event";
interface EventType {
id: number;
name: string;
slug: string;
color: string;
}
interface EventFormProps {
eventTypes: EventType[];
defaultValues?: Partial<CreateEventInput> & { id?: number };
}
interface EventFormValues {
title: string;
description: string;
image?: string | null;
maxPlayers?: string | number | null;
roomId?: string | number | null;
typeId: number;
status: string;
isRecurring: number;
startsAt?: Date | null;
endsAt?: Date | null;
}
export function EventForm({ eventTypes, defaultValues }: EventFormProps) {
const t = useTranslations("pages.admin.events");
const { run, isPending } = useServerAction();
const isEditing = !!defaultValues?.id;
const form = useForm<EventFormValues>({
defaultValues: {
title: "",
description: "",
typeId: eventTypes[0]?.id ?? 0,
status: "draft",
isRecurring: 0,
...defaultValues,
},
});
function onSubmit(data: EventFormValues) {
if (isEditing && defaultValues?.id) {
run(
() =>
updateEvent({ id: defaultValues.id, ...data } as UpdateEventInput & {
id: number;
}),
{
successMessage: t("toastUpdated"),
},
);
} else {
run(() => createEvent(data as CreateEventInput), {
successMessage: t("toastCreated"),
onSuccess: (result) => {
const data = result.data as Record<string, unknown> | undefined;
if (data?.id) {
window.location.href = `/admin/events/${data.id}`;
}
},
});
}
}
return (
<form onSubmit={form.handleSubmit(onSubmit)}>
<Card>
<CardHeader>
<CardTitle>
{isEditing ? t("formEditTitle") : t("formDetailsTitle")}
</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="title">{t("formTitle")}</Label>
<Input id="title" {...form.register("title")} />
{form.formState.errors.title && (
<p className="text-sm text-destructive">
{form.formState.errors.title.message}
</p>
)}
</div>
<div className="space-y-2">
<Label htmlFor="typeId">{t("formEventType")}</Label>
<Select
value={String(form.watch("typeId"))}
onValueChange={(v) => form.setValue("typeId", Number(v))}
>
<SelectTrigger>
<SelectValue placeholder={t("formSelectType")} />
</SelectTrigger>
<SelectContent>
{eventTypes.map((et) => (
<SelectItem key={et.id} value={String(et.id)}>
{et.name}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="description">{t("formDescription")}</Label>
<Textarea
id="description"
rows={4}
{...form.register("description")}
/>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="space-y-2">
<Label>{t("formStartsAt")}</Label>
<DateTimePicker
value={form.watch("startsAt")}
onChange={(d) =>
form.setValue("startsAt", d, { shouldDirty: true })
}
placeholder={t("formSelectStart")}
/>
</div>
<div className="space-y-2">
<Label>{t("formEndsAt")}</Label>
<DateTimePicker
value={form.watch("endsAt")}
onChange={(d) =>
form.setValue("endsAt", d, { shouldDirty: true })
}
placeholder={t("formSelectEnd")}
/>
</div>
<div className="space-y-2">
<Label htmlFor="maxPlayers">{t("formMaxPlayers")}</Label>
<Input
id="maxPlayers"
type="number"
{...form.register("maxPlayers")}
placeholder={t("formUnlimited")}
/>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="roomId">{t("formRoomId")}</Label>
<Input
id="roomId"
type="number"
{...form.register("roomId")}
placeholder={t("formOptional")}
/>
</div>
<div className="space-y-2">
<Label htmlFor="status">{t("colStatus")}</Label>
<Select
value={form.watch("status")}
onValueChange={(v) =>
form.setValue("status", v as CreateEventInput["status"])
}
>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="draft">{t("statusDraft")}</SelectItem>
<SelectItem value="published">
{t("statusPublished")}
</SelectItem>
<SelectItem value="cancelled">
{t("statusCancelled")}
</SelectItem>
<SelectItem value="completed">
{t("statusCompleted")}
</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="image">{t("formImageUrl")}</Label>
<Input
id="image"
{...form.register("image")}
placeholder="https://..."
/>
</div>
<div className="flex justify-end">
<Button type="submit" disabled={isPending}>
{isPending
? t("formSaving")
: isEditing
? t("formUpdate")
: t("formCreate")}
</Button>
</div>
</CardContent>
</Card>
</form>
);
}
+140
View File
@@ -0,0 +1,140 @@
"use client";
import { Pencil, Trash2 } from "lucide-react";
import { useTranslations } from "next-intl";
import { deleteEvent } from "@/actions/events";
import { useConfirmDialog } from "@/components/admin/confirm-dialog";
import { DataTable } from "@/components/admin/data-table";
import Link from "@/components/link";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { useServerAction } from "@/hooks/use-server-action";
import type { DataTableColumn, PaginatedResult } from "@/types/common";
interface EventRow {
id: number;
title: string;
typeName: string;
typeColor: string;
startsAt: Date;
endsAt: Date | null;
status: string;
hostUserId: number;
}
const statusVariants: Record<
string,
"default" | "secondary" | "outline" | "destructive"
> = {
published: "default",
draft: "secondary",
cancelled: "destructive",
completed: "outline",
};
interface EventsTableProps {
data: PaginatedResult<EventRow>;
}
export function EventsTable({ data }: EventsTableProps) {
const t = useTranslations("pages.admin.events");
const { run, isPending } = useServerAction();
const { confirm, dialog: confirmDialog } = useConfirmDialog();
const statusLabel: Record<string, string> = {
published: t("statusPublished"),
draft: t("statusDraft"),
cancelled: t("statusCancelled"),
completed: t("statusCompleted"),
};
async function handleDelete(row: EventRow) {
const ok = await confirm({
title: "Delete event",
description: `Delete "${row.title}"? This cannot be undone.`,
confirmLabel: "Delete",
cancelLabel: "Cancel",
});
if (!ok) return;
run(() => deleteEvent({ id: row.id }), {
successMessage: "Event deleted!",
errorMessage: "Failed to delete event.",
});
}
const columns: DataTableColumn<EventRow>[] = [
{ key: "id", label: t("colId"), sortable: true },
{
key: "title",
label: t("colTitle"),
sortable: true,
render: (value) => <span className="font-medium">{String(value)}</span>,
},
{
key: "typeName",
label: t("colType"),
sortable: false,
render: (_, row) => (
<Badge style={{ backgroundColor: row.typeColor, color: "#fff" }}>
{row.typeName}
</Badge>
),
},
{
key: "startsAt",
label: t("colStarts"),
sortable: true,
render: (value) => (
<span className="text-sm">
{new Date(value as unknown as string).toLocaleString()}
</span>
),
},
{
key: "status",
label: t("colStatus"),
sortable: true,
render: (value) => {
const key = String(value);
return (
<Badge variant={statusVariants[key] ?? "secondary"}>
{statusLabel[key] ?? key}
</Badge>
);
},
},
{
key: "actions",
label: t("colActions"),
render: (_, row) => (
<div className="flex items-center gap-1">
<Button variant="ghost" size="icon" asChild>
<Link href={`/admin/events/${row.id}`}>
<Pencil className="h-4 w-4" />
</Link>
</Button>
<Button
variant="ghost"
size="icon"
disabled={isPending}
onClick={() => handleDelete(row)}
aria-label="Delete event"
>
<Trash2 className="h-4 w-4 text-destructive" />
</Button>
</div>
),
},
];
return (
<>
<DataTable
data={data}
columns={columns}
searchPlaceholder={t("searchPlaceholder")}
/>
{confirmDialog}
</>
);
}
+83
View File
@@ -0,0 +1,83 @@
import { count, desc, eq, like } from "drizzle-orm";
import { getTranslations } from "next-intl/server";
import Link from "@/components/link";
import { Button } from "@/components/ui/button";
import { fetchAdminList } from "@/lib/admin-list";
import { db, WebsiteEvent, WebsiteEventType } from "@/lib/db";
import { PERMS } from "@/lib/permissions";
import { EventsTable } from "./events-table";
export default async function EventsPage({
params: paramsPromise,
searchParams,
}: {
params: Promise<{ locale: string }>;
searchParams: Promise<Record<string, string>>;
}) {
const t = await getTranslations("pages.admin.events");
const result = await fetchAdminList(
{
permission: PERMS.EVENTS_VIEW,
fetch: async ({ search, page, perPage }) => {
const [rows, totals] = await Promise.all([
db
.select({
id: WebsiteEvent.id,
title: WebsiteEvent.title,
startsAt: WebsiteEvent.startsAt,
endsAt: WebsiteEvent.endsAt,
status: WebsiteEvent.status,
hostUserId: WebsiteEvent.hostUserId,
typeName: WebsiteEventType.name,
typeColor: WebsiteEventType.color,
})
.from(WebsiteEvent)
.leftJoin(
WebsiteEventType,
eq(WebsiteEvent.typeId, WebsiteEventType.id),
)
.where(search ? like(WebsiteEvent.title, `%${search}%`) : undefined)
.orderBy(desc(WebsiteEvent.startsAt))
.limit(perPage)
.offset((page - 1) * perPage),
db.select({ total: count() }).from(WebsiteEvent),
]);
return {
rows: rows.map((e) => ({
id: e.id,
title: e.title,
typeName: e.typeName ?? "",
typeColor: e.typeColor ?? "",
startsAt: e.startsAt,
endsAt: e.endsAt,
status: e.status,
hostUserId: e.hostUserId,
})),
total: totals[0]?.total ?? 0,
};
},
},
paramsPromise,
searchParams,
);
return (
<div className="space-y-6">
<div className="flex justify-end">
<Button variant="default" asChild>
<Link href="/admin/events/create">{t("newEvent")}</Link>
</Button>
</div>
<EventsTable
data={{
rows: result.rows,
total: result.total,
page: result.page,
perPage: result.perPage,
lastPage: result.lastPage,
}}
/>
</div>
);
}
@@ -0,0 +1,237 @@
"use client";
import { Pencil, Plus, Trash2 } from "lucide-react";
import { useState } from "react";
import {
createEventType,
deleteEventType,
updateEventType,
} from "@/actions/events";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useServerAction } from "@/hooks/use-server-action";
interface EventType {
id: number;
name: string;
slug: string;
description: string;
color: string;
icon: string;
isActive: number;
minRank: number;
}
interface Props {
eventTypes: EventType[];
}
export function EventTypesManager({ eventTypes }: Props) {
const { run, isPending } = useServerAction();
const [showForm, setShowForm] = useState(false);
const [editingId, setEditingId] = useState<number | null>(null);
const [form, setForm] = useState({
name: "",
slug: "",
description: "",
color: "#3b82f6",
icon: "calendar",
minRank: 0,
});
function resetForm() {
setForm({
name: "",
slug: "",
description: "",
color: "#3b82f6",
icon: "calendar",
minRank: 0,
});
setEditingId(null);
setShowForm(false);
}
function handleEdit(et: EventType) {
setForm({
name: et.name,
slug: et.slug,
description: et.description,
color: et.color,
icon: et.icon,
minRank: et.minRank,
});
setEditingId(et.id);
setShowForm(true);
}
function handleSubmit(e: React.FormEvent) {
e.preventDefault();
if (editingId) {
run(() => updateEventType({ id: editingId, ...form }), {
successMessage: "Event type updated!",
onSuccess: resetForm,
});
} else {
run(() => createEventType(form), {
successMessage: "Event type created!",
onSuccess: resetForm,
});
}
}
function handleDelete(id: number) {
run(() => deleteEventType({ id }), {
successMessage: "Event type deleted!",
});
}
return (
<div className="space-y-4">
<div className="flex justify-end">
<Button onClick={() => setShowForm(!showForm)}>
<Plus className="h-4 w-4 mr-2" />
New Type
</Button>
</div>
{showForm && (
<Card>
<CardHeader>
<CardTitle>
{editingId ? "Edit Event Type" : "New Event Type"}
</CardTitle>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit} className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="space-y-2">
<Label>Name</Label>
<Input
value={form.name}
onChange={(e) => setForm({ ...form, name: e.target.value })}
required
/>
</div>
<div className="space-y-2">
<Label>Slug</Label>
<Input
value={form.slug}
onChange={(e) => setForm({ ...form, slug: e.target.value })}
required
placeholder="game-night"
/>
</div>
<div className="space-y-2">
<Label>Color</Label>
<Input
type="color"
value={form.color}
onChange={(e) =>
setForm({ ...form, color: e.target.value })
}
/>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2">
<Label>Description</Label>
<Input
value={form.description}
onChange={(e) =>
setForm({ ...form, description: e.target.value })
}
/>
</div>
<div className="space-y-2">
<Label>Rank minimo (0 = tutti)</Label>
<Input
type="number"
min={0}
max={7}
value={form.minRank}
onChange={(e) =>
setForm({
...form,
minRank: parseInt(e.target.value, 10) || 0,
})
}
/>
<p className="text-[10px] text-muted-foreground">
0=Tutti, 3=Mod+, 4=Staff+, 6=Admin+
</p>
</div>
</div>
<div className="flex gap-2 justify-end">
<Button type="button" variant="outline" onClick={resetForm}>
Cancel
</Button>
<Button type="submit" disabled={isPending}>
{isPending ? "Saving..." : editingId ? "Update" : "Create"}
</Button>
</div>
</form>
</CardContent>
</Card>
)}
<Card>
<CardContent className="p-0">
<div className="divide-y">
{eventTypes.length === 0 && (
<div className="p-6 text-center text-muted-foreground">
No event types yet. Create your first one above.
</div>
)}
{eventTypes.map((et) => (
<div
key={et.id}
className="flex items-center justify-between px-4 py-3"
>
<div className="flex items-center gap-3">
<div
className="w-3 h-3 rounded-full"
style={{ backgroundColor: et.color }}
/>
<div>
<span className="font-medium">{et.name}</span>
<span className="ml-2 text-xs text-muted-foreground">
{et.slug}
</span>
</div>
<Badge variant={et.isActive ? "default" : "outline"}>
{et.isActive ? "Active" : "Inactive"}
</Badge>
{et.minRank > 0 && (
<Badge variant="secondary" className="text-[10px]">
Rank {et.minRank}+
</Badge>
)}
</div>
<div className="flex gap-1">
<Button
variant="ghost"
size="icon"
onClick={() => handleEdit(et)}
>
<Pencil className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
onClick={() => handleDelete(et.id)}
>
<Trash2 className="h-4 w-4 text-destructive" />
</Button>
</div>
</div>
))}
</div>
</CardContent>
</Card>
</div>
);
}
+23
View File
@@ -0,0 +1,23 @@
import { asc } from "drizzle-orm";
import { redirect } from "next/navigation";
import { db, WebsiteEventType } from "@/lib/db";
import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
import { EventTypesManager } from "./event-types-manager";
export default async function EventTypesPage() {
const { session, permissions } = await getAdminContext();
if (!canAccess(permissions, PERMS.EVENTS_EDIT, session.user.rank)) {
redirect("/admin/events");
}
const eventTypes = await db
.select()
.from(WebsiteEventType)
.orderBy(asc(WebsiteEventType.name));
return (
<div className="space-y-6">
<EventTypesManager eventTypes={eventTypes} />
</div>
);
}