Motiv-Freigabe: Entwurf eingepasst statt beschnitten (objectFit contain)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/App.tsx

@@ -7,6 +7,8 @@ import Auftraege from './routes/Auftraege';
 import Stammdaten from './routes/Stammdaten';
 import Configurator from './routes/Configurator';
 import MusterSeite from './routes/Muster';
+import AngebotSeite from './routes/Angebot';
+import FreigabeSeite from './routes/Freigabe';
 import Textmenge from './routes/Textmenge';
 import { loadSession } from './lib/api';
 
@@ -36,8 +38,11 @@ export default function App() {
           <Routes>
             <Route path="/" element={<Configurator />} />
             <Route path="/login" element={<Login />} />
-            {/* Muster als eigene Seite (kein Popup) – Direktlink /muster. */}
+            {/* Muster & individuelles Angebot als eigene Seiten (kein Popup). */}
             <Route path="/muster" element={<MusterSeite />} />
+            <Route path="/angebot" element={<AngebotSeite />} />
+            {/* Motiv-Freigabe über Einmal-Link (kein Login nötig). */}
+            <Route path="/freigabe/:token" element={<FreigabeSeite />} />
             {/* Textmengen-Tool – öffentlich, Direktlink /textmenge. */}
             <Route path="/textmenge" element={<Textmenge />} />
             <Route

src/components/AppShell.tsx

@@ -180,7 +180,7 @@ function Angebot({ onClose, vorbelegung }: { onClose: () => void; vorbelegung?:
 export function Muster({ onClose = () => {}, variant = 'dialog' }: { onClose?: () => void; variant?: 'dialog' | 'page' }) {
   const [produkte, setProdukte] = useState<Product[]>([]);
   const [form, setForm] = useState({
-    product: '', name: '', email: '', phone: '',
+    product: '', first_name: '', last_name: '', email: '', phone: '',
     street: '', zip: '', city: '', country: 'Deutschland', message: '',
   });
   const [datenschutz, setDatenschutz] = useState(false);
@@ -195,7 +195,8 @@ export function Muster({ onClose = () => {}, variant = 'dialog' }: { onClose?: (
       fetchMyCustomer()
         .then((c) => c && setForm((f) => ({
           ...f,
-          name: [c.first_name, c.last_name].filter(Boolean).join(' ') || f.name,
+          first_name: c.first_name || f.first_name,
+          last_name: c.last_name || f.last_name,
           email: c.email || f.email,
           phone: c.phone || f.phone,
         })))
@@ -216,7 +217,8 @@ export function Muster({ onClose = () => {}, variant = 'dialog' }: { onClose?: (
     try {
       await sendSampleRequest({
         product: form.product,
-        name: form.name.trim(),
+        first_name: form.first_name.trim(),
+        last_name: form.last_name.trim(),
         email: form.email.trim(),
         phone: form.phone.trim() || undefined,
         street: form.street.trim(),
@@ -259,7 +261,7 @@ export function Muster({ onClose = () => {}, variant = 'dialog' }: { onClose?: (
     </div>
   );
 
-  const gueltig = form.product && form.name.trim() && istEmail(form.email) && form.phone.trim()
+  const gueltig = form.product && form.first_name.trim() && form.last_name.trim() && istEmail(form.email) && form.phone.trim()
     && form.street.trim() && form.zip.trim() && form.city.trim() && datenschutz;
 
   return wrap('Muster bestellen', (
@@ -275,12 +277,13 @@ export function Muster({ onClose = () => {}, variant = 'dialog' }: { onClose?: (
             {produkte.map((p) => <option key={p.key} value={p.key}>{p.name}</option>)}
           </select>
         </div>
-        {feld('name', 'Name')}
+        {feld('first_name', 'Vorname')}
+        {feld('last_name', 'Nachname')}
         {feld('email', 'E-Mail-Adresse', false, 'email')}
         {feld('phone', 'Telefon', false, 'tel')}
         {feld('street', 'Straße und Hausnummer')}
         {feld('zip', 'PLZ')}
-        {feld('city', 'Stadt')}
+        {feld('city', 'Ort')}
         <div className="sk-field">
           <label className="sk-label sk-label--required" htmlFor="m-country">Land</label>
           <select id="m-country" className="sk-input" value={form.country} onChange={set('country')}>
@@ -398,10 +401,10 @@ function Sidebar({ onNavigate }: { onNavigate?: () => void }) {
           <IconMail />
           <span>Muster bestellen</span>
         </NavLink>
-        <button className="sk-nav-item sk-nav-item--quiet" onClick={() => { open('angebot'); onNavigate?.(); }}>
+        <NavLink to="/angebot" className="sk-nav-item sk-nav-item--quiet" onClick={onNavigate}>
           <IconOffer />
           <span>Individuelles Angebot</span>
-        </button>
+        </NavLink>
         <button className="sk-nav-item sk-nav-item--quiet" onClick={() => { open('hilfe'); onNavigate?.(); }}>
           <IconHelp />
           <span>Hilfe</span>

src/components/OfferForm.tsx

@@ -15,7 +15,7 @@ const istEmail = (e: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.trim());
  */
 export default function OfferForm({ produkt, onClose }: { produkt?: string; onClose?: () => void }) {
   const gewaehltesProdukt = produkt?.trim() || '';
-  const [form, setForm] = useState({ name: '', email: '', phone: '', quantity: '', message: '' });
+  const [form, setForm] = useState({ first_name: '', last_name: '', email: '', phone: '', quantity: '', message: '' });
   const [datenschutz, setDatenschutz] = useState(false);
   const [status, setStatus] = useState<'formular' | 'sendet' | 'fertig'>('formular');
   const [fehler, setFehler] = useState<string[]>([]);
@@ -28,7 +28,8 @@ export default function OfferForm({ produkt, onClose }: { produkt?: string; onCl
         if (!c) return;
         setForm((f) => ({
           ...f,
-          name: [c.first_name, c.last_name].filter(Boolean).join(' ') || f.name,
+          first_name: c.first_name || f.first_name,
+          last_name: c.last_name || f.last_name,
           email: c.email || f.email,
           phone: c.phone || f.phone,
         }));
@@ -49,7 +50,8 @@ export default function OfferForm({ produkt, onClose }: { produkt?: string; onCl
     setStatus('sendet');
     try {
       await sendOfferRequest({
-        name: form.name.trim(),
+        first_name: form.first_name.trim(),
+        last_name: form.last_name.trim(),
         email: form.email.trim(),
         phone: form.phone.trim() || undefined,
         quantity: form.quantity ? Number(form.quantity) : null,
@@ -90,8 +92,12 @@ export default function OfferForm({ produkt, onClose }: { produkt?: string; onCl
       )}
       <form style={{ marginTop: 'var(--sk-space-4)' }} onSubmit={absenden}>
         <div className="sk-field">
-          <label className="sk-label" htmlFor="a-name">Name</label>
+          <label className="sk-label" htmlFor="a-vorname">Vorname</label>
-          <input id="a-name" className="sk-input" value={form.name} onChange={set('name')} required />
+          <input id="a-vorname" className="sk-input" value={form.first_name} onChange={set('first_name')} required />
+        </div>
+        <div className="sk-field">
+          <label className="sk-label" htmlFor="a-nachname">Nachname</label>
+          <input id="a-nachname" className="sk-input" value={form.last_name} onChange={set('last_name')} required />
         </div>
         <div className="sk-field">
           <label className="sk-label" htmlFor="a-mail">E-Mail</label>

src/lib/api.ts

@@ -527,7 +527,8 @@ export async function uploadFile(datei: File): Promise<string> {
 /* ── Angebotsanfrage ──────────────────────────────────────────────────────── */
 
 export type OfferRequest = {
-  name: string;
+  first_name: string;
+  last_name: string;
   email: string;
   phone?: string;
   quantity?: number | null;
@@ -544,7 +545,8 @@ export async function sendOfferRequest(input: OfferRequest) {
 
 export type SampleRequest = {
   product: string;
-  name: string;
+  first_name: string;
+  last_name: string;
   email: string;
   phone?: string;
   street: string;
@@ -558,6 +560,29 @@ export async function sendSampleRequest(input: SampleRequest) {
   return request('/skrift-orders/sample-request', { method: 'POST', body: input, auth: false });
 }
 
+/* ── Motiv-Freigabe (öffentlich, per Einmal-Token) ─────────────────────────── */
+
+export type Freigabe = {
+  order_number: string;
+  product: string;
+  status: 'pending' | 'approved' | 'changes' | string;
+  note: string;
+  has_layout: boolean;
+};
+
+export async function fetchFreigabe(token: string): Promise<Freigabe> {
+  return request(`/skrift-orders/freigabe/${encodeURIComponent(token)}`, { auth: false });
+}
+
+export async function sendFreigabe(token: string, action: 'approve' | 'changes', note?: string) {
+  return request(`/skrift-orders/freigabe/${encodeURIComponent(token)}`, { method: 'POST', body: { action, note }, auth: false });
+}
+
+/** Direkte URL zum A6-Entwurfs-SVG (Token-gated, kein Login nötig). */
+export function freigabeLayoutUrl(token: string) {
+  return `${BASE}/skrift-orders/freigabe/${encodeURIComponent(token)}/layout`;
+}
+
 /* ── Statusverlauf & Benachrichtigungen ───────────────────────────────────── */
 
 export type StatusEvent = {

src/routes/Angebot.tsx

@@ -0,0 +1,13 @@
+import { useNavigate } from 'react-router-dom';
+import OfferForm from '../components/OfferForm';
+
+/** Individuelles Angebot als eigene Seite (Direktlink /angebot) – kein Popup. */
+export default function AngebotSeite() {
+  const navigate = useNavigate();
+  return (
+    <div className="sk-view">
+      <h1>Individuelles Angebot anfordern</h1>
+      <OfferForm onClose={() => navigate('/')} />
+    </div>
+  );
+}

src/routes/Freigabe.tsx

@@ -0,0 +1,105 @@
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { ApiError, fetchFreigabe, sendFreigabe, freigabeLayoutUrl, type Freigabe } from '../lib/api';
+
+/**
+ * Öffentliche Motiv-Freigabe (Direktlink mit Einmal-Token, kein Login nötig).
+ * Zeigt den A6-Entwurf und lässt den Kunden freigeben oder einen Änderungswunsch
+ * hinterlegen. Erst nach Freigabe geht die Karte in den Druck.
+ */
+export default function FreigabeSeite() {
+  const { token = '' } = useParams();
+  const [data, setData] = useState<Freigabe | null>(null);
+  const [status, setStatus] = useState<'laedt' | 'da' | 'fehler'>('laedt');
+  const [fehler, setFehler] = useState('');
+  const [modus, setModus] = useState<'ansicht' | 'aendern'>('ansicht');
+  const [note, setNote] = useState('');
+  const [sendet, setSendet] = useState(false);
+  const [ergebnis, setErgebnis] = useState<'approved' | 'changes' | null>(null);
+
+  useEffect(() => {
+    fetchFreigabe(token)
+      .then((d) => { setData(d); setStatus('da'); if (d.status === 'approved' || d.status === 'changes') setErgebnis(d.status); })
+      .catch((e) => { setStatus('fehler'); setFehler(e instanceof ApiError ? e.message : 'Freigabe-Link ungültig oder abgelaufen.'); });
+  }, [token]);
+
+  async function absenden(action: 'approve' | 'changes') {
+    if (action === 'changes' && !note.trim()) { setFehler('Bitte beschreiben Sie kurz Ihren Änderungswunsch.'); return; }
+    setFehler(''); setSendet(true);
+    try {
+      await sendFreigabe(token, action, action === 'changes' ? note.trim() : undefined);
+      setErgebnis(action === 'approve' ? 'approved' : 'changes');
+    } catch (e) {
+      setFehler(e instanceof ApiError ? e.message : 'Konnte nicht gespeichert werden.');
+    } finally { setSendet(false); }
+  }
+
+  if (status === 'laedt') return <div className="sk-view"><p className="sk-note">Lädt …</p></div>;
+  if (status === 'fehler') return (
+    <div className="sk-view">
+      <h1>Freigabe</h1>
+      <p className="sk-error">{fehler}</p>
+    </div>
+  );
+
+  const d = data!;
+  const vorschau = (
+    <div style={{
+      margin: 'var(--sk-space-4) 0', maxWidth: 520, aspectRatio: '148 / 105', width: '100%',
+      border: '1px solid var(--sk-border)', borderRadius: 'var(--sk-radius)', overflow: 'hidden',
+      background: '#f4f6fa', boxShadow: '0 2px 10px rgba(0,0,0,.08)',
+    }}>
+      {d.has_layout
+        ? <img src={freigabeLayoutUrl(token)} alt="A6-Entwurf" style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }} />
+        : <div style={{ display: 'grid', placeItems: 'center', height: '100%' }}><span className="sk-note">Entwurf wird noch erstellt …</span></div>}
+    </div>
+  );
+
+  if (ergebnis === 'approved') return (
+    <div className="sk-view">
+      <h1>Vielen Dank!</h1>
+      <p>Sie haben den Entwurf zu <strong>{d.order_number}</strong> freigegeben. Ihre Karte geht jetzt in den Druck.</p>
+      {vorschau}
+    </div>
+  );
+  if (ergebnis === 'changes') return (
+    <div className="sk-view">
+      <h1>Änderungswunsch erhalten</h1>
+      <p>Danke – wir haben Ihren Änderungswunsch zu <strong>{d.order_number}</strong> notiert und melden uns mit einem neuen Entwurf.</p>
+      {vorschau}
+    </div>
+  );
+
+  return (
+    <div className="sk-view">
+      <h1>Ihr Postkarten-Entwurf</h1>
+      <p className="sk-note">Bestellung {d.order_number} · {d.product}. Bitte prüfen Sie den Druck-Entwurf (A6). Erst nach Ihrer Freigabe geht die Karte in den Druck.</p>
+      {vorschau}
+
+      {fehler && <p className="sk-error" style={{ margin: '0 0 var(--sk-space-3)' }}>{fehler}</p>}
+
+      {modus === 'ansicht' ? (
+        <div style={{ display: 'flex', gap: 'var(--sk-space-3)', flexWrap: 'wrap' }}>
+          <button className="sk-btn sk-btn--primary" disabled={sendet} onClick={() => absenden('approve')}>
+            {sendet ? 'Wird gesendet …' : '✓ Entwurf freigeben'}
+          </button>
+          <button className="sk-btn" disabled={sendet} onClick={() => { setModus('aendern'); setFehler(''); }}>
+            Änderung wünschen
+          </button>
+        </div>
+      ) : (
+        <div className="sk-field">
+          <label className="sk-label" htmlFor="f-note">Was sollen wir ändern?</label>
+          <textarea id="f-note" className="sk-input" rows={4} value={note} onChange={(e) => setNote(e.target.value)}
+            placeholder="z. B. Motiv etwas größer, anderer Ausschnitt, Text ergänzen …" />
+          <div style={{ display: 'flex', gap: 'var(--sk-space-3)', flexWrap: 'wrap', marginTop: 'var(--sk-space-3)' }}>
+            <button className="sk-btn sk-btn--primary" disabled={sendet} onClick={() => absenden('changes')}>
+              {sendet ? 'Wird gesendet …' : 'Änderungswunsch senden'}
+            </button>
+            <button className="sk-btn" disabled={sendet} onClick={() => { setModus('ansicht'); setFehler(''); }}>Zurück</button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}