516 lines
22 KiB
Twig
516 lines
22 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block title %}داشبورد - باشگاه مشتریان حسابیکس{% endblock %}
|
|
|
|
{% block stylesheets %}
|
|
{{ parent() }}
|
|
<style>
|
|
/* تنظیمات کلی برای فارسی */
|
|
.customer-dashboard * {
|
|
font-family: 'Yekan Bakh FaNum', 'Tahoma', 'Arial', sans-serif;
|
|
}
|
|
|
|
.customer-dashboard {
|
|
min-height: 80vh;
|
|
padding: 40px 0;
|
|
direction: rtl;
|
|
text-align: right;
|
|
}
|
|
|
|
.dashboard-header {
|
|
background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
|
|
color: white;
|
|
padding: 40px 0;
|
|
margin-bottom: 40px;
|
|
direction: rtl;
|
|
}
|
|
|
|
.dashboard-header h1 {
|
|
direction: rtl;
|
|
text-align: right;
|
|
}
|
|
|
|
.dashboard-header p {
|
|
direction: rtl;
|
|
text-align: right;
|
|
}
|
|
|
|
.dashboard-card {
|
|
background: white;
|
|
border-radius: 15px;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
padding: 30px;
|
|
margin-bottom: 30px;
|
|
transition: transform 0.3s ease;
|
|
direction: rtl;
|
|
}
|
|
|
|
.dashboard-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.dashboard-card h3 {
|
|
color: #0d6efd;
|
|
margin-bottom: 20px;
|
|
font-weight: bold;
|
|
direction: rtl;
|
|
text-align: right;
|
|
}
|
|
|
|
.info-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 15px 0;
|
|
border-bottom: 1px solid #e9ecef;
|
|
direction: rtl;
|
|
}
|
|
|
|
.info-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.info-label {
|
|
font-weight: 600;
|
|
color: #495057;
|
|
direction: rtl;
|
|
}
|
|
|
|
.info-value {
|
|
color: #6c757d;
|
|
direction: rtl;
|
|
}
|
|
|
|
.status-badge {
|
|
padding: 5px 15px;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
direction: rtl;
|
|
}
|
|
|
|
.status-active {
|
|
background: #d1edff;
|
|
color: #0c5460;
|
|
}
|
|
|
|
.status-inactive {
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
|
|
.action-buttons {
|
|
margin-top: 30px;
|
|
direction: rtl;
|
|
text-align: center;
|
|
}
|
|
|
|
.btn-customer {
|
|
background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
|
|
border: none;
|
|
border-radius: 10px;
|
|
padding: 12px 25px;
|
|
color: white;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
margin: 5px;
|
|
display: inline-block;
|
|
transition: all 0.3s ease;
|
|
direction: rtl;
|
|
}
|
|
|
|
.btn-customer:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(13, 110, 253, 0.4);
|
|
color: white;
|
|
}
|
|
|
|
.welcome-message {
|
|
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
|
|
color: white;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
margin-bottom: 30px;
|
|
direction: rtl;
|
|
text-align: right;
|
|
}
|
|
|
|
.welcome-message h4 {
|
|
direction: rtl;
|
|
text-align: right;
|
|
}
|
|
|
|
.welcome-message p {
|
|
direction: rtl;
|
|
text-align: right;
|
|
}
|
|
|
|
/* بهبود نمایش آیکونهای SVG */
|
|
.icon-svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-left: 5px;
|
|
margin-right: 0;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* تغییر رنگ آیکونهای SVG */
|
|
.icon-svg svg {
|
|
fill: currentColor;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* رنگهای مختلف برای آیکونها */
|
|
.text-primary .icon-svg svg {
|
|
fill: #0d6efd;
|
|
}
|
|
|
|
.text-success .icon-svg svg {
|
|
fill: #198754;
|
|
}
|
|
|
|
.text-danger .icon-svg svg {
|
|
fill: #dc3545;
|
|
}
|
|
|
|
.text-warning .icon-svg svg {
|
|
fill: #ffc107;
|
|
}
|
|
|
|
.text-info .icon-svg svg {
|
|
fill: #0dcaf0;
|
|
}
|
|
|
|
.text-muted .icon-svg svg {
|
|
fill: #6c757d;
|
|
}
|
|
|
|
.text-white .icon-svg svg {
|
|
fill: #ffffff;
|
|
}
|
|
|
|
/* بهبود نمایش متنهای فارسی */
|
|
.text-center {
|
|
direction: rtl;
|
|
}
|
|
|
|
.text-end {
|
|
direction: rtl;
|
|
text-align: right;
|
|
}
|
|
|
|
/* استایلهای کیف پول */
|
|
.wallet-connect-form {
|
|
background: #ffffff;
|
|
padding: 25px;
|
|
border-radius: 12px;
|
|
margin-bottom: 25px;
|
|
border: 1px solid #e9ecef;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.wallet-connect-form h5 {
|
|
color: #0d6efd;
|
|
margin-bottom: 20px;
|
|
direction: rtl;
|
|
text-align: right;
|
|
font-weight: 600;
|
|
}
|
|
|
|
#walletAddress {
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 14px;
|
|
direction: ltr;
|
|
text-align: left;
|
|
}
|
|
|
|
#walletAddress:read-only {
|
|
background-color: #f8f9fa;
|
|
cursor: not-allowed;
|
|
border: 1px solid #e9ecef;
|
|
}
|
|
|
|
.wallet-connect-form .input-group-text {
|
|
background-color: #e9ecef;
|
|
border: 1px solid #e9ecef;
|
|
color: #6c757d;
|
|
}
|
|
|
|
.wallet-connect-form .btn-lg {
|
|
padding: 12px 24px;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.wallet-connect-form .btn:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.wallets-list table {
|
|
direction: rtl;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.wallets-list th,
|
|
.wallets-list td {
|
|
text-align: right;
|
|
vertical-align: middle;
|
|
padding: 12px;
|
|
}
|
|
|
|
.wallets-list th {
|
|
background-color: #f8f9fa;
|
|
font-weight: 600;
|
|
border-bottom: 2px solid #dee2e6;
|
|
}
|
|
|
|
.wallets-list code {
|
|
font-family: 'Courier New', monospace;
|
|
font-size: 12px;
|
|
background: #f8f9fa;
|
|
padding: 4px 8px;
|
|
border-radius: 6px;
|
|
border: 1px solid #e9ecef;
|
|
}
|
|
|
|
.btn-group-sm .btn {
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.btn-group-sm .btn i {
|
|
margin-left: 4px;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="customer-dashboard">
|
|
<div class="container">
|
|
<div class="welcome-message">
|
|
<h4><img src="{{ asset('/img/icons/heart.svg') }}" alt="قلب" class="icon-svg icon-heart"> از عضویت شما در باشگاه مشتریان حسابیکس سپاسگزاریم!</h4>
|
|
<p class="mb-0">در این بخش میتوانید اطلاعات حساب کاربری خود را مشاهده و مدیریت کنید.</p>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="dashboard-card">
|
|
<h3><img src="{{ asset('/img/icons/user.svg') }}" alt="کاربر" class="icon-svg icon-user"> اطلاعات شخصی</h3>
|
|
|
|
<div class="info-item">
|
|
<span class="info-label">نام و نام خانوادگی:</span>
|
|
<span class="info-value">{{ user.name }}</span>
|
|
</div>
|
|
|
|
<div class="info-item">
|
|
<span class="info-label">پست الکترونیکی:</span>
|
|
<span class="info-value">{{ user.email }}</span>
|
|
</div>
|
|
|
|
<div class="info-item">
|
|
<span class="info-label">شماره موبایل:</span>
|
|
<span class="info-value">{{ user.phone }}</span>
|
|
</div>
|
|
|
|
<div class="info-item">
|
|
<span class="info-label">وضعیت حساب:</span>
|
|
<span class="status-badge {{ user.isActive ? 'status-active' : 'status-inactive' }}">
|
|
{{ user.isActive ? 'فعال' : 'غیرفعال' }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="dashboard-card">
|
|
<h3><img src="{{ asset('/img/icons/calendar.svg') }}" alt="تقویم" class="icon-svg icon-calendar"> اطلاعات عضویت</h3>
|
|
|
|
<div class="info-item">
|
|
<span class="info-label">تاریخ عضویت:</span>
|
|
<span class="info-value">{{ user.createdAt|date('Y/m/d') }}</span>
|
|
</div>
|
|
|
|
<div class="info-item">
|
|
<span class="info-label">آخرین ورود:</span>
|
|
<span class="info-value">
|
|
{{ user.lastLoginAt ? user.lastLoginAt|date('Y/m/d H:i') : 'هنوز وارد نشده' }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="info-item">
|
|
<span class="info-label">تایید ایمیل:</span>
|
|
<span class="status-badge {{ user.emailVerifiedAt ? 'status-active' : 'status-inactive' }}">
|
|
{{ user.emailVerifiedAt ? 'تایید شده' : 'تایید نشده' }}
|
|
</span>
|
|
</div>
|
|
|
|
{% if user.subscriptionType %}
|
|
<div class="info-item">
|
|
<span class="info-label">نوع اشتراک:</span>
|
|
<span class="info-value">{{ user.subscriptionType }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- بخش کیف پولها -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="dashboard-card wallet-section">
|
|
<h3><img src="{{ asset('/img/icons/wallet.svg') }}" alt="کیف پول" class="icon-svg icon-wallet"> مدیریت کیف پولها</h3>
|
|
|
|
<!-- فرم اتصال کیف پول جدید -->
|
|
<div class="wallet-connect-form mb-4"
|
|
data-controller="wallet-connect"
|
|
data-wallet-connect-sign-message-value="{{ signMessage }}"
|
|
data-wallet-connect-csrf-token-value="{{ csrf_token('wallet_connect_form') }}">
|
|
<h5>اتصال کیف پول جدید</h5>
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<label for="walletType" class="form-label">نوع کیف پول</label>
|
|
<select class="form-select" 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 class="col-md-6">
|
|
<label class="form-label">آدرس کیف پول</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text">
|
|
<i class="fas fa-wallet"></i>
|
|
</span>
|
|
<input type="text"
|
|
class="form-control"
|
|
id="walletAddress"
|
|
data-wallet-connect-target="walletAddress"
|
|
placeholder="آدرس کیف پول پس از اتصال نمایش داده میشود"
|
|
readonly>
|
|
</div>
|
|
<div class="form-text">آدرس کیف پول شما پس از اتصال به صورت خودکار پر میشود</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<button type="button"
|
|
class="btn btn-primary btn-lg w-100"
|
|
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="wallets-list">
|
|
<h5>کیف پولهای متصل ({{ user.wallets|length }}/5)</h5>
|
|
|
|
{% if user.wallets|length > 0 %}
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>آدرس کیف پول</th>
|
|
<th>نوع</th>
|
|
<th>وضعیت</th>
|
|
<th>تاریخ اتصال</th>
|
|
<th>عملیات</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for wallet in user.wallets %}
|
|
<tr>
|
|
<td>
|
|
<code>{{ wallet.shortAddress }}</code>
|
|
{% if wallet.isPrimary %}
|
|
<span class="badge bg-primary ms-2">اصلی</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<span class="badge bg-info">{{ wallet.walletType }}</span>
|
|
</td>
|
|
<td>
|
|
<span class="badge {{ wallet.isActive ? 'bg-success' : 'bg-danger' }}">
|
|
{{ wallet.isActive ? 'فعال' : 'غیرفعال' }}
|
|
</span>
|
|
</td>
|
|
<td>{{ wallet.connectedAt|date('Y/m/d H:i') }}</td>
|
|
<td>
|
|
<div class="btn-group btn-group-sm">
|
|
{% if not wallet.isPrimary and wallet.isActive %}
|
|
<button class="btn btn-outline-primary btn-sm"
|
|
data-wallet-id="{{ wallet.id }}"
|
|
data-action="click->wallet-connect#setPrimaryWallet">
|
|
<i class="fas fa-star"></i> اصلی
|
|
</button>
|
|
{% endif %}
|
|
|
|
<button class="btn btn-outline-warning btn-sm"
|
|
data-wallet-id="{{ wallet.id }}"
|
|
data-action="click->wallet-connect#toggleWalletStatus">
|
|
<i class="fas fa-{{ wallet.isActive ? 'pause' : 'play' }}"></i>
|
|
{{ wallet.isActive ? 'غیرفعال' : 'فعال' }}
|
|
</button>
|
|
|
|
<button class="btn btn-outline-danger btn-sm"
|
|
data-wallet-id="{{ wallet.id }}"
|
|
data-action="click->wallet-connect#deleteWallet">
|
|
<i class="fas fa-trash"></i> حذف
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% else %}
|
|
<div class="text-center text-muted py-5">
|
|
<i class="fas fa-wallet fa-4x mb-4 text-muted"></i>
|
|
<h5 class="text-muted">هنوز هیچ کیف پولی متصل نشده است</h5>
|
|
<p class="text-muted">برای شروع، نوع کیف پول خود را انتخاب کنید و روی دکمه اتصال کلیک کنید</p>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="dashboard-card">
|
|
<h3><img src="{{ asset('/img/icons/cogs.svg') }}" alt="تنظیمات" class="icon-svg icon-cogs"> عملیات</h3>
|
|
|
|
<div class="action-buttons">
|
|
<a href="{{ path('customer_forgot_password') }}" class="btn-customer">
|
|
<img src="{{ asset('/img/icons/key.svg') }}" alt="کلید" class="icon-svg icon-key"> بازیابی کلمه عبور
|
|
</a>
|
|
|
|
<a href="{{ path('app_home') }}" class="btn-customer">
|
|
<img src="{{ asset('/img/icons/home.svg') }}" alt="خانه" class="icon-svg icon-home"> بازگشت به صفحه اصلی
|
|
</a>
|
|
|
|
<a href="{{ path('customer_logout') }}" class="btn-customer" style="background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);">
|
|
<img src="{{ asset('/img/icons/sign-out.svg') }}" alt="خروج" class="icon-svg icon-sign-out"> خروج
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block javascripts %}
|
|
{{ parent() }}
|
|
{% endblock %}
|