From 80692d6446e7321575a2a7ba608bcb68fdf573cf Mon Sep 17 00:00:00 2001
From: smanylov <bio29s@mail.ru>
Date: Wed, 13 May 2026 14:37:54 +0700
Subject: [PATCH] add styles fix some bugs

---
 src/app/styles/global-styles.scss           | 16 +++++
 src/app/ui/users/user-info-modal-window.tsx | 68 ++++++++++-----------
 2 files changed, 49 insertions(+), 35 deletions(-)

diff --git a/src/app/styles/global-styles.scss b/src/app/styles/global-styles.scss
index 22102d4..f86429a 100644
--- a/src/app/styles/global-styles.scss
+++ b/src/app/styles/global-styles.scss
@@ -1309,6 +1309,22 @@
 	border-radius: 20px;
 	overflow: hidden;
 
+	.status {
+		&-active,
+		&-verified {
+			color: #166534;
+		}
+
+		&-expired,
+		&-unverified {
+			color: #991b1b;
+		}
+
+		&-pending {
+			color: #92400e;
+		}
+	}
+
 	&-content {
 		padding: 10px;
 		max-height: calc(90vh - 80px);
diff --git a/src/app/ui/users/user-info-modal-window.tsx b/src/app/ui/users/user-info-modal-window.tsx
index e8f87af..3e41bbb 100644
--- a/src/app/ui/users/user-info-modal-window.tsx
+++ b/src/app/ui/users/user-info-modal-window.tsx
@@ -63,11 +63,9 @@ export function UserInfoModalWindow({
 	};
 
 	const getGenderText = (gender: string) => {
-		return gender === 'MALE' ? 'Male' : 'Female';
+		return gender === 'MALE' ? t('male') : t('female');
 	};
 
-	console.log(userInfo)
-
 	return (
 		<div className="modal-window-view-user">
 			<div className="modal-window-view-user-content">
@@ -75,14 +73,14 @@ export function UserInfoModalWindow({
 					{/* Карточка информации о пользователе */}
 					<div className="user-info-card">
 						<div className="info-header">
-							<h4>{t('userInformation') || 'User Information'}</h4>
+							<h4>{t('userInformation')}</h4>
 						</div>
 						<div className="info-item">
 							<div className="info-label">
-								{t('fullName') || 'Full Name'}:
+								{t('fullName')}:
 							</div>
 							<div className="info-value">
-								{userInfo.fullName}
+								{userInfo?.fullName ? userInfo.fullName : '-'}
 							</div>
 						</div>
 						<div className="info-item">
@@ -90,15 +88,15 @@ export function UserInfoModalWindow({
 								{t('email')}:
 							</div>
 							<div className="info-value">
-								{userInfo.email}
+								{userInfo?.email ? userInfo.email : '-'}
 							</div>
 						</div>
 						<div className="info-item">
 							<div className="info-label">
-								{t('phone') || 'Phone'}:
+								{t('phone')}:
 							</div>
 							<div className="info-value">
-								{userInfo.phone}
+								{userInfo?.phone ? userInfo.phone : '-'}
 							</div>
 						</div>
 						<div className="info-item">
@@ -106,39 +104,39 @@ export function UserInfoModalWindow({
 								{t('company')}:
 							</div>
 							<div className="info-value">
-								{userInfo.company || '-'}
+								{userInfo?.company ? userInfo.company : '-'}
 							</div>
 						</div>
 						<div className="info-item">
 							<div className="info-label">
-								{t('gender') || 'Gender'}:
+								{t('gender')}:
 							</div>
 							<div className="info-value">
-								{getGenderText(userInfo.genderType)}
+								{getGenderText(userInfo?.genderType)}
 							</div>
 						</div>
 						<div className="info-item">
 							<div className="info-label">
-								{t('birthday') || 'Birthday'}:
+								{t('birthday')}:
 							</div>
 							<div className="info-value">
-								{userInfo.birthday ? formatDate(userInfo.birthday) : '-'}
+								{userInfo?.birthday ? formatDate(userInfo.birthday) : '-'}
 							</div>
 						</div>
 						<div className="info-item">
 							<div className="info-label">
-								{t('createdAt') || 'Registered'}:
+								{t('createdAt')}:
 							</div>
 							<div className="info-value">
-								{formatDateTime(userInfo.createdAt)}
+								{formatDateTime(userInfo?.createdAt)}
 							</div>
 						</div>
 						<div className="info-item">
 							<div className="info-label">
-								{t('verifiedStatus') || 'Verification Status'}:
+								{t('verifiedStatus')}:
 							</div>
 							<div className="info-value">
-								{getStatusBadge(userInfo.verifiedStatus)}
+								{getStatusBadge(userInfo?.verifiedStatus)}
 							</div>
 						</div>
 						<div className="info-item">
@@ -146,7 +144,7 @@ export function UserInfoModalWindow({
 								{t('active')}:
 							</div>
 							<div className="info-value">
-								{userInfo.active ? 'active' : 'not active'}
+								{userInfo?.active ? 'active' : 'not active'}
 							</div>
 						</div>
 					</div>
@@ -154,46 +152,46 @@ export function UserInfoModalWindow({
 					{/* Карточка информации о тарифе */}
 					<div className="user-info-card">
 						<div className="info-header">
-							<h4>{t('tariffInformation') || 'Tariff Information'}</h4>
+							<h4>{t('tariffInformation')}</h4>
 						</div>
 						<div className="info-item">
 							<div className="info-label">
-								{t('tariffName') || 'Tariff'}:
+								{t('tariffName')}:
 							</div>
 							<div className="info-value">
-								{userInfo.tariffInfo.tariffName}
+								{userInfo?.tariffInfo?.tariffName ? userInfo?.tariffInfo?.tariffName : '-'}
 							</div>
 						</div>
 						<div className="info-item">
 							<div className="info-label">
-								{t('tariffStatus') || 'Status'}:
+								{t('tariffStatus')}:
 							</div>
 							<div className="info-value">
-								{getStatusBadge(userInfo.tariffInfo.status)}
+								{getStatusBadge(userInfo?.tariffInfo?.status)}
 							</div>
 						</div>
 						<div className="info-item">
 							<div className="info-label">
-								{t('tokens') || 'Tokens'}:
+								{t('tokens')}:
 							</div>
 							<div className="info-value">
-								{userInfo.tariffInfo.tokens || 0}
+								{userInfo?.tariffInfo?.tokens ? userInfo?.tariffInfo?.tokens : '-'}
 							</div>
 						</div>
 						<div className="info-item">
 							<div className="info-label">
-								{t('startDate') || 'Start Date'}:
+								{t('startDate')}:
 							</div>
 							<div className="info-value">
-								{formatDate(userInfo.tariffInfo.startTariff)}
+								{formatDate(userInfo?.tariffInfo?.startTariff)}
 							</div>
 						</div>
 						<div className="info-item">
 							<div className="info-label">
-								{t('endDate') || 'End Date'}:
+								{t('endDate')}:
 							</div>
 							<div className="info-value">
-								{formatDate(userInfo.tariffInfo.endTariff)}
+								{formatDate(userInfo?.tariffInfo?.endTariff)}
 							</div>
 						</div>
 					</div>
@@ -202,22 +200,22 @@ export function UserInfoModalWindow({
 				{/* Карточка использования диска */}
 				<div className="user-info-card">
 					<div className="info-header">
-						<h4>{t('storageInformation') || 'Storage Information'}</h4>
+						<h4>{t('storageInformation')}</h4>
 					</div>
 					<div className="info-item">
 						<div className="info-label">
-							{t('diskUsage') || 'Disk Usage'}:
+							{t('diskUsage')}:
 						</div>
 						<div className="info-value">
-							{formatBytes(userInfo.tariffInfo.currentFileOnDisk)} / {formatBytes(userInfo.tariffInfo.maxFileOnDisk)}
+							{formatBytes(userInfo?.tariffInfo?.currentFileOnDisk)} / {formatBytes(userInfo?.tariffInfo?.maxFileOnDisk)}
 						</div>
 					</div>
 					<div className="info-item">
 						<div className="info-label">
-							{t('fileCount') || 'Files'}:
+							{t('fileCount')}:
 						</div>
 						<div className="info-value">
-							{userInfo.tariffInfo.currentFileCounts} / {userInfo.tariffInfo.maxFileCounts}
+							{userInfo?.tariffInfo?.currentFileCounts} / {userInfo?.tariffInfo?.maxFileCounts}
 						</div>
 					</div>
 				</div>