630 lines
24 KiB
React
630 lines
24 KiB
React
|
import { useCallback, useEffect, useState } from 'react'
|
|||
|
|
import { Link } from 'react-router-dom'
|
|||
|
|
import { Download, FileText, Plus, Save, Trash2 } from 'lucide-react'
|
|||
|
|
import { api, formatFastApiDetail } from '../utils/api'
|
|||
|
|
import { useAuth } from '../context/AuthContext'
|
|||
|
|
import { useProfile } from '../context/ProfileContext'
|
|||
|
|
import UsageBadge from '../components/UsageBadge'
|
|||
|
|
import BodyHistoryVizConfigEditor from '../widgetSystem/BodyHistoryVizConfigEditor'
|
|||
|
|
import NutritionHistoryVizConfigEditor from '../widgetSystem/NutritionHistoryVizConfigEditor'
|
|||
|
|
import FitnessHistoryVizConfigEditor from '../widgetSystem/FitnessHistoryVizConfigEditor'
|
|||
|
|
import RecoveryHistoryVizConfigEditor from '../widgetSystem/RecoveryHistoryVizConfigEditor'
|
|||
|
|
import HistoryOverviewVizConfigEditor from '../widgetSystem/HistoryOverviewVizConfigEditor'
|
|||
|
|
import {
|
|||
|
|
BODY_CHART_DAYS_DEFAULT,
|
|||
|
|
BODY_CHART_DAYS_MAX,
|
|||
|
|
BODY_CHART_DAYS_MIN,
|
|||
|
|
normalizeBodyChartDays,
|
|||
|
|
} from '../widgetSystem/bodyChartDays'
|
|||
|
|
|
|||
|
|
const VIZ_BUNDLES_FALLBACK = [
|
|||
|
|
{ id: 'body_history_viz', title: 'Körper (Verlauf-Bundle)' },
|
|||
|
|
{ id: 'nutrition_history_viz', title: 'Ernährung (Verlauf-Bundle)' },
|
|||
|
|
{ id: 'fitness_history_viz', title: 'Fitness (Verlauf-Bundle)' },
|
|||
|
|
{ id: 'recovery_history_viz', title: 'Erholung (Verlauf-Bundle)' },
|
|||
|
|
{ id: 'history_overview_viz', title: 'Gesamtübersicht (Korrelationen)' },
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
export default function ReportConfigurePage() {
|
|||
|
|
const { canExport } = useAuth()
|
|||
|
|
const { activeProfile } = useProfile()
|
|||
|
|
const [exportUsage, setExportUsage] = useState(null)
|
|||
|
|
const [catalog, setCatalog] = useState(null)
|
|||
|
|
const [definitions, setDefinitions] = useState([])
|
|||
|
|
const [selectedId, setSelectedId] = useState(null)
|
|||
|
|
const [busy, setBusy] = useState(false)
|
|||
|
|
const [msg, setMsg] = useState(null)
|
|||
|
|
const [err, setErr] = useState(null)
|
|||
|
|
|
|||
|
|
const chartDaysMin = catalog?.chart_days?.min ?? BODY_CHART_DAYS_MIN
|
|||
|
|
const chartDaysMax = catalog?.chart_days?.max ?? BODY_CHART_DAYS_MAX
|
|||
|
|
const vizBundles = catalog?.viz_bundles?.length ? catalog.viz_bundles : VIZ_BUNDLES_FALLBACK
|
|||
|
|
|
|||
|
|
const selected = definitions.find((d) => d.id === selectedId) || null
|
|||
|
|
|
|||
|
|
const load = useCallback(async () => {
|
|||
|
|
setErr(null)
|
|||
|
|
try {
|
|||
|
|
const [cat, bundle] = await Promise.all([api.getReportsCatalog(), api.listReportDefinitions()])
|
|||
|
|
setCatalog(cat)
|
|||
|
|
setDefinitions(bundle.definitions || [])
|
|||
|
|
} catch (e) {
|
|||
|
|
setErr(formatFastApiDetail(null, e.message))
|
|||
|
|
}
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
api.getFeatureUsage().then((features) => {
|
|||
|
|
const exportFeature = features.find((f) => f.feature_id === 'data_export')
|
|||
|
|
setExportUsage(exportFeature)
|
|||
|
|
}).catch(() => {})
|
|||
|
|
}, [])
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!activeProfile?.id) return
|
|||
|
|
load()
|
|||
|
|
}, [activeProfile?.id, load])
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!definitions.length) {
|
|||
|
|
setSelectedId(null)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (!selectedId || !definitions.some((d) => d.id === selectedId)) {
|
|||
|
|
setSelectedId(definitions[0].id)
|
|||
|
|
}
|
|||
|
|
}, [definitions, selectedId])
|
|||
|
|
|
|||
|
|
const patchSelectedPayload = useCallback((fn) => {
|
|||
|
|
setDefinitions((defs) =>
|
|||
|
|
defs.map((d) => {
|
|||
|
|
if (d.id !== selectedId) return d
|
|||
|
|
const nextPayload = fn(d.payload || { version: 1, document_title: '', blocks: [] })
|
|||
|
|
return { ...d, payload: nextPayload }
|
|||
|
|
}),
|
|||
|
|
)
|
|||
|
|
}, [selectedId])
|
|||
|
|
|
|||
|
|
const reportNewBlock = (kind) => {
|
|||
|
|
const charts = catalog?.charts || []
|
|||
|
|
const first = charts[0]
|
|||
|
|
const firstBundleId = vizBundles[0]?.id || 'body_history_viz'
|
|||
|
|
if (kind === 'section') return { type: 'section', title: 'Neue Überschrift' }
|
|||
|
|
if (kind === 'viz_bundle') return { type: 'viz_bundle', bundle_id: firstBundleId, config: {} }
|
|||
|
|
if (kind === 'chart')
|
|||
|
|
return {
|
|||
|
|
type: 'chart',
|
|||
|
|
chart_id: first?.id || 'weight_trend',
|
|||
|
|
window_days: first?.default_window_days || 28,
|
|||
|
|
}
|
|||
|
|
return { type: 'ai_insight', title: '', insight_id: null }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleCreateDefinition = async () => {
|
|||
|
|
setBusy(true)
|
|||
|
|
setErr(null)
|
|||
|
|
setMsg(null)
|
|||
|
|
try {
|
|||
|
|
const r = await api.createReportDefinition({
|
|||
|
|
name: `Bericht ${definitions.length + 1}`,
|
|||
|
|
})
|
|||
|
|
const d = r.definition
|
|||
|
|
setDefinitions((x) => [...x, d])
|
|||
|
|
setSelectedId(d.id)
|
|||
|
|
setMsg('Neuer Bericht angelegt. Inhalt speichern nicht vergessen, wenn du Änderungen machst.')
|
|||
|
|
} catch (e) {
|
|||
|
|
setErr(formatFastApiDetail(null, e.message))
|
|||
|
|
} finally {
|
|||
|
|
setBusy(false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleSave = async () => {
|
|||
|
|
if (!selected) return
|
|||
|
|
if (!selected.payload?.blocks?.length) {
|
|||
|
|
setErr('Mindestens ein Block erforderlich.')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
setBusy(true)
|
|||
|
|
setErr(null)
|
|||
|
|
setMsg(null)
|
|||
|
|
try {
|
|||
|
|
await api.updateReportDefinition(selected.id, {
|
|||
|
|
name: selected.name?.trim() || 'Bericht',
|
|||
|
|
payload: selected.payload,
|
|||
|
|
})
|
|||
|
|
setMsg('Gespeichert.')
|
|||
|
|
await load()
|
|||
|
|
} catch (e) {
|
|||
|
|
setErr(formatFastApiDetail(null, e.message))
|
|||
|
|
} finally {
|
|||
|
|
setBusy(false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleDeleteDefinition = async () => {
|
|||
|
|
if (!selected) return
|
|||
|
|
if (!confirm(`Bericht „${selected.name}“ wirklich löschen?`)) return
|
|||
|
|
setBusy(true)
|
|||
|
|
setErr(null)
|
|||
|
|
setMsg(null)
|
|||
|
|
try {
|
|||
|
|
await api.deleteReportDefinition(selected.id)
|
|||
|
|
setDefinitions((defs) => defs.filter((d) => d.id !== selected.id))
|
|||
|
|
setSelectedId(null)
|
|||
|
|
setMsg('Bericht gelöscht.')
|
|||
|
|
} catch (e) {
|
|||
|
|
setErr(formatFastApiDetail(null, e.message))
|
|||
|
|
} finally {
|
|||
|
|
setBusy(false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const handleGeneratePdf = async () => {
|
|||
|
|
if (!selected) return
|
|||
|
|
setBusy(true)
|
|||
|
|
setErr(null)
|
|||
|
|
setMsg(null)
|
|||
|
|
try {
|
|||
|
|
await api.generateStructuredReportPdf(selected.id)
|
|||
|
|
setMsg('PDF wurde heruntergeladen.')
|
|||
|
|
} catch (e) {
|
|||
|
|
setErr(formatFastApiDetail(null, e.message))
|
|||
|
|
} finally {
|
|||
|
|
setBusy(false)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const setSelectedName = (name) => {
|
|||
|
|
setDefinitions((defs) => defs.map((d) => (d.id === selectedId ? { ...d, name } : d)))
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const vizBundleChartDays = (config) =>
|
|||
|
|
normalizeBodyChartDays(config?.chart_days ?? BODY_CHART_DAYS_DEFAULT)
|
|||
|
|
|
|||
|
|
if (!catalog) {
|
|||
|
|
return (
|
|||
|
|
<div className="card section-gap">
|
|||
|
|
<p style={{ color: 'var(--text2)' }}>Lade Katalog…</p>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<div className="card section-gap">
|
|||
|
|
<div className="card-title" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
|||
|
|
<FileText size={18} color="var(--accent)" />
|
|||
|
|
PDF-Berichte
|
|||
|
|
</div>
|
|||
|
|
<p style={{ fontSize: 13, color: 'var(--text2)', marginBottom: 12, lineHeight: 1.65 }}>
|
|||
|
|
Hier legst du <strong>einen oder mehrere strukturierte PDF-Berichte</strong> an. Pro Block vom Typ
|
|||
|
|
„Verlauf-Bundle“ gilt ein <strong>Zeitraum in Tagen</strong> (wie bei der Übersicht).{' '}
|
|||
|
|
<strong>Technisch:</strong> Es sind dieselben{' '}
|
|||
|
|
<strong>Daten-Bundles und dieselbe Konfiguration</strong> wie bei den Verlauf-Widgets — im PDF werden
|
|||
|
|
sie serverseitig gerendert (nicht die React-Komponenten der Startseite).
|
|||
|
|
</p>
|
|||
|
|
{!canExport && (
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
padding: '10px 12px',
|
|||
|
|
background: '#FCEBEB',
|
|||
|
|
borderRadius: 8,
|
|||
|
|
fontSize: 13,
|
|||
|
|
color: '#D85A30',
|
|||
|
|
marginBottom: 12,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
PDF ist mit dem Kontingent „Datenexport“ verknüpft. Bitte Admin kontaktieren.
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{err && (
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
padding: '10px 12px',
|
|||
|
|
borderRadius: 8,
|
|||
|
|
fontSize: 13,
|
|||
|
|
marginBottom: 12,
|
|||
|
|
background: '#FCEBEB',
|
|||
|
|
color: '#D85A30',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{err}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{msg && (
|
|||
|
|
<div
|
|||
|
|
style={{
|
|||
|
|
padding: '10px 12px',
|
|||
|
|
borderRadius: 8,
|
|||
|
|
fontSize: 13,
|
|||
|
|
marginBottom: 12,
|
|||
|
|
background: '#E1F5EE',
|
|||
|
|
color: 'var(--accent)',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{msg}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center', marginBottom: 14 }}>
|
|||
|
|
{definitions.map((d) => (
|
|||
|
|
<button
|
|||
|
|
key={d.id}
|
|||
|
|
type="button"
|
|||
|
|
className={d.id === selectedId ? 'btn btn-primary' : 'btn btn-secondary'}
|
|||
|
|
onClick={() => setSelectedId(d.id)}
|
|||
|
|
>
|
|||
|
|
{d.name || 'Bericht'}
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className="btn btn-secondary"
|
|||
|
|
disabled={busy || !canExport || definitions.length >= 20}
|
|||
|
|
onClick={handleCreateDefinition}
|
|||
|
|
style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}
|
|||
|
|
>
|
|||
|
|
<Plus size={16} />
|
|||
|
|
Neuer Bericht
|
|||
|
|
</button>
|
|||
|
|
<Link to="/settings" className="btn btn-secondary" style={{ textDecoration: 'none' }}>
|
|||
|
|
← Allgemein
|
|||
|
|
</Link>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{canExport && !definitions.length && (
|
|||
|
|
<p style={{ fontSize: 14, marginBottom: 12 }}>
|
|||
|
|
Noch kein Bericht vorhanden. Lege mit „Neuer Bericht“ einen Standard an.
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{canExport && selected && (
|
|||
|
|
<>
|
|||
|
|
<label className="form-label" style={{ fontSize: 12, display: 'block', marginBottom: 4 }}>
|
|||
|
|
Name des Berichts (intern)
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
className="form-input"
|
|||
|
|
maxLength={120}
|
|||
|
|
value={selected.name || ''}
|
|||
|
|
onChange={(e) => setSelectedName(e.target.value)}
|
|||
|
|
style={{ marginBottom: 14, maxWidth: 420 }}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<label className="form-label" style={{ fontSize: 12, display: 'block', marginBottom: 4 }}>
|
|||
|
|
Dokumenttitel im PDF (optional)
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
className="form-input"
|
|||
|
|
maxLength={120}
|
|||
|
|
placeholder="Leer = Profilname + „Bericht“"
|
|||
|
|
value={selected.payload?.document_title || ''}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
patchSelectedPayload((p) => ({
|
|||
|
|
...p,
|
|||
|
|
document_title: e.target.value,
|
|||
|
|
}))
|
|||
|
|
}
|
|||
|
|
style={{ marginBottom: 14 }}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text2)', marginBottom: 8 }}>Blöcke</div>
|
|||
|
|
<ul style={{ listStyle: 'none', padding: 0, margin: '0 0 12px' }}>
|
|||
|
|
{(selected.payload?.blocks || []).map((b, idx) => (
|
|||
|
|
<li
|
|||
|
|
key={idx}
|
|||
|
|
style={{
|
|||
|
|
border: '1px solid var(--border)',
|
|||
|
|
borderRadius: 10,
|
|||
|
|
padding: 12,
|
|||
|
|
marginBottom: 10,
|
|||
|
|
background: 'var(--surface2)',
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
|
|||
|
|
<span style={{ fontSize: 11, color: 'var(--text3)', textTransform: 'uppercase' }}>{b.type}</span>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className="btn btn-secondary"
|
|||
|
|
style={{ padding: '4px 8px' }}
|
|||
|
|
aria-label="Block entfernen"
|
|||
|
|
onClick={() =>
|
|||
|
|
patchSelectedPayload((p) => ({
|
|||
|
|
...p,
|
|||
|
|
blocks: (p.blocks || []).filter((_, j) => j !== idx),
|
|||
|
|
}))
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
<Trash2 size={16} />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
{b.type === 'section' && (
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
className="form-input"
|
|||
|
|
style={{ marginTop: 8 }}
|
|||
|
|
value={b.title || ''}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
patchSelectedPayload((p) => ({
|
|||
|
|
...p,
|
|||
|
|
blocks: (p.blocks || []).map((x, j) =>
|
|||
|
|
j === idx ? { ...x, title: e.target.value } : x,
|
|||
|
|
),
|
|||
|
|
}))
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
{b.type === 'chart' && (
|
|||
|
|
<div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 8 }}>
|
|||
|
|
<select
|
|||
|
|
className="form-input"
|
|||
|
|
value={b.chart_id}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
patchSelectedPayload((p) => ({
|
|||
|
|
...p,
|
|||
|
|
blocks: (p.blocks || []).map((x, j) =>
|
|||
|
|
j === idx ? { ...x, chart_id: e.target.value } : x,
|
|||
|
|
),
|
|||
|
|
}))
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
{catalog.charts?.map((c) => (
|
|||
|
|
<option key={c.id} value={c.id}>
|
|||
|
|
{c.title}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
<div>
|
|||
|
|
<label style={{ fontSize: 11, color: 'var(--text3)' }}>Zeitraum (Tage)</label>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
className="form-input"
|
|||
|
|
min={7}
|
|||
|
|
max={365}
|
|||
|
|
value={b.window_days}
|
|||
|
|
onChange={(e) => {
|
|||
|
|
const n = Number(e.target.value)
|
|||
|
|
patchSelectedPayload((p) => ({
|
|||
|
|
...p,
|
|||
|
|
blocks: (p.blocks || []).map((x, j) =>
|
|||
|
|
j === idx
|
|||
|
|
? { ...x, window_days: Number.isFinite(n) ? n : x.window_days }
|
|||
|
|
: x,
|
|||
|
|
),
|
|||
|
|
}))
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{b.type === 'ai_insight' && (
|
|||
|
|
<div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 8 }}>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
className="form-input"
|
|||
|
|
placeholder="Optional: Überschrift"
|
|||
|
|
value={b.title || ''}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
patchSelectedPayload((p) => ({
|
|||
|
|
...p,
|
|||
|
|
blocks: (p.blocks || []).map((x, j) =>
|
|||
|
|
j === idx ? { ...x, title: e.target.value } : x,
|
|||
|
|
),
|
|||
|
|
}))
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
className="form-input"
|
|||
|
|
placeholder="Optional: Insight-UUID"
|
|||
|
|
value={b.insight_id || ''}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
patchSelectedPayload((p) => {
|
|||
|
|
const v = e.target.value.trim() || null
|
|||
|
|
return {
|
|||
|
|
...p,
|
|||
|
|
blocks: (p.blocks || []).map((x, j) =>
|
|||
|
|
j === idx ? { ...x, insight_id: v } : x,
|
|||
|
|
),
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
{b.type === 'viz_bundle' && (
|
|||
|
|
<div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 10 }}>
|
|||
|
|
<div>
|
|||
|
|
<label style={{ fontSize: 11, color: 'var(--text3)', display: 'block', marginBottom: 4 }}>
|
|||
|
|
Verlauf-Bundle
|
|||
|
|
</label>
|
|||
|
|
<select
|
|||
|
|
className="form-input"
|
|||
|
|
value={b.bundle_id}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
patchSelectedPayload((p) => ({
|
|||
|
|
...p,
|
|||
|
|
blocks: (p.blocks || []).map((x, j) =>
|
|||
|
|
j === idx ? { ...x, bundle_id: e.target.value, config: {} } : x,
|
|||
|
|
),
|
|||
|
|
}))
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
{vizBundles.map((vb) => (
|
|||
|
|
<option key={vb.id} value={vb.id}>
|
|||
|
|
{vb.title}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label style={{ fontSize: 11, color: 'var(--text3)', display: 'block', marginBottom: 4 }}>
|
|||
|
|
Zeitraum für dieses Bundle (Tage): {chartDaysMin}–{chartDaysMax}
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
className="form-input"
|
|||
|
|
style={{ maxWidth: 160 }}
|
|||
|
|
min={chartDaysMin}
|
|||
|
|
max={chartDaysMax}
|
|||
|
|
value={vizBundleChartDays(b.config)}
|
|||
|
|
onChange={(e) => {
|
|||
|
|
const days = normalizeBodyChartDays(e.target.value)
|
|||
|
|
patchSelectedPayload((p) => ({
|
|||
|
|
...p,
|
|||
|
|
blocks: (p.blocks || []).map((x, j) =>
|
|||
|
|
j === idx ? { ...x, config: { ...x.config, chart_days: days } } : x,
|
|||
|
|
),
|
|||
|
|
}))
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
{b.bundle_id === 'body_history_viz' && (
|
|||
|
|
<BodyHistoryVizConfigEditor
|
|||
|
|
config={b.config || {}}
|
|||
|
|
onChange={(next) =>
|
|||
|
|
patchSelectedPayload((p) => ({
|
|||
|
|
...p,
|
|||
|
|
blocks: (p.blocks || []).map((x, j) => {
|
|||
|
|
if (j !== idx) return x
|
|||
|
|
if (Object.keys(next).length === 0) return { ...x, config: {} }
|
|||
|
|
return { ...x, config: { ...(x.config || {}), ...next } }
|
|||
|
|
}),
|
|||
|
|
}))
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
{b.bundle_id === 'nutrition_history_viz' && (
|
|||
|
|
<NutritionHistoryVizConfigEditor
|
|||
|
|
config={b.config || {}}
|
|||
|
|
onChange={(next) =>
|
|||
|
|
patchSelectedPayload((p) => ({
|
|||
|
|
...p,
|
|||
|
|
blocks: (p.blocks || []).map((x, j) => {
|
|||
|
|
if (j !== idx) return x
|
|||
|
|
if (Object.keys(next).length === 0) return { ...x, config: {} }
|
|||
|
|
return { ...x, config: { ...(x.config || {}), ...next } }
|
|||
|
|
}),
|
|||
|
|
}))
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
{b.bundle_id === 'fitness_history_viz' && (
|
|||
|
|
<FitnessHistoryVizConfigEditor
|
|||
|
|
config={b.config || {}}
|
|||
|
|
onChange={(next) =>
|
|||
|
|
patchSelectedPayload((p) => ({
|
|||
|
|
...p,
|
|||
|
|
blocks: (p.blocks || []).map((x, j) => {
|
|||
|
|
if (j !== idx) return x
|
|||
|
|
if (Object.keys(next).length === 0) return { ...x, config: {} }
|
|||
|
|
return { ...x, config: { ...(x.config || {}), ...next } }
|
|||
|
|
}),
|
|||
|
|
}))
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
{b.bundle_id === 'recovery_history_viz' && (
|
|||
|
|
<RecoveryHistoryVizConfigEditor
|
|||
|
|
config={b.config || {}}
|
|||
|
|
onChange={(next) =>
|
|||
|
|
patchSelectedPayload((p) => ({
|
|||
|
|
...p,
|
|||
|
|
blocks: (p.blocks || []).map((x, j) => {
|
|||
|
|
if (j !== idx) return x
|
|||
|
|
if (Object.keys(next).length === 0) return { ...x, config: {} }
|
|||
|
|
return { ...x, config: { ...(x.config || {}), ...next } }
|
|||
|
|
}),
|
|||
|
|
}))
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
{b.bundle_id === 'history_overview_viz' && (
|
|||
|
|
<HistoryOverviewVizConfigEditor
|
|||
|
|
config={b.config || {}}
|
|||
|
|
onChange={(next) =>
|
|||
|
|
patchSelectedPayload((p) => ({
|
|||
|
|
...p,
|
|||
|
|
blocks: (p.blocks || []).map((x, j) => {
|
|||
|
|
if (j !== idx) return x
|
|||
|
|
if (Object.keys(next).length === 0) return { ...x, config: {} }
|
|||
|
|
return { ...x, config: { ...(x.config || {}), ...next } }
|
|||
|
|
}),
|
|||
|
|
}))
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</li>
|
|||
|
|
))}
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 12 }}>
|
|||
|
|
<select
|
|||
|
|
className="form-input"
|
|||
|
|
style={{ maxWidth: 280 }}
|
|||
|
|
defaultValue=""
|
|||
|
|
onChange={(e) => {
|
|||
|
|
const v = e.target.value
|
|||
|
|
if (!v) return
|
|||
|
|
patchSelectedPayload((p) => ({
|
|||
|
|
...p,
|
|||
|
|
blocks: [...(p.blocks || []), reportNewBlock(v)],
|
|||
|
|
}))
|
|||
|
|
e.target.value = ''
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<option value="">+ Block hinzufügen…</option>
|
|||
|
|
<option value="section">Überschrift</option>
|
|||
|
|
<option value="viz_bundle">Verlauf-Bundle (KPIs & Diagramme)</option>
|
|||
|
|
<option value="chart">Einzel-Diagramm (Legacy)</option>
|
|||
|
|
<option value="ai_insight">KI-Auswertung</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className="btn btn-primary"
|
|||
|
|
disabled={busy}
|
|||
|
|
onClick={handleSave}
|
|||
|
|
style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}
|
|||
|
|
>
|
|||
|
|
<Save size={16} />
|
|||
|
|
Speichern
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className="btn btn-secondary"
|
|||
|
|
disabled={busy}
|
|||
|
|
onClick={handleDeleteDefinition}
|
|||
|
|
>
|
|||
|
|
Diesen Bericht löschen
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className="btn btn-secondary"
|
|||
|
|
disabled={busy}
|
|||
|
|
onClick={handleGeneratePdf}
|
|||
|
|
style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}
|
|||
|
|
>
|
|||
|
|
<Download size={16} />
|
|||
|
|
PDF erzeugen
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
{exportUsage && (
|
|||
|
|
<div style={{ marginTop: 10 }}>
|
|||
|
|
<UsageBadge {...exportUsage} />
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|