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]>

src/app/admin/benutzer/[id]/page.tsx

@@ -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>
-  );
-}

src/app/admin/benutzer/neu/page.tsx

@@ -1,64 +1,33 @@
 import { BackLink } from "@/components/back-link";
+import { Button } from "@/components/ui";
+import { AdminField, AdminFormPanel, AdminSelect } from "@/components/admin-form";
 import { createCustomerAction } from "../../actions";
 import { getLocale } from "@/i18n/locale";
 import { getDictionary } from "@/i18n/get-dictionary";
 
 export default async function AdminBenutzerNewPage() {
   const t = getDictionary(await getLocale());
+  const tu = t.adminUserNewPage;
 
   return (
     <div className="max-w-xl">
-      <BackLink href="/admin/benutzer" label={t.adminUserNewPage.backToUsers} />
-      <h1 className="text-2xl text-forest mb-2">{t.adminUserNewPage.title}</h1>
-      <p className="text-sm text-ink/70 mb-8">{t.adminUserNewPage.intro}</p>
+      <BackLink href="/admin/benutzer" label={tu.backToUsers} />
+      <h1 className="text-2xl text-forest mb-2">{tu.title}</h1>
+      <p className="text-sm text-ink/70 mb-8">{tu.intro}</p>
 
-
-      <form action={createCustomerAction} className="space-y-4 bg-background border border-ink/10 p-6">
-        <div className="grid grid-cols-2 gap-4">
-          <Field name="firstName" label={t.adminUserNewPage.firstNameLabel} required />
-          <Field name="lastName" label={t.adminUserNewPage.lastNameLabel} required />
+      <AdminFormPanel action={createCustomerAction} actions={<Button type="submit">{tu.createAndSend}</Button>}>
+        <div className="space-y-4">
+          <div className="grid grid-cols-2 items-end gap-4">
+            <AdminField name="firstName" label={tu.firstNameLabel} required />
+            <AdminField name="lastName" label={tu.lastNameLabel} required />
+          </div>
+          <AdminField name="email" label={tu.emailLabel} type="email" required />
+          <AdminSelect name="role" label={tu.roleLabel} defaultValue="KUNDE">
+            <option value="KUNDE">{tu.roleCustomer}</option>
+            <option value="ADMIN">{tu.roleAdmin}</option>
+          </AdminSelect>
         </div>
-        <Field name="email" label={t.adminUserNewPage.emailLabel} type="email" required />
-        <label className="block text-sm">
-          <span className="text-ink/70">{t.adminUserNewPage.roleLabel}</span>
-          <select
-            name="role"
-            defaultValue="KUNDE"
-            className="mt-1 w-full border border-ink/20 bg-background px-3 py-2"
-          >
-            <option value="KUNDE">{t.adminUserNewPage.roleCustomer}</option>
-            <option value="ADMIN">{t.adminUserNewPage.roleAdmin}</option>
-          </select>
-        </label>
-
-        <button type="submit" className="bg-forest text-cream px-6 py-2 text-sm">
-          {t.adminUserNewPage.createAndSend}
-        </button>
-      </form>
+      </AdminFormPanel>
     </div>
   );
 }
-
-function Field({
-  name,
-  label,
-  type = "text",
-  required = false,
-}: {
-  name: string;
-  label: string;
-  type?: string;
-  required?: boolean;
-}) {
-  return (
-    <label className="block text-sm">
-      <span className="text-ink/70">{label}</span>
-      <input
-        name={name}
-        type={type}
-        required={required}
-        className="mt-1 w-full border border-ink/20 bg-background px-3 py-2"
-      />
-    </label>
-  );
-}