fix diagram

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

@@ -15,6 +15,10 @@ type FilesInfo = {
 	imageQuantity: number;
 	videoQuantity: number;
 	audioQuantity: number;
+	imageSize: number;
+	videoSize: number;
+	audioSize: number;
+	documentSize: number;
 };
 
 
@@ -42,7 +46,11 @@ export default function ProtectionOverview() {
 		all_files_quantity: number,
 		images_quantity: number,
 		videos_quantity: number,
-		audios_quantity: number
+		audios_quantity: number,
+		images_size: number,
+		videos_size: number,
+		audios_size: number,
+		documents_size: number,
 	}, Error, FilesInfo>({
 		queryKey: ['userFilesInfo'],
 		queryFn: getUserFilesInfo,
@@ -54,6 +62,10 @@ export default function ProtectionOverview() {
 					imageQuantity: 0,
 					videoQuantity: 0,
 					audioQuantity: 0,
+					imageSize: 0,
+					videoSize: 0,
+					audioSize: 0,
+					documentSize: 0,
 				}
 			}
 
@@ -63,6 +75,10 @@ export default function ProtectionOverview() {
 				imageQuantity: data.images_quantity,
 				videoQuantity: data.videos_quantity,
 				audioQuantity: data.audios_quantity,
+				imageSize: data.images_size,
+				videoSize: data.videos_size,
+				audioSize: data.audios_size,
+				documentSize: data.documents_size,
 			}
 		},
 	});
@@ -71,17 +87,17 @@ export default function ProtectionOverview() {
 		setFilesCount([
 			{
 				name: 'images',
-				value: filesInfo?.imageQuantity ? filesInfo?.imageQuantity : 0,
+				value: filesInfo?.imageSize ? filesInfo?.imageSize : 0,
 				color: '#f08c00'
 			},
 			{
 				name: 'videos',
-				value: filesInfo?.videoQuantity ? filesInfo?.videoQuantity : 0,
+				value: filesInfo?.videoSize ? filesInfo?.videoSize : 0,
 				color: '#2f9e44'
 			},
 			{
 				name: 'audios',
-				value: filesInfo?.audioQuantity ? filesInfo?.audioQuantity : 0,
+				value: filesInfo?.audioSize ? filesInfo?.audioSize : 0,
 				color: '#1971c2'
 			},
 		])

src/app/ui/my-content/my-content-pie-chart.tsx

@@ -4,7 +4,7 @@ import { PieChartComponent } from '@/app/components/PieChartComponent';
 import { useQuery } from '@tanstack/react-query';
 import { getUserFilesInfo } from '@/app/actions/action';
 import { useState, useEffect } from 'react';
-import {convertBytes} from '@/app/lib/convertBytes';
+import { convertBytes } from '@/app/lib/convertBytes';
 
 
 type FilesInfo = {
@@ -14,6 +14,10 @@ type FilesInfo = {
 	videoQuantity: number;
 	audioQuantity: number;
 	documentQuantity: number;
+	imageSize: number;
+	videoSize: number;
+	audioSize: number;
+	documentSize: number;
 };
 
 export default function MyContentPieChart() {
@@ -36,6 +40,10 @@ export default function MyContentPieChart() {
 		videos_quantity: number,
 		audios_quantity: number,
 		documents_quantity: number,
+		images_size: number,
+		videos_size: number,
+		audios_size: number,
+		documents_size: number,
 	}, Error, FilesInfo>({
 		queryKey: ['userFilesInfo'],
 		queryFn: getUserFilesInfo,
@@ -47,7 +55,11 @@ export default function MyContentPieChart() {
 					imageQuantity: 0,
 					videoQuantity: 0,
 					audioQuantity: 0,
-					documentQuantity: 0
+					documentQuantity: 0,
+					imageSize: 0,
+					videoSize: 0,
+					audioSize: 0,
+					documentSize: 0,
 				}
 			}
 
@@ -58,6 +70,10 @@ export default function MyContentPieChart() {
 				videoQuantity: data.videos_quantity,
 				audioQuantity: data.audios_quantity,
 				documentQuantity: data.documents_quantity,
+				imageSize: data.images_size,
+				videoSize: data.videos_size,
+				audioSize: data.audios_size,
+				documentSize: data.documents_size,
 			}
 		},
 	});
@@ -66,22 +82,22 @@ export default function MyContentPieChart() {
 		setFilesCount([
 			{
 				name: 'images',
-				value: filesInfo?.imageQuantity ? filesInfo?.imageQuantity : 0,
+				value: filesInfo?.imageSize ? filesInfo?.imageSize : 0,
 				color: '#f08c00'
 			},
 			{
 				name: 'videos',
-				value: filesInfo?.videoQuantity ? filesInfo?.videoQuantity : 0,
+				value: filesInfo?.videoSize ? filesInfo?.videoSize : 0,
 				color: '#2f9e44'
 			},
 			{
 				name: 'audios',
-				value: filesInfo?.audioQuantity ? filesInfo?.audioQuantity : 0,
+				value: filesInfo?.audioSize ? filesInfo?.audioSize : 0,
 				color: '#1971c2'
 			},
 			{
 				name: 'documents',
-				value: filesInfo?.documentQuantity ? filesInfo?.documentQuantity : 0,
+				value: filesInfo?.documentSize ? filesInfo?.documentSize : 0,
 				color: '#a561e6'
 			},
 		])