diff --git a/src/app/quickaction-dashboard/register-additional-information/company/page.tsx b/src/app/quickaction-dashboard/register-additional-information/company/page.tsx new file mode 100644 index 0000000..e28b882 --- /dev/null +++ b/src/app/quickaction-dashboard/register-additional-information/company/page.tsx @@ -0,0 +1,317 @@ +'use client' + +import { useState } from 'react' +import PageLayout from '../../../components/PageLayout' + +interface CompanyProfileData { + companyName: string + vatNumber: string + street: string + postalCode: string + city: string + country: string + accountHolder: string + iban: string + bic: string + secondPhone: string + emergencyName: string + emergencyPhone: string +} + +const init: CompanyProfileData = { + companyName: '', + vatNumber: '', + street: '', + postalCode: '', + city: '', + country: '', + accountHolder: '', + iban: '', + bic: '', + secondPhone: '', + emergencyName: '', + emergencyPhone: '' +} + +export default function CompanyAdditionalInformationPage() { + const [form, setForm] = useState(init) + const [loading, setLoading] = useState(false) + const [success, setSuccess] = useState(false) + const [error, setError] = useState('') + + const handleChange = (e: React.ChangeEvent) => { + const { name, value } = e.target + setForm(p => ({ ...p, [name]: value })) + setError('') + } + + const validate = () => { + const required: (keyof CompanyProfileData)[] = [ + 'companyName','vatNumber','street','postalCode','city','country','accountHolder','iban' + ] + for (const k of required) { + if (!form[k].trim()) { + setError('Bitte alle Pflichtfelder ausfüllen.') + return false + } + } + if (!/^([A-Z]{2}\d{2}[A-Z0-9]{10,30})$/i.test(form.iban.replace(/\s+/g,''))) { + setError('Ungültige IBAN.') + return false + } + setError('') + return true + } + + const submit = async (e: React.FormEvent) => { + e.preventDefault() + if (loading || success) return + if (!validate()) return + setLoading(true) + try { + // TODO: POST to backend + await new Promise(r => setTimeout(r, 1300)) + setSuccess(true) + } catch { + setError('Speichern fehlgeschlagen.') + } finally { + setLoading(false) + } + } + + return ( + +
+ {/* Background */} +
+
+ + + +
+
+

+ Complete Company Profile +

+ + {/* Company Details */} +
+

+ Company Details +

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ + {/* Bank Details */} +
+

+ Bank Details +

+
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ + {/* Additional Information */} +
+

+ Additional Information +

+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + {error && ( +
+ {error} +
+ )} + {success && ( +
+ Daten gespeichert. +
+ )} + +
+ +
+
+
+
+ + ) +} diff --git a/src/app/quickaction-dashboard/register-additional-information/personal/page.tsx b/src/app/quickaction-dashboard/register-additional-information/personal/page.tsx new file mode 100644 index 0000000..c969101 --- /dev/null +++ b/src/app/quickaction-dashboard/register-additional-information/personal/page.tsx @@ -0,0 +1,309 @@ +'use client' + +import { useState } from 'react' +import PageLayout from '../../../components/PageLayout' + +interface PersonalProfileData { + dob: string + nationality: string + street: string + postalCode: string + city: string + country: string + accountHolder: string + iban: string + secondPhone: string + emergencyName: string + emergencyPhone: string +} + +const initialData: PersonalProfileData = { + dob: '', + nationality: '', + street: '', + postalCode: '', + city: '', + country: '', + accountHolder: '', + iban: '', + secondPhone: '', + emergencyName: '', + emergencyPhone: '' +} + +export default function PersonalAdditionalInformationPage() { + const [form, setForm] = useState(initialData) + const [loading, setLoading] = useState(false) + const [success, setSuccess] = useState(false) + const [error, setError] = useState('') + + const handleChange = (e: React.ChangeEvent) => { + const { name, value } = e.target + setForm(p => ({ ...p, [name]: value })) + setError('') + } + + const validate = () => { + const requiredKeys: (keyof PersonalProfileData)[] = [ + 'dob','nationality','street','postalCode','city','country','accountHolder','iban' + ] + for (const k of requiredKeys) { + if (!form[k].trim()) { + setError('Bitte alle Pflichtfelder ausfüllen.') + return false + } + } + // very loose IBAN check + if (!/^([A-Z]{2}\d{2}[A-Z0-9]{10,30})$/i.test(form.iban.replace(/\s+/g,''))) { + setError('Ungültige IBAN.') + return false + } + setError('') + return true + } + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault() + if (loading || success) return + if (!validate()) return + setLoading(true) + try { + // TODO: POST to backend + await new Promise(r => setTimeout(r, 1200)) + setSuccess(true) + } catch { + setError('Speichern fehlgeschlagen. Bitte erneut versuchen.') + } finally { + setLoading(false) + } + } + + return ( + +
+ {/* Background */} +
+
+ + + +
+
+

+ Complete Your Profile +

+ + {/* Personal Information */} +
+

+ Personal Information +

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ + {/* Bank Details */} +
+

+ Bank Details +

+
+
+ + +
+
+ + +
+
+
+ +
+ + {/* Additional Information */} +
+

+ Additional Information +

+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + {error && ( +
+ {error} +
+ )} + {success && ( +
+ Daten gespeichert. +
+ )} + +
+ +
+
+
+
+ + ) +}