From 1c16db114edfd2976dbf8a185deaa6276f4041ab Mon Sep 17 00:00:00 2001
From: Nick Szaunig <nick.szaunig@encry.de>
Date: Mon, 7 Sep 2026 12:36:06 +0200
Subject: [PATCH] feat: show a live example number for active number-format
 rules

Admins configuring the honey-batch/bottling auto-numbering format
(WH-{YYYY}-{SEQ:4}) had no way to see what it would actually produce
before saving - a typo'd placeholder or unexpected format silently
breaks every batch number from then on. When the rule is active, the
format card now renders the next number it would generate, live as
the format is edited, using the same formatGeneratedNumber logic the
backend uses (ported to the frontend, no shared package between the
two apps) and the real next sequence value (sequenceValue + 1).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../automation/automation-rules-tab.tsx       |  9 +++++++++
 .../src/lib/automation/number-format.ts       | 20 +++++++++++++++++++
 2 files changed, 29 insertions(+)
 create mode 100644 ApiCore-Frontend/src/lib/automation/number-format.ts

diff --git a/ApiCore-Frontend/src/app/(app)/settings/automation/automation-rules-tab.tsx b/ApiCore-Frontend/src/app/(app)/settings/automation/automation-rules-tab.tsx
index a5b62cb..34a8602 100644
--- a/ApiCore-Frontend/src/app/(app)/settings/automation/automation-rules-tab.tsx
+++ b/ApiCore-Frontend/src/app/(app)/settings/automation/automation-rules-tab.tsx
@@ -9,6 +9,7 @@ import {
   updateAutomationRule,
 } from "@/lib/automation/api";
 import { AutomationRule, AutomationTriggerType } from "@/lib/automation/types";
+import { formatGeneratedNumber } from "@/lib/automation/number-format";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -130,6 +131,14 @@ function RuleCard({ rule }: { rule: AutomationRule }) {
             <p className="text-xs text-muted-foreground">
               Aktueller Zähler: {rule.sequenceValue}
             </p>
+            {rule.active ? (
+              <p className="text-sm font-medium">
+                Beispiel für die nächste Nummer:{" "}
+                <span className="font-mono">
+                  {formatGeneratedNumber(format, rule.sequenceValue + 1, new Date())}
+                </span>
+              </p>
+            ) : null}
           </div>
         ) : (
           <div className="flex flex-col gap-2">
diff --git a/ApiCore-Frontend/src/lib/automation/number-format.ts b/ApiCore-Frontend/src/lib/automation/number-format.ts
new file mode 100644
index 0000000..351da39
--- /dev/null
+++ b/ApiCore-Frontend/src/lib/automation/number-format.ts
@@ -0,0 +1,20 @@
+// Mirrors ApiCore-Backend/src/automation/number-format.ts exactly, so the
+// settings UI can preview a live example number as the admin edits the
+// format - no shared package between the two apps to import it from.
+// Placeholders: {YYYY} 4-digit year, {YY} 2-digit year, {MM} month (01-12),
+// {DD} day (01-31), {SEQ} running sequence unpadded, {SEQ:N} sequence
+// zero-padded to N digits.
+export function formatGeneratedNumber(format: string, sequence: number, date: Date): string {
+  const yyyy = String(date.getFullYear());
+  const yy = yyyy.slice(-2);
+  const mm = String(date.getMonth() + 1).padStart(2, "0");
+  const dd = String(date.getDate()).padStart(2, "0");
+
+  return format
+    .replace(/\{YYYY\}/g, yyyy)
+    .replace(/\{YY\}/g, yy)
+    .replace(/\{MM\}/g, mm)
+    .replace(/\{DD\}/g, dd)
+    .replace(/\{SEQ:(\d+)\}/g, (_match, width: string) => String(sequence).padStart(Number(width), "0"))
+    .replace(/\{SEQ\}/g, String(sequence));
+}