add complaints\claims blocks

src/app/ui/file-page/violation-table/case-complaint.tsx

@@ -266,7 +266,7 @@ export default function CaseComplaint({ selectedViolation, updateStatusHandler }
 
 		return (
 			<div className="violation-info-case">
-				{complainInfo?.body.content ? (
+				{complainInfo?.body?.content ? (
 					<>
 						{complainInfo.body.content.map((item: complaintInfo) => {
 							return (

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

@@ -10,7 +10,7 @@ export default function FilePageViolationEpmtyScreen() {
 			className="violation-info"
 		>
 			<h4
-				className="violation-info-title"
+				className="violation-info-title not-selected-match"
 			>
 				{t('to-view-a-file-match-click-on-the-card-from-the-list')}
 			</h4>

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

@@ -1,72 +0,0 @@
-export default function ViolationsMyCases() {
-	return (
-		<div className="violations-my-cases-section">
-			<div className="my-cases-header">
-				<div className="my-cases-title">⚖️ Мои дела</div>
-				<a href="arbitration.php" className="btn-outline-small">Все дела →</a>
-			</div>
-
-			<div className="cases-carousel-track">
-				<div className="case-card">
-					<div className="case-card-header">
-						<div className="case-number">№ARB-2025-000271</div>
-						<span className="case-status-badge status-submitted">ПОДАНО</span></div>
-
-					<div className="case-card-title">
-						Нарушение авторских прав: scale_1200 (2).jpeg</div>
-
-					<div className="case-card-meta">
-						<div><strong>Создано:</strong> 12.10.2025</div>
-						<div><strong>Юрист:</strong> <span style={{color: '#f59e0b'}}>Не назначен</span></div>
-					</div>
-
-					<div className="case-card-actions">
-						<a href="arbitration.php?case_id=8" className="btn-primary-small">
-							👁️ Детали
-						</a>
-					</div>
-				</div>
-				<div className="case-card">
-					<div className="case-card-header">
-						<div className="case-number">№ARB-2025-4944</div>
-						<span className="case-status-badge status-assigned">НАЗНАЧЕН ЮРИСТ</span></div>
-
-					<div className="case-card-title">
-						Нарушение авторских прав: scale_1200 (2).jpeg</div>
-
-					<div className="case-card-meta">
-						<div><strong>Создано:</strong> 23.09.2025</div>
-						<div><strong>Юрист:</strong> Анна Иванова</div>
-						<div><strong>Ущерб:</strong> ₽0</div>
-					</div>
-
-					<div className="case-card-actions">
-						<a href="arbitration.php?case_id=7" className="btn-primary-small">
-							👁️ Детали
-						</a>
-					</div>
-				</div>
-				<div className="case-card">
-					<div className="case-card-header">
-						<div className="case-number">№ARB-2025-0535</div>
-						<span className="case-status-badge status-assigned">НАЗНАЧЕН ЮРИСТ</span></div>
-
-					<div className="case-card-title">
-						Нарушение авторских прав: scale_1200 (2).jpeg</div>
-
-					<div className="case-card-meta">
-						<div><strong>Создано:</strong> 22.09.2025</div>
-						<div><strong>Юрист:</strong> Анна Иванова</div>
-						<div><strong>Ущерб:</strong> ₽100 000</div>
-					</div>
-
-					<div className="case-card-actions">
-						<a href="arbitration.php?case_id=6" className="btn-primary-small">
-							👁️ Детали
-						</a>
-					</div>
-				</div>
-			</div>
-		</div>
-	)
-}

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

@@ -0,0 +1,133 @@
+'use client'
+
+import { useLastCases } from '@/app/hooks/react-query/useLastCases';
+import { useEffect, useMemo, useState } from 'react';
+import { formatDate, formatDateTime } from '@/app/lib/formatDate';
+import { useTranslations } from 'next-intl';
+
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation, Pagination } from 'swiper/modules';
+
+export default function ViolationsMyClaims() {
+	const t = useTranslations('Global');
+	const { data: dataCases } = useLastCases({
+		page: 1,
+		size: 5,
+		sort_by: 'createdAt',
+		sort_direction: 'desc'
+	});
+
+	const MAX_VISIBLE_ITEMS = 5;
+
+	const getSlidesPerView = () => {
+		if (!dataCases || !dataCases.content) return 1;
+		return Math.min(MAX_VISIBLE_ITEMS, dataCases.content.length);
+	};
+
+	const slidesPerViewCount = getSlidesPerView();
+
+	const swiperSettings = {
+		modules: [Navigation, Pagination],
+		breakpoints: {
+			0: {
+				slidesPerView: Math.min(slidesPerViewCount, 1),
+				spaceBetween: 20,
+			},
+			768: {
+				slidesPerView: Math.min(slidesPerViewCount, 2),
+				spaceBetween: 30,
+			},
+			1024: {
+				slidesPerView: Math.min(slidesPerViewCount, 3),
+				spaceBetween: 30,
+			},
+			1792: {
+				slidesPerView: slidesPerViewCount,
+				spaceBetween: 30,
+			}
+		},
+		loop: dataCases ? dataCases.content.length > 3 : false,
+		/* navigation: true, */
+		/* pagination: { clickable: true }, */
+	};
+
+	if (!dataCases) {
+		return (
+			<div className="violations-my-cases-section">
+				<div className="my-cases-header">
+					<div className="my-cases-title">
+						{t('recent-claims')}
+					</div>
+				</div>
+				<div
+					className="cases-carousel-track"
+				>
+					<div
+						className="loading-animation"
+					>
+						<div
+							className="global-spinner"
+						></div>
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="violations-my-cases-section">
+			<div className="my-cases-header">
+				<div className="my-cases-title">
+					{t('recent-claims')}
+				</div>
+			</div>
+			<div
+				className="cases-carousel-track"
+			>
+				{dataCases?.content.length === 0 ? (
+					<div>
+						{t('no-claims')}
+					</div>
+				) : (
+					<Swiper {...swiperSettings}>
+						{dataCases?.content.map((item) => {
+							return (
+								<SwiperSlide key={item.id}>
+									<div
+										className="case-card"
+										key={item.id}
+									>
+										<div className="case-card-header">
+											<div className="case-number">
+												{item.name}
+											</div>
+											<span className="case-status-badge status-submitted">
+												{item.type}
+											</span>
+										</div>
+
+										<div className="case-card-content">
+											{t('text-of-the-case')}:
+											<br />
+											<span>
+												{item.description}
+											</span>
+										</div>
+
+										<div className="case-card-meta">
+											<div><strong>{t('date-of-creation')}:</strong> {item.createdAt ? `${formatDate(item.createdAt)} ${formatDateTime(item.createdAt)}` : '---'}</div>
+											<div><strong>{t('date-of-update')}:</strong> {item.updatedAt ? `${formatDate(item.updatedAt)} ${formatDateTime(item.updatedAt)}` : '---'}</div>
+											<div><strong>{t('lawyer')}: </strong>
+												<span style={{ color: '#f59e0b' }}>{item.lawyer ? item.lawyer : t('not-assigned')}</span>
+											</div>
+										</div>
+									</div>
+								</SwiperSlide>
+							)
+						})}
+					</Swiper>
+				)}
+			</div>
+		</div>
+	)
+}

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

@@ -0,0 +1,130 @@
+'use client';
+
+import { useLastComplaints } from '@/app/hooks/react-query/useLastComplaints';
+import { formatDate, formatDateTime } from '@/app/lib/formatDate';
+import { useTranslations } from 'next-intl';
+
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation, Pagination } from 'swiper/modules';
+
+export default function ViolationsMyComplaint() {
+	const t = useTranslations('Global');
+	const { data: dataComplaint } = useLastComplaints({
+		page: 1,
+		size: 5,
+		sort_by: 'createdAt',
+		sort_direction: 'desc'
+	});
+
+	const MAX_VISIBLE_ITEMS = 5;
+
+	const getSlidesPerView = () => {
+		if (!dataComplaint || !dataComplaint.content) return 1;
+		return Math.min(MAX_VISIBLE_ITEMS, dataComplaint.content.length);
+	};
+
+	const slidesPerViewCount = getSlidesPerView();
+
+	const swiperSettings = {
+		modules: [Navigation, Pagination],
+		breakpoints: {
+			0: {
+				slidesPerView: Math.min(slidesPerViewCount, 1),
+				spaceBetween: 20,
+			},
+			768: {
+				slidesPerView: Math.min(slidesPerViewCount, 2),
+				spaceBetween: 30,
+			},
+			1024: {
+				slidesPerView: Math.min(slidesPerViewCount, 3),
+				spaceBetween: 30,
+			},
+			1792: {
+				slidesPerView: slidesPerViewCount,
+				spaceBetween: 30,
+			}
+		},
+		/* navigation: true, */
+		/* pagination: { clickable: true }, */
+		loop: dataComplaint ? dataComplaint.content.length > 3 : false,
+	};
+
+	if (!dataComplaint) {
+		return (
+			<div className="violations-my-cases-section">
+				<div className="my-cases-header">
+					<div className="my-cases-title">
+						{t('recent-complaints')}
+					</div>
+				</div>
+				<div
+					className="cases-carousel-track"
+				>
+					<div
+						className="loading-animation"
+					>
+						<div
+							className="global-spinner"
+						></div>
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="violations-my-cases-section">
+			<div className="my-cases-header">
+				<div className="my-cases-title">
+					{t('recent-complaints')}
+				</div>
+			</div>
+			<div
+				className="cases-carousel-track"
+			>
+				{dataComplaint?.content.length === 0 ? (
+					<div>
+						{t('no-complaints')}
+					</div>
+				) : (
+					<Swiper {...swiperSettings}>
+						{dataComplaint?.content.map((item) => {
+							return (
+								<SwiperSlide key={item.id}>
+									<div className="case-card">
+										<div className="case-card-header">
+											<div className="case-number">
+												COM-{item.id}
+											</div>
+											<span className="case-status-badge status-submitted">
+												{item.status}
+											</span>
+										</div>
+
+										<div className="case-card-content">
+											{t('text-of-the-complaint')}:
+											<br />
+											<span>
+												{item.complaint_text}
+											</span>
+										</div>
+
+										<div className="case-card-meta">
+											<div>
+												<strong>{t('date-of-creation')}:</strong> {item.created_at ? `${formatDate(item.created_at)} ${formatDateTime(item.created_at)}` : '---'}
+											</div>
+											<div>
+												<strong>{t('date-of-update')}:</strong> {item.updated_at ? `${formatDate(item.updated_at)} ${formatDateTime(item.updated_at)}` : '---'}
+											</div>
+										</div>
+									</div>
+								</SwiperSlide>
+							);
+						})}
+					</Swiper>
+				)}
+			</div>
+		</div>
+	);
+}