frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change matched table styles

Browse Source
This commit is contained in:
smanylov
2026-04-15 13:30:19 +07:00
parent 9b4fb796f9
commit 4d957ea271
6 changed files with 273 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/styles/violation-details.scss
+78 -22
View File
@@ -289,7 +289,7 @@
.source-status { .source-status {
padding: 4px 10px; padding: 4px 10px;
border-radius: 6px; border-radius: 12px;
font-size: 11px; font-size: 11px;
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
@@ -343,11 +343,12 @@
} }
} }
.btn-success { .btn-resolve {
background: linear-gradient(135deg, #10b981, #059669); background: linear-gradient(135deg, #10b981, #059669);
color: white; color: white;
max-width: 200px; /* max-width: 200px; */
padding: 6px 10px; padding: 12px 30px;
white-space: nowrap;
&:hover { &:hover {
transform: translateY(-2px); transform: translateY(-2px);
@@ -393,8 +394,7 @@
border-bottom: 1px solid v.$border-color-1; border-bottom: 1px solid v.$border-color-1;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 5px;
padding-bottom: 15px;
display: flex; display: flex;
} }
@@ -455,9 +455,10 @@
&-right-side { &-right-side {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; /* gap: 10px; */
} }
&-date,
&-source { &-source {
span { span {
color: #64748b; color: #64748b;
@@ -470,15 +471,28 @@
} }
} }
&-date-status { &-status {
display: flex; display: flex;
gap: 10px; gap: 10px;
align-items: center;
margin-top: auto;
.source-status { .source-status {
margin-bottom: 0; margin-bottom: 0;
} }
} }
&-date-value {
display: flex;
gap: 8px;
font-weight: 600;
}
&-date-status {
display: flex;
gap: 10px;
}
&-action { &-action {
margin-top: auto; margin-top: auto;
} }
@@ -489,13 +503,22 @@
} }
&-header { &-header {
flex-shrink: 0;
padding-bottom: 5px;
border-bottom: 1px solid rgb(226, 232, 240);
&-grid {
display: grid; display: grid;
grid-template-columns: 300px auto; grid-template-columns: 300px auto;
gap: 10px; gap: 10px;
flex-shrink: 0; margin-bottom: 10px;
padding-bottom: 20px; }
border-bottom: 1px solid rgb(226, 232, 240); &-bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
} }
&-case { &-case {
@@ -576,9 +599,11 @@
background: v.$bg-hover; background: v.$bg-hover;
color: v.$text-p; color: v.$text-p;
border: 2px solid transparent; border: 2px solid transparent;
padding: 6px 30px;
&.active { &.active {
background: linear-gradient(135deg, v.$p-color, v.$s-color); background: linear-gradient(135deg, v.$p-color, v.$s-color);
/* background: #3b82f6; */
color: v.$white; color: v.$white;
border: 2px solid transparent; border: 2px solid transparent;
} }
@@ -659,25 +684,56 @@
} }
.complaint-details { .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 { &-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 { &-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-weight: 600;
font-size: 18px; color: #212529;
} }
} }
} }
src/app/ui/file-page/violation-table/case-complaint.tsx
+33 -61
View File
@@ -7,7 +7,7 @@ import { createComplaint, fetchComplainInfo } from '@/app/actions/violationActio
import { toast } from 'sonner'; import { toast } from 'sonner';
import { useQuery, useQueryClient } from '@tanstack/react-query'; import { useQuery, useQueryClient } from '@tanstack/react-query';
import { MatchStatus } from '@/app/actions/violationActions'; import { MatchStatus } from '@/app/actions/violationActions';
import {formatDate, formatDateTime} from '@/app/lib/formatDate'; import { formatDate, formatDateTime } from '@/app/lib/formatDate';
interface complaintInfo { interface complaintInfo {
id: number, id: number,
@@ -255,81 +255,53 @@ export default function CaseComplaint({ selectedViolation, updateStatusHandler }
return ( return (
<div className="violation-info-case"> <div className="violation-info-case">
{complainInfo?.body.content ? ( {complainInfo?.body.content ? (
<div> <>
{complainInfo.body.content.map((item: complaintInfo) => { {complainInfo.body.content.map((item: complaintInfo) => {
return ( return (
<div key={item.id}> <div key={item.id}>
<div className="complaint-details"> <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"
>
<span
className="complaint-details-title"
>
{t('status')}:
</span>
<br />
<span
className="complaint-details-text"
>
{item.status}
</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('status')}:</span>
className="complaint-details-title" </div>
> <div className="complaint-details-content">{item.status}</div>
{t('date-of-creation')}: </div>
</span>
<br /> <div className="complaint-details-item">
<span <div className="complaint-details-header">
className="complaint-details-text" <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)}` : '---'} {item.created_at ? `${formatDate(item.created_at)}: ${formatDateTime(item.created_at)}` : '---'}
</span>
</div> </div>
<div </div>
className="complaint-details-item"
> <div className="complaint-details-item">
<span <div className="complaint-details-header">
className="complaint-details-title" <span className="complaint-details-title">{t('date-of-update')}:</span>
> </div>
{t('date-of-update')}: <div className="complaint-details-content">
</span>
<br />
<span
className="complaint-details-text"
>
{item.updated_at ? `${formatDate(item.updated_at)}: ${formatDateTime(item.updated_at)}` : '---'} {item.updated_at ? `${formatDate(item.updated_at)}: ${formatDateTime(item.updated_at)}` : '---'}
</span>
</div> </div>
<div </div>
className="complaint-details-item"
> <div className="complaint-details-item">
<span <div className="complaint-details-header">
className="complaint-details-title" <span className="complaint-details-title">{t('text-of-the-complaint')}:</span>
> </div>
{t('text-of-the-complaint')}: <div className="complaint-details-content">{item.complaint_text}</div>
</span>
<br />
<span
className="complaint-details-text"
>
{item.complaint_text}
</span>
</div> </div>
</div> </div>
</div> </div>
); );
})} })}
</div> </>
) : ( ) : (
<div> <div>
{t('no-information-about-the-complaint')} {t('no-information-about-the-complaint')}
src/app/ui/file-page/violation-table/case-legal.tsx
+44 -109
View File
@@ -207,132 +207,67 @@ export default function CaseViolation({ selectedViolation, updateStatusHandler }
return ( return (
<div className="violation-info-case"> <div className="violation-info-case">
{caseInfo?.body?.content ? ( {caseInfo?.body?.content ? (
<div> <>
{caseInfo.body.content.map((item: CaseInfo) => { {caseInfo.body.content.map((item: CaseInfo) => {
return ( return (
<div key={item.id}> <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">
<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>
<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.type}</div>
{t('date-of-creation')}: </div>
</span>
<br /> <div className="complaint-details-item">
<span <div className="complaint-details-header">
className="complaint-details-text" <span className="complaint-details-title">{t('date-of-creation')}:</span>
> </div>
<div className="complaint-details-content">
{item.createdAt ? `${formatDate(item.createdAt)}: ${formatDateTime(item.createdAt)}` : '---'} {item.createdAt ? `${formatDate(item.createdAt)}: ${formatDateTime(item.createdAt)}` : '---'}
</span>
</div> </div>
<div </div>
className="complaint-details-item"
> <div className="complaint-details-item">
<span <div className="complaint-details-header">
className="complaint-details-title" <span className="complaint-details-title">{t('date-of-update')}:</span>
> </div>
{t('date-of-update')}: <div className="complaint-details-content">
</span>
<br />
<span
className="complaint-details-text"
>
{item.updatedAt ? `${formatDate(item.updatedAt)}: ${formatDateTime(item.updatedAt)}` : '---'} {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> </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> </>
) : ( ) : (
<div> <div>
{t('no-information-about-the-complaint')} {t('no-information-about-the-complaint')}
src/app/ui/file-page/violation-table/file-page-violation-info.tsx
+39 -13
View File
@@ -1,7 +1,7 @@
'use client' 'use client'
import Link from 'next/link'; import Link from 'next/link';
import { formatDate } from '@/app/lib/formatDate'; import { formatDate, formatDateTime } from '@/app/lib/formatDate';
import { useTranslations } from 'next-intl'; import { useTranslations } from 'next-intl';
import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations'; import { ViolationFileDetail } from '@/app/hooks/react-query/useFileViolations';
import CaseComplaint from '@/app/ui/file-page/violation-table/case-complaint'; import CaseComplaint from '@/app/ui/file-page/violation-table/case-complaint';
@@ -111,14 +111,11 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
<div <div
className="violation-info-content" className="violation-info-content"
> >
<h3
className="violation-info-title"
>
{selectedViolation?.page_title}
</h3>
<div <div
className="violation-info-header" className="violation-info-header"
>
<div
className="violation-info-header-grid"
> >
<div className="violation-info-image-wrapper"> <div className="violation-info-image-wrapper">
<div <div
@@ -166,12 +163,18 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
<div <div
className="violation-info-right-side" className="violation-info-right-side"
> >
<h3
className="violation-info-title"
>
{selectedViolation?.page_title}
</h3>
<div <div
className="violation-info-source" className="violation-info-source"
> >
<span> <span>
{t('source')}: {t('source')}:
</span> </span>
<br />
<Link <Link
href={selectedViolation?.page_url ? selectedViolation?.page_url : '#'} href={selectedViolation?.page_url ? selectedViolation?.page_url : '#'}
className="source" className="source"
@@ -181,12 +184,10 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
{selectedViolation?.page_url ? cleanUrlForDisplay(selectedViolation?.page_url) : selectedViolation?.page_url} {selectedViolation?.page_url ? cleanUrlForDisplay(selectedViolation?.page_url) : selectedViolation?.page_url}
</Link> </Link>
</div> </div>
<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*/} {/* COMPLAINT_IN_WORK COMPLAINT_AND_LEGAL_IN_WORK*/}
{localViolation?.status === "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>
<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 <div
className="violation-info-action" className="violation-info-action"
> >
<button <button
className="btn-action btn-success" className="btn-action btn-resolve"
onClick={() => { onClick={() => {
if (selectedViolation?.id) { if (selectedViolation?.id) {
updateStatusHandler(selectedViolation.id, 'AUTHORIZED_USE'); updateStatusHandler(selectedViolation.id, 'AUTHORIZED_USE');
@@ -217,7 +243,7 @@ export default function FilePageViolationInfo({ selectedViolation }: { selectedV
}} }}
disabled={isUpdating} disabled={isUpdating}
> >
{t('mark-as-solved')} {t('allow-use')}
</button> </button>
</div> </div>
</div> </div>
src/i18n/messages/en.json
+1 -1
View File
@@ -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.", "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", "documents-few": "Documents",
"change": "Change", "change": "Change",
"mark-as-solved": "Mark as solved", "allow-use": "Allow use",
"loading": "Loading", "loading": "Loading",
"filing-complaint": "Filing a complaint", "filing-complaint": "Filing a complaint",
"submit-violation": "Submit a violation", "submit-violation": "Submit a violation",
src/i18n/messages/ru.json
+3 -3
View File
@@ -370,7 +370,7 @@
"search-info-description-text": "Наша система анализирует загруженный файл и сравнивает его с вашими защищенными файлами, используя алгоритмы компьютерного зрения и цифровых отпечатков.", "search-info-description-text": "Наша система анализирует загруженный файл и сравнивает его с вашими защищенными файлами, используя алгоритмы компьютерного зрения и цифровых отпечатков.",
"documents-few": "Документов", "documents-few": "Документов",
"change": "Изменить", "change": "Изменить",
"mark-as-solved": "Отметить решенным", "allow-use": "Разрешить использование",
"loading": "Загрузка", "loading": "Загрузка",
"filing-complaint": "Подача жалобы", "filing-complaint": "Подача жалобы",
"submit-violation": "Отправить нарушение", "submit-violation": "Отправить нарушение",
@@ -528,8 +528,8 @@
"NEW": "Новый", "NEW": "Новый",
"SHOWED": "Просмотрен", "SHOWED": "Просмотрен",
"LEGAL_IN_WORK": "Дело в работе", "LEGAL_IN_WORK": "Дело в работе",
"COMPLAINT_IN_WORK": "Жалоба в работе", "COMPLAINT_IN_WORK": "Претензия в работе",
"COMPLAINT_AND_LEGAL_IN_WORK": "Дело и жалоба в работе", "COMPLAINT_AND_LEGAL_IN_WORK": "Дело и претензия в работе",
"AUTHORIZED_USE": "Разрешенное использование", "AUTHORIZED_USE": "Разрешенное использование",
"CREATED": "Новый" "CREATED": "Новый"
}, },