add complaints\claims blocks

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

@@ -1,10 +1,11 @@
 import PageTitleColorFrame from '@/app/ui/page-title-color-frame';
-import ViolationsMyCases from '@/app/ui/violations/violations-my-cases';
+import ViolationsMyComplaint from '@/app/ui/violations/violations-my-complaint';
 import ViolationsCheckAllSection from '@/app/ui/violations/violations-check-all-section';
 import ViolationsTable from '@/app/ui/violations/violations-table';
 import ViolationsStatistic from '@/app/ui/violations/violations-statistic';
 import AnalyticsCardGeography from '@/app/ui/reports/analytics-card-geography';
 import AnalyticsCardDistribution from '@/app/ui/reports/analytics-card-distribution';
+import ViolationsMyClaims from '@/app/ui/violations/violations-my-claims';
 
 export default function Page() {
 	return (
@@ -16,11 +17,12 @@ export default function Page() {
 			<ViolationsStatistic />
 			<ViolationsCheckAllSection />
 			<ViolationsTable />
-			<ViolationsMyCases />
+			<ViolationsMyComplaint />
 			<div className="analytics-grid">
 				<AnalyticsCardDistribution />
 				<AnalyticsCardGeography />
 			</div>
+			<ViolationsMyClaims />
 		</>
 	)
 }

src/app/actions/violationActions.ts

@@ -44,7 +44,6 @@ export async function getViolationSearchStatus() {
 
 export async function startGlobalMonitoring(monitoringType: 'monitoring' | 'all_files') {
 	const token = await getSessionData('token');
-	console.log('startGlobalMonitoring');
 
 	try {
 		const response = await fetch(`${API_BASE_URL}/api/v1/global-search/start`, {
@@ -67,7 +66,6 @@ export async function startGlobalMonitoring(monitoringType: 'monitoring' | 'all_
 				totalFiles: number
 			} = await response.json();
 
-			console.log(parsed);
 			if (parsed?.status === 'ACCEPTED') {
 				return parsed
 			} else {
@@ -614,8 +612,16 @@ export async function createCase(
 	}
 }
 
-export async function fetchLastCase() {
+export interface ComplaintsCaseQueryParams {
+	page?: number,
+	size?: number,
+	sort_by?: string,
+	sort_direction?: 'desc' | 'asc'
+}
+
+export async function fetchLastCase(params: ComplaintsCaseQueryParams) {
 	const token = await getSessionData('token');
+	const { page, size, sort_by, sort_direction } = params;
 
 	try {
 		const response = await fetch(`${API_BASE_URL}/api/v1/data`, {
@@ -625,7 +631,11 @@ export async function fetchLastCase() {
 				msg_id: 30017,
 				message_body: {
 					action: "get_all",
-					token: token
+					token: token,
+					page,
+					size,
+					sort_by,
+					sort_direction
 				}
 			}),
 			headers: {
@@ -636,8 +646,9 @@ export async function fetchLastCase() {
 
 		if (response.ok) {
 			let parsed = await response.json();
-			if (parsed) {
-				return parsed;
+
+			if (parsed.message_code === 0) {
+				return parsed.message_body;
 			} else {
 				throw null;
 			}
@@ -649,18 +660,23 @@ export async function fetchLastCase() {
 	}
 }
 
-export async function fetchLastComplaint() {
+export async function fetchLastComplaint(params: ComplaintsCaseQueryParams) {
 	const token = await getSessionData('token');
+	const { page, size, sort_by, sort_direction } = params;
 
 	try {
 		const response = await fetch(`${API_BASE_URL}/api/v1/data`, {
 			method: 'POST',
 			body: JSON.stringify({
 				version: 1,
-				msg_id: 30017,
+				msg_id: 30013,
 				message_body: {
 					action: "get_all",
-					token: token
+					token: token,
+					page,
+					size,
+					sort_by,
+					sort_direction
 				}
 			}),
 			headers: {
@@ -671,8 +687,9 @@ export async function fetchLastComplaint() {
 
 		if (response.ok) {
 			let parsed = await response.json();
-			if (parsed) {
-				return parsed;
+
+			if (parsed.message_code === 0) {
+				return parsed.message_body;
 			} else {
 				throw null;
 			}

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

@@ -1,15 +1,36 @@
 import { useQuery } from '@tanstack/react-query';
-import { fetchLastCase } from '@/app/actions/violationActions';
+import { fetchLastCase, ComplaintsCaseQueryParams } from '@/app/actions/violationActions';
 
+interface Case {
+	amount: number;
+	content: null | string;
+	createdAt: string;
+	description: string;
+	id: number;
+	lawyer: null | string;
+	name: string;
+	pageNumber: number;
+	pageSize: number;
+	priority: "HIGH" | "MEDIUM" | "LOW";
+	totalElements: number;
+	totalPages: number;
+	type: "ACTIVE" | "INACTIVE" | string;
+	updatedAt: string;
+	violationId: number;
+}
 export interface useLastCase {
-	test: number,
+	content: Case[],
+	page: 1,
+	size: 5,
+	totalElements: 10,
+	totalPages: 2,
 }
 
-export const useLastCases = () => {
+export const useLastCases = (params: ComplaintsCaseQueryParams) => {
 	return useQuery({
 		queryKey: ['lastCases'],
 		queryFn: () => {
-			return fetchLastCase()
+			return fetchLastCase(params)
 		},
 		select: (data: useLastCase | null) => {
 			if (!data) {

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

@@ -1,15 +1,29 @@
 import { useQuery } from '@tanstack/react-query';
-import { fetchLastComplaint } from '@/app/actions/violationActions';
+import { fetchLastComplaint, ComplaintsCaseQueryParams } from '@/app/actions/violationActions';
 
+interface Complaint {
+	complaint_text: string,
+	created_at: string,
+	email: string,
+	id: number,
+	not_moderated: boolean,
+	status: "CREATED" | string,
+	updated_at: string,
+	violation_id: number,
+}
 export interface useLastComplaint {
-	test: number,
+	content: Complaint[],
+	page: 1,
+	size: 5,
+	totalElements: 10,
+	totalPages: 2,
 }
 
-export const useLastComplaints = () => {
+export const useLastComplaints = (params: ComplaintsCaseQueryParams) => {
 	return useQuery({
 		queryKey: ['lastComplaints'],
 		queryFn: () => {
-			return fetchLastComplaint()
+			return fetchLastComplaint(params)
 		},
 		select: (data: useLastComplaint | null) => {
 			if (!data) {

src/app/styles/globals.css

@@ -53,3 +53,6 @@ path:focus {
 }
 
 @import "tailwindcss";
+@import 'swiper/css';
+@import 'swiper/css/navigation';
+@import 'swiper/css/pagination';

src/app/styles/pages-styles.scss

@@ -2624,15 +2624,6 @@
 		}
 	}
 
-	.cases-carousel-track {
-		display: grid;
-		grid-template-columns: repeat(3, 1fr);
-		gap: 20px;
-
-		@media (max-width: 890px) {
-			grid-template-columns: auto;
-		}
-
 	.case-card {
 		background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
 		border: 2px solid v.$border-color-1;
@@ -2643,6 +2634,11 @@
 		position: relative;
 		overflow: hidden;
 
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		height: 100%;
+
 		&:hover::before {
 			opacity: 1;
 		}
@@ -2666,6 +2662,7 @@
 			align-items: center;
 			margin-bottom: 16px;
 			gap: 12px;
+			flex-wrap: wrap;
 
 			.case-number {
 				font-weight: 800;
@@ -2674,12 +2671,16 @@
 			}
 		}
 
-			.case-card-title {
+		.case-card-content {
 			font-size: 0.95rem;
 			font-weight: 600;
 			color: #1e293b;
 			margin-bottom: 16px;
 			min-height: 50px;
+
+			span {
+				color: #64748b;
+			}
 		}
 
 		.case-card-meta {
@@ -2728,6 +2729,18 @@
 			white-space: nowrap;
 		}
 	}
+
+	.cases-carousel-track {
+		position: relative;
+
+/* 		.swiper-wrapper {
+			align-items: stretch;
+		} */
+
+		.swiper-slide {
+			height: auto;
+			display: flex;
+		}
 	}
 }
 

src/app/styles/reports.scss

@@ -72,7 +72,7 @@
 .analytics-grid {
 	display: flex;
 	gap: 30px;
-	margin-bottom: 40px;
+	margin-bottom: 10px;
 	justify-content: space-between;
 
 	@media (max-width: 970px) {

src/app/styles/violation-details.scss

@@ -420,12 +420,16 @@
 		}
 
 		&-title {
-			/* border-bottom: 1px solid v.$border-color-1; */
 			font-size: 18px;
 			justify-content: space-between;
 			align-items: center;
 			margin-bottom: 5px;
 			display: flex;
+
+			&.not-selected-match {
+				height: 100%;
+				justify-content: center;
+			}
 		}
 
 		&-image-wrapper {

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>
+	);
+}

src/i18n/messages/en.json

@@ -429,7 +429,11 @@
 		"file-a-claim": "File a claim",
 		"file-a-complaint": "File a complaint",
 		"you-can": "You can",
-		"complaint": "Complaint"
+		"complaint": "Complaint",
+		"recent-complaints": "Recent complaints",
+		"recent-claims": "Recent claims",
+		"no-complaints": "No complaints",
+		"no-claims": "No claims"
 	},
 	"Login-register-form": {
 		"and": "and",

src/i18n/messages/ru.json

@@ -407,8 +407,8 @@
 		"description": "Описание",
 		"priority": "Приоритет",
 		"type": "Тип",
-		"lawyer": "Адвокат",
-		"not-assigned": "Не назначено",
+		"lawyer": "Юрист",
+		"not-assigned": "Не назначен",
 		"case": "Претензия",
 		"create-case": "Создать претензию",
 		"case-name": "Название претензии",
@@ -429,7 +429,11 @@
 		"file-a-claim": "Подать претензию",
 		"file-a-complaint": "Подать жалобу",
 		"you-can": "Вы можете",
-		"complaint": "Жалоба"
+		"complaint": "Жалоба",
+		"recent-complaints": "Недавние жалобы",
+		"recent-claims": "Недавние претензии",
+		"no-complaints": "Жалоб нет",
+		"no-claims": "Претензии нет"
 	},
 	"Login-register-form": {
 		"and": "и",