beautify: company upload id
This commit is contained in:
DeathKaioken
parent
6cd2a991d4
commit
e0a18f42ea
@ -7,7 +7,7 @@ import useAuthStore from '../../../store/authStore' // NEW
|
||||
import { useEffect, useState } from 'react' // NEW
|
||||
import { useRouter } from 'next/navigation' // NEW
|
||||
|
||||
const DOC_TYPES = ['Handelsregisterauszug', 'Gewerbeanmeldung', 'Steuerbescheid', 'Sonstiges']
|
||||
const DOC_TYPES = ['Personalausweis', 'Reisepass', 'Führerschein', 'Aufenthaltstitel']
|
||||
|
||||
export default function CompanyIdUploadPage() {
|
||||
const {
|
||||
@ -79,25 +79,28 @@ export default function CompanyIdUploadPage() {
|
||||
<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
|
||||
Company Contact Person Identity Verification
|
||||
</h1>
|
||||
<p className="text-sm text-gray-600 mb-8">
|
||||
Upload a valid company registration or compliance document
|
||||
Please upload clear photos of both sides of the company contact person's ID document.
|
||||
</p>
|
||||
|
||||
{/* Fields: 3 in one row on md+ with unified inputs */}
|
||||
<div className="grid gap-6 md:grid-cols-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Document Number *
|
||||
Contact Person ID Number *
|
||||
</label>
|
||||
<input
|
||||
value={docNumber}
|
||||
onChange={e => setDocNumber(e.target.value)}
|
||||
className={`${inputBase} ${docNumber ? 'text-gray-900' : 'text-gray-700'}`}
|
||||
placeholder="Enter reference number"
|
||||
placeholder="Enter contact person's ID number"
|
||||
required
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-600">
|
||||
Enter the ID number exactly as shown on the document
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@ -110,29 +113,33 @@ export default function CompanyIdUploadPage() {
|
||||
className={`${inputBase} ${docType ? 'text-gray-900' : 'text-gray-700'}`}
|
||||
required
|
||||
>
|
||||
<option value="">Select type</option>
|
||||
<option value="">Select document 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 *
|
||||
Expiry Date *
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={issueDate}
|
||||
onChange={e => setIssueDate(e.target.value)}
|
||||
placeholder="tt.mm.jjjj"
|
||||
className={`${inputBase} ${issueDate ? 'text-gray-900' : 'text-gray-700'} appearance-none [&::-webkit-calendar-picker-indicator]:opacity-80`}
|
||||
required
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-600">
|
||||
Enter the expiry date shown on your document
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Back side toggle */}
|
||||
<div className="mt-8 flex items-center gap-3">
|
||||
<span className="text-sm font-medium text-gray-700">
|
||||
Does document have a Backside?
|
||||
Does ID have a Backside?
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
@ -147,7 +154,7 @@ export default function CompanyIdUploadPage() {
|
||||
|
||||
{/* Upload Areas */}
|
||||
<div className={`mt-8 grid gap-6 items-stretch ${hasBack ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1'}`}>
|
||||
{/* Primary document */}
|
||||
{/* Upload ID Front Side */}
|
||||
<div
|
||||
{...dropHandlers}
|
||||
onDrop={e => onDrop(e, 'front')}
|
||||
@ -184,16 +191,18 @@ export default function CompanyIdUploadPage() {
|
||||
<>
|
||||
<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 *
|
||||
Click to upload front side
|
||||
</p>
|
||||
<p className="mt-2 text-xs text-gray-500">
|
||||
PNG, JPG, PDF up to 10MB
|
||||
or drag and drop
|
||||
<br />
|
||||
PNG, JPG, JPEG up to 10MB
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Back/supporting document */}
|
||||
{/* Upload ID Back Side */}
|
||||
{hasBack && (
|
||||
<div
|
||||
{...dropHandlers}
|
||||
@ -231,10 +240,12 @@ export default function CompanyIdUploadPage() {
|
||||
<>
|
||||
<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
|
||||
Click to upload back side
|
||||
</p>
|
||||
<p className="mt-2 text-xs text-gray-500">
|
||||
(Invoice, license, certificate…)
|
||||
or drag and drop
|
||||
<br />
|
||||
PNG, JPG, JPEG up to 10MB
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
@ -245,14 +256,14 @@ export default function CompanyIdUploadPage() {
|
||||
{/* 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:
|
||||
Please ensure your ID documents:
|
||||
</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>
|
||||
<li>Are clearly visible and readable</li>
|
||||
<li>Show all four corners</li>
|
||||
<li>Are not expired</li>
|
||||
<li>Have good lighting (no shadows or glare)</li>
|
||||
<li>{hasBack ? 'Both front and back sides are uploaded' : 'Front side is uploaded'}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user