update user files info

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

@@ -1,29 +1,30 @@
 'use client'
 
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { PieChartComponent } from '@/app/components/PieChartComponent';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import { useClickOutside } from '@/app/hooks/useClickOutside';
 import { useQuery } from '@tanstack/react-query';
-import { getUserFilesData } from '@/app/actions/fileEntity';
-
-
-const data = [
-	{ name: 'images', value: 33, color: '#f08c00' },
-	{ name: 'videos', value: 50, color: '#2f9e44' },
-	{ name: 'audios', value: 25, color: '#1971c2' },
-];
-
+import { getUserFilesInfo } from '@/app/actions/action';
+import { convertBytes } from '@/app/lib/convertBytes';
 
 type FilesInfo = {
-	totalSize: string;
+	totalSize: number;
 	totalCount: number;
+	imageQuantity: number;
+	videoQuantity: number;
+	audioQuantity: number;
 };
 
 
 export default function ProtectionOverview() {
 	const [isOpen, setIsOpen] = useState(false);
+	const [filesCount, setFilesCount] = useState([
+		{ name: 'images', value: 0, color: '#f08c00' },
+		{ name: 'videos', value: 0, color: '#2f9e44' },
+		{ name: 'audios', value: 0, color: '#1971c2' },
+	]);
 	const t = useTranslations('Global');
 	const [openDropDownList, setOpenDropDownList] = useState(false);
 	const dropDownList = useRef(null);
@@ -37,26 +38,55 @@ export default function ProtectionOverview() {
 		isError,
 		error,
 	} = useQuery<{
-		formattedTotalSize: string,
-		totalCount: number
+		all_files_size: number,
+		all_files_quantity: number,
+		images_quantity: number,
+		videos_quantity: number,
+		audios_quantity: number
 	}, Error, FilesInfo>({
-		queryKey: ['userFilesData'],
-		queryFn: getUserFilesData,
+		queryKey: ['userFilesInfo'],
+		queryFn: getUserFilesInfo,
 		select: (data): FilesInfo => {
 			if (!data) {
 				return {
-					totalSize: '0',
-					totalCount: 0
+					totalSize: 0,
+					totalCount: 0,
+					imageQuantity: 0,
+					videoQuantity: 0,
+					audioQuantity: 0,
 				}
 			}
 
 			return {
-				totalSize: data.formattedTotalSize,
-				totalCount: (data.totalCount)
+				totalSize: data.all_files_size,
+				totalCount: data.all_files_quantity,
+				imageQuantity: data.images_quantity,
+				videoQuantity: data.videos_quantity,
+				audioQuantity: data.audios_quantity,
 			}
 		},
 	});
 
+	useEffect(() => {
+		setFilesCount([
+			{
+				name: 'images',
+				value: filesInfo?.imageQuantity ? filesInfo?.imageQuantity : 0,
+				color: '#f08c00'
+			},
+			{
+				name: 'videos',
+				value: filesInfo?.videoQuantity ? filesInfo?.videoQuantity : 0,
+				color: '#2f9e44'
+			},
+			{
+				name: 'audios',
+				value: filesInfo?.audioQuantity ? filesInfo?.audioQuantity : 0,
+				color: '#1971c2'
+			},
+		])
+	}, [filesInfo]);
+
 	return (
 		<div className="protection-overview">
 			<h3>{t('protecting-your-content')}</h3>
@@ -115,11 +145,11 @@ export default function ProtectionOverview() {
 				)}
 				{isOpen ? (
 					<div className="protection-stat total-usage">
-						<PieChartComponent data={data} />
+						<PieChartComponent data={filesCount} show={filesInfo?.totalSize ? convertBytes(filesInfo?.totalSize) : 0} />
 					</div>
 				) : (
 					<div className="protection-stat total-usage">
-						<div className="protection-stat-value">{filesInfo?.totalSize ? filesInfo?.totalSize : 0} / 0</div>
+						<div className="protection-stat-value">{filesInfo?.totalSize ? convertBytes(filesInfo?.totalSize) : 0} / 0</div>
 						<div className="protection-stat-label">
 							{t('disk-space-used')}
 						</div>

src/app/ui/dashboard/stats-grid.tsx

@@ -1,8 +1,24 @@
+'use client'
+
 import { useTranslations } from 'next-intl';
 import { IconImageFile, IconVideoFile, IconAudioFile } from '@/app/ui/icons/icons';
+import { useQuery } from '@tanstack/react-query';
+import { getUserFilesInfo } from '@/app/actions/action';
+import {convertBytes} from '@/app/lib/convertBytes';
+
 export default function StatsGrid() {
 	const t = useTranslations("Global");
 
+	const {
+		data: filesInfo,
+		isLoading,
+		isError,
+		error,
+	} = useQuery({
+		queryKey: ['userFilesInfo'],
+		queryFn: getUserFilesInfo,
+	});
+
 	return (
 		<div className="block-wrapper stats-wrapper">
 			<h3>
@@ -30,10 +46,10 @@ export default function StatsGrid() {
 					{t('images')}
 				</div>
 				<div className="stats-item second-row">
-					0
+					{filesInfo.images_quantity ? filesInfo.images_quantity : 0}
 				</div>
 				<div className="stats-item second-row">
-					0
+					{filesInfo.images_size ? convertBytes(filesInfo.images_size) : 0}
 				</div>
 				<div className="stats-item second-row">
 					0
@@ -47,10 +63,10 @@ export default function StatsGrid() {
 					{t('videos')}
 				</div>
 				<div className="stats-item">
-					0
+					{filesInfo.videos_quantity ? filesInfo.videos_quantity : 0}
 				</div>
 				<div className="stats-item">
-					0
+					{filesInfo.videos_size ? convertBytes(filesInfo.videos_size) : 0}
 				</div>
 				<div className="stats-item">
 					0
@@ -64,10 +80,10 @@ export default function StatsGrid() {
 					{t('audios')}
 				</div>
 				<div className="stats-item last-row">
-					0
+					{filesInfo.audios_quantity ? filesInfo.audios_quantity : 0}
 				</div>
 				<div className="stats-item last-row">
-					0
+					{filesInfo.audios_size ? convertBytes(filesInfo.audios_size) : 0}
 				</div>
 				<div className="stats-item last-row">
 					0