} />
diff --git a/src/components/InvoicePanel.jsx b/src/components/InvoicePanel.jsx
deleted file mode 100644
index 93d508f..0000000
--- a/src/components/InvoicePanel.jsx
+++ /dev/null
@@ -1,262 +0,0 @@
-import { useState, useEffect, useCallback } from 'react'
-import { FaFilePdf, FaPlus, FaLink, FaSpinner, FaRotate } from 'react-icons/fa6'
-import { databases, DATABASE_ID, COLLECTIONS } from '../lib/appwrite'
-import { integrationsApi, formatMoney, INVOICE_STATUS } from '../lib/integrationsApi'
-import { useInvoices } from '../hooks/useInvoices'
-import { customerStage, isInvoiceReady } from '../lib/leads'
-
-const card = {
- background: 'rgba(45, 55, 72, 0.5)',
- borderRadius: '12px',
- padding: '16px',
- border: '1px solid rgba(16, 185, 129, 0.2)',
-}
-
-export default function InvoicePanel({ ticket }) {
- const [customer, setCustomer] = useState(null)
- const [customerLoading, setCustomerLoading] = useState(true)
- const [customerError, setCustomerError] = useState(null)
-
- const loadCustomer = useCallback(async () => {
- if (!ticket.customerId) {
- setCustomer(null)
- setCustomerLoading(false)
- return
- }
- setCustomerLoading(true)
- try {
- const doc = await databases.getDocument(DATABASE_ID, COLLECTIONS.CUSTOMERS, ticket.customerId)
- setCustomer(doc)
- setCustomerError(null)
- } catch (err) {
- setCustomerError(err.message)
- setCustomer(null)
- } finally {
- setCustomerLoading(false)
- }
- }, [ticket.customerId])
-
- useEffect(() => {
- loadCustomer()
- }, [loadCustomer])
-
- const clientId = customer?.invoiceNinjaClientId || null
- const { invoices, loading, error, refresh } = useInvoices(clientId)
-
- if (customerLoading) {
- return (
-
- Kunde wird geladen...
-
- )
- }
-
- if (!ticket.customerId) {
- return (
-
-
Kein Kunde am Ticket verknüpft, keine Rechnungen verfügbar.
-
-
-
- Rechnungen {customer?.name ? `- ${customer.name}` : ''}
-
- {clientId && (
-
- )}
-
-
- {customerError &&
{customerError}
}
-
- {customer && customerStage(customer) === 'lead' ? (
-
- Dieser Kunde ist noch ein Lead. Erst zum festen Kunden machen (im Kunden-Bereich, vollständige Daten nötig), dann sind Rechnungen möglich.
-
- ) : !clientId && !isInvoiceReady(customer) ? (
-
- Rechnungsdaten unvollständig. Bitte im Kunden-Bereich Unternehmen, E-Mail, Straße, PLZ und Stadt ergänzen.
-
- ) : !clientId ? (
-
- ) : (
-
- )}
-
-
- Dieser Kunde ist noch nicht mit InvoiceNinja verknüpft.
-
-
- setSearch(e.target.value)}
- onKeyDown={(e) => e.key === 'Enter' && doSearch()}
- />
-
-
-
- {error &&
{error}
}
-
-
- {results.map((c) => (
-
-
-
{c.name}
- {c.number ?
· {c.number} : null}
- {c.email ?
{c.email}
: null}
-
-
-
- ))}
- {!busy && results.length === 0 && (
-
Keine Treffer.
- )}
-
-
-
-
- {error &&
{error}
}
-
- {loading ? (
-
Rechnungen werden geladen...
- ) : invoices.length === 0 ? (
-
Noch keine Rechnungen für diesen Kunden.
- ) : (
-
-
-
-
- | Nr. | Datum | Fällig | Betrag | Offen | Status | |
-
-
-
- {invoices.map((inv) => {
- const st = INVOICE_STATUS[inv.status_id] || { label: '–', color: '#a0aec0' }
- const overdue = Number(inv.balance) > 0 && inv.due_date && new Date(inv.due_date) < new Date()
- return (
-
- | {inv.number || inv.id?.slice(-6)} |
- {inv.date || '-'} |
- {inv.due_date || '-'} |
- {formatMoney(inv.amount)} |
- 0 ? '#f59e0b' : '#10b981' }}>{formatMoney(inv.balance)} |
- {st.label}{overdue ? ' (überfällig)' : ''} |
-
-
- |
-
- )
- })}
-
-
-
- )}
-
+
+
Bankzugang wird geladen …
+
+
{res.error || LOAD_ERROR}
+
+
+ Der Stand konnte nicht neu geladen werden: {res.error}
+
+ )}
+ {model.rows.length > 0 && (
+
+ {model.rows.map((row) => (
+
+
- {row.label}
+ - {row.text}
+
+ ))}
+
+ )}
+ {model.error && (
+ Fehler: {model.error}
+ )}
+ {model.hint && {model.hint}
}
+ {message && (
+
+ {message.text}
+
+ )}
+
+ {model.canRefresh && (
+
+ )}
+
+
+
+ )
+}
diff --git a/src/components/finance/CustomerInvoices.jsx b/src/components/finance/CustomerInvoices.jsx
new file mode 100644
index 0000000..2101679
--- /dev/null
+++ b/src/components/finance/CustomerInvoices.jsx
@@ -0,0 +1,24 @@
+import { Button, Card, EmptyState } from '../ui'
+import InvoiceTable from './InvoiceTable'
+import { customerInvoicesGate } from '../../lib/financeView'
+
+/**
+ * Reiter „Rechnungen“ am Kunden. Kann für den Kunden keine Rechnung geschrieben werden (noch Lead, abgesagt, keine
+ * E-Mail), steht der Grund da, mit „Daten erfassen“ (onShowOverview wechselt zum Reiter Übersicht). Sonst die
+ * Rechnungen dieses Kunden mit „Rechnung schreiben“ (der Kunde steht im Dialog fest).
+ */
+export default function CustomerInvoices({ customer, onShowOverview }) {
+ const gate = customerInvoicesGate(customer)
+ if (!gate.ok) {
+ return (
+
+ Daten erfassen : null}
+ />
+
+ )
+ }
+ return
+}
diff --git a/src/components/finance/FixedCostsCard.jsx b/src/components/finance/FixedCostsCard.jsx
new file mode 100644
index 0000000..ded7b7d
--- /dev/null
+++ b/src/components/finance/FixedCostsCard.jsx
@@ -0,0 +1,257 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { FaPlus, FaSpinner } from 'react-icons/fa6'
+import { Badge, Button, Card, EmptyState } from '../ui'
+import FormField from './FormField'
+import { useFinanceResource } from '../../hooks/useFinanceResource'
+import { createFixedCost, deleteFixedCost, getFixedCosts, updateFixedCost } from '../../lib/financeApi'
+import {
+ FIXED_COST_DELETE_CONFIRM,
+ FIXED_COST_FIELD_ORDER,
+ INTERVAL_OPTIONS,
+ SETTINGS_LIMITS,
+ apiErrorMessage,
+ emptyFixedCostForm,
+ fixedCostRows,
+ fixedCostToForm,
+ validateFixedCostForm,
+} from '../../lib/financeSettings'
+
+const LOAD_ERROR = 'Die Fixkosten konnten nicht geladen werden.'
+const fieldId = (name) => `fin-fix-${name}`
+
+/**
+ * Karte „Fixkosten“: regelmäßige Ausgaben (Name, Betrag in Euro, Rhythmus, nächster Termin, Suchbegriff). Anlegen und
+ * Bearbeiten im Formular über der Liste, „Auf inaktiv setzen“ / „Aktivieren“ je Zeile, Löschen mit Rückfrage
+ * (Besser inaktiv: bereits zugeordnete Buchungen behalten den Verweis). Es läuft immer nur eine Anfrage; danach wird
+ * die Liste neu geladen.
+ */
+export default function FixedCostsCard() {
+ const res = useFinanceResource(getFixedCosts, LOAD_ERROR)
+ // null = Formular zu; { id: null } = neue Position; { id } = Position bearbeiten
+ const [editing, setEditing] = useState(null)
+ const [form, setForm] = useState(emptyFixedCostForm)
+ const [errors, setErrors] = useState({})
+ const [busy, setBusy] = useState(null) // 'save' | `${id}:toggle` | `${id}:delete`
+ const [message, setMessage] = useState(null) // { tone: 'ok' | 'warn', text }
+ const lockRef = useRef(false)
+ const aliveRef = useRef(true)
+
+ useEffect(() => {
+ aliveRef.current = true
+ return () => {
+ aliveRef.current = false
+ }
+ }, [])
+
+ const list = res.data?.fixkosten
+ const rows = useMemo(() => fixedCostRows(list), [list])
+ const byId = useMemo(() => Object.fromEntries((Array.isArray(list) ? list : []).map((p) => [p.$id, p])), [list])
+
+ // Der Fokus geht beim Öffnen des Formulars ins erste Feld
+ const formKey = editing ? editing.id || 'new' : ''
+ useEffect(() => {
+ if (formKey) document.getElementById(fieldId('name'))?.focus()
+ }, [formKey])
+
+ function openNew() {
+ if (lockRef.current) return
+ setEditing({ id: null })
+ setForm(emptyFixedCostForm())
+ setErrors({})
+ setMessage(null)
+ }
+
+ function openEdit(row) {
+ if (lockRef.current) return
+ setEditing({ id: row.id })
+ setForm(fixedCostToForm(byId[row.id]))
+ setErrors({})
+ setMessage(null)
+ }
+
+ function closeForm() {
+ if (lockRef.current) return
+ setEditing(null)
+ setErrors({})
+ }
+
+ const change = (name) => (e) => {
+ const value = e.target.value
+ setForm((f) => ({ ...f, [name]: value }))
+ setErrors((er) => (er[name] ? { ...er, [name]: undefined } : er))
+ }
+
+ // Eine Anfrage nach der anderen; danach die Liste neu laden (der Server ist die Wahrheit)
+ async function run(key, call, okText, { onOk } = {}) {
+ if (lockRef.current) return
+ lockRef.current = true
+ setBusy(key)
+ setMessage(null)
+ try {
+ await call()
+ // Erst die neue Liste, dann die Meldung: sie soll nie einen Stand beschreiben, den die Liste noch nicht zeigt
+ await res.reload()
+ if (aliveRef.current) {
+ setMessage({ tone: 'ok', text: okText })
+ if (onOk) onOk()
+ }
+ } catch (err) {
+ if (aliveRef.current) {
+ setMessage({ tone: 'warn', text: apiErrorMessage(err, 'Die Anfrage ist fehlgeschlagen.') })
+ }
+ // Der Stand kann ein anderer sein (Position schon gelöscht): neu laden
+ await res.reload()
+ } finally {
+ lockRef.current = false
+ if (aliveRef.current) setBusy(null)
+ }
+ }
+
+ function submit(e) {
+ e.preventDefault()
+ if (lockRef.current || !editing) return
+ const check = validateFixedCostForm(form)
+ if (!check.ok) {
+ setErrors(check.errors)
+ setMessage({ tone: 'warn', text: 'Bitte die markierten Felder prüfen. Es wurde nichts gespeichert.' })
+ const first = FIXED_COST_FIELD_ORDER.find((name) => check.errors[name])
+ if (first) document.getElementById(fieldId(first))?.focus()
+ return
+ }
+ const id = editing.id
+ run(
+ 'save',
+ () => (id ? updateFixedCost(id, check.payload) : createFixedCost(check.payload)),
+ id ? 'Position gespeichert.' : 'Position angelegt.',
+ { onOk: () => { setEditing(null); setErrors({}) } }
+ )
+ }
+
+ function toggle(row) {
+ run(
+ `${row.id}:toggle`,
+ () => updateFixedCost(row.id, { active: !row.active }),
+ row.active ? `„${row.name}“ ist jetzt inaktiv.` : `„${row.name}“ ist wieder aktiv.`
+ )
+ }
+
+ function remove(row) {
+ if (lockRef.current) return
+ if (!window.confirm(FIXED_COST_DELETE_CONFIRM)) return
+ run(`${row.id}:delete`, () => deleteFixedCost(row.id), `„${row.name}“ wurde gelöscht.`, {
+ onOk: () => { if (editing?.id === row.id) setEditing(null) },
+ })
+ }
+
+ let body
+ if (!res.data) {
+ body = res.loading ? (
+
+
+
Fixkosten werden geladen …
+
+
{res.error || LOAD_ERROR}
+
+
+ Die Liste konnte nicht neu geladen werden: {res.error}{' '}
+
+
+ )}
+ {editing && (
+
+ )}
+ {message && (
+
+ {message.text}
+
+ )}
+ {rows.length === 0 ? (
+
+ ) : (
+
+ {rows.map((row) => (
+ -
+
+ {row.name}
+ {row.statusLabel}
+
+ {row.amountText}
+ {row.metaText}
+
+
+
+
+
+
+ ))}
+
+ )}
+
+ )
+ }
+
+ return (
+
+ Neue Position
+
+ )
+ }
+ >
+ {body}
+
+ )
+}
diff --git a/src/components/finance/FormField.jsx b/src/components/finance/FormField.jsx
new file mode 100644
index 0000000..7ce10ef
--- /dev/null
+++ b/src/components/finance/FormField.jsx
@@ -0,0 +1,27 @@
+import { cloneElement } from 'react'
+
+/**
+ * Formularfeld mit Beschriftung, Hinweis und Fehlermeldung. `children` ist genau ein Eingabeelement; es bekommt
+ * `id`, `aria-invalid` und `aria-describedby` (Hinweis und Fehler). Die Fehlermeldung wird vorgelesen (role="alert").
+ */
+export default function FormField({ id, label, hint, error, children }) {
+ const hintId = hint ? `${id}-hint` : undefined
+ const errorId = error ? `${id}-error` : undefined
+ const describedBy = [hintId, errorId].filter(Boolean).join(' ') || undefined
+ return (
+
+
+ {cloneElement(children, { id, 'aria-invalid': error ? 'true' : undefined, 'aria-describedby': describedBy })}
+ {hint && (
+
+ {hint}
+
+ )}
+ {error && (
+
+ {error}
+
+ )}
+
+
+
Einstellungen werden geladen …
+
+
{res.error || LOAD_ERROR}
+
+
Unvollstaendig - fuer Rechnungen erforderlich
}
+
+ {!ready && Unvollständig – für Rechnungen erforderlich
}
setForm({ ...form, street: e.target.value })} />
setForm({ ...form, postalCode: e.target.value })} />
@@ -194,10 +182,6 @@ function OverviewTab({ customer, stage, onSaved }) {
setForm({ ...form, country: e.target.value })} />
setForm({ ...form, vatNumber: e.target.value })} />
-
- InvoiceNinja
- {customer.invoiceNinjaClientId ? verknuepft : nicht verknuepft}
-
diff --git a/src/pages/CustomersPage.jsx b/src/pages/CustomersPage.jsx
index affbbfb..d7f65f6 100644
--- a/src/pages/CustomersPage.jsx
+++ b/src/pages/CustomersPage.jsx
@@ -1,6 +1,6 @@
import { useState, useMemo } from 'react'
import { Link } from 'react-router-dom'
-import { FaSpinner, FaPlus, FaStar, FaFileInvoiceDollar } from 'react-icons/fa6'
+import { FaSpinner, FaPlus, FaStar } from 'react-icons/fa6'
import { useCustomers } from '../hooks/useCustomers'
import { useAuth } from '../context/AuthContext'
import { createLead, customerStage, isArchived } from '../lib/leads'
@@ -37,7 +37,7 @@ export default function CustomersPage() {
{isAdmin && (
@@ -116,7 +116,6 @@ export default function CustomersPage() {
{st === 'lead' && Lead}
{st === 'customer' && Fester Kunde}
{st === 'lost' && Abgesagt}
- {c.invoiceNinjaClientId && Ninja}
)
diff --git a/src/pages/FinancePage.jsx b/src/pages/FinancePage.jsx
index 687407f..7aa4004 100644
--- a/src/pages/FinancePage.jsx
+++ b/src/pages/FinancePage.jsx
@@ -1,6 +1,6 @@
import { useCallback, useEffect, useRef, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { FaSpinner } from 'react-icons/fa6'
+import { Link, useNavigate } from 'react-router-dom'
+import { FaGear, FaSpinner } from 'react-icons/fa6'
import { PageHeader, Card, Button } from '../components/ui'
import StatusLine from '../components/finance/StatusLine'
import LiquidityHead from '../components/finance/LiquidityHead'
@@ -191,7 +191,15 @@ export default function FinancePage() {
return (
-
+
+ Einstellungen
+
+ }
+ />
{assignNotice && (
{assignNotice}{' '}
diff --git a/src/pages/FinanceSettingsPage.jsx b/src/pages/FinanceSettingsPage.jsx
new file mode 100644
index 0000000..8d8d536
--- /dev/null
+++ b/src/pages/FinanceSettingsPage.jsx
@@ -0,0 +1,31 @@
+import { Link } from 'react-router-dom'
+import { FaArrowLeft } from 'react-icons/fa6'
+import { PageHeader, Button } from '../components/ui'
+import SettingsCard from '../components/finance/SettingsCard'
+import BankAccessCard from '../components/finance/BankAccessCard'
+import FixedCostsCard from '../components/finance/FixedCostsCard'
+
+/**
+ * Finanzen / Einstellungen (/finance/einstellungen, nur Admins): Rücklagen und Bankverbindungstext, Bankzugang
+ * (Status, Abruf, neu verbinden) und die Fixkostenliste. Jede Karte lädt und speichert für sich.
+ */
+export default function FinanceSettingsPage() {
+ return (
+
+
+ Zurück zu den Finanzen
+
+ }
+ />
+
+
+
+
+
+