Wabenhain/src/app/admin/chargen/page.tsx

import { prisma } from "@/lib/prisma";
import { BackLink } from "@/components/back-link";
import { ConfirmForm } from "@/components/confirm-form";
import { formatDate } from "@/lib/format";
import { Button } from "@/components/ui";
import { AdminField, AdminSelect } from "@/components/admin-form";
import {
  AdminActionButton,
  AdminActionLink,
  AdminActionNote,
  AdminEmptyState,
  AdminPageHeader,
  AdminRowActions,
} from "@/components/admin-list";
import { createBatchAction, deleteBatchAction } from "../actions";
import { getLocale } from "@/i18n/locale";
import { getDictionary } from "@/i18n/get-dictionary";

export default async function AdminBatchesPage() {
  const t = getDictionary(await getLocale());
  const [batches, harvests] = await Promise.all([
    prisma.batch.findMany({
      orderBy: { fillDate: "desc" },
      include: { harvest: true, _count: { select: { products: true, orderItems: true } } },
    }),
    prisma.harvest.findMany({ orderBy: [{ year: "desc" }] }),
  ]);

  return (
    <div>
      <BackLink href="/admin" label={t.adminBatchesPage.backToDashboard} />
      <AdminPageHeader title={t.adminBatchesPage.title} />
      <div className="overflow-x-auto bg-background border border-ink/10">
        <table className="w-full text-sm">
          <thead className="text-left text-ink/65 border-b border-ink/10">
            <tr>
              <th className="p-4">{t.adminBatchesPage.colBatch}</th>
              <th className="p-4">{t.adminBatchesPage.colHarvest}</th>
              <th className="p-4">{t.adminBatchesPage.colFillDate}</th>
              <th className="p-4">{t.adminBatchesPage.colBestBefore}</th>
              <th className="p-4">{t.adminBatchesPage.colTotalGlasses}</th>
              <th className="p-4">{t.adminBatchesPage.colRemaining}</th>
              <th className="p-4" />
            </tr>
          </thead>
          <tbody className="divide-y divide-ink/10">
            {batches.map((batch) => (
              <tr key={batch.id} className="transition-colors hover:bg-ink/[0.03]">
                <td className="p-4 text-heading">{batch.code}</td>
                <td className="p-4">
                  {batch.harvest.type} {batch.harvest.year}
                </td>
                <td className="p-4 whitespace-nowrap tabular-nums">{formatDate(batch.fillDate)}</td>
                <td className="p-4 whitespace-nowrap tabular-nums">{formatDate(batch.bestBeforeDate)}</td>
                <td className="p-4 tabular-nums">{batch.glassCount}</td>
                <td className={`p-4 tabular-nums ${batch.remainingGlasses === 0 ? "text-ink/55" : ""}`}>
                  {batch.remainingGlasses}
                </td>
                <td className="p-4">
                  <AdminRowActions>
                  <AdminActionLink href={`/admin/chargen/${batch.id}`}>{t.adminBatchesPage.edit}</AdminActionLink>
                  {batch._count.products === 0 && batch._count.orderItems === 0 ? (
                    <ConfirmForm
                      action={deleteBatchAction}
                      confirmMessage={t.adminBatchesPage.deleteConfirm(batch.code)}
                    >
                      <input type="hidden" name="id" value={batch.id} />
                      <AdminActionButton tone="danger">{t.adminBatchesPage.delete}</AdminActionButton>
                    </ConfirmForm>
                  ) : (
                    // Statt den Knopf wortlos wegzulassen: der Grund steht da.
                    <AdminActionNote>{t.adminBatchesPage.notDeletable}</AdminActionNote>
                  )}
                  </AdminRowActions>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
        {batches.length === 0 ? <AdminEmptyState message={t.adminBatchesPage.noBatchesYet} /> : null}
      </div>

      <div className="mt-10 bg-background border border-ink/10 p-6 max-w-xl">
        <h2 className="font-serif text-xl text-heading mb-4">{t.adminBatchesPage.newBatchHeading}</h2>
        <form action={createBatchAction} className="space-y-4">
          <div className="grid grid-cols-2 items-end gap-4">
            <AdminField
              name="code"
              label={t.adminBatchesPage.codeLabel}
              placeholder={t.adminBatchesPage.codePlaceholder}
              required
            />
            <AdminSelect name="harvestId" label={t.adminBatchesPage.harvestLabel}>
              {harvests.map((h) => (
                <option key={h.id} value={h.id}>
                  {h.type} {h.year}
                </option>
              ))}
            </AdminSelect>
          </div>
          <div className="grid grid-cols-2 items-end gap-4">
            <AdminField name="fillDate" label={t.adminBatchesPage.fillDateLabel} type="date" required />
            <AdminField name="bestBeforeDate" label={t.adminBatchesPage.bestBeforeDateLabel} type="date" required />
          </div>
          <div className="grid grid-cols-2 items-end gap-4">
            <AdminField name="glassCount" label={t.adminBatchesPage.glassCountLabel} type="number" required />
            <AdminField
              name="remainingGlasses"
              label={t.adminBatchesPage.remainingGlassesLabel}
              type="number"
              required
            />
          </div>
          <div className="flex justify-end border-t border-ink/10 pt-4">
            <Button type="submit">{t.adminBatchesPage.create}</Button>
          </div>
        </form>
      </div>
    </div>
  );
}