fix: Bug fixed für Rollen

ApiCore-Backend/prisma/schema.prisma

@@ -858,7 +858,10 @@ model Product {
 model LabelTemplate {
   id        String   @id @default(cuid())
   name      String
-  content   String
+  // Array of LabelElement objects (text/placeholder/qrCode/image/line), see
+  // label-templates.service.ts. Drives both the in-browser canvas designer
+  // and the pdfkit print renderer from the same source of truth.
+  elements  Json     @default("[]")
   widthMm   Float    @default(90)
   heightMm  Float    @default(35)
   isDefault Boolean  @default(false)

ApiCore-Backend/src/auth/permissions/permission-catalog-sync.service.ts

@@ -9,6 +9,14 @@ import { PERMISSION_CATALOG } from './permission-catalog';
  * catalog entry missing from the database. Never deletes a Permission row
  * that fell out of the catalog (only warns) — a role's grants must not
  * silently disappear because of a typo or a reordered catalog edit.
+ *
+ * Every newly-synced permission is also granted to every `isSystem` role
+ * (ADMIN's seed row documents itself as "Voller Zugriff auf alle Bereiche" -
+ * full access to every area). Without this, a role that legitimately means
+ * "everything" would silently lose that guarantee each time a new feature
+ * ships a new permission, forcing a manual grant in Rollen & Rechte before
+ * the feature is usable at all - exactly the gap that made the freshly
+ * shipped Etiketten feature invisible to the seeded admin account.
  */
 @Injectable()
 export class PermissionCatalogSyncService implements OnModuleInit {
@@ -25,15 +33,34 @@ export class PermissionCatalogSyncService implements OnModuleInit {
     const missing = PERMISSION_CATALOG.filter(
       (entry) => !existingKeys.has(entry.key),
     );
-    for (const entry of missing) {
+    const createdPermissions = await Promise.all(
-      await this.prisma.permission.create({ data: entry });
+      missing.map((entry) => this.prisma.permission.create({ data: entry })),
-    }
+    );
     if (missing.length > 0) {
       this.logger.log(
         `Synced ${missing.length} new permission(s) from the code catalog: ${missing
           .map((entry) => entry.key)
           .join(', ')}`,
       );
+
+      const systemRoles = await this.prisma.role.findMany({
+        where: { isSystem: true },
+        select: { id: true },
+      });
+      if (systemRoles.length > 0) {
+        await this.prisma.rolePermission.createMany({
+          data: systemRoles.flatMap((role) =>
+            createdPermissions.map((permission) => ({
+              roleId: role.id,
+              permissionId: permission.id,
+            })),
+          ),
+          skipDuplicates: true,
+        });
+        this.logger.log(
+          `Granted ${missing.length} new permission(s) to ${systemRoles.length} system role(s).`,
+        );
+      }
     }
 
     const catalogKeys = new Set(PERMISSION_CATALOG.map((entry) => entry.key));

ApiCore-Backend/src/label-templates/dto/create-label-template.dto.ts

@@ -1,23 +1,28 @@
 import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
+import { Type } from 'class-transformer';
 import {
+  ArrayMaxSize,
+  IsArray,
   IsBoolean,
   IsNumber,
   IsOptional,
   IsString,
   Min,
+  ValidateNested,
 } from 'class-validator';
+import { LabelElementDto } from './label-element.dto';
 
 export class CreateLabelTemplateDto {
   @ApiProperty()
   @IsString()
   name!: string;
 
-  @ApiProperty({
+  @ApiProperty({ type: [LabelElementDto] })
-    description:
+  @IsArray()
-      'Etikettentext mit Platzhaltern: {{batchNumber}} {{honeyType}} {{lotNumber}} {{bottlingDate}} {{bestBeforeDate}} {{jarSize}} {{productName}}',
+  @ArrayMaxSize(50)
-  })
+  @ValidateNested({ each: true })
-  @IsString()
+  @Type(() => LabelElementDto)
-  content!: string;
+  elements!: LabelElementDto[];
 
   @ApiPropertyOptional()
   @IsOptional()

ApiCore-Backend/src/label-templates/label-templates.service.spec.ts

@@ -2,6 +2,7 @@ import { NotFoundException } from '@nestjs/common';
 import { LabelTemplatesService } from './label-templates.service';
 import { PrismaService } from '../prisma/prisma.service';
 import { AuditLogService } from '../audit/audit-log.service';
+import { LabelElement } from './label-element.types';
 
 describe('LabelTemplatesService', () => {
   let service: LabelTemplatesService;
@@ -23,10 +24,44 @@ describe('LabelTemplatesService', () => {
   };
   let auditLog: { record: jest.Mock };
 
+  const elements: LabelElement[] = [
+    {
+      id: 'el-1',
+      type: 'text',
+      x: 2,
+      y: 2,
+      width: 60,
+      height: 10,
+      text: '',
+      placeholderKey: 'batchNumber',
+      fontSize: 9,
+      fontFamily: 'sans',
+      bold: false,
+      italic: false,
+      color: '#000000',
+      align: 'left',
+    },
+    {
+      id: 'el-2',
+      type: 'text',
+      x: 2,
+      y: 14,
+      width: 60,
+      height: 10,
+      text: 'MHD:',
+      fontSize: 9,
+      fontFamily: 'sans',
+      bold: false,
+      italic: false,
+      color: '#000000',
+      align: 'left',
+    },
+  ];
+
   const template = {
     id: 'template-1',
     name: 'Standard',
-    content: 'Charge {{batchNumber}} - MHD {{bestBeforeDate}}',
+    elements,
     widthMm: 90,
     heightMm: 35,
     isDefault: false,
@@ -74,7 +109,7 @@ describe('LabelTemplatesService', () => {
       });
 
       await service.create(
-        { name: 'Standard', content: 'x', isDefault: true },
+        { name: 'Standard', elements: [], isDefault: true },
         'user-1',
       );
 
@@ -90,7 +125,7 @@ describe('LabelTemplatesService', () => {
     it('does not touch other defaults when isDefault is not set', async () => {
       tx.labelTemplate.create.mockResolvedValue(template);
 
-      await service.create({ name: 'Standard', content: 'x' }, 'user-1');
+      await service.create({ name: 'Standard', elements: [] }, 'user-1');
 
       expect(tx.labelTemplate.updateMany).not.toHaveBeenCalled();
     });
@@ -119,7 +154,7 @@ describe('LabelTemplatesService', () => {
   });
 
   describe('renderLabelsPdf', () => {
-    it('fills placeholders and tiles one label per jar', async () => {
+    it('resolves placeholder text and tiles one label per jar', async () => {
       prisma.labelTemplate.findUnique.mockResolvedValue(template);
       prisma.bottlingBatch.findUnique.mockResolvedValue({
         id: 'batch-1',
@@ -149,10 +184,17 @@ describe('LabelTemplatesService', () => {
       ).rejects.toBeInstanceOf(NotFoundException);
     });
 
-    it('embeds a QR code pointing at the Herkunft page when the template uses {{qrCode}}', async () => {
+    it('embeds a QR code pointing at the Herkunft page when the template has a qrCode element', async () => {
+      const qrElement: LabelElement = {
+        id: 'el-qr',
+        type: 'qrCode',
+        x: 60,
+        y: 2,
+        size: 20,
+      };
       prisma.labelTemplate.findUnique.mockResolvedValue({
         ...template,
-        content: `${template.content} {{qrCode}}`,
+        elements: [...elements, qrElement],
       });
       prisma.bottlingBatch.findUnique.mockResolvedValue({
         id: 'batch-1',

ApiCore-Backend/src/label-templates/label-templates.service.ts

@@ -6,25 +6,54 @@ import { AuditLogService } from '../audit/audit-log.service';
 import { LabelTemplate } from '../../generated/prisma';
 import { CreateLabelTemplateDto } from './dto/create-label-template.dto';
 import { UpdateLabelTemplateDto } from './dto/update-label-template.dto';
+import {
+  LabelElement,
+  LabelFontFamily,
+  PlaceholderKey,
+} from './label-element.types';
 
 const MM_TO_PT = 72 / 25.4;
 const PAGE_MARGIN_MM = 5;
 const LABEL_GAP_MM = 2;
 const A4_WIDTH_MM = 210;
 const A4_HEIGHT_MM = 297;
-const QR_CODE_PLACEHOLDER = '{{qrCode}}';
+const QR_SOURCE_SIZE_PX = 400;
 
 function formatDate(date: Date): string {
   return date.toLocaleDateString('de-DE');
 }
 
-function fillPlaceholders(
+// Prisma stores `elements` as a plain Json column; the shape is only ever
-  content: string,
+// written through CreateLabelTemplateDto/UpdateLabelTemplateDto, so casting
-  values: Record<string, string>,
+// back to the app-level type here is safe.
+function elementsOf(template: LabelTemplate): LabelElement[] {
+  return template.elements as unknown as LabelElement[];
+}
+
+function pdfFontName(
+  family: LabelFontFamily,
+  bold: boolean,
+  italic: boolean,
 ): string {
-  return content.replace(/\{\{(\w+)\}\}/g, (match, key: string) =>
+  const base =
-    key in values ? values[key] : match,
+    family === 'serif' ? 'Times' : family === 'mono' ? 'Courier' : 'Helvetica';
-  );
+  if (base === 'Times') {
+    if (bold && italic) return 'Times-BoldItalic';
+    if (bold) return 'Times-Bold';
+    if (italic) return 'Times-Italic';
+    return 'Times-Roman';
+  }
+  const suffix =
+    bold && italic ? '-BoldOblique' : bold ? '-Bold' : italic ? '-Oblique' : '';
+  return `${base}${suffix}`;
+}
+
+function dataUrlToBuffer(dataUrl: string): Buffer | null {
+  const match = /^data:image\/(png|jpe?g);base64,(.+)$/.exec(dataUrl);
+  if (!match) {
+    return null;
+  }
+  return Buffer.from(match[2], 'base64');
 }
 
 @Injectable()
@@ -59,7 +88,9 @@ export class LabelTemplatesService {
           data: { isDefault: false },
         });
       }
-      return tx.labelTemplate.create({ data: { ...dto } });
+      return tx.labelTemplate.create({
+        data: { ...dto, elements: dto.elements as never },
+      });
     });
     await this.auditLog.record({
       entityType: 'LabelTemplate',
@@ -84,7 +115,10 @@ export class LabelTemplatesService {
           data: { isDefault: false },
         });
       }
-      return tx.labelTemplate.update({ where: { id }, data: { ...dto } });
+      return tx.labelTemplate.update({
+        where: { id },
+        data: { ...dto, elements: dto.elements as never },
+      });
     });
     await this.auditLog.record({
       entityType: 'LabelTemplate',
@@ -127,7 +161,7 @@ export class LabelTemplatesService {
       throw new NotFoundException('Bottling batch not found');
     }
 
-    const values: Record<string, string> = {
+    const values: Record<PlaceholderKey, string> = {
       batchNumber: bottlingBatch.honeyBatch.batchNumber,
       honeyType: bottlingBatch.honeyBatch.honeyType ?? '',
       lotNumber: bottlingBatch.lotNumber,
@@ -136,25 +170,29 @@ export class LabelTemplatesService {
       jarSize: `${bottlingBatch.jarSize} ml`,
       productName: bottlingBatch.product?.name ?? '',
     };
-    const labelText = fillPlaceholders(template.content, values);
 
-    // The QR code is generated once (not per copy) - it always points at the
+    const elements = elementsOf(template).map((element) =>
-    // public Herkunft/traceability page for this batch, which already shows
+      element.type === 'text' && element.placeholderKey
-    // honey type, dates, and origin, so the label itself only needs to
+        ? { ...element, text: values[element.placeholderKey] }
-    // reference it rather than duplicate that information.
+        : element,
+    );
+
+    // The QR code always points at the public Herkunft/traceability page for
+    // this batch (honey type, dates, origin already shown there), generated
+    // once and reused across every copy and every qrCode element.
     let qrCodeBuffer: Buffer | null = null;
-    if (labelText.includes(QR_CODE_PLACEHOLDER)) {
+    if (elements.some((element) => element.type === 'qrCode')) {
       const frontendOrigin =
         process.env.FRONTEND_ORIGIN ?? 'http://localhost:3000';
       const herkunftUrl = `${frontendOrigin}/herkunft/${encodeURIComponent(bottlingBatch.lotNumber)}`;
       qrCodeBuffer = await QRCode.toBuffer(herkunftUrl, {
         margin: 1,
-        width: 300,
+        width: QR_SOURCE_SIZE_PX,
       });
     }
 
     return this.renderPdf(
-      labelText,
+      elements,
       template.widthMm,
       template.heightMm,
       bottlingBatch.jarCount,
@@ -163,7 +201,7 @@ export class LabelTemplatesService {
   }
 
   private renderPdf(
-    labelText: string,
+    elements: LabelElement[],
     widthMm: number,
     heightMm: number,
     copies: number,
@@ -197,40 +235,85 @@ export class LabelTemplatesService {
         const row = Math.floor(onPage / columns);
         const xMm = PAGE_MARGIN_MM + column * (widthMm + LABEL_GAP_MM);
         const yMm = PAGE_MARGIN_MM + row * (heightMm + LABEL_GAP_MM);
-        const x = xMm * MM_TO_PT;
+        const originX = xMm * MM_TO_PT;
-        const y = yMm * MM_TO_PT;
+        const originY = yMm * MM_TO_PT;
         const w = widthMm * MM_TO_PT;
         const h = heightMm * MM_TO_PT;
 
-        doc.rect(x, y, w, h).dash(2, { space: 2 }).stroke('#999999').undash();
+        doc
+          .rect(originX, originY, w, h)
+          .dash(2, { space: 2 })
+          .stroke('#999999')
+          .undash();
 
-        if (qrCodeBuffer) {
+        for (const element of elements) {
-          const qrSide = Math.min(w, h) - 8;
+          this.drawElement(doc, element, originX, originY, qrCodeBuffer);
-          const qrX = x + w - qrSide - 4;
-          const qrY = y + (h - qrSide) / 2;
-          doc.image(qrCodeBuffer, qrX, qrY, { width: qrSide, height: qrSide });
-          const textWidth = qrX - 4 - (x + 4);
-          doc
-            .fontSize(9)
-            .fillColor('#000000')
-            .text(
-              labelText.replace(QR_CODE_PLACEHOLDER, '').trim(),
-              x + 4,
-              y + 4,
-              {
-                width: Math.max(textWidth, 0),
-                height: h - 8,
-              },
-            );
-        } else {
-          doc
-            .fontSize(9)
-            .fillColor('#000000')
-            .text(labelText, x + 4, y + 4, { width: w - 8, height: h - 8 });
         }
       }
 
       doc.end();
     });
   }
+
+  private drawElement(
+    doc: PDFKit.PDFDocument,
+    element: LabelElement,
+    originX: number,
+    originY: number,
+    qrCodeBuffer: Buffer | null,
+  ): void {
+    const x = originX + element.x * MM_TO_PT;
+    const y = originY + element.y * MM_TO_PT;
+
+    switch (element.type) {
+      case 'text': {
+        doc
+          .font(pdfFontName(element.fontFamily, element.bold, element.italic))
+          .fontSize(element.fontSize)
+          .fillColor(element.color)
+          .text(element.text, x, y, {
+            width: element.width * MM_TO_PT,
+            height: element.height * MM_TO_PT,
+            align: element.align,
+          });
+        return;
+      }
+      case 'qrCode': {
+        if (!qrCodeBuffer) {
+          return;
+        }
+        const side = element.size * MM_TO_PT;
+        doc.image(qrCodeBuffer, x, y, { width: side, height: side });
+        return;
+      }
+      case 'image': {
+        const buffer = dataUrlToBuffer(element.src);
+        if (!buffer) {
+          return;
+        }
+        doc.image(buffer, x, y, {
+          width: element.width * MM_TO_PT,
+          height: element.height * MM_TO_PT,
+        });
+        return;
+      }
+      case 'line': {
+        const endX =
+          element.orientation === 'horizontal'
+            ? x + element.length * MM_TO_PT
+            : x;
+        const endY =
+          element.orientation === 'vertical'
+            ? y + element.length * MM_TO_PT
+            : y;
+        doc
+          .moveTo(x, y)
+          .lineTo(endX, endY)
+          .lineWidth(element.thickness)
+          .strokeColor(element.color)
+          .stroke();
+        return;
+      }
+    }
+  }
 }

ApiCore-Frontend/src/app/(app)/settings/label-templates/create-label-template-dialog.tsx

@@ -1,130 +0,0 @@
-"use client";
-
-import { FormEvent, useState } from "react";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { createLabelTemplate } from "@/lib/label-templates/api";
-import { LABEL_PLACEHOLDERS } from "@/lib/label-templates/types";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-
-export function CreateLabelTemplateDialog() {
-  const queryClient = useQueryClient();
-  const [open, setOpen] = useState(false);
-  const [name, setName] = useState("");
-  const [content, setContent] = useState("");
-  const [widthMm, setWidthMm] = useState("90");
-  const [heightMm, setHeightMm] = useState("35");
-  const [error, setError] = useState<string | null>(null);
-
-  function reset() {
-    setName("");
-    setContent("");
-    setWidthMm("90");
-    setHeightMm("35");
-    setError(null);
-  }
-
-  const mutation = useMutation({
-    mutationFn: createLabelTemplate,
-    onSuccess: () => {
-      void queryClient.invalidateQueries({ queryKey: ["label-templates"] });
-      setOpen(false);
-      reset();
-    },
-    onError: () => setError("Vorlage konnte nicht angelegt werden."),
-  });
-
-  function handleSubmit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    setError(null);
-    mutation.mutate({
-      name,
-      content,
-      widthMm: widthMm ? Number(widthMm) : undefined,
-      heightMm: heightMm ? Number(heightMm) : undefined,
-    });
-  }
-
-  return (
-    <Dialog
-      open={open}
-      onOpenChange={(next) => {
-        setOpen(next);
-        if (!next) reset();
-      }}
-    >
-      <Button onClick={() => setOpen(true)}>+ Neue Etikettenvorlage</Button>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Neue Etikettenvorlage</DialogTitle>
-        </DialogHeader>
-        <form className="flex flex-col gap-4" onSubmit={handleSubmit}>
-          <div className="flex flex-col gap-2">
-            <Label htmlFor="label-template-name">Name</Label>
-            <Input
-              id="label-template-name"
-              required
-              value={name}
-              onChange={(event) => setName(event.target.value)}
-            />
-          </div>
-          <div className="flex gap-3">
-            <div className="flex flex-1 flex-col gap-2">
-              <Label htmlFor="label-template-width">Breite (mm)</Label>
-              <Input
-                id="label-template-width"
-                type="number"
-                inputMode="decimal"
-                value={widthMm}
-                onChange={(event) => setWidthMm(event.target.value)}
-              />
-            </div>
-            <div className="flex flex-1 flex-col gap-2">
-              <Label htmlFor="label-template-height">Höhe (mm)</Label>
-              <Input
-                id="label-template-height"
-                type="number"
-                inputMode="decimal"
-                value={heightMm}
-                onChange={(event) => setHeightMm(event.target.value)}
-              />
-            </div>
-          </div>
-          <div className="flex flex-col gap-2">
-            <Label htmlFor="label-template-content">Etikettentext</Label>
-            <Textarea
-              id="label-template-content"
-              required
-              rows={6}
-              value={content}
-              onChange={(event) => setContent(event.target.value)}
-            />
-            <p className="text-xs text-muted-foreground">
-              Platzhalter:{" "}
-              {LABEL_PLACEHOLDERS.map((placeholder) => `{{${placeholder.key}}}`).join(", ")}
-            </p>
-          </div>
-          {error ? (
-            <p role="alert" className="text-sm text-destructive">
-              {error}
-            </p>
-          ) : null}
-          <DialogFooter>
-            <Button type="submit" disabled={mutation.isPending}>
-              {mutation.isPending ? "Wird angelegt…" : "Anlegen"}
-            </Button>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}

ApiCore-Frontend/src/app/(app)/settings/label-templates/edit-label-template-dialog.tsx

@@ -1,128 +0,0 @@
-"use client";
-
-import { FormEvent, useState } from "react";
-import { Pencil } from "lucide-react";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { updateLabelTemplate } from "@/lib/label-templates/api";
-import { LABEL_PLACEHOLDERS, LabelTemplate } from "@/lib/label-templates/types";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
-
-export function EditLabelTemplateDialog({ template }: { template: LabelTemplate }) {
-  const queryClient = useQueryClient();
-  const [open, setOpen] = useState(false);
-  const [name, setName] = useState(template.name);
-  const [content, setContent] = useState(template.content);
-  const [widthMm, setWidthMm] = useState(template.widthMm.toString());
-  const [heightMm, setHeightMm] = useState(template.heightMm.toString());
-  const [isDefault, setIsDefault] = useState(template.isDefault);
-
-  const mutation = useMutation({
-    mutationFn: () =>
-      updateLabelTemplate(template.id, {
-        name,
-        content,
-        widthMm: widthMm ? Number(widthMm) : undefined,
-        heightMm: heightMm ? Number(heightMm) : undefined,
-        isDefault,
-      }),
-    onSuccess: () => {
-      void queryClient.invalidateQueries({ queryKey: ["label-templates"] });
-      setOpen(false);
-    },
-  });
-
-  function handleSubmit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    mutation.mutate();
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger
-        render={
-          <Button variant="ghost" size="sm">
-            <Pencil className="size-3.5" />
-            Bearbeiten
-          </Button>
-        }
-      />
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Etikettenvorlage bearbeiten</DialogTitle>
-        </DialogHeader>
-        <form className="flex flex-col gap-4" onSubmit={handleSubmit}>
-          <div className="flex flex-col gap-2">
-            <Label htmlFor="label-template-edit-name">Name</Label>
-            <Input
-              id="label-template-edit-name"
-              required
-              value={name}
-              onChange={(event) => setName(event.target.value)}
-            />
-          </div>
-          <div className="flex gap-3">
-            <div className="flex flex-1 flex-col gap-2">
-              <Label htmlFor="label-template-edit-width">Breite (mm)</Label>
-              <Input
-                id="label-template-edit-width"
-                type="number"
-                inputMode="decimal"
-                value={widthMm}
-                onChange={(event) => setWidthMm(event.target.value)}
-              />
-            </div>
-            <div className="flex flex-1 flex-col gap-2">
-              <Label htmlFor="label-template-edit-height">Höhe (mm)</Label>
-              <Input
-                id="label-template-edit-height"
-                type="number"
-                inputMode="decimal"
-                value={heightMm}
-                onChange={(event) => setHeightMm(event.target.value)}
-              />
-            </div>
-          </div>
-          <div className="flex flex-col gap-2">
-            <Label htmlFor="label-template-edit-content">Etikettentext</Label>
-            <Textarea
-              id="label-template-edit-content"
-              required
-              rows={6}
-              value={content}
-              onChange={(event) => setContent(event.target.value)}
-            />
-            <p className="text-xs text-muted-foreground">
-              Platzhalter:{" "}
-              {LABEL_PLACEHOLDERS.map((placeholder) => `{{${placeholder.key}}}`).join(", ")}
-            </p>
-          </div>
-          <label className="flex items-center gap-2 text-sm" htmlFor="label-template-edit-default">
-            <input
-              id="label-template-edit-default"
-              type="checkbox"
-              checked={isDefault}
-              onChange={(event) => setIsDefault(event.target.checked)}
-            />
-            Als Standardvorlage verwenden
-          </label>
-          <DialogFooter>
-            <Button type="submit" disabled={mutation.isPending}>
-              {mutation.isPending ? "Speichert…" : "Speichern"}
-            </Button>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </Dialog>
-  );
-}

ApiCore-Frontend/src/app/(app)/settings/label-templates/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { Tag } from "lucide-react";
+import Link from "next/link";
+import { Pencil, Plus, Tag } from "lucide-react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
 import { deactivateLabelTemplate, fetchLabelTemplates } from "@/lib/label-templates/api";
@@ -9,8 +10,6 @@ import { Button } from "@/components/ui/button";
 import { PageHeader } from "@/components/page-header";
 import { EmptyState } from "@/components/empty-state";
 import { EntityCard } from "@/components/entity-card";
-import { CreateLabelTemplateDialog } from "./create-label-template-dialog";
-import { EditLabelTemplateDialog } from "./edit-label-template-dialog";
 
 export default function LabelTemplatesPage() {
   const queryClient = useQueryClient();
@@ -37,7 +36,12 @@ export default function LabelTemplatesPage() {
         title="Etikettenvorlagen"
         description="Vorlagen mit Platzhaltern für den Etikettendruck verwalten"
         gradient="var(--gradient-sky)"
-        actions={<CreateLabelTemplateDialog />}
+        actions={
+          <Button render={<Link href="/settings/label-templates/new" />}>
+            <Plus className="size-4" />
+            Neue Etikettenvorlage
+          </Button>
+        }
       />
 
       {isLoading ? <p className="text-sm text-muted-foreground">Lädt…</p> : null}
@@ -69,7 +73,14 @@ export default function LabelTemplatesPage() {
               ]}
               actions={
                 <>
-                  <EditLabelTemplateDialog template={template} />
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    render={<Link href={`/settings/label-templates/${template.id}`} />}
+                  >
+                    <Pencil className="size-3.5" />
+                    Bearbeiten
+                  </Button>
                   <Button
                     type="button"
                     variant="ghost"

ApiCore-Frontend/src/lib/label-templates/types.ts

@@ -1,7 +1,78 @@
+export type LabelFontFamily = "sans" | "serif" | "mono";
+export type LabelTextAlign = "left" | "center" | "right";
+export type LabelLineOrientation = "horizontal" | "vertical";
+
+export const PLACEHOLDER_KEYS = [
+  "batchNumber",
+  "honeyType",
+  "lotNumber",
+  "bottlingDate",
+  "bestBeforeDate",
+  "jarSize",
+  "productName",
+] as const;
+export type PlaceholderKey = (typeof PLACEHOLDER_KEYS)[number];
+
+export const PLACEHOLDER_LABELS: Record<PlaceholderKey, string> = {
+  batchNumber: "Chargennummer",
+  honeyType: "Honigsorte",
+  lotNumber: "Los-/Chargennummer der Abfüllung",
+  bottlingDate: "Abfülldatum",
+  bestBeforeDate: "Mindesthaltbarkeitsdatum (MHD)",
+  jarSize: "Glasgröße",
+  productName: "Produktname",
+};
+
+interface LabelElementBase {
+  id: string;
+  x: number;
+  y: number;
+}
+
+export interface LabelTextElement extends LabelElementBase {
+  type: "text";
+  width: number;
+  height: number;
+  text: string;
+  placeholderKey?: PlaceholderKey | null;
+  fontSize: number;
+  fontFamily: LabelFontFamily;
+  bold: boolean;
+  italic: boolean;
+  color: string;
+  align: LabelTextAlign;
+}
+
+export interface LabelQrCodeElement extends LabelElementBase {
+  type: "qrCode";
+  size: number;
+}
+
+export interface LabelImageElement extends LabelElementBase {
+  type: "image";
+  width: number;
+  height: number;
+  src: string;
+}
+
+export interface LabelLineElement extends LabelElementBase {
+  type: "line";
+  length: number;
+  thickness: number;
+  color: string;
+  orientation: LabelLineOrientation;
+}
+
+export type LabelElement =
+  | LabelTextElement
+  | LabelQrCodeElement
+  | LabelImageElement
+  | LabelLineElement;
+
 export interface LabelTemplate {
   id: string;
   name: string;
-  content: string;
+  elements: LabelElement[];
   widthMm: number;
   heightMm: number;
   isDefault: boolean;
@@ -12,7 +83,7 @@ export interface LabelTemplate {
 
 export interface CreateLabelTemplateInput {
   name: string;
-  content: string;
+  elements: LabelElement[];
   widthMm?: number;
   heightMm?: number;
   isDefault?: boolean;
@@ -20,22 +91,8 @@ export interface CreateLabelTemplateInput {
 
 export interface UpdateLabelTemplateInput {
   name?: string;
-  content?: string;
+  elements?: LabelElement[];
   widthMm?: number;
   heightMm?: number;
   isDefault?: boolean;
 }
-
-export const LABEL_PLACEHOLDERS: { key: string; description: string }[] = [
-  { key: "batchNumber", description: "Chargennummer der Honigcharge" },
-  { key: "honeyType", description: "Honigsorte" },
-  { key: "lotNumber", description: "Los-/Chargennummer der Abfüllung" },
-  { key: "bottlingDate", description: "Abfülldatum" },
-  { key: "bestBeforeDate", description: "Mindesthaltbarkeitsdatum (MHD)" },
-  { key: "jarSize", description: "Glasgröße" },
-  { key: "productName", description: "Produktname" },
-  {
-    key: "qrCode",
-    description: "QR-Code zur öffentlichen Herkunftsseite der Charge (Honigsorte, Daten, Rückverfolgbarkeit)",
-  },
-];