feat(admin): Formulare fuer Gutscheine, Versand, Benutzer, Ernten und Chargen vereinheitlicht
Alle Anlege- und Bearbeiten-Formulare nutzen jetzt die Bausteine aus components/admin-form.tsx wie das Produktformular: Rahmen mit fester Speicherleiste, Abschnitte mit Serif-Ueberschrift (Gutschein: Code und Rabatt / Bedingungen / Zeitraum und Status; Ernte: Angaben / Bilder / Sichtbarkeit; Charge: Abfuellung und Bestand / Bilder), Schalter statt Checkbox, buendige Eingabefelder in Rastern. Benutzer bearbeiten: Sicherheitsbereich mit Status-Badges, Passwort-Reset als Sekundaerknopf, Sperren/Loeschen in eigenem abgesetzten Bereich. AdminField/AdminSelect koennen jetzt min und einen Hinweistext. Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>
This commit is contained in:
Nick SzaunigandClaude Opus 5.5 committed
1 parent
a09057d960
commit
b7a75dddca
12 files changed
+364
-524
No files matched your search
@@ -2,8 +2,11 @@ import { notFound } from "next/navigation";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { BackLink } from "@/components/back-link";
|
||||
import { ConfirmForm } from "@/components/confirm-form";
|
||||
import { Button } from "@/components/ui";
|
||||
import { getCurrentAdmin } from "@/lib/auth";
|
||||
import { formatDate } from "@/lib/format";
|
||||
import { AdminField, AdminFieldset, AdminFormPanel, AdminSelect } from "@/components/admin-form";
|
||||
import { AdminActionButton, AdminBadge } from "@/components/admin-list";
|
||||
import {
|
||||
updateCustomerAction,
|
||||
blockCustomerAction,
|
||||
@@ -16,6 +19,7 @@ import { getDictionary } from "@/i18n/get-dictionary";
|
||||
|
||||
export default async function AdminBenutzerEditPage(props: PageProps<"/admin/benutzer/[id]">) {
|
||||
const t = getDictionary(await getLocale());
|
||||
const tu = t.adminUserEditPage;
|
||||
const { id } = await props.params;
|
||||
|
||||
const [admin, customer] = await Promise.all([
|
||||
@@ -28,60 +32,56 @@ export default async function AdminBenutzerEditPage(props: PageProps<"/admin/ben
|
||||
const isTemporarilyLocked = Boolean(customer.lockedUntil && customer.lockedUntil > new Date());
|
||||
|
||||
return (
|
||||
<div className="max-w-xl">
|
||||
<BackLink href="/admin/benutzer" label={t.adminUserEditPage.backToUsers} />
|
||||
<div className="max-w-2xl">
|
||||
<BackLink href="/admin/benutzer" label={tu.backToUsers} />
|
||||
<h1 className="text-2xl text-forest mb-2">
|
||||
{customer.firstName} {customer.lastName}
|
||||
</h1>
|
||||
<p className="text-sm text-ink/65 mb-8">{t.adminUserEditPage.createdOn(formatDate(customer.createdAt))}</p>
|
||||
<p className="text-sm text-ink/65 mb-8">{tu.createdOn(formatDate(customer.createdAt))}</p>
|
||||
|
||||
|
||||
<form action={updateCustomerAction} className="space-y-4 bg-background border border-ink/10 p-6">
|
||||
<AdminFormPanel action={updateCustomerAction} actions={<Button type="submit">{tu.save}</Button>}>
|
||||
<input type="hidden" name="id" value={customer.id} />
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Field name="firstName" label={t.adminUserEditPage.firstNameLabel} defaultValue={customer.firstName} required />
|
||||
<Field name="lastName" label={t.adminUserEditPage.lastNameLabel} defaultValue={customer.lastName} required />
|
||||
</div>
|
||||
<Field name="email" label={t.adminUserEditPage.emailLabel} type="email" defaultValue={customer.email} required />
|
||||
<Field name="phone" label={t.adminUserEditPage.phoneLabel} defaultValue={customer.phone ?? ""} />
|
||||
<label className="block text-sm">
|
||||
<span className="text-ink/70">{t.adminUserEditPage.roleLabel}</span>
|
||||
<select
|
||||
name="role"
|
||||
defaultValue={customer.role}
|
||||
className="mt-1 w-full border border-ink/20 bg-background px-3 py-2"
|
||||
>
|
||||
<option value="KUNDE">{t.adminUserEditPage.roleCustomer}</option>
|
||||
<option value="ADMIN">{t.adminUserEditPage.roleAdmin}</option>
|
||||
</select>
|
||||
{isSelf ? (
|
||||
<span className="mt-1 block text-xs text-ink/65">{t.adminUserEditPage.cannotChangeOwnRole}</span>
|
||||
) : null}
|
||||
</label>
|
||||
|
||||
<button type="submit" className="bg-forest text-cream px-6 py-2 text-sm">
|
||||
{t.adminUserEditPage.save}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="mt-6 bg-background border border-ink/10 p-6 space-y-4">
|
||||
<h2 className="text-sm text-ink/70">{t.adminUserEditPage.securityHeading}</h2>
|
||||
<dl className="text-sm space-y-1">
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-ink/65">{t.adminUserEditPage.twoFactorLabel}</dt>
|
||||
<dd>{customer.twoFactorEnabled ? t.adminUserEditPage.twoFactorActive : t.adminUserEditPage.twoFactorInactive}</dd>
|
||||
<AdminFieldset legend={tu.sectionProfile} last>
|
||||
<div className="grid grid-cols-2 items-end gap-4">
|
||||
<AdminField name="firstName" label={tu.firstNameLabel} defaultValue={customer.firstName} required />
|
||||
<AdminField name="lastName" label={tu.lastNameLabel} defaultValue={customer.lastName} required />
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<dt className="text-ink/65">{t.adminUserEditPage.statusLabel}</dt>
|
||||
<AdminField name="email" label={tu.emailLabel} type="email" defaultValue={customer.email} required />
|
||||
<AdminField name="phone" label={tu.phoneLabel} type="tel" defaultValue={customer.phone ?? ""} />
|
||||
<AdminSelect
|
||||
name="role"
|
||||
label={tu.roleLabel}
|
||||
defaultValue={customer.role}
|
||||
hint={isSelf ? tu.cannotChangeOwnRole : undefined}
|
||||
>
|
||||
<option value="KUNDE">{tu.roleCustomer}</option>
|
||||
<option value="ADMIN">{tu.roleAdmin}</option>
|
||||
</AdminSelect>
|
||||
</AdminFieldset>
|
||||
</AdminFormPanel>
|
||||
|
||||
<section className="mt-8 space-y-6 border border-ink/10 bg-background p-6 sm:p-8">
|
||||
<h2 className="font-serif text-xl text-forest">{tu.securityHeading}</h2>
|
||||
<dl className="divide-y divide-ink/10 text-sm">
|
||||
<div className="flex items-center justify-between gap-4 py-3">
|
||||
<dt className="text-ink/70">{tu.twoFactorLabel}</dt>
|
||||
<dd>
|
||||
{customer.blockedAt ? (
|
||||
<span className="text-red-700">
|
||||
{t.adminUserEditPage.blockedSince(formatDate(customer.blockedAt))}
|
||||
</span>
|
||||
) : isTemporarilyLocked ? (
|
||||
<span className="text-honey-dark">{t.adminUserEditPage.temporarilyLockedFailedAttempts}</span>
|
||||
{customer.twoFactorEnabled ? (
|
||||
<AdminBadge tone="positive">{tu.twoFactorActive}</AdminBadge>
|
||||
) : (
|
||||
<span className="text-forest">{t.adminUserEditPage.statusActive}</span>
|
||||
<AdminBadge tone="neutral">{tu.twoFactorInactive}</AdminBadge>
|
||||
)}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-4 py-3">
|
||||
<dt className="text-ink/70">{tu.statusLabel}</dt>
|
||||
<dd className="text-right">
|
||||
{customer.blockedAt ? (
|
||||
<AdminBadge tone="danger">{tu.blockedSince(formatDate(customer.blockedAt))}</AdminBadge>
|
||||
) : isTemporarilyLocked ? (
|
||||
<AdminBadge tone="pending">{tu.temporarilyLockedFailedAttempts}</AdminBadge>
|
||||
) : (
|
||||
<AdminBadge tone="positive">{tu.statusActive}</AdminBadge>
|
||||
)}
|
||||
</dd>
|
||||
</div>
|
||||
@@ -89,67 +89,39 @@ export default async function AdminBenutzerEditPage(props: PageProps<"/admin/ben
|
||||
|
||||
<form action={sendCustomerPasswordResetAction}>
|
||||
<input type="hidden" name="id" value={customer.id} />
|
||||
<button type="submit" className="bg-forest text-cream px-5 py-2 text-sm">
|
||||
{t.adminUserEditPage.sendPasswordReset}
|
||||
</button>
|
||||
<Button type="submit" variant="secondary" className="px-5 py-2.5">
|
||||
{tu.sendPasswordReset}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{/* Sperren/Loeschen des eigenen Kontos ist serverseitig ohnehin
|
||||
verboten — hier gar nicht erst angeboten. */}
|
||||
{!isSelf ? (
|
||||
<div className="flex items-center gap-4 pt-2 border-t border-ink/10">
|
||||
{customer.blockedAt ? (
|
||||
<form action={unblockCustomerAction}>
|
||||
<div className="border-t border-ink/10 pt-6">
|
||||
<h3 className="mb-3 text-xs tracking-wide-caps text-ink/65">{tu.sectionDanger}</h3>
|
||||
<div className="flex flex-wrap items-center gap-6 text-sm">
|
||||
{customer.blockedAt ? (
|
||||
<form action={unblockCustomerAction}>
|
||||
<input type="hidden" name="id" value={customer.id} />
|
||||
<AdminActionButton>{tu.unblock}</AdminActionButton>
|
||||
</form>
|
||||
) : (
|
||||
<form action={blockCustomerAction}>
|
||||
<input type="hidden" name="id" value={customer.id} />
|
||||
<AdminActionButton tone="muted">{tu.block}</AdminActionButton>
|
||||
</form>
|
||||
)}
|
||||
<ConfirmForm
|
||||
action={deleteCustomerAction}
|
||||
confirmMessage={tu.deleteConfirm(`${customer.firstName} ${customer.lastName}`)}
|
||||
>
|
||||
<input type="hidden" name="id" value={customer.id} />
|
||||
<button type="submit" className="text-forest underline text-sm">
|
||||
{t.adminUserEditPage.unblock}
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
<form action={blockCustomerAction}>
|
||||
<input type="hidden" name="id" value={customer.id} />
|
||||
<button type="submit" className="text-ink/70 underline text-sm">
|
||||
{t.adminUserEditPage.block}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
<ConfirmForm
|
||||
action={deleteCustomerAction}
|
||||
confirmMessage={t.adminUserEditPage.deleteConfirm(`${customer.firstName} ${customer.lastName}`)}
|
||||
>
|
||||
<input type="hidden" name="id" value={customer.id} />
|
||||
<button type="submit" className="text-red-700 underline text-sm">
|
||||
{t.adminUserEditPage.deleteAccount}
|
||||
</button>
|
||||
</ConfirmForm>
|
||||
<AdminActionButton tone="danger">{tu.deleteAccount}</AdminActionButton>
|
||||
</ConfirmForm>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({
|
||||
name,
|
||||
label,
|
||||
type = "text",
|
||||
defaultValue,
|
||||
required = false,
|
||||
}: {
|
||||
name: string;
|
||||
label: string;
|
||||
type?: string;
|
||||
defaultValue?: string;
|
||||
required?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<label className="block text-sm">
|
||||
<span className="text-ink/70">{label}</span>
|
||||
<input
|
||||
name={name}
|
||||
type={type}
|
||||
defaultValue={defaultValue}
|
||||
required={required}
|
||||
className="mt-1 w-full border border-ink/20 bg-background px-3 py-2"
|
||||
/>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user