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