Create prime pagine

Template.Maui/MauiProgram.cs

@@ -1,5 +1,6 @@
 using IntegryApiClient.MAUI;
 using Microsoft.Extensions.Logging;
+using MudBlazor.Services;
 using Template.Maui.Services;
 using Template.Shared;
 using Template.Shared.Interfaces;
@@ -29,7 +30,7 @@ namespace Template.Maui
                 });
 
             builder.Services.AddMauiBlazorWebView();
-            builder.Services.AddBlazorBootstrap();
+            builder.Services.AddMudServices();
 
 #if DEBUG
             builder.Services.AddBlazorWebViewDeveloperTools();

Template.Maui/Template.Maui.csproj

@@ -1,10 +1,8 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
 	<PropertyGroup>
-		<TargetFrameworks>$(TargetFrameworks);net8.0-android</TargetFrameworks>
+		<TargetFrameworks>net9.0-ios;net9.0-android</TargetFrameworks>
-		<TargetFrameworks>$(TargetFrameworks);net8.0-ios</TargetFrameworks>
+		<!--<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net9.0-windows10.0.19041.0</TargetFrameworks>-->
-		<TargetFrameworks>$(TargetFrameworks);net8.0-maccatalyst</TargetFrameworks>
-		<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net8.0-windows10.0.19041.0</TargetFrameworks>
 		<!-- Uncomment to also build the tizen app. You will need to install tizen by following this: https://github.com/Samsung/Tizen.NET -->
 		<!-- <TargetFrameworks>$(TargetFrameworks);net8.0-tizen</TargetFrameworks> -->
 
@@ -34,12 +32,12 @@
 		<ApplicationVersion>1</ApplicationVersion>
 
 		<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'">14.2</SupportedOSPlatformVersion>
-		<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst'">
+		<!--<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst'">
 			14.0
-		</SupportedOSPlatformVersion>
+		</SupportedOSPlatformVersion>-->
 		<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">24.0</SupportedOSPlatformVersion>
-		<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</SupportedOSPlatformVersion>
+		<!--<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</SupportedOSPlatformVersion>-->
-		<TargetPlatformMinVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</TargetPlatformMinVersion>
+		<!--<TargetPlatformMinVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</TargetPlatformMinVersion>-->
 		<!--slower build, faster runtime in DEBUG-->
 		<!-- <_MauiForceXamlCForDebug Condition="'$(Configuration)' == 'Debug'">true</_MauiForceXamlCForDebug> -->
 	</PropertyGroup>
@@ -47,7 +45,7 @@
 	<PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">
 		<DefineConstants>$(DefineConstants);PLATFORM</DefineConstants>
 		<SupportedOSPlatformVersion>26.0</SupportedOSPlatformVersion>
-		<TargetPlatformVersion>34</TargetPlatformVersion>
+		<TargetPlatformVersion>35</TargetPlatformVersion>
 
 		<!--<EmbedAssembliesIntoApk Condition="'$(Configuration)' == 'Debug'">true</EmbedAssembliesIntoApk>
 		<AndroidPackageFormats Condition="'$(Configuration)' == 'Release'">aab</AndroidPackageFormats>
@@ -78,7 +76,7 @@
 		<DefineConstants>$(DefineConstants);APPLE;PLATFORM</DefineConstants>
 	</PropertyGroup>
 
-	<PropertyGroup Condition="'$(TargetFramework)'=='net8.0-ios'">
+	<PropertyGroup Condition="'$(TargetFramework)'=='net9.0-ios'">
 	  <CodesignKey>Apple Development: Massimo Fausto Morelli (6C2CUM53BT)</CodesignKey>
 	  <CodesignProvision>VS: WildCard Development</CodesignProvision>
 	</PropertyGroup>
@@ -112,11 +110,12 @@
 	</ItemGroup>
 
 	<ItemGroup>
-		<PackageReference Include="IntegryApiClient.MAUI" Version="1.0.2" />
+		<PackageReference Include="CommunityToolkit.Maui" Version="11.1.0" />
-		<PackageReference Include="Microsoft.Maui.Controls" Version="8.0.91" />
+		<PackageReference Include="IntegryApiClient.MAUI" Version="1.1.3" />
-		<PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="8.0.91" />
+		<PackageReference Include="Microsoft.Maui.Controls" Version="9.0.60" />
-		<PackageReference Include="Microsoft.AspNetCore.Components.WebView.Maui" Version="8.0.91" />
+		<PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="9.0.60" />
-		<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="8.0.0" />
+		<PackageReference Include="Microsoft.AspNetCore.Components.WebView.Maui" Version="9.0.60" />
+		<PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="9.0.4" />
 	</ItemGroup>
 
 	<ItemGroup>

Template.Maui/wwwroot/index.html

@@ -8,12 +8,12 @@
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
     
     
     <link href="_content/Template.Shared/css/bootstrap/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <link href="_content/Template.Shared/css/bootstrap/bootstrap-icons.min.css" rel="stylesheet" />
-    <link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" />
+    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
 
     <link rel="stylesheet" href="_content/Template.Shared/css/remixicon/remixicon.css" />
     <link rel="stylesheet" href="_content/Template.Shared/css/app.css" />
@@ -42,7 +42,8 @@
     <!--<script src="_content/Template.Shared/js/bootstrap/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>-->
     <!-- Add sortable.js reference if SortableList component is used in your application. -->
     <!--<script src="_content/Template.Shared/js/bootstrap/Sortable.min.js"></script>-->
-    <script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>
+    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
+    <script src="_content/Template.Shared/js/main.js"></script>
 
 </body>
 

Template.Shared/Components/Layout/HeaderLayout.razor

@@ -0,0 +1,10 @@
+<div class="header">
+    <div class="header-content">
+        <h3 class="page-title">@Title</h3>
+        <MudIconButton Icon="@Icons.Material.Filled.FilterAlt" Color="Color.Dark" />
+    </div>
+</div>
+
+@code{
+    [Parameter] public string? Title { get; set; }
+}

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

@@ -0,0 +1,7 @@
+.header-content {
+    display: flex;
+    justify-content: space-between;
+    color: var(--lighter-color);
+    align-items: center;
+    padding-top: .5rem;
+}

Template.Shared/Components/Layout/MainLayout.razor

@@ -1,14 +1,15 @@
 @inherits LayoutComponentBase
 
-<div class="page">
+<MudThemeProvider />
-    @*<div class="sidebar">
+<MudPopoverProvider />
-        <NavMenu />
+<MudDialogProvider />
-    </div>*@
+<MudSnackbarProvider />
 
-    <NavMenu/>
+<div class="page">
+    <NavMenu />
 
     <main>
-        <article class="content px-4">
+        <article class="container">
             @Body
         </article>
     </main>

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

@@ -21,29 +21,29 @@ main {
     align-items: center;
 }
 
-    .top-row ::deep a, .top-row ::deep .btn-link {
+.top-row ::deep a, .top-row ::deep .btn-link {
-        white-space: nowrap;
+    white-space: nowrap;
-        margin-left: 1.5rem;
+    margin-left: 1.5rem;
-        text-decoration: none;
+    text-decoration: none;
-    }
+}
 
-        .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
+.top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
-            text-decoration: underline;
+    text-decoration: underline;
-        }
+}
 
-        .top-row ::deep a:first-child {
+.top-row ::deep a:first-child {
-            overflow: hidden;
+    overflow: hidden;
-            text-overflow: ellipsis;
+    text-overflow: ellipsis;
-        }
+}
 
 @media (max-width: 640.98px) {
     .top-row {
         justify-content: space-between;
     }
 
-        .top-row ::deep a, .top-row ::deep .btn-link {
+    .top-row ::deep a, .top-row ::deep .btn-link {
-            margin-left: 0;
+        margin-left: 0;
-        }
+    }
 }
 
 @media (min-width: 641px) {
@@ -64,11 +64,11 @@ main {
         z-index: 1;
     }
 
-        .top-row.auth ::deep a:first-child {
+    .top-row.auth ::deep a:first-child {
-            flex: 1;
+        flex: 1;
-            text-align: right;
+        text-align: right;
-            width: 0;
+        width: 0;
-        }
+    }
 
     .top-row, article {
         padding-left: 2rem !important;

Template.Shared/Components/Layout/NavBar.razor

@@ -1,40 +0,0 @@
-<div class="container">
-    <nav>
-        <ul>
-            <li>
-                <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                    <span>Home</span>
-                    <i class="ri-home-5-line"/>
-                </NavLink>
-            </li>
-        </ul>
-        <ul>
-            <li>
-                <a href="#" id="workout">
-                    <span>Workout</span>
-                    <i class="ri-empathize-line"/>
-                </a>
-            </li>
-        </ul>
-        <ul>
-            <li>
-                <a href="#" id="logbook">
-                    <span>Logbook</span>
-                    <i class="ri-health-book-line"></i>
-                </a>
-            </li>
-        </ul>
-        <ul>
-            <li>
-                <a href="#" id="settings">
-                    <span>Impostazioni</span>
-                    <i class="ri-settings-5-line"/>
-                </a>
-            </li>
-        </ul>
-    </nav>
-</div>
-
-@code {
-
-}

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

@@ -1,81 +0,0 @@
-a {
-    text-decoration: none;
-    color: inherit;
-}
-
-ul {
-    list-style-type: none;
-}
-
-.container {
-    max-width: 100%;
-    margin: 0 auto;
-    padding: 0;
-}
-
-nav {
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    background-color: var(--ligther-color);
-    margin: 0;
-    display: flex;
-    border-radius: 40px 40px 0px 0px;
-    box-shadow: rgb(50 50 93 / 25%) 0 50px 100px 10px,
-    rgb(0 0 0 / 30%) 0 30px 60px -30px;
-}
-
-nav ul {
-    display: inline-flex;
-    align-items: center;
-    padding: 0;
-    flex: 0 0 25%;
-    justify-content: center;
-}
-
-nav :where(li a) {
-    position: relative;
-}
-
-nav ul li a {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column-reverse;
-    padding: 1em;
-    line-height: 1.4;
-    -webkit-transition: all .3s ease-out;
-    transition: all .3s ease-out;
-}
-
-nav ul li a:hover {
-    color: var(--primary-color);
-}
-
-nav ul li a i {
-    font-size: 1.5rem;
-}
-
-nav ul li a span {
-    font-size: 0.9rem;
-}
-
-/* animations */
-
-nav li.active a::before, nav li.active a::after {
-    content: "";
-    position: absolute;
-    background-color: var(--primary-color);
-    z-index: -1;
-}
-
-nav li.active a::before {
-    top: 5%;
-    width: calc(100% - 0px);
-    height: 100%;
-    border-radius: 25px;
-}
-
-nav li.active a {
-    color: var(--ligther-color);
-}

Template.Shared/Components/Layout/NavMenu.razor

@@ -1,38 +1,52 @@
-<nav class="navbar navbar-expand justify-content-center">
+@if (IsVisible)
-    <div class="container-fluid">
+{
-        <ul class="navbar-nav nav-justified w-100 text-center">
+    <nav class="navbar navbar-expand justify-content-center">
+        <div class="container-fluid">
+            <ul class="navbar-nav nav-justified w-100 text-center">
 
-            <li class="nav-item">
+                <li class="nav-item">
-                <NavLink class="nav-link " href="workout" Match="NavLinkMatch.All">
+                    <NavLink class="nav-link" href="Users" Match="NavLinkMatch.All">
-                    <div class="d-flex flex-column">
+                        <div class="d-flex flex-column">
-                        <i class="ri-empathize-line"/>
+                            <i class="ri-group-fill"></i>
-                        @* <span>Workout</span> *@
+                            <span>Contatti</span>
-                    </div>
+                        </div>
-                </NavLink>
+                    </NavLink>
-            </li>
+                </li>
-            <li class="nav-item">
+                <li class="nav-item">
-                <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+                    <NavLink class="nav-link" href="Calendar" Match="NavLinkMatch.All">
-                    <div class="d-flex flex-column">
+                        <div class="d-flex flex-column">
-                        <i class="ri-home-5-line"/>
+                            <i class="ri-calendar-todo-fill"></i>
-                        @* <span>Home</span> *@
+                            <span>Agenda</span>
-                    </div>
+                        </div>
-                </NavLink>
+                    </NavLink>
-            </li>
+                </li>
-            <li class="nav-item">
+                <li class="nav-item">
-                <NavLink class="nav-link" href="logbook" Match="NavLinkMatch.All">
+                    <NavLink class="nav-link" href="PersonalInfo" Match="NavLinkMatch.All">
-                    <div class="d-flex flex-column">
+                        <div class="d-flex flex-column">
-                        <i class="ri-health-book-line"></i>
+                            <i class="ri-user-fill"></i>
-                        @* <span>Log Book</span> *@
+                            <span>Profilo</span>
-                    </div>
+                        </div>
-                </NavLink>
+                    </NavLink>
-            </li>
+                </li>
-            @* <li class="nav-item"> *@
+            </ul>
-            @*     <NavLink class="nav-link d-flex flex-column" href="settings" Match="NavLinkMatch.All"> *@
+        </div>
-            @*         <i class="ri-settings-5-line"/> *@
+    </nav>
-            @*         <span>Impostazioni</span> *@
+}
-            @*     </NavLink> *@
-            @* </li> *@
-        </ul>
-    </div>
 
-</nav>
+@code
+{
+    private bool IsVisible { get; set; } = true;
+
+    protected override Task OnInitializedAsync()
+    {
+        NavigationManager.LocationChanged += (sender, args) =>
+        {
+            var location = args.Location.Remove(0, NavigationManager.BaseUri.Length);
+
+            IsVisible = new List<string> { "Calendar", "Users", "PersonalInfo" }
+                .Contains(location);
+            StateHasChanged();
+        };
+        return Task.CompletedTask;
+    }
+}

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

@@ -1,19 +1,15 @@
 .navbar {
-    background-color: var(--ligther-color);
+    background: var(--mud-palette-background-gray);
-    border-radius: 50px 50px 0 0;
-    border: #eceff2 solid 1px;
     position: fixed;
     bottom: 0;
     width: 100%;
 }
 
-.nav-item {
+.navbar-expand { padding: 0 !important; }
-    font-size: 0.9rem;
+
-    padding-bottom: 0.5rem;
+.nav-item { font-size: 0.9rem; }
-}
 
 .nav-item ::deep a {
-    color: var(--darker-color);
     display: flex;
     align-items: center;
     line-height: 1.4;
@@ -21,30 +17,31 @@
 }
 
 .nav-item ::deep a > div {
-    width: 4.3rem;
+    -webkit-transition: all .1s ease-out;
-    height: 4.3rem;
+    transition: all .1s ease-out;
-    border-radius: 100px;
+    min-width: 60px;
-    justify-content: center;
-    padding-bottom: 0.1rem;
-    -webkit-transition: all .3s ease-out;
-    transition: all .3s ease-out;
 }
 
-.nav-item ::deep a.active > div {
+.nav-item ::deep a.active > div { color: var(--mud-palette-primary); }
-    background-color: var(--primary-color);
+
-    color: white;
+.nav-item ::deep a.active > div > i {
+    /*background-color: color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);*/
+    border-radius: 10px;
 }
 
-/*.nav-item a:hover :not(.active) {*/
+.nav-item ::deep a.active > div > span { font-weight: 800; }
-/*    background-color: rgba(255, 255, 255, 0.1);*/
-/*    color: var(--primary-color);*/
-/*}*/
 
+.nav-item ::deep a:not(.active) > div { color: var(--mud-palette-drawer-icon); }
 
-.nav-item ::deep a i {
+.nav-item ::deep a i { font-size: 1.5rem; }
-    font-size: 2rem;
-}
 
 .nav-item ::deep a span {
-    font-size: 0.9rem;
+    font-size: 0.8rem;
+    font-weight: 500;
+}
+
+@supports (-webkit-touch-callout: none) {
+    .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

@@ -0,0 +1,55 @@
+@page "/Calendar"
+@using Template.Shared.Components.Layout
+
+<HeaderLayout Title="Agenda" />
+
+<div class="content">
+    <MudButtonGroup Size="Size.Small" Color="Color.Surface" OverrideStyles="true" Variant="Variant.Filled">
+        <MudButton>Giorno</MudButton>
+        <MudButton Disabled="true">Settimana</MudButton>
+        <MudButton Disabled="true">Mese</MudButton>
+    </MudButtonGroup>
+
+    <div class="activity-filter">
+        <div class="date-controller">
+            <MudIconButton Icon="@Icons.Material.Filled.ChevronLeft" @onclick="() => DateFilter = DateFilter.AddDays(-1)" Color="Color.Surface"/>
+            <MudButton Variant="Variant.Text" Color="Color.Surface" OnClick="OpenCalendar">
+                @($"{DateFilter:M}")
+            </MudButton>
+            <MudIconButton Icon="@Icons.Material.Filled.ChevronRight" @onclick="() => DateFilter = DateFilter.AddDays(1)" Color="Color.Surface" />
+        </div>
+
+        <MudOverlay @bind-Visible="_isVisible" DarkBackground="true" AutoClose="true">
+            <MudDatePicker PickerVariant="PickerVariant.Static" Date="DateFilter" />
+        </MudOverlay>
+    </div>
+
+    <div class="card-container">
+        <ActivityCard Type="memo" />
+        <ActivityCard Type="commessa"/>
+        <ActivityCard Type="interna"/>
+    </div>
+    
+    <MudMenu PopoverClass="custom_popover" Class="custom-mudfab" AnchorOrigin="Origin.TopLeft" TransformOrigin="Origin.BottomRight">
+        <ActivatorContent>
+            <MudFab Color="Color.Primary" Size="Size.Small" StartIcon="@Icons.Material.Filled.Add" />
+        </ActivatorContent>
+        <ChildContent>
+            <MudMenuItem>Nuovo contatto</MudMenuItem>
+            <MudMenuItem>Nuova attivit<69></MudMenuItem>
+        </ChildContent>
+    </MudMenu>
+</div>
+
+@code {
+    private DateTime DateFilter { get; set; } = DateTime.Today;
+
+    private bool _isVisible;
+
+    public void OpenCalendar()
+    {
+        _isVisible = true;
+        StateHasChanged();
+    }
+
+}

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

@@ -0,0 +1,17 @@
+.activity-filter {
+    margin-top: .5rem;
+}
+
+.card-container {
+    margin-top: .5rem;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    gap: 1rem;
+}
+
+.date-controller {
+    display: flex;
+    align-items: center;
+}

Template.Shared/Components/Pages/Counter.razor

@@ -1,16 +0,0 @@
-@page "/counter"
-
-<h1>Counter</h1>
-
-<p role="status">Current count: @currentCount</p>
-
-<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
-
-@code {
-    private int currentCount = 0;
-
-    private void IncrementCount()
-    {
-        currentCount++;
-    }
-}

Template.Shared/Components/Pages/DeviceFormFactor.razor

@@ -1,23 +0,0 @@
-@page "/device-form-factor"
-@using Template.Shared.Interfaces
-@inject IFormFactor FormFactor
-
-<PageTitle>Form Factor</PageTitle>
-
-<h1>Device Form Factor</h1>
-
-<p>You are running on:</p>
-
-<ul>
-    <li>Form Factor: @factor</li>
-    <li>Platform: @platform</li>
-</ul>
-
-<p>
-    <em>This component is defined in the Template.Shared library.</em>
-</p>
-
-@code {
-    private string factor => FormFactor.GetFormFactor();
-    private string platform => FormFactor.GetPlatform();
-}

Template.Shared/Components/Pages/Home.razor

@@ -1,15 +1,10 @@
 @page "/"
 
-<h1>Hello, world!</h1>
+@code
-
+{
-Welcome to your new app.
+    protected override Task OnInitializedAsync()
-
+    {
-<Modal @ref="modal" title="Full screen" Fullscreen="ModalFullscreen.Always">
+        NavigationManager.NavigateTo("/Calendar");
-    <BodyTemplate>...</BodyTemplate>
+        return base.OnInitializedAsync();
-</Modal>
+    }
-
-<Button Color="ButtonColor.Primary" @onclick="() => modal.ShowAsync()">Full screen</Button>
-
-@code {
-    private Modal modal = default!;
 }

Template.Shared/Components/Pages/Impostazioni.razor

@@ -1,6 +0,0 @@
-@page "/settings"
-<h3>Impostazioni</h3>
-
-@code {
-    
-}

Template.Shared/Components/Pages/Log Book.razor

@@ -1,10 +0,0 @@
-@page "/logbook"
-@using Template.Shared.Components.SingleElements
-<h3 class="page-title">Log book</h3>
-
-<NoDataAvailable ImageSource="_content/Template.Shared/images/log-book.svg"
-                 Text="Nessun log book memorizzato"/>
-
-@code {
-    
-}

Template.Shared/Components/Pages/PersonalInfo.razor

@@ -0,0 +1,8 @@
+@page "/PersonalInfo"
+@using Template.Shared.Components.Layout
+
+<HeaderLayout Title="Profilo" />
+
+@code {
+
+}

Template.Shared/Components/Pages/Users.razor

@@ -0,0 +1,8 @@
+@page "/Users"
+@using Template.Shared.Components.Layout
+
+<HeaderLayout Title="Contatti" />
+
+@code {
+
+}

Template.Shared/Components/Pages/Weather.razor

@@ -1,61 +0,0 @@
-@page "/weather"
-
-<h1>Weather</h1>
-
-<p>This component demonstrates showing data.</p>
-
-@if (forecasts == null)
-{
-    <p><em>Loading...</em></p>
-}
-else
-{
-    <table class="table">
-        <thead>
-            <tr>
-                <th>Date</th>
-                <th>Temp. (C)</th>
-                <th>Temp. (F)</th>
-                <th>Summary</th>
-            </tr>
-        </thead>
-        <tbody>
-            @foreach (var forecast in forecasts)
-            {
-                <tr>
-                    <td>@forecast.Date.ToShortDateString()</td>
-                    <td>@forecast.TemperatureC</td>
-                    <td>@forecast.TemperatureF</td>
-                    <td>@forecast.Summary</td>
-                </tr>
-            }
-        </tbody>
-    </table>
-}
-
-@code {
-    private WeatherForecast[]? forecasts;
-
-    protected override async Task OnInitializedAsync()
-    {
-        // Simulate asynchronous loading to demonstrate a loading indicator
-        await Task.Delay(500);
-
-        var startDate = DateOnly.FromDateTime(DateTime.Now);
-        var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
-        forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
-        {
-            Date = startDate.AddDays(index),
-            TemperatureC = Random.Shared.Next(-20, 55),
-            Summary = summaries[Random.Shared.Next(summaries.Length)]
-        }).ToArray();
-    }
-
-    private class WeatherForecast
-    {
-        public DateOnly Date { get; set; }
-        public int TemperatureC { get; set; }
-        public string? Summary { get; set; }
-        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
-    }
-}

Template.Shared/Components/Pages/Workout.razor

@@ -1,12 +0,0 @@
-@page "/workout"
-@using Template.Shared.Components.SingleElements
-<h3 class="page-title">Workout</h3>
-
-<NoDataAvailable ImageSource="_content/Template.Shared/images/man-doing-squats.svg"
-                 Text="Nessun workout disponibile"/>
-
-@code {
-
-
-
-}

Template.Shared/Components/SingleElements/Card/ActivityCard.razor

@@ -0,0 +1,20 @@
+<div class="activity-card @Type">
+    <div class="activity-hours-section">
+        <span class="activity-hours">14:00</span>
+        <MudChip T="string" Icon="@IconConstants.Chip.Time" Color="Color.Dark" Size="Size.Small">1h</MudChip>
+    </div>
+            
+    <div class="activity-body-section">
+        <span class="activity-title">Format</span>
+        <span class="activity-subtitle">Preparazione preventivo</span>
+    </div>
+            
+    <div class="activity-info-section">
+        <MudChip T="string" Icon="@IconConstants.Chip.Stato" Size="Size.Small" Color="Color.Success">Completata</MudChip>
+        <MudChip T="string" Icon="@IconConstants.Chip.User" Size="Size.Small">GMANCINI</MudChip>
+    </div>
+</div>
+
+@code {
+    [Parameter] public string Type { get; set; } = "";
+}

Template.Shared/Components/SingleElements/Card/ActivityCard.razor.css

@@ -0,0 +1,47 @@
+.activity-card {
+    background: var(--mud-palette-background-gray);
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: .5rem .7rem;
+    border-radius: 12px;
+    line-height: normal;
+}
+
+.activity-card.memo { border-left: 5px solid var(--mud-palette-info-darken); }
+
+.activity-card.interna { border-left: 5px solid var(--mud-palette-success-darken); }
+
+.activity-card.commessa { border-left: 5px solid var(--mud-palette-warning); }
+
+.activity-hours-section {
+    width: min-content;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.activity-hours { font-weight: 700; }
+
+.activity-hours-section ::deep .mud-chip { margin: 5px 0 0 !important; }
+
+.activity-body-section {
+    width: fit-content;
+    margin: 0 .5rem;
+    display: flex;
+    flex-direction: column;
+}
+
+.activity-title {
+    font-weight: 800;
+    font-size: medium;
+}
+
+.activity-subtitle {
+    font-size: smaller;
+    color: var(--mud-palette-gray-darker)
+}
+
+.activity-info-section { width: min-content; }

Template.Shared/Core/Helpers/IconConstants.cs

@@ -0,0 +1,11 @@
+namespace Template.Shared.Core.Helpers;
+
+class IconConstants
+{
+    public class Chip
+    {
+        public const string Stato = "ri-list-check-3 fa-fw fa-chip";
+        public const string User = "ri-user-fill fa-fw fa-chip";
+        public const string Time = "ri-time-line fa-fw fa-chip";
+    }
+}

Template.Shared/Template.Shared.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <TargetFramework>net8.0</TargetFramework>
+    <TargetFramework>net9.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
@@ -11,12 +11,14 @@
   </ItemGroup>
 
   <ItemGroup>
-    <PackageReference Include="Blazor.Bootstrap" Version="3.0.0" />
+    <PackageReference Include="IntegryApiClient.Core" Version="1.1.3" />
-    <PackageReference Include="IntegryApiClient.Core" Version="1.0.7" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="9.0.4" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.8" />
+    <PackageReference Include="MudBlazor" Version="8.6.0" />
+    <PackageReference Include="MudBlazor.ThemeManager" Version="3.0.0" />
   </ItemGroup>
 
   <ItemGroup>
+    <Folder Include="wwwroot\css\lineicons\" />
     <Folder Include="wwwroot\js\bootstrap\" />
   </ItemGroup>
 

Template.Shared/_Imports.razor

@@ -6,5 +6,10 @@
 @using Microsoft.AspNetCore.Components.Web.Virtualization
 @using Microsoft.JSInterop
 @using Template.Shared.Components
-@using BlazorBootstrap;
+@using MudBlazor
+@using MudBlazor.ThemeManager
+@using Template.Shared.Core.Helpers
+@using Template.Shared.Components.SingleElements.Card
 @using static InteractiveRenderSettings
+
+@inject NavigationManager NavigationManager

Template.Shared/wwwroot/css/app.css

@@ -1,11 +1,15 @@
 html, body {
-    font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family: "Nunito", sans-serif;
     font-size: 14px;
     font-weight: 400;
     line-height: 1.8;
     color: black;
 }
 
+* { font-family: "Nunito", sans-serif !important; }
+
+.mud-button-label { font-weight: 700 !important; }
+
 a, .btn-link {
     /*color: #006bb7;*/
     text-decoration: none;
@@ -18,29 +22,22 @@ a, .btn-link {
     border-color: var(--darker-color);
 }
 
-.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
+.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; }
-    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
-}
 
 .content {
     padding-top: 1.1rem;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
 }
 
-h1:focus {
+h1:focus { outline: none; }
-    outline: none;
-}
 
-.valid.modified:not([type=checkbox]) {
+.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
-    outline: 1px solid #26b050;
-}
 
-.invalid {
+.invalid { outline: 1px solid #e50000; }
-    outline: 1px solid #e50000;
-}
 
-.validation-message {
+.validation-message { color: #e50000; }
-    color: #e50000;
-}
 
 #blazor-error-ui {
     background: lightyellow;
@@ -67,18 +64,41 @@ h1:focus {
     color: white;
 }
 
-.blazor-error-boundary::after {
+.blazor-error-boundary::after { content: "An error has occurred." }
-    content: "An error has occurred."
-}
 
-.status-bar-safe-area {
+.status-bar-safe-area { display: none; }
-    display: none;
-}
 
 .page-title {
-    /*text-align: center;*/
     font-size: x-large;
-    color: var(--darker-color);
+    font-weight: 800;
+    color: var(--mud-palette-text-primary);
+}
+
+.custom-mudfab {
+    position: fixed !important;
+    bottom: 4rem;
+    margin-bottom: 16px;
+    right: 16px;
+}
+
+.custom_popover {
+    border-radius: 5px !important;
+    background-color: var(--mud-palette-drawer-background) !important;
+    box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 0.26), 0px 0px 0px 1px rgb(255 255 255 / 25%) !important;
+    color: var(--mud-palette-text-primary) !important;
+}
+
+.custom_popover .mud-divider { border-color: var(--mud-palette-text-primary) !important; }
+
+.custom_popover .mud-list-padding { padding: 3px 0px 3px 0px !important; }
+
+.custom_popover .mud-list-item { padding: 5px 12px 5px 12px; }
+
+.custom_popover .mud-menu-item-text { font-weight: 600; }
+
+.custom_popover .mud-list-item-icon {
+    min-width: fit-content !important;
+    padding-right: 12px !important;
 }
 
 @supports (-webkit-touch-callout: none) {
@@ -98,7 +118,5 @@ h1:focus {
         height: 100vh;
     }
 
-    .flex-column, .navbar-brand {
+    .flex-column, .navbar-brand { padding-left: env(safe-area-inset-left); }
-        padding-left: env(safe-area-inset-left);
-    }
 }

Template.Shared/wwwroot/js/main.js

@@ -0,0 +1 @@
+

Template.Web/Components/Pages/Error.razor

@@ -24,13 +24,12 @@
     and restarting the app.
 </p>
 
-@code{
+@code {
-    [CascadingParameter]
-    private HttpContext? HttpContext { get; set; }
-
     private string? RequestId { get; set; }
     private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
 
-    protected override void OnInitialized() =>
+    protected override void OnInitialized()
-        RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier;
+    {
+        RequestId = Guid.NewGuid().ToString();
+    }
 }

Template.Web/Program.cs

@@ -1,5 +1,8 @@
 using IntegryApiClient.Blazor;
-using Template.Web.Components;
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using MudBlazor.Services;
+using Template.Shared.Components;
 using Template.Shared.Interfaces;
 using Template.Web.Services;
 
@@ -10,34 +13,16 @@ const string BaseRestServicesEndpoint = "https://devservices.studioml.it/ems-api
     const string BaseRestServicesEndpoint = "https://services.studioml.it/ems-api/";
 #endif
 
-var builder = WebApplication.CreateBuilder(args);
+var builder = WebAssemblyHostBuilder.CreateDefault(args);
 
-// Add services to the container.
+builder.Services.AddMudServices();
-builder.Services.AddRazorComponents()
+builder.Services.AddAuthorizationCore();
-    .AddInteractiveServerComponents();
-
-builder.Services.AddBlazorBootstrap();
 builder.Services.UseIntegry(BaseRestServicesEndpoint);
 
 builder.Services.AddScoped<IFormFactor, FormFactor>();
 
-var app = builder.Build();
+builder.RootComponents.Add<Routes>("#app");
+builder.RootComponents.Add<HeadOutlet>("head::after");
+builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
 
-// Configure the HTTP request pipeline.
+await builder.Build().RunAsync();
-if (!app.Environment.IsDevelopment())
-{
-    app.UseExceptionHandler("/Error", createScopeForErrors: true);
-    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
-    app.UseHsts();
-}
-
-app.UseHttpsRedirection();
-
-app.UseStaticFiles();
-app.UseAntiforgery();
-
-app.MapRazorComponents<App>()
-    .AddInteractiveServerRenderMode()
-    .AddAdditionalAssemblies(typeof(Template.Shared._Imports).Assembly);
-
-app.Run();

Template.Web/Template.Web.csproj

@@ -1,17 +1,24 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
   <PropertyGroup>
-    <TargetFramework>net8.0</TargetFramework>
+    <TargetFramework>net9.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="IntegryApiClient.Blazor" Version="1.0.9" />
+    <PackageReference Include="IntegryApiClient.Blazor" Version="1.1.3" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="9.0.3" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.3" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.3" />
   </ItemGroup>
 
   <ItemGroup>
     <ProjectReference Include="..\Template.Shared\Template.Shared.csproj" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Folder Include="wwwroot\" />
+  </ItemGroup>
+
 </Project>

Template.Web/wwwroot/index.html

@@ -8,32 +8,35 @@
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
 
-    <link href="_content/Template.Shared/css/bootstrap/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <link href="_content/Template.Shared/css/bootstrap/bootstrap.min.css" rel="stylesheet">
     <link href="_content/Template.Shared/css/bootstrap/bootstrap-icons.min.css" rel="stylesheet" />
-    <link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" />
+    <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
 
     <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/default-theme.css" />
     <link rel="stylesheet" href="Template.Web.styles.css" />
-
-    <HeadOutlet @rendermode="InteractiveServer" />
 </head>
 
 <body>
-<Routes @rendermode="InteractiveServer" />
+    <div id="app">
+        <div class="spinner-container">
+            <span class="loader"></span>
+        </div>
+    </div>
 
-    <script src="_framework/blazor.web.js"></script>
+    <script src="_framework/blazor.webassembly.js"></script>
-    <script src="_content/Template.Shared/js/bootstrap/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+    <script src="_content/Template.Shared/js/bootstrap/bootstrap.bundle.min.js"></script>
     <!-- Add chart.js reference if chart components are used in your application. -->
-    <!--<script src="_content/Template.Shared/js/bootstrap/chart.umd.js" integrity="sha512-gQhCDsnnnUfaRzD8k1L5llCCV6O9HN09zClIzzeJ8OJ9MpGmIlCxm+pdCkqTwqJ4JcjbojFr79rl2F1mzcoLMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>-->
+    <!--<script src="_content/ConSegna.Shared/js/bootstrap/chart.umd.js" integrity="sha512-gQhCDsnnnUfaRzD8k1L5llCCV6O9HN09zClIzzeJ8OJ9MpGmIlCxm+pdCkqTwqJ4JcjbojFr79rl2F1mzcoLMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>-->
     <!-- Add chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->
-    <!--<script src="_content/Template.Shared/js/bootstrap/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>-->
+    <!--<script src="_content/ConSegna.Shared/js/bootstrap/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>-->
     <!-- Add sortable.js reference if SortableList component is used in your application. -->
-    <!--<script src="_content/Template.Shared/js/bootstrap/Sortable.min.js"></script>-->
+    <!--<script src="_content/ConSegna.Shared/js/bootstrap/Sortable.min.js"></script>-->
-    <script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>
+    <script src="_content/MudBlazor/MudBlazor.min.js"></script>
+    <script src="_content/Template.Shared/js/main.js"></script>
 </body>
 
 </html>