766 lines
29 KiB
TypeScript
766 lines
29 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useMemo, useRef, useEffect, useCallback } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import PageLayout from '../../../components/PageLayout'
|
|
import useAuthStore from '../../../store/authStore'
|
|
import { useUserStatus } from '../../../hooks/useUserStatus'
|
|
import { useToast } from '../../../components/toast/toastComponent'
|
|
import { ChevronDownIcon } from '@heroicons/react/20/solid' // NEW
|
|
import TelephoneInput, { TelephoneInputHandle } from '../../../components/phone/telephoneInput'
|
|
|
|
interface CompanyProfileData {
|
|
companyName: string
|
|
companyEmail: string
|
|
companyPhone: string
|
|
contactPersonName: string
|
|
contactPersonPhone: string
|
|
vatNumber: string
|
|
street: string
|
|
postalCode: string
|
|
city: string
|
|
country: string
|
|
accountHolder: string
|
|
iban: string
|
|
bic: string
|
|
secondPhone: string
|
|
emergencyName: string
|
|
emergencyPhone: string
|
|
}
|
|
|
|
// Common countries list
|
|
const COUNTRIES = [
|
|
'Germany', 'Austria', 'Switzerland', 'Italy', 'France', 'Spain', 'Portugal', 'Netherlands',
|
|
'Belgium', 'Poland', 'Czech Republic', 'Hungary', 'Croatia', 'Slovenia', 'Slovakia',
|
|
'United Kingdom', 'Ireland', 'Sweden', 'Norway', 'Denmark', 'Finland', 'Russia',
|
|
'Turkey', 'Greece', 'Romania', 'Bulgaria', 'Serbia', 'Albania', 'Bosnia and Herzegovina',
|
|
'United States', 'Canada', 'Brazil', 'Argentina', 'Mexico', 'China', 'Japan',
|
|
'India', 'Pakistan', 'Australia', 'South Africa', 'Other'
|
|
]
|
|
|
|
const init: CompanyProfileData = {
|
|
companyName: '',
|
|
companyEmail: '',
|
|
companyPhone: '',
|
|
contactPersonName: '',
|
|
contactPersonPhone: '',
|
|
vatNumber: '',
|
|
street: '',
|
|
postalCode: '',
|
|
city: '',
|
|
country: '',
|
|
accountHolder: '',
|
|
iban: '',
|
|
bic: '',
|
|
secondPhone: '',
|
|
emergencyName: '',
|
|
emergencyPhone: ''
|
|
}
|
|
|
|
function ModernSelect({
|
|
label,
|
|
placeholder = 'Select…',
|
|
value,
|
|
onChange,
|
|
options,
|
|
}: {
|
|
label: string
|
|
placeholder?: string
|
|
value: string
|
|
onChange: (next: string) => void
|
|
options: { value: string; label: string }[]
|
|
}) {
|
|
const [open, setOpen] = useState(false)
|
|
const [query, setQuery] = useState('')
|
|
const btnRef = useRef<HTMLButtonElement | null>(null)
|
|
const [pos, setPos] = useState({ left: 16, top: 0, width: 320 })
|
|
|
|
const selected = useMemo(() => options.find(o => o.value === value) || null, [options, value])
|
|
const filtered = useMemo(() => {
|
|
const q = query.trim().toLowerCase()
|
|
if (!q) return options
|
|
return options.filter(o => o.label.toLowerCase().includes(q))
|
|
}, [options, query])
|
|
|
|
useEffect(() => {
|
|
if (!open) return
|
|
const update = () => {
|
|
const el = btnRef.current
|
|
if (!el) return
|
|
const r = el.getBoundingClientRect()
|
|
const padding = 16
|
|
const width = Math.min(r.width, window.innerWidth - padding * 2)
|
|
const left = Math.max(padding, Math.min(r.left, window.innerWidth - width - padding))
|
|
const top = r.bottom + 8
|
|
setPos({ left, top, width })
|
|
}
|
|
update()
|
|
window.addEventListener('resize', update)
|
|
window.addEventListener('scroll', update, true)
|
|
return () => {
|
|
window.removeEventListener('resize', update)
|
|
window.removeEventListener('scroll', update, true)
|
|
}
|
|
}, [open])
|
|
|
|
useEffect(() => {
|
|
if (!open) return
|
|
const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false) }
|
|
window.addEventListener('keydown', onKey)
|
|
return () => window.removeEventListener('keydown', onKey)
|
|
}, [open])
|
|
|
|
return (
|
|
<div className="relative">
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">{label} *</label>
|
|
|
|
<button
|
|
ref={btnRef}
|
|
type="button"
|
|
onClick={() => setOpen(v => !v)}
|
|
className="w-full rounded-lg border border-gray-300 bg-white/70 px-3 py-2 text-sm text-left
|
|
shadow-sm hover:border-gray-400
|
|
focus:outline-none focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent
|
|
inline-flex items-center justify-between gap-3"
|
|
aria-haspopup="listbox"
|
|
aria-expanded={open}
|
|
>
|
|
<span className={selected ? 'text-gray-900' : 'text-gray-500'}>
|
|
{selected ? selected.label : placeholder}
|
|
</span>
|
|
<ChevronDownIcon className={`h-5 w-5 text-gray-500 transition-transform ${open ? 'rotate-180' : ''}`} />
|
|
</button>
|
|
|
|
{open && (
|
|
<>
|
|
<div className="fixed inset-0 z-[90]" onClick={() => setOpen(false)} aria-hidden />
|
|
<div
|
|
className="fixed z-[100] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-2xl"
|
|
style={{ left: pos.left, top: pos.top, width: pos.width }}
|
|
>
|
|
<div className="p-2 border-b border-gray-100">
|
|
<input
|
|
value={query}
|
|
onChange={e => setQuery(e.target.value)}
|
|
placeholder="Search…"
|
|
className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm
|
|
focus:outline-none focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent"
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
<div className="max-h-[42vh] overflow-auto p-1">
|
|
{filtered.length === 0 ? (
|
|
<div className="px-3 py-2 text-sm text-gray-500">No results</div>
|
|
) : (
|
|
filtered.map(o => {
|
|
const active = o.value === value
|
|
return (
|
|
<button
|
|
key={o.value}
|
|
type="button"
|
|
onClick={() => { onChange(o.value); setQuery(''); setOpen(false) }}
|
|
className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors
|
|
${active ? 'bg-[#8D6B1D]/10 text-[#7A5E1A] font-semibold' : 'text-gray-800 hover:bg-gray-50'}`}
|
|
role="option"
|
|
aria-selected={active}
|
|
>
|
|
{o.label}
|
|
</button>
|
|
)
|
|
})
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function CompanyAdditionalInformationPage() {
|
|
const router = useRouter()
|
|
const user = useAuthStore(s => s.user) // NEW
|
|
const isAuthReady = useAuthStore(s => (s as any).isAuthReady) // NEW
|
|
const { accessToken } = useAuthStore()
|
|
const { userStatus, loading: statusLoading, refreshStatus } = useUserStatus()
|
|
const { showToast } = useToast()
|
|
const companyPhoneRef = useRef<TelephoneInputHandle | null>(null)
|
|
const contactPhoneRef = useRef<TelephoneInputHandle | null>(null)
|
|
const secondPhoneRef = useRef<TelephoneInputHandle | null>(null)
|
|
const emergencyPhoneRef = useRef<TelephoneInputHandle | null>(null)
|
|
|
|
const [form, setForm] = useState(init)
|
|
const [loading, setLoading] = useState(false)
|
|
const [success, setSuccess] = useState(false)
|
|
const [error, setError] = useState('')
|
|
|
|
// Prefill form with existing profile/user data
|
|
useEffect(() => {
|
|
let abort = false
|
|
async function loadProfile() {
|
|
if (!accessToken) return
|
|
try {
|
|
const res = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/me`, {
|
|
method: 'GET',
|
|
headers: { Authorization: `Bearer ${accessToken}` }
|
|
})
|
|
if (!res.ok) return
|
|
const data = await res.json().catch(() => null)
|
|
const profile = data?.profile
|
|
const me = data?.user
|
|
if ((!profile && !me) || abort) return
|
|
setForm(prev => ({
|
|
...prev,
|
|
companyName: profile?.company_name || me?.companyName || prev.companyName,
|
|
companyEmail: me?.email || prev.companyEmail,
|
|
companyPhone: profile?.phone || me?.companyPhone || prev.companyPhone,
|
|
contactPersonName: profile?.contact_person_name || me?.contactPersonName || prev.contactPersonName,
|
|
contactPersonPhone: profile?.contact_person_phone || me?.contactPersonPhone || prev.contactPersonPhone,
|
|
vatNumber: profile?.registration_number || prev.vatNumber,
|
|
street: profile?.address || prev.street,
|
|
postalCode: profile?.zip_code || prev.postalCode,
|
|
city: profile?.city || prev.city,
|
|
country: profile?.country || prev.country,
|
|
accountHolder: profile?.account_holder_name || prev.accountHolder,
|
|
iban: (me?.iban ?? prev.iban) as string,
|
|
}))
|
|
} catch (_) {
|
|
// ignore prefill errors; user can still fill manually
|
|
}
|
|
}
|
|
loadProfile()
|
|
return () => { abort = true }
|
|
}, [accessToken])
|
|
|
|
// NEW: smooth redirect
|
|
const [redirectTo, setRedirectTo] = useState<string | null>(null)
|
|
const redirectOnceRef = useRef(false)
|
|
const suppressAutoRedirectRef = useRef(false)
|
|
const smoothReplace = useCallback((to: string) => {
|
|
if (redirectOnceRef.current) return
|
|
redirectOnceRef.current = true
|
|
setRedirectTo(to)
|
|
window.setTimeout(() => router.replace(to), 200)
|
|
}, [router])
|
|
|
|
// NEW: hard block if step already done OR all steps done
|
|
useEffect(() => {
|
|
if (statusLoading || !userStatus) return
|
|
if (suppressAutoRedirectRef.current) return
|
|
const allDone =
|
|
!!userStatus.email_verified &&
|
|
!!userStatus.documents_uploaded &&
|
|
!!userStatus.profile_completed &&
|
|
!!userStatus.contract_signed
|
|
|
|
if (allDone) {
|
|
smoothReplace('/dashboard') // CHANGED
|
|
} else if (userStatus.profile_completed) {
|
|
smoothReplace('/quickaction-dashboard') // CHANGED
|
|
}
|
|
}, [statusLoading, userStatus, smoothReplace])
|
|
|
|
// NEW: must be logged in
|
|
useEffect(() => {
|
|
if (!isAuthReady) return
|
|
if (!user || !accessToken) smoothReplace('/login')
|
|
}, [isAuthReady, user, accessToken, smoothReplace])
|
|
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
|
|
const { name, value } = e.target
|
|
setForm(p => ({ ...p, [name]: value }))
|
|
setError('')
|
|
}
|
|
|
|
const validate = () => {
|
|
const required: (keyof CompanyProfileData)[] = [
|
|
'companyName','companyEmail','companyPhone','contactPersonName','contactPersonPhone',
|
|
'vatNumber','street','postalCode','city','country','accountHolder','iban'
|
|
]
|
|
for (const k of required) {
|
|
if (!form[k].trim()) {
|
|
const msg = 'Bitte alle Pflichtfelder ausfüllen.'
|
|
setError(msg)
|
|
showToast({
|
|
variant: 'error',
|
|
title: 'Missing information',
|
|
message: msg,
|
|
})
|
|
return false
|
|
}
|
|
}
|
|
|
|
const companyApi = companyPhoneRef.current
|
|
const contactApi = contactPhoneRef.current
|
|
const companyDialCode = companyApi?.getDialCode?.()
|
|
const contactDialCode = contactApi?.getDialCode?.()
|
|
const companyNumber = companyApi?.getNumber() || ''
|
|
const contactNumber = contactApi?.getNumber() || ''
|
|
const companyValid = companyApi?.isValid() ?? false
|
|
const contactValid = contactApi?.isValid() ?? false
|
|
|
|
if (!companyDialCode || !contactDialCode) {
|
|
const msg = 'Please select country codes for company and contact phone numbers.'
|
|
setError(msg)
|
|
showToast({
|
|
variant: 'error',
|
|
title: 'Missing country code',
|
|
message: msg,
|
|
})
|
|
return false
|
|
}
|
|
if (!companyNumber || !contactNumber) {
|
|
const msg = 'Please enter both company and contact phone numbers.'
|
|
setError(msg)
|
|
showToast({
|
|
variant: 'error',
|
|
title: 'Missing phone numbers',
|
|
message: msg,
|
|
})
|
|
return false
|
|
}
|
|
if (!companyValid || !contactValid) {
|
|
const msg = 'Please enter valid phone numbers for company and contact person.'
|
|
setError(msg)
|
|
showToast({
|
|
variant: 'error',
|
|
title: 'Invalid phone numbers',
|
|
message: msg,
|
|
})
|
|
return false
|
|
}
|
|
|
|
const optionalSecond = form.secondPhone.trim()
|
|
if (optionalSecond) {
|
|
const secondApi = secondPhoneRef.current
|
|
const ok = secondApi?.isValid?.() ?? false
|
|
if (!ok) {
|
|
const msg = 'Please enter a valid second phone number.'
|
|
setError(msg)
|
|
showToast({
|
|
variant: 'error',
|
|
title: 'Invalid phone number',
|
|
message: msg,
|
|
})
|
|
return false
|
|
}
|
|
}
|
|
const optionalEmergency = form.emergencyPhone.trim()
|
|
if (optionalEmergency) {
|
|
const emergencyApi = emergencyPhoneRef.current
|
|
const ok = emergencyApi?.isValid?.() ?? false
|
|
if (!ok) {
|
|
const msg = 'Please enter a valid emergency phone number.'
|
|
setError(msg)
|
|
showToast({
|
|
variant: 'error',
|
|
title: 'Invalid phone number',
|
|
message: msg,
|
|
})
|
|
return false
|
|
}
|
|
}
|
|
if (!/^([A-Z]{2}\d{2}[A-Z0-9]{10,30})$/i.test(form.iban.replace(/\s+/g,''))) {
|
|
const msg = 'Ungültige IBAN.'
|
|
setError(msg)
|
|
showToast({
|
|
variant: 'error',
|
|
title: 'Invalid IBAN',
|
|
message: msg,
|
|
})
|
|
return false
|
|
}
|
|
setError('')
|
|
return true
|
|
}
|
|
|
|
const submit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (loading || success) return
|
|
if (!validate()) return
|
|
|
|
if (!accessToken) {
|
|
const msg = 'Not authenticated. Please log in again.'
|
|
setError(msg)
|
|
showToast({
|
|
variant: 'error',
|
|
title: 'Authentication error',
|
|
message: msg,
|
|
})
|
|
return
|
|
}
|
|
|
|
setLoading(true)
|
|
|
|
try {
|
|
const normalizedCompanyPhone = companyPhoneRef.current?.getNumber() || form.companyPhone
|
|
const normalizedContactPhone = contactPhoneRef.current?.getNumber() || form.contactPersonPhone
|
|
const normalizedSecondPhone = secondPhoneRef.current?.getNumber() || form.secondPhone
|
|
const normalizedEmergencyPhone = emergencyPhoneRef.current?.getNumber() || form.emergencyPhone
|
|
|
|
// Prepare data for backend with correct field names
|
|
const profileData = {
|
|
companyName: form.companyName,
|
|
companyPhone: normalizedCompanyPhone,
|
|
contactPersonName: form.contactPersonName,
|
|
contactPersonPhone: normalizedContactPhone,
|
|
address: form.street, // Backend expects 'address', not nested object
|
|
zip_code: form.postalCode, // Backend expects 'zip_code'
|
|
city: form.city,
|
|
country: form.country,
|
|
registrationNumber: form.vatNumber, // Map VAT number to registration number
|
|
businessType: 'company', // Default business type
|
|
branch: null, // Not collected in form, set to null
|
|
numberOfEmployees: null, // Not collected in form, set to null
|
|
accountHolderName: form.accountHolder, // Backend expects 'accountHolderName'
|
|
iban: form.iban.replace(/\s+/g, ''), // Remove spaces from IBAN
|
|
secondPhone: normalizedSecondPhone || null,
|
|
emergencyContactName: form.emergencyName || null,
|
|
emergencyContactPhone: normalizedEmergencyPhone || null
|
|
}
|
|
|
|
const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/profile/company/complete`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${accessToken}`,
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(profileData)
|
|
})
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json().catch(() => ({ message: 'Save failed' }))
|
|
throw new Error(errorData.message || 'Save failed')
|
|
}
|
|
|
|
setSuccess(true)
|
|
showToast({
|
|
variant: 'success',
|
|
title: 'Profile saved',
|
|
message: 'Your company profile has been saved successfully.',
|
|
})
|
|
|
|
// Refresh user status to update profile completion state
|
|
suppressAutoRedirectRef.current = true
|
|
await refreshStatus()
|
|
|
|
// Redirect back to tutorial modal after short delay
|
|
setTimeout(() => {
|
|
smoothReplace('/quickaction-dashboard?tutorial=true')
|
|
}, 1500)
|
|
|
|
} catch (error: any) {
|
|
console.error('Company profile save error:', error)
|
|
const msg = error.message || 'Speichern fehlgeschlagen.'
|
|
setError(msg)
|
|
showToast({
|
|
variant: 'error',
|
|
title: 'Save failed',
|
|
message: msg,
|
|
})
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const setField = (name: keyof CompanyProfileData, value: string) => {
|
|
setForm(p => ({ ...p, [name]: value }))
|
|
setError('')
|
|
}
|
|
|
|
return (
|
|
<PageLayout>
|
|
{/* NEW: smooth redirect overlay */}
|
|
{redirectTo && (
|
|
<div className="fixed inset-0 z-[200] flex items-center justify-center bg-white/70 backdrop-blur-sm transition-opacity duration-200 opacity-100">
|
|
<div className="rounded-xl bg-white px-5 py-4 shadow ring-1 ring-black/5">
|
|
<div className="text-sm font-medium text-gray-900">Redirecting…</div>
|
|
<div className="mt-1 text-xs text-gray-600">Please wait</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="relative min-h-screen overflow-hidden bg-slate-50">
|
|
{/* Animated background (same as dashboard) */}
|
|
<div className="pointer-events-none absolute inset-0 z-0">
|
|
{/* Soft gradient blobs */}
|
|
<div className="absolute -top-32 -left-20 h-80 w-80 rounded-full bg-blue-400/25 blur-3xl animate-pulse" />
|
|
<div className="absolute top-1/4 -right-24 h-96 w-96 rounded-full bg-emerald-400/20 blur-3xl animate-pulse" />
|
|
<div className="absolute bottom-[-6rem] left-1/4 h-96 w-96 rounded-full bg-indigo-400/20 blur-3xl animate-pulse" />
|
|
{/* Subtle radial highlight */}
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(59,130,246,0.14),transparent_60%)]" />
|
|
</div>
|
|
|
|
<main className="relative z-10 flex flex-col flex-1 w-full px-5 sm:px-8 lg:px-12 py-12">
|
|
<form
|
|
onSubmit={submit}
|
|
className="relative max-w-6xl w-full mx-auto bg-white rounded-2xl shadow-xl ring-1 ring-black/10"
|
|
>
|
|
<div className="px-6 py-8 sm:px-10 lg:px-16">
|
|
<h1 className="text-center text-xl sm:text-2xl font-semibold text-[#0F172A] mb-6">
|
|
Complete Company Profile
|
|
</h1>
|
|
|
|
{/* Company Details */}
|
|
<section>
|
|
<h2 className="text-sm font-semibold text-[#0F2460] mb-4">
|
|
Company Details
|
|
</h2>
|
|
<div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
|
|
<div className="sm:col-span-2 lg:col-span-3">
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Company Name *
|
|
</label>
|
|
<input
|
|
name="companyName"
|
|
value={form.companyName}
|
|
onChange={handleChange}
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="sm:col-span-2 lg:col-span-3">
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Company Email *
|
|
</label>
|
|
<input
|
|
name="companyEmail"
|
|
value={form.companyEmail}
|
|
onChange={handleChange}
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm bg-gray-50 text-gray-700 focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent"
|
|
readOnly
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Company Phone *
|
|
</label>
|
|
<TelephoneInput
|
|
name="companyPhone"
|
|
value={form.companyPhone}
|
|
onChange={handleChange}
|
|
placeholder="e.g. +43 1 234567"
|
|
ref={companyPhoneRef}
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Contact Person *
|
|
</label>
|
|
<input
|
|
name="contactPersonName"
|
|
value={form.contactPersonName}
|
|
onChange={handleChange}
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Contact Person Phone *
|
|
</label>
|
|
<TelephoneInput
|
|
name="contactPersonPhone"
|
|
value={form.contactPersonPhone}
|
|
onChange={handleChange}
|
|
placeholder="e.g. +43 676 1234567"
|
|
ref={contactPhoneRef}
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
VAT / Reg No. *
|
|
</label>
|
|
<input
|
|
name="vatNumber"
|
|
value={form.vatNumber}
|
|
onChange={handleChange}
|
|
placeholder="e.g. DE123456789"
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm uppercase focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="sm:col-span-2 lg:col-span-3">
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Street & Number *
|
|
</label>
|
|
<input
|
|
name="street"
|
|
value={form.street}
|
|
onChange={handleChange}
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Postal Code *
|
|
</label>
|
|
<input
|
|
name="postalCode"
|
|
value={form.postalCode}
|
|
onChange={handleChange}
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
City *
|
|
</label>
|
|
<input
|
|
name="city"
|
|
value={form.city}
|
|
onChange={handleChange}
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<ModernSelect
|
|
label="Country"
|
|
placeholder="Select country..."
|
|
value={form.country}
|
|
onChange={(v) => setField('country', v)}
|
|
options={COUNTRIES.map(c => ({ value: c, label: c }))}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<hr className="my-8 border-gray-200" />
|
|
|
|
{/* Bank Details */}
|
|
<section>
|
|
<h2 className="text-sm font-semibold text-[#0F2460] mb-4">
|
|
Bank Details
|
|
</h2>
|
|
<div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
|
|
<div className="sm:col-span-2 lg:col-span-3">
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Account Holder *
|
|
</label>
|
|
<input
|
|
name="accountHolder"
|
|
value={form.accountHolder}
|
|
onChange={handleChange}
|
|
placeholder="Company / Holder name"
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="sm:col-span-2 lg:col-span-2">
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
IBAN *
|
|
</label>
|
|
<input
|
|
name="iban"
|
|
value={form.iban}
|
|
onChange={handleChange}
|
|
placeholder="DE89 3704 0044 0532 0130 00"
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm tracking-wide uppercase focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
BIC (optional)
|
|
</label>
|
|
<input
|
|
name="bic"
|
|
value={form.bic}
|
|
onChange={handleChange}
|
|
placeholder="GENODEF1XXX"
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm uppercase focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<hr className="my-8 border-gray-200" />
|
|
|
|
{/* Additional Information */}
|
|
<section>
|
|
<h2 className="text-sm font-semibold text-[#0F2460] mb-4">
|
|
Additional Information
|
|
</h2>
|
|
<div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
|
|
<div className="sm:col-span-2 lg:col-span-3">
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Second Phone (optional)
|
|
</label>
|
|
<TelephoneInput
|
|
name="secondPhone"
|
|
value={form.secondPhone}
|
|
onChange={handleChange}
|
|
placeholder="+49 123 456 7890"
|
|
ref={secondPhoneRef}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Emergency Contact Name
|
|
</label>
|
|
<input
|
|
name="emergencyName"
|
|
value={form.emergencyName}
|
|
onChange={handleChange}
|
|
placeholder="Contact name"
|
|
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-[#8D6B1D] focus:border-transparent"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-1">
|
|
Emergency Contact Phone
|
|
</label>
|
|
<TelephoneInput
|
|
name="emergencyPhone"
|
|
value={form.emergencyPhone}
|
|
onChange={handleChange}
|
|
placeholder="+49 123 456 7890"
|
|
ref={emergencyPhoneRef}
|
|
/>
|
|
</div>
|
|
<div className="hidden lg:block" />
|
|
</div>
|
|
</section>
|
|
|
|
{error && (
|
|
<div className="mt-6 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-xs text-red-600">
|
|
{error}
|
|
</div>
|
|
)}
|
|
{success && (
|
|
<div className="mt-6 rounded-md border border-green-300 bg-green-50 px-4 py-3 text-xs text-green-700">
|
|
Data saved. Redirecting shortly…
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-10 flex items-center justify-between">
|
|
<button
|
|
type="button"
|
|
onClick={() => router.push('/quickaction-dashboard')}
|
|
className="inline-flex items-center rounded-md border border-[#8D6B1D]/40 px-4 py-2 text-sm font-semibold text-[#8D6B1D] bg-white hover:bg-[#8D6B1D]/10"
|
|
>
|
|
Back to Dashboard
|
|
</button>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loading || success}
|
|
className="inline-flex items-center rounded-md bg-[#8D6B1D] px-6 py-2.5 text-sm font-semibold text-white shadow hover:bg-[#7A5E1A] focus:outline-none focus:ring-2 focus:ring-[#8D6B1D] focus:ring-offset-2 disabled:bg-gray-400 disabled:cursor-not-allowed"
|
|
>
|
|
{loading ? 'Speichern…' : success ? 'Gespeichert' : 'Save & Continue'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</main>
|
|
</div>
|
|
</PageLayout>
|
|
)
|
|
}
|