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

add animations

Browse Source
This commit is contained in:
smanylov
2026-04-09 16:11:57 +07:00
parent 1eff2d2c0a
commit 62cd597994
9 changed files with 209 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/ui/dashboard/new/dashboard-user-stats.tsx
+65 -7
View File
@@ -5,12 +5,12 @@ import { convertBytes } from '@/app/lib/convertBytes';
import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
import { useEffect } from 'react';
import { useViolationStatistic } from '@/app/hooks/react-query/useViolationStatistic';
import {IconDocument, IconSearch, IconWarning, IconGraph, IconDiscet, IconShield} from '@/app/ui/icons/icons';
import { IconDocument, IconSearch, IconWarning, IconGraph, IconDiscet, IconShield } from '@/app/ui/icons/icons';
export default function DashboardUserStats() {
const t = useTranslations("Global");
const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
const { data: violationStatistic } = useViolationStatistic();
const { data: violationStatistic, isLoading: violationStatisticLoading } = useViolationStatistic();
return (
<>
@@ -22,7 +22,19 @@ export default function DashboardUserStats() {
<IconShield />
</div>
</div>
<div className="stat-value">{filesInfo?.total.protected ? filesInfo?.total.protected : 0}</div>
<div className="stat-value">
<div
className="loading-placeholder start"
>
{isLoading ? (
<div className="loading-animation">
<div className="global-spinner" />
</div>
) : (
filesInfo?.total.protected ? filesInfo?.total.protected : 0
)}
</div>
</div>
<div className="stat-label">
{t('files-under-protection')}
</div>
@@ -34,7 +46,19 @@ export default function DashboardUserStats() {
<IconSearch />
</div>
</div>
<div className="stat-value">{filesInfo?.total.check ? filesInfo?.total.check : 0}</div>
<div className="stat-value">
<div
className="loading-placeholder start"
>
{isLoading ? (
<div className="loading-animation">
<div className="global-spinner" />
</div>
) : (
filesInfo?.total.check ? filesInfo?.total.check : 0
)}
</div>
</div>
<div className="stat-label">
{t('matches-found')}
</div>
@@ -46,7 +70,19 @@ export default function DashboardUserStats() {
<IconWarning />
</div>
</div>
<div className="stat-value">{violationStatistic?.total_violations ?? 0}</div>
<div className="stat-value">
<div
className="loading-placeholder start"
>
{violationStatisticLoading ? (
<div className="loading-animation">
<div className="global-spinner" />
</div>
) : (
violationStatistic?.total_violations ?? 0
)}
</div>
</div>
<div className="stat-label">
{t('violations')}
</div>
@@ -59,7 +95,17 @@ export default function DashboardUserStats() {
</div>
</div>
<div className="stat-value">
{filesInfo?.total.size ? convertBytes(filesInfo?.total.size) : 0}
<div
className="loading-placeholder start"
>
{isLoading ? (
<div className="loading-animation">
<div className="global-spinner" />
</div>
) : (
filesInfo?.total.size ? convertBytes(filesInfo?.total.size) : 0
)}
</div>
</div>
<div className="stat-label">
{t('disk-space-used')}
@@ -72,7 +118,19 @@ export default function DashboardUserStats() {
<IconDocument />
</div>
</div>
<div className="stat-value">{violationStatistic?.in_progress_violations ?? 0}</div>
<div className="stat-value">
<div
className="loading-placeholder start"
>
{violationStatisticLoading ? (
<div className="loading-animation">
<div className="global-spinner" />
</div>
) : (
violationStatistic?.in_progress_violations ?? 0
)}
</div>
</div>
<div className="stat-label">
{t('violations-in-progress')}
</div>
src/app/ui/my-content/new/my-content-stats-overview.tsx
+67 -13
View File
@@ -3,11 +3,13 @@
import { useTranslations } from 'next-intl';
import { convertBytes } from '@/app/lib/convertBytes';
import { IconDocument, IconShield, IconSearch, IconDiscet } from '@/app/ui/icons/icons';
import {useUserFilesInfo} from '@/app/hooks/react-query/useUserFilesInfo';
import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
import { useMonitoringStats } from '@/app/hooks/react-query/useMonitoringStats';
export default function MyContentStatsOverview() {
const t = useTranslations('Global');
const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
const { data: monitoringStats, isLoading: monitoringStatsLoading } = useMonitoringStats();
return (
<div className="my-content-stats-overview">
@@ -16,10 +18,23 @@ export default function MyContentStatsOverview() {
<div className="stat-icon">
<IconDocument />
</div>
{/* <div className="stat-trend">+0%</div> */}
</div>
<div className="stat-value">{filesInfo?.total.quantity}</div>
<div className="stat-label">Всего файлов</div>
<div className="stat-value">
<div
className="loading-placeholder start"
>
{isLoading ? (
<div className="loading-animation">
<div className="global-spinner" />
</div>
) : (
filesInfo?.total.quantity
)}
</div>
</div>
<div className="stat-label">
{t('total-files')}
</div>
</div>
<div className="stat-card protected" data-icon="">
@@ -27,10 +42,23 @@ export default function MyContentStatsOverview() {
<div className="stat-icon">
<IconShield />
</div>
{/* <div className="stat-trend">+0%</div> */}
</div>
<div className="stat-value">{filesInfo?.total.protected}</div>
<div className="stat-label">Защищено файлов</div>
<div className="stat-value">
<div
className="loading-placeholder start"
>
{isLoading ? (
<div className="loading-animation">
<div className="global-spinner" />
</div>
) : (
filesInfo?.total.protected
)}
</div>
</div>
<div className="stat-label">
{t('protected-files')}
</div>
</div>
<div className="stat-card checks" data-icon="">
@@ -38,10 +66,23 @@ export default function MyContentStatsOverview() {
<div className="stat-icon">
<IconSearch />
</div>
{/* <div className="stat-trend">+0%</div> */}
</div>
<div className="stat-value">0</div>
<div className="stat-label">Проверок защиты</div>
<div className="stat-value">
<div
className="loading-placeholder start"
>
{monitoringStatsLoading ? (
<div className="loading-animation">
<div className="global-spinner" />
</div>
) : (
monitoringStats?.total_searches ? monitoringStats?.total_searches : 0
)}
</div>
</div>
<div className="stat-label">
{t('checks')}
</div>
</div>
<div className="stat-card storage" data-icon="">
@@ -49,10 +90,23 @@ export default function MyContentStatsOverview() {
<div className="stat-icon">
<IconDiscet />
</div>
{/* <div className="stat-trend">+0%</div> */}
</div>
<div className="stat-value">{convertBytes(filesInfo?.total.size ?? 0)}</div>
<div className="stat-label">Хранилище</div>
<div className="stat-value">
<div
className="loading-placeholder start"
>
{isLoading ? (
<div className="loading-animation">
<div className="global-spinner" />
</div>
) : (
convertBytes(filesInfo?.total.size ?? 0)
)}
</div>
</div>
<div className="stat-label">
{t('storage')}
</div>
</div>
</div>
)
src/app/ui/reports/reports-info.tsx
-1
View File
@@ -42,7 +42,6 @@ export default function ReportsInfo() {
</div>
</div>
<div className="stat-value">
{/* {filesInfo?.total.check ? filesInfo?.total.check : 0} */}
{monitoringStats?.total_searches ? monitoringStats?.total_searches : 0}
</div>
<div className="stat-label">{t('monitoring')}</div>