change matched table styles

src/app/styles/violation-details.scss

@@ -289,7 +289,7 @@
 
 	.source-status {
 		padding: 4px 10px;
-		border-radius: 6px;
+		border-radius: 12px;
 		font-size: 11px;
 		font-weight: 600;
 		white-space: nowrap;
@@ -343,11 +343,12 @@
 		}
 	}
 
-	.btn-success {
+	.btn-resolve {
 		background: linear-gradient(135deg, #10b981, #059669);
 		color: white;
-		max-width: 200px;
-		padding: 6px 10px;
+		/* max-width: 200px; */
+		padding: 12px 30px;
+		white-space: nowrap;
 
 		&:hover {
 			transform: translateY(-2px);
@@ -393,8 +394,7 @@
 			border-bottom: 1px solid v.$border-color-1;
 			justify-content: space-between;
 			align-items: center;
-			margin-bottom: 20px;
-			padding-bottom: 15px;
+			margin-bottom: 5px;
 			display: flex;
 		}
 
@@ -455,9 +455,10 @@
 		&-right-side {
 			display: flex;
 			flex-direction: column;
-			gap: 10px;
+			/* gap: 10px; */
 		}
 
+		&-date,
 		&-source {
 			span {
 				color: #64748b;
@@ -470,15 +471,28 @@
 			}
 		}
 
-		&-date-status {
+		&-status {
 			display: flex;
 			gap: 10px;
+			align-items: center;
+			margin-top: auto;
 
 			.source-status {
 				margin-bottom: 0;
 			}
 		}
 
+		&-date-value {
+			display: flex;
+			gap: 8px;
+			font-weight: 600;
+		}
+
+		&-date-status {
+			display: flex;
+			gap: 10px;
+		}
+
 		&-action {
 			margin-top: auto;
 		}
@@ -489,13 +503,22 @@
 		}
 
 		&-header {
+			flex-shrink: 0;
+			padding-bottom: 5px;
+			border-bottom: 1px solid rgb(226, 232, 240);
+
+			&-grid {
 				display: grid;
 				grid-template-columns: 300px auto;
 				gap: 10px;
-			flex-shrink: 0;
-			padding-bottom: 20px;
+				margin-bottom: 10px;
+			}
 
-			border-bottom: 1px solid rgb(226, 232, 240);
+			&-bottom {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+			}
 		}
 
 		&-case {
@@ -576,9 +599,11 @@
 				background: v.$bg-hover;
 				color: v.$text-p;
 				border: 2px solid transparent;
+				padding: 6px 30px;
 
 				&.active {
 					background: linear-gradient(135deg, v.$p-color, v.$s-color);
+					/* background: #3b82f6; */
 					color: v.$white;
 					border: 2px solid transparent;
 				}
@@ -659,25 +684,56 @@
 		}
 
 		.complaint-details {
-			h5 {
-				font-weight: 700;
-				font-size: 22px;
-			}
+			border: 1px solid #e0e0e0;
+			border-radius: 8px;
+			overflow: hidden;
+			background-color: v.$white;
+			max-width: 50%;
 
 			&-item {
-				margin-bottom: 10px;
+				border-bottom: 1px solid #f0f0f0;
+				background-color: v.$bg-hover;
+
+				&:last-child {
+					border-bottom: none;
+				}
+
+				&:first-child {
+					font-weight: 700;
+
+					.complaint-details-header {
+						/* background-color: v.$bg-hover; */
+					}
+				}
+			}
+
+			&-header {
+				background-color: #f8f9fa;
+				background-color: v.$b-color-1;
+				padding: 10px 16px;
+				border-bottom: 1px solid #e9ecef;
 			}
 
 			&-title {
-				color: v.$text-s;
-				font-size: 16px;
-				font-weight: 400;
+				color: #495057;
+				font-size: 14px;
+				font-weight: 500;
+				text-transform: uppercase;
+				letter-spacing: 0.5px;
 			}
 
-			&-text {
-				color: v.$text-p;
+			&-content {
+				padding: 12px 16px;
+				color: #212529;
+				font-size: 15px;
+				font-weight: 400;
+				line-height: 1.5;
+				background-color: #ffffff;
+			}
+
+			strong {
 				font-weight: 600;
-				font-size: 18px;
+				color: #212529;
 			}
 		}
 	}

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

@@ -7,7 +7,7 @@ import { createComplaint, fetchComplainInfo } from '@/app/actions/violationActio
 import { toast } from 'sonner';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { MatchStatus } from '@/app/actions/violationActions';
-import {formatDate, formatDateTime} from '@/app/lib/formatDate';
+import { formatDate, formatDateTime } from '@/app/lib/formatDate';
 
 interface complaintInfo {
 	id: number,
@@ -255,81 +255,53 @@ export default function CaseComplaint({ selectedViolation, updateStatusHandler }
 		return (
 			<div className="violation-info-case">
 				{complainInfo?.body.content ? (
-					<div>
+					<>
 						{complainInfo.body.content.map((item: complaintInfo) => {
 							return (
 								<div key={item.id}>
 									<div className="complaint-details">
-										<div
-											className="complaint-details-item"
-										>
-											<strong>ID:</strong> {item.id}
+										<div className="complaint-details-item">
+											<div className="complaint-details-header">
+												<h5>ID: {item.id}</h5>
 											</div>
-										<div
-											className="complaint-details-item"
-										>
-											<span
-												className="complaint-details-title"
-											>
-												{t('status')}:
-											</span>
-											<br />
-											<span
-												className="complaint-details-text"
-											>
-												{item.status}
-											</span>
 										</div>
-										<div
-											className="complaint-details-item"
-										>
-											<span
-												className="complaint-details-title"
-											>
-												{t('date-of-creation')}:
-											</span>
-											<br />
-											<span
-												className="complaint-details-text"
-											>
+
+										<div className="complaint-details-item">
+											<div className="complaint-details-header">
+												<span className="complaint-details-title">{t('status')}:</span>
+											</div>
+											<div className="complaint-details-content">{item.status}</div>
+										</div>
+
+										<div className="complaint-details-item">
+											<div className="complaint-details-header">
+												<span className="complaint-details-title">{t('date-of-creation')}:</span>
+											</div>
+											<div className="complaint-details-content">
 												{item.created_at ? `${formatDate(item.created_at)}: ${formatDateTime(item.created_at)}` : '---'}
-											</span>
 											</div>
-										<div
-											className="complaint-details-item"
-										>
-											<span
-												className="complaint-details-title"
-											>
-												{t('date-of-update')}:
-											</span>
-											<br />
-											<span
-												className="complaint-details-text"
-											>
+										</div>
+
+										<div className="complaint-details-item">
+											<div className="complaint-details-header">
+												<span className="complaint-details-title">{t('date-of-update')}:</span>
+											</div>
+											<div className="complaint-details-content">
 												{item.updated_at ? `${formatDate(item.updated_at)}: ${formatDateTime(item.updated_at)}` : '---'}
-											</span>
 											</div>
-										<div
-											className="complaint-details-item"
-										>
-											<span
-												className="complaint-details-title"
-											>
-												{t('text-of-the-complaint')}:
-											</span>
-											<br />
-											<span
-												className="complaint-details-text"
-											>
-												{item.complaint_text}
-											</span>
+										</div>
+
+										<div className="complaint-details-item">
+											<div className="complaint-details-header">
+												<span className="complaint-details-title">{t('text-of-the-complaint')}:</span>
+											</div>
+											<div className="complaint-details-content">{item.complaint_text}</div>
 										</div>
 									</div>
 								</div>
 							);
 						})}
-					</div>
+					</>
 				) : (
 					<div>
 						{t('no-information-about-the-complaint')}

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

@@ -207,132 +207,67 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler }
 		return (
 			<div className="violation-info-case">
 				{caseInfo?.body?.content ? (
-					<div>
+					<>
 						{caseInfo.body.content.map((item: CaseInfo) => {
 							return (
 								<div key={item.id}>
-{/* 									<div className="complaint-details">
-										<div><strong>ID:</strong> {item.id}</div>
-										<div><strong>{t('name')}:</strong>
-											<br />
-											{item.name}
-										</div>
-										<div><strong>{t('description')}:</strong> {item.description}</div>
-										<div><strong>{t('amount')}:</strong> {item.amount}</div>
-										<div><strong>{t('priority')}:</strong> {item.priority}</div>
-										<div><strong>{t('type')}:</strong> {item.type}</div>
-										<div><strong>{t('lawyer')}:</strong> {item.lawyer || t('not-assigned')}</div>
-										<div><strong>{t('violation-id')}:</strong> {item.violationId}</div>
-										<div><strong>{t('date-of-creation')}:</strong> {item.createdAt ? `${formatDate(item.createdAt)}: ${formatDateTime(item.createdAt)}` : '---'}</div>
-										<div><strong>{t('date-of-update')}:</strong> {item.createdAt ? `${formatDate(item.createdAt)}: ${formatDateTime(item.createdAt)}` : '---'}</div>
-										{item.content && <p><strong>{t('content')}:</strong> {item.content}</p>}
-									</div> */}
-
-
 									<div className="complaint-details">
-										<div
-											className="complaint-details-item"
-										>
+										<div className="complaint-details-item">
+											<div className="complaint-details-header">
 												<h5>{item.name}</h5>
 											</div>
-										<div
-											className="complaint-details-item"
-										>
-											<span
-												className="complaint-details-title"
-											>
-												{t('status')}:
-											</span>
-											<br />
-											<span
-												className="complaint-details-text"
-											>
-												{item.type}
-											</span>
 										</div>
-										<div
-											className="complaint-details-item"
-										>
-											<span
-												className="complaint-details-title"
-											>
-												{t('date-of-creation')}:
-											</span>
-											<br />
-											<span
-												className="complaint-details-text"
-											>
+
+										<div className="complaint-details-item">
+											<div className="complaint-details-header">
+												<span className="complaint-details-title">{t('status')}:</span>
+											</div>
+											<div className="complaint-details-content">{item.type}</div>
+										</div>
+
+										<div className="complaint-details-item">
+											<div className="complaint-details-header">
+												<span className="complaint-details-title">{t('date-of-creation')}:</span>
+											</div>
+											<div className="complaint-details-content">
 												{item.createdAt ? `${formatDate(item.createdAt)}: ${formatDateTime(item.createdAt)}` : '---'}
-											</span>
 											</div>
-										<div
-											className="complaint-details-item"
-										>
-											<span
-												className="complaint-details-title"
-											>
-												{t('date-of-update')}:
-											</span>
-											<br />
-											<span
-												className="complaint-details-text"
-											>
+										</div>
+
+										<div className="complaint-details-item">
+											<div className="complaint-details-header">
+												<span className="complaint-details-title">{t('date-of-update')}:</span>
+											</div>
+											<div className="complaint-details-content">
 												{item.updatedAt ? `${formatDate(item.updatedAt)}: ${formatDateTime(item.updatedAt)}` : '---'}
-											</span>
-										</div>
-										<div
-											className="complaint-details-item"
-										>
-											<span
-												className="complaint-details-title"
-											>
-												{t('description')}:
-											</span>
-											<br />
-											<span
-												className="complaint-details-text"
-											>
-												{item.description}
-											</span>
-										</div>
-
-										<div
-											className="complaint-details-item"
-										>
-											<span
-												className="complaint-details-title"
-											>
-												{t('amount-of-damage')}:
-											</span>
-											<br />
-											<span
-												className="complaint-details-text"
-											>
-												{item.amount}
-											</span>
-										</div>
-										<div
-											className="complaint-details-item"
-										>
-											<span
-												className="complaint-details-title"
-											>
-												{t('lawyer')}:
-											</span>
-											<br />
-											<span
-												className="complaint-details-text"
-											>
-												{item.lawyer}
-											</span>
 											</div>
 										</div>
 
+										<div className="complaint-details-item">
+											<div className="complaint-details-header">
+												<span className="complaint-details-title">{t('description')}:</span>
+											</div>
+											<div className="complaint-details-content">{item.description}</div>
+										</div>
 
+										<div className="complaint-details-item">
+											<div className="complaint-details-header">
+												<span className="complaint-details-title">{t('amount-of-damage')}:</span>
+											</div>
+											<div className="complaint-details-content">{item.amount}</div>
+										</div>
+
+										<div className="complaint-details-item">
+											<div className="complaint-details-header">
+												<span className="complaint-details-title">{t('lawyer')}:</span>
+											</div>
+											<div className="complaint-details-content">{item.lawyer}</div>
+										</div>
+									</div>
 								</div>
 							);
 						})}
-					</div>
+					</>
 				) : (
 					<div>
 						{t('no-information-about-the-complaint')}

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

@@ -1,7 +1,7 @@
 'use client'
 
 import Link from 'next/link';
-import { formatDate } from '@/app/lib/formatDate';
+import { formatDate, formatDateTime } from '@/app/lib/formatDate';
 import { useTranslations } from 'next-intl';
 import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations';
 import CaseComplaint from '@/app/ui/file-page/violation-table/case-complaint';
@@ -111,14 +111,11 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
 			<div
 				className="violation-info-content"
 			>
-				<h3
-					className="violation-info-title"
-				>
-					{selectedViolation?.page_title}
-				</h3>
-
 				<div
 					className="violation-info-header"
+				>
+					<div
+						className="violation-info-header-grid"
 					>
 						<div className="violation-info-image-wrapper">
 							<div
@@ -166,12 +163,18 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
 						<div
 							className="violation-info-right-side"
 						>
+							<h3
+								className="violation-info-title"
+							>
+								{selectedViolation?.page_title}
+							</h3>
 							<div
 								className="violation-info-source"
 							>
 								<span>
 									{t('source')}:
 								</span>
+								<br />
 								<Link
 									href={selectedViolation?.page_url ? selectedViolation?.page_url : '#'}
 									className="source"
@@ -181,12 +184,10 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
 									{selectedViolation?.page_url ? cleanUrlForDisplay(selectedViolation?.page_url) : selectedViolation?.page_url}
 								</Link>
 							</div>
+
 							<div
-							className="violation-info-date-status"
+								className="violation-info-status"
 							>
-							<span>
-								{t('date')} {selectedViolation?.created_date ? formatDate(selectedViolation?.created_date) : '#'}
-							</span>
 								{/* COMPLAINT_IN_WORK COMPLAINT_AND_LEGAL_IN_WORK*/}
 								{localViolation?.status === "COMPLAINT_AND_LEGAL_IN_WORK" ? (
 									<>
@@ -205,11 +206,36 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
 									)
 								)}
 							</div>
+
+						</div>
+					</div>
+					<div
+						className="violation-info-header-bottom"
+					>
+						<div
+							className="violation-info-date"
+						>
+							<span>
+								{t('date-of-creation')}:
+							</span>
+							<div
+								className="violation-info-date-value"
+							>
+								<div>
+									{selectedViolation?.created_date ? `${formatDate(selectedViolation?.created_date)}` : '#'}
+								</div>
+								<div>
+									{selectedViolation?.created_date ? `${formatDateTime(selectedViolation?.created_date)}` : '#'}
+								</div>
+
+							</div>
+						</div>
+
 						<div
 							className="violation-info-action"
 						>
 							<button
-								className="btn-action btn-success"
+								className="btn-action btn-resolve"
 								onClick={() => {
 									if (selectedViolation?.id) {
 										updateStatusHandler(selectedViolation.id, 'AUTHORIZED_USE');
@@ -217,7 +243,7 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
 								}}
 								disabled={isUpdating}
 							>
-								{t('mark-as-solved')}
+								{t('allow-use')}
 							</button>
 						</div>
 					</div>

src/i18n/messages/en.json

@@ -370,7 +370,7 @@
 		"search-info-description-text": "Our system analyzes the uploaded file and compares it with your protected files, using computer vision and digital fingerprinting algorithms.",
 		"documents-few": "Documents",
 		"change": "Change",
-		"mark-as-solved": "Mark as solved",
+		"allow-use": "Allow use",
 		"loading": "Loading",
 		"filing-complaint": "Filing a complaint",
 		"submit-violation": "Submit a violation",

src/i18n/messages/ru.json

@@ -370,7 +370,7 @@
 		"search-info-description-text": "Наша система анализирует загруженный файл и сравнивает его с вашими защищенными файлами, используя алгоритмы компьютерного зрения и цифровых отпечатков.",
 		"documents-few": "Документов",
 		"change": "Изменить",
-		"mark-as-solved": "Отметить решенным",
+		"allow-use": "Разрешить использование",
 		"loading": "Загрузка",
 		"filing-complaint": "Подача жалобы",
 		"submit-violation": "Отправить нарушение",
@@ -528,8 +528,8 @@
 		"NEW": "Новый",
 		"SHOWED": "Просмотрен",
 		"LEGAL_IN_WORK": "Дело в работе",
-		"COMPLAINT_IN_WORK": "Жалоба в работе",
-		"COMPLAINT_AND_LEGAL_IN_WORK": "Дело и жалоба в работе",
+		"COMPLAINT_IN_WORK": "Претензия в работе",
+		"COMPLAINT_AND_LEGAL_IN_WORK": "Дело и претензия в работе",
 		"AUTHORIZED_USE": "Разрешенное использование",
 		"CREATED": "Новый"
 	},