change ReportsInfo styles
This commit is contained in:
@@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user