96 lines
4.0 KiB
TypeScript
96 lines
4.0 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import Link from 'next/link'
|
|
import { ArrowLeft, UserPlus, Loader2 } from 'lucide-react'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
import { createEndCustomer } from '@/lib/actions/end-customers'
|
|
|
|
export default function NewCustomerPage() {
|
|
const router = useRouter()
|
|
const [saving, setSaving] = useState(false)
|
|
const [form, setForm] = useState({
|
|
company_name: '', vat_id: '', first_name: '', last_name: '', street: '', zip: '', city: '', email: '',
|
|
})
|
|
|
|
const handleSave = async () => {
|
|
if (!form.company_name.trim()) return
|
|
setSaving(true)
|
|
try {
|
|
await createEndCustomer(form)
|
|
router.push('/my-customers')
|
|
} catch (e) {
|
|
alert('Fehler beim Anlegen des Kunden.')
|
|
setSaving(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#020617] text-white px-4 py-12">
|
|
<div className="max-w-2xl mx-auto space-y-6">
|
|
<div className="flex items-center gap-4">
|
|
<Link href="/my-customers">
|
|
<Button variant="ghost" size="sm" className="text-slate-400 hover:text-white">
|
|
<ArrowLeft className="w-4 h-4 mr-2" /> Zurück
|
|
</Button>
|
|
</Link>
|
|
<h1 className="text-2xl font-extrabold tracking-tight flex items-center gap-2">
|
|
<UserPlus className="w-6 h-6 text-primary" />
|
|
Neuen Endkunden anlegen
|
|
</h1>
|
|
</div>
|
|
|
|
<Card className="glass-dark border-white/10">
|
|
<CardHeader>
|
|
<CardTitle className="text-white">Stammdaten</CardTitle>
|
|
<CardDescription className="text-slate-400">
|
|
Legen Sie einen neuen Endkunden an. Diese Daten stehen sofort im Bestellwizard zur Auswahl.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid md:grid-cols-2 gap-4">
|
|
{([
|
|
{ label: 'Firmenname *', key: 'company_name', span: true, placeholder: 'GmbH / KG / Einzelunternehmen' },
|
|
{ label: 'USt-IdNr.', key: 'vat_id', span: false, placeholder: 'DE123456789' },
|
|
{ label: 'Vorname', key: 'first_name', span: false, placeholder: '' },
|
|
{ label: 'Nachname', key: 'last_name', span: false, placeholder: '' },
|
|
{ label: 'E-Mail', key: 'email', span: true, placeholder: 'kunde@beispiel.de' },
|
|
{ label: 'Straße & Hausnummer', key: 'street', span: true, placeholder: 'Musterstraße 1' },
|
|
{ label: 'PLZ', key: 'zip', span: false, placeholder: '12345' },
|
|
{ label: 'Ort', key: 'city', span: false, placeholder: 'Musterstadt' },
|
|
] as const).map(({ label, key, span, placeholder }) => (
|
|
<div key={key} className={`space-y-1.5 ${span ? 'md:col-span-2' : ''}`}>
|
|
<Label className="text-slate-300 text-sm">{label}</Label>
|
|
<Input
|
|
value={form[key]}
|
|
onChange={e => setForm(prev => ({ ...prev, [key]: e.target.value }))}
|
|
placeholder={placeholder}
|
|
className="bg-white/5 border-white/10 text-white placeholder:text-slate-500"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="flex gap-3 pt-2">
|
|
<Button
|
|
onClick={handleSave}
|
|
disabled={saving || !form.company_name.trim()}
|
|
className="gap-2"
|
|
>
|
|
{saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <UserPlus className="w-4 h-4" />}
|
|
Kunden anlegen
|
|
</Button>
|
|
<Link href="/my-customers">
|
|
<Button variant="ghost">Abbrechen</Button>
|
|
</Link>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|