feat: CRM-Stufen (Lead/Kunde) + InvoiceNinja-Sync (eine Pflege)

- Zwei Kundenstufen: Lead (potenziell) und fester Kunde; Lead braucht nur
  Unternehmen + E-Mail und erzeugt automatisch ein Akquise-Ticket
- Akquise-Worksheet-Ergebnis (In Kontakt/Zugesagt/Abgesagt) sichtbar in WSIDs;
  "Zugesagt" macht den Lead automatisch zum festen Kunden, "Abgesagt" -> verloren
- Kunde wird nur in Appwrite gepflegt und automatisch als InvoiceNinja-Client
  angelegt/aktualisiert (beim Upgrade bzw. bei Datenpflege)
- Rechnungen nur fuer feste Kunden mit vollstaendigen Daten (Strasse/PLZ/Stadt)
- Kundenliste mit Stufen-Filter, neue Rechnungs-/Adressfelder

Co-authored-by: Cursor <cursoragent@cursor.com>

src/pages/CustomerDetailPage.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback } from 'react'
 import { useParams, Link } from 'react-router-dom'
-import { FaSpinner, FaStar, FaArrowLeft, FaFloppyDisk } from 'react-icons/fa6'
+import { FaSpinner, FaStar, FaArrowLeft, FaFloppyDisk, FaArrowUp } from 'react-icons/fa6'
 import { databases, DATABASE_ID, COLLECTIONS, Query } from '../lib/appwrite'
 import { PageHeader, Card, Button, Badge, Tabs, EmptyState, Field } from '../components/ui'
 import { StatusPill, PriorityPill } from '../components/ui/StatusPill'
@@ -8,6 +8,7 @@ import InvoicePanel from '../components/InvoicePanel'
 import DocumentsPanel from '../components/DocumentsPanel'
 import AssignedProjectCard from '../components/AssignedProjectCard'
 import { useWebsiteProjects } from '../hooks/useWebsiteProjects'
+import { customerStage, isInvoiceReady, upgradeToCustomer, syncCustomerToNinja } from '../lib/leads'
 
 const TABS = [
   { id: 'overview', label: 'Uebersicht' },
@@ -41,6 +42,7 @@ export default function CustomerDetailPage() {
   if (loading) return <div className="page"><div className="empty"><FaSpinner className="spinner" /></div></div>
   if (error || !customer) return <div className="page"><EmptyState title="Kunde nicht gefunden" hint={error} action={<Button as={Link} to="/customers"><FaArrowLeft /> Zurueck</Button>} /></div>
 
+  const stage = customerStage(customer)
   const syntheticTicket = { customerId: customer.$id, customerName: customer.name, woid: '' }
 
   return (
@@ -50,30 +52,48 @@ export default function CustomerDetailPage() {
           <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
             {customer.importantCustomer && <FaStar style={{ color: 'var(--warn)' }} />}
             {customer.name}
+            {stage === 'lead' && <Badge tone="warn" dot>Lead</Badge>}
+            {stage === 'customer' && <Badge tone="ok" dot>Fester Kunde</Badge>}
+            {stage === 'lost' && <Badge tone="muted">Abgesagt</Badge>}
           </span>
         }
-        subtitle={[customer.location, customer.email, customer.phone].filter(Boolean).join(' <20> ')}
+        subtitle={[customer.location, customer.email, customer.phone].filter(Boolean).join(' <20> ')}
         actions={<Button variant="ghost" as={Link} to="/customers"><FaArrowLeft /> Alle Kunden</Button>}
       />
 
       <Tabs tabs={TABS} active={tab} onChange={setTab} />
 
-      {tab === 'overview' && <OverviewTab customer={customer} onSaved={load} />}
+      {tab === 'overview' && <OverviewTab customer={customer} stage={stage} onSaved={load} />}
       {tab === 'tickets' && <CustomerTickets customerId={customer.$id} />}
-      {tab === 'invoices' && <InvoicePanel ticket={syntheticTicket} />}
+      {tab === 'invoices' && (
+        stage === 'lead' ? (
+          <Card><EmptyState title="Noch ein Lead" hint="Erst zum festen Kunden machen (vollstaendige Daten noetig), dann sind Rechnungen moeglich." action={<Button variant="primary" onClick={() => setTab('overview')}>Daten erfassen</Button>} /></Card>
+        ) : !isInvoiceReady(customer) ? (
+          <Card><EmptyState title="Daten unvollstaendig" hint="Fuer Rechnungen werden Unternehmen, E-Mail, Strasse, Stadt und PLZ benoetigt." action={<Button variant="primary" onClick={() => setTab('overview')}>Daten vervollstaendigen</Button>} /></Card>
+        ) : (
+          <InvoicePanel ticket={syntheticTicket} />
+        )
+      )}
       {tab === 'documents' && <DocumentsPanel ticket={syntheticTicket} initialScope="customer" />}
       {tab === 'projects' && <CustomerProjects customerId={customer.$id} />}
     </div>
   )
 }
 
-function OverviewTab({ customer, onSaved }) {
+function OverviewTab({ customer, stage, onSaved }) {
   const [form, setForm] = useState({
     name: customer.name || '',
+    companyName: customer.companyName || customer.name || '',
     code: customer.code || '',
-    location: customer.location || '',
     email: customer.email || '',
     phone: customer.phone || '',
+    contactName: customer.contactName || '',
+    street: customer.street || '',
+    postalCode: customer.postalCode || '',
+    city: customer.city || '',
+    country: customer.country || 'Deutschland',
+    vatNumber: customer.vatNumber || '',
+    location: customer.location || '',
     notes: customer.notes || '',
     importantCustomer: !!customer.importantCustomer,
     paperlessCorrespondent: customer.paperlessCorrespondent || '',
@@ -81,56 +101,76 @@ function OverviewTab({ customer, onSaved }) {
   const [busy, setBusy] = useState(false)
   const [msg, setMsg] = useState(null)
 
+  const ready = isInvoiceReady({ ...customer, ...form })
+
   const save = async () => {
     setBusy(true); setMsg(null)
     try {
-      await databases.updateDocument(DATABASE_ID, COLLECTIONS.CUSTOMERS, customer.$id, form)
-      setMsg('Gespeichert')
+      const updated = await databases.updateDocument(DATABASE_ID, COLLECTIONS.CUSTOMERS, customer.$id, form)
+      let note = 'Gespeichert'
+      // Wenn fester Kunde: Aenderungen nach InvoiceNinja syncen (sofern Daten reichen oder bereits verknuepft)
+      if (stage === 'customer' && (updated.invoiceNinjaClientId || isInvoiceReady(updated))) {
+        try { await syncCustomerToNinja(updated) } catch (e) { note = 'Gespeichert, InvoiceNinja-Sync fehlgeschlagen: ' + e.message }
+      }
+      setMsg(note)
       onSaved()
     } catch (err) {
       setMsg('Fehler: ' + err.message)
     } finally { setBusy(false) }
   }
 
+  const upgrade = async () => {
+    if (!ready) { setMsg('Bitte zuerst alle Pflichtfelder (Unternehmen, E-Mail, Strasse, PLZ, Stadt) ausfuellen.'); return }
+    setBusy(true); setMsg(null)
+    const r = await upgradeToCustomer(customer, form)
+    if (r.clientId) setMsg('Zum festen Kunden gemacht und mit InvoiceNinja verknuepft.')
+    else setMsg('Status gesetzt, aber InvoiceNinja-Verknuepfung fehlgeschlagen: ' + (r.syncError || 'unbekannt'))
+    setBusy(false)
+    onSaved()
+  }
+
   return (
-    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16 }}>
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 16 }}>
       <Card title="Stammdaten">
         <div className="flex gap-3 wrap">
-          <Field label="Name"><input className="form-control" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} /></Field>
+          <Field label="Unternehmen / Name"><input className="form-control" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value, companyName: e.target.value })} /></Field>
           <Field label="Code"><input className="form-control" value={form.code} onChange={(e) => setForm({ ...form, code: e.target.value })} /></Field>
         </div>
-        <Field label="Ort"><input className="form-control" value={form.location} onChange={(e) => setForm({ ...form, location: e.target.value })} /></Field>
         <div className="flex gap-3 wrap">
-          <Field label="E-Mail"><input className="form-control" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} /></Field>
+          <Field label="E-Mail"><input className="form-control" type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} /></Field>
           <Field label="Telefon"><input className="form-control" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} /></Field>
         </div>
+        <Field label="Ansprechpartner"><input className="form-control" value={form.contactName} onChange={(e) => setForm({ ...form, contactName: e.target.value })} /></Field>
         <Field label="Notizen"><textarea className="form-control" rows={3} value={form.notes} onChange={(e) => setForm({ ...form, notes: e.target.value })} /></Field>
         <label className="flex items-center gap-2" style={{ marginBottom: 12, cursor: 'pointer' }}>
           <input type="checkbox" checked={form.importantCustomer} onChange={(e) => setForm({ ...form, importantCustomer: e.target.checked })} />
           Wichtiger Kunde
         </label>
-        <div className="flex gap-2 items-center">
+        <div className="flex gap-2 items-center wrap">
           <Button variant="primary" onClick={save} disabled={busy}>{busy ? <FaSpinner className="spinner" /> : <><FaFloppyDisk /> Speichern</>}</Button>
+          {stage === 'lead' && <Button onClick={upgrade} disabled={busy}><FaArrowUp /> Zum festen Kunden machen</Button>}
           {msg && <span className="muted">{msg}</span>}
         </div>
       </Card>
 
-      <Card title="Verknuepfungen">
-        <div className="flex flex-col gap-3">
-          <div className="flex items-center justify-between">
-            <span className="muted">InvoiceNinja</span>
-            {customer.invoiceNinjaClientId
-              ? <Badge tone="ok" dot>verknuepft</Badge>
-              : <Badge tone="muted">nicht verknuepft</Badge>}
-          </div>
-          <div className="faint" style={{ fontSize: 12 }}>
-            Verknuepfung erfolgt im Tab &quot;Rechnungen&quot; (Kunde suchen oder neu anlegen).
-          </div>
-          <Field label="Paperless-Korrespondent">
-            <input className="form-control" value={form.paperlessCorrespondent} onChange={(e) => setForm({ ...form, paperlessCorrespondent: e.target.value })} placeholder={customer.name} />
-          </Field>
-          <div className="faint" style={{ fontSize: 12 }}>Leer = Kundenname wird als Korrespondent verwendet.</div>
+      <Card title="Rechnungsdaten (fuer InvoiceNinja)">
+        {!ready && <div className="badge badge-warn" style={{ marginBottom: 12 }}>Unvollstaendig - fuer Rechnungen erforderlich</div>}
+        <Field label="Strasse + Nr."><input className="form-control" value={form.street} onChange={(e) => setForm({ ...form, street: e.target.value })} /></Field>
+        <div className="flex gap-3 wrap">
+          <Field label="PLZ"><input className="form-control" value={form.postalCode} onChange={(e) => setForm({ ...form, postalCode: e.target.value })} /></Field>
+          <Field label="Stadt"><input className="form-control" value={form.city} onChange={(e) => setForm({ ...form, city: e.target.value })} /></Field>
         </div>
+        <div className="flex gap-3 wrap">
+          <Field label="Land"><input className="form-control" value={form.country} onChange={(e) => setForm({ ...form, country: e.target.value })} /></Field>
+          <Field label="USt-IdNr."><input className="form-control" value={form.vatNumber} onChange={(e) => setForm({ ...form, vatNumber: e.target.value })} /></Field>
+        </div>
+        <div className="flex items-center justify-between" style={{ marginTop: 8 }}>
+          <span className="muted">InvoiceNinja</span>
+          {customer.invoiceNinjaClientId ? <Badge tone="ok" dot>verknuepft</Badge> : <Badge tone="muted">nicht verknuepft</Badge>}
+        </div>
+        <Field label="Paperless-Korrespondent" hint="Leer = Kundenname wird verwendet">
+          <input className="form-control" value={form.paperlessCorrespondent} onChange={(e) => setForm({ ...form, paperlessCorrespondent: e.target.value })} placeholder={customer.name} />
+        </Field>
       </Card>
     </div>
   )
@@ -171,7 +211,7 @@ function CustomerTickets({ customerId }) {
             <span className="mono" style={{ color: 'var(--accent)', minWidth: 60 }}>{t.woid || t.$id.slice(-5)}</span>
             <div className="grow">
               <div style={{ fontWeight: 600 }}>{t.topic || t.title || '-'}</div>
-              <div className="muted">{t.type} <EFBFBD> {t.systemType || 'n/a'}</div>
+              <div className="muted">{t.type} <EFBFBD> {t.systemType || 'n/a'}</div>
             </div>
             <PriorityPill priority={t.priority} />
             <StatusPill status={t.status} />