continue: add violation panel

This commit is contained in:
smanylov
2026-03-17 18:41:02 +07:00
parent 949038979e
commit 333dd5d3c5
10 changed files with 502 additions and 191 deletions
+68 -19
View File
@@ -9,6 +9,43 @@ import ViolationPageActions from '@/app/ui/violations/file-page/violation-page-a
import ViolationPageViolationsList from '@/app/ui/violations/file-page/violation-page-violations-list'; import ViolationPageViolationsList from '@/app/ui/violations/file-page/violation-page-violations-list';
import ViolationPageNote from '@/app/ui/violations/file-page/violation-page-note'; import ViolationPageNote from '@/app/ui/violations/file-page/violation-page-note';
import { getFileViolations } from '@/app/actions/violationActions'; import { getFileViolations } from '@/app/actions/violationActions';
import { viewFileInfo } from '@/app/actions/fileEntity';
import { useTranslations } from 'next-intl';
import ViolationFileNotFound from '@/app/ui/violations/file-page/violation-file-not-found';
type MonitoringStatus = 'NONE' | 'MONITORING_DAILY' | 'MONITORING_WEEKLY' | 'MONITORING_MONTHLY';
type MimeType = 'image' | 'video' | 'audio' | 'document';
export interface FileDetails {
id: string;
userId: number;
originalFileName: string;
storedFileName: string;
filePath: string;
protectedFilePath: string;
fileSize: number;
mimeType: MimeType;
fileExtension: string;
checksum: string;
uploadSessionId: string;
status: string;
createdAt: string;
updatedAt: string;
formattedSize: string;
downloadUrl: string;
existsOnDisk: boolean;
supportId: number | null;
protectStatus: string;
ownerName: string;
ownerEmail: string;
ownerCompany: string | null;
fileName: string;
fileFormat: string | null;
checksCount: number;
fileUploadDate: string;
monitoring: MonitoringStatus;
thumbnailFileUrl: string;
}
interface PageProps { interface PageProps {
params: Promise<{ id: string }>; params: Promise<{ id: string }>;
@@ -19,31 +56,43 @@ export default async function Page({
params, params,
searchParams searchParams
}: PageProps) { }: PageProps) {
/* const t = useTranslations('Global'); */
const { id } = await params; const { id } = await params;
const { page } = await searchParams; const { page } = await searchParams;
const currentPage = Number(page) || 1; const currentPage = Number(page) || 1;
const fileViolations = await getFileViolations(id, currentPage); try {
const fileViolations = await getFileViolations(id, currentPage);
const fileInfo: FileDetails = await viewFileInfo(id);
return ( return (
<div className="violation-details"> <div className="violation-details">
<ViolationPageTitle /> <ViolationPageTitle fileInfo={fileInfo} />
<div className="grid grid-cols-[2fr_1fr] gap-3">
<div> <div>
<ViolationPageViolationInfo /> <div
<ViolationPageViolationsList className="grid grid-cols-[2fr_1fr] gap-3"
fileViolations={fileViolations} >
currentPage={currentPage} <ViolationPageFileInfo fileInfo={fileInfo} />
fileId={id} {/* <ViolationPageActions /> */}
/> <ViolationPpageFileStatistic />
<ViolationPageNote /> </div>
</div> <div>
<div> <ViolationPageViolationsList
<ViolationPpageFileStatistic /> fileViolations={fileViolations}
<ViolationPageFileInfo /> currentPage={currentPage}
<ViolationPageActions /> fileId={id}
/>
{/* <ViolationPageNote /> */}
{/* <ViolationPageViolationInfo /> */}
</div>
</div> </div>
</div> </div>
</div> )
) } catch (error) {
return (
<ViolationFileNotFound />
)
}
} }
+193 -72
View File
@@ -3593,6 +3593,17 @@
padding: 12px 20px; padding: 12px 20px;
border-bottom: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9;
width: 100%; width: 100%;
&.image {
text-align: center;
max-width: 200px;
display: flex;
margin: 0 auto;
img {
width: 100%;
}
}
} }
.info-label { .info-label {
@@ -4192,7 +4203,7 @@
justify-content: space-between; justify-content: space-between;
margin-bottom: 20px; margin-bottom: 20px;
padding-bottom: 15px; padding-bottom: 15px;
border-bottom: 2px solid #f1f5f9; border-bottom: 1px solid #e2e8f0;
} }
.info-row { .info-row {
@@ -4300,11 +4311,13 @@
.action-buttons { .action-buttons {
display: flex; display: flex;
gap: 10px; gap: 10px;
flex-wrap: wrap; flex-direction: column;
/* flex-wrap: wrap; */
.btn-action { .btn-action {
flex: 1; flex: 1;
min-width: 150px; /* min-width: 150px; */
width: 100%;
padding: 12px 20px; padding: 12px 20px;
border-radius: 12px; border-radius: 12px;
font-weight: 600; font-weight: 600;
@@ -4375,84 +4388,183 @@
} }
} }
.sources-list { .sources-list-wrapper {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 10px;
height: 80vh;
.sources-list {
display: flex;
flex-direction: column;
gap: 15px;
.source-card {
/* background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-radius: 12px;
border: 1px solid #e2e8f0; */
background: #fff;
border: 1px solid #f3f4f6;
border-radius: 20px;
box-shadow: 0 4px 20px #0000001a;
transition: all 0.3s ease;
padding: 15px;
height: calc(16vh - 12px);
cursor: pointer;
display: flex;
justify-content: space-between;
/* flex-direction: column; */
opacity: 0.75;
&:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
border-color: #cbd5e1;
}
&.selected {
opacity: 1;
border: 1px solid #6366f1;
background: linear-gradient(180deg, #ffffff 0%, #e6eaf3 100%);
}
}
.source-header {
display: flex;
align-items: start;
justify-content: space-between;
margin-bottom: 10px;
gap: 5px;
&-right {
display: flex;
flex-direction: column;
align-items: end;
}
}
.source-image {
max-width: 120px;
width: 100%;
}
.source-url {
color: #6366f1;
font-weight: 600;
font-size: 14px;
text-decoration: none;
word-break: break-all;
flex: 1;
}
.source-status {
padding: 4px 10px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
margin-left: 10px;
&.new {
background: #fef2f2;
color: #dc2626;
}
}
.source-meta {
gap: 15px;
font-size: 12px;
color: #64748b;
margin-bottom: 10px;
flex-wrap: wrap;
margin-right: 5px;
}
.source-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: auto;
}
}
}
.violation-info {
/* background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border: 1px solid #e2e8f0;
border-radius: 12px;
*/
background: #fff;
border: 1px solid #f3f4f6;
border-radius: 20px;
box-shadow: 0 4px 20px #0000001a;
padding: 15px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 15px;
.source-card { &-grid {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); display: grid;
border-radius: 12px; grid-template-columns: 3fr 1fr;
padding: 15px;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
&:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
border-color: #cbd5e1;
}
}
.source-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
}
.source-image {
max-width: 120px;
width: 100%;
}
.source-url {
color: #6366f1;
font-weight: 600;
font-size: 14px;
text-decoration: none;
word-break: break-all;
flex: 1;
}
.source-status {
padding: 4px 10px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
margin-left: 10px;
&.new {
background: #fef2f2;
color: #dc2626;
}
}
.source-meta {
display: flex;
gap: 15px;
font-size: 12px;
color: #64748b;
margin-bottom: 10px;
flex-wrap: wrap;
}
.source-actions {
display: flex;
gap: 10px; gap: 10px;
flex-wrap: wrap; flex-grow: 1;
margin-top: 10px; padding-bottom: 15px;
}
&-title {
border-bottom: 1px solid #e2e8f0;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
display: flex;
}
&-image {
margin-bottom: 20px;
/* padding-bottom: 15px; */
/* border-bottom: 2px solid #e6e8eb; */
img {
max-width: 300px;
width: 100%;
}
}
&-source {
margin-bottom: 20px;
/* padding-bottom: 15px; */
/* border-bottom: 2px solid #e6e8eb; */
span {
color: #64748b;
margin-right: 5px;
}
a {
color: #6366f1;
}
}
&-actions {
border-left: 1px solid #e2e8f0;
padding-left: 15px;
} }
} }
.pagination { .pagination {
margin-top: 20px;
display: flex; display: flex;
justify-content: center; justify-content: start;
gap: 4px; gap: 4px;
margin-top: 20px;
&__item { &-item {
padding: 8px 12px; padding: 8px 12px;
border-radius: 8px; border-radius: 8px;
text-decoration: none; text-decoration: none;
@@ -4462,11 +4574,15 @@
border: 2px solid #e5e7eb; border: 2px solid #e5e7eb;
transition: all 0.2s ease; transition: all 0.2s ease;
&:disabled {
opacity: 0.6;
}
&:hover { &:hover {
border-color: #667eea; border-color: #667eea;
} }
&--active { &-active {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white; color: white;
border: 2px solid #667eea; border: 2px solid #667eea;
@@ -4478,11 +4594,15 @@
} }
} }
.violation-page-note {
margin-top: auto;
margin-bottom: 0;
}
.note-form { .note-form {
margin-top: 0; margin-top: 0;
border: none; border: none;
padding: 0; padding: 0;
background: #f8fafc;
} }
.note-textarea { .note-textarea {
@@ -4495,6 +4615,7 @@
font-family: inherit; font-family: inherit;
resize: vertical; resize: vertical;
box-sizing: border-box; box-sizing: border-box;
background: #f8fafc;
&:focus { &:focus {
outline: none; outline: none;
@@ -1,8 +1,13 @@
import { convertBytes } from '@/app/lib/convertBytes'; import { convertBytes } from '@/app/lib/convertBytes';
import { formatDate, formatDateTime } from '@/app/lib/formatDate'; import { formatDate, formatDateTime } from '@/app/lib/formatDate';
import { useTranslations } from 'next-intl'; import { useTranslations } from 'next-intl';
import { FileDetails } from '@/app/[locale]/pages/violations/[id]/page';
export function FileInfoModalWindow({ fileInfo, setWindowClose, setWindowChildren }: any) { export function FileInfoModalWindow({ fileInfo, setWindowClose, setWindowChildren }: {
fileInfo: FileDetails,
setWindowClose: any,
setWindowChildren: any
}) {
const t = useTranslations('Global'); const t = useTranslations('Global');
return ( return (
@@ -86,6 +91,11 @@ export function FileInfoModalWindow({ fileInfo, setWindowClose, setWindowChildre
{fileInfo.fileExtension ? fileInfo.fileExtension : '-'} {fileInfo.fileExtension ? fileInfo.fileExtension : '-'}
</div> </div>
</div> </div>
{fileInfo.mimeType === 'image' && (
<div className="info-item image">
<img src={fileInfo.thumbnailFileUrl ? fileInfo.thumbnailFileUrl : '#'} alt="" />
</div>
)}
</div> </div>
</div> </div>
@@ -0,0 +1,13 @@
'use client'
import { useTranslations } from 'next-intl'
export default function ViolationFileNotFound() {
const t = useTranslations('Global');
return (
<div className="violation-details">
{t('file-not-found')}
</div>
)
}
@@ -1,4 +1,14 @@
export default function ViolationPageFileInfo() { 'use client'
import { FileDetails } from '@/app/[locale]/pages/violations/[id]/page';
import { convertBytes } from '@/app/lib/convertBytes';
import { formatDate } from '@/app/lib/formatDate';
import { useTranslations } from 'next-intl';
import { useEffect } from 'react';
export default function ViolationPageFileInfo({ fileInfo }: { fileInfo: FileDetails }) {
const t = useTranslations('Global');
return ( return (
<div <div
className="block-wrapper" className="block-wrapper"
@@ -6,32 +16,46 @@ export default function ViolationPageFileInfo() {
<div className="content-card"> <div className="content-card">
<div className="card-header"> <div className="card-header">
<h3 className="card-title"> <h3 className="card-title">
📄 Информация о файле {t('file-information')}
</h3> </h3>
</div> </div>
<div className="info-row"> <div className="info-row">
<span className="info-label">Тип файла</span> <span className="info-label">
<span className="info-value">fileType</span> ID
</div> </span>
<div className="info-row">
<span className="info-label">Размер</span>
<span className="info-value">0 КБ</span>
</div>
<div className="info-row">
<span className="info-label">Загружен</span>
<span className="info-value">0</span>
</div>
<div className="info-row">
<span className="info-label">Водяной знак</span>
<span className="info-value"> <span className="info-value">
Применен {fileInfo ? fileInfo.supportId : '#'}
</span> </span>
</div> </div>
<div className="info-row"> <div className="info-row">
<span className="info-label">Уровень защиты</span> <span className="info-label">
{t('file-type')}
</span>
<span className="info-value"> <span className="info-value">
Максимальный {fileInfo ? fileInfo.mimeType : '#'}
</span>
</div>
<div className="info-row">
<span className="info-label">
{t('size')}
</span>
<span className="info-value">{fileInfo ? convertBytes(fileInfo.fileSize) : '#'}</span>
</div>
<div className="info-row">
<span className="info-label">
{t('loaded')}
</span>
<span className="info-value">
{fileInfo ? formatDate(fileInfo.createdAt) : '#'}
</span>
</div>
<div className="info-row">
<span className="info-label">
{t('monitoring')}
</span>
<span className="info-value">
{fileInfo ? fileInfo.monitoring : '#'}
</span> </span>
</div> </div>
</div> </div>
@@ -1,12 +1,12 @@
export default function ViolationPageNote() { export default function ViolationPageNote() {
return ( return (
<div <div
className="block-wrapper" className="violation-page-note"
> >
<div className="card-header"> <div className="card-header">
<h3 className="card-title"> <h3 className="card-title">
Добавить заметку Добавить заметку
</h3> </h3>
</div> </div>
@@ -15,7 +15,7 @@ export default function ViolationPageNote() {
<input type="hidden" name="action" value="add_note" /> <input type="hidden" name="action" value="add_note" />
<textarea name="note" className="note-textarea" placeholder="Добавить заметку к этому нарушению..." ></textarea> <textarea name="note" className="note-textarea" placeholder="Добавить заметку к этому нарушению..." ></textarea>
<button type="submit" className="btn-small btn-primary-small"> <button type="submit" className="btn-small btn-primary-small">
💾 Сохранить заметку Сохранить заметку
</button> </button>
</form> </form>
</div> </div>
@@ -1,45 +1,28 @@
'use client' 'use client'
import { useTranslations } from 'next-intl'; import { useTranslations } from 'next-intl';
import { useParams } from 'next/navigation'
import { IconEyeDashed } from '@/app/ui/icons/icons'; import { IconEyeDashed } from '@/app/ui/icons/icons';
import { FileDetails } from '@/app/[locale]/pages/violations/[id]/page';
export default function ViolationPageTitle() { export default function ViolationPageTitle({ fileInfo }: { fileInfo: FileDetails }) {
const t = useTranslations('Global'); const t = useTranslations('Global');
const params = useParams()
const id = params.id
return ( return (
<div className="page-title-color-frame violation-page"> <div className="page-title-color-frame violation-page">
<div <div
className="violation-page-icon" className="violation-page-icon"
> >
<IconEyeDashed />
</div>
<div>
<h1>
file id: {id}
</h1>
<div
className="violation-page-info"
>
<span>
fileType
</span>
<span> {fileInfo.thumbnailFileUrl ? (
fileSize <img src={fileInfo.thumbnailFileUrl} alt={fileInfo.fileName} />
</span> ) : (
<IconEyeDashed />
)}
<span>
fileViolationDate
</span>
<span>
fileViolationType
</span>
</div>
</div> </div>
<h1>
{t('file-name')}: {fileInfo?.fileName ? fileInfo.fileName : '#'}
</h1>
</div> </div>
) )
} }
@@ -4,7 +4,9 @@
import { useTranslations } from 'next-intl'; import { useTranslations } from 'next-intl';
import Link from 'next/link'; import Link from 'next/link';
import { useRouter, usePathname } from 'next/navigation'; import { useRouter, usePathname } from 'next/navigation';
import { useEffect } from 'react'; import { useEffect, useState } from 'react';
import { formatDate } from '@/app/lib/formatDate';
import ViolationPageNote from '@/app/ui/violations/file-page/violation-page-note';
interface ViolationFileDetail { interface ViolationFileDetail {
id: number; id: number;
@@ -39,17 +41,14 @@ export default function ViolationPageViolationsList({
const t = useTranslations('Global'); const t = useTranslations('Global');
const router = useRouter(); const router = useRouter();
const pathname = usePathname(); const pathname = usePathname();
const [selectedViolation, setSelectedViolation] = useState<ViolationFileDetail | null>(null);
if (!fileViolations?.violations) { if (!fileViolations?.violations) {
return null; return null;
} }
useEffect(() => {
console.log(fileViolations);
}, [fileViolations]);
const handlePageChange = (page: number) => { const handlePageChange = (page: number) => {
router.push(`${pathname}?page=${page}`); router.push(`${pathname}?page=${page}`, { scroll: false });
}; };
const getPageNumbers = () => { const getPageNumbers = () => {
@@ -71,79 +70,179 @@ export default function ViolationPageViolationsList({
return pages; return pages;
}; };
function selectHandler(violation: ViolationFileDetail) {
setSelectedViolation(violation);
}
return ( return (
<div className="block-wrapper"> <div className="block-wrapper">
<div className="card-header"> <div className="card-header">
<h3 className="card-title"> <h3 className="card-title">
Все нарушения этого файла {t('all-file-violations')}
</h3> </h3>
<span> <span>
Всего: {fileViolations.total_elements} | Страница {fileViolations.current_page} из {fileViolations.total_pages} {t('total-violations')}: {fileViolations.total_elements} | {t('page')} {fileViolations.current_page} {t('out-of')} {fileViolations.total_pages}
</span> </span>
</div> </div>
<div className="sources-list"> <div
{fileViolations.violations.map(item => { className="sources-list-wrapper"
return ( >
<div className="source-card" key={item.id}> <div className="sources-list">
<div className="source-image"> {fileViolations.violations.map(item => {
<img src={item.url} alt="" /> return (
<div
className={`source-card ${selectedViolation?.id === item.id ? 'selected' : ''}`}
key={item.id}
onClick={() => {
selectHandler(item);
}}
>
{/* <div className="source-header">
<div className="source-image">
<img src={item.url} alt="" />
</div>
</div> */}
<div
className="source-header-left"
>
<div className="source-image">
<img src={item.url} alt="" />
</div>
<div>
<span
className="source-meta"
>
{t('source')}:
</span>
<span className="source-url">
{item.host}
</span>
</div>
</div>
<div
className="source-header-right"
>
<span className="source-status new">
{item.status}
</span>
<div className="source-actions">
<Link
href={item.page_url}
className="btn-small btn-primary-small"
target="_blank"
scroll={false}
>
{t('open')}
</Link>
</div>
</div>
</div> </div>
<div className="source-header"> );
<a href={item.page_url} target="_blank" className="source-url"> })}
<span>{item.page_title}</span> </div>
</a>
<span className="source-status new"> <div
{item.status} className="violation-info"
>
<div
className="violation-info-grid"
>
<div
className="violation-info-content"
>
<h3
className="violation-info-title"
>
{selectedViolation?.page_title}
</h3>
<div
className="violation-info-image"
>
<img src={selectedViolation?.url} alt={selectedViolation?.page_title} />
</div>
<div
className="violation-info-source"
>
<span>
{t('source')}:
</span> </span>
</div>
<div className="source-meta">
<span>{item.host}</span>
</div>
<div className="source-actions">
<Link <Link
href={item.page_url} href={selectedViolation?.page_url ? selectedViolation?.page_url : '#'}
className="btn-small btn-primary-small" className="source"
target="_blank" target="_blank"
scroll={false} scroll={false}
> >
{t('open')} {selectedViolation?.page_url}
</Link> </Link>
</div> </div>
</div> <div
); className="violation-info-source"
})} >
</div> <span>
{t('date')} {selectedViolation?.created_date ? formatDate(selectedViolation?.created_date) : '#'}
</span>
</div>
<div>
{selectedViolation?.status}
</div>
</div>
<div
className="violation-info-actions"
>
<div className="action-buttons">
<button type="button" className="btn-action btn-warning">
Взять в работу
</button>
<button type="button" className="btn-action btn-success">
Отметить решенным
</button>
<button type="button" className="btn-action btn-secondary">
Ложное срабатывание
</button>
</div>
</div>
</div>
<ViolationPageNote />
</div>
</div>
{fileViolations.total_pages > 1 && ( {fileViolations.total_pages > 1 && (
<div className="pagination"> <div className="pagination">
{fileViolations.has_previous && ( <button
<button onClick={() => handlePageChange(currentPage - 1)}
onClick={() => handlePageChange(currentPage - 1)} className="pagination-item pagination-item-prev"
className="pagination__item pagination__item--prev" disabled={!fileViolations.has_previous}
> >
Предыдущая {t('previous')}
</button> </button>
)}
{getPageNumbers().map(pageNum => ( {getPageNumbers().map(pageNum => (
<button <button
key={pageNum} key={pageNum}
onClick={() => handlePageChange(pageNum)} onClick={() => handlePageChange(pageNum)}
className={`pagination__item ${currentPage === pageNum ? 'pagination__item--active' : ''}`} className={`pagination-item ${currentPage === pageNum ? 'pagination-item-active' : ''}`}
> >
{pageNum} {pageNum}
</button> </button>
))} ))}
{fileViolations.has_next && ( <button
<button onClick={() => handlePageChange(currentPage + 1)}
onClick={() => handlePageChange(currentPage + 1)} className="pagination-item pagination-item-next"
className="pagination__item pagination__item--next" disabled={!fileViolations.has_next}
> >
Следующая {t('next')}
</button> </button>
)}
</div> </div>
)} )}
</div> </div>
+7 -1
View File
@@ -309,7 +309,13 @@
"violations-detected": "Violations detected", "violations-detected": "Violations detected",
"content-verification-status": "Content verification status", "content-verification-status": "Content verification status",
"violation-data-updated": "Violation data updated", "violation-data-updated": "Violation data updated",
"open": "Open" "open": "Open",
"file-type": "File type",
"file-not-found": "File not found",
"all-file-violations" : "All file violations",
"previous" : "Previous",
"next": "Next",
"source": "Source"
}, },
"Login-register-form": { "Login-register-form": {
"and": "and", "and": "and",
+7 -1
View File
@@ -309,7 +309,13 @@
"violations-detected": "Обнаруженные нарушения", "violations-detected": "Обнаруженные нарушения",
"content-verification-status": "Статус проверки контента", "content-verification-status": "Статус проверки контента",
"violation-data-updated": "Данные нарушений обновлены", "violation-data-updated": "Данные нарушений обновлены",
"open": "Открыть" "open": "Открыть",
"file-type": "Тип файла",
"file-not-found": "Файл не найден",
"all-file-violations": "Все нарушения файла",
"previous" : "Предыдущая",
"next": "Следующая",
"source": "Источник"
}, },
"Login-register-form": { "Login-register-form": {
"and": "и", "and": "и",