continue: user verification

src/app/styles/settings.scss

@@ -220,8 +220,58 @@
 		}
 	}
 
-	.verefication-section {
-		
+	&.verefication-section {
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+
+		.verefication-block {
+			flex-grow: 1;
+			display: flex;
+			flex-direction: column;
+
+			.drag-drop-zone {
+				border: 2px dashed #6366f1;
+				border-radius: .75rem;
+				padding: 10px;
+			}
+
+			.selected-file-action-panel {
+				display: flex;
+				justify-content: center;
+				gap: 10px;
+			}
+
+			.selected-file-actions {
+				display: flex;
+				justify-content: center;
+				gap: 10px;
+			}
+
+			.description {
+				font-size: 12px;
+				color: v.$text-s;
+			}
+
+			.btn {
+				padding: 5px 12px;
+			}
+
+			.btn-confirm {
+				background: v.$p-color;
+				color: v.$white;
+
+				background: linear-gradient(135deg, v.$p-color, v.$s-color);
+				color: v.$white;
+				border: 2px solid transparent;
+				padding: 2px 10px;
+			}
+
+			.btn-cancel {
+				border: 2px solid v.$p-color;
+				padding: 2px 10px;
+			}
+		}
 	}
 }
 

src/app/ui/settings/component/verification-upload-section.tsx

@@ -115,6 +115,11 @@ export default function VerificationUploadSection({
 		const currentFileNames = new Set<string>();
 		const duplicateNames: string[] = [];
 
+		if (selectedFiles.length + files.length > 4) {
+			setError('max-lenght');
+			return
+		}
+
 		for (const file of files) {
 			if (selectedFileNames.has(file.name)) {
 				duplicateNames.push(file.name);
@@ -398,7 +403,7 @@ export default function VerificationUploadSection({
 	});
 
 	return (
-		<div className="" >
+		<div className="verefication-block" >
 			<h3>
 				Загрузка изображений удостоверения личности
 			</h3>
@@ -409,9 +414,9 @@ export default function VerificationUploadSection({
 				onDragLeave={handleDragLeave}
 				onDrop={handleDrop}
 			>
-				<h4>
+				{/* 				<h4>
 					{t('drag-the-file-here')}
-				</h4>
+				</h4> */}
 
 				{
 					fileType === "image" && (
@@ -423,9 +428,9 @@ export default function VerificationUploadSection({
 				<p className="description" >
 					{t('file-format')}: {acceptString}
 				</p>
-				< p className="description" >
+				{/* 				< p className="description" >
 					{t('file-size')}: {t('to')} {(maxFileSize / 1024 / 1024)} {t('mb')}
-				</p>
+				</p> */}
 
 				< input
 					ref={fileInputRef}
@@ -437,15 +442,6 @@ export default function VerificationUploadSection({
 					multiple // Добавляем multiple для выбора нескольких файлов
 				/>
 
-				<button
-					className="btn btn-primary"
-					onClick={() => fileInputRef.current?.click()}
-					type="button"
-					disabled={uploadingCount > maxParallelUploads}
-				>
-					выберете документ для загрузки
-				</button>
-
 				{
 					error && (
 						<div className="error-message">
@@ -456,9 +452,9 @@ export default function VerificationUploadSection({
 
 				{
 					selectedFiles.length > 0 && (
-						<div className="mt-6" >
+						<div className="mt-4" >
 							<div className="selected-file-action-panel" >
-								<div>
+								{/* 								<div>
 									<p className="selected-file-action-info" >
 										<span>{t('total-files')}: {selectedFiles.length}</span>
 										<span>{t('uploading')}: {uploadingCount}</span>
@@ -472,25 +468,23 @@ export default function VerificationUploadSection({
 										>
 										</div>
 									</div>
-								</div>
+								</div> */}
 
-								<div className="flex gap-2">
-									<button
-										className={`btn btn-primary`}
-										onClick={handleStartAllUploads}
-										type="button"
-										disabled={uploadingCount > 0 || selectedFiles.every(f => f.status !== 'pending')}
-									>
-										{t('upload-all')}
-									</button>
-									< button
-										className="btn btn-primary"
-										onClick={() => handleClearFile()}
-										type="button"
-									>
-										{t('clear-all')}
-									</button>
-								</div>
+								<button
+									className={`btn btn-primary`}
+									onClick={handleStartAllUploads}
+									type="button"
+									disabled={uploadingCount > 0 || selectedFiles.every(f => f.status !== 'pending')}
+								>
+									{t('upload-all')}
+								</button>
+								< button
+									className="btn btn-primary"
+									onClick={() => handleClearFile()}
+									type="button"
+								>
+									{t('clear-all')}
+								</button>
 							</div>
 
 							<div className="selected-file-wrapper">
@@ -505,10 +499,12 @@ export default function VerificationUploadSection({
 													<p className="text-gray-700" >
 														<span className="font-medium" > {t('file')}: </span> {file.name}
 													</p>
-													< p className="text-gray-700" >
+
+													{/* 													< p className="text-gray-700" >
 														<span className="font-medium" > {t('size')}: </span> {file.size}
-													</p>
-													< p className="text-gray-700" >
+													</p> */}
+
+													{/* 													< p className="text-gray-700" >
 														<span className="font-medium" > {t('status')}: </span>
 														<span className={`ml-2 ${file.status === 'completed' ? 'text-green-600' :
 															file.status === 'uploading' ? 'text-blue-600' :
@@ -522,23 +518,49 @@ export default function VerificationUploadSection({
 																			t('pending')
 															}
 														</span>
-													</p>
+													</p> */}
+
 													{
 														file.error && (
 															<p className="text-red-600 text-sm mt-1" > {file.error} </p>
 														)
 													}
 												</div>
-												<div className="selected-file-right-block">
-													<div>
-														<span className={
+												<div className="selected-file">
+													<div className="w-full bg-gray-200 rounded-full h-2.5 mt-2 mb-2">
+														<div
+															className="bg-blue-600 h-2.5 rounded-full transition-all duration-300"
+															style={{ width: `${file.progress}%` }
+															}
+														>
+														</div>
+													</div>
+
+													{/* 														<span className={
 															`upload-progress ${file.status === 'completed' ? 'text-green-600' :
 																file.status === 'uploading' ? 'text-blue-600' :
 																	'text-gray-600'
 															}`
 														}>
 															{file.progress} %
-														</span>
+														</span> */}
+													<div
+														className="selected-file-actions"
+													>
+														{
+															file.status === 'pending' && (
+																<button
+																	className="btn btn-confirm"
+																	onClick={() => uploadSingleFile(file, 'single')
+																	}
+																	type="button"
+																	disabled={uploadingCount >= maxParallelUploads}
+																>
+																	{t('start-upload')}
+																</button>
+															)
+														}
+
 														< button
 															className="btn btn-cancel"
 															onClick={() => handleClearFile(file.uploadId || file.name)}
@@ -549,44 +571,20 @@ export default function VerificationUploadSection({
 													</div>
 												</div>
 											</div>
-
-{/* 											{
-												(fileType === 'image' && file.preview) && (
-													<div
-														className="image-preview-wrapper"
-													>
-														<img
-															src={file.preview}
-															alt="Предпросмотр загруженного документа"
-															className="uploaded-image"
-															onError={() => setError('Не удалось загрузить превью документа')
-															}
-														/>
-													</div>
-
-												)
-											} */}
-
-											{
-												file.status === 'pending' && (
-													<div className="mt-2 text-center" >
-														<button
-															className="btn btn-confirm"
-															onClick={() => uploadSingleFile(file, 'single')
-															}
-															type="button"
-															disabled={uploadingCount >= maxParallelUploads}
-														>
-															{t('start-upload')}
-														</button>
-													</div>
-												)}
 										</div>
 									))}
 							</div>
 						</div>
 					)}
 			</div>
+			<button
+				className="btn btn-primary mt-auto"
+				onClick={() => fileInputRef.current?.click()}
+				type="button"
+				disabled={uploadingCount > maxParallelUploads}
+			>
+				выберете документ(ы) для загрузки
+			</button>
 		</div>
 	);
 }

src/app/ui/settings/setting-user-verification.tsx

@@ -15,16 +15,14 @@ export default function SettingUserVerification() {
 				<h3 className="form-section-title">
 					Верификация юзера
 				</h3>
-				<form>
-{/* 					<VerificationUploadSection
-						fileType="image"
-						allowedExtensions={allFilesExtensions.images}
-						maxFileSize={allFilesExtensions.maxFileSize}
-					/> */}
-					{/* 					<button type="submit" className="btn btn-primary">
+				<VerificationUploadSection
+					fileType="image"
+					allowedExtensions={allFilesExtensions.images}
+					maxFileSize={allFilesExtensions.maxFileSize}
+				/>
+				{/* 					<button type="submit" className="btn btn-primary">
 						загрузить
 					</button> */}
-				</form>
 			</div>
 		</div>
 	)