From fad2a525ea27dbb7db9d28627b3af21d9ba02724 Mon Sep 17 00:00:00 2001
From: smanylov <bio29s@mail.ru>
Date: Tue, 17 Feb 2026 14:43:26 +0700
Subject: [PATCH] add image conver button

---
 src/app/actions/fileUpload.ts            |  5 +-
 src/app/components/TanstakTable.tsx      |  2 +-
 src/app/components/UploadSectionFile.tsx | 81 +++++++++++++++++-------
 src/app/styles/pages-styles.scss         | 24 ++++++-
 src/i18n/messages/en.json                |  3 +-
 src/i18n/messages/ru.json                |  5 +-
 6 files changed, 90 insertions(+), 30 deletions(-)

diff --git a/src/app/actions/fileUpload.ts b/src/app/actions/fileUpload.ts
index cae0beb..ae142b9 100644
--- a/src/app/actions/fileUpload.ts
+++ b/src/app/actions/fileUpload.ts
@@ -14,7 +14,7 @@ interface initMessageBody {
 	token?: string
 }
 
-export async function fileUpload(messageBody: initMessageBody) {
+export async function fileUpload(messageBody: initMessageBody, needConvert: boolean | undefined) {
 	const token = await getSessionData('token');
 	if (!token) {
 		return;
@@ -23,6 +23,9 @@ export async function fileUpload(messageBody: initMessageBody) {
 	message.action = 'init';
 	message.token = token;
 
+	// нужно будет добавить свойство needConvert в тело запроса.
+	// console.log(needConvert);
+
 	try {
 		const response = await fetch(`${API_BASE_URL}/api/v1/data`, {
 			method: 'POST',
diff --git a/src/app/components/TanstakTable.tsx b/src/app/components/TanstakTable.tsx
index 203ccf3..45a7b8c 100644
--- a/src/app/components/TanstakTable.tsx
+++ b/src/app/components/TanstakTable.tsx
@@ -695,7 +695,7 @@ export default function TanstakFilesTable({ fileType }: { fileType: string }) {
 			</h3>
 			<ModalWindow children={openWindowChildren} state={openWindow} callBack={setOpenWindow} />
 			{/* Фильтры */}
-			<div className="tanstak-table-filtres" style={{ display: "none" }}>
+			<div className="tanstak-table-filtres">
 				<div className="table-filtres-wrapper">
 					<div className="table-filtres-item">
 						<div className="table-filtres-label">{t('date-filter')}:</div>
diff --git a/src/app/components/UploadSectionFile.tsx b/src/app/components/UploadSectionFile.tsx
index 3ae289a..ae5cf46 100644
--- a/src/app/components/UploadSectionFile.tsx
+++ b/src/app/components/UploadSectionFile.tsx
@@ -20,6 +20,7 @@ interface SelectedFile {
 	progress: number;
 	status: 'pending' | 'uploading' | 'completed' | 'error' | 'cancelled';
 	error?: string;
+	needConvert?: boolean;
 }
 
 interface FileUploadInitResponse {
@@ -238,7 +239,7 @@ export default function UploadSectionFile({
 				file_size: fileInfo.file.size
 			};
 
-			const response = await fileUpload(initMessageBody) as FileUploadInitResponse;
+			const response = await fileUpload(initMessageBody, fileInfo.needConvert) as FileUploadInitResponse;
 
 			if (!response?.upload_id) {
 				throw new Error('Failed to get upload_id');
@@ -392,6 +393,18 @@ export default function UploadSectionFile({
 		}
 	});
 
+	function converButtonHandler(file: SelectedFile) {
+		setSelectedFiles(selectedFiles.map(selectedFile => {
+			if (selectedFile.name === file.name) {
+				return {
+					...selectedFile,
+					needConvert: !selectedFile.needConvert
+				};
+			}
+			return selectedFile;
+		}));
+	}
+
 
 	return (
 		<div className="upload-section" >
@@ -529,34 +542,54 @@ export default function UploadSectionFile({
 													}
 												</div>
 												<div className="selected-file-right-block">
-													<span className={
-														`upload-progress ${file.status === 'completed' ? 'text-green-600' :
-															file.status === 'uploading' ? 'text-blue-600' :
-																'text-gray-600'
-														}`
-													}>
-														{file.progress} %
-													</span>
-													< button
-														className="btn btn-cancel"
-														onClick={() => handleClearFile(file.uploadId || file.name)}
-														type="button"
-													>
-														{t('remove')}
-													</button>
+													{
+														(fileType === 'image' && file.status === 'pending') && (
+															<button
+																className={`btn-convert ${file.needConvert ? 'active' : ''}`}
+																onClick={() => {
+																	converButtonHandler(file);
+																}}
+															>
+																{t('convert-image')} jpg
+															</button>
+														)
+													}
+													<div>
+														<span className={
+															`upload-progress ${file.status === 'completed' ? 'text-green-600' :
+																file.status === 'uploading' ? 'text-blue-600' :
+																	'text-gray-600'
+															}`
+														}>
+															{file.progress} %
+														</span>
+														< button
+															className="btn btn-cancel"
+															onClick={() => handleClearFile(file.uploadId || file.name)}
+															type="button"
+														>
+															{t('remove')}
+														</button>
+													</div>
 												</div>
 											</div>
 
 											{
 												(fileType === 'image' && file.preview) && (
-													<img
-														src={file.preview}
-														alt="Предпросмотр загруженного изображения"
-														className="uploaded-image"
-														onError={() => setError('Не удалось загрузить превью изображения')
-														}
-													/>
-												)}
+													<div
+														className="image-preview-wrapper"
+													>
+														<img
+															src={file.preview}
+															alt="Предпросмотр загруженного изображения"
+															className="uploaded-image"
+															onError={() => setError('Не удалось загрузить превью изображения')
+															}
+														/>
+													</div>
+
+												)
+											}
 
 											{
 												file.status === 'pending' && (
diff --git a/src/app/styles/pages-styles.scss b/src/app/styles/pages-styles.scss
index 01e7535..cb863cd 100644
--- a/src/app/styles/pages-styles.scss
+++ b/src/app/styles/pages-styles.scss
@@ -410,6 +410,25 @@
 			border: 1px solid #d1d5db;
 		}
 
+		.btn-convert {
+			background: v.$white;
+			color: v.$p-color;
+			border: 2px solid v.$p-color;
+			padding: 5px 15px;
+			border-radius: 12px;
+			cursor: pointer;
+			font-weight: 600;
+			font-size: 16px;
+			transition: 0.3s;
+			min-width: 120px;
+
+			&.active {
+				background: #00a63e;
+				border: 2px solid #00a63e;
+				color: v.$white;
+			}
+		}
+
 		.btn-confirm {
 			background: linear-gradient(45deg, v.$p-color 50%, v.$s-color 100%);
 			color: v.$white;
@@ -469,7 +488,10 @@
 
 	.selected-file-right-block {
 		display: flex;
-		align-items: center;
+		flex-direction: column;
+		gap: 10px;
+		align-items: end;
+		/* align-items: center; */
 
 		@media (max-width: 500px) {
 			flex-direction: column-reverse;
diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json
index 07d442c..49bf054 100644
--- a/src/i18n/messages/en.json
+++ b/src/i18n/messages/en.json
@@ -225,7 +225,8 @@
 		"pending": "Pending",
 		"all-content": "All content",
 		"monitoring": "Monitoring",
-		"efficiency": "Efficiency"
+		"efficiency": "Efficiency",
+		"convert-image": "Convert image to"
 	},
 	"Login-register-form": {
 		"and": "and",
diff --git a/src/i18n/messages/ru.json b/src/i18n/messages/ru.json
index 4a0331b..9699907 100644
--- a/src/i18n/messages/ru.json
+++ b/src/i18n/messages/ru.json
@@ -163,7 +163,7 @@
 		"you-sure-you-want-to-delete": "Уверены, что хотите удалить?",
 		"reports-and-analytics": "Отчёты и аналитика",
 		"file-has-been-deleted": "Файл удален",
-		"error": "Ошбка",
+		"error": "Ошибка",
 		"failed-to-download-file": "Не удалось скачать файл",
 		"file-is-downloading": "Скачивается файл",
 		"status": "статус",
@@ -225,7 +225,8 @@
 		"pending": "В ожидании",
 		"all-content": "Весь контент",
 		"monitoring": "Мониторинг",
-		"efficiency": "Эффективность"
+		"efficiency": "Эффективность",
+		"convert-image": "Конвертировать изображение в"
 	},
 	"Login-register-form": {
 		"and": "и",