116 lines
4.7 KiB
TypeScript
116 lines
4.7 KiB
TypeScript
'use client'
|
||
|
||
import { trpc } from '@/lib/trpc-client'
|
||
import { useState } from 'react'
|
||
|
||
export default function EinstellungenPage() {
|
||
const { data: org, isLoading } = trpc.organizations.me.useQuery()
|
||
const updateMutation = trpc.organizations.update.useMutation()
|
||
const avvMutation = trpc.organizations.acceptAvv.useMutation()
|
||
|
||
const [name, setName] = useState('')
|
||
const [contactEmail, setContactEmail] = useState('')
|
||
|
||
if (isLoading) return <div className="text-gray-500">Wird geladen...</div>
|
||
if (!org) return null
|
||
|
||
return (
|
||
<div className="max-w-2xl space-y-8">
|
||
<h1 className="text-2xl font-bold text-gray-900">Einstellungen</h1>
|
||
|
||
{/* Org Settings */}
|
||
<div className="bg-white rounded-xl border shadow-sm p-6 space-y-4">
|
||
<h2 className="font-semibold text-gray-900">Innung</h2>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">Name der Innung</label>
|
||
<input
|
||
defaultValue={org.name}
|
||
onChange={(e) => setName(e.target.value)}
|
||
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-1">Kontakt-E-Mail</label>
|
||
<input
|
||
type="email"
|
||
defaultValue={org.contactEmail ?? ''}
|
||
onChange={(e) => setContactEmail(e.target.value)}
|
||
className="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500"
|
||
/>
|
||
</div>
|
||
<button
|
||
onClick={() => updateMutation.mutate({ name: name || undefined, contactEmail: contactEmail || undefined })}
|
||
disabled={updateMutation.isPending}
|
||
className="bg-brand-500 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-brand-600 disabled:opacity-60 transition-colors"
|
||
>
|
||
{updateMutation.isPending ? 'Wird gespeichert...' : 'Speichern'}
|
||
</button>
|
||
{updateMutation.isSuccess && (
|
||
<p className="text-sm text-green-600">Einstellungen gespeichert ✓</p>
|
||
)}
|
||
</div>
|
||
|
||
{/* AVV */}
|
||
<div className="bg-white rounded-xl border shadow-sm p-6 space-y-4">
|
||
<h2 className="font-semibold text-gray-900">Auftragsverarbeitungsvertrag (AVV)</h2>
|
||
<p className="text-sm text-gray-600">
|
||
Der AVV regelt die Verarbeitung personenbezogener Daten im Auftrag Ihrer Innung
|
||
durch InnungsApp GmbH gemäß Art. 28 DSGVO.
|
||
</p>
|
||
<a
|
||
href="/avv.pdf"
|
||
download
|
||
className="inline-flex items-center gap-2 text-sm text-brand-600 hover:underline"
|
||
>
|
||
📄 AVV als PDF herunterladen
|
||
</a>
|
||
{org.avvAccepted ? (
|
||
<div className="bg-green-50 border border-green-200 rounded-lg p-4">
|
||
<p className="text-sm text-green-700 font-medium">
|
||
✓ AVV akzeptiert am {org.avvAcceptedAt?.toLocaleDateString('de-DE')}
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-4 space-y-3">
|
||
<p className="text-sm text-yellow-800 font-medium">
|
||
⚠️ Der AVV muss vor dem Go-Live akzeptiert werden.
|
||
</p>
|
||
<label className="flex items-start gap-2 cursor-pointer">
|
||
<input
|
||
type="checkbox"
|
||
id="avv-check"
|
||
className="mt-0.5 rounded border-gray-300"
|
||
/>
|
||
<span className="text-sm text-gray-700">
|
||
Ich bestätige, dass ich den AVV gelesen habe und im Namen der Innung akzeptiere.
|
||
</span>
|
||
</label>
|
||
<button
|
||
onClick={() => {
|
||
const cb = document.getElementById('avv-check') as HTMLInputElement
|
||
if (!cb.checked) { alert('Bitte bestätigen Sie den AVV.'); return }
|
||
avvMutation.mutate()
|
||
}}
|
||
disabled={avvMutation.isPending}
|
||
className="bg-brand-500 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-brand-600 disabled:opacity-60 transition-colors"
|
||
>
|
||
AVV verbindlich akzeptieren
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Plan Info */}
|
||
<div className="bg-white rounded-xl border shadow-sm p-6">
|
||
<h2 className="font-semibold text-gray-900 mb-2">Plan</h2>
|
||
<span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-brand-100 text-brand-700 capitalize">
|
||
{org.plan}
|
||
</span>
|
||
<p className="text-sm text-gray-500 mt-2">
|
||
Für Upgrades oder Fragen zum Plan: kontakt@innungsapp.de
|
||
</p>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|