transfer stacked bart chart from overview block

src/app/[locale]/pages/marking-audio/page.tsx

@@ -3,6 +3,45 @@ import FilesTable from '@/app/ui/dashboard/files-table';
 import PageTitle from '@/app/ui/page-title';
 import UploadSectionFile from '@/app/components/upload-section-file';
 import { getAllowedFilesExtensions } from '@/app/actions/fileUpload';
+import { StackedBarChart } from '@/app/components/StackedBarChart';
+
+const data = [
+	{
+		name: 'File A',
+		checks: 4000,
+		violations: 2000
+	},
+	{
+		name: 'File B',
+		checks: 3000,
+		violations: 1400
+	},
+	{
+		name: 'File C',
+		checks: 2000,
+		violations: 1000
+	},
+	{
+		name: 'File D',
+		checks: 2780,
+		violations: 1000
+	},
+	{
+		name: 'File E',
+		checks: 5090,
+		violations: 4800
+	},
+	{
+		name: 'File F',
+		checks: 5390,
+		violations: 3800
+	},
+	{
+		name: 'File H',
+		checks: 4000,
+		violations: 1500
+	}
+];
 
 export default async function Page() {
 	const FILE_TYPE = "audio";
@@ -11,7 +50,12 @@ export default async function Page() {
 	return (
 		<div>
 			<PageTitle title="audio-protection" />
-			<ProtectionSummary />
+			<div className="flex justify-between flex-wrap gap-8">
+				<ProtectionSummary />
+				<div className="protection-overview grow">
+					<StackedBarChart data={data} />
+				</div>
+			</div>
 			<UploadSectionFile fileType={FILE_TYPE} allowedExtensions={file_extension} maxFileSize={max_file_size} />
 			<FilesTable />
 		</div>

src/app/[locale]/pages/marking-photo/page.tsx

@@ -3,6 +3,45 @@ import FilesTable from '@/app/ui/dashboard/files-table';
 import PageTitle from '@/app/ui/page-title';
 import UploadSectionFile from '@/app/components/upload-section-file';
 import { getAllowedFilesExtensions } from '@/app/actions/fileUpload';
+import {StackedBarChart} from '@/app/components/StackedBarChart';
+
+const data = [
+	{
+		name: 'File A',
+		checks: 4000,
+		violations: 2000
+	},
+	{
+		name: 'File B',
+		checks: 3000,
+		violations: 1400
+	},
+	{
+		name: 'File C',
+		checks: 2000,
+		violations: 1000
+	},
+	{
+		name: 'File D',
+		checks: 2780,
+		violations: 1000
+	},
+	{
+		name: 'File E',
+		checks: 5090,
+		violations: 4800
+	},
+	{
+		name: 'File F',
+		checks: 5390,
+		violations: 3800
+	},
+	{
+		name: 'File H',
+		checks: 4000,
+		violations: 1500
+	}
+];
 
 export default async function Page() {
 	const FILE_TYPE = "image";
@@ -11,7 +50,12 @@ export default async function Page() {
 	return (
 		<div>
 			<PageTitle title="image-protection" />
-			<ProtectionSummary />
+			<div className="flex justify-between flex-wrap gap-8">
+				<ProtectionSummary />
+				<div className="protection-overview grow">
+					<StackedBarChart data={data} />
+				</div>
+			</div>
 			<UploadSectionFile fileType={FILE_TYPE} allowedExtensions={file_extension} maxFileSize={max_file_size} />
 			<FilesTable />
 		</div>

src/app/[locale]/pages/marking-video/page.tsx

@@ -3,6 +3,45 @@ import FilesTable from '@/app/ui/dashboard/files-table';
 import PageTitle from '@/app/ui/page-title';
 import UploadSectionFile from '@/app/components/upload-section-file';
 import { getAllowedFilesExtensions } from '@/app/actions/fileUpload';
+import { StackedBarChart } from '@/app/components/StackedBarChart';
+
+const data = [
+	{
+		name: 'File A',
+		checks: 4000,
+		violations: 2000
+	},
+	{
+		name: 'File B',
+		checks: 3000,
+		violations: 1400
+	},
+	{
+		name: 'File C',
+		checks: 2000,
+		violations: 1000
+	},
+	{
+		name: 'File D',
+		checks: 2780,
+		violations: 1000
+	},
+	{
+		name: 'File E',
+		checks: 5090,
+		violations: 4800
+	},
+	{
+		name: 'File F',
+		checks: 5390,
+		violations: 3800
+	},
+	{
+		name: 'File H',
+		checks: 4000,
+		violations: 1500
+	}
+];
 
 export default async function Page() {
 	const FILE_TYPE = "video";
@@ -11,7 +50,12 @@ export default async function Page() {
 	return (
 		<div>
 			<PageTitle title="video-protection" />
-			<ProtectionSummary />
+			<div className="flex justify-between flex-wrap gap-8">
+				<ProtectionSummary />
+				<div className="protection-overview grow">
+					<StackedBarChart data={data} />
+				</div>
+			</div>
 			<UploadSectionFile fileType={FILE_TYPE} allowedExtensions={file_extension} maxFileSize={max_file_size} />
 			<FilesTable />
 		</div>

src/app/components/StackedBarChart.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { useTranslations } from 'next-intl';
 import { BarChart, Bar, Cell, XAxis, Tooltip } from 'recharts';
 
@@ -139,47 +141,65 @@ export const StackedBarChart = ({ data }: Files) => {
 	};
 
 	return (
-		<BarChart
-			style={{ width: '100%', maxWidth: '600px', maxHeight: '210px', aspectRatio: 1.618 }}
-			responsive
-			data={data}
-			barCategoryGap={15}
-			margin={{
-				top: 20,
-				right: 0,
-				left: 0,
-				bottom: 5,
-			}}
-		>
-			{/* <Tooltip /> */}
-			<XAxis
-				dataKey="name"
-				stroke="#fff"
-				fontSize={12}
-				axisLine={false}
-			/>
-			<Bar
-				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={'#fff'} />
-				))}
-			</Bar>
-			<Bar
-				dataKey="violations"
-				stackId="b"
-				label={{ position: 'top', fill: '#fff', fontSize: 12 }}
-				radius={5}
-				shape={renderBarWithTopBorder as any}
-			>
-				{data.map((_entry, index) => (
-					<Cell key={`cell-${index}`} fill={'#f08c00'} />
-				))}
-			</Bar>
-		</BarChart>
+		<>
+			<div className="protection-stat relative">
+				<div className="stacked-bar-chart">
+					<BarChart
+						style={{ width: '100%', maxWidth: '600px', maxHeight: '210px', aspectRatio: 1.618 }}
+						responsive
+						data={data}
+						barCategoryGap={15}
+						margin={{
+							top: 20,
+							right: 0,
+							left: 0,
+							bottom: 5,
+						}}
+					>
+						{/* <Tooltip /> */}
+						<XAxis
+							dataKey="name"
+							stroke="#fff"
+							fontSize={12}
+							axisLine={false}
+						/>
+						<Bar
+							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={'#fff'} />
+							))}
+						</Bar>
+						<Bar
+							dataKey="violations"
+							stackId="b"
+							label={{ position: 'top', fill: '#fff', fontSize: 12 }}
+							radius={5}
+							shape={renderBarWithTopBorder as any}
+						>
+							{data.map((_entry, index) => (
+								<Cell key={`cell-${index}`} fill={'#f08c00'}/>
+							))}
+						</Bar>
+					</BarChart>
+				</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>
+		</>
 	);
 };

src/app/styles/pages-styles.scss

@@ -78,10 +78,27 @@
 		justify-content: center;
 		align-items: center;
 
+		&.total-checks,
+		&.total-files {
+			display: grid;
+			grid-template-columns: 1fr 1.5fr;
+			gap: 0 10px;
+
+			.protection-stat-value {
+				justify-self: end;
+				padding-right: 10px;
+				padding-left: 10px;
+			}
+
+			.protection-stat-label {
+				text-align: start;
+			}
+		}
+
 		&-row {
 			display: flex;
 			align-items: center;
-			justify-content: start;
+			justify-content: center;
 			gap: 10px;
 			width: 100%;
 		}
@@ -99,6 +116,7 @@
 		&-label {
 			font-size: 14px;
 			opacity: 0.9;
+			text-align: center;
 		}
 
 		&-total-info {
@@ -150,6 +168,11 @@
 				transition: all 0.3s ease;
 			}
 		}
+
+		&:has(.stacked-bar-chart) {
+			height: 100%;
+			padding-left: 100px;
+		}
 	}
 
 	&-switch {
@@ -157,6 +180,10 @@
 		right: 10px;
 		top: 10px;
 	}
+
+	&:has(.stacked-bar-chart) {
+		padding: 0;
+	}
 }
 
 .stats-wrapper {

src/app/ui/dashboard/protection-overview.tsx

@@ -39,7 +39,7 @@ export default function ProtectionOverview() {
 							<div className="protection-stat-label">{t('total-files')}</div>
 						</div>
 
-						<div className="protection-stat total-checks">
+						{/* 						<div className="protection-stat total-checks">
 							<div className="protection-stat-row">
 								<div className="protection-stat-value">0</div>
 								<div className="protection-stat-label">{t('check')}</div>
@@ -48,6 +48,13 @@ export default function ProtectionOverview() {
 								<div className="protection-stat-value">0</div>
 								<div className="protection-stat-label">{t('violations')}</div>
 							</div>
+						</div> */}
+						<div className="protection-stat total-checks">
+							<div className="protection-stat-value">0</div>
+							<div className="protection-stat-label">{t('check')}</div>
+							<div className="protection-stat-value">0</div>
+							<div className="protection-stat-label">{t('violations')}</div>
+							
 						</div>
 					</>
 				) : (

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

@@ -1,128 +1,32 @@
 'use client'
 
-import { useState } from 'react';
-import { StackedBarChart } from '@/app/components/StackedBarChart';
 import { useTranslations } from 'next-intl';
 
-const data = [
-	{
-		name: 'File A',
-		checks: 4000,
-		violations: 2000
-	},
-	{
-		name: 'File B',
-		checks: 3000,
-		violations: 1400
-	},
-	{
-		name: 'File C',
-		checks: 2000,
-		violations: 1000
-	},
-	{
-		name: 'File D',
-		checks: 2780,
-		violations: 1000
-	},
-	{
-		name: 'File E',
-		checks: 5090,
-		violations: 4800
-	},
-	{
-		name: 'File F',
-		checks: 5390,
-		violations: 3800
-	},
-	{
-		name: 'File H',
-		checks: 4000,
-		violations: 1500
-	}
-];
-
 export default function ProtectionSummary() {
-	const [isOpen, setIsOpen] = useState(false);
 	const t = useTranslations('Global');
 
 	return (
-		<div className="protection-overview">
+		<div className="protection-overview grow">
 			<h3>{t('protecting-your-content')}</h3>
 			<p>{t('current-status-of')}</p>
-			<div className={`protection-stats ${isOpen ? "opened" : ""}`}>
+			<div className="protection-stats">
 				<div className="protection-stat total-files">
 					<div className="protection-stat-value">0</div>
 					<div className="protection-stat-label">{t('total-files')}</div>
 				</div>
-
 				<div className="protection-stat total-checks">
-					{isOpen ? (
-						<>
-							<div className="protection-stat-value">0</div>
-							<div className="protection-stat-label">
-								{t('size')}
-							</div>
-						</>
-					) :
-						<>
-							<div className="protection-stat-row">
-								<div className="protection-stat-value">0</div>
-								<div className="protection-stat-label">{t('check')}</div>
-							</div>
-							<div className="protection-stat-row">
-								<div className="protection-stat-value">0</div>
-								<div className="protection-stat-label">{t('violations')}</div>
-							</div>
-						</>
-					}
+					<div className="protection-stat-value">0</div>
+					<div className="protection-stat-label">{t('check')}</div>
+					<div className="protection-stat-value">0</div>
+					<div className="protection-stat-label">{t('violations')}</div>
 				</div>
-				{isOpen ? (
-					<div className="protection-stat total-usage relative">
-						<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 className="protection-stat total-usage">
+					<div className="protection-stat-value">0 / 0</div>
+					<div className="protection-stat-label">
+						{t('disk-space-used')}
 					</div>
-				) : (
-					<div className="protection-stat total-usage">
-						<div className="protection-stat-value">0</div>
-						<div className="protection-stat-label">
-							{t('size')}
-						</div>
-					</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>
 	)
 }