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';
import { IconDocument, IconSearch, IconWarning, IconGraph } from '@/app/ui/icons/icons';
import { useViolationStatistic } from '@/app/hooks/react-query/useViolationStatistic';
import { useMonitoringCount } from '@/app/hooks/react-query/useMonitoringCount';

export default function ReportsInfo() {
	const t = useTranslations("Global");
	const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
	const { data: violationStatistic } = useViolationStatistic();
	const { data: monitoringCount, isLoading: isLoadingMonitoringCount } = useMonitoringCount();

	return (
		<>
			<div className="my-content-stats-overview">
				<div className="stat-card files" data-icon="">
					<div className="stat-header">
						<div className="stat-icon">
							<IconDocument />
						</div>
					</div>
					<div className="stat-value">{filesInfo?.total.quantity ? filesInfo?.total.quantity : 0}</div>
					<div className="stat-label">{t('all-content')}</div>
				</div>

				<div className="stat-card protected" data-icon="">
					<div className="stat-header">
						<div className="stat-icon">
							<IconWarning />
						</div>
					</div>
					<div className="stat-value">{violationStatistic?.total_violations ?? 0}</div>
					<div className="stat-label">{t('matches')}</div>
				</div>

				<div className="stat-card checks" data-icon="">
					<div className="stat-header">
						<div className="stat-icon">
							<IconSearch />
						</div>
					</div>
					<div className="stat-value">
						<div
							className="loading-placeholder start"
						>
							{isLoadingMonitoringCount ? (
								<div className="loading-animation">
									<div className="global-spinner" />
								</div>
							) : (
								`${monitoringCount?.day}/${monitoringCount?.weekly}/${monitoringCount?.month}`
							)}
						</div>
					</div>
					<div className="stat-label">{t('monitoring')} {t('every')} {t('day')}/ {t('week_accusative')}/ {t('month')}</div>
				</div>

				<div className="stat-card storage" data-icon="">
					<div className="stat-header">
						<div className="stat-icon">
							<IconGraph />
						</div>
					</div>
					<div className="stat-value">100%</div>
					<div className="stat-label">{t('efficiency')}</div>
				</div>
			</div>
		</>
	)
}