add cutFileName for match table, fix some styles

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "no-copy-frontend",
-	"version": "0.94.0",
+	"version": "0.95.0",
 	"private": true,
 	"scripts": {
 		"dev": "next dev -p 2999",

src/app/[locale]/pages/violations/page.tsx

@@ -18,11 +18,12 @@ export default function Page() {
 			<ViolationsCheckAllSection />
 			<ViolationsTable />
 			<ViolationsMyComplaint />
+			<ViolationsMyClaims />
 			<div className="analytics-grid">
 				<AnalyticsCardDistribution />
 				<AnalyticsCardGeography />
 			</div>
-			<ViolationsMyClaims />
+			
 		</>
 	)
 }

src/app/hooks/react-query/useFileViolations.ts

@@ -10,16 +10,18 @@ export interface ViolationFileDetail {
 	status: string;
 	created_date: string;
 	file_id: string;
+	country: string;
+	country_code: string;
 }
 
 interface ViolationFile {
-	violations: ViolationFileDetail[],
+	violations: ViolationFileDetail[];
-	total_elements: number,
+	total_elements: number;
-	total_pages: number,
+	total_pages: number;
-	current_page: number,
+	current_page: number;
-	page_size: number,
+	page_size: number;
-	has_next: boolean,
+	has_next: boolean;
-	has_previous: boolean
+	has_previous: boolean;
 }
 
 export const useFileViolations = (id: string, page: number, status?: string) => {

src/app/styles/violation-details.scss

@@ -500,7 +500,7 @@
 		&-right-side {
 			display: flex;
 			flex-direction: column;
-			justify-content: space-between;
+			justify-content: start;
 			overflow: hidden;
 		}
 
@@ -864,7 +864,7 @@
 
 	.note-form-flex {
 		display: flex;
-		gap: 10px;
+		gap: var(--violation-info-indents);
 		width: 100%;
 		/* justify-content: space-between; */
 	}
@@ -922,7 +922,7 @@
 		box-sizing: border-box;
 		padding: 0px;
 		border-radius: 8px;
-		margin-bottom: 10px;
+		margin-bottom: var(--violation-info-indents);
 		overflow: hidden;
 		width: 100%;
 

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

@@ -16,6 +16,7 @@ import Image from 'next/image';
 import FilePageViolationInfoTabs from '@/app/ui/file-page/violation-table/file-page-violation-info-tabs';
 import { createPortal } from 'react-dom';
 import { IconContentCopy, IconFollowToLink, IconFullScreen } from '@/app/ui/icons/icons';
+import { useViewport } from '@/app/hooks/useViewport';
 
 export default function FilePageViolationInfo({ selectedViolation }: { selectedViolation: ViolationFileDetail | null }) {
 	const t = useTranslations('Global');
@@ -26,6 +27,7 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
 	const [isModalOpen, setIsModalOpen] = useState(false);
 	const [isHovered, setIsHovered] = useState(false);
 	const [copied, setCopied] = useState(false);
+	const viewport = useViewport();
 
 	const openInNewTab = () => {
 		if (selectedViolation?.url) {
@@ -125,6 +127,30 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
 			.catch();
 	};
 
+	const getMaxLengthByWidth = (): number => {
+		if (viewport.device === 'MOBILE') return 22;
+		if (viewport.device === 'TABLET') return 50;
+		if (viewport.device === 'DESKTOP') return 100;
+		return 100;
+	};
+
+	const cutFileName = (fileName: string) => {
+		const MAX_FILE_NAME_LENGTH = getMaxLengthByWidth();
+		const nameWithoutExtension = fileName.substring(0, MAX_FILE_NAME_LENGTH);
+
+		if (fileName.length <= MAX_FILE_NAME_LENGTH) {
+			return fileName;
+		}
+
+		const maxNameLength = MAX_FILE_NAME_LENGTH;
+
+		if (maxNameLength <= 0) {
+			return '...';
+		}
+
+		return nameWithoutExtension.substring(0, maxNameLength) + '...';
+	}
+
 	return (
 		<div
 			className="violation-info"
@@ -186,42 +212,56 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
 							<h3
 								className="violation-info-title"
 							>
-								{selectedViolation?.page_title}
+								{selectedViolation?.page_title ? cutFileName(selectedViolation?.page_title) : '#'}
 							</h3>
 							<div
-								className="violation-info-source"
+								className="mt-auto"
 							>
-								<span>
+								{selectedViolation?.country && (
-									{t('full-link')}:
+									<div
-								</span>
+										className="violation-info-source"
+									>
+										<span>
+											{t('country')}:
+										</span>
+										<br />
+										{selectedViolation?.country}
+									</div>
+								)}
 								<div
-									onMouseEnter={() => setIsHovered(true)}
+									className="violation-info-source"
-									onMouseLeave={() => setIsHovered(false)}
 								>
-									<span
+									<span>
-										className="source"
+										{t('full-link')}:
-									>
-										{selectedViolation?.page_url ? cleanUrlForDisplay(selectedViolation?.page_url) : selectedViolation?.page_url}
 									</span>
-
+									<div
-									<span
+										onMouseEnter={() => setIsHovered(true)}
-										className={`violation-info-icon ${!isHovered ? 'hiden' : ''}`}
+										onMouseLeave={() => setIsHovered(false)}
-										onClick={handleCopyLink}
 									>
-										<IconContentCopy />
+										<span
-									</span>
+											className="source"
+										>
+											{selectedViolation?.page_url ? cutFileName(cleanUrlForDisplay(selectedViolation?.page_url)) : selectedViolation?.page_url}
+										</span>
 
-									<Link
+										<span
-										className={`violation-info-icon ${!isHovered ? 'hiden' : ''}`}
+											className={`violation-info-icon ${!isHovered ? 'hiden' : ''}`}
-										href={selectedViolation?.page_url ? cleanUrlForDisplay(selectedViolation?.page_url) : '#'}
+											onClick={handleCopyLink}
-										target="_blank"
+										>
-										scroll={false}
+											<IconContentCopy />
-									>
+										</span>
-										<IconFollowToLink />
+
-									</Link>
+										<Link
+											className={`violation-info-icon ${!isHovered ? 'hiden' : ''}`}
+											href={selectedViolation?.page_url ? cleanUrlForDisplay(selectedViolation?.page_url) : '#'}
+											target="_blank"
+											scroll={false}
+										>
+											<IconFollowToLink />
+										</Link>
+									</div>
 								</div>
 							</div>
-
 							<div
 								className="violation-info-status"
 							>

src/app/ui/violations/violations-my-claims.tsx

@@ -106,13 +106,13 @@ export default function ViolationsMyClaims() {
 											</span>
 										</div>
 
-										<div className="case-card-content">
+{/* 										<div className="case-card-content">
 											{t('text-of-the-case')}:
 											<br />
 											<span>
 												{item.description}
 											</span>
-										</div>
+										</div> */}
 
 										<div className="case-card-meta">
 											<div><strong>{t('date-of-creation')}:</strong> {item.createdAt ? `${formatDate(item.createdAt)} ${formatDateTime(item.createdAt)}` : '---'}</div>

src/app/ui/violations/violations-my-complaint.tsx

@@ -102,13 +102,13 @@ export default function ViolationsMyComplaint() {
 											</span>
 										</div>
 
-										<div className="case-card-content">
+{/* 										<div className="case-card-content">
 											{t('text-of-the-complaint')}:
 											<br />
 											<span>
 												{item.complaint_text}
 											</span>
-										</div>
+										</div> */}
 
 										<div className="case-card-meta">
 											<div>

src/i18n/messages/en.json

@@ -438,7 +438,8 @@
 		"day": "day",
 		"week": "week",
 		"month": "month",
-		"every": "every"
+		"every": "every",
+		"country": "Country"
 	},
 	"Login-register-form": {
 		"and": "and",
@@ -578,5 +579,8 @@
 		"unknow": "Unknown",
 		"user-verification": "User verification",
 		"Status": "Status"
+	},
+	"Countryes": {
+		
 	}
 }

src/i18n/messages/ru.json

@@ -438,7 +438,8 @@
 		"day": "день",
 		"week_accusative": "неделю",
 		"month": "месяц",
-		"every": "каждый"
+		"every": "каждый",
+		"country": "Страна"
 	},
 	"Login-register-form": {
 		"and": "и",
@@ -578,5 +579,8 @@
 		"unknow": "Неизвестно",
 		"user-verification": "Верификация юзера",
 		"Status": "Статус"
+	},
+	"Countryes": {
+		
 	}
 }