25fff9b1c3
- Added `useUserStatus` hook to manage user status fetching and state. - Integrated user status in Quick Action Dashboard and related pages. - Enhanced error handling and loading states for user status. - Updated profile completion and document upload flows to refresh user status after actions. - Created a centralized API utility for handling requests and responses. - Refactored authentication token management to use session storage.
315 lines
13 KiB
TypeScript
315 lines
13 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useRef } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import PageLayout from '../../../components/PageLayout'
|
|
import { DocumentArrowUpIcon, XMarkIcon } from '@heroicons/react/24/outline'
|
|
import useAuthStore from '../../../store/authStore'
|
|
import { useUserStatus } from '../../../hooks/useUserStatus'
|
|
|
|
const DOC_TYPES = ['Handelsregisterauszug', 'Gewerbeanmeldung', 'Steuerbescheid', 'Sonstiges']
|
|
|
|
export default function CompanyIdUploadPage() {
|
|
const router = useRouter()
|
|
const { accessToken } = useAuthStore()
|
|
const { refreshStatus } = useUserStatus()
|
|
|
|
const [docNumber, setDocNumber] = useState('')
|
|
const [docType, setDocType] = useState('')
|
|
const [issueDate, setIssueDate] = useState('')
|
|
const [frontFile, setFrontFile] = useState<File | null>(null)
|
|
const [extraFile, setExtraFile] = useState<File | null>(null)
|
|
const [submitting, setSubmitting] = useState(false)
|
|
const [error, setError] = useState('')
|
|
const [success, setSuccess] = useState(false)
|
|
|
|
const frontRef = useRef<HTMLInputElement | null>(null)
|
|
const extraRef = useRef<HTMLInputElement | null>(null)
|
|
|
|
const handleFile = (file: File, which: 'front' | 'extra') => {
|
|
if (file.size > 10 * 1024 * 1024) {
|
|
setError('Datei größer als 10 MB.')
|
|
return
|
|
}
|
|
setError('')
|
|
which === 'front' ? setFrontFile(file) : setExtraFile(file)
|
|
}
|
|
|
|
const dropHandlers = {
|
|
onDragOver: (e: React.DragEvent) => e.preventDefault(),
|
|
onDragEnter: (e: React.DragEvent) => e.preventDefault()
|
|
}
|
|
|
|
const submit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (!docNumber.trim() || !docType || !issueDate || !frontFile) {
|
|
setError('Bitte alle Pflichtfelder (mit *) ausfüllen.')
|
|
return
|
|
}
|
|
|
|
if (!accessToken) {
|
|
setError('Not authenticated. Please log in again.')
|
|
return
|
|
}
|
|
|
|
setError('')
|
|
setSubmitting(true)
|
|
|
|
try {
|
|
const formData = new FormData()
|
|
formData.append('frontFile', frontFile)
|
|
if (extraFile) {
|
|
formData.append('backFile', extraFile)
|
|
}
|
|
formData.append('docType', docType)
|
|
formData.append('docNumber', docNumber.trim())
|
|
formData.append('issueDate', issueDate)
|
|
|
|
const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/upload/company-id`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${accessToken}`
|
|
},
|
|
body: formData
|
|
})
|
|
|
|
if (!response.ok) {
|
|
const errorData = await response.json().catch(() => ({ message: 'Upload failed' }))
|
|
throw new Error(errorData.message || 'Upload failed')
|
|
}
|
|
|
|
setSuccess(true)
|
|
|
|
// Refresh user status to update verification state
|
|
await refreshStatus()
|
|
|
|
// Redirect to next step after short delay
|
|
setTimeout(() => {
|
|
router.push('/quickaction-dashboard/register-additional-information')
|
|
}, 1500)
|
|
|
|
} catch (error: any) {
|
|
console.error('Company ID upload error:', error)
|
|
setError(error.message || 'Upload fehlgeschlagen.')
|
|
} finally {
|
|
setSubmitting(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<PageLayout>
|
|
<div className="relative flex flex-col flex-1 w-full px-5 lg:px-10 py-10">
|
|
{/* Background (same as personal) */}
|
|
<div className="fixed inset-0 -z-10">
|
|
<div className="absolute inset-0 -z-20 bg-gradient-to-b from-gray-900/95 via-gray-900/80 to-gray-900" />
|
|
<svg aria-hidden="true" className="absolute inset-0 -z-10 h-full w-full stroke-white/10">
|
|
<defs>
|
|
<pattern id="company-id-pattern" x="50%" y={-1} width={200} height={200} patternUnits="userSpaceOnUse">
|
|
<path d="M.5 200V.5H200" fill="none" stroke="rgba(255,255,255,0.05)" />
|
|
</pattern>
|
|
</defs>
|
|
<rect fill="url(#company-id-pattern)" width="100%" height="100%" strokeWidth={0} />
|
|
</svg>
|
|
<div aria-hidden="true" className="absolute top-0 right-0 left-1/2 -ml-24 blur-3xl transform-gpu overflow-hidden lg:ml-24 xl:ml-48">
|
|
<div
|
|
className="aspect-[801/1036] w-[50.0625rem] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-50"
|
|
style={{ clipPath: 'polygon(63.1% 29.5%,100% 17.1%,76.6% 3%,48.4% 0%,44.6% 4.7%,54.5% 25.3%,59.8% 49%,55.2% 57.8%,44.4% 57.2%,27.8% 47.9%,35.1% 81.5%,0% 97.7%,39.2% 100%,35.2% 81.4%,97.2% 52.8%,63.1% 29.5%)' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<form
|
|
onSubmit={submit}
|
|
className="relative max-w-7xl w-full mx-auto bg-white rounded-2xl shadow-xl ring-1 ring-black/10 overflow-hidden"
|
|
>
|
|
<div className="px-6 py-8 sm:px-12 lg:px-16">
|
|
<h1 className="text-xl sm:text-2xl font-semibold text-gray-900 mb-1">
|
|
Company Document Verification
|
|
</h1>
|
|
<p className="text-sm text-gray-600 mb-8">
|
|
Upload a valid company registration or compliance document
|
|
</p>
|
|
|
|
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
|
<div className="md:col-span-2">
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Document Number *
|
|
</label>
|
|
<input
|
|
value={docNumber}
|
|
onChange={e => setDocNumber(e.target.value)}
|
|
className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
|
placeholder="Enter reference number"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Document Type *
|
|
</label>
|
|
<select
|
|
value={docType}
|
|
onChange={e => setDocType(e.target.value)}
|
|
className="w-full rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
|
required
|
|
>
|
|
<option value="">Select type</option>
|
|
{DOC_TYPES.map(t => <option key={t} value={t}>{t}</option>)}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 mb-2">
|
|
Issue Date *
|
|
</label>
|
|
<input
|
|
type="date"
|
|
value={issueDate}
|
|
onChange={e => setIssueDate(e.target.value)}
|
|
className="w-full rounded-lg border border-gray-300 px-4 py-2.5 text-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="hidden lg:block"></div>
|
|
</div>
|
|
|
|
{/* Upload Areas */}
|
|
<div className={`mt-8 grid gap-6 ${extraFile ? 'md:grid-cols-2 lg:grid-cols-3' : 'md:grid-cols-2 lg:grid-cols-2'} items-stretch`}>
|
|
<div
|
|
{...dropHandlers}
|
|
onDrop={e => {
|
|
e.preventDefault()
|
|
const f = e.dataTransfer.files?.[0]
|
|
if (f) handleFile(f, 'front')
|
|
}}
|
|
onClick={() => frontRef.current?.click()}
|
|
className="group flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50/60 px-4 py-10 text-center hover:border-indigo-400 hover:bg-indigo-50/40 cursor-pointer transition"
|
|
>
|
|
<input
|
|
ref={frontRef}
|
|
type="file"
|
|
accept="image/*,application/pdf"
|
|
className="hidden"
|
|
onChange={e => {
|
|
const f = e.target.files?.[0]
|
|
if (f) handleFile(f, 'front')
|
|
}}
|
|
/>
|
|
{frontFile ? (
|
|
<div className="flex flex-col items-center">
|
|
<DocumentArrowUpIcon className="h-8 w-8 text-indigo-500 mb-3" />
|
|
<p className="text-sm font-medium text-gray-800">{frontFile.name}</p>
|
|
<button
|
|
type="button"
|
|
onClick={e => { e.stopPropagation(); setFrontFile(null) }}
|
|
className="mt-3 inline-flex items-center gap-1 rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-100"
|
|
>
|
|
<XMarkIcon className="h-4 w-4" /> Remove
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<DocumentArrowUpIcon className="h-10 w-10 text-gray-400 group-hover:text-indigo-500 mb-4 transition" />
|
|
<p className="text-sm font-medium text-indigo-600 group-hover:text-indigo-500">
|
|
Upload primary document *
|
|
</p>
|
|
<p className="mt-2 text-xs text-gray-500">
|
|
PNG, JPG, PDF up to 10MB
|
|
</p>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<div
|
|
{...dropHandlers}
|
|
onDrop={e => {
|
|
e.preventDefault()
|
|
const f = e.dataTransfer.files?.[0]
|
|
if (f) handleFile(f, 'extra')
|
|
}}
|
|
onClick={() => extraRef.current?.click()}
|
|
className="group flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50/60 px-4 py-10 text-center hover:border-indigo-400 hover:bg-indigo-50/40 cursor-pointer transition"
|
|
>
|
|
<input
|
|
ref={extraRef}
|
|
type="file"
|
|
accept="image/*,application/pdf"
|
|
className="hidden"
|
|
onChange={e => {
|
|
const f = e.target.files?.[0]
|
|
if (f) handleFile(f, 'extra')
|
|
}}
|
|
/>
|
|
{extraFile ? (
|
|
<div className="flex flex-col items-center">
|
|
<DocumentArrowUpIcon className="h-8 w-8 text-indigo-500 mb-3" />
|
|
<p className="text-sm font-medium text-gray-800">{extraFile.name}</p>
|
|
<button
|
|
type="button"
|
|
onClick={e => { e.stopPropagation(); setExtraFile(null) }}
|
|
className="mt-3 inline-flex items-center gap-1 rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-600 hover:bg-red-100"
|
|
>
|
|
<XMarkIcon className="h-4 w-4" /> Remove
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<DocumentArrowUpIcon className="h-10 w-10 text-gray-400 group-hover:text-indigo-500 mb-4 transition" />
|
|
<p className="text-sm font-medium text-indigo-600 group-hover:text-indigo-500">
|
|
Optional supporting file
|
|
</p>
|
|
<p className="mt-2 text-xs text-gray-500">
|
|
(Invoice, license, certificate…)
|
|
</p>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
{extraFile && <div className="hidden lg:flex flex-col justify-center rounded-lg border-2 border-dashed border-transparent px-4 py-10 text-center text-xs text-gray-400">
|
|
<span className="font-medium text-gray-500">Extra space for clarity</span>
|
|
</div>}
|
|
</div>
|
|
|
|
{/* Info */}
|
|
<div className="mt-8 rounded-lg bg-indigo-50/60 border border-indigo-100 px-5 py-5">
|
|
<p className="text-sm font-semibold text-indigo-900 mb-3">
|
|
Guidelines:
|
|
</p>
|
|
<ul className="text-sm text-indigo-800 space-y-1 list-disc pl-5">
|
|
<li>Document must be valid & readable</li>
|
|
<li>Complete page (no cropping)</li>
|
|
<li>Good lighting (no glare)</li>
|
|
<li>PDF or clear image</li>
|
|
<li>Supplementary evidence speeds review</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="mt-6 rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-600">
|
|
{error}
|
|
</div>
|
|
)}
|
|
{success && (
|
|
<div className="mt-6 rounded-md border border-green-300 bg-green-50 px-4 py-3 text-sm text-green-700">
|
|
Dokumente erfolgreich hochgeladen.
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-8 flex justify-end">
|
|
<button
|
|
type="submit"
|
|
disabled={submitting || success}
|
|
className="inline-flex items-center justify-center rounded-md bg-indigo-600 px-6 py-3 text-sm font-semibold text-white shadow hover:bg-indigo-500 disabled:bg-gray-400 disabled:cursor-not-allowed transition"
|
|
>
|
|
{submitting ? 'Uploading…' : success ? 'Saved' : 'Upload & Continue'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</PageLayout>
|
|
)
|
|
}
|