Files
FrontOffice/src/FrontOffice.Main/Pages/Profile/Index.razor

205 lines
14 KiB
Plaintext
Raw Normal View History

2025-10-07 01:03:58 +03:30
@attribute [Route(RouteConstants.Profile.Index)]
@inject ISnackbar Snackbar
<PageTitle>پروفایل کاربری</PageTitle>
<MudContainer MaxWidth="MaxWidth.Large" Class="py-6">
<MudGrid Spacing="4">
<!-- Profile Header -->
<MudItem xs="12">
2025-10-07 02:25:35 +03:30
<MudPaper Elevation="4" Class="mud-elevation-4 pa-6 rounded-2xl mud-theme-surface">
2025-10-07 01:03:58 +03:30
<MudStack Row="true" Spacing="3" AlignItems="AlignItems.Center">
<MudAvatar Size="Size.Large" Color="Color.Primary">
<MudIcon Icon="@Icons.Material.Filled.Person" Size="Size.Large" />
</MudAvatar>
<div>
2025-10-07 02:18:07 +03:30
<MudText Typo="Typo.h5" Class="mud-typography-subtitle1">@_userProfile.FirstName @_userProfile.LastName</MudText>
2025-10-12 18:16:59 +03:30
<MudText Typo="Typo.body2" Class="mud-text-secondary">@_userProfile.Mobile</MudText>
<MudText Typo="Typo.caption" Class="mud-text-secondary">عضو از @(_userProfile.MobileVerifiedAt?.ToDateTime().MiladiToJalali())</MudText>
2025-10-07 01:03:58 +03:30
</div>
2025-10-12 18:16:59 +03:30
</MudStack>
</MudPaper>
</MudItem>
<!-- Profile Content -->
<MudItem xs="12">
<MudPaper Elevation="4" Class="mud-elevation-4 rounded-2xl mud-theme-surface">
<MudTabs Elevation="0" Rounded="true" ApplyEffectsToContainer="true" Class="px-4 pt-4">
<!-- Personal Information Tab -->
<MudTabPanel Text="اطلاعات شخصی" Icon="@Icons.Material.Filled.Person">
<div class="pa-4">
<MudText Typo="Typo.h6" Class="mb-4 mud-typography-subtitle1">اطلاعات شخصی</MudText>
<MudForm @ref="_personalForm" Model="_userProfile" Validation="@((Func<object, IEnumerable<FluentValidation.Results.ValidationFailure>>)((model) => _personalValidator.Validate((UserProfile)model).Errors))">
<MudGrid Spacing="3">
<MudItem xs="12" md="6">
<MudTextField @bind-Value="_userProfile.FirstName"
For="@(() => _userProfile.FirstName)"
Label="نام"
Variant="Variant.Outlined"
Required="true"
RequiredError="وارد کردن نام الزامی است." />
</MudItem>
2025-10-07 01:03:58 +03:30
2025-10-12 18:16:59 +03:30
<MudItem xs="12" md="6">
<MudTextField @bind-Value="_userProfile.LastName"
For="@(() => _userProfile.LastName)"
Label="نام خانوادگی"
Variant="Variant.Outlined"
Required="true"
RequiredError="وارد کردن نام خانوادگی الزامی است." />
</MudItem>
2025-10-07 01:03:58 +03:30
2025-10-12 18:16:59 +03:30
<MudItem xs="12" md="6">
<MudTextField @bind-Value="_userProfile.Mobile"
For="@(() => _userProfile.Mobile)"
Label="شماره موبایل"
Variant="Variant.Outlined"
InputType="InputType.Text"
Required="true"
RequiredError="وارد کردن شماره موبایل الزامی است." />
</MudItem>
2025-10-07 01:03:58 +03:30
2025-10-12 18:16:59 +03:30
<MudItem xs="12" md="6">
<MudTextField @bind-Value="_userProfile.NationalCode"
For="@(() => _userProfile.NationalCode)"
Label="کد ملی"
Variant="Variant.Outlined"
InputType="InputType.Text" />
</MudItem>
</MudGrid>
2025-10-07 01:03:58 +03:30
2025-10-12 18:16:59 +03:30
<MudStack Row="true" Spacing="2" Justify="Justify.FlexEnd" Class="mt-4">
<MudButton Variant="Variant.Outlined" Color="Color.Secondary" OnClick="CancelPersonalChanges">
لغو
</MudButton>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="SavePersonalInfo" Disabled="_isPersonalSaving">
ذخیره تغییرات
</MudButton>
2025-10-07 01:03:58 +03:30
</MudStack>
2025-10-12 18:16:59 +03:30
</MudForm>
</div>
</MudTabPanel>
2025-10-07 01:03:58 +03:30
2025-10-12 18:16:59 +03:30
<!-- Account Settings Tab -->
<MudTabPanel Text="تنظیمات حساب" Icon="@Icons.Material.Filled.Settings">
<div class="pa-4">
<MudText Typo="Typo.h6" Class="mb-4 mud-typography-subtitle1">تنظیمات حساب</MudText>
<MudStack Spacing="4">
<!-- Notification Settings -->
<MudPaper Outlined="true" Class="pa-4 rounded-lg">
<MudText Typo="Typo.subtitle1" Class="mb-3 fw-600">اعلان‌ها</MudText>
<MudStack Spacing="2">
<MudSwitch T="bool" @bind-Checked="_settings.EmailNotifications" Label="اعلان‌های ایمیلی" />
<MudSwitch T="bool" @bind-Checked="_settings.SmsNotifications" Label="اعلان‌های پیامکی" />
<MudSwitch T="bool" @bind-Checked="_settings.PushNotifications" Label="اعلان‌های پوش" />
</MudStack>
2025-10-07 01:03:58 +03:30
</MudPaper>
2025-10-12 18:16:59 +03:30
<!-- Privacy Settings -->
<MudPaper Outlined="true" Class="pa-4 rounded-lg">
<MudText Typo="Typo.subtitle1" Class="mb-3 fw-600">حریم خصوصی</MudText>
<MudStack Spacing="2">
<MudSwitch T="bool" @bind-Checked="_settings.ProfileVisibility" Label="نمایش پروفایل عمومی" />
<MudSwitch T="bool" @bind-Checked="_settings.ShowOnlineStatus" Label="نمایش وضعیت آنلاین" />
</MudStack>
2025-10-07 01:03:58 +03:30
</MudPaper>
2025-10-12 18:16:59 +03:30
<!-- Language & Theme -->
<MudPaper Outlined="true" Class="pa-4 rounded-lg">
<MudText Typo="Typo.subtitle1" Class="mb-3 fw-600">زبان و تم</MudText>
<MudGrid Spacing="3">
<MudItem xs="12" md="6">
<MudSelect @bind-Value="_settings.Language" Label="زبان" Variant="Variant.Outlined">
<MudSelectItem Value="@("fa")">فارسی</MudSelectItem>
<MudSelectItem Value="@("en")">English</MudSelectItem>
</MudSelect>
</MudItem>
<MudItem xs="12" md="6">
<MudSelect @bind-Value="_settings.Theme" Label="تم" Variant="Variant.Outlined">
<MudSelectItem Value="@("light")">روشن</MudSelectItem>
<MudSelectItem Value="@("dark")">تیره</MudSelectItem>
<MudSelectItem Value="@("auto")">خودکار</MudSelectItem>
</MudSelect>
</MudItem>
</MudGrid>
2025-10-07 01:03:58 +03:30
</MudPaper>
2025-10-12 18:16:59 +03:30
<MudStack Row="true" Spacing="2" Justify="Justify.FlexEnd">
<MudButton Variant="Variant.Outlined" Color="Color.Secondary" OnClick="CancelSettingsChanges">
لغو
</MudButton>
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="SaveSettings" Disabled="_isSettingsSaving">
ذخیره تنظیمات
</MudButton>
2025-10-07 01:03:58 +03:30
</MudStack>
</MudStack>
2025-10-12 18:16:59 +03:30
</div>
</MudTabPanel>
<!-- Statistics Tab -->
@* <MudTabPanel Text="آمار و اطلاعات" Icon="@Icons.Material.Filled.BarChart">
<div class="pa-4">
<MudText Typo="Typo.h6" Class="mb-4 mud-typography-subtitle1">آمار حساب کاربری</MudText>
<MudGrid Spacing="3">
<MudItem xs="12" md="6" lg="3">
<MudPaper Elevation="3" Class="mud-elevation-3 pa-4 text-center rounded-xl mud-theme-surface">
<MudIcon Icon="@Icons.Material.Filled.DateRange" Size="Size.Large" Color="Color.Primary" Class="mb-2" />
<MudText Typo="Typo.h4" Class="mud-typography-subtitle1">@_userProfile.JoinDate</MudText>
<MudText Typo="Typo.caption" Class="mud-text-secondary">تاریخ عضویت</MudText>
</MudPaper>
</MudItem>
<MudItem xs="12" md="6" lg="3">
<MudPaper Elevation="3" Class="mud-elevation-3 pa-4 text-center rounded-xl mud-theme-surface">
<MudIcon Icon="@Icons.Material.Filled.Login" Size="Size.Large" Color="Color.Success" Class="mb-2" />
<MudText Typo="Typo.h4" Class="mud-typography-subtitle1">@_userProfile.LastLogin</MudText>
<MudText Typo="Typo.caption" Class="mud-text-secondary">آخرین ورود</MudText>
</MudPaper>
</MudItem>
<MudItem xs="12" md="6" lg="3">
<MudPaper Elevation="3" Class="mud-elevation-3 pa-4 text-center rounded-xl mud-theme-surface">
<MudIcon Icon="@Icons.Material.Filled.Group" Size="Size.Large" Color="Color.Info" Class="mb-2" />
<MudText Typo="Typo.h4" Class="mud-typography-subtitle1">@_userProfile.TotalReferrals</MudText>
<MudText Typo="Typo.caption" Class="mud-text-secondary">معرف‌ها</MudText>
</MudPaper>
</MudItem>
<MudItem xs="12" md="6" lg="3">
<MudPaper Elevation="3" Class="mud-elevation-3 pa-4 text-center rounded-xl mud-theme-surface">
<MudIcon Icon="@Icons.Material.Filled.Star" Size="Size.Large" Color="Color.Warning" Class="mb-2" />
<MudText Typo="Typo.h4" Class="mud-typography-subtitle1">@_userProfile.Level</MudText>
<MudText Typo="Typo.caption" Class="mud-text-secondary">سطح کاربری</MudText>
</MudPaper>
</MudItem>
</MudGrid>
<!-- Account Status -->
<MudPaper Elevation="2" Class="mud-elevation-2 pa-4 mt-4 rounded-xl mud-theme-surface">
<MudText Typo="Typo.subtitle1" Class="mb-3 mud-typography-subtitle1">وضعیت حساب</MudText>
<MudStack Spacing="2">
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
<MudIcon Icon="@Icons.Material.Filled.CheckCircle" Size="Size.Small" Color="Color.Success" />
<MudText Typo="Typo.body2">حساب تأیید شده</MudText>
</MudStack>
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
<MudIcon Icon="@Icons.Material.Filled.CheckCircle" Size="Size.Small" Color="Color.Success" />
<MudText Typo="Typo.body2">ایمیل تأیید شده</MudText>
</MudStack>
<MudStack Row="true" Spacing="2" AlignItems="AlignItems.Center">
<MudIcon Icon="@Icons.Material.Filled.CheckCircle" Size="Size.Small" Color="Color.Success" />
<MudText Typo="Typo.body2">شماره موبایل تأیید شده</MudText>
</MudStack>
</MudStack>
</MudPaper>
</div>
2025-10-07 01:03:58 +03:30
</MudTabPanel>
2025-10-12 18:16:59 +03:30
*@
</MudTabs>
</MudPaper>
</MudItem>
</MudGrid>
</MudContainer>