continue: change styles for matched table, add new block for empty select

src/app/styles/pages-styles.scss

@@ -727,6 +727,11 @@
 					border-radius: 10px;
 					color: v.$p-color;
 
+					&:disabled {
+						opacity: 0.5;
+						cursor: not-allowed;
+					}
+
 					&.current {
 						background-color: v.$p-color;
 						color: v.$white;
@@ -4460,6 +4465,11 @@
 				margin-bottom: 10px;
 				gap: 5px;
 
+				&-left {
+					display: flex;
+					flex-direction: column;
+				}
+
 				&-right {
 					display: flex;
 					flex-direction: column;
@@ -4468,8 +4478,18 @@
 			}
 
 			.source-image {
-				max-width: 120px;
+				max-height: 80%;
-				width: 100%;
+				min-height: 50px;
+				height: 100%;
+
+				img {
+					height: 100%;
+					border-radius: 8px;
+				}
+			}
+
+			.source-url-block {
+				margin-top: auto;
 			}
 
 			.source-url {
@@ -4648,6 +4668,7 @@
 
 			a {
 				color: #6366f1;
+				word-break: break-all;
 			}
 		}
 
@@ -4738,6 +4759,11 @@
 				border-radius: 10px;
 				color: v.$p-color;
 
+				&:disabled {
+					opacity: 0.5;
+					cursor: not-allowed;
+				}
+
 				&.current {
 					background-color: v.$p-color;
 					color: v.$white;

src/app/ui/file-page/violation-table/file-page-violation-epmty-screen.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+
+export default function FilePageViolationEpmtyScreen() {
+	const t = useTranslations('Global');
+
+	return (
+		<div
+			className="violation-info"
+		>
+			<h4
+				className="violation-info-title"
+			>
+				{t('to-view-a-file-match-click-on-the-card-from-the-list')}
+			</h4>
+		</div>
+	)
+}

src/app/ui/file-page/violation-table/file-page-violation-info.tsx

@@ -11,6 +11,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { useCallback, useEffect, useState } from 'react';
 import { MatchStatus } from '@/app/actions/violationActions';
 import { toast } from 'sonner';
+import FilePageViolationEpmtyScreen from '@/app/ui/file-page/violation-table/file-page-violation-epmty-screen';
 
 export default function FilePageViolationInfo({ selectedViolation }: { selectedViolation: ViolationFileDetail | null }) {
 	const t = useTranslations('Global');
@@ -63,8 +64,7 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
 
 	if (!selectedViolation) {
 		return (
-			<div>
+			<FilePageViolationEpmtyScreen />
-			</div>
 		)
 	}
 

src/app/ui/file-page/violation-table/file-page-violations-list.tsx

@@ -8,7 +8,7 @@ import FilePageViolationInfo from '@/app/ui/file-page/violation-table/file-page-
 import { useFileViolations } from '@/app/hooks/react-query/useFileViolations';
 import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations';
 import DropDownList from '@/app/components/DropDownList';
-import { IconArrowLeft, IconArrowRight } from '@/app/ui/icons/icons';
+import { IconArrowLeft, IconArrowRight, IconDoubleArrowLeft, IconDoubleArrowRight } from '@/app/ui/icons/icons';
 
 export default function FilePageViolationsList({
 	currentPage,
@@ -26,7 +26,7 @@ export default function FilePageViolationsList({
 	const searchParams = useSearchParams();
 	const [selectedViolation, setSelectedViolation] = useState<ViolationFileDetail | null>(null);
 
-	const { data: fileViolations } = useFileViolations(fileId, currentPage, status);
+	const { data: fileViolations, error, isPending } = useFileViolations(fileId, currentPage, status);
 
 	if (!fileViolations?.violations) {
 		return null;
@@ -120,7 +120,9 @@ export default function FilePageViolationsList({
 									<div className="source-image">
 										<img src={item.url} alt="" />
 									</div>
-									<div>
+									<div
+										className="source-url-block"
+									>
 										<span
 											className="source-meta"
 										>
@@ -179,10 +181,17 @@ export default function FilePageViolationsList({
 				</span>
 				{fileViolations.total_pages > 1 && (
 					<div className="pagination-controls">
+						<button
+							className="arrow"
+							onClick={() => handlePageChange(1)}
+							disabled={currentPage === 1}
+						>
+							<IconDoubleArrowLeft />
+						</button>
 						<button
 							onClick={() => handlePageChange(currentPage - 1)}
 							className="arrow"
-							disabled={!fileViolations.has_previous}
+							disabled={!fileViolations.has_previous || isPending}
 						>
 							<IconArrowLeft />
 						</button>
@@ -194,8 +203,8 @@ export default function FilePageViolationsList({
 								<button
 									key={pageNum}
 									onClick={() => handlePageChange(pageNum)}
-									/* className={`pagination-item ${currentPage === pageNum ? 'pagination-item-active' : ''}`} */
 									className={currentPage === pageNum ? 'current' : 'other'}
+									disabled={isPending}
 								>
 									{pageNum}
 								</button>
@@ -210,6 +219,13 @@ export default function FilePageViolationsList({
 						>
 							<IconArrowRight />
 						</button>
+						<button
+							className="arrow"
+							onClick={() => handlePageChange(fileViolations.total_pages)}
+							disabled={currentPage === fileViolations.total_pages || isPending}
+						>
+							<IconDoubleArrowRight />
+						</button>
 					</div>
 				)}
 			</div>

src/i18n/messages/en.json

@@ -388,7 +388,8 @@
 		"all-notifications": "All notifications",
 		"deselect": "Deselect",
 		"select-all": "Select all",
-		"text-area-error-fill-complaint-text": "Fill out the complaint text"
+		"text-area-error-fill-complaint-text": "Fill out the complaint text",
+		"to-view-a-file-match-click-on-the-card-from-the-list": "To view a file match, click on the card from the list"
 	},
 	"Login-register-form": {
 		"and": "and",

src/i18n/messages/ru.json

@@ -388,7 +388,8 @@
 		"all-notifications": "Все уведомления",
 		"deselect": "Снять выделение",
 		"select-all": "Выбрать все",
-		"text-area-error-fill-complaint-text": "Заполните текст жалобы"
+		"text-area-error-fill-complaint-text": "Заполните текст жалобы",
+		"to-view-a-file-match-click-on-the-card-from-the-list": "Для просмотра совпадения по файлу нажмите на карточку из списка"
 	},
 	"Login-register-form": {
 		"and": "и",