add more user tarrif info

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>