refactor userFilesInfo query

This commit is contained in:
smanylov
2026-02-13 12:50:58 +07:00
parent e36eb4d422
commit d584e68e3a
17 changed files with 232 additions and 432 deletions
@@ -1,22 +1,12 @@
'use client'
import { useTranslations } from 'next-intl';
import { useQuery } from '@tanstack/react-query';
import { getUserFilesInfo } from '@/app/actions/action';
import {convertBytes} from '@/app/lib/convertBytes';
import {useUserFilesInfo} from '@/app/hooks/react-query/useUserFilesInfo';
export default function DashboardFilesInfo() {
const t = useTranslations("Global");
const {
data: filesInfo,
isLoading,
isError,
error,
} = useQuery({
queryKey: ['userFilesInfo'],
queryFn: getUserFilesInfo,
});
const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
return (
<div className="dashboard-files-info">
@@ -24,20 +14,20 @@ export default function DashboardFilesInfo() {
<div className="stat-type">
{t('images')}
</div>
<div className="stat-value">{filesInfo?.images_quantity ? filesInfo?.images_quantity : 0}</div>
<div className="stat-value">{filesInfo?.images.quantity ? filesInfo?.images.quantity : 0}</div>
<div className="stat-label">{t('your-image')}</div>
<div className="type-card-stats">
<div className="type-card-stat-row">
<span className="type-card-stat-label">{t('size')}</span>
<span className="type-card-stat-value">{filesInfo?.images_size ? convertBytes(filesInfo?.images_size) : 0}</span>
<span className="type-card-stat-value">{filesInfo?.images.size ? convertBytes(filesInfo?.images.size) : 0}</span>
</div>
<div className="type-card-stat-row">
<span className="type-card-stat-label">{t('PROTECTED')}</span>
<span className="type-card-stat-value">{filesInfo?.protected_image_files_count ? filesInfo?.protected_image_files_count : 0}</span>
<span className="type-card-stat-value">{filesInfo?.images.protected ? filesInfo?.images.protected : 0}</span>
</div>
<div className="type-card-stat-row">
<span className="type-card-stat-label">{t('violations')}</span>
<span className="type-card-stat-value">{filesInfo?.images_violations ? filesInfo?.images_violations : 0}</span>
<span className="type-card-stat-value">{filesInfo?.images.violation ? filesInfo?.images.violation : 0}</span>
</div>
</div>
</div>
@@ -46,20 +36,20 @@ export default function DashboardFilesInfo() {
<div className="stat-type">
{t('videos')}
</div>
<div className="stat-value">{filesInfo?.videos_quantity ? filesInfo?.videos_quantity : 0}</div>
<div className="stat-value">{filesInfo?.videos.quantity ? filesInfo?.videos.quantity : 0}</div>
<div className="stat-label">{t('your-videos')}</div>
<div className="type-card-stats">
<div className="type-card-stat-row">
<span className="type-card-stat-label">{t('size')}</span>
<span className="type-card-stat-value">{filesInfo?.videos_size ? convertBytes(filesInfo?.videos_size) : 0}</span>
<span className="type-card-stat-value">{filesInfo?.videos.size ? convertBytes(filesInfo?.videos.size) : 0}</span>
</div>
<div className="type-card-stat-row">
<span className="type-card-stat-label">{t('PROTECTED')}</span>
<span className="type-card-stat-value">{filesInfo?.protected_video_files_count ? filesInfo?.protected_video_files_count : 0}</span>
<span className="type-card-stat-value">{filesInfo?.videos.protected ? filesInfo?.videos.protected : 0}</span>
</div>
<div className="type-card-stat-row">
<span className="type-card-stat-label">{t('violations')}</span>
<span className="type-card-stat-value">{filesInfo?.videos_violations ? filesInfo?.videos_violations : 0}</span>
<span className="type-card-stat-value">{filesInfo?.videos.violation ? filesInfo?.videos.violation : 0}</span>
</div>
</div>
</div>
@@ -68,20 +58,20 @@ export default function DashboardFilesInfo() {
<div className="stat-type">
{t('audios')}
</div>
<div className="stat-value">{filesInfo?.audios_quantity ? filesInfo?.audios_quantity : 0}</div>
<div className="stat-value">{filesInfo?.audios.quantity ? filesInfo?.audios.quantity : 0}</div>
<div className="stat-label">{t('your-audios')}</div>
<div className="type-card-stats">
<div className="type-card-stat-row">
<span className="type-card-stat-label">{t('size')}</span>
<span className="type-card-stat-value">{filesInfo?.audios_size ? convertBytes(filesInfo?.audios_size) : 0}</span>
<span className="type-card-stat-value">{filesInfo?.audios.size ? convertBytes(filesInfo?.audios.size) : 0}</span>
</div>
<div className="type-card-stat-row">
<span className="type-card-stat-label">{t('PROTECTED')}</span>
<span className="type-card-stat-value">{filesInfo?.protected_audio_files_count ? filesInfo?.protected_audio_files_count : 0}</span>
<span className="type-card-stat-value">{filesInfo?.audios.protected ? filesInfo?.audios.protected : 0}</span>
</div>
<div className="type-card-stat-row">
<span className="type-card-stat-label">{t('violations')}</span>
<span className="type-card-stat-value">{filesInfo?.audios_violations ? filesInfo?.audios_violations : 0}</span>
<span className="type-card-stat-value">{filesInfo?.audios.violation ? filesInfo?.audios.violation : 0}</span>
</div>
</div>
</div>
@@ -90,20 +80,20 @@ export default function DashboardFilesInfo() {
<div className="stat-type">
{t('documents')}
</div>
<div className="stat-value">{filesInfo?.documents_quantity ? filesInfo?.documents_quantity : 0}</div>
<div className="stat-value">{filesInfo?.documents.quantity ? filesInfo?.documents.quantity : 0}</div>
<div className="stat-label">{t('your-documents')}</div>
<div className="type-card-stats">
<div className="type-card-stat-row">
<span className="type-card-stat-label">{t('size')}</span>
<span className="type-card-stat-value">{filesInfo?.documents_check ? convertBytes(filesInfo?.documents_check) : 0}</span>
<span className="type-card-stat-value">{filesInfo?.documents.check? convertBytes(filesInfo?.documents.check) : 0}</span>
</div>
<div className="type-card-stat-row">
<span className="type-card-stat-label">{t('PROTECTED')}</span>
<span className="type-card-stat-value">{filesInfo?.documents_check ? filesInfo?.documents_check : 0}</span>
<span className="type-card-stat-value">{filesInfo?.documents.protected ? filesInfo?.documents.protected : 0}</span>
</div>
<div className="type-card-stat-row">
<span className="type-card-stat-label">{t('violations')}</span>
<span className="type-card-stat-value">{filesInfo?.documents_violations ? filesInfo?.documents_violations : 0}</span>
<span className="type-card-stat-value">{filesInfo?.documents.violation ? filesInfo?.documents.violation : 0}</span>
</div>
</div>
</div>
@@ -1,29 +1,19 @@
'use client'
import { useTranslations } from 'next-intl';
import { useQuery } from '@tanstack/react-query';
import { getUserFilesInfo } from '@/app/actions/action';
import {convertBytes} from '@/app/lib/convertBytes';
import {useUserFilesInfo} from '@/app/hooks/react-query/useUserFilesInfo';
export default function DashboardUserStats() {
const t = useTranslations("Global");
const {
data: filesInfo,
isLoading,
isError,
error,
} = useQuery({
queryKey: ['userFilesInfo'],
queryFn: getUserFilesInfo,
});
const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
return (
<div className="dashboard-user-stats">
<div className="stat-card projects">
<div className="stat-type">ЗАЩИЩЁННЫЕ ФАЙЛЫ</div>
<div className="stat-value">{filesInfo?.protected_files_count ? filesInfo?.protected_files_count : 0}</div>
<div className="stat-value">{filesInfo?.total.protected ? filesInfo?.total.protected : 0}</div>
<div className="stat-label">Файлов под защитой</div>
<div className="stat-icon">🛡</div>
</div>
@@ -37,7 +27,7 @@ export default function DashboardUserStats() {
<div className="stat-card violations">
<div className="stat-type">НАРУШЕНИЯ</div>
<div className="stat-value">{filesInfo?.all_files_violations ? filesInfo?.all_files_violations : 0}</div>
<div className="stat-value">{filesInfo?.total.violation ? filesInfo?.total.violation : 0}</div>
<div className="stat-label">Требуют внимания</div>
<div className="stat-icon"></div>
</div>
@@ -45,7 +35,7 @@ export default function DashboardUserStats() {
<div className="stat-card storage">
<div className="stat-type">ХРАНИЛИЩЕ</div>
<div className="stat-value">
{filesInfo?.all_files_size ? convertBytes(filesInfo?.all_files_size) : 0}
{filesInfo?.total.size ? convertBytes(filesInfo?.total.size) : 0}
</div>
<div className="stat-label">Использовано места</div>
<div className="stat-icon">💾</div>
@@ -1,20 +1,11 @@
'use client'
import { useQuery } from '@tanstack/react-query';
import { getUserFilesInfo } from '@/app/actions/action';
import { convertBytes } from '@/app/lib/convertBytes';
import { getProcents } from '@/app/lib/getProcents';
import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
export default function DahboardLimitsSection() {
const {
data: filesInfo,
isLoading,
isError,
error,
} = useQuery({
queryKey: ['userFilesInfo'],
queryFn: getUserFilesInfo,
});
const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
return (
<div className="dashboard-limits-section">
@@ -26,13 +17,13 @@ export default function DahboardLimitsSection() {
<span>🔍</span>
<span>Проверки</span>
</div>
<div className="limit-value">{filesInfo?.all_files_check ? filesInfo?.all_files_check : 0} / 10,000</div>
<div className="limit-value">{filesInfo?.total.check ? filesInfo?.total.check : 0} / 10,000</div>
</div>
<div className="progress-bar-container">
<div className="progress-bar low" style={{ width: '0%' }}></div>
</div>
<div className="progress-bar-value">
{getProcents(filesInfo?.all_files_check, 10000)}%
{getProcents(filesInfo?.total.check, 10000)}%
</div>
</div>
@@ -42,13 +33,13 @@ export default function DahboardLimitsSection() {
<span>💾</span>
<span>Хранилище</span>
</div>
<div className="limit-value">{filesInfo?.all_files_size ? convertBytes(filesInfo?.all_files_size) : 0} / 1,024 МБ</div>
<div className="limit-value">{filesInfo?.total.size ? convertBytes(filesInfo?.total.size) : 0} / 1,024 МБ</div>
</div>
<div className="progress-bar-container">
<div className="progress-bar medium" style={{ width: `${getProcents(filesInfo?.all_files_size, 1000000000)}%` }}></div>
<div className="progress-bar medium" style={{ width: `${getProcents(filesInfo?.total.size, 1000000000)}%` }}></div>
</div>
<div className="progress-bar-value">
{getProcents(filesInfo?.all_files_size, 1000000000)}%
{getProcents(filesInfo?.total.size, 1000000000)}%
</div>
</div>
<div className="limit-item">
@@ -57,13 +48,13 @@ export default function DahboardLimitsSection() {
<span>📁</span>
<span>Файлы</span>
</div>
<div className="limit-value">{filesInfo?.all_files_quantity ? filesInfo?.all_files_quantity : 0} / 500</div>
<div className="limit-value">{filesInfo?.total.quantity ? filesInfo?.total.quantity : 0} / 500</div>
</div>
<div className="progress-bar-container">
<div className="progress-bar medium" style={{ width: `${getProcents(filesInfo?.all_files_quantity, 500)}%` }}></div>
<div className="progress-bar medium" style={{ width: `${getProcents(filesInfo?.total.quantity, 500)}%` }}></div>
</div>
<div className="progress-bar-value">
{getProcents(filesInfo?.all_files_quantity, 500)}%
{getProcents(filesInfo?.total.quantity, 500)}%
</div>
</div>
</div>
+11 -70
View File
@@ -5,23 +5,9 @@ import { PieChartComponent } from '@/app/components/PieChartComponent';
import { useTranslations, useLocale } from 'next-intl';
import Link from 'next/link';
import { useClickOutside } from '@/app/hooks/useClickOutside';
import { useQuery } from '@tanstack/react-query';
import { getUserFilesInfo } from '@/app/actions/action';
import { convertBytes } from '@/app/lib/convertBytes';
import { pluralize } from '@/app/lib/pluralize';
type FilesInfo = {
totalSize: number;
totalCount: number;
imageQuantity: number;
videoQuantity: number;
audioQuantity: number;
imageSize: number;
videoSize: number;
audioSize: number;
documentSize: number;
};
import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
export default function ProtectionOverview() {
const [isOpen, setIsOpen] = useState(false);
@@ -42,68 +28,23 @@ export default function ProtectionOverview() {
openDropDownList
);
const {
data: filesInfo,
isLoading,
isError,
error,
} = useQuery<{
all_files_size: number,
all_files_quantity: number,
images_quantity: number,
videos_quantity: number,
audios_quantity: number,
images_size: number,
videos_size: number,
audios_size: number,
documents_size: number,
}, Error, FilesInfo>({
queryKey: ['userFilesInfo'],
queryFn: getUserFilesInfo,
select: (data): FilesInfo => {
if (!data) {
return {
totalSize: 0,
totalCount: 0,
imageQuantity: 0,
videoQuantity: 0,
audioQuantity: 0,
imageSize: 0,
videoSize: 0,
audioSize: 0,
documentSize: 0,
}
}
return {
totalSize: data.all_files_size,
totalCount: data.all_files_quantity,
imageQuantity: data.images_quantity,
videoQuantity: data.videos_quantity,
audioQuantity: data.audios_quantity,
imageSize: data.images_size,
videoSize: data.videos_size,
audioSize: data.audios_size,
documentSize: data.documents_size,
}
},
});
const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
useEffect(() => {
setFilesCount([
{
name: 'images-few',
value: filesInfo?.imageSize ? filesInfo?.imageSize : 0,
value: filesInfo?.images.size ? filesInfo?.images.size : 0,
color: '#f08c00'
},
{
name: 'videos',
value: filesInfo?.videoSize ? filesInfo?.videoSize : 0,
value: filesInfo?.videos.size ? filesInfo?.videos.size : 0,
color: '#2f9e44'
},
{
name: 'audios',
value: filesInfo?.audioSize ? filesInfo?.audioSize : 0,
value: filesInfo?.audios.size ? filesInfo?.audios.size : 0,
color: '#1971c2'
},
])
@@ -134,14 +75,14 @@ export default function ProtectionOverview() {
<div className={`protection-stats ${isOpen ? "opened" : ""}`}>
{filesInfo?.totalCount ? (
{filesInfo?.total.quantity ? (
<>
<div className="protection-stat total-files">
<span className="protection-stat-value">
{filesInfo?.totalCount ? filesInfo?.totalCount : 0}
{filesInfo?.total.quantity ? filesInfo?.total.quantity : 0}
</span>
<span className="protection-stat-label">
{pluralizeFiles(filesInfo?.totalCount || 0)}
{pluralizeFiles(filesInfo?.total.quantity || 0)}
</span>
</div>
<div className="protection-stat total-checks">
@@ -196,18 +137,18 @@ export default function ProtectionOverview() {
)}
{isOpen ? (
<div className="protection-stat total-usage">
<PieChartComponent data={filesCount} show={filesInfo?.totalSize ? convertBytes(filesInfo?.totalSize) : 0} />
<PieChartComponent data={filesCount} show={filesInfo?.total.size ? convertBytes(filesInfo?.total.size) : 0} />
</div>
) : (
<div className="protection-stat total-usage">
<div className="protection-stat-value">{filesInfo?.totalSize ? convertBytes(filesInfo?.totalSize) : 0} / 0</div>
<div className="protection-stat-value">{filesInfo?.total.size ? convertBytes(filesInfo?.total.size) : 0} / 0</div>
<div className="protection-stat-label">
{t('disk-space-used')}
</div>
</div>
)}
</div>
{!!filesInfo?.totalCount && (
{!!filesInfo?.total.quantity && (
<button
className="protection-overview-switch cursor-pointer"
onClick={() => {
+9 -19
View File
@@ -2,22 +2,12 @@
import { useTranslations } from 'next-intl';
import { IconImageFile, IconVideoFile, IconAudioFile } from '@/app/ui/icons/icons';
import { useQuery } from '@tanstack/react-query';
import { getUserFilesInfo } from '@/app/actions/action';
import {convertBytes} from '@/app/lib/convertBytes';
import { convertBytes } from '@/app/lib/convertBytes';
import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
export default function StatsGrid() {
const t = useTranslations("Global");
const {
data: filesInfo,
isLoading,
isError,
error,
} = useQuery({
queryKey: ['userFilesInfo'],
queryFn: getUserFilesInfo,
});
const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
return (
<div className="block-wrapper stats-wrapper">
@@ -46,10 +36,10 @@ export default function StatsGrid() {
{t('images')}
</div>
<div className="stats-item second-row">
{filesInfo?.images_quantity ? filesInfo?.images_quantity : 0}
{filesInfo?.images.quantity ? filesInfo?.images.quantity : 0}
</div>
<div className="stats-item second-row">
{filesInfo?.images_size ? convertBytes(filesInfo?.images_size) : 0}
{filesInfo?.images.size ? convertBytes(filesInfo?.images.size) : 0}
</div>
<div className="stats-item second-row">
0
@@ -63,10 +53,10 @@ export default function StatsGrid() {
{t('videos')}
</div>
<div className="stats-item">
{filesInfo?.videos_quantity ? filesInfo?.videos_quantity : 0}
{filesInfo?.videos.quantity ? filesInfo?.videos.quantity : 0}
</div>
<div className="stats-item">
{filesInfo?.videos_size ? convertBytes(filesInfo?.videos_size) : 0}
{filesInfo?.videos.size ? convertBytes(filesInfo?.videos.size) : 0}
</div>
<div className="stats-item">
0
@@ -80,10 +70,10 @@ export default function StatsGrid() {
{t('audios')}
</div>
<div className="stats-item last-row">
{filesInfo?.audios_quantity ? filesInfo?.audios_quantity : 0}
{filesInfo?.audios.quantity ? filesInfo?.audios.quantity : 0}
</div>
<div className="stats-item last-row">
{filesInfo?.audios_size ? convertBytes(filesInfo?.audios_size) : 0}
{filesInfo?.audios.size ? convertBytes(filesInfo?.audios.size) : 0}
</div>
<div className="stats-item last-row">
0
@@ -1,83 +1,36 @@
'use client'
import { useTranslations } from 'next-intl';
import { useQuery } from '@tanstack/react-query';
import { getUserFilesInfo } from '@/app/actions/action';
import { convertBytes } from '@/app/lib/convertBytes';
type FilesInfo = {
totalSize: number;
totalCount: number;
totalProtected: number;
};
import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
export default function ProtectionStatistic({ fileType }: { fileType: string }) {
const t = useTranslations('Global');
const getFileTypeFields = (fileType: string): { totalSize: string, totalCount: string, totalProtected: string } => {
const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
const getFileTypeData = (fileType: string) => {
switch (fileType) {
case 'image':
return {
totalSize: 'images_size',
totalCount: 'images_quantity',
totalProtected: 'protected_image_files_count'
};
return filesInfo?.images;
case 'video':
return {
totalSize: 'videos_size',
totalCount: 'videos_quantity',
totalProtected: 'protected_video_files_count'
};
return filesInfo?.videos;
case 'audio':
return {
totalSize: 'audios_size',
totalCount: 'audios_quantity',
totalProtected: 'protected_audio_files_count'
};
return filesInfo?.audios;
case 'document':
return filesInfo?.documents;
default:
return {
totalSize: 'all_files_size',
totalCount: 'all_files_quantity',
totalProtected: 'protected_files_count'
};
return filesInfo?.total;
}
};
const {
data: filesInfo,
isLoading,
isError,
error,
} = useQuery<{
all_files_size: number,
all_files_quantity: number
}, Error, FilesInfo>({
queryKey: ['userFilesInfo'],
queryFn: getUserFilesInfo,
select: (data): FilesInfo => {
if (!data) {
return {
totalSize: 0,
totalCount: 0,
totalProtected: 0
}
}
const fields = getFileTypeFields(fileType);
return {
totalSize: data[fields.totalSize as keyof typeof data],
totalCount: data[fields.totalCount as keyof typeof data],
totalProtected: data[fields.totalProtected as keyof typeof data]
}
}
});
const currentData = getFileTypeData(fileType);
return (
<div className="protection-statistic">
<div className="protection-statistic-stat-card">
<div className="protection-statistic-stat-number">
{filesInfo?.totalProtected ? filesInfo.totalProtected : 0}
{currentData?.protected ?? 0}
</div>
<div className="protection-statistic-stat-label">{t(`${fileType}-protected`)}</div>
</div>
@@ -87,7 +40,7 @@ export default function ProtectionStatistic({ fileType }: { fileType: string })
</div>
<div className="protection-statistic-stat-card">
<div className="protection-statistic-stat-number">
{filesInfo?.totalSize ? convertBytes(filesInfo?.totalSize) : 0}
{convertBytes(currentData?.size ?? 0)}
</div>
<div className="protection-statistic-stat-label">{t(`${fileType}-occupy`)}</div>
</div>
+18 -57
View File
@@ -1,11 +1,9 @@
'use client'
import {useTranslations, useLocale} from 'next-intl';
import { useQuery } from '@tanstack/react-query';
import { getUserFilesInfo } from '@/app/actions/action';
import { useTranslations, useLocale } from 'next-intl';
import { convertBytes } from '@/app/lib/convertBytes';
import { pluralize } from '@/app/lib/pluralize';
import { useStoreWithDevtools } from '@/app/stores/useStoreWithDevtools';
import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
type FilesInfo = {
totalSize: number;
@@ -15,62 +13,25 @@ type FilesInfo = {
export default function ProtectionSummary({ fileType }: { fileType: string }) {
const t = useTranslations('Global');
const CHECKS = useStoreWithDevtools(s => s.value1);
const VIOLATIONS = useStoreWithDevtools(s => s.value2);
const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
const getFileTypeFields = (fileType: string): { totalSize: string, totalCount: string } => {
const getFileTypeData = (fileType: string) => {
switch (fileType) {
case 'image':
return {
totalSize: 'images_size',
totalCount: 'images_quantity'
};
return filesInfo?.images;
case 'video':
return {
totalSize: 'videos_size',
totalCount: 'videos_quantity'
};
return filesInfo?.videos;
case 'audio':
return {
totalSize: 'audios_size',
totalCount: 'audios_quantity'
};
return filesInfo?.audios;
case 'document':
return filesInfo?.documents;
default:
return {
totalSize: 'all_files_size',
totalCount: 'all_files_quantity'
};
return filesInfo?.total;
}
};
const {
data: filesInfo,
isLoading,
isError,
error,
} = useQuery<{
all_files_size: number,
all_files_quantity: number
}, Error, FilesInfo>({
queryKey: ['userFilesInfo'],
queryFn: getUserFilesInfo,
select: (data): FilesInfo => {
if (!data) {
return {
totalSize: 0,
totalCount: 0
}
}
const fields = getFileTypeFields(fileType);
return {
totalSize: data[fields.totalSize as keyof typeof data],
totalCount: data[fields.totalCount as keyof typeof data]
}
}
});
const currentData = getFileTypeData(fileType);
const locale = useLocale();
@@ -95,27 +56,27 @@ export default function ProtectionSummary({ fileType }: { fileType: string }) {
<p>{t('current-status-of')}</p>
<div className="protection-stats">
<div className="protection-stat total-files">
<span className="protection-stat-value">{filesInfo?.totalCount ? filesInfo?.totalCount : 0}</span>
<span className="protection-stat-value">{currentData?.quantity ?? 0}</span>
<span className="protection-stat-label">
{pluralizeFilesName(filesInfo?.totalCount || 0)}
{pluralizeFilesName(currentData?.quantity ?? 0)}
</span>
</div>
<div className="protection-stat total-checks">
<div>
<span className="protection-stat-value">{CHECKS}</span>
<span className="protection-stat-value">{currentData?.check ?? 0}</span>
<span className="protection-stat-label">
{pluralizeCheks(CHECKS)}
{pluralizeCheks(currentData?.check ?? 0)}
</span>
</div>
<div>
<span className="protection-stat-value">{VIOLATIONS}</span>
<span className="protection-stat-value">{currentData?.violation ?? 0}</span>
<span className="protection-stat-label">
{pluralizeViolations(VIOLATIONS)}
{pluralizeViolations(currentData?.violation ?? 0)}
</span>
</div>
</div>
<div className="protection-stat total-usage">
<div className="protection-stat-value">{filesInfo?.totalSize ? convertBytes(filesInfo?.totalSize) : 0} / 0</div>
<div className="protection-stat-value">{convertBytes(currentData?.size ?? 0)} / 0</div>
<div className="protection-stat-label">
{t('disk-space-used')}
</div>
+17 -26
View File
@@ -1,28 +1,19 @@
'use client'
import { IconDocument, IconImageFile, IconVideoFile, IconAudioFile } from '@/app/ui/icons/icons';
import { useQuery } from '@tanstack/react-query';
import { getUserFilesInfo } from '@/app/actions/action';
import {useTranslations, useLocale} from 'next-intl';
import { useTranslations, useLocale } from 'next-intl';
import { convertBytes } from '@/app/lib/convertBytes';
import { pluralize } from '@/app/lib/pluralize';
import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
export default function MyContentInfoBlock() {
const locale = useLocale();
const t = useTranslations('Global');
const {
data: filesInfo,
isLoading,
isError,
error,
} = useQuery({
queryKey: ['userFilesInfo'],
queryFn: getUserFilesInfo,
});
const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
const fileTypeSizePercents = () => {
if (!filesInfo?.all_files_size) {
if (!filesInfo?.total.size) {
return {
images: 0,
videos: 0,
@@ -32,13 +23,13 @@ export default function MyContentInfoBlock() {
}
const sizes = {
images: filesInfo?.images_size || 0,
videos: filesInfo?.videos_size || 0,
audios: filesInfo?.audios_size || 0,
documents: filesInfo?.documents_size || 0,
images: filesInfo?.images.size || 0,
videos: filesInfo?.videos.size || 0,
audios: filesInfo?.audios.size || 0,
documents: filesInfo?.documents.size || 0,
};
const total = filesInfo?.all_files_size;
const total = filesInfo?.total.size;
const rawPercents = {
images: (sizes.images / total) * 100,
@@ -90,10 +81,10 @@ export default function MyContentInfoBlock() {
</div>
<div className="file-stat-details">
<span className="file-stat-count">
{filesInfo?.images_quantity || 0} {pluralizeFiles(filesInfo?.images_quantity || 0)}
{filesInfo?.images.quantity || 0} {pluralizeFiles(filesInfo?.images.quantity || 0)}
</span>
<span className="file-stat-size">
{filesInfo?.images_size ? convertBytes(filesInfo?.images_size) : 0}
{filesInfo?.images.size ? convertBytes(filesInfo?.images.size) : 0}
</span>
</div>
</div>
@@ -110,10 +101,10 @@ export default function MyContentInfoBlock() {
</div>
<div className="file-stat-details">
<span className="file-stat-count">
{filesInfo?.videos_quantity || 0} {pluralizeFiles(filesInfo?.videos_quantity || 0)}
{filesInfo?.videos.quantity || 0} {pluralizeFiles(filesInfo?.videos.quantity || 0)}
</span>
<span className="file-stat-size">
{filesInfo?.videos_size ? convertBytes(filesInfo?.videos_size) : 0}
{filesInfo?.videos.size ? convertBytes(filesInfo?.videos.size) : 0}
</span>
</div>
</div>
@@ -130,10 +121,10 @@ export default function MyContentInfoBlock() {
</div>
<div className="file-stat-details">
<span className="file-stat-count">
{filesInfo?.audios_quantity || 0} {pluralizeFiles(filesInfo?.audios_quantity || 0)}
{filesInfo?.audios.quantity || 0} {pluralizeFiles(filesInfo?.audios.quantity || 0)}
</span>
<span className="file-stat-size">
{filesInfo?.audios_size ? convertBytes(filesInfo?.audios_size) : 0}
{filesInfo?.audios.size ? convertBytes(filesInfo?.audios.size) : 0}
</span>
</div>
</div>
@@ -150,10 +141,10 @@ export default function MyContentInfoBlock() {
</div>
<div className="file-stat-details">
<span className="file-stat-count">
{filesInfo?.documents_quantity || 0} {pluralizeFiles(filesInfo?.documents_quantity || 0)}
{filesInfo?.documents.quantity || 0} {pluralizeFiles(filesInfo?.documents.quantity || 0)}
</span>
<span className="file-stat-size">
{filesInfo?.documents_size ? convertBytes(filesInfo?.documents_size) : 0}
{filesInfo?.documents.size ? convertBytes(filesInfo?.documents.size) : 0}
</span>
</div>
</div>
+7 -57
View File
@@ -1,10 +1,9 @@
'use client'
import { PieChartComponent } from '@/app/components/PieChartComponent';
import { useQuery } from '@tanstack/react-query';
import { getUserFilesInfo } from '@/app/actions/action';
import { useState, useEffect } from 'react';
import { convertBytes } from '@/app/lib/convertBytes';
import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
type FilesInfo = {
@@ -28,76 +27,27 @@ export default function MyContentPieChart() {
{ name: 'documents', value: 0, color: '#a561e6' },
]);
const {
data: filesInfo,
isLoading,
isError,
error,
} = useQuery<{
all_files_size: number,
all_files_quantity: number,
images_quantity: number,
videos_quantity: number,
audios_quantity: number,
documents_quantity: number,
images_size: number,
videos_size: number,
audios_size: number,
documents_size: number,
}, Error, FilesInfo>({
queryKey: ['userFilesInfo'],
queryFn: getUserFilesInfo,
select: (data): FilesInfo => {
if (!data) {
return {
totalSize: 0,
totalCount: 0,
imageQuantity: 0,
videoQuantity: 0,
audioQuantity: 0,
documentQuantity: 0,
imageSize: 0,
videoSize: 0,
audioSize: 0,
documentSize: 0,
}
}
return {
totalSize: data.all_files_size,
totalCount: data.all_files_quantity,
imageQuantity: data.images_quantity,
videoQuantity: data.videos_quantity,
audioQuantity: data.audios_quantity,
documentQuantity: data.documents_quantity,
imageSize: data.images_size,
videoSize: data.videos_size,
audioSize: data.audios_size,
documentSize: data.documents_size,
}
},
});
const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
useEffect(() => {
setFilesCount([
{
name: 'images-few',
value: filesInfo?.imageSize ? filesInfo?.imageSize : 0,
value: filesInfo?.images.size ? filesInfo?.images.size : 0,
color: '#f08c00'
},
{
name: 'videos',
value: filesInfo?.videoSize ? filesInfo?.videoSize : 0,
value: filesInfo?.videos.size ? filesInfo?.videos.size : 0,
color: '#2f9e44'
},
{
name: 'audios',
value: filesInfo?.audioSize ? filesInfo?.audioSize : 0,
value: filesInfo?.audios.size ? filesInfo?.audios.size : 0,
color: '#1971c2'
},
{
name: 'documents',
value: filesInfo?.documentSize ? filesInfo?.documentSize : 0,
value: filesInfo?.documents.size ? filesInfo?.documents.size : 0,
color: '#a561e6'
},
])
@@ -105,7 +55,7 @@ export default function MyContentPieChart() {
return (
<div className="protection-overview">
<PieChartComponent data={filesCount} show={filesInfo?.totalSize ? convertBytes(filesInfo?.totalSize) : 0} />
<PieChartComponent data={filesCount} show={convertBytes(filesInfo?.total.size ?? 0)} />
</div>
)
}
@@ -2,21 +2,13 @@
'use client'
import { useTranslations } from 'next-intl';
import { useQuery } from '@tanstack/react-query';
import { getUserFilesInfo } from '@/app/actions/action';
import { convertBytes } from '@/app/lib/convertBytes';
import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
export default function MyContentPageTitleColorFrame({ title, description }: { title: string, description: string }) {
const t = useTranslations('Global');
const {
data: filesInfo,
isLoading,
isError,
error,
} = useQuery({
queryKey: ['userFilesInfo'],
queryFn: getUserFilesInfo,
});
const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
return (
<div className="page-title-color-frame">
@@ -31,7 +23,7 @@ export default function MyContentPageTitleColorFrame({ title, description }: { t
</div>
<div className="header-stats">
<div className="header-stat-item">
<div className="header-stat-value">{filesInfo?.all_files_quantity}</div>
<div className="header-stat-value">{filesInfo?.total.quantity}</div>
<div className="header-stat-label">Файлов</div>
</div>
<div className="header-stat-divider"></div>
@@ -41,7 +33,7 @@ export default function MyContentPageTitleColorFrame({ title, description }: { t
</div>
<div className="header-stat-divider"></div>
<div className="header-stat-item">
<div className="header-stat-value">{filesInfo?.all_files_size ? convertBytes(filesInfo?.all_files_size) : 0}</div>
<div className="header-stat-value">{convertBytes(filesInfo?.total.size ?? 0)}</div>
<div className="header-stat-label">Хранилище</div>
</div>
</div>
@@ -1,22 +1,13 @@
'use client'
import { useTranslations } from 'next-intl';
import { useQuery } from '@tanstack/react-query';
import { getUserFilesInfo } from '@/app/actions/action';
import { convertBytes } from '@/app/lib/convertBytes';
import { IconDocument, IconShield, IconSearch, IconDiscet } from '@/app/ui/icons/icons';
import {useUserFilesInfo} from '@/app/hooks/react-query/useUserFilesInfo';
export default function MyContentStatsOverview() {
const t = useTranslations('Global');
const {
data: filesInfo,
isLoading,
isError,
error,
} = useQuery({
queryKey: ['userFilesInfo'],
queryFn: getUserFilesInfo,
});
const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
return (
<div className="my-content-stats-overview">
@@ -27,7 +18,7 @@ export default function MyContentStatsOverview() {
</div>
{/* <div className="stat-trend">+0%</div> */}
</div>
<div className="stat-value">{filesInfo?.all_files_quantity}</div>
<div className="stat-value">{filesInfo?.total.quantity}</div>
<div className="stat-label">Всего файлов</div>
</div>
@@ -38,7 +29,7 @@ export default function MyContentStatsOverview() {
</div>
{/* <div className="stat-trend">+0%</div> */}
</div>
<div className="stat-value">{filesInfo?.protected_files_count}</div>
<div className="stat-value">{filesInfo?.total.protected}</div>
<div className="stat-label">Защищено файлов</div>
</div>
@@ -60,7 +51,7 @@ export default function MyContentStatsOverview() {
</div>
{/* <div className="stat-trend">+0%</div> */}
</div>
<div className="stat-value">{filesInfo?.all_files_size ? convertBytes(filesInfo?.all_files_size) : 0}</div>
<div className="stat-value">{convertBytes(filesInfo?.total.size ?? 0)}</div>
<div className="stat-label">Хранилище</div>
</div>
</div>
+6 -16
View File
@@ -1,23 +1,13 @@
'use client'
import { useTranslations } from 'next-intl';
import { useQuery } from '@tanstack/react-query';
import { getUserFilesInfo } from '@/app/actions/action';
import {convertBytes} from '@/app/lib/convertBytes';
import { useEffect } from 'react';
import {useUserFilesInfo} from '@/app/hooks/react-query/useUserFilesInfo';
export default function ReportsInfo() {
const t = useTranslations("Global");
const {
data: filesInfo,
isLoading,
isError,
error,
} = useQuery({
queryKey: ['userFilesInfo'],
queryFn: getUserFilesInfo,
});
const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
return (
<div className="dashboard-files-info">
@@ -25,21 +15,21 @@ export default function ReportsInfo() {
<div className="stat-type">
{t('all-content')}
</div>
<div className="stat-value">{filesInfo?.all_files_quantity ? filesInfo?.all_files_quantity : 0}</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>
<div className="stat-value">{filesInfo?.all_files_violation ? filesInfo?.all_files_violation : 0}</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>
<div className="stat-value">{filesInfo?.all_files_check ? filesInfo?.all_files_check : 0}</div>
<div className="stat-value">{filesInfo?.total.check ? filesInfo?.total.check : 0}</div>
</div>
<div className="type-card scripts">
+8 -34
View File
@@ -1,51 +1,25 @@
'use client'
import { useTranslations } from 'next-intl';
import { useQuery } from '@tanstack/react-query';
import { getUserFilesInfo } from '@/app/actions/action';
type FilesInfo = {
totalSize: number;
totalCount: number;
};
import { useUserFilesInfo } from '@/app/hooks/react-query/useUserFilesInfo';
export default function ViolationsStatistic() {
const t = useTranslations('Global');
const {
data: filesInfo,
isLoading,
isError,
error,
} = useQuery<{
all_files_size: number,
all_files_quantity: number
}, Error, FilesInfo>({
queryKey: ['userFilesInfo'],
queryFn: getUserFilesInfo,
select: (data): FilesInfo => {
if (!data) {
return {
totalSize: 0,
totalCount: 0
}
}
return {
totalSize: data.all_files_size,
totalCount: data.all_files_quantity
}
}
});
const { data: filesInfo, isLoading, isError, error } = useUserFilesInfo();
return (
<div className="protection-statistic">
<div className="protection-statistic-stat-card">
<div className="protection-statistic-stat-number">0</div>
<div className="protection-statistic-stat-number">
{filesInfo?.total.violation}
</div>
<div className="protection-statistic-stat-label">{t(`total-violations`)}</div>
</div>
<div className="protection-statistic-stat-card">
<div className="protection-statistic-stat-number">0</div>
<div className="protection-statistic-stat-number">
{filesInfo?.total.violation}
</div>
<div className="protection-statistic-stat-label">{t(`new`)}</div>
</div>
<div className="protection-statistic-stat-card">