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

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>
-			</div>
+			<FilePageViolationEpmtyScreen />
 		)
 	}
 

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>