front/src/components/UserDataCard.jsx - main - TimurIsm/OpenEyes

front/src/components/UserDataCard.jsx
90 строк5 KB
TimurIsm
first_commit
16 май 2026, 15:34
16 май 2026, 15:344d3f198
import React from 'react';
import { observer } from 'mobx-react-lite';
import { useContext } from 'react';
import { Context } from '../main';

const UserDataCard = observer(({ user, isVerified }) => {
    const { results, user: userStore } = useContext(Context);
    const isAdmin = userStore.isAdmin;
    const userStats = results?.userStats || { visionTestsCount: 0, surveysCount: 0, totalResults: 0 };
    const adminStats = results?.adminStats || { 
        createdArticles: 0, 
        createdQuestions: 0, 
        createdTests: 0,
        visionTestsCount: 0,
        surveysCount: 0
    };
    const stats = isAdmin ? adminStats : userStats;
    const formattedDate = user?.createdAt ? new Date(user.createdAt).toLocaleDateString('ru-RU') : 'Неизвестно';
    
    return (
        <div className="bg-white border border-gray-300 rounded-lg shadow-md">
            <div className="px-6 py-4 border-b border-gray-300 bg-white rounded-t-lg">
                <h3 className="text-lg font-semibold text-gray-800">
                    Данные пользователя
                </h3>
            </div>
            <div className="px-6 py-5">
                <div className="space-y-5">
                    <div className="grid grid-cols-2 gap-6">
                        <div>
                            <p className="text-sm font-medium text-gray-700">Email</p>
                            <p className="mt-1.5 text-base font-medium text-gray-900 break-all">{user?.email || '—'}</p>
                        </div>
                        <div>
                            <p className="text-sm font-medium text-gray-700">Статус</p>
                            <p className="mt-1.5 text-base">
                                {isVerified ? (
                                    <span className="inline-flex items-center gap-1.5 text-green-700">
                                        <span className="w-1.5 h-1.5 bg-green-500 font-medium rounded-full"></span>
                                        Email подтвержден
                                    </span>
                                ) : (
                                    <span className="inline-flex items-center gap-1.5 text-amber-700">
                                        <span className="w-1.5 h-1.5 bg-amber-500 font-medium rounded-full"></span>
                                        Требуется подтверждение
                                    </span>
                                )}
                            </p>
                        </div>
                    </div>
                    <div className="pt-2 border-t border-gray-200">
                        <p className="text-sm font-medium text-gray-700">Дата регистрации</p>
                        <p className="mt-1.5 text-base font-medium text-gray-900">{formattedDate}</p>
                    </div>
                    <div className="pt-2 border-t border-gray-200">
                        <p className="text-sm font-medium text-gray-700 mb-3">Статистика</p>
                        {isAdmin && (
                            <div className="grid grid-cols-3 gap-4 mb-4 pb-4 border-b border-gray-200">
                                <div className="text-center">
                                    <p className="text-2xl font-medium text-gray-900">{stats.createdTests}</p>
                                    <p className="text-sm text-gray-700 mt-1">Создано тестов</p>
                                </div>
                                <div className="text-center">
                                    <p className="text-2xl font-medium text-gray-900">{stats.createdQuestions}</p>
                                    <p className="text-sm text-gray-700 mt-1">Создано вопросов</p>
                                </div>
                                <div className="text-center">
                                    <p className="text-2xl font-medium text-gray-900">{stats.createdArticles}</p>
                                    <p className="text-sm text-gray-700 mt-1">Создано статей</p>
                                </div>
                            </div>
                        )}
                        <div className="grid grid-cols-2 gap-4">
                            <div className="text-center">
                                <p className="text-2xl font-medium text-gray-900">{stats.surveysCount}</p>
                                <p className="text-sm text-gray-700 mt-1">Пройдено опросов</p>
                            </div>
                            <div className="text-center">
                                <p className="text-2xl font-medium text-gray-900">{stats.visionTestsCount}</p>
                                <p className="text-sm text-gray-700 mt-1">Пройдено тестов</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
});

export default UserDataCard;