refactor userFilesInfo query

src/app/ui/reports/reports-info.tsx

@@ -1,23 +1,13 @@
 'use client'
 
 import { useTranslations } from 'next-intl';
-import { useQuery } from '@tanstack/react-query';
-import { getUserFilesInfo } from '@/app/actions/action';
-import {convertBytes} from '@/app/lib/convertBytes';
-import { useEffect } from 'react';
+import {useUserFilesInfo} from '@/app/hooks/react-query/useUserFilesInfo';
 
 export default function ReportsInfo() {
 	const t = useTranslations("Global");
 
-	const {
-		data: filesInfo,
-		isLoading,
-		isError,
-		error,
-	} = useQuery({
-		queryKey: ['userFilesInfo'],
-		queryFn: getUserFilesInfo,
-	});
+
+	const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
 
 	return (
 		<div className="dashboard-files-info">
@@ -25,21 +15,21 @@ export default function ReportsInfo() {
 				<div className="stat-type">
 					{t('all-content')}
 				</div>
-				<div className="stat-value">{filesInfo?.all_files_quantity ? filesInfo?.all_files_quantity : 0}</div>
+				<div className="stat-value">{filesInfo?.total.quantity ? filesInfo?.total.quantity : 0}</div>
 			</div>
 
 			<div className="type-card videos">
 				<div className="stat-type">
 					{t('violations-few')}
 				</div>
-				<div className="stat-value">{filesInfo?.all_files_violation ? filesInfo?.all_files_violation : 0}</div>
+				<div className="stat-value">{filesInfo?.total.violation ? filesInfo?.total.violation : 0}</div>
 			</div>
 
 			<div className="type-card audio">
 				<div className="stat-type">
 					{t('monitoring')}
 				</div>
-				<div className="stat-value">{filesInfo?.all_files_check ? filesInfo?.all_files_check : 0}</div>
+				<div className="stat-value">{filesInfo?.total.check ? filesInfo?.total.check : 0}</div>
 			</div>
 
 			<div className="type-card scripts">