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;
+		/* max-width: 200px; */
-		padding: 6px 10px;
+		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;
+			margin-bottom: 5px;
-			padding-bottom: 15px;
 			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 {
-			display: grid;
-			grid-template-columns: 300px auto;
-			gap: 10px;
 			flex-shrink: 0;
-			padding-bottom: 20px;
+			padding-bottom: 5px;
-
 			border-bottom: 1px solid rgb(226, 232, 240);
+
+			&-grid {
+				display: grid;
+				grid-template-columns: 300px auto;
+				gap: 10px;
+				margin-bottom: 10px;
+			}
+
+			&-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 {
+			border: 1px solid #e0e0e0;
-				font-weight: 700;
+			border-radius: 8px;
-				font-size: 22px;
+			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;
+				color: #495057;
-				font-size: 16px;
+				font-size: 14px;
-				font-weight: 400;
+				font-weight: 500;
+				text-transform: uppercase;
+				letter-spacing: 0.5px;
 			}
 
-			&-text {
+			&-content {
-				color: v.$text-p;
+				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
+										<div className="complaint-details-item">
-											className="complaint-details-item"
+											<div className="complaint-details-header">
-										>
+												<h5>ID: {item.id}</h5>
-											<strong>ID:</strong> {item.id}
+											</div>
 										</div>
-										<div
+
-											className="complaint-details-item"
+										<div className="complaint-details-item">
-										>
+											<div className="complaint-details-header">
-											<span
+												<span className="complaint-details-title">{t('status')}:</span>
-												className="complaint-details-title"
+											</div>
-											>
+											<div className="complaint-details-content">{item.status}</div>
-												{t('status')}:
-											</span>
-											<br />
-											<span
-												className="complaint-details-text"
-											>
-												{item.status}
-											</span>
 										</div>
-										<div
+
-											className="complaint-details-item"
+										<div className="complaint-details-item">
-										>
+											<div className="complaint-details-header">
-											<span
+												<span className="complaint-details-title">{t('date-of-creation')}:</span>
-												className="complaint-details-title"
+											</div>
-											>
+											<div className="complaint-details-content">
-												{t('date-of-creation')}:
-											</span>
-											<br />
-											<span
-												className="complaint-details-text"
-											>
 												{item.created_at ? `${formatDate(item.created_at)}: ${formatDateTime(item.created_at)}` : '---'}
-											</span>
+											</div>
 										</div>
-										<div
+
-											className="complaint-details-item"
+										<div className="complaint-details-item">
-										>
+											<div className="complaint-details-header">
-											<span
+												<span className="complaint-details-title">{t('date-of-update')}:</span>
-												className="complaint-details-title"
+											</div>
-											>
+											<div className="complaint-details-content">
-												{t('date-of-update')}:
-											</span>
-											<br />
-											<span
-												className="complaint-details-text"
-											>
 												{item.updated_at ? `${formatDate(item.updated_at)}: ${formatDateTime(item.updated_at)}` : '---'}
-											</span>
+											</div>
 										</div>
-										<div
+
-											className="complaint-details-item"
+										<div className="complaint-details-item">
-										>
+											<div className="complaint-details-header">
-											<span
+												<span className="complaint-details-title">{t('text-of-the-complaint')}:</span>
-												className="complaint-details-title"
+											</div>
-											>
+											<div className="complaint-details-content">{item.complaint_text}</div>
-												{t('text-of-the-complaint')}:
-											</span>
-											<br />
-											<span
-												className="complaint-details-text"
-											>
-												{item.complaint_text}
-											</span>
 										</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
+										<div className="complaint-details-item">
-											className="complaint-details-item"
+											<div className="complaint-details-header">
-										>
+												<h5>{item.name}</h5>
-											<h5>{item.name}</h5> 
+											</div>
-										</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"
-											>
-												{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"
-											>
-												{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
+										<div className="complaint-details-item">
-											className="complaint-details-item"
+											<div className="complaint-details-header">
-										>
+												<span className="complaint-details-title">{t('status')}:</span>
-											<span
+											</div>
-												className="complaint-details-title"
+											<div className="complaint-details-content">{item.type}</div>
-											>
-												{t('amount-of-damage')}:
-											</span>
-											<br />
-											<span
-												className="complaint-details-text"
-											>
-												{item.amount}
-											</span>
 										</div>
-										<div
+
-											className="complaint-details-item"
+										<div className="complaint-details-item">
-										>
+											<div className="complaint-details-header">
-											<span
+												<span className="complaint-details-title">{t('date-of-creation')}:</span>
-												className="complaint-details-title"
+											</div>
-											>
+											<div className="complaint-details-content">
-												{t('lawyer')}:
+												{item.createdAt ? `${formatDate(item.createdAt)}: ${formatDateTime(item.createdAt)}` : '---'}
-											</span>
+											</div>
-											<br />
+										</div>
-											<span
+
-												className="complaint-details-text"
+										<div className="complaint-details-item">
-											>
+											<div className="complaint-details-header">
-												{item.lawyer}
+												<span className="complaint-details-title">{t('date-of-update')}:</span>
-											</span>
+											</div>
+											<div className="complaint-details-content">
+												{item.updatedAt ? `${formatDate(item.updatedAt)}: ${formatDateTime(item.updatedAt)}` : '---'}
+											</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,105 +111,131 @@ 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-image-wrapper">
+					<div
-						<div
+						className="violation-info-header-grid"
-							className="violation-info-image"
+					>
-						>
+						<div className="violation-info-image-wrapper">
-							<Image
+							<div
-								src={selectedViolation?.url}
+								className="violation-info-image"
-								alt={selectedViolation?.page_title}
+							>
-								unoptimized
+								<Image
-								fill
+									src={selectedViolation?.url}
-								sizes="100px"
+									alt={selectedViolation?.page_title}
-								onError={(e) => {
+									unoptimized
-									const target = e.target as HTMLImageElement;
+									fill
-									target.src = '/images/no-image.png';
+									sizes="100px"
-								}}
+									onError={(e) => {
-							/>
+										const target = e.target as HTMLImageElement;
+										target.src = '/images/no-image.png';
+									}}
+								/>
+							</div>
+							<div className="violation-info-image-buttons">
+								<button
+									className="image-btn image-btn-view"
+									onClick={() => setIsModalOpen(true)}
+									title="Увеличить"
+								>
+									<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+										<circle cx="11" cy="11" r="8" />
+										<line x1="21" y1="21" x2="16.65" y2="16.65" />
+										<line x1="11" y1="8" x2="11" y2="14" />
+										<line x1="8" y1="11" x2="14" y2="11" />
+									</svg>
+								</button>
+								<button
+									className="image-btn image-btn-open"
+									onClick={openInNewTab}
+									title="Открыть в новой вкладке"
+								>
+									<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+										<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+										<polyline points="15 3 21 3 21 9" />
+										<line x1="10" y1="14" x2="21" y2="3" />
+									</svg>
+								</button>
+							</div>
 						</div>
-						<div className="violation-info-image-buttons">
+
-							<button
+						<div
-								className="image-btn image-btn-view"
+							className="violation-info-right-side"
-								onClick={() => setIsModalOpen(true)}
+						>
-								title="Увеличить"
+							<h3
+								className="violation-info-title"
 							>
-								<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+								{selectedViolation?.page_title}
-									<circle cx="11" cy="11" r="8" />
+							</h3>
-									<line x1="21" y1="21" x2="16.65" y2="16.65" />
+							<div
-									<line x1="11" y1="8" x2="11" y2="14" />
+								className="violation-info-source"
-									<line x1="8" y1="11" x2="14" y2="11" />
-								</svg>
-							</button>
-							<button
-								className="image-btn image-btn-open"
-								onClick={openInNewTab}
-								title="Открыть в новой вкладке"
 							>
-								<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+								<span>
-									<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+									{t('source')}:
-									<polyline points="15 3 21 3 21 9" />
+								</span>
-									<line x1="10" y1="14" x2="21" y2="3" />
+								<br />
-								</svg>
+								<Link
-							</button>
+									href={selectedViolation?.page_url ? selectedViolation?.page_url : '#'}
+									className="source"
+									target="_blank"
+									scroll={false}
+								>
+									{selectedViolation?.page_url ? cleanUrlForDisplay(selectedViolation?.page_url) : selectedViolation?.page_url}
+								</Link>
+							</div>
+
+							<div
+								className="violation-info-status"
+							>
+								{/* COMPLAINT_IN_WORK COMPLAINT_AND_LEGAL_IN_WORK*/}
+								{localViolation?.status === "COMPLAINT_AND_LEGAL_IN_WORK" ? (
+									<>
+										<span className="source-status legal_in_work">
+											{tStatus('LEGAL_IN_WORK')}
+										</span>
+										<span className="source-status complaint_in_work">
+											{tStatus('COMPLAINT_IN_WORK')}
+										</span>
+									</>
+								) : (
+									localViolation?.status && (
+										<span className={`source-status ${localViolation?.status.toLowerCase()}`}>
+											{tStatus(localViolation?.status)}
+										</span>
+									)
+								)}
+							</div>
+
 						</div>
 					</div>
-
 					<div
-						className="violation-info-right-side"
+						className="violation-info-header-bottom"
 					>
 						<div
-							className="violation-info-source"
+							className="violation-info-date"
 						>
 							<span>
-								{t('source')}:
+								{t('date-of-creation')}:
 							</span>
-							<Link
+							<div
-								href={selectedViolation?.page_url ? selectedViolation?.page_url : '#'}
+								className="violation-info-date-value"
-								className="source"
-								target="_blank"
-								scroll={false}
 							>
-								{selectedViolation?.page_url ? cleanUrlForDisplay(selectedViolation?.page_url) : selectedViolation?.page_url}
+								<div>
-							</Link>
+									{selectedViolation?.created_date ? `${formatDate(selectedViolation?.created_date)}` : '#'}
-						</div>
+								</div>
-						<div
+								<div>
-							className="violation-info-date-status"
+									{selectedViolation?.created_date ? `${formatDateTime(selectedViolation?.created_date)}` : '#'}
-						>
+								</div>
-							<span>
+
-								{t('date')} {selectedViolation?.created_date ? formatDate(selectedViolation?.created_date) : '#'}
+							</div>
-							</span>
-							{/* COMPLAINT_IN_WORK COMPLAINT_AND_LEGAL_IN_WORK*/}
-							{localViolation?.status === "COMPLAINT_AND_LEGAL_IN_WORK" ? (
-								<>
-									<span className="source-status legal_in_work">
-										{tStatus('LEGAL_IN_WORK')}
-									</span>
-									<span className="source-status complaint_in_work">
-										{tStatus('COMPLAINT_IN_WORK')}
-									</span>
-								</>
-							) : (
-								localViolation?.status && (
-									<span className={`source-status ${localViolation?.status.toLowerCase()}`}>
-										{tStatus(localViolation?.status)}
-									</span>
-								)
-							)}
 						</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_IN_WORK": "Претензия в работе",
-		"COMPLAINT_AND_LEGAL_IN_WORK": "Дело и жалоба в работе",
+		"COMPLAINT_AND_LEGAL_IN_WORK": "Дело и претензия в работе",
 		"AUTHORIZED_USE": "Разрешенное использование",
 		"CREATED": "Новый"
 	},