From 98ac1aaac8961c543dd2a158042f118ab3f148b5 Mon Sep 17 00:00:00 2001 From: smanylov Date: Thu, 4 Dec 2025 18:21:39 +0700 Subject: [PATCH] add reports layout --- src/app/pages/dashboard/page.tsx | 35 ++- src/app/pages/reports/page.tsx | 17 +- src/app/styles/global-styles.scss | 1 + src/app/styles/reports.scss | 244 ++++++++++++++++++ .../ui/reports/activity-by-content-type.tsx | 33 +++ src/app/ui/reports/analytics-card-month.tsx | 60 +++++ .../ui/reports/analytics-carв-geography.tsx | 36 +++ src/app/ui/reports/final-summary.tsx | 34 +++ 8 files changed, 440 insertions(+), 20 deletions(-) create mode 100644 src/app/styles/reports.scss create mode 100644 src/app/ui/reports/activity-by-content-type.tsx create mode 100644 src/app/ui/reports/analytics-card-month.tsx create mode 100644 src/app/ui/reports/analytics-carв-geography.tsx create mode 100644 src/app/ui/reports/final-summary.tsx diff --git a/src/app/pages/dashboard/page.tsx b/src/app/pages/dashboard/page.tsx index 1c49599..54fb001 100644 --- a/src/app/pages/dashboard/page.tsx +++ b/src/app/pages/dashboard/page.tsx @@ -18,25 +18,22 @@ export const metadata: Metadata = { export default function Page() { return (
-
- ...}> -

Статистика

- - -
- - -
-
- - -
- - - - {/* */} - -
+ ...}> +

Статистика

+ + +
+ + +
+
+ + +
+ + + +
); } diff --git a/src/app/pages/reports/page.tsx b/src/app/pages/reports/page.tsx index 897d52f..4e57a51 100644 --- a/src/app/pages/reports/page.tsx +++ b/src/app/pages/reports/page.tsx @@ -1,7 +1,22 @@ +import StatsGrid from '@/app/ui/dashboard/stats-grid'; +import ViolationsTable from '@/app/ui/dashboard/violations-table'; +import FinalSummary from '@/app/ui/reports/final-summary'; +import AnalyticsCardMonth from '@/app/ui/reports/analytics-card-month'; +import AnalyticsCardGeography from '@/app/ui/reports/analytics-carв-geography'; +import ActivityByContentType from '@/app/ui/reports/activity-by-content-type'; + export default function Page() { return (
- test 1 +

Отчёты и аналитика

+ + +
+ + +
+ +
) } \ No newline at end of file diff --git a/src/app/styles/global-styles.scss b/src/app/styles/global-styles.scss index 0caff06..4e877f2 100644 --- a/src/app/styles/global-styles.scss +++ b/src/app/styles/global-styles.scss @@ -2,6 +2,7 @@ @use './dashboard.scss'; @use './settings.scss'; @use './payment-container.scss'; +@use './reports.scss'; .btn { padding: 12px 24px; diff --git a/src/app/styles/reports.scss b/src/app/styles/reports.scss new file mode 100644 index 0000000..df278d1 --- /dev/null +++ b/src/app/styles/reports.scss @@ -0,0 +1,244 @@ +.enhanced-chart-container { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border-radius: 25px; + padding: 35px; + color: white; + box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4); + position: relative; + overflow: hidden; + margin-bottom: 30px; + + .enhanced-chart-title { + font-size: 22px; + font-weight: 700; + color: white; + display: flex; + align-items: center; + + &::before { + content: '🔍'; + margin-right: 12px; + font-size: 28px; + } + } + + .search-stats-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 20px; + position: relative; + z-index: 2; + } + + .search-stat-item { + background: rgba(255, 255, 255, 0.15); + border-radius: 20px; + padding: 25px; + text-align: center; + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.2); + transition: all 0.3s ease; + + &:hover { + transform: translateY(-5px); + background: rgba(255, 255, 255, 0.25); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); + } + } + + .search-stat-icon { + font-size: 32px; + margin-bottom: 15px; + display: block; + } + + .search-stat-value { + font-size: 28px; + font-weight: 800; + margin-bottom: 8px; + color: white; + } + + .search-stat-label { + font-size: 14px; + opacity: 0.9; + color: white; + font-weight: 500; + } +} + +.analytics-grid { + display: flex; + flex-wrap: wrap; + gap: 30px; + margin-bottom: 40px; + justify-content: space-between; + + .analytics-card { + background: white; + border-radius: 25px; + padding: 30px; + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); + transition: all 0.3s ease; + flex: 1; + min-width: 350px; + max-width: calc(50% - 15px); + margin-bottom: 20px; + } + + .analytics-header { + display: flex; + align-items: center; + margin-bottom: 25px; + padding-bottom: 15px; + border-bottom: 2px solid #f3f4f6; + } + + .analytics-icon { + font-size: 28px; + margin-right: 15px; + } + + .analytics-title { + font-size: 18px; + font-weight: 700; + color: #1f2937; + } + + .storage-timeline { + display: flex; + flex-direction: column; + gap: 12px; + } + + .timeline-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px; + background: #f9fafb; + border-radius: 10px; + border-left: 4px solid #6366f1; + } + + .timeline-month { + font-weight: 600; + color: #1f2937; + } + + .timeline-stats { + display: flex; + gap: 15px; + font-size: 12px; + color: #6b7280; + } + + .method-count { + background: #6366f1; + color: white; + padding: 4px 12px; + border-radius: 20px; + font-weight: 700; + font-size: 12px; + } +} + +.final-summary { + background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 50%, #581c87 100%); + border-radius: 30px; + padding: 40px; + margin-top: 50px; + color: white; + position: relative; + overflow: hidden; + box-shadow: 0 20px 40px rgba(30, 58, 138, 0.4); + + &::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: url('data:image/svg+xml,'); + opacity: 0.3; + } + + .summary-header { + text-align: center; + margin-bottom: 35px; + position: relative; + z-index: 2; + } + + .summary-title { + font-size: 28px; + font-weight: 800; + margin-bottom: 10px; + display: flex; + align-items: center; + justify-content: center; + gap: 15px; + } + + .summary-subtitle { + font-size: 16px; + opacity: 0.9; + font-weight: 500; + } + + .summary-stats { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 30px; + position: relative; + z-index: 2; + } + + .summary-stat { + background: rgba(255, 255, 255, 0.1); + border-radius: 20px; + padding: 30px; + text-align: center; + backdrop-filter: blur(15px); + border: 2px solid rgba(255, 255, 255, 0.2); + transition: all 0.4s ease; + + &:hover { + transform: translateY(-8px) scale(1.02); + background: rgba(255, 255, 255, 0.2); + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); + } + } + + .summary-stat-icon { + font-size: 40px; + margin-bottom: 15px; + display: block; + } + + .summary-stat-value { + font-size: 36px; + font-weight: 900; + margin-bottom: 8px; + color: white; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); + } + + .summary-stat-label { + font-size: 14px; + color: white; + font-weight: 600; + opacity: 0.95; + } + + .summary-stat-change { + font-size: 12px; + margin-top: 8px; + padding: 4px 12px; + background: rgba(255, 255, 255, 0.2); + border-radius: 15px; + display: inline-block; + font-weight: 700; + } +} \ No newline at end of file diff --git a/src/app/ui/reports/activity-by-content-type.tsx b/src/app/ui/reports/activity-by-content-type.tsx new file mode 100644 index 0000000..c0518f1 --- /dev/null +++ b/src/app/ui/reports/activity-by-content-type.tsx @@ -0,0 +1,33 @@ +export default function ActivityByContentType() { + return ( +
+
+

+ Активность проверок по типам контента +

+
+
+
+
📸
+
0
+
Изображения
+
+
+
🎬
+
0
+
Видеофайлы
+
+
+
🎵
+
0
+
Аудиозаписи
+
+
+
📄
+
0
+
Документы
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/app/ui/reports/analytics-card-month.tsx b/src/app/ui/reports/analytics-card-month.tsx new file mode 100644 index 0000000..3762954 --- /dev/null +++ b/src/app/ui/reports/analytics-card-month.tsx @@ -0,0 +1,60 @@ +export default function AnalyticsCardMonth() { + return ( +
+
+
📊
+

Активность по месяцам

+
+
+
+ 📅 Июль +
+ 0 файлов + • + 0 Б +
+
+
+ 📅 Август +
+ 0 файлов + • + 0 Б +
+
+
+ 📅 Сентябрь +
+ 0 файлов + • + 0 Б +
+
+
+ 📅 Октябрь +
+ 3 файлов + • + 2.42 МБ +
+
+
+ 📅 Ноябрь +
+ 14 файлов + • + 43.53 МБ +
+
+
+ 📅 Декабрь +
+ 0 файлов + • + 0 Б +
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/app/ui/reports/analytics-carв-geography.tsx b/src/app/ui/reports/analytics-carв-geography.tsx new file mode 100644 index 0000000..39a275e --- /dev/null +++ b/src/app/ui/reports/analytics-carв-geography.tsx @@ -0,0 +1,36 @@ +export default function AnalyticsCardGeography() { + return ( +
+
+
🌍
+

География нарушений

+
+
+
+ 🇷🇺 Россия + 0 +
+
+ 🇺🇸 США + 0 +
+
+ 🇩🇪 Германия + 0 +
+
+ 🇫🇷 Франция + 0 +
+
+ 🇬🇧 Великобритания + 0 +
+
+ 🇨🇳 Китай + 0 +
+
+
+ ) +} \ No newline at end of file diff --git a/src/app/ui/reports/final-summary.tsx b/src/app/ui/reports/final-summary.tsx new file mode 100644 index 0000000..235b480 --- /dev/null +++ b/src/app/ui/reports/final-summary.tsx @@ -0,0 +1,34 @@ +export default function FinalSummary() { + return ( +
+
+

+ 📈 Итоговая статистика за Декабрь 2025 +

+

+ Общие показатели эффективности системы защиты +

+
+
+
+
🔍
+
0
+
Всего проверок
+
+15% к прошлому месяцу
+
+
+
🚨
+
0
+
Нарушений найдено
+
Отличный результат!
+
+
+
🛡️
+
0
+
Защищенного контента
+
+0 за период
+
+
+
+ ) +} \ No newline at end of file