Aggiunta modifica esito

Template.Maui/wwwroot/index.html

@@ -18,6 +18,7 @@
     <link rel="stylesheet" href="_content/Template.Shared/css/remixicon/remixicon.css"/>
     <link rel="stylesheet" href="_content/Template.Shared/css/app.css"/>
     <link rel="stylesheet" href="_content/Template.Shared/css/form.css"/>
+    <link rel="stylesheet" href="_content/Template.Shared/css/bottomSheet.css"/>
     <link rel="stylesheet" href="_content/Template.Shared/css/default-theme.css"/>
     <link rel="stylesheet" href="Template.Maui.styles.css"/>
     <link rel="icon" type="image/png" href="favicon.png"/>
@@ -51,7 +52,7 @@
 <script src="_content/CodeBeam.MudBlazor.Extensions/MudExtensions.min.js"></script>
 <script src="_content/Template.Shared/js/main.js"></script>
 <script src="_content/Template.Shared/js/calendar.js"></script>
-<script src="_content/Template.Shared/js/bottomSheet.js"></script>
+<script src="_content/Template.Shared/js/alphaScroll.js"></script>
 
 </body>
 

Template.Shared/Components/Layout/HeaderLayout.razor

@@ -1,6 +1,6 @@
 @inject IJSRuntime JS
 
-<div class="container header">
+<div class="@(Back ? "" : "container") header">
     <div class="header-content @(Back ? "with-back" : "no-back")">
         @if (Back)
         {
@@ -24,9 +24,15 @@
                 {
                     <MudIconButton OnClick="OnFilterToggle" Icon="@Icons.Material.Outlined.FilterAlt" Color="Color.Dark"/>
                 }
-                @if (ShowCalendarToggle)
+
+                @* @if (ShowCalendarToggle)
                 {
                     <MudIconButton OnClick="OnCalendarToggle" Icon="@Icons.Material.Filled.CalendarMonth" Color="Color.Dark"/>
+                } *@
+
+                @if (ShowProfile)
+                {
+                    <MudIconButton Class="user" OnClick="OpenPersonalInfo" Icon="@Icons.Material.Filled.Person" Color="Color.Dark"/>
                 }
             }
             else
@@ -45,8 +51,9 @@
 @code{
     [Parameter] public string? Title { get; set; }
     [Parameter] public bool ShowFilter { get; set; }
-    [Parameter] public bool ShowNotifications { get; set; } = true;
+    [Parameter] public bool ShowProfile { get; set; } = true;
     [Parameter] public bool Back { get; set; }
+    [Parameter] public bool BackOnTop { get; set; }
     [Parameter] public string BackTo { get; set; } = "";
 
     [Parameter] public EventCallback OnFilterToggle { get; set; }
@@ -74,7 +81,9 @@
         }
 
         await JS.InvokeVoidAsync("goBack");
-
     }
 
+    private void OpenPersonalInfo() =>
+        NavigationManager.NavigateTo("/PersonalInfo");
+
 }

Template.Shared/Components/Layout/HeaderLayout.razor.css

@@ -6,8 +6,6 @@
     position: relative;
 }
 
-.header-content.with-back { margin: .6rem 0 0 0; }
-
 .header-content.with-back .page-title {
     position: absolute;
     left: 50%;
@@ -16,14 +14,10 @@
     font-size: larger;
 }
 
-.left-section ::deep button, .right-section ::deep button {
+.right-section { min-height: 45px; }
-    font-size: 1.1rem;
-}
 
-.left-section ::deep .mud-button-icon-start {
+.left-section ::deep button, .right-section ::deep button { font-size: 1.1rem; }
-    margin-right: 3px !important;
-}
 
-.header-content.no-back .page-title {
+.left-section ::deep .mud-button-icon-start { margin-right: 3px !important; }
-    margin: 0;
+
-}
+.header-content.no-back .page-title { margin: 0; }

Template.Shared/Components/Layout/NavMenu.razor

@@ -1,16 +1,14 @@
 @inject IDialogService Dialog
 
-@if (IsVisible)
+<div class="container animated-navbar @(IsVisible ? "show-nav" : "hide-nav") @(IsVisible? PlusVisible ? "with-plus" : "without-plus" : "with-plus")">
-{
+    <nav class="navbar @(IsVisible? PlusVisible ? "with-plus" : "without-plus" : "with-plus")">
-    <nav class="navbar navbar-expand justify-content-center">
         <div class="container-navbar">
-            <ul class="navbar-nav nav-justified align-items-center w-100 text-center">
+            <ul class="navbar-nav flex-row nav-justified align-items-center w-100 text-center">
-
                 <li class="nav-item">
                     <NavLink class="nav-link" href="Users" Match="NavLinkMatch.All">
                         <div class="d-flex flex-column">
                             <i class="ri-group-line"></i>
-                            @* <span>Contatti</span> *@
+                            <span>Contatti</span>
                         </div>
                     </NavLink>
                 </li>
@@ -18,47 +16,40 @@
                     <NavLink class="nav-link" href="Calendar" Match="NavLinkMatch.All">
                         <div class="d-flex flex-column">
                             <i class="ri-calendar-todo-line"></i>
-                            @* <span>Agenda</span> *@
+                            <span>Agenda</span>
                         </div>
                     </NavLink>
                 </li>
+                <li class="nav-item">
+                    <NavLink class="nav-link" href="Notifications" Match="NavLinkMatch.All">
+                        <div class="d-flex flex-column">
+                            <i class="ri-notification-4-line"></i>
+                            <span>Notifiche</span>
+                        </div>
+                    </NavLink>
+                </li>
+            </ul>
+        </div>
 
-
+        @if (PlusVisible)
-                <li class="nav-item plus-button">
+        {
-                    <MudMenu PopoverClass="custom_popover" AnchorOrigin="Origin.TopCenter" TransformOrigin="Origin.BottomCenter">
+            <MudMenu PopoverClass="custom_popover" AnchorOrigin="Origin.TopLeft" TransformOrigin="Origin.BottomRight">
                 <ActivatorContent>
-                            <MudFab Class="custom-plus-button" Color="Color.Primary" Size="Size.Medium" IconSize="Size.Medium" StartIcon="@Icons.Material.Filled.Add"/>
+                    <MudFab Class="custom-plus-button" Color="Color.Surface" Size="Size.Medium" IconSize="Size.Medium" IconColor="Color.Primary" StartIcon="@Icons.Material.Filled.Add" />
                 </ActivatorContent>
                 <ChildContent>
                     <MudMenuItem Disabled="true">Nuovo contatto</MudMenuItem>
                     <MudMenuItem OnClick="() => ModalHelpers.OpenActivityForm(Dialog)">Nuova attivit<69></MudMenuItem>
                 </ChildContent>
             </MudMenu>
-                </li>
-
-                <li class="nav-item">
-                    <NavLink class="nav-link" href="Notification" Match="NavLinkMatch.All">
-                        <div class="d-flex flex-column">
-                            <i class="ri-notification-4-line"></i>
-                        </div>
-                    </NavLink>
-                </li>
-                <li class="nav-item">
-                    <NavLink class="nav-link" href="PersonalInfo" Match="NavLinkMatch.All">
-                        <div class="d-flex flex-column">
-                            <i class="ri-user-line"></i>
-                            @* <span>Profilo</span> *@
-                        </div>
-                    </NavLink>
-                </li>
-            </ul>
-        </div>
-    </nav>
         }
+    </nav>
+</div>
 
 @code
 {
     private bool IsVisible { get; set; } = true;
+    private bool PlusVisible { get; set; } = true;
 
     protected override Task OnInitializedAsync()
     {
@@ -66,10 +57,19 @@
         {
             var location = args.Location.Remove(0, NavigationManager.BaseUri.Length);
 
-            IsVisible = new List<string> { "Calendar", "Users", "PersonalInfo" }
+            var newIsVisible = new List<string> { "Calendar", "Users", "Notifications" }
                 .Contains(location);
+
+            var newPlusVisible = new List<string> { "Calendar", "Users" }
+                .Contains(location);
+
+            if (IsVisible == newIsVisible && PlusVisible == newPlusVisible) return;
+
+            IsVisible = newIsVisible;
+            PlusVisible = newPlusVisible;
             StateHasChanged();
         };
         return Task.CompletedTask;
     }
 }
+

Template.Shared/Components/Layout/NavMenu.razor.css

@@ -1,17 +1,41 @@
-.navbar {
+.animated-navbar {
     background: transparent;
     position: fixed;
     bottom: 0;
     width: 100%;
     z-index: 1001;
+    transition: all 0.3s ease-in-out;
+}
+
+.animated-navbar.show-nav { transform: translateY(0); }
+
+.animated-navbar.hide-nav { transform: translateY(100%); }
+
+.animated-navbar.with-plus { margin-left: 30px; }
+
+.navbar {
     padding-bottom: 1rem;
     padding-top: 0 !important;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: end;
+    transition: all 0.3s ease-in-out;
+}
+
+.navbar.with-plus { transform: translateX(-30px); }
+
+.navbar.without-plus {
+    transform: translateX(0);
+    justify-content: center;
 }
 
 .container-navbar {
     background: var(--mud-palette-surface);
-    border-radius: 15px;
+    border-radius: 50px;
+    padding: 0 10px;
     box-shadow: var(--custom-box-shadow);
+    transition: all 0.3s ease-in-out;
 }
 
 .nav-item { font-size: 0.9rem; }
@@ -22,28 +46,32 @@
 }
 
 .nav-item ::deep .custom-plus-button .mud-icon-root {
-    transition: .513s;
+    transition: .5s;
     transform: rotate(0);
     font-size: 2rem;
 }
 
-    .nav-item ::deep .custom-plus-button:focus .mud-icon-root {
+.navbar ::deep .custom-plus-button {
-        transform: rotate(225deg);
+    background: var(--mud-palette-surface);
+    box-shadow: var(--custom-box-shadow);
+    transition: all 0.3s ease-in-out;
 }
 
+.nav-item ::deep .custom-plus-button:focus .mud-icon-root { transform: rotate(225deg); }
+
 .nav-item ::deep a {
     display: flex;
     align-items: center;
     line-height: 1.2;
     justify-content: center;
-    padding-top: .5rem !important;
+    padding-top: .25rem !important;
-    padding-bottom: .5rem !important;
+    padding-bottom: .25rem !important;
 }
 
 .nav-item ::deep a > div {
     -webkit-transition: all .1s ease-out;
     transition: all .1s ease-out;
-    min-width: 60px;
+    min-width: 75px;
 }
 
 .nav-item ::deep a.active > div { color: var(--mud-palette-primary); }
@@ -55,9 +83,7 @@
 
 .nav-item ::deep a.active > div > span { font-weight: 800; }
 
-    .nav-item ::deep a:not(.active) > div {
+.nav-item ::deep a:not(.active) > div { color: var(--mud-palette-text-primary); }
-        color: var(--mud-palette-text-primary);
-    }
 
 .nav-item ::deep a i { font-size: 1.65rem; }
 
@@ -66,8 +92,4 @@
     font-weight: 500;
 }
 
-@supports (-webkit-touch-callout: none) {
+@supports (-webkit-touch-callout: none) { .navbar { padding-bottom: env(safe-area-inset-bottom); } }
-    .nav-item { padding-bottom: env(safe-area-inset-bottom) !important; }
-
-    .nav-item ::deep > .nav-link { padding-bottom: 0 !important; }
-}

Template.Shared/Components/Pages/Calendar.razor

@@ -4,11 +4,11 @@
 @using Template.Shared.Components.Layout
 @using Template.Shared.Components.SingleElements
 @using Template.Shared.Components.Layout.Spinner
-@using Template.Shared.Components.Layout.BottomSheet
+@using Template.Shared.Components.SingleElements.BottomSheet
 @inject IManageDataService ManageData
 @inject IJSRuntime JS
 
-<HeaderLayout Title="@CurrentMonth.ToString("MMMM yyyy", new System.Globalization.CultureInfo("it-IT")).FirstCharToUpper()"
+<HeaderLayout Title="@_headerTitle"
               ShowFilter="true"
               ShowCalendarToggle="true"
               OnFilterToggle="ToggleFilter"
@@ -30,12 +30,37 @@
             <div class="day" style="visibility: hidden"></div>
         }
 
+        @if (_isInitialized && _monthDaysData.Length > 0)
+        {
+            @for (var d = 1; d <= DaysInMonth; d++)
+            {
+                var day = new DateTime(CurrentMonth.Year, CurrentMonth.Month, d);
+                var dayData = _monthDaysData[d - 1];
+
+                <div class="day @dayData.CssClass"
+                     @onclick="() => SelezionaDataDalMese(day)">
+                    <div>@d</div>
+                    @if (dayData.HasEvents)
+                    {
+                        <div class="event-dot-container" style="margin-top: 2px;">
+                            @foreach (var cat in dayData.EventCategories)
+                            {
+                                <div class="event-dot @cat.CssClass" title="@cat.Title"></div>
+                            }
+                        </div>
+                    }
+                </div>
+            }
+        }
+        else
+        {
+            @* Fallback rendering per prima inizializzazione *@
             @for (var d = 1; d <= DaysInMonth; d++)
             {
                 var day = new DateTime(CurrentMonth.Year, CurrentMonth.Month, d);
                 var isSelected = IsSameDay(day, SelectedDate);
                 var isToday = IsSameDay(day, DateTime.Today);
-            var events = ReturnFilteredActivity(day);
+                var events = GetEventsForDay(day);
 
                 <div class="day @(isSelected ? "selected" : (isToday ? "today" : ""))"
                      @onclick="() => SelezionaDataDalMese(day)">
@@ -51,6 +76,7 @@
                     }
                 </div>
             }
+        }
 
         @foreach (var unused in Enumerable.Range(0, EndOffset))
         {
@@ -60,20 +86,54 @@
     else
     {
         <!-- Vista settimanale -->
-        @foreach (var day in DaysOfWeek)
+        @if (_isInitialized && _weekDaysData.Length == 7 && _weekDaysData[0].Date != default)
         {
-            var isSelected = IsSameDay(day, SelectedDate);
+            @for (int i = 0; i < 7; i++)
-            var isToday = IsSameDay(day, DateTime.Today);
+            {
+                var dayData = _weekDaysData[i];
+                var day = dayData.Date;
 
                 <div class="week-day">
-                <div>@day.ToString("ddd", new System.Globalization.CultureInfo("it-IT"))</div>
+                    <div>@dayData.DayName</div>
-                <div class="day @(isSelected ? "selected" : (isToday ? "today" : ""))"
+                    <div class="day @dayData.CssClass"
                          @onclick="() => SelezionaData(day)">
                         <div>@day.Day</div>
-                    @if (ReturnFilteredActivity(day).Any())
+                        @if (dayData.HasEvents)
                         {
                             <div class="event-dot-container" style="margin-top: 2px;">
-                            @foreach (var cat in ReturnFilteredActivity(day).Select(x => x.Category).Distinct())
+                                @foreach (var cat in dayData.EventCategories)
+                                {
+                                    <div class="event-dot @cat.CssClass" title="@cat.Title"></div>
+                                }
+                            </div>
+                        }
+                    </div>
+                </div>
+            }
+        }
+        else
+        {
+            var start = GetStartOfWeek(SelectedDate);
+            var culture = new System.Globalization.CultureInfo("it-IT");
+
+
+            for (var i = 0; i < 7; i++)
+            {
+                var day = start.AddDays(i);
+                var isSelected = IsSameDay(day, SelectedDate);
+                var isToday = IsSameDay(day, DateTime.Today);
+                var events = GetEventsForDay(day);
+
+                <div class="week-day">
+                    <div>@day.ToString("ddd", culture)</div>
+                    <div class="day @(isSelected ? "selected" : (isToday ? "today" : ""))"
+                         @onclick="() => SelezionaData(day)"
+                         aria-label="@day.ToString("dddd d MMMM", culture)">
+                        <div>@day.Day</div>
+                        @if (events.Any())
+                        {
+                            <div class="event-dot-container" style="margin-top: 2px;">
+                                @foreach (var cat in events.Select(x => x.Category).Distinct())
                                 {
                                     <div class="event-dot @cat.ConvertToHumanReadable()" title="@cat.ConvertToHumanReadable()"></div>
                                 }
@@ -83,6 +143,7 @@
                 </div>
             }
         }
+    }
 </div>
 
 <div class="container appointments">
@@ -106,6 +167,19 @@
 
 @code {
 
+    // Modelli per ottimizzazione rendering
+    private record DayData(DateTime Date, string CssClass, bool HasEvents, CategoryData[] EventCategories, string DayName = "");
+
+    private record CategoryData(string CssClass, string Title);
+
+    // Cache per rendering
+    private DayData[] _monthDaysData = Array.Empty<DayData>();
+    private DayData[] _weekDaysData = new DayData[7];
+    private string _headerTitle = string.Empty;
+    private Dictionary<DateTime, List<ActivityDTO>> _eventsCache = new();
+    private Dictionary<DateTime, CategoryData[]> _categoriesCache = new();
+    private bool _isInitialized = false;
+
     // Stato UI
     private bool Expanded { get; set; } = false;
     private string SliderAnimation { get; set; } = string.Empty;
@@ -140,14 +214,9 @@
         }
     }
 
-    // Supporto rendering settimana
+    protected override void OnInitialized()
-    private IEnumerable<DateTime> DaysOfWeek
     {
-        get
+        PrepareRenderingData();
-        {
-            var start = GetStartOfWeek(SelectedDate);
-            return Enumerable.Range(0, 7).Select(i => start.AddDays(i));
-        }
     }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
@@ -161,17 +230,140 @@
             _internalMonth = new DateTime(SelectedDate.Year, SelectedDate.Month, 1);
             await LoadMonthData();
 
-            if (!Expanded)
+            _isInitialized = true;
             ApplyFilter();
-
             StateHasChanged();
         }
     }
 
+    // Metodo per preparare i dati di rendering una sola volta
+    private void PrepareRenderingData()
+    {
+        PrepareHeaderTitle();
+        PrepareEventsCache();
+
+        if (Expanded)
+        {
+            PrepareMonthDaysData();
+        }
+        else
+        {
+            PrepareWeekDaysData();
+        }
+    }
+
+    private void PrepareHeaderTitle()
+    {
+        _headerTitle = CurrentMonth.ToString("MMMM yyyy", new System.Globalization.CultureInfo("it-IT")).FirstCharToUpper();
+    }
+
+    private void PrepareEventsCache()
+    {
+        _eventsCache.Clear();
+        _categoriesCache.Clear();
+
+        // Raggruppa le attività per data
+        var activitiesByDate = MonthActivities
+            .GroupBy(x => (x.EffectiveDate ?? x.EstimatedDate!).Value.Date)
+            .ToDictionary(g => g.Key, g => g.ToList());
+
+        foreach (var (date, activities) in activitiesByDate)
+        {
+            _eventsCache[date] = activities;
+
+            // Pre-calcola le categorie per ogni giorno
+            var categories = activities
+                .Select(x => x.Category)
+                .Distinct()
+                .Select(cat => new CategoryData(cat.ConvertToHumanReadable(), cat.ConvertToHumanReadable()))
+                .ToArray();
+
+            _categoriesCache[date] = categories;
+        }
+    }
+
+    private void PrepareMonthDaysData()
+    {
+        _monthDaysData = new DayData[DaysInMonth];
+        var today = DateTime.Today;
+
+        for (var d = 1; d <= DaysInMonth; d++)
+        {
+            var day = new DateTime(CurrentMonth.Year, CurrentMonth.Month, d);
+            var isSelected = day.Date == SelectedDate.Date;
+            var isToday = day.Date == today;
+
+            var cssClass = isSelected ? "selected" : (isToday ? "today" : "");
+            var hasEvents = _eventsCache.ContainsKey(day.Date);
+            var eventCategories = hasEvents ? GetFilteredCategoriesForDay(day.Date) : [];
+
+            _monthDaysData[d - 1] = new DayData(day, cssClass, eventCategories.Length > 0, eventCategories);
+        }
+    }
+
+    private void PrepareWeekDaysData()
+    {
+        var start = GetStartOfWeek(SelectedDate);
+        var today = DateTime.Today;
+        var culture = new System.Globalization.CultureInfo("it-IT");
+
+        for (var i = 0; i < 7; i++)
+        {
+            var day = start.AddDays(i);
+            var isSelected = day.Date == SelectedDate.Date;
+            var isToday = day.Date == today;
+
+            var cssClass = isSelected ? "selected" : (isToday ? "today" : "");
+            var dayName = day.ToString("ddd", culture);
+            var hasEvents = _eventsCache.ContainsKey(day.Date);
+            var eventCategories = hasEvents ? GetFilteredCategoriesForDay(day.Date) : [];
+
+            _weekDaysData[i] = new DayData(day, cssClass, eventCategories.Length > 0, eventCategories, dayName);
+        }
+    }
+
+    private CategoryData[] GetFilteredCategoriesForDay(DateTime date)
+    {
+        if (!_categoriesCache.TryGetValue(date, out var categories))
+            return Array.Empty<CategoryData>();
+
+        if (Filter.ClearFilter)
+            return categories;
+
+        // Applica i filtri alle categorie
+        var filteredActivities = GetFilteredActivitiesForDay(date);
+        if (!filteredActivities.Any())
+            return Array.Empty<CategoryData>();
+
+        return filteredActivities
+            .Select(x => x.Category)
+            .Distinct()
+            .Select(cat => new CategoryData(cat.ConvertToHumanReadable(), cat.ConvertToHumanReadable()))
+            .ToArray();
+    }
+
+    private List<ActivityDTO> GetFilteredActivitiesForDay(DateTime date)
+    {
+        if (!_eventsCache.TryGetValue(date, out var activities))
+            return new List<ActivityDTO>();
+
+        if (Filter.ClearFilter)
+            return activities;
+
+        return activities.Where(x =>
+            (!Filter.Text.IsNullOrEmpty() && x.ActivityDescription != null && x.ActivityDescription.ContainsIgnoreCase(Filter.Text!)) ||
+            (x.ActivityTypeId != null && !Filter.Type.IsNullOrEmpty() && x.ActivityTypeId.Equals(Filter.Type)) ||
+            (x.ActivityResultId != null && !Filter.Result.IsNullOrEmpty() && x.ActivityResultId.Equals(Filter.Result)) ||
+            (x.UserName != null && !Filter.User.IsNullOrEmpty() && Filter.User!.Contains(x.UserName)) ||
+            (Filter.Category != null && x.Category.Equals(Filter.Category))
+        ).ToList();
+    }
+
     [JSInvokable]
     public async Task OnSwipeLeft()
     {
         await CambiaPeriodo(1);
+        PrepareRenderingData();
         StateHasChanged();
         if (Expanded)
         {
@@ -183,6 +375,7 @@
     public async Task OnSwipeRight()
     {
         await CambiaPeriodo(-1);
+        PrepareRenderingData();
         StateHasChanged();
         if (Expanded)
         {
@@ -209,7 +402,6 @@
     {
         if (Expanded)
         {
-            // Cambio solo il mese visualizzato, NON cambiare SelectedDate
             var y = CurrentMonth.Year;
             var m = CurrentMonth.Month + direzione;
             if (m < 1)
@@ -228,7 +420,6 @@
         }
         else
         {
-            // Cambio settimana: aggiorno anche il giorno selezionato
             await SelezionaData(SelectedDate.AddDays(7 * direzione));
             _internalMonth = new DateTime(SelectedDate.Year, SelectedDate.Month, 1);
         }
@@ -240,16 +431,17 @@
         if (Expanded)
         {
             SliderAnimation = "collapse-animation";
-            StateHasChanged();
             Expanded = false;
         }
         else
         {
             Expanded = true;
             SliderAnimation = "expand-animation";
-            StateHasChanged();
         }
 
+        PrepareRenderingData();
+        StateHasChanged();
+
         SliderAnimation = "";
         StateHasChanged();
     }
@@ -260,7 +452,6 @@
         IsLoading = true;
         StateHasChanged();
 
-        // Carica tutte le attività del mese corrente visualizzato
         var start = CurrentMonth;
         var end = start.AddDays(DaysInMonth - 1);
         var activities = await ManageData.GetActivity(x =>
@@ -268,6 +459,7 @@
             (x.EffectiveDate >= start && x.EffectiveDate <= end));
         MonthActivities = activities.OrderBy(x => x.EffectiveDate ?? x.EstimatedDate).ToList();
 
+        PrepareRenderingData();
         IsLoading = false;
         StateHasChanged();
     }
@@ -276,7 +468,6 @@
     private async Task SelezionaData(DateTime day)
     {
         SelectedDate = day;
-        StateHasChanged();
 
         var cacheInternalMonth = _internalMonth;
         _internalMonth = new DateTime(day.Year, day.Month, 1);
@@ -285,6 +476,10 @@
         {
             await LoadMonthData();
         }
+        else
+        {
+            PrepareRenderingData();
+        }
 
         ApplyFilter();
         StateHasChanged();
@@ -294,12 +489,14 @@
     private async Task SelezionaDataDalMese(DateTime day)
     {
         SelectedDate = day;
-        ApplyFilter();
-        // Chiudi la vista mese e passa alla settimana, con animazione
         SliderAnimation = "collapse-animation";
-        StateHasChanged();
         Expanded = false;
-        _internalMonth = new DateTime(day.Year, day.Month, 1); // Sync il mese visualizzato
+        _internalMonth = new DateTime(day.Year, day.Month, 1);
+
+        PrepareRenderingData();
+        ApplyFilter();
+        StateHasChanged();
+
         SliderAnimation = "";
         StateHasChanged();
     }
@@ -314,7 +511,7 @@
     }
 
     private List<ActivityDTO> GetEventsForDay(DateTime day)
-        => MonthActivities?.Where(x => (x.EffectiveDate ?? x.EstimatedDate) == day.Date).ToList() ?? [];
+        => _eventsCache.TryGetValue(day.Date, out var events) ? events : new List<ActivityDTO>();
 
     public void Dispose()
     {
@@ -329,6 +526,7 @@
         if (indexActivity != null && !newActivity.IsNullOrEmpty())
         {
             MonthActivities![indexActivity.Value] = newActivity[0];
+            PrepareRenderingData(); // Ricalcola i dati di rendering
         }
 
         ApplyFilter();
@@ -343,40 +541,25 @@
 
     private void ApplyFilter()
     {
-        FilteredActivities = GetEventsForDay(SelectedDate);
+        FilteredActivities = GetFilteredActivitiesForDay(SelectedDate);
 
-        if (!Filter.ClearFilter)
+        // Aggiorna i dati di rendering se il filtro è cambiato
+        if (Expanded)
         {
-            FilteredActivities = GetEventsForDay(SelectedDate)?
+            PrepareMonthDaysData();
-                .Where(x =>
+        }
-                    (!Filter.Text.IsNullOrEmpty() && x.ActivityDescription != null && x.ActivityDescription.ContainsIgnoreCase(Filter.Text!)) ||
+        else
-                    (x.ActivityTypeId != null && !Filter.Type.IsNullOrEmpty() && x.ActivityTypeId.Equals(Filter.Type)) ||
+        {
-                    (x.ActivityResultId != null && !Filter.Result.IsNullOrEmpty() && x.ActivityResultId.Equals(Filter.Result)) ||
+            PrepareWeekDaysData();
-                    (x.UserName != null && !Filter.User.IsNullOrEmpty() && Filter.User!.Contains(x.UserName)) ||
-                    (Filter.Category != null && x.Category.Equals(Filter.Category))
-                )
-                .ToList() ?? [];
         }
 
         StateHasChanged();
     }
 
+    // Metodo ottimizzato per il rendering dei filtri
     private List<ActivityDTO> ReturnFilteredActivity(DateTime day)
     {
-        if (!Filter.ClearFilter)
+        return GetFilteredActivitiesForDay(day);
-        {
-            return GetEventsForDay(day)?
-                .Where(x =>
-                    (!Filter.Text.IsNullOrEmpty() && x.ActivityDescription != null && x.ActivityDescription.ContainsIgnoreCase(Filter.Text!)) ||
-                    (x.ActivityTypeId != null && !Filter.Type.IsNullOrEmpty() && x.ActivityTypeId.Equals(Filter.Type)) ||
-                    (x.ActivityResultId != null && !Filter.Result.IsNullOrEmpty() && x.ActivityResultId.Equals(Filter.Result)) ||
-                    (x.UserName != null && !Filter.User.IsNullOrEmpty() && Filter.User!.Contains(x.UserName)) ||
-                    (Filter.Category != null && x.Category.Equals(Filter.Category))
-                )
-                .ToList() ?? [];
-        }
-
-        return GetEventsForDay(day);
     }
 
 }

Template.Shared/Components/Pages/Calendar.razor.css

@@ -119,12 +119,14 @@
     gap: 1rem;
     overflow-y: auto;
     flex-direction: column;
-    height: 75vh;
     -ms-overflow-style: none;
     scrollbar-width: none;
-    padding-bottom: 45px;
+    padding-bottom: 70px;
+    height: calc(100% - 130px);
 }
 
+.appointments.ah-calendar-m { height: calc(100% - 315px) !important; }
+
 .appointments::-webkit-scrollbar { display: none; }
 
 .appointment {
@@ -160,3 +162,5 @@
 .event-dot.interna { background-color: var(--mud-palette-success-darken); }
 
 .event-dot.commessa { background-color: var(--mud-palette-warning); }
+
+@supports (-webkit-touch-callout: none) { .appointments { padding-bottom: calc(60px + env(safe-area-inset-bottom)) !important; } }

Template.Shared/Components/Pages/Login.razor

@@ -10,41 +10,33 @@
 }
 else
 {
-    <div class="center-box container d-flex justify-content-center align-items-center min-vh-100">
+    <div class="login-page">
-        <div class="row rounded-4 bg-white">
+        <div class="container container-top-logo">
-
+            <span>SalesBook</span>
-            <div class="appName rounded-4 d-flex justify-content-center align-items-center flex-column">
-                <span>Nome App</span>
         </div>
-
+        <div class="container container-login">
-            <div class="col-md-6 right-box">
+            <div class="login-form-container">
-                <div class="row align-items-center">
+                <div class="input-group">
-                    <div class="input-group mb-2">
+                    <MudTextField @bind-Value="UserData.Username" Label="Username" Variant="Variant.Outlined"/>
-                        <MudTextField @bind-Value="UserData.Username" Label="Username" Variant="Variant.Text"/>
-                    </div>
-                    <div class="input-group mb-2">
-                        <MudTextField InputType="@_passwordInput" @bind-Value="UserData.Password" Label="Password" Variant="Variant.Text" Adornment="Adornment.End" AdornmentIcon="@_passwordInputIcon" OnAdornmentClick="ShowPassword" AdornmentAriaLabel="Show Password" />
-                    </div>
-                    <div class="input-group mb-4">
-                        <MudTextField @bind-Value="UserData.CodHash" Label="Profilo azienda" Variant="Variant.Text"/>
                 </div>
                 <div class="input-group">
-                        <div class="button-login" @onclick="SignInUser">
+                    <MudTextField InputType="@_passwordInput" @bind-Value="UserData.Password" Label="Password" Variant="Variant.Outlined" Adornment="Adornment.End" AdornmentIcon="@_passwordInputIcon" OnAdornmentClick="ShowPassword" AdornmentAriaLabel="Show Password"/>
-                            <span>Login</span>
                 </div>
+                <div class="input-group mb-2">
+                    <MudTextField @bind-Value="UserData.CodHash" Label="Profilo azienda" Variant="Variant.Outlined"/>
                 </div>
+
+                <MudButton OnClick="SignInUser" Color="Color.Primary" Variant="Variant.Filled">Login</MudButton>
+                @if (_attemptFailed)
+                {
+                    <MudAlert Class="my-3" Dense="true" Severity="Severity.Error" Variant="Variant.Filled">@ErrorMessage</MudAlert>
+                }
             </div>
 
             <div class="my-4 login-footer">
                 <span>Powered by</span>
                 <img src="_content/Template.Shared/images/logoIntegry.svg" class="img-fluid" alt="Integry">
             </div>
-                
-                @if (_attemptFailed)
-                {
-                    <MudAlert Class="my-3" Dense="true" Severity="Severity.Error" Variant="Variant.Filled">@ErrorMessage</MudAlert>
-                }
-            </div>
         </div>
     </div>
 }

Template.Shared/Components/Pages/Login.razor.css

@@ -1,52 +1,48 @@
-.center-box {
+.login-page {
-    margin-top: -1.1rem !important; /* remove page padding */
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background: var(--mud-palette-surface);
 }
 
-.box-area {
+.container-top-logo > span {
-    width: 930px;
+    font-size: x-large;
-}
-
-.right-box {
-    padding: 15px 30px 0 30px;
-}
-
-::placeholder {
-    font-size: 16px;
-}
-
-.rounded-4 {
-    border-radius: 20px;
-}
-
-.rounded-5 {
-    border-radius: 30px;
-}
-
-.bg-white {
-    background: var(--mud-palette-surface) !important;
-}
-
-.appName {
-    margin-top: 15px;
-    font-size: large;
     font-weight: 900;
     color: var(--mud-palette-primary)
 }
 
-.button-login {
+.container-login > span {
+    font-size: large;
+    font-weight: 900;
     text-align: center;
-    background-color: var(--mud-palette-primary);
+}
-    border-radius: 6px;
+
-    padding: .3rem 2rem;
+.container-top-logo {
-    width: 100%;
+    height: 35vh;
-    font-weight: 700;
+    display: flex;
-    color: var(--mud-palette-appbar-text);
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+}
+
+.login-form-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.container-login {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    padding: 4px 16px 16px;
+    justify-content: space-between;
 }
 
 .login-footer {
+    width: 100%;
     display: flex;
-    align-items: center;
+    justify-content: center;
-    justify-content: flex-end;
 }
 
 .login-footer span {
@@ -58,8 +54,3 @@
     height: 15px;
     margin-left: 4px;
 }
-
-.container > .bg-white {
-    box-shadow: var(--card-shadow);
-    border: 1px solid var(--card-border-color);
-}

Template.Shared/Components/Pages/Notifications.razor

@@ -0,0 +1,9 @@
+@page "/Notifications"
+@attribute [Authorize]
+@using Template.Shared.Components.Layout
+
+<HeaderLayout Title="Notifiche" />
+
+@code {
+
+}

Template.Shared/Components/Pages/PersonalInfo.razor

@@ -8,7 +8,7 @@
 @inject INetworkService NetworkService
 @inject IFormFactor FormFactor
 
-<HeaderLayout Title="Profilo"/>
+<HeaderLayout BackTo="Indietro" Back="true" BackOnTop="true" Title="Profilo" ShowProfile="false"/>
 
 <div class="container content">
     <div class="container-primary-info">

Template.Shared/Components/Pages/Settings.razor

@@ -2,7 +2,7 @@
 @page "/settings/{BackTo}"
 @using Template.Shared.Components.Layout
 
-<HeaderLayout BackTo="@BackTo" ShowNotifications="false" Back="true" Title="Impostazioni"/>
+<HeaderLayout BackTo="@BackTo" Back="true" Title="Impostazioni"/>
 
 <div class="content">
     

Template.Shared/Components/Pages/Users.razor

@@ -4,6 +4,10 @@
 
 <HeaderLayout Title="Contatti" />
 
+<div class="container">
+    
+</div>
+
 @code {
 
 }

Template.Shared/Components/SingleElements/BottomSheet/FilterActivity.razor

@@ -7,7 +7,7 @@
 <div class="bottom-sheet-backdrop @(IsSheetVisible ? "show" : "")" @onclick="CloseBottomSheet"></div>
 
 <div class="bottom-sheet-container @(IsSheetVisible ? "show" : "")">
-    <div class="bottom-sheet">
+    <div class="bottom-sheet pb-safe-area">
         <div class="title">
             <MudText Typo="Typo.h6">
                 <b>Filtri</b>

Template.Shared/Components/SingleElements/BottomSheet/FilterActivity.razor.css

@@ -0,0 +1 @@
+

Template.Shared/Components/SingleElements/BottomSheet/SelectEsito.razor

@@ -0,0 +1,106 @@
+@using Template.Shared.Core.Dto
+@using Template.Shared.Core.Entity
+@using Template.Shared.Core.Interface
+@inject IManageDataService ManageData
+
+<div class="bottom-sheet-backdrop @(IsSheetVisible ? "show" : "")" @onclick="CloseBottomSheet"></div>
+
+<div class="bottom-sheet-container @(IsSheetVisible ? "show" : "")">
+    <div class="bottom-sheet pb-safe-area">
+        <div class="title">
+            <MudText Typo="Typo.h6">
+                <b>Esito</b>
+            </MudText>
+            <MudIconButton Icon="@Icons.Material.Filled.Close" OnClick="CloseBottomSheet"/>
+        </div>
+        
+        <div class="input-card">
+            <div class="form-container">
+                <span>Data effettiva</span>
+
+                <MudTextField T="DateTime" Format="yyyy-MM-dd" InputType="InputType.Date" @bind-Value="EffectiveDate" />
+            </div>
+
+            <div class="divider"></div>
+
+            <div class="form-container">
+                <span>Inizio</span>
+
+                <MudTextField T="TimeSpan" InputType="InputType.Time" @bind-Value="EffectiveTime" />
+            </div>
+            
+            <div class="divider"></div>
+
+            <div class="form-container">
+                <span>Fine</span>
+
+                <MudTextField T="TimeSpan" InputType="InputType.Time" @bind-Value="EffectiveEndTime" />
+            </div>
+        </div>
+
+        <div class="input-card">
+            <div class="form-container">
+                <span class="disable-full-width">Esito</span>
+
+                <MudSelectExtended FullWidth="true" T="string?" Variant="Variant.Text" @bind-Value="ActivityModel.ActivityResultId" Class="customIcon-select" AdornmentIcon="@Icons.Material.Filled.Code">
+                    @foreach (var result in ActivityResult)
+                    {
+                        <MudSelectItemExtended Class="custom-item-select" Value="@result.ActivityResultId">@result.ActivityResultId</MudSelectItemExtended>
+                    }
+                </MudSelectExtended> 
+            </div>
+        </div>
+        
+        <div class="input-card">
+            <MudTextField T="string?" Placeholder="Descrizione esito" Variant="Variant.Text" Lines="4" @bind-Value="ActivityModel.ResultDescription" />
+        </div>
+
+        <div class="button-section">
+            <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="CloseBottomSheet">Salva</MudButton>
+        </div>
+    </div>
+</div>
+
+@code {
+    [Parameter] public bool IsSheetVisible { get; set; }
+    [Parameter] public EventCallback<bool> IsSheetVisibleChanged { get; set; }
+
+    [Parameter] public ActivityDTO ActivityModel { get; set; }
+    [Parameter] public EventCallback<ActivityDTO> ActivityModelChanged { get; set; }
+
+    private List<StbActivityResult> ActivityResult { get; set; } = [];
+
+    private DateTime EffectiveDate { get; set; } = DateTime.Today;
+
+    private TimeSpan EffectiveTime { get; set; }
+    private TimeSpan EffectiveEndTime { get; set; } 
+
+    protected override async Task OnParametersSetAsync()
+    {
+        if (IsSheetVisible)
+            await LoadData();
+    }
+
+    private async Task LoadData()
+    {
+        ActivityResult = await ManageData.GetTable<StbActivityResult>();
+
+        EffectiveTime = ActivityModel.EffectiveTime?.TimeOfDay ?? TimeSpan.Zero;
+        EffectiveEndTime = ActivityModel.EffectiveEndtime?.TimeOfDay ?? TimeSpan.Zero;
+        StateHasChanged();
+    }
+
+    private void CloseBottomSheet()
+    {
+        ActivityModel.EffectiveTime = new DateTime(EffectiveDate.Year, EffectiveDate.Month, EffectiveDate.Day,
+            EffectiveTime.Hours, EffectiveTime.Minutes, EffectiveTime.Seconds);
+
+        ActivityModel.EffectiveEndtime = new DateTime(EffectiveDate.Year, EffectiveDate.Month, EffectiveDate.Day,
+            EffectiveEndTime.Hours, EffectiveEndTime.Minutes, EffectiveEndTime.Seconds);
+
+        IsSheetVisible = false;
+        IsSheetVisibleChanged.InvokeAsync(IsSheetVisible);
+        ActivityModelChanged.InvokeAsync(ActivityModel);
+    }
+
+}

Template.Shared/Components/SingleElements/BottomSheet/SelectEsito.razor.css

@@ -0,0 +1 @@
+

Template.Shared/Components/SingleElements/Modal/ActivityForm.razor

@@ -1,15 +1,17 @@
-@using Template.Shared.Core.Dto
+@using Microsoft.VisualBasic
+@using Template.Shared.Core.Dto
 @using Template.Shared.Components.Layout
 @using Template.Shared.Core.Entity
 @using Template.Shared.Core.Interface
 @using Template.Shared.Components.Layout.Overlay
+@using Template.Shared.Components.SingleElements.BottomSheet
 @inject IManageDataService ManageData
 @inject INetworkService NetworkService
 @inject IIntegryApiService IntegryApiService
 
 <MudDialog Class="customDialog-form">
     <DialogContent>
-        <HeaderLayout Cancel="true" OnCancel="() => MudDialog.Cancel()" LabelSave="@LabelSave" OnSave="Save" ShowNotifications="false" Title="@(IsNew ? "Nuova" : $"{ActivityModel.ActivityId}")" />
+        <HeaderLayout ShowProfile="false" Cancel="true" OnCancel="() => MudDialog.Cancel()" LabelSave="@LabelSave" OnSave="Save" Title="@(IsNew ? "Nuova" : $"{ActivityModel.ActivityId}")" />
 
         <div class="content">
             <div class="input-card">
@@ -79,10 +81,10 @@
 
                 <div class="divider"></div>
 
-                <div class="form-container">
+                <div class="form-container" @onclick="OpenSelectEsito">
                     <span class="disable-full-width">Esito</span>
 
-                    <MudSelectExtended ReadOnly="IsView" FullWidth="true" T="string?" Variant="Variant.Text" @bind-Value="ActivityModel.ActivityResultId" @bind-Value:after="OnAfterChangeValue" Class="customIcon-select" AdornmentIcon="@Icons.Material.Filled.Code">
+                    <MudSelectExtended ReadOnly="true" FullWidth="true" T="string?" Variant="Variant.Text" @bind-Value="ActivityModel.ActivityResultId" @bind-Value:after="OnAfterChangeValue" Class="customIcon-select" AdornmentIcon="@Icons.Material.Filled.Code">
                         @foreach (var result in ActivityResult)
                         {
                             <MudSelectItemExtended Class="custom-item-select" Value="@result.ActivityResultId">@result.ActivityResultId</MudSelectItemExtended>
@@ -100,6 +102,8 @@
 
 <SaveOverlay VisibleOverlay="VisibleOverlay" SuccessAnimation="SuccessAnimation" />
 
+<SelectEsito @bind-IsSheetVisible="OpenEsito" @bind-ActivityModel="ActivityModel" />
+
 @code {
     [CascadingParameter] private IMudDialogInstance MudDialog { get; set; }
 
@@ -121,6 +125,8 @@
     private bool VisibleOverlay { get; set; }
     private bool SuccessAnimation { get; set; }
 
+    private bool OpenEsito { get; set; } = false;
+
     protected override async Task OnInitializedAsync()
     {
         _ = LoadData();
@@ -169,4 +175,10 @@
         StateHasChanged();
     }
 
+    private void OpenSelectEsito()
+    {
+        OpenEsito = !OpenEsito;
+        StateHasChanged();
+    }
+
 }

Template.Shared/wwwroot/css/app.css

@@ -1,4 +1,10 @@
-html, body {
+html { overflow: hidden; }
+
+.page, article, main { height: 100% !important; }
+
+#app { height: 100vh; }
+
+html, body {
     font-family: "Nunito", sans-serif;
     font-size: 14px;
     font-weight: 400;
@@ -111,26 +117,6 @@ h1:focus { outline: none; }
     margin: 1rem 0;
 }
 
-@supports (-webkit-touch-callout: none) {
-    .status-bar-safe-area {
-        display: flex;
-        position: fixed;
-        top: 0;
-        height: env(safe-area-inset-top);
-        background-color: #f7f7f7;
-        width: 100%;
-        z-index: 1;
-    }
-
-
-    #app {
-        padding-top: env(safe-area-inset-top);
-        height: 100vh;
-    }
-
-    .flex-column, .navbar-brand { padding-left: env(safe-area-inset-left); }
-}
-
 /*Spinner*/
 
 .spinner-container {
@@ -167,14 +153,10 @@ h1:focus { outline: none; }
     animation-duration: 2s;
 }
 
-.loader:after {
+.loader:after { animation-duration: 4s; }
-    animation-duration: 4s;
-}
 
 @keyframes l24 {
-    100% {
+    100% { transform: rotate(1turn) }
-        transform: rotate(1turn)
-    }
 }
 
 /*MudBlazor Personalization*/
@@ -194,42 +176,47 @@ h1:focus { outline: none; }
     margin: 0;
 }
 
-.custom-item-select {
+.custom-item-select { padding: 6px 16px; }
-    padding: 6px 16px;
-}
 
 .custom-item-select .mud-typography-body1 {
     font-weight: 600;
     font-size: .9rem;
 }
 
+.container {
+    padding-right: var(--m-page-x) !important;
+    padding-left: var(--m-page-x) !important;
+}
+
+.lm-container {
+    padding-right: calc(var(--m-page-x) * 0.5) !important;
+    padding-left: calc(var(--m-page-x) * 0.5) !important;
+}
+
 @supports (-webkit-touch-callout: none) {
     .status-bar-safe-area {
         display: flex;
         position: fixed;
         top: 0;
         height: env(safe-area-inset-top);
-        background-color: #f7f7f7;
         width: 100%;
         z-index: 1;
-        background-color: var(--primary-color);
+        background-color: var(--mud-palette-surface);
     }
 
-    .modal {
+    .modal { padding-top: env(safe-area-inset-top); }
-        padding-top: env(safe-area-inset-top);
-    }
 
-    article {
+    .safe-area-bottom { margin-bottom: env(safe-area-inset-bottom) !important; }
-        padding-top: 3rem !important;
+
-        padding-bottom: calc(7rem + env(safe-area-inset-bottom)) !important;
+    .pb-safe-area { padding-bottom: env(safe-area-inset-bottom) !important; }
-    }
 
     #app {
-        padding-top: env(safe-area-inset-top);
+        margin-top: env(safe-area-inset-top);
-        height: 100vh;
+        margin-bottom: env(safe-area-inset-bottom);
+        height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
     }
 
-    .flex-column, .navbar-brand {
+    .flex-column, .navbar-brand { padding-left: env(safe-area-inset-left); }
-        padding-left: env(safe-area-inset-left);
+
-    }
+    .customDialog-form .mud-dialog-content { margin-top: env(safe-area-inset-top); }
 }

Template.Shared/wwwroot/css/bottomSheet.css

@@ -22,9 +22,7 @@
     z-index: 1003;
 }
 
-.bottom-sheet-container.show {
+.bottom-sheet-container.show { bottom: 0; }
-    bottom: 0;
-}
 
 .bottom-sheet {
     background-color: var(--mud-palette-surface);
@@ -34,11 +32,9 @@
     box-shadow: 0 -2px 10px rgba(165, 165, 165, 0.5);
 }
 
-.clearButton ::deep .mud-icon-button {
+.clearButton .mud-icon-button { padding: 4px !important; }
-    padding: 4px !important;
-}
 
-.bottom-sheet ::deep .closeIcon .mud-icon-root {
+.bottom-sheet .closeIcon .mud-icon-root {
     border-radius: 50%;
     padding: 2px;
     min-width: 15px;

Template.Shared/wwwroot/css/default-theme.css

@@ -6,4 +6,5 @@
     --card-shadow: 5px 5px 10px 0 var(--gray-for-shadow);
     --custom-box-shadow: 1px 2px 5px rgba(165, 165, 165, 0.5);
     --mud-default-borderradius: 12px !important;
+    --m-page-x: 1.25rem;
 }

Template.Shared/wwwroot/js/alphaScroll.js

@@ -0,0 +1 @@
+

Template.Shared/wwwroot/js/main.js

@@ -1,3 +1,58 @@
-window.goBack = function () {
+// Funzione goBack
+window.goBack = function () {
     history.back();
 };
+
+// Funzione per aggiungere tabindex ai bottoni
+function addTabindexToButtons() {
+    document.querySelectorAll('button.custom-plus-button').forEach(btn => {
+        if (!btn.hasAttribute('tabindex')) {
+            btn.setAttribute('tabindex', '0');
+        }
+    });
+}
+
+// Funzione per monitorare la classe expanded e aggiungere ah-calendar-m
+function monitorExpandedClass(mutations) {
+    mutations.forEach(function (mutation) {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+            const target = mutation.target;
+
+            if (target.classList.contains('week-slider') && target.classList.contains('expanded')) {
+                const appointments = document.querySelector('.appointments');
+                if (appointments) {
+                    appointments.classList.add('ah-calendar-m');
+                    console.log('Classe "ah-calendar-m" aggiunta a .appointments');
+                }
+            }
+            // Rimuovi la classe quando expanded viene rimossa
+            else if (target.classList.contains('week-slider') && !target.classList.contains('expanded')) {
+                const appointments = document.querySelector('.appointments');
+                if (appointments) {
+                    appointments.classList.remove('ah-calendar-m');
+                    console.log('Classe "ah-calendar-m" rimossa da .appointments');
+                }
+            }
+        }
+    });
+}
+
+// Esegui la funzione tabindex inizialmente
+addTabindexToButtons();
+
+// Observer combinato per entrambe le funzionalità
+const observer = new MutationObserver((mutations) => {
+    // Aggiungi tabindex ai nuovi bottoni
+    addTabindexToButtons();
+
+    // Monitora le classi expanded
+    monitorExpandedClass(mutations);
+});
+
+// Osserva sia i cambiamenti nel DOM che gli attributi
+observer.observe(document.body, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: ['class']
+});