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 0000000..6a9ba6d Binary files /dev/null and b/src/app/src/image-preview.png differ 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