add more user tarrif info

src/app/lib/getProcents.ts

@@ -0,0 +1,18 @@
+export function getProcents(
+	currentNumber: number,
+	totalNumber: number,
+	decimals: number = 0
+): number {
+	if (!currentNumber && !totalNumber) {
+		return 0;
+	}
+
+	if (totalNumber === 0) {
+		return 0;
+	}
+
+	const percentage = (currentNumber / totalNumber) * 100;
+	const factor = Math.pow(10, decimals);
+
+	return Math.round(percentage * factor) / factor;
+}

src/app/styles/payment-container.scss

@@ -38,10 +38,11 @@
 		}
 
 		.stat-value {
-			font-size: 1.6rem;
+			font-size: 1.2rem;
 			font-weight: 700;
 			color: #1e293b;
 			margin-bottom: 4px;
+			white-space: nowrap;
 		}
 
 		.stat-label {

src/app/ui/dashboard/new/dashborad-limits-section.tsx

@@ -3,6 +3,7 @@
 import { useQuery } from '@tanstack/react-query';
 import { getUserFilesInfo } from '@/app/actions/action';
 import { convertBytes } from '@/app/lib/convertBytes';
+import { getProcents } from '@/app/lib/getProcents';
 
 export default function DahboardLimitsSection() {
 	const {
@@ -15,10 +16,6 @@ export default function DahboardLimitsSection() {
 		queryFn: getUserFilesInfo,
 	});
 
-	function getProcents(currentNumber: number, totalNumber: number) {
-		return Math.round(currentNumber / (totalNumber / 100));
-	}
-
 	return (
 		<div className="dashboard-limits-section">
 			<h3 className="section-title">💰 Использование лимитов</h3>
@@ -48,7 +45,7 @@ export default function DahboardLimitsSection() {
 						<div className="limit-value">{filesInfo?.all_files_size ? convertBytes(filesInfo?.all_files_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?.all_files_size, 1000000000)}%` }}></div>
 					</div>
 					<div className="progress-bar-value">
 						{getProcents(filesInfo?.all_files_size, 1000000000)}%

src/app/ui/header/headerPanel.tsx

@@ -1,32 +1,57 @@
+'use client'
+
 import NotificationsButton from './notificationsButton';
 import UserMenuButton from './userMenuButton';
 import Link from 'next/link';
 import LanguageSwitcher from '@/app/components/LanguageSwitcher';
 import { useTranslations } from 'next-intl';
 import BurgerMenu from '@/app/ui/navigation/burger-menu';
+import { getUserData } from '@/app/actions/action';
+import { useQuery } from '@tanstack/react-query';
 
 export default function HeaderPanel() {
 	const t = useTranslations("Global");
+	const {
+		data: tokens,
+		isLoading,
+		isError,
+		error
+	} = useQuery({
+		queryKey: ['userData'],
+		queryFn: () => {
+			return getUserData();
+		},
+		select: (data) => {
+			if (typeof data?.tariffInfo?.tokens === 'number') {
+				return data?.tariffInfo?.tokens
+			} else {
+				return null;
+			}
+
+		}
+	});
 
 	return (
 		<header className="header">
 			<BurgerMenu />
 			<div className="header-action">
 				{/* <LanguageSwitcher /> */}
-				<Link
+				{tokens && (
-					href={'/pages/payment'}
+					<Link
-					className="tokens-balance"
+						href={'/pages/payment'}
-				>
+						className="tokens-balance"
-					<div className="tokens-wrapper" title={t('current-balance-of-protection')}>
+					>
-						<svg viewBox="0 0 24 24" fill="currentColor" style={{ width: "16px", height: "16px" }}>
+						<div className="tokens-wrapper" title={t('current-balance-of-protection')}>
-							<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"></path>
+							<svg viewBox="0 0 24 24" fill="currentColor" style={{ width: "16px", height: "16px" }}>
-						</svg>
+								<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"></path>
-						<span className="tokens-count">800</span>
+							</svg>
-						<span className="tokens-label">
+							<span className="tokens-count">{tokens}</span>
-							{t('tokens')}
+							<span className="tokens-label">
-						</span>
+								{t('tokens')}
-					</div>
+							</span>
-				</Link>
+						</div>
+					</Link>
+				)}
 				<NotificationsButton />
 				<UserMenuButton />
 			</div>

src/app/ui/payment/user-usage.tsx

@@ -4,6 +4,7 @@ import { getUserData } from '@/app/actions/action';
 import { useQuery } from '@tanstack/react-query';
 import { useEffect } from 'react';
 import { convertBytes } from '@/app/lib/convertBytes';
+import { getProcents } from '@/app/lib/getProcents';
 
 export default function UserUsage() {
 	const {
@@ -24,7 +25,9 @@ export default function UserUsage() {
 					maxFilesCount: data.tariffInfo?.maxFileCounts,
 					name: data.tariffInfo?.tariffName,
 					endTariff: data.tariffInfo?.endTariff,
-					tokens: data.tariffInfo?.tokens
+					tokens: data.tariffInfo?.tokens,
+					currentFileCounts: data.tariffInfo?.currentFileCounts,
+					currentFileOnDisk: data.tariffInfo?.currentFileOnDisk,
 				}
 			}
 		}
@@ -37,23 +40,29 @@ export default function UserUsage() {
 			</h3>
 			<div className="stats-grid">
 				<div className="stat-card">
-					<div className="stat-value">0 / {userData?.maxFilesCount}</div>
+					<div className="stat-value">
+						{userData?.currentFileCounts} / {userData?.maxFilesCount}
+					</div>
 					<div className="stat-label">Файлов в месяц</div>
 					<div className="progress-bar">
 						<div
 							className="progress-fill"
-							style={{ width: '0%' }}
+							style={{ width: `${getProcents(userData?.currentFileCounts, userData?.maxFilesCount)}%` }}
 						>
 						</div>
 					</div>
 				</div>
 				<div className="stat-card">
-					<div className="stat-value">0 / {userData?.diskSize ? convertBytes(userData?.diskSize) : 0}</div>
+					<div className="stat-value">
+						{userData?.currentFileOnDisk ? convertBytes(userData?.currentFileOnDisk) : 0} / {userData?.diskSize ? convertBytes(userData?.diskSize) : 0}
+					</div>
 					<div className="stat-label">Объём хранилища</div>
 					<div className="progress-bar">
 						<div
 							className="progress-fill"
-							style={{ width: '0%' }}
+							style={
+								{ width: `${getProcents(userData?.currentFileOnDisk, userData?.diskSize)}%` }
+							}
 						>
 						</div>
 					</div>