no-copy-frontend/src/app/ui/reports/reports-info.tsx

'use client'

import { useTranslations } from 'next-intl';
import {useUserFilesInfo} from '@/app/hooks/react-query/useUserFilesInfo';

export default function ReportsInfo() {
	const t = useTranslations("Global");


	const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();

	return (
		<div className="dashboard-files-info">
			<div className="type-card images">
				<div className="stat-type">
					{t('all-content')}
				</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?.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?.total.check ? filesInfo?.total.check : 0}</div>
			</div>

			<div className="type-card scripts">
				<div className="stat-type">
					{t('efficiency')}
				</div>
				<div className="stat-value">100%</div>
			</div>
		</div>
	)
}