Buchungskalender: Funktionsanfragen und Rechtliches-Karten

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

src/components/customer/CustomerFunktionen.jsx

@@ -2,7 +2,7 @@ import { Fragment, useCallback, useEffect, useRef, useState } from 'react'
 import { Link } from 'react-router-dom'
 import { Card, Badge, Button, EmptyState } from '../ui'
 import { copyText } from '../CopyableCredential'
-import { getFunktionen, setFeature, getTermineAnleitung, getShop, entscheideShopAnfrage } from '../../lib/teamApi'
+import { getFunktionen, setFeature, getTermineAnleitung, getShop, entscheideShopAnfrage, getUnterkunft, entscheideUnterkunftAnfrage } from '../../lib/teamApi'
 import {
   FUNKTIONEN, ZUSTAND, AKTION_LABEL, funktionOf, aktionen, mergeFunktion, siteKeyOf, abgeschaltetText,
   hindernisText, panelModell, anleitungOffen, textformNoetig, textformAnsicht, textformBereit, speicherStatus,
@@ -160,21 +160,18 @@ function TextformPanel({ funktion, feld, value, onChange, projectId, today, disa
   )
 }
 
-// Webshop je Projekt: Anfrage des Kunden (annehmen / ablehnen mit Begruendung), Stripe-Stand und Kennzahlen. Die Entscheidung geht ans Portal
-// (POST /shop/:customerId/anfrage); danach laden Funktionen und Shop neu (onDecided). Texte sind ausschliesslich React-Textknoten.
-function ShopPanel({ customerId, shop, onDecided }) {
+// Entscheidung ueber eine Anfrage (Webshop und Buchungskalender): Annehmen / Ablehnen mit Begruendung. Die Entscheidung geht ueber entscheide
+// ans Portal; danach laden Funktionen und Bereich neu (onDecided). Texte sind ausschliesslich React-Textknoten.
+function EntscheidungBlock({ projectId, anfrage, entscheide, onDecided }) {
   const [frage, setFrage] = useState(null) // null | 'annehmen' | 'ablehnen'
   const [begruendung, setBegruendung] = useState('')
   const [busy, setBusy] = useState(false)
   const [status, setStatus] = useState(null) // { ok, text }
-  const a = shop.anfrage
-  const [tone, label] = anfrageStatus(a?.status)
-  const stripe = shop.stripe || { accountId: false, status: null }
-  const entscheiden = async () => {
+  const run = async () => {
     setBusy(true)
     setStatus(null)
     try {
-      const antwort = await entscheideShopAnfrage(customerId, { projectId: shop.projectId, entscheidung: frage, begruendung })
+      const antwort = await entscheide({ projectId, entscheidung: frage, begruendung })
       setFrage(null)
       setBegruendung('')
       setStatus(entscheidungStatus(antwort))
@@ -189,32 +186,15 @@ function ShopPanel({ customerId, shop, onDecided }) {
   }
   const ablehnenFehlt = frage === 'ablehnen' && !begruendungOk(begruendung)
   return (
-    <div className="funktionen-shop">
-      <div className="funktionen-panel-head">
-        <strong>Webshop: {shop.projectName}</strong>
-        {a && <Badge tone={tone}>Anfrage: {label}</Badge>}
-        <Badge tone={shop.geoeffnet ? 'ok' : 'muted'}>{shop.geoeffnet ? 'Geöffnet' : 'Geschlossen'}</Badge>
-        <Badge tone={stripeTon(stripe.status, !!stripe.accountId)}>Stripe: {stripeText(stripe.status, !!stripe.accountId)}</Badge>
-      </div>
-      {a && (
-        <dl className="kv">
-          {anfrageZeilen(a.anfrage).map((z) => (
-            <Fragment key={z.label}><dt>{z.label}</dt><dd>{z.text}</dd></Fragment>
-          ))}
-          <dt>Eingegangen</dt><dd>{a.at ? fmtDateTime(a.at) : '–'}</dd>
-          {a.entschiedenAt && <><dt>Entschieden</dt><dd>{fmtDateTime(a.entschiedenAt)}</dd></>}
-          {a.begruendung && <><dt>Begründung</dt><dd>{a.begruendung}</dd></>}
-        </dl>
-      )}
-      <div className="muted small">Artikel: {shop.zahlen?.artikel ?? 0} · Offene Bestellungen: {shop.zahlen?.offeneBestellungen ?? 0}</div>
-      {a?.status === 'offen' && (
+    <>
+      {anfrage?.status === 'offen' && (
         frage ? (
           <div className="flex items-center gap-2 wrap">
             <span>{frage === 'annehmen' ? 'Anfrage annehmen? Der Kunde bekommt eine Mail.' : 'Anfrage ablehnen? Der Kunde bekommt die Begründung per Mail.'}</span>
             {frage === 'ablehnen' && (
               <textarea className="textarea funktionen-begruendung" required rows={3} maxLength={BEGRUENDUNG_MAX} placeholder="Begründung (Pflicht)" aria-label="Begründung (Pflicht)" value={begruendung} onChange={(e) => setBegruendung(e.target.value)} />
             )}
-            <Button type="button" variant="primary" onClick={entscheiden} disabled={busy || ablehnenFehlt}>{busy ? 'Speichert …' : 'Ja'}</Button>
+            <Button type="button" variant="primary" onClick={run} disabled={busy || ablehnenFehlt}>{busy ? 'Speichert …' : 'Ja'}</Button>
             <Button type="button" onClick={() => setFrage(null)} disabled={busy}>Abbrechen</Button>
           </div>
         ) : (
@@ -225,6 +205,61 @@ function ShopPanel({ customerId, shop, onDecided }) {
         )
       )}
       {status && <div className={`msg ${status.ok ? 'ok' : 'err'}`} role={status.ok ? undefined : 'alert'}>{status.text}</div>}
+    </>
+  )
+}
+
+// Zeilen der Anfrage samt Eingang, Entscheidung und Begruendung
+function AnfrageListe({ a, art }) {
+  return (
+    <dl className="kv">
+      {anfrageZeilen(a.anfrage, art).map((z) => (
+        <Fragment key={z.label}><dt>{z.label}</dt><dd>{z.text}</dd></Fragment>
+      ))}
+      <dt>Eingegangen</dt><dd>{a.at ? fmtDateTime(a.at) : '–'}</dd>
+      {a.entschiedenAt && <><dt>Entschieden</dt><dd>{fmtDateTime(a.entschiedenAt)}</dd></>}
+      {a.begruendung && <><dt>Begründung</dt><dd>{a.begruendung}</dd></>}
+    </dl>
+  )
+}
+
+// Webshop je Projekt: Anfrage des Kunden (annehmen / ablehnen mit Begruendung), Stripe-Stand und Kennzahlen. Die Entscheidung geht ans Portal
+// (POST /shop/:customerId/anfrage).
+function ShopPanel({ customerId, shop, onDecided }) {
+  const a = shop.anfrage
+  const [tone, label] = anfrageStatus(a?.status)
+  const stripe = shop.stripe || { accountId: false, status: null }
+  return (
+    <div className="funktionen-shop">
+      <div className="funktionen-panel-head">
+        <strong>Webshop: {shop.projectName}</strong>
+        {a && <Badge tone={tone}>Anfrage: {label}</Badge>}
+        <Badge tone={shop.geoeffnet ? 'ok' : 'muted'}>{shop.geoeffnet ? 'Geöffnet' : 'Geschlossen'}</Badge>
+        <Badge tone={stripeTon(stripe.status, !!stripe.accountId)}>Stripe: {stripeText(stripe.status, !!stripe.accountId)}</Badge>
+      </div>
+      {a && <AnfrageListe a={a} art="shop" />}
+      <div className="muted small">Artikel: {shop.zahlen?.artikel ?? 0} · Offene Bestellungen: {shop.zahlen?.offeneBestellungen ?? 0}</div>
+      <EntscheidungBlock projectId={shop.projectId} anfrage={a} entscheide={(body) => entscheideShopAnfrage(customerId, body)} onDecided={onDecided} />
+    </div>
+  )
+}
+
+// Buchungskalender je Projekt: Anfrage (annehmen / ablehnen mit Begruendung), Stripe-Stand, Zahl der Unterkuenfte und offene Buchungsanfragen
+// (Portal: GET /unterkunft/:customerId, POST /unterkunft/:customerId/anfrage).
+function UnterkunftPanel({ customerId, eintrag, onDecided }) {
+  const a = eintrag.anfrage
+  const [tone, label] = anfrageStatus(a?.status)
+  const stripe = eintrag.stripe || { accountId: false, status: null }
+  return (
+    <div className="funktionen-shop">
+      <div className="funktionen-panel-head">
+        <strong>Buchungskalender: {eintrag.name}</strong>
+        {a && <Badge tone={tone}>Anfrage: {label}</Badge>}
+        <Badge tone={stripeTon(stripe.status, !!stripe.accountId)}>Stripe: {stripeText(stripe.status, !!stripe.accountId)}</Badge>
+      </div>
+      {a && <AnfrageListe a={a} art="unterkunft" />}
+      <div className="muted small">Unterkünfte: {eintrag.unterkuenfte ?? 0} · Offene Buchungsanfragen: {eintrag.offeneAnfragen ?? 0}</div>
+      <EntscheidungBlock projectId={eintrag.projectId} anfrage={a} entscheide={(body) => entscheideUnterkunftAnfrage(customerId, body)} onDecided={onDecided} />
     </div>
   )
 }
@@ -243,6 +278,8 @@ export default function CustomerFunktionen({ customerId }) {
   const [panel, setPanel] = useState({}) // projectId -> true/false (Knopf "Anleitung"); ohne Eintrag entscheidet die Adresse (?anleitung=<projectId>)
   const [shop, setShop] = useState([]) // GET /shop/:customerId => projects; Fehler nur im Webshop-Bereich, nicht in der Tabelle
   const [shopFehler, setShopFehler] = useState(null)
+  const [unterkunft, setUnterkunft] = useState([]) // GET /unterkunft/:customerId => projects
+  const [unterkunftFehler, setUnterkunftFehler] = useState(null)
   const [panelReload, setPanelReload] = useState({}) // projectId -> Zaehler, nach jeder Aktion hochgezaehlt
 
   const load = useCallback(() => {
@@ -257,8 +294,14 @@ export default function CustomerFunktionen({ customerId }) {
       .then(({ projects: list }) => setShop(Array.isArray(list) ? list : []))
       .catch((err) => setShopFehler(err.message || 'Webshop-Daten konnten nicht geladen werden.'))
   }, [customerId])
-  useEffect(() => { load(); loadShop() }, [load, loadShop])
-  const nachEntscheidung = () => Promise.all([getFunktionen(customerId).then(({ projects: list, termine, shop: shopFeld }) => { setProjects(list || []); setFelder({ termine: termine || null, shop: shopFeld || null }) }), loadShop()])
+  const loadUnterkunft = useCallback(() => {
+    setUnterkunftFehler(null)
+    return getUnterkunft(customerId)
+      .then(({ projects: list }) => setUnterkunft(Array.isArray(list) ? list : []))
+      .catch((err) => setUnterkunftFehler(err.message || 'Daten des Buchungskalenders konnten nicht geladen werden.'))
+  }, [customerId])
+  useEffect(() => { load(); loadShop(); loadUnterkunft() }, [load, loadShop, loadUnterkunft])
+  const nachEntscheidung = () => Promise.all([getFunktionen(customerId).then(({ projects: list, termine, shop: shopFeld }) => { setProjects(list || []); setFelder({ termine: termine || null, shop: shopFeld || null }) }), loadShop(), loadUnterkunft()])
 
   const save = async () => {
     const { projectId, key, action } = confirm
@@ -285,6 +328,7 @@ export default function CustomerFunktionen({ customerId }) {
       setBusy(false)
       // Version und Hindernis der Anleitung haengen vom Zustand ab: Panel dieser Zeile neu laden
       if (key === 'shop') loadShop()
+      if (key === 'unterkunft') loadUnterkunft()
       if (key === 'termine') setPanelReload((r) => ({ ...r, [projectId]: (r[projectId] || 0) + 1 }))
     }
   }
@@ -300,6 +344,7 @@ export default function CustomerFunktionen({ customerId }) {
   if (!projects.length) return <EmptyState title="Keine Projekte für diesen Kunden." />
 
   const shopEintraege = shop.filter(shopHatEintrag)
+  const unterkunftEintraege = unterkunft.filter(shopHatEintrag)
   return (
     <Card title="Funktionen">
       <table className="table funktionen-table">
@@ -411,6 +456,10 @@ export default function CustomerFunktionen({ customerId }) {
       {shopEintraege.map((s) => (
         <ShopPanel key={s.projectId} customerId={customerId} shop={s} onDecided={nachEntscheidung} />
       ))}
+      {unterkunftFehler && <div className="msg err funktionen-msg" role="alert">{unterkunftFehler}</div>}
+      {unterkunftEintraege.map((u) => (
+        <UnterkunftPanel key={u.projectId} customerId={customerId} eintrag={u} onDecided={nachEntscheidung} />
+      ))}
     </Card>
   )
 }