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
@@ -1,6 +1,14 @@
|
||||
import { notFound } from "next/navigation";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { BackLink } from "@/components/back-link";
|
||||
import { Button } from "@/components/ui";
|
||||
import {
|
||||
AdminField,
|
||||
AdminFieldset,
|
||||
AdminFormPanel,
|
||||
AdminSelect,
|
||||
AdminSwitch,
|
||||
} from "@/components/admin-form";
|
||||
import { updateDiscountCodeAction } from "../../actions";
|
||||
import { getLocale } from "@/i18n/locale";
|
||||
import { getDictionary } from "@/i18n/get-dictionary";
|
||||
@@ -12,108 +20,79 @@ function toDateInputValue(date: Date | null): string {
|
||||
|
||||
export default async function AdminGutscheinEditPage(props: PageProps<"/admin/gutscheine/[id]">) {
|
||||
const t = getDictionary(await getLocale());
|
||||
const tv = t.adminVoucherEditPage;
|
||||
const { id } = await props.params;
|
||||
const code = await prisma.discountCode.findUnique({ where: { id } });
|
||||
if (!code) notFound();
|
||||
|
||||
return (
|
||||
<div className="max-w-md">
|
||||
<BackLink href="/admin/gutscheine" label={t.adminVoucherEditPage.backToVouchers} />
|
||||
<h1 className="text-2xl text-forest mb-8">{t.adminVoucherEditPage.title}</h1>
|
||||
<div className="max-w-2xl">
|
||||
<BackLink href="/admin/gutscheine" label={tv.backToVouchers} />
|
||||
<h1 className="text-2xl text-forest mb-2">{tv.title}</h1>
|
||||
<p className="text-sm text-ink/65 mb-8">{tv.redeemedSoFar(code.usedCount, code.maxUses)}</p>
|
||||
|
||||
|
||||
<form action={updateDiscountCodeAction} className="space-y-4 bg-background border border-ink/10 p-6">
|
||||
<AdminFormPanel action={updateDiscountCodeAction} actions={<Button type="submit">{tv.save}</Button>}>
|
||||
<input type="hidden" name="id" value={code.id} />
|
||||
<Field name="code" label={t.adminVoucherEditPage.codeLabel} defaultValue={code.code} required />
|
||||
<AdminFieldset legend={tv.sectionDiscount}>
|
||||
<AdminField name="code" label={tv.codeLabel} defaultValue={code.code} required />
|
||||
<div className="grid grid-cols-2 items-end gap-4">
|
||||
<AdminSelect name="type" label={tv.typeLabel} defaultValue={code.type}>
|
||||
<option value="PERCENT">{tv.typePercent}</option>
|
||||
<option value="FIXED">{tv.typeFixed}</option>
|
||||
</AdminSelect>
|
||||
<AdminField
|
||||
name="value"
|
||||
label={tv.valueLabel}
|
||||
type="number"
|
||||
min={0}
|
||||
defaultValue={String(code.value)}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</AdminFieldset>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<label className="block text-sm">
|
||||
<span className="text-ink/70">{t.adminVoucherEditPage.typeLabel}</span>
|
||||
<select
|
||||
name="type"
|
||||
defaultValue={code.type}
|
||||
className="mt-1 w-full border border-ink/20 bg-background px-3 py-2"
|
||||
>
|
||||
<option value="PERCENT">{t.adminVoucherEditPage.typePercent}</option>
|
||||
<option value="FIXED">{t.adminVoucherEditPage.typeFixed}</option>
|
||||
</select>
|
||||
</label>
|
||||
<Field name="value" label={t.adminVoucherEditPage.valueLabel} type="number" defaultValue={String(code.value)} required />
|
||||
</div>
|
||||
|
||||
<Field
|
||||
name="minOrderCents"
|
||||
label={t.adminVoucherEditPage.minOrderLabel}
|
||||
type="number"
|
||||
defaultValue={String(code.minOrderCents)}
|
||||
/>
|
||||
<Field
|
||||
name="minQuantity"
|
||||
label={t.adminVoucherEditPage.minQuantityLabel}
|
||||
type="number"
|
||||
defaultValue={code.minQuantity !== null ? String(code.minQuantity) : ""}
|
||||
/>
|
||||
<Field
|
||||
name="maxUses"
|
||||
label={t.adminVoucherEditPage.maxUsesLabel}
|
||||
type="number"
|
||||
defaultValue={code.maxUses !== null ? String(code.maxUses) : ""}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Field
|
||||
name="validFrom"
|
||||
label={t.adminVoucherEditPage.validFromLabel}
|
||||
type="date"
|
||||
defaultValue={toDateInputValue(code.validFrom)}
|
||||
<AdminFieldset legend={tv.sectionConditions}>
|
||||
<AdminField
|
||||
name="minOrderCents"
|
||||
label={tv.minOrderLabel}
|
||||
type="number"
|
||||
min={0}
|
||||
defaultValue={String(code.minOrderCents)}
|
||||
/>
|
||||
<Field
|
||||
name="validUntil"
|
||||
label={t.adminVoucherEditPage.validUntilLabel}
|
||||
type="date"
|
||||
defaultValue={toDateInputValue(code.validUntil)}
|
||||
<AdminField
|
||||
name="minQuantity"
|
||||
label={tv.minQuantityLabel}
|
||||
type="number"
|
||||
min={0}
|
||||
defaultValue={code.minQuantity !== null ? String(code.minQuantity) : ""}
|
||||
/>
|
||||
</div>
|
||||
<AdminField
|
||||
name="maxUses"
|
||||
label={tv.maxUsesLabel}
|
||||
type="number"
|
||||
min={0}
|
||||
defaultValue={code.maxUses !== null ? String(code.maxUses) : ""}
|
||||
/>
|
||||
</AdminFieldset>
|
||||
|
||||
<label className="flex items-center gap-2 text-sm text-ink/70">
|
||||
<input type="checkbox" name="isActive" defaultChecked={code.isActive} />
|
||||
{t.adminVoucherEditPage.activeLabel}
|
||||
</label>
|
||||
|
||||
<p className="text-xs text-ink/65">{t.adminVoucherEditPage.redeemedSoFar(code.usedCount, code.maxUses)}</p>
|
||||
|
||||
<button type="submit" className="bg-forest text-cream px-6 py-2 text-sm">
|
||||
{t.adminVoucherEditPage.save}
|
||||
</button>
|
||||
</form>
|
||||
<AdminFieldset legend={tv.sectionValidity} last>
|
||||
<div className="grid grid-cols-2 items-end gap-4">
|
||||
<AdminField
|
||||
name="validFrom"
|
||||
label={tv.validFromLabel}
|
||||
type="date"
|
||||
defaultValue={toDateInputValue(code.validFrom)}
|
||||
/>
|
||||
<AdminField
|
||||
name="validUntil"
|
||||
label={tv.validUntilLabel}
|
||||
type="date"
|
||||
defaultValue={toDateInputValue(code.validUntil)}
|
||||
/>
|
||||
</div>
|
||||
<AdminSwitch name="isActive" label={tv.activeLabel} defaultChecked={code.isActive} />
|
||||
</AdminFieldset>
|
||||
</AdminFormPanel>
|
||||
</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}
|
||||
min={0}
|
||||
className="mt-1 w-full border border-ink/20 bg-background px-3 py-2"
|
||||
/>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
@@ -1,77 +1,51 @@
|
||||
import { BackLink } from "@/components/back-link";
|
||||
import { Button } from "@/components/ui";
|
||||
import {
|
||||
AdminField,
|
||||
AdminFieldset,
|
||||
AdminFormPanel,
|
||||
AdminSelect,
|
||||
AdminSwitch,
|
||||
} from "@/components/admin-form";
|
||||
import { createDiscountCodeAction } from "../../actions";
|
||||
import { getLocale } from "@/i18n/locale";
|
||||
import { getDictionary } from "@/i18n/get-dictionary";
|
||||
|
||||
export default async function AdminGutscheinNewPage() {
|
||||
const t = getDictionary(await getLocale());
|
||||
const tv = t.adminVoucherNewPage;
|
||||
|
||||
return (
|
||||
<div className="max-w-md">
|
||||
<BackLink href="/admin/gutscheine" label={t.adminVoucherNewPage.backToVouchers} />
|
||||
<h1 className="text-2xl text-forest mb-8">{t.adminVoucherNewPage.title}</h1>
|
||||
<div className="max-w-2xl">
|
||||
<BackLink href="/admin/gutscheine" label={tv.backToVouchers} />
|
||||
<h1 className="text-2xl text-forest mb-8">{tv.title}</h1>
|
||||
|
||||
<AdminFormPanel action={createDiscountCodeAction} actions={<Button type="submit">{tv.create}</Button>}>
|
||||
<AdminFieldset legend={tv.sectionDiscount}>
|
||||
<AdminField name="code" label={tv.codeLabel} placeholder={tv.codePlaceholder} required />
|
||||
<div className="grid grid-cols-2 items-end gap-4">
|
||||
<AdminSelect name="type" label={tv.typeLabel} defaultValue="PERCENT">
|
||||
<option value="PERCENT">{tv.typePercent}</option>
|
||||
<option value="FIXED">{tv.typeFixed}</option>
|
||||
</AdminSelect>
|
||||
<AdminField name="value" label={tv.valueLabel} type="number" min={0} placeholder="10" required />
|
||||
</div>
|
||||
</AdminFieldset>
|
||||
|
||||
<form action={createDiscountCodeAction} className="space-y-4 bg-background border border-ink/10 p-6">
|
||||
<Field name="code" label={t.adminVoucherNewPage.codeLabel} placeholder={t.adminVoucherNewPage.codePlaceholder} required />
|
||||
<AdminFieldset legend={tv.sectionConditions}>
|
||||
<AdminField name="minOrderCents" label={tv.minOrderLabel} type="number" min={0} placeholder="0" />
|
||||
<AdminField name="minQuantity" label={tv.minQuantityLabel} type="number" min={0} placeholder="3" />
|
||||
<AdminField name="maxUses" label={tv.maxUsesLabel} type="number" min={0} />
|
||||
</AdminFieldset>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<label className="block text-sm">
|
||||
<span className="text-ink/70">{t.adminVoucherNewPage.typeLabel}</span>
|
||||
<select name="type" className="mt-1 w-full border border-ink/20 bg-background px-3 py-2">
|
||||
<option value="PERCENT">{t.adminVoucherNewPage.typePercent}</option>
|
||||
<option value="FIXED">{t.adminVoucherNewPage.typeFixed}</option>
|
||||
</select>
|
||||
</label>
|
||||
<Field name="value" label={t.adminVoucherNewPage.valueLabel} type="number" placeholder="10" required />
|
||||
</div>
|
||||
|
||||
<Field name="minOrderCents" label={t.adminVoucherNewPage.minOrderLabel} type="number" placeholder="0" />
|
||||
<Field name="minQuantity" label={t.adminVoucherNewPage.minQuantityLabel} type="number" placeholder="3" />
|
||||
<Field name="maxUses" label={t.adminVoucherNewPage.maxUsesLabel} type="number" />
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Field name="validFrom" label={t.adminVoucherNewPage.validFromLabel} type="date" />
|
||||
<Field name="validUntil" label={t.adminVoucherNewPage.validUntilLabel} type="date" />
|
||||
</div>
|
||||
|
||||
<label className="flex items-center gap-2 text-sm text-ink/70">
|
||||
<input type="checkbox" name="isActive" defaultChecked />
|
||||
{t.adminVoucherNewPage.activeLabel}
|
||||
</label>
|
||||
|
||||
<button type="submit" className="bg-forest text-cream px-6 py-2 text-sm">
|
||||
{t.adminVoucherNewPage.create}
|
||||
</button>
|
||||
</form>
|
||||
<AdminFieldset legend={tv.sectionValidity} last>
|
||||
<div className="grid grid-cols-2 items-end gap-4">
|
||||
<AdminField name="validFrom" label={tv.validFromLabel} type="date" />
|
||||
<AdminField name="validUntil" label={tv.validUntilLabel} type="date" />
|
||||
</div>
|
||||
<AdminSwitch name="isActive" label={tv.activeLabel} defaultChecked />
|
||||
</AdminFieldset>
|
||||
</AdminFormPanel>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Field({
|
||||
name,
|
||||
label,
|
||||
type = "text",
|
||||
placeholder,
|
||||
required = false,
|
||||
}: {
|
||||
name: string;
|
||||
label: string;
|
||||
type?: string;
|
||||
placeholder?: string;
|
||||
required?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<label className="block text-sm">
|
||||
<span className="text-ink/70">{label}</span>
|
||||
<input
|
||||
name={name}
|
||||
type={type}
|
||||
placeholder={placeholder}
|
||||
required={required}
|
||||
min={0}
|
||||
className="mt-1 w-full border border-ink/20 bg-background px-3 py-2"
|
||||
/>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user