add more user tarrif info

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