frontdev/no-copy-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change ReportsInfo styles

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/app/ui/icons/icons.tsx
+12 -11
View File
@@ -110,17 +110,6 @@ export function IconFilter() {
</svg>
)
}
/* <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon">
<g transform="scale(0.6) translate(7, 7)">
<path fill="currentColor" d="M11 18h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1M3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1m4 6h10c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1" />
</g>
</svg> */
{/* <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g transform="scale(0.6) translate(6, 6)">
<path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13.758 19.414L9 21v-8.5L4.52 7.572A2 2 0 0 1 4 6.227V4h16v2.172a2 2 0 0 1-.586 1.414L15 12v1.5m7 8.5l-5-5m0 5l5-5" />
</g>
</svg> */}
export function IconNotification() {
return (
@@ -188,3 +177,15 @@ export function IconInfo() {
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"><path fill="currentColor" d="M11 17h2v-6h-2zm1.713-8.287Q13 8.425 13 8t-.288-.712T12 7t-.712.288T11 8t.288.713T12 9t.713-.288M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8" /></svg>
)
}
export function IconWarning() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"><path fill="currentColor" d="M1 21L12 2l11 19zm3.45-2h15.1L12 6zm8.263-1.287Q13 17.425 13 17t-.288-.712T12 16t-.712.288T11 17t.288.713T12 18t.713-.288M11 15h2v-5h-2zm1-2.5" /></svg>
)
}
export function IconGraph() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" className="icon"><path fill="currentColor" d="m16 11.78l4.24-7.33l1.73 1l-5.23 9.05l-6.51-3.75L5.46 19H22v2H2V3h2v14.54L9.5 8z"/></svg>
)
}
src/app/ui/reports/reports-info.tsx
+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>
</>
)
}