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

add user information modal window

Browse Source
This commit is contained in:
smanylov
2026-05-13 14:25:47 +07:00
parent f1954f5f48
commit 9d40df3273
7 changed files with 475 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/ui/users/user-info-modal-window.tsx
+227
View File
@@ -0,0 +1,227 @@
import { formatDate, formatDateTime } from '@/app/lib/formatDate';
import { useTranslations } from 'next-intl';
interface User {
fullName: string;
company: string | null;
email: string;
active: boolean;
phone: string;
genderType: 'MALE' | 'FEMALE';
birthday: string | null;
createdAt: string;
subscriptionType: 'DEMO' | string;
tariffs: null;
tariffInfo: TariffInfo;
permission: null;
verifiedStatus: 'VERIFIED' | 'PENDING' | 'UNVERIFIED';
}
interface TariffInfo {
id: string;
status: 'EXPIRED' | 'ACTIVE' | 'PENDING';
startTariff: string;
endTariff: string;
tariffId: number;
tariffName: string;
tokens: number;
maxFileOnDisk: number;
currentFileOnDisk: number;
currentFileCounts: number;
maxFileCounts: number;
}
export function UserInfoModalWindow({
userInfo,
setWindowClose,
setWindowChildren
}: {
userInfo: User, // Исправлено: ожидаем User, а не TariffInfo
setWindowClose: any,
setWindowChildren: any
}) {
const t = useTranslations('Global');
const formatBytes = (bytes: number) => {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};
const getStatusBadge = (status: string) => {
const statusConfig = {
'ACTIVE': { class: 'status-active', text: 'Active' },
'EXPIRED': { class: 'status-expired', text: 'Expired' },
'PENDING': { class: 'status-pending', text: 'Pending' },
'VERIFIED': { class: 'status-verified', text: 'Verified' },
'UNVERIFIED': { class: 'status-unverified', text: 'Unverified' }
};
const config = statusConfig[status as keyof typeof statusConfig];
return config ? <span className={`status-badge ${config.class}`}>{config.text}</span> : status;
};
const getGenderText = (gender: string) => {
return gender === 'MALE' ? 'Male' : 'Female';
};
console.log(userInfo)
return (
<div className="modal-window-view-user">
<div className="modal-window-view-user-content">
<div className="user-info-wrapper">
{/* Карточка информации о пользователе */}
<div className="user-info-card">
<div className="info-header">
<h4>{t('userInformation') || 'User Information'}</h4>
</div>
<div className="info-item">
<div className="info-label">
{t('fullName') || 'Full Name'}:
</div>
<div className="info-value">
{userInfo.fullName}
</div>
</div>
<div className="info-item">
<div className="info-label">
{t('email')}:
</div>
<div className="info-value">
{userInfo.email}
</div>
</div>
<div className="info-item">
<div className="info-label">
{t('phone') || 'Phone'}:
</div>
<div className="info-value">
{userInfo.phone}
</div>
</div>
<div className="info-item">
<div className="info-label">
{t('company')}:
</div>
<div className="info-value">
{userInfo.company || '-'}
</div>
</div>
<div className="info-item">
<div className="info-label">
{t('gender') || 'Gender'}:
</div>
<div className="info-value">
{getGenderText(userInfo.genderType)}
</div>
</div>
<div className="info-item">
<div className="info-label">
{t('birthday') || 'Birthday'}:
</div>
<div className="info-value">
{userInfo.birthday ? formatDate(userInfo.birthday) : '-'}
</div>
</div>
<div className="info-item">
<div className="info-label">
{t('createdAt') || 'Registered'}:
</div>
<div className="info-value">
{formatDateTime(userInfo.createdAt)}
</div>
</div>
<div className="info-item">
<div className="info-label">
{t('verifiedStatus') || 'Verification Status'}:
</div>
<div className="info-value">
{getStatusBadge(userInfo.verifiedStatus)}
</div>
</div>
<div className="info-item">
<div className="info-label">
{t('active')}:
</div>
<div className="info-value">
{userInfo.active ? 'active' : 'not active'}
</div>
</div>
</div>
{/* Карточка информации о тарифе */}
<div className="user-info-card">
<div className="info-header">
<h4>{t('tariffInformation') || 'Tariff Information'}</h4>
</div>
<div className="info-item">
<div className="info-label">
{t('tariffName') || 'Tariff'}:
</div>
<div className="info-value">
{userInfo.tariffInfo.tariffName}
</div>
</div>
<div className="info-item">
<div className="info-label">
{t('tariffStatus') || 'Status'}:
</div>
<div className="info-value">
{getStatusBadge(userInfo.tariffInfo.status)}
</div>
</div>
<div className="info-item">
<div className="info-label">
{t('tokens') || 'Tokens'}:
</div>
<div className="info-value">
{userInfo.tariffInfo.tokens || 0}
</div>
</div>
<div className="info-item">
<div className="info-label">
{t('startDate') || 'Start Date'}:
</div>
<div className="info-value">
{formatDate(userInfo.tariffInfo.startTariff)}
</div>
</div>
<div className="info-item">
<div className="info-label">
{t('endDate') || 'End Date'}:
</div>
<div className="info-value">
{formatDate(userInfo.tariffInfo.endTariff)}
</div>
</div>
</div>
</div>
{/* Карточка использования диска */}
<div className="user-info-card">
<div className="info-header">
<h4>{t('storageInformation') || 'Storage Information'}</h4>
</div>
<div className="info-item">
<div className="info-label">
{t('diskUsage') || 'Disk Usage'}:
</div>
<div className="info-value">
{formatBytes(userInfo.tariffInfo.currentFileOnDisk)} / {formatBytes(userInfo.tariffInfo.maxFileOnDisk)}
</div>
</div>
<div className="info-item">
<div className="info-label">
{t('fileCount') || 'Files'}:
</div>
<div className="info-value">
{userInfo.tariffInfo.currentFileCounts} / {userInfo.tariffInfo.maxFileCounts}
</div>
</div>
</div>
</div>
</div>
);
}