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

add more user tarrif info

Browse Source
This commit is contained in:
smanylov
2026-02-04 14:41:40 +07:00
parent 2c26a8cd85
commit 7c757a3c59
5 changed files with 75 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/lib/getProcents.ts
+18
View File
@@ -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
+2 -1
View File
@@ -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
+2 -5
View File
@@ -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
+39 -14
View File
@@ -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
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" }}>
<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>
<span className="tokens-count">800</span>
<span className="tokens-label">
{t('tokens')}
</span>
</div>
</Link>
{tokens && (
<Link
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" }}>
<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>
<span className="tokens-count">{tokens}</span>
<span className="tokens-label">
{t('tokens')}
</span>
</div>
</Link>
)}
<NotificationsButton />
<UserMenuButton />
</div>
src/app/ui/payment/user-usage.tsx
+14 -5
View File
@@ -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>