change ReportsInfo styles

This commit is contained in:
smanylov
2026-02-19 18:14:39 +07:00
parent c7c78e303c
commit 22bc8fdcbe
2 changed files with 49 additions and 33 deletions
+37 -22
View File
@@ -1,7 +1,8 @@
'use client'
import { useTranslations } from 'next-intl';
import {useUserFilesInfo} from '@/app/hooks/react-query/useUserFilesInfo';
import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
import {IconDocument, IconSearch, IconWarning, IconGraph} from '@/app/ui/icons/icons';
export default function ReportsInfo() {
const t = useTranslations("Global");
@@ -10,34 +11,48 @@ export default function ReportsInfo() {
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 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-value">{filesInfo?.total.quantity ? filesInfo?.total.quantity : 0}</div>
</div>
<div className="type-card videos">
<div className="stat-type">
{t('violations-few')}
<div className="stat-card protected" data-icon="">
<div className="stat-header">
<div className="stat-icon">
<IconWarning />
</div>
</div>
<div className="stat-value">{filesInfo?.total.violation ? filesInfo?.total.violation : 0}</div>
<div className="stat-label">{t('violations-few')}</div>
</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 className="stat-card checks" data-icon="">
<div className="stat-header">
<div className="stat-icon">
<IconSearch />
</div>
</div>
<div className="stat-value">{filesInfo?.total.check ? filesInfo?.total.check : 0}</div>
<div className="stat-label">{t('monitoring')}</div>
</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 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 className="stat-value">100%</div>
</div>
</div>
</>
)
}