From e0a18f42eac1740402c538505ec7eac4eedfcb36 Mon Sep 17 00:00:00 2001
From: DeathKaioken <alex.ibrahim@eitk.com>
Date: Wed, 22 Oct 2025 19:33:58 +0200
Subject: [PATCH] beautify: company upload id

---
 .../register-upload-id/company/page.tsx       | 51 +++++++++++--------
 1 file changed, 31 insertions(+), 20 deletions(-)

diff --git a/src/app/quickaction-dashboard/register-upload-id/company/page.tsx b/src/app/quickaction-dashboard/register-upload-id/company/page.tsx
index d710c6b..837ece2 100644
--- a/src/app/quickaction-dashboard/register-upload-id/company/page.tsx
+++ b/src/app/quickaction-dashboard/register-upload-id/company/page.tsx
@@ -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&apos;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>