add reports-info

src/app/[locale]/pages/reports/page.tsx

@@ -5,12 +5,14 @@ import AnalyticsCardMonth from '@/app/ui/reports/analytics-card-month';
 import AnalyticsCardGeography from '@/app/ui/reports/analytics-carв-geography';
 import ActivityByContentType from '@/app/ui/reports/activity-by-content-type';
 import PageTitle from '@/app/ui/page-title';
+import ReportsInfo from '@/app/ui/reports/reports-info';
 
 export default function Page() {
 	return (
 		<div>
 			<PageTitle title="reports-and-analytics" />
-			<StatsGrid />
+			{/* <StatsGrid /> */}
+			<ReportsInfo />
 			<ActivityByContentType />
 			<div className="analytics-grid">
 				<AnalyticsCardMonth />

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

@@ -0,0 +1,57 @@
+'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';
+
+export default function ReportsInfo() {
+	const t = useTranslations("Global");
+
+	const {
+		data: filesInfo,
+		isLoading,
+		isError,
+		error,
+	} = useQuery({
+		queryKey: ['userFilesInfo'],
+		queryFn: getUserFilesInfo,
+	});
+
+	useEffect(() => {
+		console.log(filesInfo)
+	}, [filesInfo])
+
+	return (
+		<div className="dashboard-files-info">
+			<div className="type-card images">
+				<div className="stat-type">
+					{t('all-content')}
+				</div>
+				<div className="stat-value">{filesInfo?.all_files_quantity ? filesInfo?.all_files_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>
+
+			<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>
+
+			<div className="type-card scripts">
+				<div className="stat-type">
+					{t('efficiency')}
+				</div>
+				<div className="stat-value">100%</div>
+			</div>
+		</div>
+	)
+}

src/i18n/messages/en.json

@@ -220,7 +220,10 @@
 		"remove": "Remove",
 		"start-upload": "Start upload",
 		"completed": "Completed",
-		"pending": "Pending"
+		"pending": "Pending",
+		"all-content": "All content",
+		"monitoring": "Monitoring",
+		"efficiency": "Efficiency"
 	},
 	"Login-register-form": {
 		"and": "and",

src/i18n/messages/ru.json

@@ -220,7 +220,10 @@
 		"remove": "Удалить",
 		"start-upload": "Начать загрузку",
 		"completed": "Завершено",
-		"pending": "В ожидании"
+		"pending": "В ожидании",
+		"all-content": "Весь контент",
+		"monitoring": "Мониторинг",
+		"efficiency": "Эффективность"
 	},
 	"Login-register-form": {
 		"and": "и",