feat(admin): Listen mit Status-Badges, Leerzustaenden und klaren Aktionen
Neue gemeinsame Bausteine in components/admin-list.tsx: Seitenkopf mit Hauptaktion, Suchleiste, Status-Badge (gleiche Form wie der Bestellstatus, wartende Eintraege mit pulsierendem Punkt), Leerzustand mit Wabe und naechstem Schritt sowie Zeilenaktionen mit einheitlichem Unterstrich- Hover (Loeschen rot, Sperren/Zurueckziehen gedaempft). Umgestellt: Bewertungen (SVG-Sterne statt Unicode), Benutzer, Gutscheine (neu: Status "Abgelaufen"), Versand, Ernten, Chargen (Anlegeformulare auf admin-form), Firmenanfragen (Status als Badge, beschriftete Auswahl) und Audit-Log. Zahlen und Daten in Tabellen mit tabular-nums. Co-Authored-By: Claude Opus 5.5 (1M context) <[email protected]>
This commit is contained in:
Nick SzaunigandClaude Opus 5.5 committed
1 parent
95b4b5953d
commit
a09057d960
12 files changed
+440
-300
No files matched your search
@@ -1,8 +1,17 @@
|
||||
import Link from "next/link";
|
||||
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";
|
||||
@@ -20,7 +29,7 @@ export default async function AdminBatchesPage() {
|
||||
return (
|
||||
<div>
|
||||
<BackLink href="/admin" label={t.adminBatchesPage.backToDashboard} />
|
||||
<h1 className="text-2xl text-forest mb-8">{t.adminBatchesPage.title}</h1>
|
||||
<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">
|
||||
@@ -41,84 +50,70 @@ export default async function AdminBatchesPage() {
|
||||
<td className="p-4">
|
||||
{batch.harvest.type} {batch.harvest.year}
|
||||
</td>
|
||||
<td className="p-4">{formatDate(batch.fillDate)}</td>
|
||||
<td className="p-4">{formatDate(batch.bestBeforeDate)}</td>
|
||||
<td className="p-4">{batch.glassCount}</td>
|
||||
<td className="p-4">{batch.remainingGlasses}</td>
|
||||
<td className="p-4 whitespace-nowrap">
|
||||
<Link href={`/admin/chargen/${batch.id}`} className="text-forest underline mr-4">
|
||||
{t.adminBatchesPage.edit}
|
||||
</Link>
|
||||
<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)}
|
||||
className="inline"
|
||||
>
|
||||
<input type="hidden" name="id" value={batch.id} />
|
||||
<button type="submit" className="text-red-700 underline">
|
||||
{t.adminBatchesPage.delete}
|
||||
</button>
|
||||
<AdminActionButton tone="danger">{t.adminBatchesPage.delete}</AdminActionButton>
|
||||
</ConfirmForm>
|
||||
) : (
|
||||
// Statt den Knopf wortlos wegzulassen: der Grund steht da.
|
||||
<span className="text-xs text-ink/50">{t.adminBatchesPage.notDeletable}</span>
|
||||
<AdminActionNote>{t.adminBatchesPage.notDeletable}</AdminActionNote>
|
||||
)}
|
||||
</AdminRowActions>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
{batches.length === 0 ? <p className="p-6 text-ink/65">{t.adminBatchesPage.noBatchesYet}</p> : null}
|
||||
{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="text-lg text-forest mb-4">{t.adminBatchesPage.newBatchHeading}</h2>
|
||||
<h2 className="font-serif text-xl text-forest mb-4">{t.adminBatchesPage.newBatchHeading}</h2>
|
||||
<form action={createBatchAction} className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<label className="block text-sm">
|
||||
<span className="text-ink/70">{t.adminBatchesPage.codeLabel}</span>
|
||||
<input
|
||||
name="code"
|
||||
required
|
||||
placeholder={t.adminBatchesPage.codePlaceholder}
|
||||
className="mt-1 w-full border border-ink/20 bg-background px-3 py-2"
|
||||
/>
|
||||
</label>
|
||||
<label className="block text-sm">
|
||||
<span className="text-ink/70">{t.adminBatchesPage.harvestLabel}</span>
|
||||
<select name="harvestId" required className="mt-1 w-full border border-ink/20 bg-background px-3 py-2">
|
||||
{harvests.map((h) => (
|
||||
<option key={h.id} value={h.id}>
|
||||
{h.type} {h.year}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<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 gap-4">
|
||||
<label className="block text-sm">
|
||||
<span className="text-ink/70">{t.adminBatchesPage.fillDateLabel}</span>
|
||||
<input name="fillDate" type="date" required className="mt-1 w-full border border-ink/20 bg-background px-3 py-2" />
|
||||
</label>
|
||||
<label className="block text-sm">
|
||||
<span className="text-ink/70">{t.adminBatchesPage.bestBeforeDateLabel}</span>
|
||||
<input name="bestBeforeDate" type="date" required className="mt-1 w-full border border-ink/20 bg-background px-3 py-2" />
|
||||
</label>
|
||||
<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 gap-4">
|
||||
<label className="block text-sm">
|
||||
<span className="text-ink/70">{t.adminBatchesPage.glassCountLabel}</span>
|
||||
<input name="glassCount" type="number" required className="mt-1 w-full border border-ink/20 bg-background px-3 py-2" />
|
||||
</label>
|
||||
<label className="block text-sm">
|
||||
<span className="text-ink/70">{t.adminBatchesPage.remainingGlassesLabel}</span>
|
||||
<input name="remainingGlasses" type="number" required className="mt-1 w-full border border-ink/20 bg-background px-3 py-2" />
|
||||
</label>
|
||||
<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>
|
||||
<button type="submit" className="bg-forest text-cream px-6 py-2 text-sm">
|
||||
{t.adminBatchesPage.create}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user