From fecb811a5c1402deee4bfdcec88477b48c6f7e0f Mon Sep 17 00:00:00 2001 From: smanylov Date: Wed, 26 Nov 2025 18:21:44 +0700 Subject: [PATCH] finish dashboard layout --- src/app/pages/dashboard/page.tsx | 6 + src/app/src/image-preview.png | Bin 0 -> 5614 bytes src/app/styles/dashboard.scss | 238 +++++++++++++++++- src/app/ui/dashboard/activity-chart.tsx | 47 ++++ src/app/ui/dashboard/violations-table.tsx | 105 ++++++++ .../ui/dashboard/violations-type-table.tsx | 37 +++ 6 files changed, 431 insertions(+), 2 deletions(-) create mode 100644 src/app/src/image-preview.png create mode 100644 src/app/ui/dashboard/activity-chart.tsx create mode 100644 src/app/ui/dashboard/violations-table.tsx create mode 100644 src/app/ui/dashboard/violations-type-table.tsx diff --git a/src/app/pages/dashboard/page.tsx b/src/app/pages/dashboard/page.tsx index 8ab1431..5fb35d2 100644 --- a/src/app/pages/dashboard/page.tsx +++ b/src/app/pages/dashboard/page.tsx @@ -7,6 +7,9 @@ import StorageBreakdown from '@/app/ui/dashboard/storage-breakdown'; import RecentFilesList from '@/app/ui/dashboard/recent-files-list'; import ChartContainer from '@/app/ui/dashboard/chart-container'; import UserInfo from '@/app/ui/dashboard/user-info'; +import ViolationsTable from '@/app/ui/dashboard/violations-table'; +import ViolationsTypeTable from '@/app/ui/dashboard/violations-type-table'; +import ActivityChart from '@/app/ui/dashboard/activity-chart'; export const metadata: Metadata = { title: 'Dashboard', @@ -28,6 +31,9 @@ export default function Home() { + + + {/* */} diff --git a/src/app/src/image-preview.png b/src/app/src/image-preview.png new file mode 100644 index 0000000000000000000000000000000000000000..6a9ba6d727f5234f5d4b26cd69da040e6322bb77 GIT binary patch literal 5614 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 IM6N<$f*sohO#lD@ literal 0 HcmV?d00001 diff --git a/src/app/styles/dashboard.scss b/src/app/styles/dashboard.scss index 9b95220..8477dd4 100644 --- a/src/app/styles/dashboard.scss +++ b/src/app/styles/dashboard.scss @@ -167,7 +167,6 @@ display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; - margin-bottom: 30px; } .block-wrapper { @@ -176,6 +175,7 @@ padding: 25px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); border: 1px solid #f1f5f9; + margin-bottom: 30px; } .storage-breakdown { @@ -322,7 +322,6 @@ display: grid; grid-template-columns: 2fr 1fr; gap: 30px; - margin-bottom: 30px; } .chart-container { @@ -550,4 +549,239 @@ margin-top: 5px; } } +} + +.violations-table { + background: white; + border-radius: 20px; + overflow: hidden; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); + border: 1px solid #f1f5f9; + + .violation-main { + flex: 1; + display: flex; + align-items: center; + gap: 15px; + } + + .violation-card { + padding: 20px 25px; + border-bottom: 1px solid #f1f5f9; + transition: all 0.3s ease; + display: flex; + align-items: center; + justify-content: space-between; + gap: 15px; + + &:hover { + background: linear-gradient(90deg, #f8fafc 0%, #f1f5f9 100%); + } + } + + .violation-icon-wrapper { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 12px; + width: 48px; + height: 48px; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + flex-shrink: 0; + + &.photo { + background: linear-gradient(135deg, #dbeafe, #bfdbfe); + + img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 12px; + } + } + } + + .btn-primary { + padding: 10px 20px; + } + + .violation-content-info { + flex: 1; + } + + .violation-filename { + font-weight: 600; + color: #1e293b; + font-size: 15px; + margin-bottom: 5px; + display: block; + } + + .violation-meta { + display: flex; + gap: 15px; + font-size: 13px; + color: #64748b; + flex-wrap: wrap; + } + + .violation-meta-item { + display: flex; + align-items: center; + gap: 5px; + } + + .violation-status-badge { + padding: 6px 12px; + border-radius: 20px; + font-size: 12px; + font-weight: 600; + background: linear-gradient(135deg, #fee2e2, #fecaca); + color: #dc2626; + white-space: nowrap; + } + + .violation-sources-badge { + padding: 6px 12px; + border-radius: 20px; + font-size: 12px; + font-weight: 600; + background: linear-gradient(135deg, #fef3c7, #fde68a); + color: #d97706; + white-space: nowrap; + } +} + +.violations-type-table { + .data-table { + width: 100%; + border-collapse: collapse; + margin-top: 15px; + } + + .data-table th { + font-weight: 600; + color: #374151; + background: #f9fafb; + font-size: 12px; + text-transform: uppercase; + letter-spacing: 1px; + } + + .data-table td { + color: #6b7280; + font-size: 14px; + font-weight: 600; + } + + .data-table th, + .data-table td { + text-align: left; + padding: 15px; + border-bottom: 1px solid #f3f4f6; + } + + .type-violations { + text-transform: uppercase; + } + + .total-violations { + span { + color: #dc2626; + } + + } + + .new-violations { + span { + color: #f59e0b; + } + } + + .status-violations { + span { + background: #fef2f2; + color: #dc2626; + padding: 4px 8px; + border-radius: 6px; + font-size: 12px; + font-weight: 600; + } + } +} + +.activity-chart { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + border-radius: 20px; + padding: 25px; + box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3); + border: none; + position: relative; + overflow: hidden; + + h3 { + margin: 0 0 15px 0; + font-size: 18px; + color: white; + position: relative; + z-index: 1; + } + + .activity-grid { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 12px; + margin: 20px 0; + position: relative; + z-index: 1; + } + + .activity-day { + text-align: center; + padding: 15px; + background: rgba(255, 255, 255, 0.15); + border-radius: 12px; + border: 1px solid rgba(255, 255, 255, 0.2); + transition: all 0.3s ease; + backdrop-filter: blur(10px); + position: relative; + + &:hover { + background: rgba(255, 255, 255, 0.25); + transform: translateY(-3px); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); + } + } + + .activity-day-label { + font-size: 12px; + opacity: 0.8; + margin-bottom: 8px; + font-weight: 500; + } + + .activity-day-value { + font-size: 20px; + font-weight: 700; + margin-bottom: 4px; + } + + .activity-day-files { + font-size: 10px; + opacity: 0.7; + } + + .activity-chart-footer { + text-align: center; + font-size: 12px; + opacity: 0.8; + position: relative; + z-index: 1; + margin-top: 15px; + } } \ No newline at end of file diff --git a/src/app/ui/dashboard/activity-chart.tsx b/src/app/ui/dashboard/activity-chart.tsx new file mode 100644 index 0000000..25f67ff --- /dev/null +++ b/src/app/ui/dashboard/activity-chart.tsx @@ -0,0 +1,47 @@ +export default function ActivityChart() { + return ( +
+

⚡ Активность за неделю

+
+
+
Пн
+
0
+
файлов
+
+
+
Вт
+
0
+
файлов
+
+
+
Ср
+
0
+
файлов
+
+
+
Чт
+
0
+
файлов
+
+
+
Пт
+
0
+
файлов
+
+
+
Сб
+
0
+
файлов
+
+
+
Вс
+
0
+
файлов
+
+
+
+ 📊 Всего за неделю: 0 файлов +
+
+ ) +} \ No newline at end of file diff --git a/src/app/ui/dashboard/violations-table.tsx b/src/app/ui/dashboard/violations-table.tsx new file mode 100644 index 0000000..ad9e0d5 --- /dev/null +++ b/src/app/ui/dashboard/violations-table.tsx @@ -0,0 +1,105 @@ +import Link from 'next/link'; +import Image from 'next/image'; + +import testImage from '@/app/src/image-preview.png' + +export default function ViolationsTable() { + return ( +
+

Найденные совпадения

+
+ +
+
+
+ Preview +
+
+
+ File name (date) +
+
+ + 📅 (date) + + + ⚠️ Права нарушены + + + 🔗 (source count) + + (violant count) + + +
+
+
+ + Подробнее → + +
+ +
+
+
+ Preview +
+
+
+ File name (date) +
+
+ + 📅 (date) + + + ⚠️ Права нарушены + + + 🔗 (source count) + + (violant count) + + +
+
+
+ + Подробнее → + +
+ +
+
+
+ Preview +
+
+
+ File name (date) +
+
+ + 📅 (date) + + + ⚠️ Права нарушены + + + 🔗 (source count) + + (violant count) + + +
+
+
+ + Подробнее → + +
+ +
+
+ ) +} \ No newline at end of file diff --git a/src/app/ui/dashboard/violations-type-table.tsx b/src/app/ui/dashboard/violations-type-table.tsx new file mode 100644 index 0000000..6f941f5 --- /dev/null +++ b/src/app/ui/dashboard/violations-type-table.tsx @@ -0,0 +1,37 @@ +export default function ViolationsTypeTable() { + return ( +
+

Нарушения по типам контента

+
+ + + + + + + + + + + + + + + + + +
ТИП КОНТЕНТАВСЕГО НАРУШЕНИЙНОВЫЕСТАТУС
+ Type + + 0 + + 0 + + + Требует внимания + +
+
+
+ ) +} \ No newline at end of file