Update UI for product diversity and version increment

Modified layout in SubProductActionDialogBox.razor to enhance user input for diversity values. Updated AssemblyVersion and FileVersion in Netina.AdminPanel.PWA.csproj to reflect new changes.
Enhance dialog functionality and UI components
2025-04-29 19:39:21 +03:30 · 2025-04-29 19:38:46 +03:30
6 changed files with 343 additions and 104 deletions
--- a/Netina.AdminPanel.PWA/Dialogs/DiscountActionDialogBox.razor.cs
+++ b/Netina.AdminPanel.PWA/Dialogs/DiscountActionDialogBox.razor.cs
@ -181,8 +181,6 @@ public class DiscountActionDialogBoxViewModel : BaseViewModel<DiscountLDto>
    }


-
-
    public void Cancel() => _mudDialog.Cancel();

    public async Task SubmitCreateAsync()
--- a/Netina.AdminPanel.PWA/Dialogs/PageActionDialogBox.razor
+++ b/Netina.AdminPanel.PWA/Dialogs/PageActionDialogBox.razor
@ -30,43 +30,21 @@

                </MudGrid>

+                <MudStack Row="true">
+                    <MudStack Spacing="0" class="mt-3">
+                        <MudText Typo="Typo.h6"><b>سکشن ها</b></MudText>
+                        <MudText Typo="Typo.caption">اطلاعات سکشن ها را می توانید تغییر دهید</MudText>
+                    </MudStack>
+                    <MudSpacer />
+                    <MudButton Variant="Variant.Filled"
+                               DisableElevation="true"
+                               StartIcon="@Icons.Material.Outlined.Add"
+                               Color="Color.Secondary"
+                               OnClick="@ViewModel.AddSection"
+                               class="my-auto">افزودن سکشن</MudButton>
+                </MudStack>
                <MudGrid>
-                    <MudItem sm="12" md="6" lg="4">
-                        <MudTextField T="string" Label="عنوان سکشن" @bind-Value="@ViewModel.Section.Title" Variant="Variant.Outlined"></MudTextField>
-                    </MudItem>
-                    <MudItem sm="12" md="6" lg="4">
-                        <MudTextField T="string" Label="عنوان دکمه" @bind-Value="@ViewModel.Section.CTAText" Variant="Variant.Outlined"></MudTextField>
-                    </MudItem>
-                    <MudItem sm="12" md="6" lg="4">
-                        <MudTextField T="string" Label="آدرس دکمه" @bind-Value="@ViewModel.Section.CTARoute" Variant="Variant.Outlined"></MudTextField>
-                    </MudItem>
                    <MudItem sm="12">
-                        <MudTextField T="string" Label="توضیحاتــ" @bind-Value="@ViewModel.Section.Description" Variant="Variant.Outlined"></MudTextField>
-                    </MudItem>
-                    <MudItem sm="12" md="4">
-
-                        <MudSelect Variant="Variant.Outlined" T="BasePageSectionType"
-                                   ToStringFunc="type => type.ToDisplay()"
-                                   Label="نوع سکشن"
-                                   @bind-Value="@ViewModel.Section.Type">
-                            @foreach (var state in Enum.GetValues(typeof(BasePageSectionType)).Cast<BasePageSectionType>())
-                            {
-                                <MudSelectItem T="BasePageSectionType" Value="state"></MudSelectItem>
-                            }
-                        </MudSelect>
-                    </MudItem>
-                    <MudItem sm="12" md="6">
-                        <MudTextField T="string" Label="کوئری" @bind-Value="@ViewModel.Section.Query" Variant="Variant.Outlined"></MudTextField>
-                    </MudItem>
-                    <MudItem sm="12" md="2">
-                        <BaseButtonUi class="w-64 rounded-md mt-3" IsProcessing="@ViewModel.IsProcessing"
-                                      Icon="@Icons.Material.Outlined.Check"
-                                      Variant="Variant.Filled" Color="Color.Success"
-                                      Content="افزودن" OnClickCallback="@ViewModel.AddSection" />
-                    </MudItem>
-
-                    <MudItem sm="12">
-
                        <MudDataGrid Items="@ViewModel.PageDto.Sections"
                                     T="BasePageSection"
                                     Elevation="0"
@ -91,6 +69,13 @@
                                                       OnClick="()=>ViewModel.PageDto.Sections.Remove(context.Item)"
                                                       Color="@Color.Error"
                                                       StartIcon="@Icons.Material.Outlined.Delete">حذف</MudButton>
+
+                                            <MudButton DisableElevation="true"
+                                                       Size="@Size.Small"
+                                                       Variant="@Variant.Filled"
+                                                       OnClick="async()=>await ViewModel.EditSection(context.Item)"
+                                                       Color="@Color.Info"
+                                                       StartIcon="@Icons.Material.Outlined.Edit">ویرایش</MudButton>
                                        </MudStack>
                                    </CellTemplate>
                                </TemplateColumn>
--- a/Netina.AdminPanel.PWA/Dialogs/PageActionDialogBox.razor.cs
+++ b/Netina.AdminPanel.PWA/Dialogs/PageActionDialogBox.razor.cs
@ -1,4 +1,6 @@
-using Netina.Domain.Entities.Warehouses;
+using Netina.Domain.Entities.Blogs;
+using Netina.Domain.Entities.Warehouses;
+using System.Reflection.Metadata;

 namespace Netina.AdminPanel.PWA.Dialogs;

@ -73,14 +75,40 @@ public class PageActionDialogBoxViewModel : BaseViewModel<BasePageLDto>

    public void Cancel() => _mudDialog.Cancel();

-    public BasePageSection Section { get; set; } = new();
-    public void AddSection()
+    public async Task AddSection()
    {
        try
        {
-            if (Section.Title.IsNullOrEmpty())
-                throw new Exception("نام سکشن را وارد کنید");
-            PageDto.Sections.Add(Section);
+
+            DialogOptions maxWidth = new DialogOptions() { MaxWidth = MaxWidth.Medium, FullWidth = true, DisableBackdropClick = true };
+            var dialog = await _dialogService.ShowAsync<PageSectionActionDialogBox>("افزودن سکشن", maxWidth);
+            var result = await dialog.Result;
+            var file = result.Data;
+            if (file is BasePageSection section)
+                PageDto.Sections.Add(section);
+        }
+        catch (Exception ex)
+        {
+            _snackbar.Add(ex.Message, Severity.Error);
+        }
+    }
+
+    public async Task EditSection(BasePageSection sec)
+    {
+        try
+        {
+
+            DialogOptions maxWidth = new DialogOptions() { MaxWidth = MaxWidth.Medium, FullWidth = true, DisableBackdropClick = true };
+            var parameters = new DialogParameters<PageSectionActionDialogBox>();
+            parameters.Add(x => x.Page, sec);
+            var dialog = await _dialogService.ShowAsync<PageSectionActionDialogBox>("ویرایش سکشن",parameters, maxWidth);
+            var result = await dialog.Result;
+            var file = result.Data;
+            if (file is BasePageSection section)
+            {
+                PageDto.Sections.Remove(sec);
+                PageDto.Sections.Add(section);
+            }
        }
        catch (Exception ex)
        {
--- a/Netina.AdminPanel.PWA/Dialogs/PageSectionActionDialogBox.razor
+++ b/Netina.AdminPanel.PWA/Dialogs/PageSectionActionDialogBox.razor
@ -0,0 +1,150 @@
+@inject ISnackbar Snackbar
+@inject IRestWrapper RestWrapper
+@inject IUserUtility UserUtility
+@inject IDialogService DialogService
+
+<MudDialog DisableSidePadding="true" class="mx-auto">
+    <DialogContent>
+        <MudContainer class="max-h-[30rem]" Style="overflow-y: scroll">
+            <MudStack>
+                <MudDivider class="-mt-3" />
+                <MudStack Spacing="0">
+                    <MudText Typo="Typo.h6"><b>اطلاعات کلی</b></MudText>
+                    <MudText Typo="Typo.caption">اطلاعات کلی سکشن را با دقت وارد کنید</MudText>
+                </MudStack>
+
+                <MudGrid>
+                    <MudItem sm="12" md="6" lg="4">
+                        <MudTextField T="string" Label="عنوان سکشن" @bind-Value="@ViewModel.PageDto.Title" Variant="Variant.Outlined"></MudTextField>
+                    </MudItem>
+                    <MudItem sm="12" md="6" lg="4">
+                        <MudTextField T="string" Label="عنوان دکمه" @bind-Value="@ViewModel.PageDto.CTAText" Variant="Variant.Outlined"></MudTextField>
+                    </MudItem>
+                    <MudItem sm="12" md="6" lg="4">
+                        <MudTextField T="string" Label="آدرس دکمه" @bind-Value="@ViewModel.PageDto.CTARoute" Variant="Variant.Outlined"></MudTextField>
+                    </MudItem>
+                    <MudItem sm="12">
+                        <MudTextField T="string" Label="توضیحاتــ" @bind-Value="@ViewModel.PageDto.Description" Variant="Variant.Outlined"></MudTextField>
+                    </MudItem>
+                    <MudItem sm="12" md="4">
+
+                        <MudSelect Variant="Variant.Outlined" T="BasePageSectionType"
+                                   ToStringFunc="type => type.ToDisplay()"
+                                   Label="نوع سکشن"
+                                   @bind-Value="@ViewModel.PageDto.Type">
+                            @foreach (var state in Enum.GetValues(typeof(BasePageSectionType)).Cast<BasePageSectionType>())
+                            {
+                                <MudSelectItem T="BasePageSectionType" Value="state"></MudSelectItem>
+                            }
+                        </MudSelect>
+                    </MudItem>
+                    <MudItem sm="12" md="8">
+                        <MudTextField T="string" Label="کوئری" @bind-Value="@ViewModel.PageDto.Query" Variant="Variant.Outlined"></MudTextField>
+                    </MudItem>
+
+                </MudGrid>
+
+                <MudStack Spacing="0">
+                    <MudText Typo="Typo.h6"><b>ایتم ها</b></MudText>
+                    <MudText Typo="Typo.caption">ایتم های سکشن را به دستی میتوانید تغییر دهید</MudText>
+                </MudStack>
+                <MudGrid>
+                    <MudItem sm="12" md="5">
+                        <MudTextField T="string" Label="عنوان ایتم" @bind-Value="@ViewModel.SelectedSectionItem.Title" Variant="Variant.Outlined"></MudTextField>
+                    </MudItem>
+                    <MudItem sm="12" md="7">
+                        <MudTextField T="string" Label="توضیحات ایتم" @bind-Value="@ViewModel.SelectedSectionItem.Description" Variant="Variant.Outlined"></MudTextField>
+                    </MudItem>
+                    <MudItem sm="12" md="8">
+                        <MudTextField T="string" Label="ادرس ایتم" @bind-Value="@ViewModel.SelectedSectionItem.Url" Variant="Variant.Outlined"></MudTextField>
+                    </MudItem>
+                    <MudItem sm="12" md="4">
+                        <MudStack Row="true" class="mt-3">
+                            @if (ViewModel.IsFileSelected)
+                            {
+                                <MudButton Variant="Variant.Filled" Size="Size.Large" Color="Color.Info" OnClick="@ViewModel.SelectFileAsync">تغییر عکس</MudButton>
+                            }
+                            else
+                            {
+                                <MudButton Variant="Variant.Outlined" Size="Size.Large" Color="Color.Info" OnClick="@ViewModel.SelectFileAsync">انتخاب عکس</MudButton>
+                            }
+
+                            <MudButton Variant="Variant.Outlined" Size="Size.Large" Color="Color.Success" OnClick="@ViewModel.AddItem">افزودن</MudButton>
+                        </MudStack>
+                    </MudItem>
+
+                    <MudItem sm="12">
+                        <MudDataGrid Items="@ViewModel.PageDto.SectionItems"
+                                     T="SectionItem"
+                                     Elevation="0"
+                                     Outlined="true"
+                                     Bordered="true"
+                                     Striped="true"
+                                     Filterable="false"
+                                     SortMode="@SortMode.None"
+                                     Groupable="false">
+                            <Columns>
+                                <PropertyColumn T="SectionItem" TProperty="string" Property="x => x.Title" Title="عنوان" />
+                                <PropertyColumn T="SectionItem" TProperty="string" Property="x => x.Url" Title="آدرس" />
+                                <TemplateColumn T="SectionItem" CellClass="d-flex justify-end">
+                                    <CellTemplate>
+                                        <MudStack Row>
+                                            <MudButton DisableElevation="true"
+                                                       Size="@Size.Small"
+                                                       Variant="@Variant.Filled"
+                                                       OnClick="()=>ViewModel.PageDto.SectionItems.Remove(context.Item)"
+                                                       Color="@Color.Error"
+                                                       StartIcon="@Icons.Material.Outlined.Delete">حذف</MudButton>
+                                        </MudStack>
+                                    </CellTemplate>
+                                </TemplateColumn>
+                            </Columns>
+                        </MudDataGrid>
+                    </MudItem>
+                </MudGrid>
+
+            </MudStack>
+        </MudContainer>
+    </DialogContent>
+    <DialogActions>
+        <MudStack Row="true" class="w-full mx-4 mb-2">
+
+            @if (ViewModel.IsEditing)
+            {
+                <BaseButtonUi class="w-64 rounded-md" IsProcessing="@ViewModel.IsProcessing"
+                              Icon="@Icons.Material.Outlined.Check"
+                              Variant="Variant.Filled" Color="Color.Success"
+                              Content="ثبت ویرایش" OnClickCallback="@ViewModel.Submit" />
+            }
+            else
+            {
+                <BaseButtonUi class="w-64 rounded-md" IsProcessing="@ViewModel.IsProcessing"
+                              Icon="@Icons.Material.Outlined.Check"
+                              Variant="Variant.Filled" Color="Color.Success"
+                              Content="تایید" OnClickCallback="@ViewModel.Submit" />
+            }
+            <MudSpacer />
+            <MudButton Variant="Variant.Outlined" Size="Size.Large" Color="Color.Error" OnClick="@ViewModel.Cancel">بستن</MudButton>
+        </MudStack>
+    </DialogActions>
+</MudDialog>
+@code {
+
+    [CascadingParameter]
+    MudDialogInstance MudDialog { get; set; }
+
+    [Parameter]
+    public BasePageSection? Page { get; set; }
+
+    public PageSectionActionDialogBoxViewModel ViewModel { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        if (Page == null)
+            ViewModel = new PageSectionActionDialogBoxViewModel(Snackbar, RestWrapper, UserUtility, DialogService, MudDialog);
+        else
+            ViewModel = new PageSectionActionDialogBoxViewModel(Snackbar, RestWrapper, UserUtility, DialogService, MudDialog, Page);
+        await ViewModel.InitializeAsync();
+        await base.OnInitializedAsync();
+    }
+}
--- a/Netina.AdminPanel.PWA/Dialogs/PageSectionActionDialogBox.razor.cs
+++ b/Netina.AdminPanel.PWA/Dialogs/PageSectionActionDialogBox.razor.cs
@ -0,0 +1,78 @@
+using MudBlazor;
+
+namespace Netina.AdminPanel.PWA.Dialogs;
+
+public class PageSectionActionDialogBoxViewModel : BaseViewModel<BasePageSection>
+{
+    private readonly ISnackbar _snackbar;
+    private readonly IRestWrapper _restWrapper;
+    private readonly IUserUtility _userUtility;
+    private readonly IDialogService _dialogService;
+    private readonly MudDialogInstance _mudDialog;
+
+    public bool IsEditing = false;
+
+
+    public PageSectionActionDialogBoxViewModel(ISnackbar snackbar,
+        IRestWrapper restWrapper,
+        IUserUtility userUtility,
+        IDialogService dialogService,
+        MudDialogInstance mudDialog) : base(userUtility)
+    {
+        _snackbar = snackbar;
+        _restWrapper = restWrapper;
+        _userUtility = userUtility;
+        _dialogService = dialogService;
+        _mudDialog = mudDialog;
+    }
+
+    public PageSectionActionDialogBoxViewModel(ISnackbar snackbar,
+        IRestWrapper restWrapper,
+        IUserUtility userUtility,
+        IDialogService dialogService,
+        MudDialogInstance mudDialog,
+        BasePageSection page) : base(userUtility)
+    {
+        _snackbar = snackbar;
+        _restWrapper = restWrapper;
+        _userUtility = userUtility;
+        _dialogService = dialogService;
+        _mudDialog = mudDialog;
+        IsEditing = true;
+        PageDto = page;
+    }
+
+    public void Cancel() => _mudDialog.Cancel();
+
+    public void Submit()
+    {
+        _snackbar.Add($"ویرایش {PageDto.Title} با موفقیت انجام شد", Severity.Success);
+        _mudDialog.Close(DialogResult.Ok(PageDto));
+    }
+
+    public SectionItem SelectedSectionItem { get; set; } = new();
+    public StorageFileSDto SelectedFile { get; set; } = new();
+    public bool IsFileSelected { get; set; } = false;
+    public void AddItem()
+    {
+        SelectedSectionItem.ImageLocation = SelectedFile.FileLocation;
+        PageDto.SectionItems.Add(SelectedSectionItem);
+        SelectedSectionItem = new SectionItem();
+        SelectedFile = new StorageFileSDto();
+        IsFileSelected = false;
+    }
+
+
+    public async Task SelectFileAsync()
+    {
+        DialogOptions maxWidth = new DialogOptions() { MaxWidth = MaxWidth.Medium, FullWidth = true, DisableBackdropClick = true };
+        var dialog = await _dialogService.ShowAsync<StorageDialogBox>("انتخاب عکس", maxWidth);
+        var result = await dialog.Result;
+        var file = result.Data;
+        if (file is StorageFileSDto storageFile)
+        {
+            SelectedFile = storageFile;
+            IsFileSelected = true;
+        }
+    }
+}
--- a/Netina.AdminPanel.PWA/wwwroot/css/app.min.css
+++ b/Netina.AdminPanel.PWA/wwwroot/css/app.min.css
@ -105,7 +105,7 @@
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
 }/*
-! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com
 *//*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@ -496,7 +496,7 @@ video {
 }

 /* Make elements with the HTML hidden attribute stay hidden by default */
-[hidden]:where(:not([hidden="until-found"])) {
+[hidden] {
  display: none;
 }

@ -1546,47 +1546,47 @@ input:checked + .toggle-bg {
 }
 .border-blue-400 {
  --tw-border-opacity: 1;
-  border-color: rgb(118 169 250 / var(--tw-border-opacity, 1));
+  border-color: rgb(118 169 250 / var(--tw-border-opacity));
 }
 .border-blue-500 {
  --tw-border-opacity: 1;
-  border-color: rgb(63 131 248 / var(--tw-border-opacity, 1));
+  border-color: rgb(63 131 248 / var(--tw-border-opacity));
 }
 .border-blue-600 {
  --tw-border-opacity: 1;
-  border-color: rgb(28 100 242 / var(--tw-border-opacity, 1));
+  border-color: rgb(28 100 242 / var(--tw-border-opacity));
 }
 .border-blue-700 {
  --tw-border-opacity: 1;
-  border-color: rgb(26 86 219 / var(--tw-border-opacity, 1));
+  border-color: rgb(26 86 219 / var(--tw-border-opacity));
 }
 .border-gray-100 {
  --tw-border-opacity: 1;
-  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
+  border-color: rgb(243 244 246 / var(--tw-border-opacity));
 }
 .border-gray-200 {
  --tw-border-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
+  border-color: rgb(229 231 235 / var(--tw-border-opacity));
 }
 .border-gray-300 {
  --tw-border-opacity: 1;
-  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
 .border-indigo-500 {
  --tw-border-opacity: 1;
-  border-color: rgb(104 117 245 / var(--tw-border-opacity, 1));
+  border-color: rgb(104 117 245 / var(--tw-border-opacity));
 }
 .border-violet-400 {
  --tw-border-opacity: 1;
-  border-color: rgb(167 139 250 / var(--tw-border-opacity, 1));
+  border-color: rgb(167 139 250 / var(--tw-border-opacity));
 }
 .bg-\[\#000000\] {
  --tw-bg-opacity: 1;
-  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
 }
 .bg-\[\#EEEEEE\] {
  --tw-bg-opacity: 1;
-  background-color: rgb(238 238 238 / var(--tw-bg-opacity, 1));
+  background-color: rgb(238 238 238 / var(--tw-bg-opacity));
 }
 .bg-\[--mud-palette-background-grey\] {
  background-color: var(--mud-palette-background-grey);
@ -1596,41 +1596,41 @@ input:checked + .toggle-bg {
 }
 .bg-amber-500 {
  --tw-bg-opacity: 1;
-  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
+  background-color: rgb(245 158 11 / var(--tw-bg-opacity));
 }
 .bg-blue-500 {
  --tw-bg-opacity: 1;
-  background-color: rgb(63 131 248 / var(--tw-bg-opacity, 1));
+  background-color: rgb(63 131 248 / var(--tw-bg-opacity));
 }
 .bg-blue-700 {
  --tw-bg-opacity: 1;
-  background-color: rgb(26 86 219 / var(--tw-bg-opacity, 1));
+  background-color: rgb(26 86 219 / var(--tw-bg-opacity));
 }
 .bg-gray-100 {
  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
 .bg-gray-200 {
  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 .bg-gray-800 {
  --tw-bg-opacity: 1;
-  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }
 .bg-gray-900\/50 {
  background-color: rgb(17 24 39 / 0.5);
 }
 .bg-pink-500 {
  --tw-bg-opacity: 1;
-  background-color: rgb(231 70 148 / var(--tw-bg-opacity, 1));
+  background-color: rgb(231 70 148 / var(--tw-bg-opacity));
 }
 .bg-transparent {
  background-color: transparent;
 }
 .bg-white {
  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 .bg-white\/50 {
  background-color: rgb(255 255 255 / 0.5);
@ -1774,51 +1774,51 @@ input:checked + .toggle-bg {
 }
 .\!text-black {
  --tw-text-opacity: 1 !important;
-  color: rgb(0 0 0 / var(--tw-text-opacity, 1)) !important;
+  color: rgb(0 0 0 / var(--tw-text-opacity)) !important;
 }
 .text-amber-600 {
  --tw-text-opacity: 1;
-  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
+  color: rgb(217 119 6 / var(--tw-text-opacity));
 }
 .text-blue-600 {
  --tw-text-opacity: 1;
-  color: rgb(28 100 242 / var(--tw-text-opacity, 1));
+  color: rgb(28 100 242 / var(--tw-text-opacity));
 }
 .text-gray-500 {
  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
+  color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 .text-gray-600 {
  --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+  color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 .text-gray-800 {
  --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
+  color: rgb(31 41 55 / var(--tw-text-opacity));
 }
 .text-gray-900 {
  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+  color: rgb(17 24 39 / var(--tw-text-opacity));
 }
 .text-lime-600 {
  --tw-text-opacity: 1;
-  color: rgb(101 163 13 / var(--tw-text-opacity, 1));
+  color: rgb(101 163 13 / var(--tw-text-opacity));
 }
 .text-purple-600 {
  --tw-text-opacity: 1;
-  color: rgb(126 58 242 / var(--tw-text-opacity, 1));
+  color: rgb(126 58 242 / var(--tw-text-opacity));
 }
 .text-rose-600 {
  --tw-text-opacity: 1;
-  color: rgb(225 29 72 / var(--tw-text-opacity, 1));
+  color: rgb(225 29 72 / var(--tw-text-opacity));
 }
 .text-violet-500 {
  --tw-text-opacity: 1;
-  color: rgb(139 92 246 / var(--tw-text-opacity, 1));
+  color: rgb(139 92 246 / var(--tw-text-opacity));
 }
 .text-white {
  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 .opacity-0 {
  opacity: 0;
@ -2087,42 +2087,42 @@ code {

 .hover\:border-gray-300:hover {
  --tw-border-opacity: 1;
-  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }

 .hover\:bg-blue-800:hover {
  --tw-bg-opacity: 1;
-  background-color: rgb(30 66 159 / var(--tw-bg-opacity, 1));
+  background-color: rgb(30 66 159 / var(--tw-bg-opacity));
 }

 .hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }

 .hover\:bg-white:hover {
  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }

 .hover\:text-blue-600:hover {
  --tw-text-opacity: 1;
-  color: rgb(28 100 242 / var(--tw-text-opacity, 1));
+  color: rgb(28 100 242 / var(--tw-text-opacity));
 }

 .hover\:text-gray-600:hover {
  --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
+  color: rgb(75 85 99 / var(--tw-text-opacity));
 }

 .hover\:text-gray-900:hover {
  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
+  color: rgb(17 24 39 / var(--tw-text-opacity));
 }

 .focus\:border-teal-500:focus {
  --tw-border-opacity: 1;
-  border-color: rgb(6 148 162 / var(--tw-border-opacity, 1));
+  border-color: rgb(6 148 162 / var(--tw-border-opacity));
 }

 .focus\:outline-none:focus {
@ -2144,32 +2144,32 @@ code {

 .focus\:ring-blue-300:focus {
  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity, 1));
+  --tw-ring-color: rgb(164 202 254 / var(--tw-ring-opacity));
 }

 .focus\:ring-gray-200:focus {
  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity, 1));
+  --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
 }

 .focus\:ring-teal-500:focus {
  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(6 148 162 / var(--tw-ring-opacity, 1));
+  --tw-ring-color: rgb(6 148 162 / var(--tw-ring-opacity));
 }

 .dark\:border-blue-500:is(.dark *) {
  --tw-border-opacity: 1;
-  border-color: rgb(63 131 248 / var(--tw-border-opacity, 1));
+  border-color: rgb(63 131 248 / var(--tw-border-opacity));
 }

 .dark\:border-gray-600:is(.dark *) {
  --tw-border-opacity: 1;
-  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
+  border-color: rgb(75 85 99 / var(--tw-border-opacity));
 }

 .dark\:border-gray-700:is(.dark *) {
  --tw-border-opacity: 1;
-  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
+  border-color: rgb(55 65 81 / var(--tw-border-opacity));
 }

 .dark\:border-transparent:is(.dark *) {
@ -2178,22 +2178,22 @@ code {

 .dark\:bg-blue-600:is(.dark *) {
  --tw-bg-opacity: 1;
-  background-color: rgb(28 100 242 / var(--tw-bg-opacity, 1));
+  background-color: rgb(28 100 242 / var(--tw-bg-opacity));
 }

 .dark\:bg-gray-600:is(.dark *) {
  --tw-bg-opacity: 1;
-  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }

 .dark\:bg-gray-700:is(.dark *) {
  --tw-bg-opacity: 1;
-  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
 }

 .dark\:bg-gray-800:is(.dark *) {
  --tw-bg-opacity: 1;
-  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }

 .dark\:bg-gray-800\/50:is(.dark *) {
@ -2206,47 +2206,47 @@ code {

 .dark\:text-blue-500:is(.dark *) {
  --tw-text-opacity: 1;
-  color: rgb(63 131 248 / var(--tw-text-opacity, 1));
+  color: rgb(63 131 248 / var(--tw-text-opacity));
 }

 .dark\:text-gray-400:is(.dark *) {
  --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+  color: rgb(156 163 175 / var(--tw-text-opacity));
 }

 .dark\:text-white:is(.dark *) {
  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }

 .dark\:hover\:bg-blue-700:hover:is(.dark *) {
  --tw-bg-opacity: 1;
-  background-color: rgb(26 86 219 / var(--tw-bg-opacity, 1));
+  background-color: rgb(26 86 219 / var(--tw-bg-opacity));
 }

 .dark\:hover\:bg-gray-600:hover:is(.dark *) {
  --tw-bg-opacity: 1;
-  background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1));
+  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
 }

 .dark\:hover\:bg-gray-800:hover:is(.dark *) {
  --tw-bg-opacity: 1;
-  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
 }

 .dark\:hover\:text-blue-500:hover:is(.dark *) {
  --tw-text-opacity: 1;
-  color: rgb(63 131 248 / var(--tw-text-opacity, 1));
+  color: rgb(63 131 248 / var(--tw-text-opacity));
 }

 .dark\:hover\:text-gray-300:hover:is(.dark *) {
  --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
+  color: rgb(209 213 219 / var(--tw-text-opacity));
 }

 .dark\:hover\:text-white:hover:is(.dark *) {
  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+  color: rgb(255 255 255 / var(--tw-text-opacity));
 }

@media (min-width: 640px) {