fix stacked bar shar diagram

src/app/components/StackedBarChart.tsx

@@ -21,62 +21,56 @@ interface BarShapeProps {
 export const StackedBarChart = ({ data }: Files) => {
 	const t = useTranslations('Global');
 
-	const editedData = data.map(e => {
-		return {
-			name: e.name,
-			checks: e.checks - e.violations,
-			violations: e.violations
-		}
-	})
-
-	const mainColors = ['#0088FE20', '#00C49F20', '#FFBB2820', '#FF804220', '#FF000020', '#FFC0CB20'];
-	const secondColors = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', 'red', 'pink'];
-
 	const strokeColor = "#dfdede24";
 	const strokeWidth = 1;
 
 	const renderBarWithPartialBorder = (props: BarShapeProps) => {
 		const { x, y, width, height, fill } = props;
+		const borderRadius = 10;
 
 		return (
 			<>
-				{/* Основной прямоугольник без обводки */}
+				{/* Основной прямоугольник с закругленными углами */}
 				<rect
 					x={x}
 					y={y}
 					width={width}
 					height={height}
 					fill={fill}
+					rx={borderRadius}
+					ry={borderRadius}
 				/>
 
-				{/* Левая граница */}
+				{/* Левая граница (центральная часть, без закруглений) */}
 				<line
 					x1={x}
-					y1={y}
+					y1={y + borderRadius}
 					x2={x}
-					y2={y + height}
+					y2={y + height - borderRadius}
-					stroke={strokeColor}
-					strokeWidth={strokeWidth}
 				/>
 
-				{/* Правая граница */}
+				{/* Правая граница (центральная часть, без закруглений) */}
 				<line
 					x1={x + width}
-					y1={y}
+					y1={y + borderRadius}
 					x2={x + width}
-					y2={y + height}
+					y2={y + height - borderRadius}
-					stroke={strokeColor}
-					strokeWidth={strokeWidth}
 				/>
 
-				{/* Нижняя граница */}
+				{/* Нижняя граница (прямая часть между закруглениями) */}
 				<line
-					x1={x}
+					x1={x + borderRadius}
 					y1={y + height}
-					x2={x + width}
+					x2={x + width - borderRadius}
 					y2={y + height}
-					stroke={strokeColor}
+				/>
-					strokeWidth={strokeWidth}
+
+				{/* Верхняя граница (прямая часть между закруглениями) */}
+				<line
+					x1={x + borderRadius}
+					y1={y}
+					x2={x + width - borderRadius}
+					y2={y}
 				/>
 			</>
 		);
@@ -90,82 +84,66 @@ export const StackedBarChart = ({ data }: Files) => {
 
 		return (
 			<>
-				{/* Основной прямоугольник с закруглением ТОЛЬКО ВЕРХНИХ углов */}
+				{/* Основной прямоугольник с закругленными углами */}
-				<path
+				<rect
-					d={`
+					x={x}
-          M ${x + borderRadius} ${y}
+					y={y}
-          L ${x + width - borderRadius} ${y}
+					width={width}
-          Q ${x + width} ${y} ${x + width} ${y + borderRadius}
+					height={height}
-          L ${x + width} ${y + height}
-          L ${x} ${y + height}
-          L ${x} ${y + borderRadius}
-          Q ${x} ${y} ${x + borderRadius} ${y}
-          Z
-        `}
 					fill={fill}
+					rx={borderRadius}
+					ry={borderRadius}
 				/>
 
-				{/* Верхняя граница */}
+				{/* Левая граница (центральная часть, без закруглений) */}
-				<path
-					d={`
-          M ${x + borderRadius} ${y}
-          L ${x + width - borderRadius} ${y}
-        `}
-					stroke={strokeColor}
-					strokeWidth={strokeWidth}
-					fill="none"
-				/>
-
-				{/* Левая граница */}
 				<line
 					x1={x}
 					y1={y + borderRadius}
 					x2={x}
-					y2={y + height}
+					y2={y + height - borderRadius}
 					stroke={strokeColor}
 					strokeWidth={strokeWidth}
 				/>
 
-				{/* Правая граница */}
+				{/* Правая граница (центральная часть, без закруглений) */}
 				<line
 					x1={x + width}
 					y1={y + borderRadius}
 					x2={x + width}
+					y2={y + height - borderRadius}
+					stroke={strokeColor}
+					strokeWidth={strokeWidth}
+				/>
+
+				{/* Нижняя граница (прямая часть между закруглениями) */}
+				<line
+					x1={x + borderRadius}
+					y1={y + height}
+					x2={x + width - borderRadius}
 					y2={y + height}
 					stroke={strokeColor}
 					strokeWidth={strokeWidth}
 				/>
 
-				{/* Левый верхний закругленный угол */}
+				{/* Верхняя граница (прямая часть между закруглениями) */}
-				<path
+				<line
-					d={`
+					x1={x + borderRadius}
-          M ${x} ${y + borderRadius}
+					y1={y}
-          Q ${x} ${y} ${x + borderRadius} ${y}
+					x2={x + width - borderRadius}
-        `}
+					y2={y}
 					stroke={strokeColor}
 					strokeWidth={strokeWidth}
-					fill="none"
-				/>
-
-				{/* Правый верхний закругленный угол */}
-				<path
-					d={`
-          M ${x + width - borderRadius} ${y}
-          Q ${x + width} ${y} ${x + width} ${y + borderRadius}
-        `}
-					stroke={strokeColor}
-					strokeWidth={strokeWidth}
-					fill="none"
 				/>
 			</>
-		) as any;
+		);
 	};
 
 	return (
 		<BarChart
-			style={{ width: '100%', maxWidth: '400px', maxHeight: '210px', aspectRatio: 1.618 }}
+			style={{ width: '100%', maxWidth: '600px', maxHeight: '210px', aspectRatio: 1.618 }}
 			responsive
-			data={editedData}
+			data={data}
+			barCategoryGap={15}
 			margin={{
 				top: 20,
 				right: 0,
@@ -184,20 +162,22 @@ export const StackedBarChart = ({ data }: Files) => {
 				dataKey="checks"
 				stackId="a"
 				label={{ position: 'top', fill: '#fff', fontSize: 12 }}
+				radius={5}
 				shape={renderBarWithPartialBorder as any}
 			>
 				{data.map((_entry, index) => (
-					<Cell key={`cell-${index}`} fill={secondColors[index % 20]} />
+					<Cell key={`cell-${index}`} fill={'#fff'} />
 				))}
 			</Bar>
 			<Bar
 				dataKey="violations"
-				stackId="a"
+				stackId="b"
 				label={{ position: 'top', fill: '#fff', fontSize: 12 }}
+				radius={5}
 				shape={renderBarWithTopBorder as any}
 			>
 				{data.map((_entry, index) => (
-					<Cell key={`cell-${index}`} fill={mainColors[index % 20]} />
+					<Cell key={`cell-${index}`} fill={'#f08c00'} />
 				))}
 			</Bar>
 		</BarChart>

src/app/styles/global-styles.scss

@@ -1,9 +1,8 @@
 @use './header.scss';
-@use './dashboard.scss';
+@use './pages-styles.scss';
 @use './settings.scss';
 @use './payment-container.scss';
 @use './reports.scss';
-@use './marking-pages.scss';
 @use './privacy-and-terms-pages.scss';
 @use './VKLogin.scss';
 

src/app/styles/marking-pages.scss

@@ -1,293 +0,0 @@
-.protection-summary {
-	background: linear-gradient(135deg, #e8f5e8, #c8e6c9);
-	border: 2px solid #4caf50;
-	border-radius: 15px;
-	padding: 20px;
-	margin-bottom: 25px;
-	text-align: center;
-
-	h3 {
-		color: #2e7d32;
-		margin-bottom: 15px;
-		font-size: 18px;
-	}
-
-	.protection-stats {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-		gap: 15px;
-		margin-top: 15px;
-	}
-
-	.stat-card {
-		background: rgba(255, 255, 255, 0.8);
-		padding: 15px;
-		border-radius: 10px;
-		text-align: center;
-	}
-
-	.stat-number {
-		font-size: 24px;
-		font-weight: bold;
-		color: #2e7d32;
-	}
-
-	.stat-label {
-		font-size: 12px;
-		color: #666;
-		margin-top: 5px;
-	}
-}
-
-.upload-section {
-	background: white;
-	border-radius: 20px;
-	padding: 30px;
-	margin-bottom: 30px;
-	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-
-	h3 {
-		margin-bottom: 20px;
-		color: #111827;
-		font-size: 20px;
-	}
-
-	.drag-drop-zone {
-		border: 3px dashed #6366f1;
-		border-radius: 15px;
-		padding: 40px 20px;
-		text-align: center;
-		background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
-		margin-bottom: 20px;
-		transition: all 0.3s ease;
-
-		.icon {
-			width: 70px;
-			height: 70px;
-			margin: 0 auto;
-			color: #6366f1;
-		}
-
-		h4 {
-			color: #6366f1;
-			margin-bottom: 5px;
-			font-size: 22px;
-		}
-
-		.description {
-			color: #6b7280;
-			margin-bottom: 5px;
-			text-align: start;
-		}
-
-		.btn-primary {
-			background: linear-gradient(45deg, #6566f1, #5a5ce9);
-			margin-bottom: 40px;
-		}
-	}
-
-	.selected-file {
-		border-radius: 15px;
-		background: #fff;
-		padding: 10px;
-
-		&-file-info {
-			text-align: left;
-		}
-
-		.uploaded-image {
-			border-radius: 0.25rem;
-			max-height: calc(4px * 40);
-			margin-inline: auto;
-			margin-bottom: 20px;
-			border: 1px solid #d1d5db;
-		}
-
-		.btn-confirm {
-			background: linear-gradient(45deg, #6566f1, #01579b);
-			color: white;
-			border: none;
-			padding: 5px 15px;
-			border-radius: 12px;
-			cursor: pointer;
-			font-weight: 600;
-			font-size: 16px;
-			transition: 0.3s;
-			min-width: 160px;
-			transform: translateY(0px);
-			box-shadow: none;
-		}
-
-		.btn-cancel {
-			background: #fff;
-			color: rgb(99, 102, 241);
-			border: 2px solid rgb(99, 102, 241);
-			padding: 5px 15px;
-			border-radius: 12px;
-			cursor: pointer;
-			font-weight: 600;
-			font-size: 16px;
-			transition: 0.3s;
-			min-width: 120px;
-		}
-
-		.btn:hover {
-			transform: translateY(-2px);
-			box-shadow: 0 8px 25px #6366f14d;
-		}
-	}
-}
-
-.test-section {
-	background: linear-gradient(135deg, #fff3e0, #ffe0b2);
-	border-radius: 20px;
-	padding: 30px;
-	margin-bottom: 30px;
-	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-
-	h3 {
-		margin-bottom: 20px;
-		color: #e65100;
-		font-size: 20px;
-	}
-
-	.test-section-content {
-		border: 2px dashed #ff9800;
-		border-radius: 10px;
-		padding: 20px;
-		text-align: center;
-		background: #fff8e1;
-
-		h4 {
-			font-size: 32px;
-			margin-bottom: 10px;
-		}
-
-		.btn {
-			background: linear-gradient(45deg, #ff9800, #f57c00);
-		}
-
-		p {
-			margin-top: 15px;
-			font-size: 12px;
-			color: #e65100;
-		}
-	}
-}
-
-.protected-files-table {
-	background: white;
-	border-radius: 15px;
-	overflow: hidden;
-	margin-top: 30px;
-	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-
-	h3 {
-		padding: 20px 20px 0;
-		color: #111827;
-		font-size: 18px;
-		margin-bottom: 20px;
-	}
-
-	table {
-		width: 100%;
-		border-collapse: collapse;
-	}
-
-	th {
-		background: linear-gradient(180deg, #6366f1, #8b5cf6);
-		color: white;
-		padding: 15px;
-		text-align: left;
-		font-weight: 600;
-		font-size: 14px;
-	}
-
-	td {
-		padding: 15px;
-		border-bottom: 1px solid #f3f4f6;
-		vertical-align: middle;
-	}
-
-	.files-table {
-		&-file {
-			display: flex;
-			align-items: center;
-		}
-
-		&-icon {
-			width: 40px;
-			height: 40px;
-			background: #f0f9ff;
-			border-radius: 8px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			margin-right: 12px;
-			border: 2px solid #6366f1;
-			color: #6366f1;
-		}
-
-		&-title {
-			font-weight: 500;
-			color: #111827;
-			font-size: 14px;
-		}
-
-		&-protect {
-			font-size: 11px;
-			color: #6366f1;
-			font-weight: 600;
-		}
-
-		&-size {
-			color: #6b7280;
-			font-size: 14px;
-		}
-
-		&-protect {
-			display: flex;
-			align-items: center;
-		}
-
-		&-bar {
-			width: 30px;
-			height: 6px;
-			background: #e5e7eb;
-			border-radius: 3px;
-			margin-right: 8px;
-		}
-
-		&-fill {
-			width: 100%;
-			height: 100%;
-			background: #6366f1;
-			border-radius: 3px;
-		}
-
-		&-date {
-			color: #6b7280;
-			font-size: 13px;
-		}
-	}
-
-	.btn-secondary {
-		background: #6366f1;
-		color: white;
-		padding: 5px 16px 5px 10px;
-	}
-
-	.icon {
-		height: 18px;
-	}
-
-	.real-protection-badge {
-		background: linear-gradient(135deg, #6366f1, #8b5cf6);
-		color: white;
-		padding: 2px 6px;
-		border-radius: 4px;
-		font-size: 9px;
-		font-weight: bold;
-		margin-left: 5px;
-	}
-}

src/app/styles/pages-styles.scss

@@ -118,6 +118,24 @@
 			font-size: 14px;
 			opacity: 0.9;
 		}
+
+		&-total-info {
+			position: absolute;
+			top: 10;
+			left: 10;
+			background-color: #1f293718;
+			padding: 10px;
+			border-radius: 10;
+			font-size: 15px;
+		}
+
+		.stacked-bar-chart {
+			border-radius: 10;
+			width: 100%;
+			padding: 0 20px;
+			display: flex;
+			justify-content: center;
+		}
 	}
 
 	&-switch {
@@ -340,3 +358,297 @@
 		}
 	}
 }
+
+.protection-summary {
+	background: linear-gradient(135deg, #e8f5e8, #c8e6c9);
+	border: 2px solid #4caf50;
+	border-radius: 15px;
+	padding: 20px;
+	margin-bottom: 25px;
+	text-align: center;
+
+	h3 {
+		color: #2e7d32;
+		margin-bottom: 15px;
+		font-size: 18px;
+	}
+
+	.protection-stats {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+		gap: 15px;
+		margin-top: 15px;
+	}
+
+	.stat-card {
+		background: rgba(255, 255, 255, 0.8);
+		padding: 15px;
+		border-radius: 10px;
+		text-align: center;
+	}
+
+	.stat-number {
+		font-size: 24px;
+		font-weight: bold;
+		color: #2e7d32;
+	}
+
+	.stat-label {
+		font-size: 12px;
+		color: #666;
+		margin-top: 5px;
+	}
+}
+
+.upload-section {
+	background: white;
+	border-radius: 20px;
+	padding: 30px;
+	margin-bottom: 30px;
+	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+
+	h3 {
+		margin-bottom: 20px;
+		color: #111827;
+		font-size: 20px;
+	}
+
+	.drag-drop-zone {
+		border: 3px dashed #6366f1;
+		border-radius: 15px;
+		padding: 40px 20px;
+		text-align: center;
+		background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
+		margin-bottom: 20px;
+		transition: all 0.3s ease;
+
+		.icon {
+			width: 70px;
+			height: 70px;
+			margin: 0 auto;
+			color: #6366f1;
+		}
+
+		h4 {
+			color: #6366f1;
+			margin-bottom: 5px;
+			font-size: 22px;
+		}
+
+		.description {
+			color: #6b7280;
+			margin-bottom: 5px;
+			text-align: start;
+		}
+
+		.btn-primary {
+			background: linear-gradient(45deg, #6566f1, #5a5ce9);
+			margin-bottom: 40px;
+		}
+	}
+
+	.selected-file {
+		border-radius: 15px;
+		background: #fff;
+		padding: 10px;
+
+		&-file-info {
+			text-align: left;
+		}
+
+		.uploaded-image {
+			border-radius: 0.25rem;
+			max-height: calc(4px * 40);
+			margin-inline: auto;
+			margin-bottom: 20px;
+			border: 1px solid #d1d5db;
+		}
+
+		.btn-confirm {
+			background: linear-gradient(45deg, #6566f1, #01579b);
+			color: white;
+			border: none;
+			padding: 5px 15px;
+			border-radius: 12px;
+			cursor: pointer;
+			font-weight: 600;
+			font-size: 16px;
+			transition: 0.3s;
+			min-width: 160px;
+			transform: translateY(0px);
+			box-shadow: none;
+		}
+
+		.btn-cancel {
+			background: #fff;
+			color: rgb(99, 102, 241);
+			border: 2px solid rgb(99, 102, 241);
+			padding: 5px 15px;
+			border-radius: 12px;
+			cursor: pointer;
+			font-weight: 600;
+			font-size: 16px;
+			transition: 0.3s;
+			min-width: 120px;
+		}
+
+		.btn:hover {
+			transform: translateY(-2px);
+			box-shadow: 0 8px 25px #6366f14d;
+		}
+	}
+}
+
+.test-section {
+	background: linear-gradient(135deg, #fff3e0, #ffe0b2);
+	border-radius: 20px;
+	padding: 30px;
+	margin-bottom: 30px;
+	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+
+	h3 {
+		margin-bottom: 20px;
+		color: #e65100;
+		font-size: 20px;
+	}
+
+	.test-section-content {
+		border: 2px dashed #ff9800;
+		border-radius: 10px;
+		padding: 20px;
+		text-align: center;
+		background: #fff8e1;
+
+		h4 {
+			font-size: 32px;
+			margin-bottom: 10px;
+		}
+
+		.btn {
+			background: linear-gradient(45deg, #ff9800, #f57c00);
+		}
+
+		p {
+			margin-top: 15px;
+			font-size: 12px;
+			color: #e65100;
+		}
+	}
+}
+
+.protected-files-table {
+	background: white;
+	border-radius: 15px;
+	overflow: hidden;
+	margin-top: 30px;
+	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+
+	h3 {
+		padding: 20px 20px 0;
+		color: #111827;
+		font-size: 18px;
+		margin-bottom: 20px;
+	}
+
+	table {
+		width: 100%;
+		border-collapse: collapse;
+	}
+
+	th {
+		background: linear-gradient(180deg, #6366f1, #8b5cf6);
+		color: white;
+		padding: 15px;
+		text-align: left;
+		font-weight: 600;
+		font-size: 14px;
+	}
+
+	td {
+		padding: 15px;
+		border-bottom: 1px solid #f3f4f6;
+		vertical-align: middle;
+	}
+
+	.files-table {
+		&-file {
+			display: flex;
+			align-items: center;
+		}
+
+		&-icon {
+			width: 40px;
+			height: 40px;
+			background: #f0f9ff;
+			border-radius: 8px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-right: 12px;
+			border: 2px solid #6366f1;
+			color: #6366f1;
+		}
+
+		&-title {
+			font-weight: 500;
+			color: #111827;
+			font-size: 14px;
+		}
+
+		&-protect {
+			font-size: 11px;
+			color: #6366f1;
+			font-weight: 600;
+		}
+
+		&-size {
+			color: #6b7280;
+			font-size: 14px;
+		}
+
+		&-protect {
+			display: flex;
+			align-items: center;
+		}
+
+		&-bar {
+			width: 30px;
+			height: 6px;
+			background: #e5e7eb;
+			border-radius: 3px;
+			margin-right: 8px;
+		}
+
+		&-fill {
+			width: 100%;
+			height: 100%;
+			background: #6366f1;
+			border-radius: 3px;
+		}
+
+		&-date {
+			color: #6b7280;
+			font-size: 13px;
+		}
+	}
+
+	.btn-secondary {
+		background: #6366f1;
+		color: white;
+		padding: 5px 16px 5px 10px;
+	}
+
+	.icon {
+		height: 18px;
+	}
+
+	.real-protection-badge {
+		background: linear-gradient(135deg, #6366f1, #8b5cf6);
+		color: white;
+		padding: 2px 6px;
+		border-radius: 4px;
+		font-size: 9px;
+		font-weight: bold;
+		margin-left: 5px;
+	}
+}

src/app/ui/marking-page/protection-summary.tsx

@@ -6,34 +6,39 @@ import { useTranslations } from 'next-intl';
 
 const data = [
 	{
-		name: 'Page A',
+		name: 'File A',
 		checks: 4000,
 		violations: 2000
 	},
 	{
-		name: 'Page B',
+		name: 'File B',
 		checks: 3000,
-		violations: 1398
+		violations: 1400
 	},
 	{
-		name: 'Page C',
+		name: 'File C',
 		checks: 2000,
 		violations: 1000
 	},
 	{
-		name: 'Page D',
+		name: 'File D',
 		checks: 2780,
 		violations: 1000
 	},
 	{
-		name: 'Page E',
+		name: 'File E',
 		checks: 5090,
 		violations: 4800
 	},
 	{
-		name: 'Page F',
+		name: 'File F',
 		checks: 5390,
 		violations: 3800
+	},
+	{
+		name: 'File H',
+		checks: 4000,
+		violations: 1500
 	}
 ];
 
@@ -73,8 +78,22 @@ export default function ProtectionSummary() {
 					}
 				</div>
 				{isOpen ? (
-					<div className="protection-stat total-usage">
+					<div className="protection-stat total-usage relative">
-						<StackedBarChart data={data} />
+						<div className="stacked-bar-chart">
+							<StackedBarChart data={data} />
+						</div>
+						<div className="protection-stat-total-info">
+							<div
+								className="font-bold"
+							>
+								{t('check')}: 777
+							</div>
+							<div
+								className="font-bold text-[#f08c00]"
+							>
+								{t('violations')}: 777
+							</div>
+						</div>
 					</div>
 				) : (
 					<div className="protection-stat total-usage">