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

redesign

Browse Source
This commit is contained in:
smanylov
2026-01-05 15:07:10 +07:00
parent 9f41386b65
commit c438ae3fb9
11 changed files with 127 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/[locale]/pages/dashboard/page.tsx
+2 -2
View File
@@ -18,11 +18,11 @@ export default function Page() {
<Suspense fallback={<>...</>}>
<PageTitle title="statistics">
</PageTitle>
<div className="flex justify-between flex-wrap gap-8">
<div className="split-blocks">
<ProtectionOverview />
<StatsGrid />
</div>
<FilesTable fileType={'all'}/>
<FilesTable fileType={'all'} />
</Suspense>
</>
);
src/app/[locale]/pages/marking-audio/page.tsx
+14 -19
View File
@@ -8,38 +8,33 @@ import { StackedBarChart } from '@/app/components/StackedBarChart';
const data = [
{
name: 'File A',
checks: 4000,
violations: 2000
checks: 4,
violations: 2
},
{
name: 'File B',
checks: 3000,
violations: 1400
checks: 8,
violations: 4
},
{
name: 'File C',
checks: 2000,
violations: 1000
checks: 2,
violations: 1
},
{
name: 'File D',
checks: 2780,
violations: 1000
checks: 7,
violations: 1
},
{
name: 'File E',
checks: 5090,
violations: 4800
checks: 5,
violations: 4
},
{
name: 'File F',
checks: 5390,
violations: 3800
},
{
name: 'File H',
checks: 4000,
violations: 1500
checks: 5,
violations: 3
}
];
@@ -50,9 +45,9 @@ export default async function Page() {
return (
<div>
<PageTitle title="audio-protection" />
<div className="flex justify-between flex-wrap gap-8">
<div className="split-blocks">
<ProtectionSummary />
<div className="protection-overview grow">
<div className="protection-overview">
<StackedBarChart data={data} />
</div>
</div>
src/app/[locale]/pages/marking-photo/page.tsx
+14 -19
View File
@@ -8,38 +8,33 @@ import {StackedBarChart} from '@/app/components/StackedBarChart';
const data = [
{
name: 'File A',
checks: 4000,
violations: 2000
checks: 4,
violations: 2
},
{
name: 'File B',
checks: 3000,
violations: 1400
checks: 8,
violations: 4
},
{
name: 'File C',
checks: 2000,
violations: 1000
checks: 2,
violations: 1
},
{
name: 'File D',
checks: 2780,
violations: 1000
checks: 7,
violations: 1
},
{
name: 'File E',
checks: 5090,
violations: 4800
checks: 5,
violations: 4
},
{
name: 'File F',
checks: 5390,
violations: 3800
},
{
name: 'File H',
checks: 4000,
violations: 1500
checks: 5,
violations: 3
}
];
@@ -50,9 +45,9 @@ export default async function Page() {
return (
<div>
<PageTitle title="image-protection" />
<div className="flex justify-between flex-wrap gap-8">
<div className="split-blocks">
<ProtectionSummary />
<div className="protection-overview grow">
<div className="protection-overview">
<StackedBarChart data={data} />
</div>
</div>
src/app/[locale]/pages/marking-video/page.tsx
+14 -19
View File
@@ -8,38 +8,33 @@ import { StackedBarChart } from '@/app/components/StackedBarChart';
const data = [
{
name: 'File A',
checks: 4000,
violations: 2000
checks: 4,
violations: 2
},
{
name: 'File B',
checks: 3000,
violations: 1400
checks: 8,
violations: 4
},
{
name: 'File C',
checks: 2000,
violations: 1000
checks: 2,
violations: 1
},
{
name: 'File D',
checks: 2780,
violations: 1000
checks: 7,
violations: 1
},
{
name: 'File E',
checks: 5090,
violations: 4800
checks: 5,
violations: 4
},
{
name: 'File F',
checks: 5390,
violations: 3800
},
{
name: 'File H',
checks: 4000,
violations: 1500
checks: 5,
violations: 3
}
];
@@ -50,9 +45,9 @@ export default async function Page() {
return (
<div>
<PageTitle title="video-protection" />
<div className="flex justify-between flex-wrap gap-8">
<div className="split-blocks">
<ProtectionSummary />
<div className="protection-overview grow">
<div className="protection-overview">
<StackedBarChart data={data} />
</div>
</div>
src/app/[locale]/pages/my-content/page.tsx
+2 -2
View File
@@ -12,9 +12,9 @@ const data = [
export default function Page() {
return (
<>
<div className="flex justify-between flex-wrap gap-x-8">
<div className="split-blocks">
<MyContentInfoBlock />
<div className="protection-overview grow">
<div className="protection-overview">
<PieChartComponent data={data} />
</div>
</div>
src/app/components/PieChartComponent.tsx
+5 -4
View File
@@ -31,20 +31,21 @@ export const PieChartComponent = ({ data }: {
data={data}
cx="50%"
cy="50%"
innerRadius={70}
outerRadius={90}
innerRadius={75}
outerRadius={100}
paddingAngle={0}
dataKey="value"
stroke="none"
>
{data.map((entry, index) => (
<Cell key={`cell-${index}`} fill={entry.color} />
<Cell key={`cell-${index}`} fill={entry.color} stroke="none" />
))}
</Pie>
</PieChart>
</ResponsiveContainer>
<div className="flex gap-6">
{data.map((entry, index) => (
<div key={`cell-${index}`} className="text-white">
<div key={`cell-${index}`} className="">
<span className="w-2 h-2 rounded-full font-bold inline-block mr-1.5" style={{ backgroundColor: entry.color }}></span>
<span>{t(entry.name)}</span>
</div>
src/app/components/StackedBarChart.tsx
+48 -41
View File
@@ -1,6 +1,7 @@
'use client'
import { useTranslations } from 'next-intl';
import { useMemo } from 'react';
import { BarChart, Bar, Cell, XAxis, Tooltip } from 'recharts';
type Files = {
@@ -23,12 +24,19 @@ interface BarShapeProps {
export const StackedBarChart = ({ data }: Files) => {
const t = useTranslations('Global');
const strokeColor = "#dfdede24";
const strokeWidth = 1;
const CHECKS_COLOR = '#6366f1';
const VIOLATIONS_COLOR = '#f08c00'
const BORDER_RADIUS = 5;
const STROKE_COLOR = "#dfdede24";
const STROKE_WIDTH = 1;
const { totalChecks, totalViolations } = useMemo(() => ({
totalChecks: data.reduce((sum, item) => sum + (item.checks || 0), 0),
totalViolations: data.reduce((sum, item) => sum + (item.violations || 0), 0)
}), [data]);
const renderBarWithPartialBorder = (props: BarShapeProps) => {
const { x, y, width, height, fill } = props;
const borderRadius = 10;
return (
<>
@@ -39,39 +47,39 @@ export const StackedBarChart = ({ data }: Files) => {
width={width}
height={height}
fill={fill}
rx={borderRadius}
ry={borderRadius}
rx={BORDER_RADIUS}
ry={BORDER_RADIUS}
/>
{/* Левая граница (центральная часть, без закруглений) */}
<line
x1={x}
y1={y + borderRadius}
y1={y + BORDER_RADIUS}
x2={x}
y2={y + height - borderRadius}
y2={y + height - BORDER_RADIUS}
/>
{/* Правая граница (центральная часть, без закруглений) */}
<line
x1={x + width}
y1={y + borderRadius}
y1={y + BORDER_RADIUS}
x2={x + width}
y2={y + height - borderRadius}
y2={y + height - BORDER_RADIUS}
/>
{/* Нижняя граница (прямая часть между закруглениями) */}
<line
x1={x + borderRadius}
x1={x + BORDER_RADIUS}
y1={y + height}
x2={x + width - borderRadius}
x2={x + width - BORDER_RADIUS}
y2={y + height}
/>
{/* Верхняя граница (прямая часть между закруглениями) */}
<line
x1={x + borderRadius}
x1={x + BORDER_RADIUS}
y1={y}
x2={x + width - borderRadius}
x2={x + width - BORDER_RADIUS}
y2={y}
/>
</>
@@ -80,7 +88,6 @@ export const StackedBarChart = ({ data }: Files) => {
const renderBarWithTopBorder = (props: BarShapeProps) => {
const { x, y, width, height, fill } = props;
const borderRadius = 10;
if (height <= 0 || width <= 0) return null;
@@ -93,48 +100,48 @@ export const StackedBarChart = ({ data }: Files) => {
width={width}
height={height}
fill={fill}
rx={borderRadius}
ry={borderRadius}
rx={BORDER_RADIUS}
ry={BORDER_RADIUS}
/>
{/* Левая граница (центральная часть, без закруглений) */}
<line
x1={x}
y1={y + borderRadius}
y1={y + BORDER_RADIUS}
x2={x}
y2={y + height - borderRadius}
stroke={strokeColor}
strokeWidth={strokeWidth}
y2={y + height - BORDER_RADIUS}
stroke={STROKE_COLOR}
strokeWidth={STROKE_WIDTH}
/>
{/* Правая граница (центральная часть, без закруглений) */}
<line
x1={x + width}
y1={y + borderRadius}
y1={y + BORDER_RADIUS}
x2={x + width}
y2={y + height - borderRadius}
stroke={strokeColor}
strokeWidth={strokeWidth}
y2={y + height - BORDER_RADIUS}
stroke={STROKE_COLOR}
strokeWidth={STROKE_WIDTH}
/>
{/* Нижняя граница (прямая часть между закруглениями) */}
<line
x1={x + borderRadius}
x1={x + BORDER_RADIUS}
y1={y + height}
x2={x + width - borderRadius}
x2={x + width - BORDER_RADIUS}
y2={y + height}
stroke={strokeColor}
strokeWidth={strokeWidth}
stroke={STROKE_COLOR}
strokeWidth={STROKE_WIDTH}
/>
{/* Верхняя граница (прямая часть между закруглениями) */}
<line
x1={x + borderRadius}
x1={x + BORDER_RADIUS}
y1={y}
x2={x + width - borderRadius}
x2={x + width - BORDER_RADIUS}
y2={y}
stroke={strokeColor}
strokeWidth={strokeWidth}
stroke={STROKE_COLOR}
strokeWidth={STROKE_WIDTH}
/>
</>
);
@@ -159,44 +166,44 @@ export const StackedBarChart = ({ data }: Files) => {
{/* <Tooltip /> */}
<XAxis
dataKey="name"
stroke="#fff"
stroke={CHECKS_COLOR}
fontSize={12}
axisLine={false}
/>
<Bar
dataKey="checks"
stackId="a"
label={{ position: 'top', fill: '#fff', fontSize: 12 }}
label={{ position: 'top', fill: CHECKS_COLOR, fontSize: 12 }}
radius={5}
shape={renderBarWithPartialBorder as any}
>
{data.map((_entry, index) => (
<Cell key={`cell-${index}`} fill={'#fff'} />
<Cell key={`cell-${index}`} fill={CHECKS_COLOR} />
))}
</Bar>
<Bar
dataKey="violations"
stackId="b"
label={{ position: 'top', fill: '#fff', fontSize: 12 }}
label={{ position: 'top', fill: CHECKS_COLOR, fontSize: 12 }}
radius={5}
shape={renderBarWithTopBorder as any}
>
{data.map((_entry, index) => (
<Cell key={`cell-${index}`} fill={'#f08c00'}/>
<Cell key={`cell-${index}`} fill={VIOLATIONS_COLOR} />
))}
</Bar>
</BarChart>
</div>
<div className="protection-stat-total-info">
<div
className="font-bold"
className={`font-bold text-[${CHECKS_COLOR}]`}
>
{t('check')}: 777
{t('check')}: {totalChecks}
</div>
<div
className="font-bold text-[#f08c00]"
className={`font-bold text-[${VIOLATIONS_COLOR}]`}
>
{t('violations')}: 777
{t('violations')}: {totalViolations}
</div>
</div>
</div>
src/app/styles/global-styles.scss
+10
View File
@@ -322,4 +322,14 @@
&-video {
color: v.$color-video;
}
}
.split-blocks {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
@media (max-width: 1624px) {
grid-template-columns: 1fr;
}
}
src/app/styles/pages-styles.scss
+16 -7
View File
@@ -18,12 +18,16 @@
}
.protection-overview {
background: linear-gradient(135deg, v.$p-color 50%, v.$s-color 100%);
color: v.$white;
--text-color: v.$text-p;
/* background: linear-gradient(135deg, v.$p-color 50%, v.$s-color 100%);
color: v.$white; */
color: var(--text-color);
border-radius: 20px;
padding: 25px;
margin-bottom: 30px;
position: relative;
background: v.$white;
box-shadow: 0 4px 20px v.$shadow-1;
h3 {
margin: 0 0 10px 0;
@@ -37,7 +41,7 @@
}
.pie-char-text {
fill: v.$white;
fill: var(--text-color);
font-size: 20px;
text-anchor: middle;
dominant-baseline: middle;
@@ -71,7 +75,10 @@
.protection-stat {
padding: 15px;
background: rgba(255, 255, 255, 0.1);
/* background: rgba(255, 255, 255, 0.1); */
/* background-color: v.$b-color-1; */
/* background-color: v.$bg-light; */
box-shadow: 0 4px 20px v.$shadow-1;
border-radius: 12px;
display: flex;
flex-direction: column;
@@ -139,7 +146,8 @@
position: absolute;
top: 10;
left: 10;
background-color: #1f293718;
/* background-color: #1f293718; */
box-shadow: 0 4px 20px v.$shadow-1;
padding: 10px;
border-radius: 10;
font-size: 15px;
@@ -227,7 +235,7 @@
background: #ffffff1a;
&.stats-header {
background: #f9fafb;
background-color: v.$bg-light;
border-left: none;
font-size: 16px;
font-weight: 500;
@@ -562,7 +570,7 @@
&-head {
background-color: v.$b-color-1;
background-color: v.$bg-light;
th {
padding-left: 1rem;
@@ -611,6 +619,7 @@
&:hover {
background-color: v.$bg-light;
/* background-color: v.$b-color-1; */
}
}
src/app/ui/dashboard/protection-overview.tsx
+1 -1
View File
@@ -58,7 +58,7 @@ export default function ProtectionOverview() {
});
return (
<div className="protection-overview grow">
<div className="protection-overview">
<h3>{t('protecting-your-content')}</h3>
<p>{t('current-status-of')}</p>
<div className={`protection-stats ${isOpen ? "opened" : ""}`}>
src/app/ui/dashboard/stats-grid.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ export default function StatsGrid() {
const t = useTranslations("Global");
return (
<div className="block-wrapper stats-wrapper grow auto">
<div className="block-wrapper stats-wrapper">
<h3>
{t('your-content')}
</h3>