${name} (${email}${body.phone ? `, ${clean(String(body.phone))}` : ''})
` + + `Anfrage betrifft: ${produkt || 'Individuelles Angebot'}
` + + `Menge: ${Number.isFinite(quantity) ? quantity : 'k. A.'}
` + + `${clean(message)}
`, + }); + } catch (mailErr) { + logger.warn(`[skrift-orders] Angebots-Mail nicht versendet: ${mailErr.message}`); + } + + return res.json({ ok: true }); + } catch (err) { + logger.error(`[skrift-orders] offer-request: ${err.stack || err.message}`); + return res.status(500).json({ error: 'Anfrage konnte nicht gespeichert werden.' }); + } + }); + + // ── Musterbestellung (kostenlos) ───────────────────────────────────────── + router.post('/sample-request', async (req, res) => { + const body = req.body || {}; + const email = norm(body.email); + const errors = []; + if (!body.product) errors.push('Produkt fehlt.'); + if (!String(body.name || '').trim()) errors.push('Name fehlt.'); + if (!isEmail(email)) errors.push('Gültige E-Mail-Adresse fehlt.'); + if (!String(body.street || '').trim() || !String(body.zip || '').trim() || !String(body.city || '').trim()) + errors.push('Lieferadresse unvollständig.'); + if (errors.length) return res.status(400).json({ errors }); + + try { + const schema = await getSchema(); + const svc = (c) => new ItemsService(c, { schema, accountability: null }); + const { settings } = await loadPricingContext(schema); + const clean = makeSanitizer(settings.char_whitelist || '\\x20-\\x7E'); + + const customer = (await new UsersService({ schema, accountability: null }).readByQuery({ + filter: { email: { _eq: email } }, limit: 1, fields: ['id'], + }))?.[0]; + + await svc('offer_requests').createOne({ + type: 'muster', + name: clean(String(body.name).trim()), + email, + phone: clean(String(body.phone || '').trim()) || null, + product: clean(String(body.product)), + message: null, + address: { + street: clean(String(body.street || '')), + zip: clean(String(body.zip || '')), + city: clean(String(body.city || '')), + country: clean(String(body.country || '')), + }, + status: 'neu', + customer: customer?.id ?? null, + }); + + try { + const mail = new MailService({ schema, accountability: null }); + const von = await absender(schema); + await mail.send({ + ...(von ? { from: von } : {}), + to: TEAM_EMAIL, + subject: `Musterbestellung: ${clean(String(body.product))} – ${body.name}`, + html: + `${clean(String(body.name))} (${email}${body.phone ? `, ${clean(String(body.phone))}` : ''})
` + + `Produkt: ${clean(String(body.product))}
` + + `${clean(String(body.street))}, ${clean(String(body.zip))} ${clean(String(body.city))}, ` + + `${clean(String(body.country || ''))}
`, + }); + } catch (mailErr) { + logger.warn(`[skrift-orders] Muster-Mail nicht versendet: ${mailErr.message}`); + } + + return res.json({ ok: true }); + } catch (err) { + logger.error(`[skrift-orders] sample-request: ${err.stack || err.message}`); + return res.status(500).json({ error: 'Musterbestellung konnte nicht gespeichert werden.' }); + } + }); + // ── Auftrag anlegen ────────────────────────────────────────────────────── router.post('/', async (req, res) => { const body = req.body || {}; @@ -232,14 +1036,21 @@ const handler = (router, { services, getSchema, logger }) => { let paymentMethod = body.payment_method === 'paypal' ? 'paypal' : 'rechnung'; if (paymentMethod === 'paypal' && !quote.paypal_allowed) paymentMethod = 'rechnung'; - // Kunde finden oder anlegen – Zuordnung immer per E-Mail - const customers = svc('customers'); - let customer = (await customers.readByQuery({ + // Kunde = Login-Konto (directus_users). Finden oder anlegen – per E-Mail. + const users = new UsersService({ schema, accountability: null }); + let customer = (await users.readByQuery({ filter: { email: { _eq: email } }, limit: 1, fields: ['id'], }))?.[0]; if (!customer) { - const id = await customers.createOne({ + const rolesSvc = new RolesService({ schema, accountability: null }); + const role = (await rolesSvc.readByQuery({ + filter: { name: { _eq: 'Kunde' } }, limit: 1, fields: ['id'], + }))?.[0]; + const id = await users.createOne({ email, + password: zufallsPasswort(), + role: role?.id ?? null, + status: 'active', person_type: body.person_type === 'unternehmen' ? 'unternehmen' : 'privat', first_name: clean(body.first_name) ?? null, last_name: clean(body.last_name) ?? null, @@ -249,6 +1060,18 @@ const handler = (router, { services, getSchema, logger }) => { customer = { id }; } + // Spezial-/Kontaktprodukte (z. B. Unterschriftenservice) sind nur + // bestellbar, wenn sie für dieses Konto freigeschaltet wurden. + if (quote.product.type === 'contact') { + const frei = await svc('customer_products').readByQuery({ + filter: { customer: { _eq: customer.id }, product: { _eq: quote.product.id } }, + limit: 1, fields: ['id'], + }); + if (!frei?.length) { + return res.status(403).json({ errors: ['Dieses Produkt ist für Ihr Konto nicht freigeschaltet.'] }); + } + } + // Format auflösen (optional) let formatId = null; if (body.format) { @@ -262,11 +1085,24 @@ const handler = (router, { services, getSchema, logger }) => { ? (String(body.format || '').startsWith('a4') ? 'dinlang' : 'c6') : null; - const orderNumber = `SK-${new Date().toISOString().slice(0, 10)}-${ - String(Math.floor(Math.random() * 100000)).padStart(5, '0')}`; + // Empfänger nach Inland/Ausland aufteilen (für die Auftragsübersicht). + const istInland = (e) => !e.country || /^(de|deutschland|germany)$/i.test(String(e.country).trim()); + const countAusland = entries.filter((e) => !istInland(e)).length; + const countInland = entries.length - countAusland; - const orderId = await svc('orders').createOne({ - order_number: orderNumber, + // Fortlaufende Bestellnummer je Tag: dd-mm-yy-NNN (NNN ab 001). + const jt = new Date(); + const praefix = `${String(jt.getDate()).padStart(2, '0')}-${String(jt.getMonth() + 1).padStart(2, '0')}-${String(jt.getFullYear()).slice(2)}`; + const naechsteNummer = async () => { + const heutige = await svc('orders').readByQuery({ + filter: { order_number: { _starts_with: `${praefix}-` } }, limit: -1, fields: ['id'], + }); + return `${praefix}-${String((heutige?.length ?? 0) + 1).padStart(3, '0')}`; + }; + + // Anlegen mit Wiederholung, falls zwei Bestellungen gleichzeitig dieselbe + // Nummer träfen (order_number ist eindeutig). + const orderData = { customer: customer.id, customer_email: email, product: quote.product.id, @@ -280,17 +1116,37 @@ const handler = (router, { services, getSchema, logger }) => { envelope_labeling: body.envelope_labeling ?? null, envelope_format: envelopeFormat, motif_mode: body.motif_mode ?? null, + motif: Number.isFinite(Number(body.motif)) && body.motif ? Number(body.motif) : null, + motif_upload: body.motif_upload || null, + source_file: body.source_file || null, + billing: body.billing && typeof body.billing === 'object' ? body.billing : null, + shipping_address: body.shipping_address && typeof body.shipping_address === 'object' ? body.shipping_address : null, own_cards: body.motif_mode === 'eigene_karten', text_template: clean(body.text_template) ?? null, text_briefing: clean(body.text_briefing) ?? null, + preview_session: typeof body.preview_session === 'string' ? body.preview_session : null, entries_count: entries.length, + count_inland: countInland, + count_ausland: countAusland, net_total: quote.net_total, vat_amount: quote.vat_amount, gross_total: quote.gross_total, voucher: quote.voucher?.id ?? null, payment_method: paymentMethod, payment_status: 'offen', - }); + }; + + let orderId, orderNumber; + for (let versuch = 0; versuch < 6; versuch += 1) { + orderNumber = await naechsteNummer(); + try { + orderId = await svc('orders').createOne({ order_number: orderNumber, ...orderData }); + break; + } catch (e) { + const dup = /unique|duplicate|bereits|exists/i.test(String(e?.message || '')); + if (versuch === 5 || !dup) throw e; + } + } // Empfängerzeilen – Briefnummer wird IMMER vom System vergeben const entriesSvc = svc('order_entries'); @@ -334,6 +1190,19 @@ const handler = (router, { services, getSchema, logger }) => { order: orderId, status: 'wartet_auf_zahlung', note: 'Auftrag über den Konfigurator angelegt.', }); + // SVGs automatisch erzeugen, sobald der Kunde den Auftrag abschließt. + // Handschrift-Produkte werden gerendert (gezeigte Vorschau-Dokumente 1:1); + // Datei-Produkte (Upload) nicht. Feuern & vergessen – blockiert die Antwort + // an den Kunden nicht (das Backend generiert im Hintergrund und schreibt + // Status/artifact_path selbst zurück). + if (quote.product.type === 'letter' || quote.product.type === 'postcard') { + fetch(`${BACKEND_URL}/api/order/from-directus`, { + method: 'POST', + headers: { 'Content-Type': 'application/json', 'X-API-Token': BACKEND_TOKEN }, + body: JSON.stringify({ orderId }), + }).catch((e) => logger.warn(`[skrift-orders] Auto-Generierung nicht gestartet: ${e.message}`)); + } + return res.json({ order_number: orderNumber, net_total: quote.net_total, vat_amount: quote.vat_amount, gross_total: quote.gross_total, diff --git a/Docker/directus/extensions/directus-extension-skrift-printbutton/dist/index.js b/Docker/directus/extensions/directus-extension-skrift-printbutton/dist/index.js new file mode 100644 index 0000000..562ea19 --- /dev/null +++ b/Docker/directus/extensions/directus-extension-skrift-printbutton/dist/index.js @@ -0,0 +1,83 @@ +/** + * Skrift – Interface „Drucken" + * --------------------------------------------------------------------------- + * Zeigt im Auftrag eine Maschinen-Auswahl + „Drucken"-Button. Der Button reiht + * den Auftrag über POST /skrift-orders/enqueue als Druck-Job(s) ein (Brief + + * ggf. Umschlag, mit aufgelöstem Template). Läuft über die angemeldete Session. + * + * Bewusst von Hand als ESM (kein Build-Schritt) – Vue + SDK stellt Directus bereit. + */ +import { defineComponent, ref, inject, onMounted, h } from 'vue'; +import { useApi } from '@directus/extensions-sdk'; + +const PrintButton = defineComponent({ + setup() { + const api = useApi(); + const values = inject('values', ref({})); + const machines = ref([]); + const selected = ref(null); + const busy = ref(false); + const msg = ref(''); + const err = ref(''); + + async function ladeMaschinen() { + try { + const res = await api.get('/items/machines', { params: { fields: 'id,name,active', limit: -1 } }); + machines.value = (res.data?.data || []).filter((m) => m.active !== false); + if (machines.value.length && selected.value == null) selected.value = machines.value[0].id; + } catch { + err.value = 'Maschinen konnten nicht geladen werden.'; + } + } + onMounted(ladeMaschinen); + + async function drucken() { + const orderId = values && values.value ? values.value.id : null; + if (!orderId) { err.value = 'Auftrag zuerst speichern.'; return; } + if (selected.value == null) { err.value = 'Bitte eine Maschine wählen.'; return; } + busy.value = true; err.value = ''; msg.value = ''; + try { + const res = await api.post('/skrift-orders/enqueue', { order: orderId, machine: selected.value }); + const n = (res.data?.jobs || []).length; + msg.value = `${n} Druck-Job(s) eingereiht.`; + } catch (e) { + err.value = (e && e.response && e.response.data && e.response.data.error) || (e && e.message) || 'Fehler beim Einreihen.'; + } finally { + busy.value = false; + } + } + + return () => { + if (!machines.value.length) { + return h('div', { style: 'color:var(--foreground-subdued);font-size:13px;' }, + err.value || 'Keine aktive Maschine – bitte unter Einstellungen → Maschinen anlegen.'); + } + return h('div', { style: 'display:flex;flex-direction:column;gap:8px;' }, [ + h('div', { style: 'display:flex;gap:8px;align-items:center;flex-wrap:wrap;' }, [ + h('select', { + style: 'padding:6px 10px;border:1px solid var(--border-normal);border-radius:6px;background:var(--background-page);font:inherit;', + onChange: (e) => { selected.value = e.target.value; }, + }, machines.value.map((m) => h('option', { value: m.id, selected: String(m.id) === String(selected.value) }, m.name))), + h('button', { + type: 'button', disabled: busy.value, onClick: drucken, + style: 'cursor:pointer;border:1px solid var(--primary);background:var(--primary);color:#fff;border-radius:6px;padding:6px 16px;font:inherit;', + }, busy.value ? 'Wird eingereiht …' : 'Drucken'), + ]), + msg.value ? h('div', { style: 'color:var(--success, #2e7d32);font-size:13px;' }, msg.value) : null, + err.value ? h('div', { style: 'color:var(--danger, #c62828);font-size:13px;' }, err.value) : null, + ]); + }; + }, +}); + +export default { + id: 'skrift-print-button', + name: 'Drucken', + icon: 'print', + description: 'Reiht den Auftrag als Druck-Job für eine Maschine ein.', + component: PrintButton, + types: ['alias'], + localTypes: ['presentation'], + group: 'presentation', + options: null, +}; diff --git a/Docker/directus/extensions/directus-extension-skrift-printbutton/package.json b/Docker/directus/extensions/directus-extension-skrift-printbutton/package.json new file mode 100644 index 0000000..e3a98d6 --- /dev/null +++ b/Docker/directus/extensions/directus-extension-skrift-printbutton/package.json @@ -0,0 +1,13 @@ +{ + "name": "directus-extension-skrift-printbutton", + "version": "1.0.0", + "private": true, + "type": "module", + "description": "Interface: reiht einen Auftrag als Druck-Job für eine Maschine ein (POST /skrift-orders/enqueue).", + "directus:extension": { + "type": "interface", + "path": "dist/index.js", + "source": "dist/index.js", + "host": "^11.0.0" + } +} diff --git a/Docker/directus/extensions/directus-extension-skrift-produktion/dist/index.js b/Docker/directus/extensions/directus-extension-skrift-produktion/dist/index.js new file mode 100644 index 0000000..51157fb --- /dev/null +++ b/Docker/directus/extensions/directus-extension-skrift-produktion/dist/index.js @@ -0,0 +1,701 @@ +/** + * Skrift – Modul „Produktion" + * =========================================================================== + * Die Produktions-Kommandozentrale: ein Board mit sechs Status-Umschaltern, + * zentraler Suche und pro Auftrag den drei Aktionen Drucken / Empfänger / + * Dateien – man muss die Ansicht für nichts verlassen. + * + * 1 Neu – neue Aufträge + Muster- und Angebotsanfragen + * 2 Warteschlange – eingereihte Druck-Jobs, nach Maschine unterteilt + * 3 Im Druck – laufende Aufträge (Brief/Kuvert getrennt gekennzeichnet) + * 4 Kuvertierung – fertig gedruckt, wird eingetütet + * 5 Versandfertig – bereit zum Versand + * 6 Versendet – abgeschlossen + * + * Druck-Popup wie im alten Job-Manager: Maschine + je Typ Template mit + * vorgeschlagenem Format, editierbaren Maßen und Nummern-Bereich, dazu + * Warteschlange vs. Direktdruck (Direkt gesperrt, wenn die Maschine druckt). + * Muster: manueller Druck mit Adresse aus der Anfrage + Du/Sie-Standardtext. + * + * Bewusst von Hand als ESM (kein Build-Schritt) – Vue + SDK stellt Directus bereit. + */ +import { defineComponent, ref, reactive, computed, onMounted, h, Teleport, resolveComponent } from 'vue'; +import { useApi } from '@directus/extensions-sdk'; + +// Auftragsformat → Standard-Template-Schlüssel (wie im Backend /enqueue). +const LETTER_TPL = { a4: 'a4_single', a6_hoch: 'a6_v1', a6_quer: 'a6_v2' }; +const ENVELOPE_TPL = { dinlang: 'kuvert_a_v1', c6: 'kuvert_b_v1' }; +const INLAND = /^(de|deutschland|germany)$/i; + +const TABS = [ + { key: 'neu', label: '🆕 Neu' }, + { key: 'warteschlange', label: '⏳ Warteschlange' }, + { key: 'druck', label: '🖨 Im Druck' }, + { key: 'kuvertierung', label: '✉ Kuvertierung' }, + { key: 'versandfertig', label: '📦 Versandfertig' }, + { key: 'versendet', label: '🚚 Versendet' }, + { key: 'archiv', label: '🗄 Archiv' }, +]; +const STATUS_LABEL = { + eingegangen: 'Eingegangen', im_druck: 'Im Druck', kuvertieren: 'Kuvertierung', + versandfertig: 'Versandfertig', versendet: 'Versendet', storniert: 'Storniert', +}; +// Tage, nach denen ein versendeter Auftrag automatisch ins Archiv wandert. +const ARCHIV_TAGE = 14; +const PARAM_FELDER = [ + ['width', 'Breite'], ['height', 'Höhe'], ['xpos', 'X'], ['ypos', 'Y'], ['scale', 'Scale'], ['rotation', 'Rot°'], +]; + +// ── kleine Stil-/Render-Helfer ────────────────────────────────────────────── +// Weiße Karte, die sich klar von der (leicht getönten) Inhaltsfläche abhebt. +const CARD = 'border:1px solid var(--border-subdued);border-radius:8px;padding:16px 18px;background:var(--background-page,#fff);box-shadow:0 1px 3px rgba(0,0,0,.08);'; +// Getönte Sektion (Briefe/Kuverts) mit Rand + Radius; Abstand über margin-bottom. +const SECTION = 'background:var(--background-subdued,#f1f4f9);border:1px solid var(--border-normal);border-radius:8px;padding:16px 18px;margin-bottom:16px;'; +// Deutlich sichtbares Eingabefeld (weiß auf getönter Sektion). +const S_FELD = 'border:1px solid var(--border-normal);border-radius:7px;padding:6px 10px;background:var(--background-page,#fff);'; +const S_INPUT = 'padding:7px 10px;border:1px solid var(--border-normal);border-radius:7px;background:var(--background-page);color:var(--foreground-normal);font:inherit;font-size:13px;'; +const S_SELECT = S_INPUT + 'cursor:pointer;'; + +// Directus-Primärfarbe (Marke) + Kartenfarben je Vorgangstyp. +const ACCENT = '#1E50A5'; // Aufträge / Druck → blau +const FARBE_MUSTER = '#d13438'; // Musteranfrage → rot +const FARBE_ANGEBOT = '#e07b00'; // Angebotsanfrage → orange + +function btn(label, onClick, kind) { + const base = 'cursor:pointer;border-radius:7px;padding:6px 14px;font:inherit;font-size:13px;border:1px solid;'; + const style = kind === 'primary' + ? base + `border-color:${ACCENT};background:${ACCENT};color:#fff;` + : kind === 'danger' + ? base + 'border-color:var(--danger,#c62828);background:transparent;color:var(--danger,#c62828);' + : base + 'border-color:var(--border-normal);background:var(--background-subdued);color:var(--foreground-normal);'; + return h('button', { type: 'button', onClick, style }, label); +} +function chip(text, farbe) { + return h('span', { + style: `display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:2px 8px;border-radius:20px;` + + `background:${farbe || 'var(--background-subdued)'};color:var(--foreground-subdued);white-space:nowrap;`, + }, text); +} +function subdued(text, extra) { + return h('div', { style: `color:var(--foreground-subdued);font-size:13px;${extra || ''}` }, text); +} +// Segmentierter Umschalter mit sichtbarem Rahmen: Optionen teilen sich die Breite. +function segToggle(value, opts, onSel) { + return h('div', { style: 'display:flex;width:100%;border:1px solid var(--border-normal);border-radius:8px;overflow:hidden;background:var(--background-subdued,#f1f4f9);' }, + opts.map((o, i) => h('button', { + type: 'button', disabled: o.disabled, onClick: () => { if (!o.disabled) onSel(o.key); }, + style: `flex:1;padding:12px 8px;font:inherit;font-size:13px;text-align:center;cursor:${o.disabled ? 'not-allowed' : 'pointer'};border:none;` + + (i > 0 ? 'border-left:1px solid var(--border-normal);' : '') + + (value === o.key ? `background:${ACCENT};color:#fff;font-weight:700;` : 'background:transparent;color:var(--foreground-normal);') + + (o.disabled ? 'opacity:.45;' : ''), + }, o.label))); +} + +// ── Datenhelfer ───────────────────────────────────────────────────────────── +function volleZeile(e) { + if (e.free_text && String(e.free_text).trim()) { + return String(e.free_text).trim().split(/\r?\n/).map((s) => s.trim()).filter(Boolean).join(' · '); + } + const name = [e.salutation, e.first_name, e.last_name].filter(Boolean).join(' '); + const strasse = [e.street, e.house_no].filter(Boolean).join(' '); + const ort = [e.zip, e.city].filter(Boolean).join(' '); + const land = e.country && !INLAND.test(String(e.country).trim()) ? e.country : null; + return [name, strasse, ort, land].filter(Boolean).join(' · '); +} +function extras(e) { + if (!e.placeholders || typeof e.placeholders !== 'object') return ''; + return Object.entries(e.placeholders) + .filter(([, v]) => v !== null && v !== undefined && String(v).trim() !== '') + .map(([k, v]) => `${k}: ${v}`).join(' · '); +} +function kundeName(o) { + const c = o.customer || {}; + return [c.first_name, c.last_name].filter(Boolean).join(' ') || c.email || '—'; +} + +const Board = defineComponent({ + setup() { + const api = useApi(); + const tab = ref('neu'); + const suche = ref(''); + const loading = ref(false); + const fehler = ref(''); + const meldung = ref(''); + + const orders = ref([]); + const requests = ref([]); + const jobs = ref([]); + const machines = ref([]); + const templates = ref([]); + const muster = ref({ text_du: '', text_sie: '' }); + + // ── Modale ── + const druck = reactive({ open: false, order: null, machine: null, mode: 'queue', busy: false, brief: null, umschlag: null, msg: '', err: '' }); + const manuell = reactive({ open: false, req: null, form: 'sie', font: 'tilda', format: 'a4', template: null, machine: null, mode: 'queue', text: '', msg: '', err: '' }); + const empf = reactive({ open: false, mode: 'order', titel: '', order: null, suche: '', rows: [], files: [], + info: '', laden: false, selected: null, pl: '', pe: '', pLoad: false, perr: '', lb: '', lbTitel: '' }); + + // ── Laden ── + // Basis-Felder ohne die evtl. noch nicht gebootstrapten Felder – diese + // werden separat versucht, damit ein fehlendes Feld nicht das ganze Board sperrt. + const ORDER_FELDER = 'id,order_number,status,payment_status,production_status,needs_envelope,envelope_format,' + + 'envelope_labeling,shipping_type,entries_count,count_inland,count_ausland,brief_gedruckt,kuvert_gedruckt,' + + 'date_updated,date_created,format.key,format.name,product.name,product.input_mode,' + + 'customer.first_name,customer.last_name,customer.email,customer.phone'; + async function ladeOrders() { + try { + return await api.get('/items/orders', { params: { limit: -1, sort: '-date_created', fields: ORDER_FELDER + ',versandt_am' } }); + } catch { + // Feld „versandt_am" fehlt noch (Bootstrap nicht gelaufen) → ohne laden, + // Archiv nutzt ersatzweise date_updated. + return api.get('/items/orders', { params: { limit: -1, sort: '-date_created', fields: ORDER_FELDER } }); + } + } + async function laden() { + loading.value = true; fehler.value = ''; + try { + const [o, r, j, m, t, ms] = await Promise.all([ + ladeOrders(), + api.get('/items/offer_requests', { params: { + limit: -1, sort: '-date_created', + filter: { status: { _in: ['neu', 'in_bearbeitung'] } }, + fields: 'id,type,name,email,phone,quantity,product,message,address,status,date_created', + } }), + api.get('/items/jobs', { params: { + limit: -1, sort: '-priority,date_created', + filter: { status: { _in: ['queued', 'printing', 'failed'] } }, + fields: 'id,type,status,priority,numbers,output_ref,error,date_created,machine.id,machine.name,order.id,order.order_number', + } }), + api.get('/items/machines', { params: { limit: -1, fields: 'id,name,active,status,last_seen' } }), + api.get('/items/format_templates', { params: { limit: -1, fields: 'id,key,name,type,width,height,xpos,ypos,scale,rotation' } }), + api.get('/items/muster_settings', { params: { fields: 'text_du,text_sie' } }).catch(() => ({ data: { data: { text_du: '', text_sie: '' } } })), + ]); + orders.value = o.data?.data || []; + requests.value = r.data?.data || []; + jobs.value = j.data?.data || []; + machines.value = (m.data?.data || []); + templates.value = t.data?.data || []; + muster.value = ms.data?.data || { text_du: '', text_sie: '' }; + } catch (e) { + fehler.value = e?.response?.data?.errors?.[0]?.message || e?.message || 'Laden fehlgeschlagen.'; + } finally { loading.value = false; } + } + onMounted(laden); + + const aktiveMaschinen = computed(() => machines.value.filter((m) => m.active !== false)); + const maschineBusy = (id) => jobs.value.some((j) => j.status === 'printing' && String(j.machine?.id) === String(id)); + + // Aufträge mit offenen/laufenden Jobs → gehören in „Warteschlange"/„Im Druck", nicht mehr in „Neu". + const orderIdsInArbeit = computed(() => { + const s = new Set(); + for (const j of jobs.value) if (j.order?.id && (j.status === 'queued' || j.status === 'printing')) s.add(String(j.order.id)); + return s; + }); + + function trifftSuche(hay) { + const q = suche.value.trim().toLowerCase(); + if (!q) return true; + return hay.toLowerCase().includes(q); + } + const orderHay = (o) => [o.order_number, kundeName(o), o.customer?.email, o.customer?.phone, + o.product?.name, o.format?.name, o.shipping_type, o.production_status, o.payment_status].filter(Boolean).join(' '); + + // Tab-Listen + const neueOrders = computed(() => orders.value.filter((o) => + (o.production_status || 'eingegangen') === 'eingegangen' && !orderIdsInArbeit.value.has(String(o.id)) && trifftSuche(orderHay(o)))); + const neueRequests = computed(() => requests.value.filter((r) => + trifftSuche([r.name, r.email, r.phone, r.product, r.message, r.type].filter(Boolean).join(' ')))); + const ordersByStatus = (st) => orders.value.filter((o) => (o.production_status || 'eingegangen') === st && trifftSuche(orderHay(o))); + // Archiv: storniert ODER seit mehr als 14 Tagen versendet. + const alterTage = (ts) => (ts ? (Date.now() - new Date(ts).getTime()) / 86400000 : Infinity); + const istArchiviert = (o) => o.production_status === 'storniert' + || (o.production_status === 'versendet' && alterTage(o.versandt_am || o.date_updated) > ARCHIV_TAGE); + const versendetAktiv = () => orders.value.filter((o) => o.production_status === 'versendet' && !istArchiviert(o) && trifftSuche(orderHay(o))); + const archivListe = () => orders.value.filter((o) => istArchiviert(o) && trifftSuche(orderHay(o))); + const queuedByMachine = computed(() => { + const groups = {}; + for (const m of aktiveMaschinen.value) groups[m.id] = { machine: m, jobs: [] }; + groups.__ohne = { machine: { name: 'Ohne Maschine' }, jobs: [] }; + for (const j of jobs.value) { + if (j.status !== 'queued') continue; + if (!trifftSuche([j.order?.order_number, j.output_ref, j.type].filter(Boolean).join(' '))) continue; + (groups[j.machine?.id] || groups.__ohne).jobs.push(j); + } + return Object.values(groups).filter((g) => g.jobs.length); + }); + const tabCount = (key) => { + if (key === 'neu') return neueOrders.value.length + neueRequests.value.length; + if (key === 'warteschlange') return jobs.value.filter((j) => j.status === 'queued').length; + if (key === 'druck') return ordersByStatus('im_druck').length; + if (key === 'kuvertierung') return ordersByStatus('kuvertieren').length; + if (key === 'versandfertig') return ordersByStatus('versandfertig').length; + if (key === 'versendet') return versendetAktiv().length; + if (key === 'archiv') return archivListe().length; + return 0; + }; + + function flash(msg) { meldung.value = msg; setTimeout(() => { if (meldung.value === msg) meldung.value = ''; }, 4000); } + + // ── Statuswechsel eines Auftrags ── + async function setStatus(order, neu) { + const patch = { production_status: neu }; + // Versanddatum festhalten (Basis fürs Auto-Archiv nach 14 Tagen). + if (neu === 'versendet' && !order.versandt_am) patch.versandt_am = new Date().toISOString(); + try { + await api.patch(`/items/orders/${order.id}`, patch); + order.production_status = neu; + if (patch.versandt_am) order.versandt_am = patch.versandt_am; + flash(`${order.order_number} → ${STATUS_LABEL[neu]}`); + } catch (e) { fehler.value = e?.message || 'Statuswechsel fehlgeschlagen.'; } + } + + // ── Druck-Popup ── + const tplByKey = (key, typ) => templates.value.find((t) => t.key === key && t.type === typ) || templates.value.find((t) => t.type === typ) || null; + const tplToFelder = (t) => ({ tplId: t?.id ?? null, width: t?.width ?? 0, height: t?.height ?? 0, xpos: t?.xpos ?? 0, ypos: t?.ypos ?? 0, scale: t?.scale ?? 1, rotation: t?.rotation ?? 0 }); + + function openDruck(order) { + const bt = tplByKey(LETTER_TPL[order.format?.key] || 'a4_single', 'brief'); + const wantsEnv = order.needs_envelope && order.envelope_labeling && order.envelope_labeling !== 'keine'; + const et = wantsEnv ? tplByKey(ENVELOPE_TPL[order.envelope_format] || 'kuvert_a_v1', 'umschlag') : null; + const n = Math.max(1, order.entries_count || 1); + druck.order = order; + druck.machine = aktiveMaschinen.value[0]?.id ?? null; + druck.mode = 'queue'; druck.msg = ''; druck.err = ''; + druck.brief = { enabled: true, numbers: `1-${n}`, done: !!order.brief_gedruckt, ...tplToFelder(bt) }; + druck.umschlag = wantsEnv ? { enabled: true, numbers: `1-${n}`, done: !!order.kuvert_gedruckt, ...tplToFelder(et) } : null; + druck.open = true; + } + function druckTplWechsel(sec, tplId) { + const t = templates.value.find((x) => String(x.id) === String(tplId)); + if (!t) return; + Object.assign(druck[sec], tplToFelder(t)); + } + async function submitDruck() { + if (!druck.machine) { druck.err = 'Bitte Maschine wählen.'; return; } + const sections = {}; + const bau = (sec) => ({ enabled: true, template: sec.tplId, numbers: sec.numbers || '', + params: { width: sec.width, height: sec.height, xpos: sec.xpos, ypos: sec.ypos, scale: sec.scale, rotation: sec.rotation } }); + if (druck.brief?.enabled) sections.brief = bau(druck.brief); + if (druck.umschlag?.enabled) sections.umschlag = bau(druck.umschlag); + if (!Object.keys(sections).length) { druck.err = 'Kein Abschnitt gewählt.'; return; } + druck.err = ''; druck.msg = 'Wird eingereiht …'; + try { + const res = await api.post('/skrift-orders/enqueue', { order: druck.order.id, machine: druck.machine, mode: druck.mode, sections }); + const n = res.data?.jobs?.length || 0; + const modus = res.data?.mode === 'direct' ? 'Direktdruck' : 'Warteschlange'; + flash(`${n} Job(s) eingereiht (${modus}).`); + druck.open = false; + await laden(); + } catch (e) { druck.err = e?.response?.data?.error || e?.message || 'Einreihen fehlgeschlagen.'; druck.msg = ''; } + } + + // ── Muster: manueller Druck ── + function musterAufloesen() { + const roh = manuell.form === 'du' ? muster.value.text_du : muster.value.text_sie; + const a = manuell.req?.address && typeof manuell.req.address === 'object' ? manuell.req.address : {}; + const name = manuell.req?.name || ''; + const teile = name.split(' '); + const vor = teile[0] || ''; const nach = teile.slice(1).join(' '); + manuell.text = String(roh || '') + .replace(/\[\[Vorname\]\]/gi, a.first_name || a.vorname || vor) + .replace(/\[\[Nachname\]\]/gi, a.last_name || a.nachname || nach) + .replace(/\[\[Anrede\]\]/gi, a.salutation || a.anrede || '') + .replace(/\[\[Name\]\]/gi, name); + } + function openMuster(req) { + manuell.req = req; manuell.form = 'sie'; manuell.font = 'tilda'; manuell.format = 'a4'; + manuell.template = tplByKey('a4_single', 'brief')?.id ?? templates.value.find((t) => t.type === 'brief')?.id ?? null; + manuell.machine = aktiveMaschinen.value[0]?.id ?? null; manuell.mode = 'queue'; + manuell.msg = ''; manuell.err = ''; + musterAufloesen(); + manuell.open = true; + } + async function submitMuster() { + if (!manuell.text.trim()) { manuell.err = 'Text fehlt.'; return; } + if (!manuell.template || !manuell.machine) { manuell.err = 'Template und Maschine wählen.'; return; } + manuell.err = ''; manuell.msg = 'Wird erzeugt …'; + try { + const res = await api.post('/skrift-orders/manual-print', { + text: manuell.text, font: manuell.font, format: manuell.format, + template: manuell.template, machine: manuell.machine, mode: manuell.mode, + offer_request: manuell.req?.id || null, + }); + const modus = res.data?.mode === 'direct' ? 'Direktdruck' : 'Warteschlange'; + flash(`Muster erzeugt & eingereiht (${modus}).`); + manuell.open = false; + await laden(); + } catch (e) { manuell.err = e?.response?.data?.detail || e?.response?.data?.error || e?.message || 'Fehlgeschlagen.'; manuell.msg = ''; } + } + + // ── Empfänger-Drawer (mit Dokument-Vorschau je Zeile) ── + const dateiNummer = (name) => { + const z = String(name || '').replace(/\.[^.]*$/, '').replace(/\D/g, ''); + return z ? parseInt(z, 10) : null; + }; + async function openEmpf(order) { + empf.open = true; empf.mode = 'order'; empf.titel = `Empfänger · ${order.order_number}`; + empf.order = order.order_number; empf.suche = ''; empf.rows = []; empf.files = []; empf.info = ''; + empf.selected = null; empf.pl = ''; empf.pe = ''; empf.perr = ''; empf.lb = ''; empf.laden = true; + try { + const [ent, fl] = await Promise.all([ + api.get('/items/order_entries', { params: { 'filter[order][_eq]': order.id, sort: 'letter_number', limit: -1, fields: '*' } }), + api.get('/skrift-orders/files/' + encodeURIComponent(order.order_number)).catch(() => ({ data: { files: [] } })), + ]); + empf.rows = (ent.data?.data || []).map((e) => ({ nr: e.letter_number, zeile: volleZeile(e), extra: extras(e) })); + empf.files = fl.data?.files || []; + } catch (e) { empf.info = e?.message || 'Empfänger konnten nicht geladen werden.'; } finally { empf.laden = false; } + } + function openReqInfo(req) { + empf.open = true; empf.mode = 'request'; empf.titel = `Anfrage · ${req.name}`; empf.suche = ''; empf.info = ''; + empf.files = []; empf.selected = null; empf.pl = ''; empf.pe = ''; empf.lb = ''; + const a = req.address && typeof req.address === 'object' ? Object.entries(req.address).map(([k, v]) => `${k}: ${v}`).join(' · ') : (req.address || ''); + empf.rows = [ + { nr: '✉', zeile: `${req.name} · ${req.email}${req.phone ? ' · ' + req.phone : ''}`, extra: '' }, + { nr: '📦', zeile: a || 'Keine Adresse angegeben.', extra: '' }, + { nr: '💬', zeile: req.message || '—', extra: `Produkt: ${req.product || '—'} · Menge: ${req.quantity ?? '—'}` }, + ]; + empf.laden = false; + } + async function empfBlob(f) { + const res = await api.get('/skrift-orders/files/' + encodeURIComponent(empf.order) + '/download', { params: { rel: f.rel }, responseType: 'blob' }); + return URL.createObjectURL(res.data); + } + // Positionsbasierter Abgleich: der i-te Empfänger → die i-te Datei. Robust + // gegen alte (0-basierte) und neue (1-basierte) Dateinamen. + const nachNummer = (kind) => empf.files + .filter((f) => f.kind === kind) + .sort((a, b) => (dateiNummer(a.name) ?? 0) - (dateiNummer(b.name) ?? 0)); + async function previewEntry(nr, rang) { + empf.selected = nr; empf.perr = ''; empf.pLoad = true; + if (empf.pl) URL.revokeObjectURL(empf.pl); if (empf.pe) URL.revokeObjectURL(empf.pe); + empf.pl = ''; empf.pe = ''; + try { + const brief = nachNummer('schriftstueck')[rang] || empf.files.find((f) => f.kind === 'schriftstueck' && dateiNummer(f.name) === nr); + const kuvert = nachNummer('umschlag')[rang] || empf.files.find((f) => f.kind === 'umschlag' && dateiNummer(f.name) === nr); + if (brief) empf.pl = await empfBlob(brief); + if (kuvert) empf.pe = await empfBlob(kuvert); + if (!brief && !kuvert) { + empf.perr = empf.files.length + ? 'Für diese Nummer sind noch keine Dateien generiert.' + : 'Für diesen Auftrag wurden noch keine Dateien generiert (erst nach Abschluss/Generierung).'; + } + } catch (e) { empf.perr = 'Vorschau fehlgeschlagen.'; } finally { empf.pLoad = false; } + } + const empfTreffer = computed(() => { + const q = empf.suche.trim().toLowerCase(); + if (!q) return empf.rows; + return empf.rows.filter((r) => `#${r.nr} ${r.zeile} ${r.extra}`.toLowerCase().includes(q)); + }); + + // ── Job abbrechen ── + async function cancelJob(job) { + try { await api.delete(`/items/jobs/${job.id}`); flash('Job entfernt.'); await laden(); } + catch (e) { fehler.value = e?.message || 'Job konnte nicht entfernt werden.'; } + } + async function setRequestStatus(req, st) { + try { await api.patch(`/items/offer_requests/${req.id}`, { status: st }); flash('Anfrage aktualisiert.'); await laden(); } + catch (e) { fehler.value = e?.message || 'Fehlgeschlagen.'; } + } + + // ── Render-Bausteine ────────────────────────────────────────────────── + function actionButtons(order) { + // Drucken + Empfänger (Empfänger enthält die Vorschau je Dokument). + return h('div', { style: 'display:flex;gap:8px;flex-wrap:wrap;' }, [ + btn('🖨 Drucken', () => openDruck(order), 'primary'), + btn('👥 Empfänger', () => openEmpf(order)), + ]); + } + function statusSelect(order) { + return h('select', { + style: S_SELECT + 'font-size:12px;padding:4px 8px;', + value: order.production_status || 'eingegangen', + onChange: (e) => setStatus(order, e.target.value), + }, Object.entries(STATUS_LABEL).map(([k, v]) => h('option', { value: k, selected: (order.production_status || 'eingegangen') === k }, v))); + } + function orderCard(order, opts) { + const o = order; const zeigeBadges = opts?.badges; + const kopf = h('div', { style: 'display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;' }, [ + h('div', {}, [ + h('div', { style: 'font-weight:700;font-size:15px;' }, `#${o.order_number}`), + subdued(`${kundeName(o)}${o.customer?.email ? ' · ' + o.customer.email : ''}${o.customer?.phone ? ' · ' + o.customer.phone : ''}`, 'margin-top:2px;'), + ]), + statusSelect(o), + ]); + const meta = h('div', { style: 'display:flex;gap:6px;flex-wrap:wrap;margin:10px 0;' }, [ + chip(`${o.entries_count || 0} Briefe`), + chip(o.needs_envelope ? `${o.entries_count || 0} Kuverts` : 'ohne Kuvert'), + chip(o.shipping_type === 'einzeln' ? 'Einzelversand' : 'Sammelversand'), + chip(o.product?.name || 'Produkt?'), + chip(o.format?.name || o.format?.key || 'Format?'), + chip(o.payment_status === 'bezahlt' ? '✓ bezahlt' : (o.payment_status === 'storniert' ? 'storniert' : 'offen'), + o.payment_status === 'bezahlt' ? 'var(--success-25,rgba(46,125,50,.15))' : 'var(--warning-25,rgba(230,160,0,.15))'), + ]); + const badges = zeigeBadges ? h('div', { style: 'display:flex;gap:8px;margin-bottom:10px;' }, [ + chip(o.brief_gedruckt ? '✓ Brief gedruckt' : '… Brief offen', o.brief_gedruckt ? 'var(--success-25,rgba(46,125,50,.15))' : 'var(--background-subdued)'), + o.needs_envelope ? chip(o.kuvert_gedruckt ? '✓ Kuvert gedruckt' : '… Kuvert offen', o.kuvert_gedruckt ? 'var(--success-25,rgba(46,125,50,.15))' : 'var(--background-subdued)') : null, + ]) : null; + return h('div', { key: 'o' + o.id, style: CARD + `margin-bottom:14px;border-left:4px solid ${ACCENT};` }, [kopf, meta, badges, actionButtons(o)]); + } + function requestCard(req) { + const istMuster = req.type === 'muster'; + const kopf = h('div', { style: 'display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;' }, [ + h('div', {}, [ + h('div', { style: 'font-weight:700;font-size:15px;' }, `${istMuster ? '🧪 Muster' : '📝 Angebot'} · ${req.name}`), + subdued(`${req.email}${req.phone ? ' · ' + req.phone : ''}`, 'margin-top:2px;'), + ]), + h('select', { style: S_SELECT + 'font-size:12px;padding:4px 8px;', value: req.status, onChange: (e) => setRequestStatus(req, e.target.value) }, + ['neu', 'in_bearbeitung', 'beantwortet', 'abgelehnt'].map((s) => h('option', { value: s, selected: req.status === s }, s))), + ]); + const meta = h('div', { style: 'display:flex;gap:6px;flex-wrap:wrap;margin:10px 0;' }, [ + chip(req.product || 'Produkt?'), req.quantity ? chip(`Menge ${req.quantity}`) : null, + ]); + const nachricht = req.message ? subdued(req.message, 'margin:0 0 10px;white-space:pre-wrap;') : null; + const aktionen = h('div', { style: 'display:flex;gap:8px;flex-wrap:wrap;' }, [ + // Muster (Druckprodukt) → manueller Druck; individuelles Angebot → kein Druck. + istMuster ? btn('🖨 Muster drucken', () => openMuster(req), 'primary') : null, + btn('👤 Details', () => openReqInfo(req)), + ]); + return h('div', { key: 'r' + req.id, style: CARD + `margin-bottom:14px;border-left:4px solid ${istMuster ? FARBE_MUSTER : FARBE_ANGEBOT};` }, [kopf, meta, nachricht, aktionen]); + } + + function tabInhalt() { + if (tab.value === 'neu') { + const items = [...neueOrders.value.map((o) => orderCard(o)), ...neueRequests.value.map(requestCard)]; + return items.length ? items : subdued('Nichts Neues.'); + } + if (tab.value === 'warteschlange') { + const gruppen = queuedByMachine.value; + if (!gruppen.length) return subdued('Warteschlange leer.'); + return gruppen.map((g) => h('div', { style: 'margin-bottom:18px;' }, [ + h('div', { style: 'font-weight:700;margin-bottom:8px;' }, `🖨 ${g.machine.name}${g.machine.status ? ' · ' + g.machine.status : ''}`), + ...g.jobs.map((j) => h('div', { key: 'j' + j.id, style: CARD + 'margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;' }, [ + h('div', {}, [ + h('div', { style: 'font-weight:600;' }, `#${j.order?.order_number || j.output_ref || j.id} · ${j.type}`), + subdued(`${j.numbers ? 'Nr. ' + j.numbers : 'alle'}${j.priority ? ' · Direkt' : ''}`), + ]), + btn('Entfernen', () => cancelJob(j), 'danger'), + ])), + ])); + } + if (tab.value === 'druck') { + const list = ordersByStatus('im_druck'); + return list.length ? list.map((o) => orderCard(o, { badges: true })) : subdued('Nichts im Druck.'); + } + if (tab.value === 'versendet') { + const list = versendetAktiv(); + return list.length ? list.map((o) => orderCard(o)) : subdued('Nichts (kürzlich) versendet.'); + } + if (tab.value === 'archiv') { + const list = archivListe(); + return list.length ? list.map((o) => orderCard(o)) : subdued('Archiv leer.'); + } + const map = { kuvertierung: 'kuvertieren', versandfertig: 'versandfertig' }; + const st = map[tab.value]; + const list = ordersByStatus(st); + return list.length ? list.map((o) => orderCard(o, { badges: st === 'kuvertieren' })) : subdued('Leer.'); + } + + // ── Modale rendern ────────────────────────────────────────────────────── + function overlay(inhalt, close, breite) { + return h('div', { + onClick: (e) => { if (e.target === e.currentTarget) close(); }, + style: 'position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding:5vh 16px;overflow:auto;', + }, [h('div', { style: `background:var(--background-page,#fff);border:1px solid var(--border-subdued);border-radius:12px;width:${breite || '620px'};max-width:100%;box-shadow:0 20px 60px rgba(0,0,0,.35);` }, inhalt)]); + } + function modalKopf(titel, close) { + return h('div', { style: 'display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-subdued);' }, [ + h('div', { style: 'font-weight:700;font-size:16px;' }, titel), + btn('✕', close), + ]); + } + function feldGrid(sec, secKey) { + return h('div', { style: 'display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0;' }, PARAM_FELDER.map(([k, lbl]) => + h('div', { style: S_FELD + 'display:flex;flex-direction:column;' }, [ + h('label', { style: 'font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--foreground-subdued);margin-bottom:2px;' }, lbl), + h('input', { type: 'number', step: '0.01', value: sec[k], + style: 'border:none;background:transparent;color:var(--foreground-normal);font:inherit;font-size:15px;font-weight:600;width:100%;padding:0;outline:none;', + onInput: (e) => { druck[secKey][k] = parseFloat(e.target.value) || 0; } }), + ]))); + } + function druckSektion(secKey, titel, ikon, typ) { + const sec = druck[secKey]; if (!sec) return null; + const opts = templates.value.filter((t) => t.type === typ); + return h('div', { style: SECTION }, [ + h('div', { style: 'display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;' }, [ + h('label', { style: 'display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;' }, [ + h('input', { type: 'checkbox', checked: sec.enabled, onChange: (e) => { druck[secKey].enabled = e.target.checked; }, style: 'width:16px;height:16px;' }), + `${ikon} ${titel}`, + ]), + sec.done ? chip('✓ bereits gedruckt', 'var(--success-25,rgba(46,125,50,.15))') : null, + ]), + h('select', { style: S_SELECT + 'width:100%;margin-bottom:6px;', value: sec.tplId, onChange: (e) => druckTplWechsel(secKey, e.target.value) }, + opts.map((t) => h('option', { value: t.id, selected: String(sec.tplId) === String(t.id) }, t.name))), + feldGrid(sec, secKey), + h('div', { style: S_FELD + 'display:flex;flex-direction:column;gap:4px;' }, [ + h('label', { style: 'font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--foreground-subdued);' }, 'Zu druckende Nummern'), + h('input', { value: sec.numbers, placeholder: 'z. B. 1,4,8 oder 1-9 oder 1-3,5,8', + style: 'border:none;background:transparent;color:var(--foreground-normal);font:inherit;font-size:14px;width:100%;padding:0;outline:none;', + onInput: (e) => { druck[secKey].numbers = e.target.value; } }), + ]), + ]); + } + function druckModal() { + if (!druck.open) return null; + const busy = druck.machine != null && maschineBusy(druck.machine); + const body = h('div', { style: 'padding:18px 20px;' }, [ + h('div', { style: 'display:flex;flex-direction:column;gap:4px;margin-bottom:14px;' }, [ + h('label', { style: 'font-size:12px;color:var(--foreground-subdued);' }, 'Maschine'), + aktiveMaschinen.value.length + ? h('select', { style: S_SELECT + 'width:100%;', value: druck.machine, onChange: (e) => { druck.machine = e.target.value; if (maschineBusy(e.target.value)) druck.mode = 'queue'; } }, + aktiveMaschinen.value.map((m) => h('option', { value: m.id, selected: String(druck.machine) === String(m.id) }, `${m.name}${maschineBusy(m.id) ? ' (druckt)' : ''}`))) + : subdued('Keine aktive Maschine – bitte unter Einstellungen → Maschinen anlegen.'), + ]), + druckSektion('brief', 'Briefe', '📄', 'brief'), + druckSektion('umschlag', 'Kuverts', '✉', 'umschlag'), + h('div', { style: 'margin:12px 0 4px;' }, [ + segToggle(busy ? 'queue' : druck.mode, [ + { key: 'direct', label: '⚡ Direktdruck', disabled: busy }, + { key: 'queue', label: '⏳ Warteschlange' }, + ], (k) => { druck.mode = k; }), + busy ? subdued('Maschine druckt gerade → nur Warteschlange.', 'margin-top:6px;') : null, + ]), + druck.err ? h('div', { style: 'color:var(--danger,#c62828);font-size:13px;margin-top:8px;' }, druck.err) : null, + druck.msg ? subdued(druck.msg, 'margin-top:8px;') : null, + ]); + const foot = h('div', { style: 'display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--border-subdued);' }, [ + btn('Abbrechen', () => { druck.open = false; }), + btn('In Produktion geben', submitDruck, 'primary'), + ]); + return overlay([modalKopf(`Drucken · #${druck.order.order_number}`, () => { druck.open = false; }), body, foot], () => { druck.open = false; }, '640px'); + } + function musterModal() { + if (!manuell.open) return null; + const briefTpls = templates.value.filter((t) => t.type === 'brief'); + const body = h('div', { style: 'padding:18px 20px;display:flex;flex-direction:column;gap:12px;' }, [ + h('div', { style: 'display:flex;gap:16px;align-items:center;' }, [ + h('label', { style: 'display:flex;align-items:center;gap:6px;' }, [h('input', { type: 'radio', name: 'anrede', checked: manuell.form === 'sie', onChange: () => { manuell.form = 'sie'; musterAufloesen(); } }), 'Sie-Form']), + h('label', { style: 'display:flex;align-items:center;gap:6px;' }, [h('input', { type: 'radio', name: 'anrede', checked: manuell.form === 'du', onChange: () => { manuell.form = 'du'; musterAufloesen(); } }), 'Du-Form']), + subdued('Adresse aus der Anfrage übernommen · [[abschnitt]] bitte füllen'), + ]), + h('textarea', { style: S_INPUT + 'width:100%;min-height:200px;font-family:var(--family-monospace,monospace);', value: manuell.text, onInput: (e) => { manuell.text = e.target.value; } }), + h('div', { style: 'display:grid;grid-template-columns:repeat(4,1fr);gap:8px;' }, [ + h('div', {}, [h('label', { style: 'font-size:11px;color:var(--foreground-subdued);' }, 'Schrift'), + h('select', { style: S_SELECT + 'width:100%;', value: manuell.font, onChange: (e) => { manuell.font = e.target.value; } }, ['tilda', 'alva', 'ellie'].map((f) => h('option', { value: f, selected: manuell.font === f }, f)))]), + h('div', {}, [h('label', { style: 'font-size:11px;color:var(--foreground-subdued);' }, 'Format'), + h('select', { style: S_SELECT + 'width:100%;', value: manuell.format, onChange: (e) => { manuell.format = e.target.value; } }, + [['a4', 'A4'], ['a6_hoch', 'A6 hoch'], ['a6_quer', 'A6 quer']].map(([v, l]) => h('option', { value: v, selected: manuell.format === v }, l)))]), + h('div', {}, [h('label', { style: 'font-size:11px;color:var(--foreground-subdued);' }, 'Template'), + h('select', { style: S_SELECT + 'width:100%;', value: manuell.template, onChange: (e) => { manuell.template = e.target.value; } }, briefTpls.map((t) => h('option', { value: t.id, selected: String(manuell.template) === String(t.id) }, t.name)))]), + h('div', {}, [h('label', { style: 'font-size:11px;color:var(--foreground-subdued);' }, 'Maschine'), + h('select', { style: S_SELECT + 'width:100%;', value: manuell.machine, onChange: (e) => { manuell.machine = e.target.value; } }, aktiveMaschinen.value.map((m) => h('option', { value: m.id, selected: String(manuell.machine) === String(m.id) }, m.name)))]), + ]), + segToggle(manuell.mode, [ + { key: 'direct', label: '⚡ Direktdruck' }, + { key: 'queue', label: '⏳ Warteschlange' }, + ], (k) => { manuell.mode = k; }), + manuell.err ? h('div', { style: 'color:var(--danger,#c62828);font-size:13px;' }, manuell.err) : null, + manuell.msg ? subdued(manuell.msg) : null, + ]); + const foot = h('div', { style: 'display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--border-subdued);' }, [ + btn('Abbrechen', () => { manuell.open = false; }), + btn('Erzeugen & drucken', submitMuster, 'primary'), + ]); + return overlay([modalKopf(`Muster drucken · ${manuell.req?.name || ''}`, () => { manuell.open = false; }), body, foot], () => { manuell.open = false; }, '680px'); + } + function empfModal() { + if (!empf.open) return null; + const istOrder = empf.mode === 'order'; + // Linke Spalte (~70 %): Suche + klickbare Empfängerliste. + const liste = h('div', { style: `flex:1 1 66%;min-width:260px;` }, [ + h('input', { type: 'search', value: empf.suche, placeholder: 'Durchsuchen (Name, Straße, Ort, Platzhalter …)', style: S_INPUT + 'width:100%;margin-bottom:12px;', onInput: (e) => { empf.suche = e.target.value; } }), + empf.laden ? subdued('Wird geladen …') : empf.info ? subdued(empf.info) + : h('div', { style: 'display:flex;flex-direction:column;gap:6px;max-height:62vh;overflow:auto;' }, empfTreffer.value.length + ? empfTreffer.value.map((r) => h('div', { + onClick: istOrder ? () => previewEntry(r.nr, empf.rows.findIndex((x) => x.nr === r.nr)) : undefined, + style: 'display:flex;gap:12px;align-items:baseline;border:1px solid var(--border-subdued);border-radius:8px;padding:12px 14px;' + + `${istOrder ? 'cursor:pointer;' : ''}` + + (istOrder && empf.selected === r.nr ? `border-color:${ACCENT};background:rgba(30,80,165,.07);` : 'background:var(--background-page);'), + }, [ + h('span', { style: `min-width:40px;font-weight:700;color:${ACCENT};font-family:var(--family-monospace,monospace);` }, `#${r.nr}`), + h('div', { style: 'flex:1;' }, [h('div', {}, r.zeile || '—'), r.extra ? subdued(r.extra, 'margin-top:2px;') : null]), + ])) + : subdued('Keine Treffer.')), + ]); + // Rechte Spalte (~30 %): Vorschau; Klick aufs Bild → große Lightbox. + const vorschauBox = (titel, url) => h('div', { style: 'display:flex;flex-direction:column;gap:6px;' }, [ + h('div', { style: 'font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--foreground-subdued);' }, titel), + h('div', { + onClick: url ? () => { empf.lb = url; empf.lbTitel = titel; } : undefined, + style: 'border:1px solid var(--border-subdued);border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;min-height:150px;padding:8px;' + + (url ? 'cursor:zoom-in;' : ''), + }, url ? h('img', { src: url, style: 'max-width:100%;max-height:30vh;object-fit:contain;' }) : subdued('—')), + ]); + const vorschau = istOrder ? h('div', { style: 'flex:0 0 30%;min-width:220px;display:flex;flex-direction:column;gap:14px;' }, + empf.selected == null ? [subdued('Empfänger anklicken → Vorschau (Klick aufs Bild = groß).')] + : empf.pLoad ? [subdued('Vorschau wird geladen …')] + : [ + empf.perr ? h('div', { style: 'color:var(--danger,#c62828);font-size:13px;' }, empf.perr) : null, + vorschauBox('📄 Schriftstück', empf.pl), + vorschauBox('✉ Kuvert', empf.pe), + ]) : null; + const body = h('div', { style: 'padding:16px 20px;display:flex;gap:20px;flex-wrap:wrap;' }, [liste, vorschau]); + return overlay([modalKopf(empf.titel, () => { empf.open = false; }), body], () => { empf.open = false; }, istOrder ? '980px' : '620px'); + } + // Große Einzelvorschau (Lightbox) über dem Empfänger-Dialog. + function lightboxModal() { + if (!empf.lb) return null; + return h('div', { + onClick: () => { empf.lb = ''; }, + style: 'position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:1100;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4vh 4vw;gap:14px;cursor:zoom-out;', + }, [ + h('div', { style: 'color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.05em;' }, empf.lbTitel), + h('img', { src: empf.lb, style: 'max-width:100%;max-height:82vh;object-fit:contain;background:#fff;border-radius:8px;' }), + h('div', { style: 'color:rgba(255,255,255,.7);font-size:12px;' }, 'Klicken zum Schließen'), + ]); + } + + // ── Gesamt-Render ───────────────────────────────────────────────────── + // In
setLogoFehlt(true)} />}
+
+ );
+}
+
+/** Konto-Dropdown in der Kopfleiste: Name/Rolle + Abmelden (bzw. Anmelden). */
+function UserMenu() {
+ const navigate = useNavigate();
+ const angemeldet = !!loadSession();
+ const [offen, setOffen] = useState(false);
+ const [kunde, setKunde] = useState<{ name: string; email: string; rolle: string } | null>(null);
+
+ useEffect(() => {
+ if (!angemeldet) return;
+ fetchMyCustomer()
+ .then((c) => {
+ if (!c) return;
+ setKunde({
+ name: [c.first_name, c.last_name].filter(Boolean).join(' ') || c.email,
+ email: c.email,
+ rolle: c.person_type === 'unternehmen' ? 'Unternehmen' : 'Privatkunde',
+ });
+ })
+ .catch(() => { /* Anzeige ist unkritisch */ });
+ }, [angemeldet]);
+
+ if (!angemeldet) {
+ return (
+
+ Anmelden
+
+ );
+ }
+
+ return (
+
+
+
+ {offen && (
+ <>
+ ([]);
+ const [form, setForm] = useState({
+ product: '', name: '', email: '', phone: '',
+ street: '', zip: '', city: '', country: 'Deutschland',
+ });
+ const [datenschutz, setDatenschutz] = useState(false);
+ const [status, setStatus] = useState<'formular' | 'sendet' | 'fertig'>('formular');
+ const [fehler, setFehler] = useState([]);
+
+ useEffect(() => {
+ fetchProducts()
+ .then((ps) => setProdukte(ps.filter((p) => p.type === 'letter' || p.type === 'postcard')))
+ .catch(() => setProdukte([]));
+ if (loadSession()) {
+ fetchMyCustomer()
+ .then((c) => c && setForm((f) => ({
+ ...f,
+ name: [c.first_name, c.last_name].filter(Boolean).join(' ') || f.name,
+ email: c.email || f.email,
+ phone: c.phone || f.phone,
+ })))
+ .catch(() => { /* optional */ });
+ }
+ }, []);
+
+ const set = (k: keyof typeof form) => (e: React.ChangeEvent) => {
+ const roh = e.target.value;
+ setForm({ ...form, [k]: k === 'phone' ? roh.replace(/[^0-9+ ]/g, '') : k === 'zip' ? roh.replace(/[^0-9]/g, '') : roh });
+ };
+
+ async function absenden(e: React.FormEvent) {
+ e.preventDefault();
+ if (!istEmail(form.email)) { setFehler(['Bitte geben Sie eine gültige E-Mail-Adresse an.']); return; }
+ setFehler([]);
+ setStatus('sendet');
+ try {
+ await sendSampleRequest({
+ product: form.product,
+ name: form.name.trim(),
+ email: form.email.trim(),
+ phone: form.phone.trim() || undefined,
+ street: form.street.trim(),
+ zip: form.zip.trim(),
+ city: form.city.trim(),
+ country: form.country,
+ });
+ setStatus('fertig');
+ } catch (err) {
+ setFehler(err instanceof ApiError ? (err.details.length ? err.details : [err.message]) : ['Anfrage fehlgeschlagen.']);
+ setStatus('formular');
+ }
+ }
+
+ // Rahmen je nach Modus: Popup (Dialog) oder eigene Seite (sk-view).
+ const wrap = (titel: string, inhalt: React.ReactNode) =>
+ variant === 'page'
+ ?
+ : ;
+
+ if (status === 'fertig') {
+ return wrap('Muster ist unterwegs', (
+ <>
+ ([]);
+ const [offen, setOffen] = useState(false);
+ const [seenAt, setSeenAt] = useState(getSeenAt);
+
+ useEffect(() => {
+ fetchStatusEvents()
+ .then(setEvents)
+ .catch(() => {
+ /* Benachrichtigungen sind nicht kritisch */
+ });
+ }, []);
+
+ const ungelesen = events.filter((e) => new Date(e.timestamp).getTime() > seenAt).length;
+
+ function umschalten() {
+ const next = !offen;
+ setOffen(next);
+ if (next && ungelesen > 0) {
+ markNotificationsSeen();
+ setSeenAt(Date.now());
+ }
+ }
+
+ return (
+ <>
+
+
+ {offen && (
+
+
+ );
+}
+
+export default function AppShell({ children }: { children: React.ReactNode }) {
+ const [drawerOffen, setDrawerOffen] = useState(false);
+ const location = useLocation();
+ const { dialog, vorbelegung, close } = useDialogs();
+
+ // Beim Seitenwechsel das mobile Menü schließen.
+ useEffect(() => { setDrawerOffen(false); }, [location.pathname]);
+
+ return (
+
setOffen(false)} />
+
+ );
+}
+
+/** Schlichtes Overlay für Hilfe und Angebotsanfrage. */
+function Dialog({ title, onClose, children }: { title: string; onClose: () => void; children: React.ReactNode }) {
+ return (
+
+
+
+ )}
+
+
+
+ {kunde?.name}
+ {kunde?.email}
+ {kunde?.rolle}
+
+
+ );
+}
+
+function Hilfe({ onClose }: { onClose: () => void }) {
+ return (
+
+ );
+}
+
+function Angebot({ onClose, vorbelegung }: { onClose: () => void; vorbelegung?: string }) {
+ // vorbelegung = gewähltes Kontakt-Produkt; wird separat übermittelt, nicht im Text.
+ return (
+
+ );
+}
+
+/** Muster bestellen – kostenlos, mit Produktwahl und Lieferadresse.
+ * variant='page' rendert als eigene Seite (Direktlink /muster) statt als Popup. */
+export function Muster({ onClose = () => {}, variant = 'dialog' }: { onClose?: () => void; variant?: 'dialog' | 'page' }) {
+ const [produkte, setProdukte] = useState e.stopPropagation()}>
+
+
+
+ {children}
+ {title}
+ +{titel}
{inhalt}Vielen Dank – Ihr kostenloses Muster wird vorbereitet und verschickt.
+ + + )); + } + + const feld = (k: keyof typeof form, label: string, opt = false, type = 'text') => ( +
+
+
+
+ );
+
+ const gueltig = form.product && form.name.trim() && istEmail(form.email) && form.phone.trim()
+ && form.street.trim() && form.zip.trim() && form.city.trim() && datenschutz;
+
+ return wrap('Muster bestellen', (
+ <>
+ Wir schicken Ihnen kostenlos ein Handschrift-Muster zum Anfassen.
+ + + )); +} + +function Sidebar({ onNavigate }: { onNavigate?: () => void }) { + const { steps, current, goto } = useWizard(); + const location = useLocation(); + const { open } = useDialogs(); + const angemeldet = !!loadSession(); + + // Ablauf nur im Konfigurator zeigen (Start + Direktlinks /briefe, /postkarten) – + // nicht in Aufträgen/Stammdaten. + const zeigeAblauf = KONFIGURATOR_PFADE.includes(location.pathname) && steps.length > 0; + + const item = ({ isActive }: { isActive: boolean }) => `sk-nav-item${isActive ? ' sk-nav-item--active' : ''}`; + + return ( + + ); +} + +/** + * Benachrichtigungen speisen sich aus dem Statusverlauf der eigenen Aufträge – + * dafür braucht es keine eigene Collection. Als „gelesen" gilt alles, was älter + * ist als der zuletzt geöffnete Zeitpunkt (lokal gespeichert). + */ +function Notifications() { + const [events, setEvents] = useState
+ {events.length === 0 ? (
+
+ )}
+
+ );
+}
+
+function Topbar({ onMenu }: { onMenu: () => void }) {
+ const angemeldet = !!loadSession();
+ return (
+ Keine Benachrichtigungen.
+ ) : ( +-
+ {events.slice(0, 5).map((e) => (
+
-
+ + {e.order?.order_number ?? 'Auftrag'} · {STATUS_LABEL[e.status] ?? e.status} ++ {e.note &&{e.note}} ++ {new Intl.DateTimeFormat('de-DE', { dateStyle: 'short', timeStyle: 'short' }).format( + new Date(e.timestamp), + )} ++
+ ))}
+
+ {/* Menü-Umschalter nur auf schmalen Geräten sichtbar (CSS). */}
+
+
+
+
+ {angemeldet &&
+
+ setDrawerOffen(true)} />
+
+ ([]);
+
+ // Bei angemeldeten Kunden Name und E-Mail vorausfüllen.
+ useEffect(() => {
+ if (!loadSession()) return;
+ fetchMyCustomer()
+ .then((c) => {
+ if (!c) return;
+ setForm((f) => ({
+ ...f,
+ name: [c.first_name, c.last_name].filter(Boolean).join(' ') || f.name,
+ email: c.email || f.email,
+ phone: c.phone || f.phone,
+ }));
+ })
+ .catch(() => { /* Vorausfüllen ist optional */ });
+ }, []);
+
+ const set = (k: keyof typeof form) => (e: React.ChangeEvent) => {
+ const roh = e.target.value;
+ setForm({ ...form, [k]: k === 'phone' ? roh.replace(/[^0-9+ ]/g, '') : roh });
+ };
+
+ async function absenden(e: React.FormEvent) {
+ e.preventDefault();
+ if (!istEmail(form.email)) { setFehler(['Bitte geben Sie eine gültige E-Mail-Adresse an.']); return; }
+ if (!form.phone.trim()) { setFehler(['Bitte geben Sie eine Telefonnummer an.']); return; }
+ setFehler([]);
+ setStatus('sendet');
+ try {
+ await sendOfferRequest({
+ name: form.name.trim(),
+ email: form.email.trim(),
+ phone: form.phone.trim() || undefined,
+ quantity: form.quantity ? Number(form.quantity) : null,
+ message: form.message.trim(),
+ product: gewaehltesProdukt || undefined,
+ });
+ setStatus('fertig');
+ } catch (err) {
+ setFehler(err instanceof ApiError ? (err.details.length ? err.details : [err.message]) : ['Anfrage konnte nicht gesendet werden.']);
+ setStatus('formular');
+ }
+ }
+
+ if (status === 'fertig') {
+ return (
+ <>
+ (null);
+ // Die Zoom-Fläche wird auf den Inhaltsbereich begrenzt (unterhalb der
+ // Preiszeile, rechts der Seitenleiste), statt das ganze Fenster zu belegen.
+ const [zoomBox, setZoomBox] = useState({});
+
+ const gruppen = useMemo(() => gruppiere(docs), [docs]);
+
+ function messeBox(): React.CSSProperties {
+ if (typeof window === 'undefined' || window.innerWidth <= 900) return {};
+ const content = document.querySelector('.sk-content');
+ if (!content) return {};
+ const c = content.getBoundingClientRect();
+ const bar = document.querySelector('.sk-pricebar');
+ const top = Math.max(c.top, bar ? bar.getBoundingClientRect().bottom : c.top);
+ return {
+ top: `${top}px`, left: `${c.left}px`, width: `${c.width}px`,
+ height: `${Math.max(0, c.bottom - top)}px`, right: 'auto', bottom: 'auto',
+ };
+ }
+ function openZoom(svg: string) { setZoomBox(messeBox()); setZoomSvg(svg); }
+
+ // Nach einer neuen Generierung wieder vorn beginnen.
+ useEffect(() => { setIndex(0); }, [docs]);
+
+ // Vergrößerte Ansicht: Escape schließt, Resize misst die Fläche neu.
+ useEffect(() => {
+ if (!zoomSvg) return;
+ const zu = (e: KeyboardEvent) => e.key === 'Escape' && setZoomSvg(null);
+ const neu = () => setZoomBox(messeBox());
+ window.addEventListener('keydown', zu);
+ window.addEventListener('resize', neu);
+ return () => { window.removeEventListener('keydown', zu); window.removeEventListener('resize', neu); };
+ }, [zoomSvg]);
+
+ const aktuell = gruppen[index] ?? null;
+ const anzahl = gruppen.length || gesamtDokumente;
+
+ /** Ein einzelnes Dokument (Schriftstück oder Umschlag) mit Beschriftung. */
+ const DocBox = ({ label, svg }: { label: string; svg: string }) => (
+ openZoom(svg)}
+ role="button"
+ tabIndex={0}
+ title="Zum Vergrößern klicken"
+ onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') openZoom(svg); }}
+ >
+ {label}
+ {/* Das SVG stammt aus unserer eigenen Generierung, nicht aus Nutzereingaben. */}
+
+
+ );
+
+ return (
+
+ setDrawerOffen(false)} />
+
+ {drawerOffen && setDrawerOffen(false)} />}
+
+ {children}
+
+ {/* Dialoge zentral – von Seitenleiste und Konfigurator aus geöffnet. */}
+ {dialog === 'hilfe' &&
+ );
+}
diff --git a/Webseite/skrift-app/src/components/Icons.tsx b/Webseite/skrift-app/src/components/Icons.tsx
new file mode 100644
index 0000000..4c8f4f2
--- /dev/null
+++ b/Webseite/skrift-app/src/components/Icons.tsx
@@ -0,0 +1,111 @@
+/**
+ * Single-Line-Icons als Inline-SVG.
+ *
+ * Bewusst ohne Icon-Bibliothek: keine externe Anfrage (DSGVO), kein zusätzliches
+ * Bundle, und eine einheitliche Strichstärke über alle Symbole.
+ */
+
+type Props = { size?: number; className?: string };
+
+const base = (size: number) => ({
+ width: size,
+ height: size,
+ viewBox: '0 0 24 24',
+ fill: 'none',
+ stroke: 'currentColor',
+ strokeWidth: 1.5,
+ strokeLinecap: 'round' as const,
+ strokeLinejoin: 'round' as const,
+ 'aria-hidden': true,
+ focusable: false,
+});
+
+export const IconPen = ({ size = 18, className }: Props) => (
+
+);
+
+export const IconList = ({ size = 18, className }: Props) => (
+
+);
+
+export const IconUser = ({ size = 18, className }: Props) => (
+
+);
+
+export const IconBell = ({ size = 18, className }: Props) => (
+
+);
+
+export const IconHelp = ({ size = 18, className }: Props) => (
+
+);
+
+export const IconOffer = ({ size = 18, className }: Props) => (
+
+);
+
+export const IconCheck = ({ size = 18, className }: Props) => (
+
+);
+
+export const IconMail = ({ size = 18, className }: Props) => (
+
+);
+
+export const IconPhone = ({ size = 18, className }: Props) => (
+
+);
+
+export const IconClose = ({ size = 18, className }: Props) => (
+
+);
+
+export const IconBuilding = ({ size = 18, className }: Props) => (
+
+);
+
+export const IconMenu = ({ size = 18, className }: Props) => (
+
+);
+
+export const IconChevronDown = ({ size = 18, className }: Props) => (
+
+);
diff --git a/Webseite/skrift-app/src/components/OfferForm.tsx b/Webseite/skrift-app/src/components/OfferForm.tsx
new file mode 100644
index 0000000..b0460ed
--- /dev/null
+++ b/Webseite/skrift-app/src/components/OfferForm.tsx
@@ -0,0 +1,135 @@
+import { useEffect, useState } from 'react';
+import { ApiError, fetchMyCustomer, loadSession, sendOfferRequest } from '../lib/api';
+
+const istEmail = (e: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.trim());
+
+/**
+ * Anfrageformular „Individuelles Angebot".
+ *
+ * Wird an zwei Stellen genutzt: im Konfigurator als eigene Seite (nach der Wahl
+ * eines Anfrageprodukts) und in der Seitenleiste als Dialog. Deshalb rendert es
+ * nur den Inhalt – die Umrahmung (Karte bzw. Overlay) kommt von außen.
+ *
+ * `onClose` blendet im Dialog den Schließen-Button ein; inline (im Konfigurator)
+ * bleibt er weg.
+ */
+export default function OfferForm({ produkt, onClose }: { produkt?: string; onClose?: () => void }) {
+ const gewaehltesProdukt = produkt?.trim() || '';
+ const [form, setForm] = useState({ name: '', email: '', phone: '', quantity: '', message: '' });
+ const [datenschutz, setDatenschutz] = useState(false);
+ const [status, setStatus] = useState<'formular' | 'sendet' | 'fertig'>('formular');
+ const [fehler, setFehler] = useStateVielen Dank – wir melden uns werktags innerhalb eines Tages mit einem Angebot bei Ihnen.
+ {onClose && ( + + )} + + ); + } + + return ( + <> ++ Größere Mengen, Sonderformate, Unterschriftenservice oder automatisierte Follow-ups – schildern Sie + kurz Ihr Vorhaben. +
+ {gewaehltesProdukt && ( +
+
+ )}
+
+
+ );
+}
diff --git a/Webseite/skrift-app/src/components/PreviewPanel.tsx b/Webseite/skrift-app/src/components/PreviewPanel.tsx
new file mode 100644
index 0000000..d1e398a
--- /dev/null
+++ b/Webseite/skrift-app/src/components/PreviewPanel.tsx
@@ -0,0 +1,164 @@
+import { useEffect, useMemo, useState } from 'react';
+
+/**
+ * Live-Vorschau neben dem Formular.
+ *
+ * Die Vorschau ist absichtlich kontingentiert: Jede Generierung kostet einen
+ * Aufruf der Scriptalizer-API (Tageslimit). Der Zähler ist daher Teil der
+ * Bedienung und kein Beiwerk.
+ *
+ * Schriftstück und zugehöriger Umschlag gehören zusammen und werden gemeinsam
+ * gezeigt (Schriftstück oben, Umschlag unten). Die Pfeile blättern je Empfänger.
+ */
+
+export type PreviewDoc = { art: 'brief' | 'umschlag'; svg: string };
+
+/** Ein Empfänger-Dokument: Schriftstück + optional zugehöriger Umschlag. */
+type Gruppe = { brief?: PreviewDoc; umschlag?: PreviewDoc };
+
+type Props = {
+ titel: string;
+ format: string;
+ docs: PreviewDoc[];
+ gesamtDokumente: number;
+ verbleibend: number;
+ maximal: number;
+ laedt: boolean;
+ fehler: string | null;
+ onGenerate: () => void;
+ bereit: boolean;
+};
+
+/** Flache [brief, umschlag, brief, …]-Liste zu Empfänger-Gruppen bündeln. */
+function gruppiere(docs: PreviewDoc[]): Gruppe[] {
+ const gruppen: Gruppe[] = [];
+ for (const d of docs) {
+ if (d.art === 'umschlag') {
+ const letzte = gruppen[gruppen.length - 1];
+ if (letzte && letzte.brief && !letzte.umschlag) letzte.umschlag = d;
+ else gruppen.push({ umschlag: d });
+ } else {
+ gruppen.push({ brief: d });
+ }
+ }
+ return gruppen;
+}
+
+export default function PreviewPanel({
+ titel, format, docs, gesamtDokumente, verbleibend, maximal, laedt, fehler, onGenerate, bereit,
+}: Props) {
+ const [index, setIndex] = useState(0);
+ const [zoomSvg, setZoomSvg] = useStateIhre Anfrage betrifft
+ {gewaehltesProdukt}
+