Rechtliches: Seite mit Rechtstexten und Anbieter-Vertraegen

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-30 10:20:54 +00:00
1 parent 31be2af4c3
commit 67b9439145
@@ -6,6 +6,7 @@ import {
  IconUsers,
  IconTargetArrow,
  IconReportMoney,
+  IconScale,
  IconFolders,
  IconCalendar,
  IconSettings,
@@ -25,7 +26,7 @@ export default function Sidebar() {
    navigate('/login')
  }

-  // Eine flache Liste: fuer ein kleines Team reichen sieben Eintraege ohne Gruppen
+  // Eine flache Liste: fuer ein kleines Team reichen acht Eintraege ohne Gruppen
  const links = [
    { label: 'Tickets', href: '/tickets', icon: <IconTicket /> },
    { label: 'Planboard', href: '/planboard', icon: <IconCalendar /> },
@@ -33,6 +34,7 @@ export default function Sidebar() {
    { label: 'Kunden', href: '/customers', icon: <IconUsers /> },
    { label: 'Leads', href: '/leads', icon: <IconTargetArrow /> },
    { label: 'Finanzen', href: '/finance', icon: <IconReportMoney /> },
+    { label: 'Rechtliches', href: '/rechtliches', icon: <IconScale /> },
    ...(isAdmin ? [{ label: 'Admin', href: '/admin', icon: <IconSettings /> }] : []),
  ]

@@ -0,0 +1,106 @@
+import { useState } from 'react'
+import { FaTimes } from 'react-icons/fa'
+import { Button } from '../ui'
+
+const FIELDS = ['provider', 'purpose', 'cost', 'costInterval', 'startDate', 'termMonths', 'renewalMonths', 'noticeValue', 'noticeUnit', 'note']
+const NUMBERS = ['termMonths', 'renewalMonths', 'noticeValue']
+
+function toForm(contract) {
+  const form = { costInterval: 'month', noticeUnit: 'months' }
+  for (const key of FIELDS) {
+    if (contract?.[key] !== null && contract?.[key] !== undefined) form[key] = String(contract[key])
+  }
+  return form
+}
+
+/** Leere Felder werden null, damit die Fristenlogik "Fristen fehlen" erkennt. */
+function toDoc(form) {
+  const doc = {}
+  for (const key of FIELDS) {
+    const raw = (form[key] ?? '').trim()
+    if (raw === '') doc[key] = null
+    else if (NUMBERS.includes(key)) doc[key] = parseInt(raw, 10)
+    else if (key === 'cost') doc[key] = parseFloat(raw.replace(',', '.'))
+    else doc[key] = raw
+  }
+  return doc
+}
+
+export default function ContractForm({ contract, onSave, onClose }) {
+  const [form, setForm] = useState(() => toForm(contract))
+  const [files, setFiles] = useState([])
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState(null)
+  const set = (key) => (e) => setForm((f) => ({ ...f, [key]: e.target.value }))
+
+  const submit = async (e) => {
+    e.preventDefault()
+    setSaving(true)
+    setError(null)
+    try {
+      await onSave(toDoc(form), files)
+      onClose()
+    } catch (err) {
+      setError(err.message)
+      setSaving(false)
+    }
+  }
+
+  const input = (key, label, props = {}) => (
+    <div className="form-group">
+      <label className="form-label">{label}</label>
+      <input className="form-control" name={key} value={form[key] || ''} onChange={set(key)} {...props} />
+    </div>
+  )
+
+  return (
+    <div className="overlay">
+      <span className="overlay-close" onClick={onClose}><FaTimes /></span>
+      <div className="overlay-content">
+        <h2 className="mb-2">{contract ? 'Vertrag bearbeiten' : 'Neuer Vertrag'}</h2>
+        {error && <div className="legal-error">{error}</div>}
+        <form onSubmit={submit}>
+          {input('provider', 'Anbieter', { required: true })}
+          {input('purpose', 'Wofür')}
+          <div className="legal-form-row">
+            {input('cost', 'Kosten (€)', { inputMode: 'decimal' })}
+            <div className="form-group">
+              <label className="form-label">pro</label>
+              <select className="form-control" name="costInterval" value={form.costInterval} onChange={set('costInterval')}>
+                <option value="month">Monat</option>
+                <option value="year">Jahr</option>
+              </select>
+            </div>
+          </div>
+          {input('startDate', 'Vertragsbeginn', { type: 'date' })}
+          <div className="legal-form-row">
+            {input('termMonths', 'Laufzeit (Monate, 0 = jederzeit kündbar)', { type: 'number', min: 0 })}
+            {input('renewalMonths', 'Verlängert sich um (Monate, 0 = endet)', { type: 'number', min: 0 })}
+          </div>
+          <div className="legal-form-row">
+            {input('noticeValue', 'Kündigungsfrist', { type: 'number', min: 0 })}
+            <div className="form-group">
+              <label className="form-label">Einheit</label>
+              <select className="form-control" name="noticeUnit" value={form.noticeUnit} onChange={set('noticeUnit')}>
+                <option value="months">Monate</option>
+                <option value="days">Tage</option>
+              </select>
+            </div>
+          </div>
+          <div className="form-group">
+            <label className="form-label">Notiz</label>
+            <textarea className="form-control" name="note" rows={3} value={form.note || ''} onChange={set('note')} />
+          </div>
+          <div className="form-group">
+            <label className="form-label">Dateien hinzufügen</label>
+            <input type="file" multiple accept=".pdf,.html,.htm,.png,.jpg,.jpeg,.webp,.doc,.docx" onChange={(e) => setFiles([...e.target.files])} />
+          </div>
+          <div className="flex gap-2">
+            <Button variant="primary" type="submit" disabled={saving}>{saving ? 'Speichert …' : 'Speichern'}</Button>
+            <Button type="button" onClick={onClose}>Abbrechen</Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,84 @@
+import { useState } from 'react'
+import { Badge, Button, Card } from '../ui'
+import { currentVersion, formatDate } from '../../lib/legal'
+import VersionForm from './VersionForm'
+import { FileLinks } from './legalUi'
+
+const byNewest = (a, b) => (b.validFrom || '').localeCompare(a.validFrom || '')
+
+export default function LegalTextsTab({ documents, versions, fileNames, addVersion, promoteDraft }) {
+  const [open, setOpen] = useState(null)
+  const [formFor, setFormFor] = useState(null)
+  const [actionError, setActionError] = useState(null)
+
+  const promote = async (v) => {
+    setActionError(null)
+    try {
+      await promoteDraft(v)
+    } catch (err) {
+      setActionError(err.message)
+    }
+  }
+
+  return (
+    <div className="legal-grid">
+      {actionError && <div className="legal-error">{actionError}</div>}
+      {documents.map((doc) => {
+        const own = versions.filter((v) => v.documentKey === doc.key).sort(byNewest)
+        const current = currentVersion(own)
+        const drafts = own.filter((v) => v.status === 'draft')
+        const expanded = open === doc.key
+        return (
+          <Card
+            key={doc.$id}
+            className="legal-doc"
+            title={doc.title}
+            actions={<Button size="sm" onClick={() => setFormFor(doc)}>Neue Version</Button>}
+          >
+            <div className="legal-doc-summary" onClick={() => setOpen(expanded ? null : doc.key)} role="button">
+              {current ? (
+                <Badge tone="ok">{current.version} · gilt seit {formatDate(current.validFrom)}</Badge>
+              ) : (
+                <Badge tone="muted">noch keine gültige Version</Badge>
+              )}
+              {drafts.map((d) => (
+                <Badge key={d.$id} tone="muted">Entwurf {d.version}</Badge>
+              ))}
+              <span className="faint legal-toggle">{expanded ? 'Verlauf ausblenden' : `Verlauf (${own.length})`}</span>
+            </div>
+            {doc.liveUrl && (
+              <a href={doc.liveUrl} target="_blank" rel="noreferrer" className="legal-live">Live-Seite öffnen</a>
+            )}
+            {expanded && (
+              <ol className="legal-history">
+                {own.length === 0 && <li className="faint">Noch keine Versionen eingetragen.</li>}
+                {own.map((v) => (
+                  <li key={v.$id} className={`legal-version legal-version-${v.status}`}>
+                    <div className="legal-version-head">
+                      <strong>{v.version}</strong>
+                      <span>{formatDate(v.validFrom)} – {v.status === 'current' ? 'heute' : formatDate(v.validTo)}</span>
+                      {v.status === 'current' && <Badge tone="ok">gültig</Badge>}
+                      {v.status === 'draft' && <Badge tone="muted">Entwurf</Badge>}
+                      {v.status === 'draft' && (
+                        <Button size="sm" onClick={() => promote(v)}>Als gültig markieren</Button>
+                      )}
+                    </div>
+                    {v.changeNote && <div className="legal-note">{v.changeNote}</div>}
+                    <FileLinks fileIds={v.fileIds} fileNames={fileNames} />
+                  </li>
+                ))}
+              </ol>
+            )}
+          </Card>
+        )
+      })}
+      {formFor && (
+        <VersionForm
+          title={formFor.title}
+          onSave={(input, files) => addVersion(formFor.key, input, files)}
+          onClose={() => setFormFor(null)}
+        />
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,141 @@
+import { Fragment, useState } from 'react'
+import { Button, EmptyState } from '../ui'
+import { deadlineTone, formatDate, nextCancellationDate } from '../../lib/legal'
+import ContractForm from './ContractForm'
+import { FileLinks, todayIso } from './legalUi'
+
+const TONE_ORDER = { red: 0, orange: 1, normal: 2, missing: 3, grey: 4 }
+const euro = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' })
+
+function costLabel(c) {
+  if (c.cost === null || c.cost === undefined) return '–'
+  return `${euro.format(c.cost)}/${c.costInterval === 'year' ? 'Jahr' : 'Monat'}`
+}
+
+function termLabel(c) {
+  if (c.termMonths === null || c.termMonths === undefined) return '–'
+  if (c.termMonths === 0) return 'jederzeit kündbar'
+  const renew = c.renewalMonths ? `, verlängert um ${c.renewalMonths}` : ', endet danach'
+  return `${c.termMonths} Monate${renew}`
+}
+
+function noticeLabel(c) {
+  if (c.noticeValue === null || c.noticeValue === undefined) return '–'
+  return `${c.noticeValue} ${c.noticeUnit === 'days' ? 'Tage' : 'Monate'}`
+}
+
+function deadlineLabel(r) {
+  switch (r.state) {
+    case 'active': return `kündbar bis ${formatDate(r.noticeBy)} (Periode endet ${formatDate(r.periodEnd)})`
+    case 'anytime': return 'jederzeit kündbar'
+    case 'ends': return `endet am ${formatDate(r.periodEnd)}`
+    case 'ended': return `beendet seit ${formatDate(r.periodEnd)}`
+    case 'cancelled': return r.periodEnd ? `gekündigt zum ${formatDate(r.periodEnd)}` : 'gekündigt'
+    default: return 'Fristen fehlen'
+  }
+}
+
+export default function ProviderContractsTab({ contracts, fileNames, saveContract, deleteContract }) {
+  const [open, setOpen] = useState(null)
+  const [editing, setEditing] = useState(null)
+  const [cancelling, setCancelling] = useState(null)
+  const [endsAt, setEndsAt] = useState('')
+  const [actionError, setActionError] = useState(null)
+  const today = todayIso()
+
+  const rows = contracts
+    .map((c) => {
+      const result = nextCancellationDate(c, today)
+      return { c, result, tone: deadlineTone(result, today) }
+    })
+    .sort((a, b) =>
+      TONE_ORDER[a.tone] - TONE_ORDER[b.tone] ||
+      (a.result.noticeBy || a.result.periodEnd || '9999').localeCompare(b.result.noticeBy || b.result.periodEnd || '9999')
+    )
+
+  const run = async (fn) => {
+    setActionError(null)
+    try {
+      await fn()
+    } catch (err) {
+      setActionError(err.message)
+    }
+  }
+
+  const confirmCancel = (c) =>
+    run(async () => {
+      await saveContract({ cancelledAt: today, endsAt: endsAt || null }, [], c.$id)
+      setCancelling(null)
+    })
+
+  const remove = (c) => {
+    if (window.confirm(`Vertrag „${c.provider}“ wirklich löschen?`)) run(() => deleteContract(c.$id))
+  }
+
+  return (
+    <div>
+      <div className="toolbar">
+        <Button variant="primary" onClick={() => setEditing('new')}>Neuer Vertrag</Button>
+      </div>
+      {actionError && <div className="legal-error">{actionError}</div>}
+      {rows.length === 0 ? (
+        <EmptyState title="Noch keine Verträge eingetragen" />
+      ) : (
+        <table className="ui-table legal-contracts">
+          <thead>
+            <tr>
+              <th>Anbieter</th><th>Wofür</th><th>Kosten</th><th>Laufzeit</th><th>Kündigungsfrist</th><th>Nächster Termin</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map(({ c, result, tone }) => (
+              <Fragment key={c.$id}>
+                <tr className={`legal-tone-${tone}`} onClick={() => setOpen(open === c.$id ? null : c.$id)}>
+                  <td><strong>{c.provider}</strong></td>
+                  <td>{c.purpose || '–'}</td>
+                  <td>{costLabel(c)}</td>
+                  <td>{termLabel(c)}</td>
+                  <td>{noticeLabel(c)}</td>
+                  <td className="legal-deadline">{deadlineLabel(result)}</td>
+                </tr>
+                {open === c.$id && (
+                  <tr className="legal-detail">
+                    <td colSpan={6}>
+                      {c.startDate && <div>Beginn: {formatDate(c.startDate)}</div>}
+                      {c.note && <div className="legal-note">{c.note}</div>}
+                      <div><FileLinks fileIds={c.fileIds} fileNames={fileNames} /></div>
+                      <div className="flex gap-2 legal-actions">
+                        <Button size="sm" onClick={() => setEditing(c)}>Bearbeiten</Button>
+                        {!c.cancelledAt && cancelling !== c.$id && (
+                          <Button size="sm" onClick={() => { setCancelling(c.$id); setEndsAt(result.periodEnd || '') }}>
+                            Als gekündigt markieren
+                          </Button>
+                        )}
+                        {cancelling === c.$id && (
+                          <span className="flex gap-2 items-center">
+                            <label>Endet am</label>
+                            <input type="date" className="form-control" value={endsAt} onChange={(e) => setEndsAt(e.target.value)} />
+                            <Button size="sm" variant="primary" onClick={() => confirmCancel(c)}>Speichern</Button>
+                            <Button size="sm" onClick={() => setCancelling(null)}>Abbrechen</Button>
+                          </span>
+                        )}
+                        <Button size="sm" variant="danger" onClick={() => remove(c)}>Löschen</Button>
+                      </div>
+                    </td>
+                  </tr>
+                )}
+              </Fragment>
+            ))}
+          </tbody>
+        </table>
+      )}
+      {editing && (
+        <ContractForm
+          contract={editing === 'new' ? null : editing}
+          onSave={(doc, files) => saveContract(doc, files, editing === 'new' ? undefined : editing.$id)}
+          onClose={() => setEditing(null)}
+        />
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,64 @@
+import { useState } from 'react'
+import { FaTimes } from 'react-icons/fa'
+import { Button } from '../ui'
+import { todayIso } from './legalUi'
+
+export default function VersionForm({ title, onSave, onClose }) {
+  const [form, setForm] = useState({ version: '', status: 'current', validFrom: todayIso(), changeNote: '' })
+  const [files, setFiles] = useState([])
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState(null)
+  const set = (key) => (e) => setForm((f) => ({ ...f, [key]: e.target.value }))
+
+  const submit = async (e) => {
+    e.preventDefault()
+    setSaving(true)
+    setError(null)
+    try {
+      await onSave({ ...form, version: form.version.trim() }, files)
+      onClose()
+    } catch (err) {
+      setError(err.message)
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className="overlay">
+      <span className="overlay-close" onClick={onClose}><FaTimes /></span>
+      <div className="overlay-content">
+        <h2 className="mb-2">Neue Version: {title}</h2>
+        {error && <div className="legal-error">{error}</div>}
+        <form onSubmit={submit}>
+          <div className="form-group">
+            <label className="form-label">Version</label>
+            <input className="form-control" name="version" value={form.version} onChange={set('version')} placeholder="z. B. v6" required />
+          </div>
+          <div className="form-group">
+            <label className="form-label">Status</label>
+            <select className="form-control" name="status" value={form.status} onChange={set('status')}>
+              <option value="current">Gültig</option>
+              <option value="draft">Entwurf (noch nicht live)</option>
+            </select>
+          </div>
+          <div className="form-group">
+            <label className="form-label">Gültig ab</label>
+            <input className="form-control" type="date" name="validFrom" value={form.validFrom} onChange={set('validFrom')} required />
+          </div>
+          <div className="form-group">
+            <label className="form-label">Was hat sich geändert?</label>
+            <textarea className="form-control" name="changeNote" rows={4} value={form.changeNote} onChange={set('changeNote')} />
+          </div>
+          <div className="form-group">
+            <label className="form-label">Dateien (PDF, HTML, Bild, Word)</label>
+            <input type="file" multiple accept=".pdf,.html,.htm,.png,.jpg,.jpeg,.webp,.doc,.docx" onChange={(e) => setFiles([...e.target.files])} />
+          </div>
+          <div className="flex gap-2">
+            <Button variant="primary" type="submit" disabled={saving}>{saving ? 'Speichert …' : 'Speichern'}</Button>
+            <Button type="button" onClick={onClose}>Abbrechen</Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,21 @@
+import { fileUrl, fileDownloadUrl } from '../../hooks/useLegal'
+
+/** Heutiges Datum in Ortszeit als 'YYYY-MM-DD'. */
+export function todayIso() {
+  return new Date().toLocaleDateString('sv-SE')
+}
+
+export function FileLinks({ fileIds = [], fileNames = {} }) {
+  if (!fileIds.length) return <span className="faint">keine Datei</span>
+  return (
+    <span className="legal-files">
+      {fileIds.map((id) => (
+        <span key={id}>
+          <a href={fileUrl(id)} target="_blank" rel="noreferrer">{fileNames[id] || 'Datei'}</a>
+          {' '}
+          <a href={fileDownloadUrl(id)} className="faint">(herunterladen)</a>
+        </span>
+      ))}
+    </span>
+  )
+}