beautify: fix personal and company upload id

src/app/quickaction-dashboard/register-upload-id/company/hooks/useCompanyUploadId.ts

@@ -0,0 +1,150 @@
+'use client'
+
+import { useState, useRef, useEffect, useCallback } from 'react'
+import useAuthStore from '../../../../store/authStore'
+import { useUserStatus } from '../../../../hooks/useUserStatus'
+
+export function useCompanyUploadId() {
+	// Auth + status
+	const { accessToken } = useAuthStore()
+	const { refreshStatus } = useUserStatus()
+
+	// Form state
+	const [docNumber, setDocNumber] = useState('')
+	const [docType, setDocType] = useState('')
+	const [issueDate, setIssueDate] = useState('')
+	const [hasBack, setHasBack] = useState(true)
+
+	// Files + previews
+	const [frontFile, setFrontFile] = useState<File | null>(null)
+	const [extraFile, setExtraFile] = useState<File | null>(null)
+	const [frontPreview, setFrontPreview] = useState<string | null>(null)
+	const [extraPreview, setExtraPreview] = useState<string | null>(null)
+
+	// UI state
+	const [submitting, setSubmitting] = useState(false)
+	const [error, setError] = useState('')
+	const [success, setSuccess] = useState(false)
+
+	// Refs
+	const frontRef = useRef<HTMLInputElement | null>(null)
+	const extraRef = useRef<HTMLInputElement | null>(null)
+
+	// Unified input style
+	const inputBase =
+		'w-full h-11 rounded-lg border border-gray-300 px-4 text-sm text-gray-900 placeholder:text-gray-900 placeholder:opacity-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white'
+
+	// File handlers
+	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 onDrop = (e: React.DragEvent, which: 'front' | 'extra') => {
+		e.preventDefault()
+		const f = e.dataTransfer.files?.[0]
+		if (f) handleFile(f, which)
+	}
+
+	const clearFile = (which: 'front' | 'extra') => {
+		which === 'front' ? setFrontFile(null) : setExtraFile(null)
+	}
+
+	const dropHandlers = {
+		onDragOver: (e: React.DragEvent) => e.preventDefault(),
+		onDragEnter: (e: React.DragEvent) => e.preventDefault(),
+	}
+
+	const openPicker = useCallback((which: 'front' | 'extra') => {
+		(which === 'front' ? frontRef.current : extraRef.current)?.click()
+	}, [])
+
+	// Previews (images only)
+	useEffect(() => {
+		if (!frontFile || !frontFile.type?.startsWith('image/')) { setFrontPreview(null); return }
+		const url = URL.createObjectURL(frontFile)
+		setFrontPreview(url)
+		return () => URL.revokeObjectURL(url)
+	}, [frontFile])
+
+	useEffect(() => {
+		if (!extraFile || !extraFile.type?.startsWith('image/')) { setExtraPreview(null); return }
+		const url = URL.createObjectURL(extraFile)
+		setExtraPreview(url)
+		return () => URL.revokeObjectURL(url)
+	}, [extraFile])
+
+	// Validation
+	const validate = () => {
+		if (!docNumber.trim() || !docType || !issueDate || !frontFile) {
+			setError('Bitte alle Pflichtfelder (mit *) ausfüllen.')
+			return false
+		}
+		setError('')
+		return true
+	}
+
+	// Submit
+	const submit = async (e: React.FormEvent) => {
+		e.preventDefault()
+		if (!validate()) return
+		if (!accessToken) {
+			setError('Not authenticated. Please log in again.')
+		 return
+		}
+
+		setSubmitting(true)
+		setError('')
+
+		try {
+			const formData = new FormData()
+			if (frontFile) formData.append('frontFile', frontFile)
+			if (hasBack && 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)
+			await refreshStatus()
+
+			setTimeout(() => {
+				// keep same redirect as page used before
+				window.location.href = '/quickaction-dashboard/register-additional-information'
+			}, 1500)
+		} catch (err: any) {
+			console.error('Company ID upload error:', err)
+			setError(err?.message || 'Upload fehlgeschlagen.')
+		} finally {
+			setSubmitting(false)
+		}
+	}
+
+	return {
+		// values
+		docNumber, docType, issueDate, hasBack,
+		frontFile, extraFile,
+		frontPreview, extraPreview,
+		submitting, error, success,
+		frontRef, extraRef,
+		inputBase,
+		// setters
+		setDocNumber, setDocType, setIssueDate, setHasBack, setExtraFile,
+		// handlers
+		handleFile, onDrop, clearFile, dropHandlers, openPicker, submit,
+	}
+}

src/app/quickaction-dashboard/register-upload-id/company/page.tsx

@@ -1,99 +1,57 @@
 '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 { useCompanyUploadId } from './hooks/useCompanyUploadId'
-import { useUserStatus } from '../../../hooks/useUserStatus'
+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']
 
 export default function CompanyIdUploadPage() {
-  const router = useRouter()
+  const {
-  const { accessToken } = useAuthStore()
+    // values
-  const { refreshStatus } = useUserStatus()
+    docNumber, setDocNumber,
-  
+    docType, setDocType,
-  const [docNumber, setDocNumber] = useState('')
+    issueDate, setIssueDate,
-  const [docType, setDocType] = useState('')
+    hasBack, setHasBack, setExtraFile,
-  const [issueDate, setIssueDate] = useState('')
+    frontFile, extraFile,
-  const [frontFile, setFrontFile] = useState<File | null>(null)
+    frontPreview, extraPreview,
-  const [extraFile, setExtraFile] = useState<File | null>(null)
+    submitting, error, success,
-  const [submitting, setSubmitting] = useState(false)
+    frontRef, extraRef,
-  const [error, setError] = useState('')
+    inputBase,
-  const [success, setSuccess] = useState(false)
+    // handlers
+    handleFile, onDrop, clearFile, dropHandlers, openPicker, submit,
+  } = useCompanyUploadId()
 
-  const frontRef = useRef<HTMLInputElement | null>(null)
+  const user = useAuthStore(s => s.user) // NEW
-  const extraRef = useRef<HTMLInputElement | null>(null)
+  const router = useRouter() // NEW
+  const [blocked, setBlocked] = useState(false) // NEW
 
-  const handleFile = (file: File, which: 'front' | 'extra') => {
+  // Guard: only 'company' users allowed on this page
-    if (file.size > 10 * 1024 * 1024) {
+  useEffect(() => {
-      setError('Datei größer als 10 MB.')
+    const ut = (user as any)?.userType || (user as any)?.role
-      return
+    console.log('🧭 UploadID Guard [company]: userType =', ut)
+    if (ut && ut !== 'company') {
+      console.warn('🚫 UploadID Guard [company]: access denied for userType:', ut, '-> redirecting to personal upload')
+      setBlocked(true)
+      router.replace('/quickaction-dashboard/register-upload-id/personal')
+    } else if (ut === 'company') {
+      console.log('✅ UploadID Guard [company]: access granted')
     }
-    setError('')
+  }, [user, router])
-    which === 'front' ? setFrontFile(file) : setExtraFile(file)
-  }
 
-  const dropHandlers = {
+  if (blocked) {
-    onDragOver: (e: React.DragEvent) => e.preventDefault(),
+    return (
-    onDragEnter: (e: React.DragEvent) => e.preventDefault()
+      <PageLayout>
-  }
+        <div className="min-h-[50vh] flex items-center justify-center">
-
+          <div className="text-center text-sm text-gray-600">
-  const submit = async (e: React.FormEvent) => {
+            Redirecting to the correct upload page…
-    e.preventDefault()
+          </div>
-    if (!docNumber.trim() || !docType || !issueDate || !frontFile) {
+        </div>
-      setError('Bitte alle Pflichtfelder (mit *) ausfüllen.')
+      </PageLayout>
-      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 (
@@ -118,10 +76,7 @@ export default function CompanyIdUploadPage() {
           </div>
         </div>
 
-        <form
+        <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">
-          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
@@ -130,15 +85,16 @@ export default function CompanyIdUploadPage() {
               Upload a valid company registration or compliance document
             </p>
 
-            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            {/* Fields: 3 in one row on md+ with unified inputs */}
-              <div className="md:col-span-2">
+            <div className="grid gap-6 md:grid-cols-3">
+              <div>
                 <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"
+                  className={`${inputBase} ${docNumber ? 'text-gray-900' : 'text-gray-700'}`}
                   placeholder="Enter reference number"
                   required
                 />
@@ -151,7 +107,7 @@ export default function CompanyIdUploadPage() {
                 <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"
+                  className={`${inputBase} ${docType ? 'text-gray-900' : 'text-gray-700'}`}
                   required
                 >
                   <option value="">Select type</option>
@@ -167,43 +123,58 @@ export default function CompanyIdUploadPage() {
                   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"
+                  className={`${inputBase} ${issueDate ? 'text-gray-900' : 'text-gray-700'} appearance-none [&::-webkit-calendar-picker-indicator]:opacity-80`}
                   required
                 />
               </div>
+            </div>
 
-              <div className="hidden lg:block"></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?
+              </span>
+              <button
+                type="button"
+                onClick={() => setHasBack(v => { const next = !v; if (!next) setExtraFile(null); return next })}
+                className={`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 focus:outline-none ${hasBack ? 'bg-indigo-600' : 'bg-gray-300'}`}
+                aria-pressed={hasBack}
+              >
+                <span className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ${hasBack ? 'translate-x-5' : 'translate-x-0'}`} />
+              </button>
+              <span className="text-sm text-gray-700">{hasBack ? 'Yes' : 'No'}</span>
             </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 className={`mt-8 grid gap-6 items-stretch ${hasBack ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1'}`}>
+              {/* Primary document */}
               <div
                 {...dropHandlers}
-                onDrop={e => {
+                onDrop={e => onDrop(e, 'front')}
-                  e.preventDefault()
+                onClick={() => openPicker('front')}
-                  const f = e.dataTransfer.files?.[0]
+                className="group relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50/60 px-4 py-6 sm:py-10 text-center hover:border-indigo-400 hover:bg-indigo-50/40 cursor-pointer transition"
-                  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 => {
+                  onChange={e => { const f = e.target.files?.[0]; if (f) handleFile(f, 'front') }}
-                    const f = e.target.files?.[0]
-                    if (f) handleFile(f, 'front')
-                  }}
                 />
                 {frontFile ? (
-                  <div className="flex flex-col items-center">
+                  <div className="flex w-full max-w-full flex-col items-center">
-                    <DocumentArrowUpIcon className="h-8 w-8 text-indigo-500 mb-3" />
+                    {/* Preview only for images */}
-                    <p className="text-sm font-medium text-gray-800">{frontFile.name}</p>
+                    {frontPreview && (
+                      <img
+                        src={frontPreview}
+                        alt="Primary document preview"
+                        className="w-full max-h-56 object-contain rounded-md bg-white border border-gray-200"
+                      />
+                    )}
+                    <p className="mt-3 text-sm font-medium text-gray-800 break-all">{frontFile.name}</p>
                     <button
                       type="button"
-                      onClick={e => { e.stopPropagation(); setFrontFile(null) }}
+                      onClick={e => { e.stopPropagation(); clearFile('front') }}
                       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
@@ -222,54 +193,53 @@ export default function CompanyIdUploadPage() {
                 )}
               </div>
 
-              <div
+              {/* Back/supporting document */}
-                {...dropHandlers}
+              {hasBack && (
-                onDrop={e => {
+                <div
-                  e.preventDefault()
+                  {...dropHandlers}
-                  const f = e.dataTransfer.files?.[0]
+                  onDrop={e => onDrop(e, 'extra')}
-                  if (f) handleFile(f, 'extra')
+                  onClick={() => openPicker('extra')}
-                }}
+                  className="group relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50/60 px-4 py-6 sm:py-10 text-center hover:border-indigo-400 hover:bg-indigo-50/40 cursor-pointer transition"
-                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}
-                <input
+                    type="file"
-                  ref={extraRef}
+                    accept="image/*,application/pdf"
-                  type="file"
+                    className="hidden"
-                  accept="image/*,application/pdf"
+                    onChange={e => { const f = e.target.files?.[0]; if (f) handleFile(f, 'extra') }}
-                  className="hidden"
+                  />
-                  onChange={e => {
+                  {extraFile ? (
-                    const f = e.target.files?.[0]
+                    <div className="flex w-full max-w-full flex-col items-center">
-                    if (f) handleFile(f, 'extra')
+                      {/* Preview only for images */}
-                  }}
+                      {extraPreview && (
-                />
+                        <img
-                {extraFile ? (
+                          src={extraPreview}
-                  <div className="flex flex-col items-center">
+                          alt="Supporting document preview"
-                    <DocumentArrowUpIcon className="h-8 w-8 text-indigo-500 mb-3" />
+                          className="w-full max-h-56 object-contain rounded-md bg-white border border-gray-200"
-                    <p className="text-sm font-medium text-gray-800">{extraFile.name}</p>
+                        />
-                    <button
+                      )}
-                      type="button"
+                      <p className="mt-3 text-sm font-medium text-gray-800 break-all">{extraFile.name}</p>
-                      onClick={e => { e.stopPropagation(); setExtraFile(null) }}
+                      <button
-                      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"
+                        type="button"
-                    >
+                        onClick={e => { e.stopPropagation(); clearFile('extra') }}
-                      <XMarkIcon className="h-4 w-4" /> Remove
+                        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"
-                    </button>
+                      >
-                  </div>
+                        <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
+                      <DocumentArrowUpIcon className="h-10 w-10 text-gray-400 group-hover:text-indigo-500 mb-4 transition" />
-                    </p>
+                      <p className="text-sm font-medium text-indigo-600 group-hover:text-indigo-500">
-                    <p className="mt-2 text-xs text-gray-500">
+                        Optional supporting file
-                      (Invoice, license, certificate…)
+                      </p>
-                    </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">
+                </div>
-                <span className="font-medium text-gray-500">Extra space for clarity</span>
+              )}
-              </div>}
             </div>
 
             {/* Info */}

src/app/quickaction-dashboard/register-upload-id/personal/hooks/usePersonalUploadId.ts

@@ -0,0 +1,157 @@
+'use client'
+
+import { useState, useRef, useCallback, useEffect } from 'react'
+import useAuthStore from '../../../../store/authStore'
+import { useUserStatus } from '../../../../hooks/useUserStatus'
+
+export function usePersonalUploadId() {
+	// Auth and status
+	const token = useAuthStore(s => s.accessToken)
+	const { refreshStatus } = useUserStatus()
+
+	// Form state
+	const [idNumber, setIdNumber] = useState('')
+	const [idType, setIdType] = useState('')
+	const [expiry, setExpiry] = useState('')
+	const [hasBack, setHasBack] = useState(true)
+
+	// Files + previews
+	const [frontFile, setFrontFile] = useState<File | null>(null)
+	const [backFile, setBackFile] = useState<File | null>(null)
+	const [frontPreview, setFrontPreview] = useState<string | null>(null)
+	const [backPreview, setBackPreview] = useState<string | null>(null)
+
+	// UI state
+	const [submitting, setSubmitting] = useState(false)
+	const [error, setError] = useState('')
+	const [success, setSuccess] = useState(false)
+
+	// Refs
+	const frontInputRef = useRef<HTMLInputElement | null>(null)
+	const backInputRef = useRef<HTMLInputElement | null>(null)
+
+	// Shared input style
+	const inputBase =
+		'w-full h-11 rounded-lg border border-gray-300 px-4 text-sm text-gray-900 placeholder:text-gray-900 placeholder:opacity-100 focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white'
+
+	// File handlers
+	const handleFile = (f: File, side: 'front' | 'back') => {
+		if (f.size > 10 * 1024 * 1024) {
+			setError('Datei größer als 10 MB.')
+			return
+		}
+		setError('')
+		side === 'front' ? setFrontFile(f) : setBackFile(f)
+	}
+
+	const onDrop = (e: React.DragEvent, side: 'front' | 'back') => {
+		e.preventDefault()
+		const f = e.dataTransfer.files?.[0]
+		if (f) handleFile(f, side)
+	}
+
+	const clearFile = (side: 'front' | 'back') => {
+		side === 'front' ? setFrontFile(null) : setBackFile(null)
+	}
+
+	const dropEvents = {
+		onDragOver: (e: React.DragEvent) => e.preventDefault(),
+		onDragEnter: (e: React.DragEvent) => e.preventDefault(),
+	}
+
+	const openPicker = useCallback((side: 'front' | 'back') => {
+		(side === 'front' ? frontInputRef.current : backInputRef.current)?.click()
+	}, [])
+
+	// Previews
+	useEffect(() => {
+		if (!frontFile) { setFrontPreview(null); return }
+		const url = URL.createObjectURL(frontFile)
+		setFrontPreview(url)
+		return () => URL.revokeObjectURL(url)
+	}, [frontFile])
+
+	useEffect(() => {
+		if (!backFile) { setBackPreview(null); return }
+		const url = URL.createObjectURL(backFile)
+		setBackPreview(url)
+		return () => URL.revokeObjectURL(url)
+	}, [backFile])
+
+	// Validation
+	const validate = () => {
+		if (!idNumber.trim() || !idType || !expiry) {
+			setError('Bitte alle Pflichtfelder ausfüllen.')
+			return false
+		}
+		if (!frontFile) {
+			setError('Vorderseite hochladen.')
+		 return false
+		}
+		if (hasBack && !backFile) {
+			setError('Rückseite hochladen oder Schalter deaktivieren.')
+			return false
+		}
+		setError('')
+		return true
+	}
+
+	// Submit
+	const submit = async (e: React.FormEvent) => {
+		e.preventDefault()
+		if (!validate()) return
+		if (!token) {
+			setError('Nicht authentifiziert. Bitte erneut einloggen.')
+			return
+		}
+
+		setSubmitting(true)
+		setError('')
+
+		try {
+			const formData = new FormData()
+			if (frontFile) formData.append('front', frontFile)
+			if (hasBack && backFile) formData.append('back', backFile)
+			formData.append('idType', idType)
+			formData.append('idNumber', idNumber)
+			formData.append('expiryDate', expiry)
+
+			const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/upload/personal-id`, {
+				method: 'POST',
+				headers: { 'Authorization': `Bearer ${token}` },
+				body: formData
+			})
+
+			const data = await response.json().catch(() => ({}))
+
+			if (response.ok && data.success) {
+				setSuccess(true)
+				await refreshStatus()
+				setTimeout(() => {
+					window.location.href = '/quickaction-dashboard'
+				}, 2000)
+			} else {
+				setError(data.message || 'Upload fehlgeschlagen. Bitte erneut versuchen.')
+			}
+		} catch (err) {
+			console.error('Upload error:', err)
+			setError('Netzwerkfehler. Bitte erneut versuchen.')
+		} finally {
+			setSubmitting(false)
+		}
+	}
+
+	return {
+		// values
+		idNumber, idType, expiry, hasBack,
+		frontFile, backFile,
+		frontPreview, backPreview,
+		submitting, error, success,
+		frontInputRef, backInputRef,
+		inputBase,
+		// setters
+		setIdNumber, setIdType, setExpiry, setHasBack,
+		// handlers
+		handleFile, onDrop, clearFile, dropEvents, openPicker, submit,
+	}
+}

src/app/quickaction-dashboard/register-upload-id/personal/page.tsx

@@ -1,130 +1,54 @@
 'use client'
 
-import { useState, useRef, useCallback } from 'react'
+import { usePersonalUploadId } from './hooks/usePersonalUploadId'
 import PageLayout from '../../../components/PageLayout'
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
 import useAuthStore from '../../../store/authStore'
-import { useUserStatus } from '../../../hooks/useUserStatus'
+import { DocumentArrowUpIcon, XMarkIcon } from '@heroicons/react/24/outline'
-import {
-  DocumentArrowUpIcon,
-  XMarkIcon
-} from '@heroicons/react/24/outline'
-
-const ID_TYPES = [
-  { value: 'national_id', label: 'Personalausweis' },
-  { value: 'passport', label: 'Reisepass' },
-  { value: 'driver_license', label: 'Führerschein' },
-  { value: 'other', label: 'Aufenthaltstitel' }
-]
 
 export default function PersonalIdUploadPage() {
-  const token = useAuthStore(s => s.accessToken)
+  // NEW: guard company users from accessing personal page
-  const { refreshStatus } = useUserStatus()
+  const user = useAuthStore(s => s.user)
-  const [idNumber, setIdNumber] = useState('')
+  const router = useRouter()
-  const [idType, setIdType] = useState('')
+  const [blocked, setBlocked] = useState(false)
-  const [expiry, setExpiry] = useState('')
-  const [hasBack, setHasBack] = useState(true)
-  const [frontFile, setFrontFile] = useState<File | null>(null)
-  const [backFile, setBackFile] = useState<File | null>(null)
-  const [submitting, setSubmitting] = useState(false)
-  const [error, setError] = useState('')
-  const [success, setSuccess] = useState(false)
 
-  const frontInputRef = useRef<HTMLInputElement | null>(null)
+  useEffect(() => {
-  const backInputRef = useRef<HTMLInputElement | null>(null)
+    const ut = (user as any)?.userType || (user as any)?.role
-
+    console.log('🧭 UploadID Guard [personal]: userType =', ut)
-  const handleFile = (f: File, side: 'front' | 'back') => {
+    if (ut && ut !== 'personal') {
-    if (f.size > 10 * 1024 * 1024) {
+      console.warn('🚫 UploadID Guard [personal]: access denied for userType:', ut, '-> redirecting to company upload')
-      setError('Datei größer als 10 MB.')
+      setBlocked(true)
-      return
+      router.replace('/quickaction-dashboard/register-upload-id/company')
+    } else if (ut === 'personal') {
+      console.log('✅ UploadID Guard [personal]: access granted')
     }
-    setError('')
+  }, [user, router])
-    side === 'front' ? setFrontFile(f) : setBackFile(f)
+
+  if (blocked) {
+    return (
+      <PageLayout>
+        <div className="min-h-[50vh] flex items-center justify-center">
+          <div className="text-center text-sm text-gray-600">
+            Redirecting to the correct upload page…
+          </div>
+        </div>
+      </PageLayout>
+    )
   }
 
-  const onDrop = (e: React.DragEvent, side: 'front' | 'back') => {
+  const {
-    e.preventDefault()
+    idNumber, setIdNumber,
-    const f = e.dataTransfer.files?.[0]
+    idType, setIdType,
-    if (f) handleFile(f, side)
+    expiry, setExpiry,
-  }
+    hasBack, setHasBack,
-
+    frontFile, backFile,
-  const validate = () => {
+    frontPreview, backPreview,
-    if (!idNumber.trim() || !idType || !expiry) {
+    submitting, error, success,
-      setError('Bitte alle Pflichtfelder ausfüllen.')
+    frontInputRef, backInputRef,
-      return false
+    handleFile, onDrop, clearFile, dropEvents, openPicker, submit,
-    }
+    inputBase,
-    if (!frontFile) {
+  } = usePersonalUploadId()
-      setError('Vorderseite hochladen.')
-      return false
-    }
-    if (hasBack && !backFile) {
-      setError('Rückseite hochladen oder Schalter deaktivieren.')
-      return false
-    }
-    setError('')
-    return true
-  }
-
-  const submit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!validate()) return
-    if (!token) {
-      setError('Nicht authentifiziert. Bitte erneut einloggen.')
-      return
-    }
-    
-    setSubmitting(true)
-    setError('')
-    
-    try {
-      const formData = new FormData()
-      formData.append('front', frontFile!)
-      if (hasBack && backFile) {
-        formData.append('back', backFile)
-      }
-      formData.append('idType', idType)
-      formData.append('idNumber', idNumber)
-      formData.append('expiryDate', expiry)
-      
-      const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/upload/personal-id`, {
-        method: 'POST',
-        headers: {
-          'Authorization': `Bearer ${token}`
-        },
-        body: formData
-      })
-      
-      const data = await response.json()
-      
-      if (response.ok && data.success) {
-        setSuccess(true)
-        await refreshStatus() // Refresh user status
-        // Redirect after 2 seconds
-        setTimeout(() => {
-          window.location.href = '/quickaction-dashboard'
-        }, 2000)
-      } else {
-        setError(data.message || 'Upload fehlgeschlagen. Bitte erneut versuchen.')
-      }
-    } catch (error) {
-      console.error('Upload error:', error)
-      setError('Netzwerkfehler. Bitte erneut versuchen.')
-    } finally {
-      setSubmitting(false)
-    }
-  }
-
-  const clearFile = (side: 'front' | 'back') => {
-    side === 'front' ? setFrontFile(null) : setBackFile(null)
-  }
-
-  const dropEvents = {
-    onDragOver: (e: React.DragEvent) => e.preventDefault(),
-    onDragEnter: (e: React.DragEvent) => e.preventDefault()
-  }
-
-  const openPicker = useCallback((side: 'front' | 'back') => {
-    (side === 'front' ? frontInputRef.current : backInputRef.current)?.click()
-  }, [])
 
   return (
     <PageLayout>
@@ -148,10 +72,7 @@ export default function PersonalIdUploadPage() {
           </div>
         </div>
 
-        <form
+        <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">
-          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">
               Personal Identity Verification
@@ -160,9 +81,9 @@ export default function PersonalIdUploadPage() {
               Please upload clear photos of both sides of your government‑issued ID
             </p>
 
-            {/* Grid Fields */}
+            {/* Grid Fields: put all three inputs on the same line on md+ */}
-            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            <div className="grid gap-6 md:grid-cols-3">
-              <div className="md:col-span-2">
+              <div>
                 <label className="block text-sm font-medium text-gray-700 mb-2">
                   ID Number *
                 </label>
@@ -170,10 +91,10 @@ export default function PersonalIdUploadPage() {
                   value={idNumber}
                   onChange={e => setIdNumber(e.target.value)}
                   placeholder="Enter your ID number"
-                  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"
+                  className={`${inputBase} ${idNumber ? 'text-gray-900' : 'text-gray-700'}`}
                   required
                 />
-                <p className="mt-1 text-xs text-gray-500">
+                <p className="mt-1 text-xs text-gray-600">
                   Enter the number exactly as shown on your ID
                 </p>
               </div>
@@ -185,11 +106,11 @@ export default function PersonalIdUploadPage() {
                 <select
                   value={idType}
                   onChange={e => setIdType(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"
+                  className={`${inputBase} ${idType ? 'text-gray-900' : 'text-gray-700'}`}
                   required
                 >
                   <option value="">Select ID type</option>
-                  {ID_TYPES.map(t => <option key={t.value} value={t.value}>{t.label}</option>)}
+                  {/* ...existing options... */}
                 </select>
               </div>
 
@@ -201,11 +122,11 @@ export default function PersonalIdUploadPage() {
                   type="date"
                   value={expiry}
                   onChange={e => setExpiry(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="tt.mm jjjj"
+                  className={`${inputBase} ${expiry ? 'text-gray-900' : 'text-gray-700'} appearance-none [&::-webkit-calendar-picker-indicator]:opacity-80`}
                   required
                 />
               </div>
-              <div className="hidden lg:block"></div>
             </div>
 
             {/* Back side toggle */}
@@ -230,29 +151,33 @@ export default function PersonalIdUploadPage() {
               <span className="text-sm text-gray-700">{hasBack ? 'Yes' : 'No'}</span>
             </div>
 
-            {/* Upload Areas */}
+            {/* Upload Areas: full width, 1 col if no back, 2 cols if back */}
-            <div className={`mt-8 grid gap-6 ${hasBack ? 'md:grid-cols-2 lg:grid-cols-3' : 'md:grid-cols-2 lg:grid-cols-2'} items-stretch`}>
+            <div className={`mt-8 grid gap-6 items-stretch ${hasBack ? 'grid-cols-1 md:grid-cols-2' : 'grid-cols-1'}`}>
               {/* Front */}
               <div
                 {...dropEvents}
                 onDrop={e => onDrop(e, 'front')}
                 onClick={() => openPicker('front')}
-                className="group relative 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"
+                className="group relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50/60 px-4 py-6 sm:py-10 text-center hover:border-indigo-400 hover:bg-indigo-50/40 cursor-pointer transition"
               >
                 <input
                   ref={frontInputRef}
                   type="file"
                   accept="image/png,image/jpeg,image/jpg"
                   className="hidden"
-                  onChange={e => {
+                  onChange={e => { const f = e.target.files?.[0]; if (f) handleFile(f, 'front') }}
-                    const f = e.target.files?.[0]
-                    if (f) handleFile(f, 'front')
-                  }}
                 />
                 {frontFile ? (
-                  <div className="flex flex-col items-center">
+                  <div className="flex w-full max-w-full flex-col items-center">
-                    <DocumentArrowUpIcon className="h-8 w-8 text-indigo-500 mb-3" />
+                    {/* NEW preview */}
-                    <p className="text-sm font-medium text-gray-800">{frontFile.name}</p>
+                    {frontPreview && (
+                      <img
+                        src={frontPreview}
+                        alt="Front ID preview"
+                        className="w-full max-h-56 object-contain rounded-md bg-white border border-gray-200"
+                      />
+                    )}
+                    <p className="mt-3 text-sm font-medium text-gray-800 break-all">{frontFile.name}</p>
                     <button
                       type="button"
                       onClick={e => { e.stopPropagation(); clearFile('front') }}
@@ -263,7 +188,7 @@ export default function PersonalIdUploadPage() {
                   </div>
                 ) : (
                   <>
-                    <DocumentArrowUpIcon className="h-10 w-10 text-gray-400 group-hover:text-indigo-500 mb-4 transition" />
+                    <DocumentArrowUpIcon className="h-10 w-10 text-gray-400 group-hover:text-indigo-500 mb-3 transition" />
                     <p className="text-sm font-medium text-indigo-600 group-hover:text-indigo-500">
                       Click to upload front side
                     </p>
@@ -282,22 +207,26 @@ export default function PersonalIdUploadPage() {
                   {...dropEvents}
                   onDrop={e => onDrop(e, 'back')}
                   onClick={() => openPicker('back')}
-                  className="group relative 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"
+                  className="group relative flex flex-col items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50/60 px-4 py-6 sm:py-10 text-center hover:border-indigo-400 hover:bg-indigo-50/40 cursor-pointer transition"
                 >
                   <input
                     ref={backInputRef}
                     type="file"
                     accept="image/png,image/jpeg,image/jpg"
                     className="hidden"
-                    onChange={e => {
+                    onChange={e => { const f = e.target.files?.[0]; if (f) handleFile(f, 'back') }}
-                      const f = e.target.files?.[0]
-                      if (f) handleFile(f, 'back')
-                    }}
                   />
                   {backFile ? (
-                    <div className="flex flex-col items-center">
+                    <div className="flex w-full max-w-full flex-col items-center">
-                      <DocumentArrowUpIcon className="h-8 w-8 text-indigo-500 mb-3" />
+                      {/* NEW preview */}
-                      <p className="text-sm font-medium text-gray-800">{backFile.name}</p>
+                      {backPreview && (
+                        <img
+                          src={backPreview}
+                          alt="Back ID preview"
+                          className="w-full max-h-56 object-contain rounded-md bg-white border border-gray-200"
+                        />
+                      )}
+                      <p className="mt-3 text-sm font-medium text-gray-800 break-all">{backFile.name}</p>
                       <button
                         type="button"
                         onClick={e => { e.stopPropagation(); clearFile('back') }}
@@ -308,7 +237,7 @@ export default function PersonalIdUploadPage() {
                     </div>
                   ) : (
                     <>
-                      <DocumentArrowUpIcon className="h-10 w-10 text-gray-400 group-hover:text-indigo-500 mb-4 transition" />
+                      <DocumentArrowUpIcon className="h-10 w-10 text-gray-400 group-hover:text-indigo-500 mb-3 transition" />
                       <p className="text-sm font-medium text-indigo-600 group-hover:text-indigo-500">
                         Click to upload back side
                       </p>
@@ -321,12 +250,9 @@ export default function PersonalIdUploadPage() {
                   )}
                 </div>
               )}
-              {hasBack && <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 Box */}
+            {/* Info Box, errors, success, submit */}
             <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">
                 Please ensure your ID documents: