no-copy-frontend/src/app/ui/dashboard/new/dashboard-files-info.tsx

'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';

export default function DashboardFilesInfo() {
	const t = useTranslations("Global");

	const {
		data: filesInfo,
		isLoading,
		isError,
		error,
	} = useQuery({
		queryKey: ['userFilesInfo'],
		queryFn: getUserFilesInfo,
	});

	return (
		<div className="dashboard-files-info">
			<div className="type-card images">
				<div className="stat-type">
					{t('images')}
				</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>
					</div>
					<div className="type-card-stat-row">
						<span className="type-card-stat-label">{t('checks')}</span>
						<span className="type-card-stat-value">{filesInfo.images_check ? filesInfo.images_check : 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>
					</div>
				</div>
			</div>

			<div className="type-card videos">
				<div className="stat-type">
					{t('videos')}
				</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>
					</div>
					<div className="type-card-stat-row">
						<span className="type-card-stat-label">{t('checks')}</span>
						<span className="type-card-stat-value">{filesInfo.videos_check ? filesInfo.videos_check : 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>
					</div>
				</div>
			</div>

			<div className="type-card audio">
				<div className="stat-type">
					{t('audios')}
				</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>
					</div>
					<div className="type-card-stat-row">
						<span className="type-card-stat-label">{t('checks')}</span>
						<span className="type-card-stat-value">{filesInfo.audios_check ? filesInfo.audios_check : 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>
					</div>
				</div>
			</div>

			<div className="type-card scripts">
				<div className="stat-type">
					{t('documents')}
				</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>
					</div>
					<div className="type-card-stat-row">
						<span className="type-card-stat-label">{t('checks')}</span>
						<span className="type-card-stat-value">{filesInfo.documents_check ? filesInfo.documents_check : 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>
					</div>
				</div>
			</div>
		</div>
	)
}