248 lines
18 KiB
Twig
248 lines
18 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block title %}داشبورد - باشگاه مشتریان حسابیکس{% endblock %}
|
|
|
|
{% block stylesheets %}
|
|
{{ parent() }}
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="min-h-screen py-10 font-yekan" dir="rtl">
|
|
<div class="container mx-auto px-4">
|
|
<div class="bg-gradient-to-r from-green-500 to-teal-500 text-white p-6 rounded-xl mb-10">
|
|
<h4 class="text-xl font-bold mb-2 flex items-center gap-2">
|
|
<img src="{{ asset('/img/icons/heart.svg') }}" alt="قلب" class="w-5 h-5"> از عضویت شما در باشگاه مشتریان حسابیکس سپاسگزاریم!
|
|
</h4>
|
|
<p class="mb-0">در این بخش می‌توانید اطلاعات حساب کاربری خود را مشاهده و مدیریت کنید.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="w-full">
|
|
<div class="card hover:shadow-lg transition-shadow duration-300">
|
|
<h3 class="text-primary-600 mb-6 text-xl font-bold flex items-center gap-2">
|
|
<img src="{{ asset('/img/icons/user.svg') }}" alt="کاربر" class="w-5 h-5"> اطلاعات شخصی
|
|
</h3>
|
|
|
|
<div class="flex justify-between items-center py-4 border-b border-gray-200">
|
|
<span class="font-semibold text-gray-700">نام و نام خانوادگی:</span>
|
|
<span class="text-gray-600">{{ user.name }}</span>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center py-4 border-b border-gray-200">
|
|
<span class="font-semibold text-gray-700">پست الکترونیکی:</span>
|
|
<span class="text-gray-600">{{ user.email }}</span>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center py-4 border-b border-gray-200">
|
|
<span class="font-semibold text-gray-700">شماره موبایل:</span>
|
|
<span class="text-gray-600">{{ user.phone }}</span>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center py-4">
|
|
<span class="font-semibold text-gray-700">وضعیت حساب:</span>
|
|
<span class="px-4 py-2 rounded-full text-sm font-bold {{ user.isActive ? 'bg-blue-100 text-blue-800' : 'bg-red-100 text-red-800' }}">
|
|
{{ user.isActive ? 'فعال' : 'غیرفعال' }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full">
|
|
<div class="card hover:shadow-lg transition-shadow duration-300">
|
|
<h3 class="text-primary-600 mb-6 text-xl font-bold flex items-center gap-2">
|
|
<img src="{{ asset('/img/icons/calendar.svg') }}" alt="تقویم" class="w-5 h-5"> اطلاعات عضویت
|
|
</h3>
|
|
|
|
<div class="flex justify-between items-center py-4 border-b border-gray-200">
|
|
<span class="font-semibold text-gray-700">تاریخ عضویت:</span>
|
|
<span class="text-gray-600">{{ user.createdAt|date('U')|jdate('Y/m/d') }}</span>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center py-4">
|
|
<span class="font-semibold text-gray-700">آخرین ورود:</span>
|
|
<span class="text-gray-600">
|
|
{{ user.lastLoginAt ? user.lastLoginAt|date('U')|jdate('Y/m/d H:i') : 'هنوز وارد نشده' }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-center py-4 border-b border-gray-200">
|
|
<span class="font-semibold text-gray-700">تایید ایمیل:</span>
|
|
<span class="px-4 py-2 rounded-full text-sm font-bold {{ user.emailVerifiedAt ? 'bg-blue-100 text-blue-800' : 'bg-red-100 text-red-800' }}">
|
|
{{ user.emailVerifiedAt ? 'تایید شده' : 'تایید نشده' }}
|
|
</span>
|
|
</div>
|
|
|
|
{% if user.subscriptionType %}
|
|
<div class="flex justify-between items-center py-4">
|
|
<span class="font-semibold text-gray-700">نوع اشتراک:</span>
|
|
<span class="text-gray-600">{{ user.subscriptionType }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- بخش کیف پول‌ها -->
|
|
<div class="w-full mt-8">
|
|
<div class="card">
|
|
<h3 class="text-primary-600 mb-6 text-xl font-bold flex items-center gap-2">
|
|
<img src="{{ asset('/img/icons/wallet.svg') }}" alt="کیف پول" class="w-5 h-5"> مدیریت کیف پول‌ها
|
|
</h3>
|
|
|
|
<!-- فرم اتصال کیف پول جدید -->
|
|
<div class="bg-white p-6 rounded-xl border border-gray-200 mb-6"
|
|
data-controller="wallet-connect"
|
|
data-wallet-connect-sign-message-value="{{ signMessage }}"
|
|
data-wallet-connect-csrf-token-value="{{ csrf_token('wallet_connect_form') }}">
|
|
<h5 class="text-lg font-semibold mb-4">اتصال کیف پول جدید</h5>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="walletType" class="block text-sm font-medium text-gray-700 mb-2">نوع کیف پول</label>
|
|
<select class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200" id="walletType" data-wallet-connect-target="walletType" data-action="change->wallet-connect#onWalletTypeChange">
|
|
<option value="">انتخاب کنید...</option>
|
|
<option value="metamask">MetaMask</option>
|
|
<option value="trust">Trust Wallet</option>
|
|
<option value="walletconnect">WalletConnect</option>
|
|
<option value="coinbase">Coinbase Wallet</option>
|
|
<option value="other">سایر</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">آدرس کیف پول</label>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
|
|
<i class="fas fa-wallet text-gray-400"></i>
|
|
</div>
|
|
<input type="text"
|
|
class="w-full px-4 py-3 pr-10 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
|
|
id="walletAddress"
|
|
data-wallet-connect-target="walletAddress"
|
|
placeholder="آدرس کیف پول پس از اتصال نمایش داده می‌شود"
|
|
readonly>
|
|
</div>
|
|
<p class="text-sm text-gray-500 mt-2">آدرس کیف پول شما پس از اتصال به صورت خودکار پر می‌شود</p>
|
|
</div>
|
|
<div class="col-span-2">
|
|
<button type="button"
|
|
class="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white py-3 px-6 rounded-xl font-semibold hover:from-blue-700 hover:to-purple-700 transform hover:-translate-y-0.5 transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
|
|
id="connectBtn"
|
|
data-wallet-connect-target="connectBtn"
|
|
data-action="click->wallet-connect#connectWallet"
|
|
disabled>
|
|
نوع کیف پول را انتخاب کنید
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<input type="hidden" data-wallet-connect-target="signature">
|
|
</div>
|
|
|
|
<!-- لیست کیف پول‌های متصل -->
|
|
<div class="mt-6">
|
|
<h5 class="text-lg font-semibold mb-4">کیف پول‌های متصل ({{ user.wallets|length }}/5)</h5>
|
|
|
|
{% if user.wallets|length > 0 %}
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">آدرس کیف پول</th>
|
|
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">نوع</th>
|
|
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">وضعیت</th>
|
|
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">تاریخ اتصال</th>
|
|
<th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">عملیات</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
{% for wallet in user.wallets %}
|
|
<tr>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<code class="text-sm bg-gray-100 px-2 py-1 rounded">{{ wallet.shortAddress }}</code>
|
|
{% if wallet.isPrimary %}
|
|
<span class="bg-primary-100 text-primary-800 text-xs px-2 py-1 rounded-full mr-2">اصلی</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
<span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">{{ wallet.walletType }}</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
<span class="px-2 py-1 rounded-full text-xs font-medium {{ wallet.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
|
|
{{ wallet.isActive ? 'فعال' : 'غیرفعال' }}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ wallet.connectedAt|date('U')|jdate('Y/m/d H:i') }}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
|
|
<div class="flex gap-2">
|
|
{% if not wallet.isPrimary and wallet.isActive %}
|
|
<button class="inline-flex items-center px-3 py-1 text-xs font-medium text-blue-600 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 transition-colors duration-200"
|
|
data-wallet-id="{{ wallet.id }}"
|
|
data-action="click->wallet-connect#setPrimaryWallet">
|
|
<i class="fas fa-star ml-1"></i> اصلی
|
|
</button>
|
|
{% endif %}
|
|
|
|
<button class="inline-flex items-center px-3 py-1 text-xs font-medium text-yellow-600 bg-yellow-50 border border-yellow-200 rounded-lg hover:bg-yellow-100 transition-colors duration-200"
|
|
data-wallet-id="{{ wallet.id }}"
|
|
data-action="click->wallet-connect#toggleWalletStatus">
|
|
<i class="fas fa-{{ wallet.isActive ? 'pause' : 'play' }} ml-1"></i>
|
|
{{ wallet.isActive ? 'غیرفعال' : 'فعال' }}
|
|
</button>
|
|
|
|
<button class="inline-flex items-center px-3 py-1 text-xs font-medium text-red-600 bg-red-50 border border-red-200 rounded-lg hover:bg-red-100 transition-colors duration-200"
|
|
data-wallet-id="{{ wallet.id }}"
|
|
data-action="click->wallet-connect#deleteWallet">
|
|
<i class="fas fa-trash ml-1"></i> حذف
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center text-gray-500 py-12">
|
|
<i class="fas fa-wallet text-6xl mb-4 text-gray-300"></i>
|
|
<h5 class="text-gray-500 text-lg mb-2">هنوز هیچ کیف پولی متصل نشده است</h5>
|
|
<p class="text-gray-400">برای شروع، نوع کیف پول خود را انتخاب کنید و روی دکمه اتصال کلیک کنید</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full mt-8">
|
|
<div class="card">
|
|
<h3 class="text-primary-600 mb-6 text-xl font-bold flex items-center gap-2">
|
|
<img src="{{ asset('/img/icons/cogs.svg') }}" alt="تنظیمات" class="w-5 h-5"> عملیات
|
|
</h3>
|
|
|
|
<div class="flex flex-wrap gap-4 justify-center">
|
|
{% if is_granted('ROLE_ADMIN') %}
|
|
<a href="{{ path('admin') }}" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-green-600 to-emerald-600 text-white rounded-xl font-medium hover:from-green-700 hover:to-emerald-700 transform hover:-translate-y-0.5 transition-all duration-200 shadow-lg hover:shadow-xl gap-2">
|
|
<img src="{{ asset('/img/icons/cogs.svg') }}" alt="مدیریت" class="w-4 h-4"> پنل مدیریت
|
|
</a>
|
|
{% endif %}
|
|
|
|
<a href="{{ path('customer_forgot_password') }}" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl font-medium hover:from-blue-700 hover:to-purple-700 transform hover:-translate-y-0.5 transition-all duration-200 shadow-lg hover:shadow-xl gap-2">
|
|
<img src="{{ asset('/img/icons/key.svg') }}" alt="کلید" class="w-4 h-4"> بازیابی کلمه عبور
|
|
</a>
|
|
|
|
<a href="{{ path('app_home') }}" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-xl font-medium hover:from-blue-700 hover:to-purple-700 transform hover:-translate-y-0.5 transition-all duration-200 shadow-lg hover:shadow-xl gap-2">
|
|
<img src="{{ asset('/img/icons/home.svg') }}" alt="خانه" class="w-4 h-4"> بازگشت به صفحه اصلی
|
|
</a>
|
|
|
|
<a href="{{ path('customer_logout') }}" class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-red-500 to-red-600 text-white rounded-xl font-medium hover:from-red-600 hover:to-red-700 transform hover:-translate-y-0.5 transition-all duration-200 shadow-lg hover:shadow-xl gap-2">
|
|
<img src="{{ asset('/img/icons/sign-out.svg') }}" alt="خروج" class="w-4 h-4"> خروج
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block javascripts %}
|
|
{{ parent() }}
|
|
{% endblock %}
|