change dash-board layout
This commit is contained in:
smanylov
@@ -0,0 +1,85 @@
|
||||
export default function DashboardFilesInfo() {
|
||||
return (
|
||||
<div className="dashboard-files-info">
|
||||
<div className="type-card images" data-icon="🖼️">
|
||||
<div className="stat-type">ИЗОБРАЖЕНИЯ</div>
|
||||
<div className="stat-value">235</div>
|
||||
<div className="stat-label">Ваши изображения</div>
|
||||
<div className="type-card-stats">
|
||||
<div className="type-card-stat-row">
|
||||
<span className="type-card-stat-label">💾 Размер</span>
|
||||
<span className="type-card-stat-value">340.5 МБ</span>
|
||||
</div>
|
||||
<div className="type-card-stat-row">
|
||||
<span className="type-card-stat-label">🛡️ Защищено</span>
|
||||
<span className="type-card-stat-value">233 файлов</span>
|
||||
</div>
|
||||
<div className="type-card-stat-row">
|
||||
<span className="type-card-stat-label">⚠️ Нарушений</span>
|
||||
<span className="type-card-stat-value">504</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="type-card videos" data-icon="🎬">
|
||||
<div className="stat-type">ВИДЕО</div>
|
||||
<div className="stat-value">25</div>
|
||||
<div className="stat-label">Ваш видео контент</div>
|
||||
<div className="type-card-stats">
|
||||
<div className="type-card-stat-row">
|
||||
<span className="type-card-stat-label">💾 Размер</span>
|
||||
<span className="type-card-stat-value">196.9 МБ</span>
|
||||
</div>
|
||||
<div className="type-card-stat-row">
|
||||
<span className="type-card-stat-label">🛡️ Защищено</span>
|
||||
<span className="type-card-stat-value">23 файлов</span>
|
||||
</div>
|
||||
<div className="type-card-stat-row">
|
||||
<span className="type-card-stat-label">⚠️ Нарушений</span>
|
||||
<span className="type-card-stat-value">0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="type-card audio" data-icon="🎵">
|
||||
<div className="stat-type">АУДИО</div>
|
||||
<div className="stat-value">43</div>
|
||||
<div className="stat-label">Ваш аудио контент</div>
|
||||
<div className="type-card-stats">
|
||||
<div className="type-card-stat-row">
|
||||
<span className="type-card-stat-label">💾 Размер</span>
|
||||
<span className="type-card-stat-value">223.7 МБ</span>
|
||||
</div>
|
||||
<div className="type-card-stat-row">
|
||||
<span className="type-card-stat-label">🛡️ Защищено</span>
|
||||
<span className="type-card-stat-value">36 файлов</span>
|
||||
</div>
|
||||
<div className="type-card-stat-row">
|
||||
<span className="type-card-stat-label">⚠️ Нарушений</span>
|
||||
<span className="type-card-stat-value">0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="type-card scripts" data-icon="📄">
|
||||
<div className="stat-type">PDF-ФАЙЛЫ</div>
|
||||
<div className="stat-value">73</div>
|
||||
<div className="stat-label">Ваши PDF-файлы</div>
|
||||
<div className="type-card-stats">
|
||||
<div className="type-card-stat-row">
|
||||
<span className="type-card-stat-label">💾 Размер</span>
|
||||
<span className="type-card-stat-value">28.9 МБ</span>
|
||||
</div>
|
||||
<div className="type-card-stat-row">
|
||||
<span className="type-card-stat-label">🛡️ Защищено</span>
|
||||
<span className="type-card-stat-value">70 файлов</span>
|
||||
</div>
|
||||
<div className="type-card-stat-row">
|
||||
<span className="type-card-stat-label">⚠️ Нарушений</span>
|
||||
<span className="type-card-stat-value">0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
export default function DahboardGeographySection() {
|
||||
return (
|
||||
<div className="dahboard-geography-section">
|
||||
<h3 className="section-title">🌍 География нарушений</h3>
|
||||
<div className="geography-grid">
|
||||
<div className="country-item">
|
||||
<div className="country-flag">🇺🇸</div>
|
||||
<div className="country-info">
|
||||
<div className="country-name">США</div>
|
||||
<div className="country-bar">
|
||||
<div className="country-bar-fill" style={{width: '44%'}}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="country-stats">
|
||||
<div className="country-violations">231</div>
|
||||
<div className="country-percent">44%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="country-item">
|
||||
<div className="country-flag">🇷🇺</div>
|
||||
<div className="country-info">
|
||||
<div className="country-name">Россия</div>
|
||||
<div className="country-bar">
|
||||
<div className="country-bar-fill" style={{width: '44%'}}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="country-stats">
|
||||
<div className="country-violations">227</div>
|
||||
<div className="country-percent">44%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="country-item">
|
||||
<div className="country-flag">🌐</div>
|
||||
<div className="country-info">
|
||||
<div className="country-name">Другие</div>
|
||||
<div className="country-bar">
|
||||
<div className="country-bar-fill" style={{width: '11%'}}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="country-stats">
|
||||
<div className="country-violations">57</div>
|
||||
<div className="country-percent">11%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="country-item">
|
||||
<div className="country-flag">🇬🇧</div>
|
||||
<div className="country-info">
|
||||
<div className="country-name">Великобритания</div>
|
||||
<div className="country-bar">
|
||||
<div className="country-bar-fill" style={{width: '1%'}}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="country-stats">
|
||||
<div className="country-violations">4</div>
|
||||
<div className="country-percent">1%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="country-item">
|
||||
<div className="country-flag">🇩🇪</div>
|
||||
<div className="country-info">
|
||||
<div className="country-name">Германия</div>
|
||||
<div className="country-bar">
|
||||
<div className="country-bar-fill" style={{width: '0%'}}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="country-stats">
|
||||
<div className="country-violations">1</div>
|
||||
<div className="country-percent">0%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
export default function DashboardLastCheck() {
|
||||
return (
|
||||
<div className="dashboard-last-check">
|
||||
<div className="last-check-info">
|
||||
<div className="last-check-title">Последняя проверка контента</div>
|
||||
<div className="last-check-date">
|
||||
17.10.2025 в 10:23</div>
|
||||
</div>
|
||||
<div className="last-check-actions">
|
||||
<button className="btn-report">
|
||||
📄 Отчёт
|
||||
</button>
|
||||
<button className="btn-new-search">
|
||||
🔍 Мониторинг нарушений
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
export default function DashboardPlatformsList() {
|
||||
return (
|
||||
<div className="content-section">
|
||||
<div className="section-header">
|
||||
<h3 className="section-title">Аналитика распространения</h3>
|
||||
</div>
|
||||
|
||||
<div className="dashboard-platforms-list">
|
||||
<div className="platform-item">
|
||||
<div className="platform-name">
|
||||
<span className="platform-icon">🌐</span>
|
||||
<span>Другие</span>
|
||||
</div>
|
||||
<span className="platform-count">367</span>
|
||||
</div>
|
||||
<div className="platform-item">
|
||||
<div className="platform-name">
|
||||
<span className="platform-icon">📦</span>
|
||||
<span>Ozon</span>
|
||||
</div>
|
||||
<span className="platform-count">56</span>
|
||||
</div>
|
||||
<div className="platform-item">
|
||||
<div className="platform-name">
|
||||
<span className="platform-icon">🔴</span>
|
||||
<span>Yandex</span>
|
||||
</div>
|
||||
<span className="platform-count">40</span>
|
||||
</div>
|
||||
<div className="platform-item">
|
||||
<div className="platform-name">
|
||||
<span className="platform-icon">📌</span>
|
||||
<span>Pinterest</span>
|
||||
</div>
|
||||
<span className="platform-count">33</span>
|
||||
</div>
|
||||
<div className="platform-item">
|
||||
<div className="platform-name">
|
||||
<span className="platform-icon">🛍️</span>
|
||||
<span>Wildberries</span>
|
||||
</div>
|
||||
<span className="platform-count">18</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
export default function DashboardUserFiles() {
|
||||
return (
|
||||
<div className="content-section">
|
||||
<div className="section-header">
|
||||
<h3 className="section-title">Ваши файлы</h3>
|
||||
<a href="pages/marking-photo.php" className="view-all-link">Загрузить файл →</a>
|
||||
</div>
|
||||
|
||||
<div className="user-files-list">
|
||||
<div className="file-item">
|
||||
<div className="file-icon video">
|
||||
🎬</div>
|
||||
<div className="file-info">
|
||||
<div className="file-name" title="Запись экрана 2026-01-09 в 15.45.28.mov">
|
||||
Запись экрана 2026-01-09 в 15.45.28.mov</div>
|
||||
<div className="file-meta">
|
||||
11.3 МБ •
|
||||
11.01.2026</div>
|
||||
</div>
|
||||
<div className="file-badge protected">✓ Защищено</div>
|
||||
</div>
|
||||
<div className="file-item">
|
||||
<div className="file-icon video">
|
||||
🎬</div>
|
||||
<div className="file-info">
|
||||
<div className="file-name" title="SOUNE_миграция.mov">
|
||||
SOUNE_миграция.mov</div>
|
||||
<div className="file-meta">
|
||||
17.1 МБ •
|
||||
11.01.2026</div>
|
||||
</div>
|
||||
<div className="file-badge protected">✓ Защищено</div>
|
||||
</div>
|
||||
<div className="file-item">
|
||||
<div className="file-icon video">
|
||||
🎬</div>
|
||||
<div className="file-info">
|
||||
<div className="file-name" title="SOUNE_миграция.mov">
|
||||
SOUNE_миграция.mov</div>
|
||||
<div className="file-meta">
|
||||
17.1 МБ •
|
||||
11.01.2026</div>
|
||||
</div>
|
||||
<div className="file-badge protected">✓ Защищено</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
export default function DashboardUserStats() {
|
||||
return (
|
||||
<div className="dashboard-user-stats">
|
||||
|
||||
<div className="stat-card projects">
|
||||
<div className="stat-type">ЗАЩИЩЁННЫЕ ФАЙЛЫ</div>
|
||||
<div className="stat-value">367</div>
|
||||
<div className="stat-label">Файлов под защитой</div>
|
||||
<div className="stat-icon">🛡️</div>
|
||||
</div>
|
||||
|
||||
<div className="stat-card matches">
|
||||
<div className="stat-type">СОВПАДЕНИЯ</div>
|
||||
<div className="stat-value">520</div>
|
||||
<div className="stat-label">Найдено совпадений</div>
|
||||
<div className="stat-icon">🔍</div>
|
||||
</div>
|
||||
|
||||
<div className="stat-card violations">
|
||||
<div className="stat-type">НАРУШЕНИЯ</div>
|
||||
<div className="stat-value">499</div>
|
||||
<div className="stat-label">Требуют внимания</div>
|
||||
<div className="stat-icon">⚠️</div>
|
||||
</div>
|
||||
|
||||
<div className="stat-card storage">
|
||||
<div className="stat-type">ХРАНИЛИЩЕ</div>
|
||||
<div className="stat-value">790.2 MB</div>
|
||||
<div className="stat-label">Использовано места</div>
|
||||
<div className="stat-icon">💾</div>
|
||||
</div>
|
||||
|
||||
<div className="stat-card legal">
|
||||
<div className="stat-type">ЖАЛОБЫ</div>
|
||||
<div className="stat-value">0</div>
|
||||
<div className="stat-label">Отправлено юристам</div>
|
||||
<div className="stat-icon">⚖️</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
export default function DahboardLimitsSection() {
|
||||
return (
|
||||
<div className="dashboard-limits-section">
|
||||
<h3 className="section-title">💰 Использование лимитов</h3>
|
||||
<div className="limits-grid">
|
||||
<div className="limit-item">
|
||||
<div className="limit-header">
|
||||
<div className="limit-label">
|
||||
<span>🔍</span>
|
||||
<span>Проверки</span>
|
||||
</div>
|
||||
<div className="limit-value">520 / 10,000</div>
|
||||
</div>
|
||||
<div className="progress-bar-container">
|
||||
<div className="progress-bar low" style={{width: '44%'}}></div>
|
||||
</div>
|
||||
<div className="progress-bar-value">
|
||||
5%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="limit-item">
|
||||
<div className="limit-header">
|
||||
<div className="limit-label">
|
||||
<span>💾</span>
|
||||
<span>Хранилище</span>
|
||||
</div>
|
||||
<div className="limit-value">790.2 / 1,024 МБ</div>
|
||||
</div>
|
||||
<div className="progress-bar-container">
|
||||
<div className="progress-bar medium" style={{width: '77%'}}></div>
|
||||
</div>
|
||||
<div className="progress-bar-value">
|
||||
77%
|
||||
</div>
|
||||
</div>
|
||||
<div className="limit-item">
|
||||
<div className="limit-header">
|
||||
<div className="limit-label">
|
||||
<span>📁</span>
|
||||
<span>Файлы</span>
|
||||
</div>
|
||||
<div className="limit-value">386 / 500</div>
|
||||
</div>
|
||||
<div className="progress-bar-container">
|
||||
<div className="progress-bar medium" style={{width: '77%'}}></div>
|
||||
</div>
|
||||
<div className="progress-bar-value">
|
||||
77%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,266 @@
|
||||
'use client'
|
||||
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { Pagination, Autoplay } from 'swiper/modules';
|
||||
import Image from 'next/image';
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/pagination';
|
||||
import testImage from '@/app/src/image-preview.png'
|
||||
import { useRef } from 'react';
|
||||
|
||||
export default function ViolationsCarousel() {
|
||||
const paginationRef = useRef(null);
|
||||
|
||||
return (
|
||||
<div className="content-section">
|
||||
<div className="section-header">
|
||||
<h3 className="section-title">Нарушения</h3>
|
||||
<a href="pages/violations.php" className="view-all-link">Смотреть все →</a>
|
||||
</div>
|
||||
<div className="violations-carousel">
|
||||
<Swiper
|
||||
spaceBetween={50}
|
||||
slidesPerView={1}
|
||||
modules={[Pagination, Autoplay]}
|
||||
pagination={{
|
||||
/* dynamicBullets: true, */
|
||||
/* el: paginationRef.current, */
|
||||
clickable: true,
|
||||
el: '.custon-swiper-pagination'
|
||||
}}
|
||||
loop={true}
|
||||
autoplay={{
|
||||
delay: 3000,
|
||||
disableOnInteraction: false,
|
||||
}}
|
||||
/* width={300} */
|
||||
>
|
||||
<SwiperSlide>
|
||||
<div className="violation-slide">
|
||||
<div className="violation-image-container">
|
||||
<Image src={testImage} alt="Preview" className="violation-image" />
|
||||
<div className="violation-badge">НАРУШЕНИЕ</div>
|
||||
<div className="violation-status-badge">ОБРАБОТАНО</div>
|
||||
</div>
|
||||
|
||||
<div className="violation-content">
|
||||
<div className="violation-title-row">
|
||||
<div className="violation-filename">
|
||||
🖼️banner111.png</div>
|
||||
<div className="violation-type-badge photo">
|
||||
Фото
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="violation-info-grid">
|
||||
<div className="violation-info-item">
|
||||
<div className="violation-info-label">
|
||||
🌍 Регион
|
||||
</div>
|
||||
<div className="violation-info-value">
|
||||
<span className="region-flag">🇺🇸</span>
|
||||
<span>США</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="violation-info-item">
|
||||
<div className="violation-info-label">📅 Обнаружено</div>
|
||||
<div className="violation-info-value">
|
||||
17.10.2025</div>
|
||||
</div>
|
||||
|
||||
<div className="violation-info-item">
|
||||
<div className="violation-info-label">🌐 Домен</div>
|
||||
<div className="violation-info-value">
|
||||
m.apkpure.com </div>
|
||||
</div>
|
||||
|
||||
<div className="violation-info-item">
|
||||
<div className="violation-info-label">📊 Категория</div>
|
||||
<div className="violation-info-value">
|
||||
Единичное
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="violation-info-item">
|
||||
<div className="violation-info-label">📁 Тип</div>
|
||||
<div className="violation-info-value">
|
||||
Изображение</div>
|
||||
</div>
|
||||
|
||||
<div className="violation-info-item">
|
||||
<div className="violation-info-label">⚡ Статус</div>
|
||||
<div className="violation-info-value">
|
||||
✅ Обработано</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="violation-actions-row">
|
||||
<button className="btn-visit-site">
|
||||
🔗 Перейти на сайт
|
||||
</button>
|
||||
<button className="violation-action">
|
||||
🚨 Открыть дело
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div className="violation-slide">
|
||||
<div className="violation-image-container">
|
||||
<Image src={testImage} alt="Preview" className="violation-image" />
|
||||
|
||||
<div className="violation-badge">НАРУШЕНИЕ</div>
|
||||
<div className="violation-status-badge">ОБРАБОТАНО</div>
|
||||
</div>
|
||||
|
||||
<div className="violation-content">
|
||||
<div className="violation-title-row">
|
||||
<div className="violation-filename">
|
||||
🖼️banner111.png</div>
|
||||
<div className="violation-type-badge photo">
|
||||
Фото
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="violation-info-grid">
|
||||
<div className="violation-info-item">
|
||||
<div className="violation-info-label">
|
||||
🌍 Регион
|
||||
</div>
|
||||
<div className="violation-info-value">
|
||||
<span className="region-flag">🇺🇸</span>
|
||||
<span>США</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="violation-info-item">
|
||||
<div className="violation-info-label">📅 Обнаружено</div>
|
||||
<div className="violation-info-value">
|
||||
17.10.2025</div>
|
||||
</div>
|
||||
|
||||
<div className="violation-info-item">
|
||||
<div className="violation-info-label">🌐 Домен</div>
|
||||
<div className="violation-info-value">
|
||||
m.apkpure.com </div>
|
||||
</div>
|
||||
|
||||
<div className="violation-info-item">
|
||||
<div className="violation-info-label">📊 Категория</div>
|
||||
<div className="violation-info-value">
|
||||
Единичное
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="violation-info-item">
|
||||
<div className="violation-info-label">📁 Тип</div>
|
||||
<div className="violation-info-value">
|
||||
Изображение</div>
|
||||
</div>
|
||||
|
||||
<div className="violation-info-item">
|
||||
<div className="violation-info-label">⚡ Статус</div>
|
||||
<div className="violation-info-value">
|
||||
✅ Обработано</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="violation-actions-row">
|
||||
<button className="btn-visit-site">
|
||||
🔗 Перейти на сайт
|
||||
</button>
|
||||
<button className="violation-action">
|
||||
🚨 Открыть дело
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide>
|
||||
<div className="violation-slide">
|
||||
<div className="violation-image-container">
|
||||
<Image src={testImage} alt="Preview" className="violation-image" />
|
||||
|
||||
<div className="violation-badge">НАРУШЕНИЕ</div>
|
||||
<div className="violation-status-badge">ОБРАБОТАНО</div>
|
||||
</div>
|
||||
|
||||
<div className="violation-content">
|
||||
<div className="violation-title-row">
|
||||
<div className="violation-filename">
|
||||
🖼️banner111.png</div>
|
||||
<div className="violation-type-badge photo">
|
||||
Фото
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="violation-info-grid">
|
||||
<div className="violation-info-item">
|
||||
<div className="violation-info-label">
|
||||
🌍 Регион
|
||||
</div>
|
||||
<div className="violation-info-value">
|
||||
<span className="region-flag">🇺🇸</span>
|
||||
<span>США</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="violation-info-item">
|
||||
<div className="violation-info-label">📅 Обнаружено</div>
|
||||
<div className="violation-info-value">
|
||||
17.10.2025</div>
|
||||
</div>
|
||||
|
||||
<div className="violation-info-item">
|
||||
<div className="violation-info-label">🌐 Домен</div>
|
||||
<div className="violation-info-value">
|
||||
m.apkpure.com </div>
|
||||
</div>
|
||||
|
||||
<div className="violation-info-item">
|
||||
<div className="violation-info-label">📊 Категория</div>
|
||||
<div className="violation-info-value">
|
||||
Единичное
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="violation-info-item">
|
||||
<div className="violation-info-label">📁 Тип</div>
|
||||
<div className="violation-info-value">
|
||||
Изображение</div>
|
||||
</div>
|
||||
|
||||
<div className="violation-info-item">
|
||||
<div className="violation-info-label">⚡ Статус</div>
|
||||
<div className="violation-info-value">
|
||||
✅ Обработано</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="violation-actions-row">
|
||||
<button className="btn-visit-site">
|
||||
🔗 Перейти на сайт
|
||||
</button>
|
||||
<button className="violation-action">
|
||||
🚨 Открыть дело
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SwiperSlide>
|
||||
</Swiper>
|
||||
<div
|
||||
className="flex justify-center mt-6"
|
||||
>
|
||||
<div
|
||||
ref={paginationRef}
|
||||
className="flex justify-center gap-2 custon-swiper-pagination"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user