transfer stacked bart chart from overview block

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>