From 4d957ea271b7730eed2ea6886f5e4e53a2813e2f Mon Sep 17 00:00:00 2001 From: smanylov Date: Wed, 15 Apr 2026 13:30:19 +0700 Subject: [PATCH] change matched table styles --- src/app/styles/violation-details.scss | 104 +++++++--- .../violation-table/case-complaint.tsx | 94 +++------ .../file-page/violation-table/case-legal.tsx | 163 +++++---------- .../file-page-violation-info.tsx | 188 ++++++++++-------- src/i18n/messages/en.json | 2 +- src/i18n/messages/ru.json | 6 +- 6 files changed, 273 insertions(+), 284 deletions(-) diff --git a/src/app/styles/violation-details.scss b/src/app/styles/violation-details.scss index daa890d..9dc8612 100644 --- a/src/app/styles/violation-details.scss +++ b/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 { - 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 { - 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; } } } diff --git a/src/app/ui/file-page/violation-table/case-complaint.tsx b/src/app/ui/file-page/violation-table/case-complaint.tsx index b1fccd6..1676042 100644 --- a/src/app/ui/file-page/violation-table/case-complaint.tsx +++ b/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 (
{complainInfo?.body.content ? ( -
+ <> {complainInfo.body.content.map((item: complaintInfo) => { return (
-
- ID: {item.id} +
+
+
ID: {item.id}
+
-
- - {t('status')}: - -
- - {item.status} - + +
+
+ {t('status')}: +
+
{item.status}
-
- - {t('date-of-creation')}: - -
- + +
+
+ {t('date-of-creation')}: +
+
{item.created_at ? `${formatDate(item.created_at)}: ${formatDateTime(item.created_at)}` : '---'} - +
-
- - {t('date-of-update')}: - -
- + +
+
+ {t('date-of-update')}: +
+
{item.updated_at ? `${formatDate(item.updated_at)}: ${formatDateTime(item.updated_at)}` : '---'} - +
-
- - {t('text-of-the-complaint')}: - -
- - {item.complaint_text} - + +
+
+ {t('text-of-the-complaint')}: +
+
{item.complaint_text}
); })} -
+ ) : (
{t('no-information-about-the-complaint')} diff --git a/src/app/ui/file-page/violation-table/case-legal.tsx b/src/app/ui/file-page/violation-table/case-legal.tsx index 32e7144..0e639f4 100644 --- a/src/app/ui/file-page/violation-table/case-legal.tsx +++ b/src/app/ui/file-page/violation-table/case-legal.tsx @@ -207,132 +207,67 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler } return (
{caseInfo?.body?.content ? ( -
+ <> {caseInfo.body.content.map((item: CaseInfo) => { return (
-{/*
-
ID: {item.id}
-
{t('name')}: -
- {item.name} -
-
{t('description')}: {item.description}
-
{t('amount')}: {item.amount}
-
{t('priority')}: {item.priority}
-
{t('type')}: {item.type}
-
{t('lawyer')}: {item.lawyer || t('not-assigned')}
-
{t('violation-id')}: {item.violationId}
-
{t('date-of-creation')}: {item.createdAt ? `${formatDate(item.createdAt)}: ${formatDateTime(item.createdAt)}` : '---'}
-
{t('date-of-update')}: {item.createdAt ? `${formatDate(item.createdAt)}: ${formatDateTime(item.createdAt)}` : '---'}
- {item.content &&

{t('content')}: {item.content}

} -
*/} - -
-
-
{item.name}
-
-
- - {t('status')}: - -
- - {item.type} - -
-
- - {t('date-of-creation')}: - -
- - {item.createdAt ? `${formatDate(item.createdAt)}: ${formatDateTime(item.createdAt)}` : '---'} - -
-
- - {t('date-of-update')}: - -
- - {item.updatedAt ? `${formatDate(item.updatedAt)}: ${formatDateTime(item.updatedAt)}` : '---'} - -
-
- - {t('description')}: - -
- - {item.description} - +
+
+
{item.name}
+
-
- - {t('amount-of-damage')}: - -
- - {item.amount} - +
+
+ {t('status')}: +
+
{item.type}
-
- - {t('lawyer')}: - -
- - {item.lawyer} - + +
+
+ {t('date-of-creation')}: +
+
+ {item.createdAt ? `${formatDate(item.createdAt)}: ${formatDateTime(item.createdAt)}` : '---'} +
+
+ +
+
+ {t('date-of-update')}: +
+
+ {item.updatedAt ? `${formatDate(item.updatedAt)}: ${formatDateTime(item.updatedAt)}` : '---'} +
+
+ +
+
+ {t('description')}: +
+
{item.description}
+
+ +
+
+ {t('amount-of-damage')}: +
+
{item.amount}
+
+ +
+
+ {t('lawyer')}: +
+
{item.lawyer}
- -
); })} -
+ ) : (
{t('no-information-about-the-complaint')} diff --git a/src/app/ui/file-page/violation-table/file-page-violation-info.tsx b/src/app/ui/file-page/violation-table/file-page-violation-info.tsx index 71aee32..19563e1 100644 --- a/src/app/ui/file-page/violation-table/file-page-violation-info.tsx +++ b/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
-

- {selectedViolation?.page_title} -

-
-
-
- {selectedViolation?.page_title} { - const target = e.target as HTMLImageElement; - target.src = '/images/no-image.png'; - }} - /> +
+
+
+ {selectedViolation?.page_title} { + const target = e.target as HTMLImageElement; + target.src = '/images/no-image.png'; + }} + /> +
+
+ + +
-
- - + + {t('source')}: + +
+ + {selectedViolation?.page_url ? cleanUrlForDisplay(selectedViolation?.page_url) : selectedViolation?.page_url} + +
+ +
+ {/* COMPLAINT_IN_WORK COMPLAINT_AND_LEGAL_IN_WORK*/} + {localViolation?.status === "COMPLAINT_AND_LEGAL_IN_WORK" ? ( + <> + + {tStatus('LEGAL_IN_WORK')} + + + {tStatus('COMPLAINT_IN_WORK')} + + + ) : ( + localViolation?.status && ( + + {tStatus(localViolation?.status)} + + ) + )} +
+
-
- {t('source')}: + {t('date-of-creation')}: - - {selectedViolation?.page_url ? cleanUrlForDisplay(selectedViolation?.page_url) : selectedViolation?.page_url} - -
-
- - {t('date')} {selectedViolation?.created_date ? formatDate(selectedViolation?.created_date) : '#'} - - {/* COMPLAINT_IN_WORK COMPLAINT_AND_LEGAL_IN_WORK*/} - {localViolation?.status === "COMPLAINT_AND_LEGAL_IN_WORK" ? ( - <> - - {tStatus('LEGAL_IN_WORK')} - - - {tStatus('COMPLAINT_IN_WORK')} - - - ) : ( - localViolation?.status && ( - - {tStatus(localViolation?.status)} - - ) - )} +
+ {selectedViolation?.created_date ? `${formatDate(selectedViolation?.created_date)}` : '#'} +
+
+ {selectedViolation?.created_date ? `${formatDateTime(selectedViolation?.created_date)}` : '#'} +
+ +
+
diff --git a/src/i18n/messages/en.json b/src/i18n/messages/en.json index a7011af..cf5b421 100644 --- a/src/i18n/messages/en.json +++ b/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", diff --git a/src/i18n/messages/ru.json b/src/i18n/messages/ru.json index 7196e81..116a8f5 100644 --- a/src/i18n/messages/ru.json +++ b/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": "Новый" },