Enhance dialog functionality and UI components

- Updated `DiscountActionDialogBoxViewModel` to include asynchronous `SubmitCreateAsync` and `Cancel` methods. - Added a new section in `PageActionDialogBox.razor` with a `MudStack` for adding sections, removing the previous grid layout. - Improved `PageActionDialogBox.razor.cs` with new methods for adding and editing sections, enhancing error handling and dialog management. - Refined `app.min.css` by removing redundant CSS properties for better style application. - Created a new dialog in `PageSectionActionDialogBox.razor` for managing section details, including fields for title, button text, and URL. - Introduced a new view model in `PageSectionActionDialogBox.razor.cs` to handle section dialog logic, including item addition and file selection. - Updated `BasePageSection` class in `BasePage.cs` to manage multiple `SectionItem` objects. - Modified project files (`Netina.Common.csproj` and `Netina.Domain.csproj`) to update the target framework and package references for compatibility.
2025-04-29 19:38:46 +03:30 · 2025-04-29 19:38:46 +03:30 · 0dc18a0bc4
parent 6b8eaac49c
commit 0dc18a0bc4
6 changed files with 342 additions and 106 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,7 +1,6 @@
-using Microsoft.AspNetCore.Components;
-using MudBlazor;
-using Netina.AdminPanel.PWA.Services.RestServices;
+using Netina.Domain.Entities.Blogs;
 using Netina.Domain.Entities.Warehouses;
+using System.Reflection.Metadata;

 namespace Netina.AdminPanel.PWA.Dialogs;

@ -50,7 +49,7 @@ public class PageActionDialogBoxViewModel : BaseViewModel<BasePageLDto>
            var token = await _userUtility.GetBearerTokenAsync();
            if (token == null)
                throw new Exception("Token is null");
-            var pages = await _restWrapper.PageRestApi.ReadById(PageId,token);
+            var pages = await _restWrapper.PageRestApi.ReadById(PageId, token);
            PageDto = pages;
        }
        catch (ApiException e)
@ -76,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) {