frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change dashboard layout

Browse Source
This commit is contained in:
smanylov
2025-12-11 18:28:35 +07:00
parent cdc2dca7dd
commit 67c6d07e4d
22 changed files with 1185 additions and 549 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/ui/dashboard/chart-container.tsx
+147
View File
@@ -1,3 +1,150 @@
/* deleted */
/* .chart-container {
.chart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.date-filter {
background: #f3f4f6;
border: none;
padding: 8px 15px;
border-radius: 10px;
font-size: 12px;
cursor: pointer;
transition: background-color 0.3s;
}
.chart-main-content {
padding: 25px;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-radius: 15px;
border: 1px solid #e2e8f0;
}
.chart-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.chart-item.images {
--chart-color-1: #10b981;
--chart-color-2: #34d399;
}
.chart-item.videos {
--chart-color-1: #8b5cf6;
--chart-color-2: #7c3aed;
}
.chart-item.audios {
--chart-color-1: #f59e0b;
--chart-color-2: #d97706;
}
.chart-item.documents {
--chart-color-1: #ef4444;
--chart-color-2: #dc2626;
}
.chart-item.scripts {
--chart-color-1: #4f46e5;
--chart-color-2: #4338ca;
}
.chart-item.texts {
--chart-color-1: #d97706;
--chart-color-2: #b45309;
}
.chart-item {
border-left: 4px solid var(--chart-color-1);
background: white;
padding: 20px;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(16, 185, 129, 0.1);
&-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
gap: 10px;
}
&-image {
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 16px;
background: linear-gradient(135deg, var(--chart-color-1), var(--chart-color-2));
}
&-title {
font-weight: 600;
color: #1f2937;
}
&-count {
font-size: 24px;
font-weight: 700;
color: var(--chart-color-1);
margin-bottom: 5px;
}
&-tooltip {
font-size: 12px;
color: #6b7280;
}
&-progress-bar {
margin-top: 10px;
height: 4px;
background: #e5e7eb;
border-radius: 2px;
overflow: hidden;
}
&-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--chart-color-1), var(--chart-color-2));
width: 2%;
transition: width 1s ease;
}
}
.chart-total {
margin-top: 20px;
padding: 15px;
background: white;
border-radius: 10px;
border: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
}
.chart-total-text {
color: #6b7280;
font-size: 14px;
}
.chart-total-count {
font-size: 18px;
font-weight: 700;
color: #1f2937;
}
} */
export default function ChartContainer() {
return (
<div className="chart-container block-wrapper">
src/app/ui/dashboard/files-table.tsx
+7
View File
@@ -0,0 +1,7 @@
export default function FilesTable() {
return (
<div>
table
</div>
)
}
src/app/ui/dashboard/protection-overview.tsx
+56 -10
View File
@@ -1,22 +1,68 @@
'use client'
import { useState } from 'react';
import { PieChartComponent } from '@/app/components/PieChartComponent';
const data = [
{ name: 'Изображения', value: 33, color: '#f08c00' },
{ name: 'Видео', value: 50, color: '#2f9e44' },
{ name: 'Аудио', value: 25, color: '#1971c2' },
];
export default function ProtectionOverview() {
const [isOpen, setIsOpen] = useState(false);
return (
<div className="protection-overview">
<h3>Защита вашего контента</h3>
<p>Текущий статус защищенности и активности системы мониторинга</p>
<div className="protection-stats">
<div className="protection-stat">
<div className={`protection-stats ${isOpen ? "opened" : ""}`}>
<div className="protection-stat total-files">
<div className="protection-stat-value">0</div>
<div className="protection-stat-label">Всего проверок</div>
<div className="protection-stat-label">Всего файлов</div>
</div>
<div className="protection-stat">
<div className="protection-stat-value">0</div>
<div className="protection-stat-label">Файлов с водяными знаками</div>
</div>
<div className="protection-stat">
<div className="protection-stat-value">0 / 0</div>
<div className="protection-stat-label">Использовано места на диске</div>
<div className="protection-stat total-checks">
<div className="protection-stat-row">
<div className="protection-stat-value">0</div>
<div className="protection-stat-label">проверок</div>
</div>
<div className="protection-stat-row">
<div className="protection-stat-value">0</div>
<div className="protection-stat-label">нарушений</div>
</div>
</div>
{isOpen ? (
<div className="protection-stat total-usage">
<PieChartComponent data={data}/>
</div>
) : (
<div className="protection-stat total-usage">
<div className="protection-stat-value">0 / 0</div>
<div className="protection-stat-label">Использовано места на диске</div>
</div>
)}
</div>
<button
className="protection-overview-switch cursor-pointer"
onClick={() => {
setIsOpen(!isOpen);
}}
>
<svg
className={`w-5 h-5 ml-2 transition-transform ${isOpen ? 'rotate-180' : ''}`}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fillRule="evenodd"
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clipRule="evenodd"
/>
</svg>
</button>
</div>
)
}
src/app/ui/dashboard/stats-grid.tsx
+76 -29
View File
@@ -1,35 +1,82 @@
import { useTranslations } from 'next-intl';
import { IconImageFile, IconVideoFile, IconAudioFile } from '@/app/ui/icons/icons';
export default function StatsGrid() {
return (
<div className="stats-grid">
<div className="stat-card images">
<div className="stat-type">ИЗОБРАЖЕНИЯ</div>
<div className="stat-value">0 шт.</div>
<div className="stat-label">Ваши изображения</div>
<div className="stat-icon">
<span>0</span> МБ</div>
</div>
<div className="stat-card videos">
<div className="stat-type">ВИДЕО</div>
<div className="stat-value">0 шт.</div>
<div className="stat-label">Ваш видео контент</div>
<div className="stat-icon">
<span>0</span> МБ</div>
</div>
const t = useTranslations("Global");
<div className="stat-card audio">
<div className="stat-type">АУДИО</div>
<div className="stat-value">0 шт.</div>
<div className="stat-label">Ваш аудио контент</div>
<div className="stat-icon">
<span>0</span> МБ</div>
</div>
<div className="stat-card scripts">
<div className="stat-type">PDF-ФАЙЛЫ</div>
<div className="stat-value">0 шт.</div>
<div className="stat-label">Ваши PDF-файлы</div>
<div className="stat-icon">
<span>0</span> КБ</div>
return (
<div className="stats-wrapper">
<h3>
{t('your-content')}
</h3>
<div className="stats-grid">
<div className="stats-item left-top-corner stats-header">
{t('content-type')}
</div>
<div className="stats-item stats-header">
{t('quantity')}
</div>
<div className="stats-item stats-header">
{t('size')}
</div>
<div className="stats-item stats-header">
{t('violations')}
</div>
<div className="stats-item last-column right-top-corner stats-header">
{t('checks')}
</div>
<div className="stats-item first-column images">
<IconImageFile />
{t('images')}
</div>
<div className="stats-item">
0
</div>
<div className="stats-item">
0
</div>
<div className="stats-item">
0
</div>
<div className="stats-item last-column">
0
</div>
<div className="stats-item first-column videos">
<IconVideoFile />
{t('videos')}
</div>
<div className="stats-item">
0
</div>
<div className="stats-item">
0
</div>
<div className="stats-item">
0
</div>
<div className="stats-item last-column">
0
</div>
<div className="stats-item last-row left-bottom-corner first-column audio">
<IconAudioFile />
{t('audios')}
</div>
<div className="stats-item last-row">
0
</div>
<div className="stats-item last-row">
0
</div>
<div className="stats-item last-row">
0
</div>
<div className="stats-item last-row last-column right-bottom-corner">
0
</div>
</div>
</div>
)
}
src/app/ui/dashboard/storage-breakdown.tsx
+97
View File
@@ -1,3 +1,100 @@
/* deleted */
/* .storage-breakdown {
.storage-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0;
border-bottom: 1px solid #f1f5f9;
}
.storage-icon {
width: 24px;
height: 24px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
&.storage-icon.photos {
background: #dbeafe;
color: #1d4ed8;
}
&.storage-icon.videos {
background: #f3e8ff;
color: #7c3aed;
}
&.storage-icon.audio {
background: #d1fae5;
color: #059669;
}
&.storage-icon.documents {
background: #fed7d7;
color: #dc2626;
}
&.storage-icon.code {
background: #e0e7ff;
color: #4f46e5;
}
&.storage-icon.text {
background: #fef3c7;
color: #d97706;
}
}
.storage-type {
display: flex;
align-items: center;
gap: 10px;
}
.storage-footer {
margin-top: 15px;
padding-top: 15px;
border-top: 2px solid #e2e8f0;
}
.storage-footer-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.storage-footer-title {
font-weight: 600;
color: #1e293b;
}
.storage-footer-weight {
font-weight: 600;
color: #6366f1;
font-size: 16px;
}
.progress-bar {
background: #f1f5f9;
border-radius: 10px;
height: 8px;
overflow: hidden;
margin: 15px 0;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #10b981, #059669);
border-radius: 10px;
transition: width 0.8s ease;
}
} */
export default function StorageBreakdown() {
return (
<div className="storage-breakdown block-wrapper">
src/app/ui/dashboard/violations-table.tsx
+107
View File
@@ -1,3 +1,110 @@
/* deleted */
/* .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;
}
} */
import Link from 'next/link';
import Image from 'next/image';
src/app/ui/dashboard/violations-type-table.tsx
+60
View File
@@ -1,3 +1,63 @@
/* deleted */
/*
.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;
}
}
} */
export default function ViolationsTypeTable() {
return (
<div className="block-wrapper">