72 lines
2.3 KiB
TypeScript
72 lines
2.3 KiB
TypeScript
'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>
|
|
</>
|
|
)
|
|
} |