Funktionen-Reiter: News und Terminplaner je Projekt

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

src/components/customer/CustomerFunktionen.jsx

@@ -1,27 +1,18 @@
-import { useCallback, useEffect, useState } from 'react'
+import { Fragment, useCallback, useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
 import { FaSpinner } from 'react-icons/fa6'
 import { Card, Badge, Button, EmptyState } from '../ui'
-import { getFunktionen, setNewsFeature } from '../../lib/teamApi'
+import { getFunktionen, setFeature } from '../../lib/teamApi'
+import { FUNKTIONEN, ZUSTAND, funktionOf, aktionen, mergeFunktion } from '../../lib/funktionenView'
 import '../../styles/admin-areas.css'
 
-// Reiter "Funktionen": News-Pinnwand je Projekt an/aus wie im frueheren Admin-Panel (Kundenliste, Zeile "Funktionen")
-const STATE = {
-  off: ['muted', 'Aus'],
-  ordered: ['warn', 'Bestellt'],
-  setup: ['info', 'Einrichtung'],
-  active: ['ok', 'Aktiv'],
-  disabled: ['muted', 'Abgeschaltet'],
-}
-const CONFIRM = {
-  activate: 'News ohne Zahlung aktivieren?',
-  disable: 'News abschalten? Die Website zeigt dann keine Beiträge mehr.',
-}
+// Reiter "Funktionen": News-Pinnwand und Terminplaner je Projekt an/aus wie im frueheren Admin-Panel (Kundenliste, Zeile "Funktionen")
 const short = (text) => (text.length > 60 ? `${text.slice(0, 60)}…` : text)
 
 export default function CustomerFunktionen({ customerId }) {
   const [projects, setProjects] = useState(null)
   const [error, setError] = useState(null)
-  const [confirm, setConfirm] = useState(null) // { projectId, action }
+  const [confirm, setConfirm] = useState(null) // { projectId, key, action }
   const [note, setNote] = useState('')
   const [busy, setBusy] = useState(false)
   const [status, setStatus] = useState(null) // { ok, text }
@@ -38,9 +29,10 @@ export default function CustomerFunktionen({ customerId }) {
     setBusy(true)
     setStatus(null)
     try {
-      const { projects: changed } = await setNewsFeature(customerId, { projectId: confirm.projectId, action: confirm.action, note: note.trim() })
+      const { projects: changed } = await setFeature(customerId, confirm.key, { projectId: confirm.projectId, action: confirm.action, note: note.trim() })
+      // Die Antwort enthaelt das ganze Projekt; uebernommen wird nur die geaenderte Funktion
       const updated = changed?.[0]
-      if (updated) setProjects((list) => list.map((p) => (p.projectId === updated.projectId ? updated : p)))
+      if (updated) setProjects((list) => mergeFunktion(list, updated.projectId, confirm.key, updated))
       setConfirm(null)
       setNote('')
       setStatus({ ok: true, text: 'Gespeichert.' })
@@ -52,6 +44,8 @@ export default function CustomerFunktionen({ customerId }) {
     }
   }
 
+  const ask = (projectId, key, action) => { setNote(''); setConfirm({ projectId, key, action }) }
+
   if (error) return <Card><div className="area-error">{error}</div></Card>
   if (!projects) return <Card><FaSpinner className="spinner" /></Card>
   if (!projects.length) return <Card><EmptyState title="Keine Projekte für diesen Kunden." /></Card>
@@ -59,44 +53,52 @@ export default function CustomerFunktionen({ customerId }) {
   return (
     <Card title="Funktionen" pad={false}>
       <div className="area-rows">
-        <div className="area-row funktionen-row head"><span>Projekt</span><span>News</span><span>Ticket</span><span>Aktionen</span></div>
-        {projects.map((p) => {
-          const news = p.features?.news || { state: 'off' }
-          const [tone, label] = STATE[news.state] || ['muted', news.state]
-          const isConfirming = confirm?.projectId === p.projectId
+        <div className="area-row funktionen-row head"><span>Projekt</span><span>Funktion</span><span>Status</span><span>Ticket</span><span>Aktionen</span></div>
+        {projects.flatMap((p) => FUNKTIONEN.map((f, index) => {
+          const feature = funktionOf(p, f.key)
+          const [tone, label] = ZUSTAND[feature.state] || ['muted', feature.state]
+          const isConfirming = confirm?.projectId === p.projectId && confirm?.key === f.key
           return (
-            <div key={p.projectId} className="area-row funktionen-row">
-              <span>
-                <strong>{p.projectName}</strong>
-                {p.liveUrl && <><br /><a href={p.liveUrl} target="_blank" rel="noreferrer" className="area-muted">{p.liveUrl.replace(/^https?:\/\//, '')}</a></>}
-              </span>
+            <div key={`${p.projectId}:${f.key}`} className="area-row funktionen-row">
+              {index === 0 ? (
+                <span>
+                  <strong>{p.projectName}</strong>
+                  {p.liveUrl && <><br /><a href={p.liveUrl} target="_blank" rel="noreferrer" className="area-muted">{p.liveUrl.replace(/^https?:\/\//, '')}</a></>}
+                </span>
+              ) : (
+                <span className="funktionen-leer" />
+              )}
+              <span>{f.label}</span>
               <span>
                 <Badge tone={tone}>{label}</Badge>
-                {news.adminNote && <><br /><span className="area-muted" title={news.adminNote}>{short(news.adminNote)}</span></>}
+                {feature.adminNote && <><br /><span className="area-muted" title={feature.adminNote}>{short(feature.adminNote)}</span></>}
+              </span>
+              <span>
+                {feature.ticketMissing
+                  ? <Badge tone="danger">Ticket fehlt</Badge>
+                  : feature.ticketWoid
+                    ? <Link to={`/tickets?woid=${encodeURIComponent(feature.ticketWoid)}`}>#{feature.ticketWoid}</Link>
+                    : '–'}
               </span>
-              <span>{news.ticketMissing ? <Badge tone="danger">Ticket fehlt</Badge> : news.ticketWoid ? `#${news.ticketWoid}` : '–'}</span>
               <span className="area-inline">
                 {isConfirming ? (
-                  <>
-                    <span>{CONFIRM[confirm.action]}</span>
+                  <Fragment>
+                    <span>{f.bestaetigen[confirm.action]}</span>
                     <input className="form-control" placeholder="Notiz (optional)" maxLength={120} value={note} onChange={(e) => setNote(e.target.value)} style={{ maxWidth: 220 }} />
                     <Button size="sm" variant="primary" onClick={save} disabled={busy}>{busy ? <FaSpinner className="spinner" /> : 'Ja'}</Button>
                     <Button size="sm" variant="ghost" onClick={() => setConfirm(null)} disabled={busy}>Abbrechen</Button>
-                  </>
+                  </Fragment>
                 ) : (
-                  <>
-                    {news.state !== 'active' && (
-                      <Button size="sm" variant="ghost" onClick={() => { setNote(''); setConfirm({ projectId: p.projectId, action: 'activate' }) }}>Aktivieren (ohne Zahlung)</Button>
-                    )}
-                    {['ordered', 'setup', 'active'].includes(news.state) && (
-                      <Button size="sm" variant="ghost" onClick={() => { setNote(''); setConfirm({ projectId: p.projectId, action: 'disable' }) }}>Abschalten</Button>
-                    )}
-                  </>
+                  aktionen(feature.state).map((action) => (
+                    <Button key={action} size="sm" variant="ghost" onClick={() => ask(p.projectId, f.key, action)}>
+                      {action === 'activate' ? 'Aktivieren (ohne Zahlung)' : 'Abschalten'}
+                    </Button>
+                  ))
                 )}
               </span>
             </div>
           )
-        })}
+        }))}
       </div>
       {status && <div className={status.ok ? 'area-message' : 'area-error'} style={{ margin: 12 }}>{status.text}</div>}
     </Card>