add violations layout

This commit is contained in:
smanylov
2026-01-15 14:18:08 +07:00
parent b763e438b8
commit 4697eb6fda
8 changed files with 637 additions and 26 deletions
@@ -0,0 +1,27 @@
import PageTitleColorFrame from '@/app/ui/page-title-color-frame';
import ProtectionStatistic from '@/app/ui/marking-page/new/protection-statistic';
import DahboardGeographySection from '@/app/ui/dashboard/new/dashboard-geography-section';
import DashboardPlatformsList from '@/app/ui/dashboard/new/dashboard-platforms-list';
import ViolationsMyCases from '@/app/ui/violations/violations-my-cases';
import ViolationsCheckAllSection from '@/app/ui/violations/violations-check-all-section';
import ViolationsTable from '@/app/ui/violations/violations-table';
export default function Page() {
const FILE_TYPE = "all";
return (
<>
<PageTitleColorFrame
title="monitoring-copyright-infringements"
description="monitoring-copyright-infringements-description"
/>
<ProtectionStatistic fileType={FILE_TYPE} />
<ViolationsMyCases />
<ViolationsCheckAllSection />
<ViolationsTable />
<div className="grid grid-cols-2 mb-[30px] gap-[20px]">
<DashboardPlatformsList />
<DahboardGeographySection />
</div>
</>
)
}
+433 -23
View File
@@ -1213,33 +1213,32 @@
display: flex;
flex-direction: column;
}
}
.content-section {
background: white;
border-radius: 20px;
padding: 32px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
.content-section {
background: white;
border-radius: 20px;
padding: 32px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.section-title {
font-size: 22px;
font-weight: 700;
color: #1e293b;
}
.view-all-link {
color: #6366f1;
text-decoration: none;
font-size: 14px;
font-weight: 600;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.section-title {
font-size: 22px;
font-weight: 700;
color: #1e293b;
}
.view-all-link {
color: #6366f1;
text-decoration: none;
font-size: 14px;
font-weight: 600;
}
}
.user-files-list {
@@ -1952,3 +1951,414 @@
z-index: 1;
}
}
.violations-my-cases-section {
background: white;
border-radius: 20px;
padding: 32px;
margin-bottom: 24px;
box-shadow: 0 10px 40px rgba(99, 102, 241, 0.1);
.my-cases-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 3px solid #f1f5f9;
}
.my-cases-title {
font-size: 1.5rem;
font-weight: 800;
color: #1e293b;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-clip: text;
-webkit-text-fill-color: transparent;
}
.btn-outline-small {
background: transparent;
color: #667eea;
border: 2px solid #667eea;
padding: 10px 20px;
border-radius: 10px;
font-weight: 700;
font-size: 0.9rem;
text-decoration: none;
transition: all 0.3s ease;
&:hover {
background: #667eea;
color: white;
transform: translateY(-2px);
}
}
.cases-carousel-track {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
.case-card {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border: 2px solid #e2e8f0;
border-radius: 16px;
padding: 24px;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
&:hover::before {
opacity: 1;
}
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 16px 0 0 16px;
}
.case-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
gap: 12px;
.case-number {
font-weight: 800;
color: #667eea;
font-size: 0.85rem;
}
}
.case-card-title {
font-size: 0.95rem;
font-weight: 600;
color: #1e293b;
margin-bottom: 16px;
min-height: 50px;
}
.case-card-meta {
font-size: 0.9rem;
color: #64748b;
line-height: 1.8;
margin-bottom: 16px;
}
.case-card-actions {
display: flex;
justify-content: flex-end;
}
.btn-primary-small {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 10px 20px;
border-radius: 10px;
font-weight: 700;
font-size: 0.85rem;
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.status-assigned {
background: #fef3c7;
color: #d97706;
}
.status-submitted {
background: #dbeafe;
color: #1e40af;
}
.case-status-badge {
padding: 4px 10px;
border-radius: 20px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.3px;
white-space: nowrap;
}
}
}
}
.violation-check-all-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 16px;
padding: 20px 24px;
margin-bottom: 24px;
color: white;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
.check-all-left {
flex: 1;
position: relative;
z-index: 2;
}
.check-all-icon {
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.2);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
flex-shrink: 0;
}
.check-all-title {
font-size: 1.3rem;
font-weight: 700;
}
.check-all-description {
opacity: 0.95;
font-size: 0.95rem;
}
.check-all-btn {
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
color: white;
padding: 14px 32px;
border-radius: 12px;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
z-index: 2;
white-space: nowrap;
&:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
}
}
.violations-table-section {
margin-bottom: 24px;
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
.section-title {
font-size: 1.3rem;
font-weight: 700;
color: #1e293b;
display: flex;
align-items: center;
gap: 12px;
&::before {
content: '';
width: 8px;
height: 8px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
display: inline-block;
}
}
}
.violations-table-container {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
border: 2px solid #e2e8f0;
.violations-table {
width: 100%;
border-collapse: collapse;
thead {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
th {
padding: 12px 16px;
text-align: left;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
border-right: 1px solid rgba(255, 255, 255, 0.2);
&:last-child {
border-right: none;
}
}
tbody {
tr {
border-bottom: 1px solid #f1f5f9;
transition: all 0.2s ease;
}
td {
padding: 12px 16px;
font-size: 0.85rem;
color: #1e293b;
vertical-align: middle;
}
}
.violation-preview-cell {
width: 60px;
}
.violation-preview {
width: 50px;
height: 50px;
border-radius: 8px;
overflow: hidden;
background: #f1f5f9;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.violation-filename-cell {
min-width: 180px;
max-width: 250px;
}
.violation-filename {
font-weight: 600;
color: #1e293b;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 0.9rem;
}
.violation-date {
font-size: 0.75rem;
color: #64748b;
}
.violation-url-cell {
max-width: 300px;
}
.violation-link {
color: #667eea;
text-decoration: none;
word-break: break-all;
font-size: 0.8rem;
display: -webkit-box;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.violation-stats-cell {
white-space: nowrap;
}
.confidence-badge {
display: inline-flex;
align-items: center;
gap: 4px;
background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
padding: 4px 10px;
border-radius: 12px;
font-weight: 700;
color: #1e40af;
font-size: 0.75rem;
margin-bottom: 4px;
}
.sources-count {
font-size: 0.75rem;
color: #64748b;
display: flex;
align-items: center;
gap: 4px;
}
.btn-dmca-complaint {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 8px 16px;
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border: 2px solid #fbbf24;
border-radius: 10px;
color: #92400e;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
box-shadow: 0 2px 4px rgba(251, 191, 36, 0.15);
}
.violation-actions-cell {
width: 120px;
}
.violation-actions {
display: flex;
gap: 6px;
justify-content: flex-end;
}
.action-icon-btn {
width: 32px;
height: 32px;
border-radius: 8px;
border: 2px solid #e2e8f0;
background: white;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
+1 -1
View File
@@ -35,7 +35,7 @@ export default function NavLinks() {
},
{
name: t('violations'),
href: '/pages/emptypage',
href: '/pages/violations',
img: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'
},
{
@@ -0,0 +1,18 @@
export default function ViolationsCheckAllSection() {
return (
<div className="violation-check-all-section">
<div className="check-all-left">
<div className="check-all-header">
<div className="check-all-icon">🔍</div>
<div className="check-all-title">Глобальная проверка контента</div>
</div>
<div className="check-all-description">
Поиск нарушений во всех ваших изображениях. Проверка только точных совпадений (95%+).
</div>
</div>
<button type="button" className="check-all-btn">
🌐 Проверить все
</button>
</div>
)
}
@@ -0,0 +1,72 @@
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>
)
}
@@ -0,0 +1,80 @@
export default function ViolationsTable() {
return (
<div className="violations-table-section">
<div className="section-header">
<div className="section-title">Обнаруженные нарушения (17)</div>
</div>
<div className="violations-table-container">
<table className="violations-table">
<thead>
<tr>
<th></th>
<th>Файл</th>
<th>URL нарушения</th>
<th>Статистика</th>
<th>DMCA Жалоба</th>
<th>Действия</th>
</tr>
</thead>
<tbody>
<tr>
<td className="violation-preview-cell">
<div className="violation-preview">
<img src="image-preview.php?id=303" alt="Preview" loading="lazy" />
</div>
</td>
<td className="violation-filename-cell">
<div className="violation-filename" title="banner111.png">
banner111.png</div>
<div className="violation-date">
📅 17.10.2025</div>
</td>
<td className="violation-url-cell">
<a href="https://m.apkpure.com/th/4k-wallpapers/com.starwalls.BACKGROUND.wallpapers4K.starwall" target="_blank" className="violation-link" title="https://m.apkpure.com/th/4k-wallpapers/com.starwalls.BACKGROUND.wallpapers4K.starwall">
https://m.apkpure.com/th/4k-wallpapers/com.starwalls.BACKGROUND.wallpapers4K.starwall</a>
</td>
<td className="violation-stats-cell">
<div className="confidence-badge">
📊 85%
</div>
<div className="sources-count">
🔗 2 источников
</div>
</td>
<td className="violation-dmca-cell">
<button className="btn-dmca-complaint" title="Подать DMCA жалобу">
🚨 ПОЖАЛОВАТЬСЯ
</button>
</td>
<td className="violation-actions-cell">
<div className="violation-actions">
<button className="action-icon-btn btn-view" title="Детали">
👁
</button>
<button className="action-icon-btn btn-ok" title="Одобрить">
</button>
<button className="action-icon-btn btn-block" title="Жалоба">
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
)
}
+3 -1
View File
@@ -170,7 +170,9 @@
"multi-layered-protection-for-your-images": "Multi-layered image content protection with invisible watermarks",
"multi-layered-protection-for-your-audios": "Multi-layered audio content protection with invisible watermarks",
"multi-layered-protection-for-your-videos": "Multi-layered video content protection with invisible watermarks",
"my-content-description": "Managing protected files and copyright control"
"my-content-description": "Managing protected files and copyright control",
"monitoring-copyright-infringements": "Monitoring copyright infringements",
"monitoring-copyright-infringements-description": "Monitor and manage copyright infringement of your protected content online"
},
"Login-register-form": {
"and": "and",
+3 -1
View File
@@ -170,7 +170,9 @@
"multi-layered-protection-for-your-images": "Многослойная защита изображений с невидимыми водяными знаками",
"multi-layered-protection-for-your-audios": "Многослойная защита аудиоконтента с невидимыми водяными знаками",
"multi-layered-protection-for-your-videos": "Многослойная защита видеоконтента с невидимыми водяными знаками",
"my-content-description": "Управление защищенными файлами и контролем авторских прав"
"my-content-description": "Управление защищенными файлами и контролем авторских прав",
"monitoring-copyright-infringements": "Мониторинг нарушений авторских прав",
"monitoring-copyright-infringements-description": "Отслеживание и управление нарушениями авторских прав на ваш защищенный контент в интернете"
},
"Login-register-form": {
"and": "и",