From 5afe4f47458e2f49fe968dfe0bd9b49d997669dc Mon Sep 17 00:00:00 2001
From: MarcoE <m.elefante@integry.it>
Date: Thu, 12 Feb 2026 10:43:16 +0100
Subject: [PATCH] Aggiunta selezione negozio

---
 SteUp.Maui/Core/CoreModule.cs                 |  5 ++
 SteUp.Maui/wwwroot/index.html                 |  1 +
 .../Components/Layout/MainLayout.razor        |  3 +
 SteUp.Shared/Components/Layout/NavMenu.razor  |  2 +
 SteUp.Shared/Components/Pages/Login.razor     |  1 +
 SteUp.Shared/Components/Routes.razor          |  5 ++
 .../SingleElements/Card/ShopCard.razor        | 35 ++++++++
 .../SingleElements/Card/ShopCard.razor.css    | 10 +++
 .../SingleElements/ConnectionState.razor      | 26 ++++++
 .../Modal/ModalSelectShop.razor               | 86 +++++++++++++++++++
 .../Modal/ModalSelectShop.razor.css           | 18 ++++
 .../Core/Data/Contracts/ISteupDataService.cs  | 10 +++
 SteUp.Shared/Core/Data/SteupDataService.cs    | 25 ++++++
 SteUp.Shared/Core/Dto/PuntoVenditaDto.cs      | 24 ++++++
 SteUp.Shared/Core/Helpers/ModalHelper.cs      | 24 ++++++
 .../IntegryApi/IIntegrySteupService.cs        |  9 ++
 .../Core/Services/IntegrySteupService.cs      | 17 ++++
 SteUp.Shared/_Imports.razor                   |  5 +-
 SteUp.Shared/wwwroot/css/app.css              | 28 ++++++
 SteUp.Shared/wwwroot/css/custom-mudBlazor.css | 25 ++++++
 SteUp.Shared/wwwroot/css/form.css             |  1 -
 SteUp.Shared/wwwroot/js/main.js               | 39 +++++++++
 22 files changed, 397 insertions(+), 2 deletions(-)
 create mode 100644 SteUp.Shared/Components/SingleElements/Card/ShopCard.razor
 create mode 100644 SteUp.Shared/Components/SingleElements/Card/ShopCard.razor.css
 create mode 100644 SteUp.Shared/Components/SingleElements/ConnectionState.razor
 create mode 100644 SteUp.Shared/Components/SingleElements/Modal/ModalSelectShop.razor
 create mode 100644 SteUp.Shared/Components/SingleElements/Modal/ModalSelectShop.razor.css
 create mode 100644 SteUp.Shared/Core/Data/Contracts/ISteupDataService.cs
 create mode 100644 SteUp.Shared/Core/Data/SteupDataService.cs
 create mode 100644 SteUp.Shared/Core/Dto/PuntoVenditaDto.cs
 create mode 100644 SteUp.Shared/Core/Helpers/ModalHelper.cs
 create mode 100644 SteUp.Shared/Core/Interface/IntegryApi/IIntegrySteupService.cs
 create mode 100644 SteUp.Shared/Core/Services/IntegrySteupService.cs
 create mode 100644 SteUp.Shared/wwwroot/css/custom-mudBlazor.css

diff --git a/SteUp.Maui/Core/CoreModule.cs b/SteUp.Maui/Core/CoreModule.cs
index 0aa1b71..1c1fe77 100644
--- a/SteUp.Maui/Core/CoreModule.cs
+++ b/SteUp.Maui/Core/CoreModule.cs
@@ -2,6 +2,8 @@
 using SteUp.Maui.Core.Services;
 using SteUp.Maui.Core.System;
 using SteUp.Maui.Core.System.Network;
+using SteUp.Shared.Core.Data;
+using SteUp.Shared.Core.Data.Contracts;
 using SteUp.Shared.Core.Interface;
 using SteUp.Shared.Core.Interface.IntegryApi;
 using SteUp.Shared.Core.Interface.System;
@@ -16,11 +18,14 @@ public static class CoreModule
     {
         builder.Services.AddSingleton<IFormFactor, FormFactor>();
         builder.Services.AddSingleton<IGenericSystemService, GenericSystemService>();
+        
+        builder.Services.AddScoped<ISteupDataService, SteupDataService>();
     }
 
     public static void RegisterIntegryServices(this MauiAppBuilder builder)
     {
         builder.Services.AddScoped<IIntegryApiService, IntegryApiService>();
+        builder.Services.AddScoped<IIntegrySteupService, IntegrySteupService>();
     }
 
     public static void RegisterSystemService(this MauiAppBuilder builder)
diff --git a/SteUp.Maui/wwwroot/index.html b/SteUp.Maui/wwwroot/index.html
index af42dc4..eb4f6e1 100644
--- a/SteUp.Maui/wwwroot/index.html
+++ b/SteUp.Maui/wwwroot/index.html
@@ -20,6 +20,7 @@
     <link rel="stylesheet" href="_content/SteUp.Shared/css/app.css"/>
     <link rel="stylesheet" href="_content/SteUp.Shared/css/form.css"/>
     <link rel="stylesheet" href="_content/SteUp.Shared/css/default-theme.css"/>
+    <link rel="stylesheet" href="_content/SteUp.Shared/css/custom-mudBlazor.css"/>
     <link rel="stylesheet" href="SteUp.Maui.styles.css"/>
     <link rel="icon" type="image/png" href="favicon.png"/>
 </head>
diff --git a/SteUp.Shared/Components/Layout/MainLayout.razor b/SteUp.Shared/Components/Layout/MainLayout.razor
index 76ab0c2..bd0b872 100644
--- a/SteUp.Shared/Components/Layout/MainLayout.razor
+++ b/SteUp.Shared/Components/Layout/MainLayout.razor
@@ -1,4 +1,5 @@
 @using System.Globalization
+@using SteUp.Shared.Components.SingleElements
 @using SteUp.Shared.Core.Interface.IntegryApi
 @using SteUp.Shared.Core.Interface.System.Network
 @inherits LayoutComponentBase
@@ -10,6 +11,8 @@
 <MudDialogProvider/>
 <MudSnackbarProvider/>
 
+<ConnectionState IsNetworkAvailable="IsNetworkAvailable" ServicesIsDown="ServicesIsDown" ShowWarning="ShowWarning" />
+
 <div class="page">
     <NavMenu/>
 
diff --git a/SteUp.Shared/Components/Layout/NavMenu.razor b/SteUp.Shared/Components/Layout/NavMenu.razor
index a71337d..c515d5a 100644
--- a/SteUp.Shared/Components/Layout/NavMenu.razor
+++ b/SteUp.Shared/Components/Layout/NavMenu.razor
@@ -1,5 +1,6 @@
 @using SteUp.Shared.Core.Interface.System.Network
 @inject INetworkService NetworkService
+@inject IDialogService Dialog
 
 <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")">
@@ -69,5 +70,6 @@
 
     private void NewActivity()
     {
+        _ = ModalHelper.OpenSelectShop(Dialog);
     }
 }
\ No newline at end of file
diff --git a/SteUp.Shared/Components/Pages/Login.razor b/SteUp.Shared/Components/Pages/Login.razor
index 2e8c2f7..9350fa2 100644
--- a/SteUp.Shared/Components/Pages/Login.razor
+++ b/SteUp.Shared/Components/Pages/Login.razor
@@ -88,6 +88,7 @@ else
             {
                 await UserAccountService.Login(UserData.Username, UserData.Password, UserData.CodHash);
                 AuthenticationStateProvider.NotifyAuthenticationState(); //Chiamato per forzare il refresh
+                await SteupDataService.Init();
 
                 LocalStorage.SetString("codHash", UserData.CodHash);
                 NavigationManager.NavigateTo("/");
diff --git a/SteUp.Shared/Components/Routes.razor b/SteUp.Shared/Components/Routes.razor
index c707971..40c698a 100644
--- a/SteUp.Shared/Components/Routes.razor
+++ b/SteUp.Shared/Components/Routes.razor
@@ -45,4 +45,9 @@
 
     private ErrorBoundary? ErrorBoundary { get; set; }
     private ExceptionModal ExceptionModal { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        await SteupDataService.Init();
+    }
 }
\ No newline at end of file
diff --git a/SteUp.Shared/Components/SingleElements/Card/ShopCard.razor b/SteUp.Shared/Components/SingleElements/Card/ShopCard.razor
new file mode 100644
index 0000000..f10cfed
--- /dev/null
+++ b/SteUp.Shared/Components/SingleElements/Card/ShopCard.razor
@@ -0,0 +1,35 @@
+@using SteUp.Shared.Core.Dto
+
+<div class="shop-card ripple-container">
+    <div class="shop-body-section">
+        <div class="title-section">
+            <MudText Class="shop-title" Typo="Typo.subtitle1">
+                <b>@PuntoVendita.CodMdep</b> - @PuntoVendita.Descrizione
+            </MudText>
+        </div>
+        
+        @if (!PuntoVendita.Indirizzo.IsNullOrEmpty())
+        {
+            <div class="subtitle-section">
+                <MudText Class="shop-title" Typo="Typo.subtitle1">
+                    @PuntoVendita.Indirizzo
+                </MudText>
+            </div>
+            <div class="sub-info-section">
+                <MudChip T="string" Icon="@Icons.Material.Filled.LocationCity" Size="Size.Small" Color="Color.Default">
+                    @PuntoVendita.Citta
+                </MudChip>
+                <MudChip T="string" Size="Size.Small" Color="Color.Default">
+                    @PuntoVendita.Cap
+                </MudChip>
+                <MudChip T="string" Size="Size.Small" Color="Color.Default">
+                    @PuntoVendita.Provincia
+                </MudChip>
+            </div>
+        }
+    </div>
+</div>
+
+@code {
+    [Parameter] public PuntoVenditaDto PuntoVendita { get; set; } = null!;
+}
\ No newline at end of file
diff --git a/SteUp.Shared/Components/SingleElements/Card/ShopCard.razor.css b/SteUp.Shared/Components/SingleElements/Card/ShopCard.razor.css
new file mode 100644
index 0000000..fac9dda
--- /dev/null
+++ b/SteUp.Shared/Components/SingleElements/Card/ShopCard.razor.css
@@ -0,0 +1,10 @@
+.shop-card{
+    padding: .5rem 1rem;
+    background-color: var(--mud-palette-background-gray);
+    border-radius: 1em;
+}
+
+.sub-info-section{
+    display: flex;
+    justify-content: space-evenly;
+}
\ No newline at end of file
diff --git a/SteUp.Shared/Components/SingleElements/ConnectionState.razor b/SteUp.Shared/Components/SingleElements/ConnectionState.razor
new file mode 100644
index 0000000..6ec018c
--- /dev/null
+++ b/SteUp.Shared/Components/SingleElements/ConnectionState.razor
@@ -0,0 +1,26 @@
+<div class="Connection @(ShowWarning ? "Show" : "Hide") @(IsNetworkAvailable? ServicesIsDown ? "ServicesIsDown" : "SystemOk" : "NetworkKo")">
+    @if (IsNetworkAvailable)
+    {
+        if(ServicesIsDown)
+        {
+            <i class="ri-cloud-off-fill"></i>
+            <span>Servizi offline</span>
+        }
+        else
+        {
+            <i class="ri-cloud-fill"></i>
+            <span>Online</span>
+        }
+    }
+    else
+    {
+        <i class="ri-wifi-off-line"></i>
+        <span>Nessuna connessione</span>
+    }
+</div>
+
+@code{
+    [Parameter] public bool IsNetworkAvailable { get; set; }
+    [Parameter] public bool ServicesIsDown { get; set; }
+    [Parameter] public bool ShowWarning { get; set; }
+}
\ No newline at end of file
diff --git a/SteUp.Shared/Components/SingleElements/Modal/ModalSelectShop.razor b/SteUp.Shared/Components/SingleElements/Modal/ModalSelectShop.razor
new file mode 100644
index 0000000..1c403ff
--- /dev/null
+++ b/SteUp.Shared/Components/SingleElements/Modal/ModalSelectShop.razor
@@ -0,0 +1,86 @@
+@using SteUp.Shared.Components.SingleElements.Card
+@using SteUp.Shared.Core.Dto
+
+<MudDialog OnBackdropClick="Cancel">
+    <DialogContent>
+
+        <div class="select-shop-content">
+            <div class="shop-header">
+                <div class="shop-title">
+                    <MudText Typo="Typo.h5"><b>Seleziona il negozio</b></MudText>
+            
+                    <MudIconButton Icon="@Icons.Material.Rounded.Close" Size="Size.Small" OnClick="@Cancel"/>
+                </div>
+
+                <div class="input-card clearButton">
+                    <MudTextField T="string?" Placeholder="Cerca..." Variant="Variant.Text"
+                                  @bind-Value="FilterText" DebounceInterval="500"
+                                  OnDebounceIntervalElapsed="ApplyFilters"/>
+                </div>
+            </div>
+
+            <div class="shop-body">
+                @if (_afterRender)
+                {
+                    if (FilteredList.IsNullOrEmpty())
+                    {
+                        <MudText Typo="Typo.body2">Nessun negozio trovato</MudText>
+                    }
+                    else
+                    {
+                        <Virtualize Items="FilteredList" Context="puntoVendita">
+                            <ShopCard PuntoVendita="puntoVendita"/>
+                        </Virtualize>
+                    }
+                }
+            </div>
+        </div>
+
+    </DialogContent>
+</MudDialog>
+
+@code {
+    [CascadingParameter] private IMudDialogInstance MudDialog { get; set; } = null!;
+
+    private List<PuntoVenditaDto>? FilteredList { get; set; }
+    private string? FilterText { get; set; }
+
+    private bool _afterRender;
+
+    private void Cancel() => MudDialog.Cancel();
+
+    protected override void OnInitialized()
+    {
+        _afterRender = false;
+    }
+
+    protected override void OnAfterRender(bool firstRender)
+    {
+        if (_afterRender) return;
+
+        _afterRender = true;
+        ApplyFilters();
+    }
+
+    private void ApplyFilters()
+    {
+        if (FilterText.IsNullOrEmpty())
+        {
+            FilteredList = SteupDataService.PuntiVenditaList;
+            StateHasChanged();
+            return;
+        }
+
+        FilteredList = SteupDataService.PuntiVenditaList.FindAll(x =>
+            (x.Indirizzo != null && x.Indirizzo.ContainsIgnoreCase(FilterText!)) ||
+            (x.Descrizione != null && x.Descrizione.ContainsIgnoreCase(FilterText!)) ||
+            (x.CodMdep != null && x.CodMdep.ContainsIgnoreCase(FilterText!)) ||
+            (x.Citta != null && x.Citta.ContainsIgnoreCase(FilterText!)) ||
+            (x.Cap != null && x.Cap.ContainsIgnoreCase(FilterText!)) ||
+            (x.Provincia != null && x.Provincia.ContainsIgnoreCase(FilterText!))
+        );
+
+        StateHasChanged();
+    }
+
+}
\ No newline at end of file
diff --git a/SteUp.Shared/Components/SingleElements/Modal/ModalSelectShop.razor.css b/SteUp.Shared/Components/SingleElements/Modal/ModalSelectShop.razor.css
new file mode 100644
index 0000000..c1a654a
--- /dev/null
+++ b/SteUp.Shared/Components/SingleElements/Modal/ModalSelectShop.razor.css
@@ -0,0 +1,18 @@
+.shop-header{
+    display: flex;
+    flex-direction: column;
+    gap: .5rem;
+}
+
+.shop-title{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.shop-body{
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
\ No newline at end of file
diff --git a/SteUp.Shared/Core/Data/Contracts/ISteupDataService.cs b/SteUp.Shared/Core/Data/Contracts/ISteupDataService.cs
new file mode 100644
index 0000000..3fd77e0
--- /dev/null
+++ b/SteUp.Shared/Core/Data/Contracts/ISteupDataService.cs
@@ -0,0 +1,10 @@
+using SteUp.Shared.Core.Dto;
+
+namespace SteUp.Shared.Core.Data.Contracts;
+
+public interface ISteupDataService
+{
+    Task Init();
+    
+    List<PuntoVenditaDto> PuntiVenditaList { get; }
+}
\ No newline at end of file
diff --git a/SteUp.Shared/Core/Data/SteupDataService.cs b/SteUp.Shared/Core/Data/SteupDataService.cs
new file mode 100644
index 0000000..99f1131
--- /dev/null
+++ b/SteUp.Shared/Core/Data/SteupDataService.cs
@@ -0,0 +1,25 @@
+using IntegryApiClient.Core.Domain.Abstraction.Contracts.Account;
+using SteUp.Shared.Core.Data.Contracts;
+using SteUp.Shared.Core.Dto;
+using SteUp.Shared.Core.Interface.IntegryApi;
+
+namespace SteUp.Shared.Core.Data;
+
+public class SteupDataService(
+    IIntegrySteupService integrySteupService,
+    IUserSession userSession) : ISteupDataService
+{
+    public Task Init()
+    {
+        return LoadDataAsync();
+    }
+
+    private async Task LoadDataAsync()
+    {
+        if (!await userSession.IsLoggedIn()) return;
+
+        PuntiVenditaList = await integrySteupService.RetrievePuntiVendita();
+    }
+
+    public List<PuntoVenditaDto> PuntiVenditaList { get; private set; } = [];
+}
\ No newline at end of file
diff --git a/SteUp.Shared/Core/Dto/PuntoVenditaDto.cs b/SteUp.Shared/Core/Dto/PuntoVenditaDto.cs
new file mode 100644
index 0000000..4750410
--- /dev/null
+++ b/SteUp.Shared/Core/Dto/PuntoVenditaDto.cs
@@ -0,0 +1,24 @@
+using System.Text.Json.Serialization;
+
+namespace SteUp.Shared.Core.Dto;
+
+public class PuntoVenditaDto
+{
+    [JsonPropertyName("codMdep")]
+    public string? CodMdep { get; set; }
+
+    [JsonPropertyName("descrizione")]
+    public string? Descrizione { get; set; }
+
+    [JsonPropertyName("indirizzo")]
+    public string? Indirizzo { get; set; }
+
+    [JsonPropertyName("cap")]
+    public string? Cap { get; set; }
+
+    [JsonPropertyName("citta")]
+    public string? Citta { get; set; }
+
+    [JsonPropertyName("provincia")]
+    public string? Provincia { get; set; }
+}
\ No newline at end of file
diff --git a/SteUp.Shared/Core/Helpers/ModalHelper.cs b/SteUp.Shared/Core/Helpers/ModalHelper.cs
new file mode 100644
index 0000000..e9a6c39
--- /dev/null
+++ b/SteUp.Shared/Core/Helpers/ModalHelper.cs
@@ -0,0 +1,24 @@
+using MudBlazor;
+using SteUp.Shared.Components.SingleElements.Modal;
+
+namespace SteUp.Shared.Core.Helpers;
+
+public class ModalHelper
+{
+    public static async Task<DialogResult?> OpenSelectShop(IDialogService dialog)
+    {
+        var modal = await dialog.ShowAsync<ModalSelectShop>(
+            "ModalSelectShop",
+            new DialogParameters(),
+            new DialogOptions
+            {
+                FullScreen = false,
+                CloseButton = false,
+                NoHeader = true,
+                BackdropClick = true
+            }
+        );
+
+        return await modal.Result;
+    }
+}
\ No newline at end of file
diff --git a/SteUp.Shared/Core/Interface/IntegryApi/IIntegrySteupService.cs b/SteUp.Shared/Core/Interface/IntegryApi/IIntegrySteupService.cs
new file mode 100644
index 0000000..741a274
--- /dev/null
+++ b/SteUp.Shared/Core/Interface/IntegryApi/IIntegrySteupService.cs
@@ -0,0 +1,9 @@
+using SteUp.Shared.Core.Dto;
+
+namespace SteUp.Shared.Core.Interface.IntegryApi;
+
+public interface IIntegrySteupService
+{
+    //Retrieve
+    Task<List<PuntoVenditaDto>> RetrievePuntiVendita();
+}
\ No newline at end of file
diff --git a/SteUp.Shared/Core/Services/IntegrySteupService.cs b/SteUp.Shared/Core/Services/IntegrySteupService.cs
new file mode 100644
index 0000000..87197f2
--- /dev/null
+++ b/SteUp.Shared/Core/Services/IntegrySteupService.cs
@@ -0,0 +1,17 @@
+using IntegryApiClient.Core.Domain.RestClient.Contacts;
+using SteUp.Shared.Core.Dto;
+using SteUp.Shared.Core.Interface.IntegryApi;
+
+namespace SteUp.Shared.Core.Services;
+
+public class IntegrySteupService(IIntegryApiRestClient integryApiRestClient) : IIntegrySteupService
+{
+    private const string BaseRequest = "steup";
+
+    #region Retrieve
+
+    public Task<List<PuntoVenditaDto>> RetrievePuntiVendita() =>
+        integryApiRestClient.AuthorizedGet<List<PuntoVenditaDto>>($"{BaseRequest}/getPuntiVendita")!;
+
+    #endregion
+}
\ No newline at end of file
diff --git a/SteUp.Shared/_Imports.razor b/SteUp.Shared/_Imports.razor
index 16c00c2..42f22e5 100644
--- a/SteUp.Shared/_Imports.razor
+++ b/SteUp.Shared/_Imports.razor
@@ -11,9 +11,12 @@
 @using Microsoft.AspNetCore.Authorization
 @using Microsoft.AspNetCore.Components.Authorization
 @using MudBlazor
+@using SteUp.Shared.Core.Data.Contracts
+@using SteUp.Shared.Core.Helpers
 @using static InteractiveRenderSettings
 
 @inject NavigationManager NavigationManager
 @inject IUserSession UserSession
 @inject ILocalStorage LocalStorage
-@inject ISnackbar Snackbar
\ No newline at end of file
+@inject ISnackbar Snackbar
+@inject ISteupDataService SteupDataService
\ No newline at end of file
diff --git a/SteUp.Shared/wwwroot/css/app.css b/SteUp.Shared/wwwroot/css/app.css
index c5490f8..2eace66 100644
--- a/SteUp.Shared/wwwroot/css/app.css
+++ b/SteUp.Shared/wwwroot/css/app.css
@@ -274,4 +274,32 @@ h1:focus { outline: none; }
     .flex-column, .navbar-brand { padding-left: env(safe-area-inset-left); }
 
     .customDialog-form .mud-dialog-content { margin-top: env(safe-area-inset-top); }
+}
+
+/*Ripple*/
+.ripple-container {
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+    transform: translateZ(0);
+}
+
+.ripple {
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    animation: ripple-effect 0.6s linear;
+    background-color: rgba(0, 0, 0, 0.2);
+    pointer-events: none;
+}
+
+@keyframes ripple-effect {
+    to {
+        transform: scale(4);
+        opacity: 0;
+    }
+}
+
+.ripple-white .ripple {
+    background-color: rgba(255, 255, 255, 0.5);
 }
\ No newline at end of file
diff --git a/SteUp.Shared/wwwroot/css/custom-mudBlazor.css b/SteUp.Shared/wwwroot/css/custom-mudBlazor.css
new file mode 100644
index 0000000..debf582
--- /dev/null
+++ b/SteUp.Shared/wwwroot/css/custom-mudBlazor.css
@@ -0,0 +1,25 @@
+/*---Blazor custom---*/
+
+.mud-snackbar {
+    border-radius: 1em !important;
+}
+
+.mud-paper {
+    border-radius: 1em !important;
+}
+
+.mud-dialog {
+    border-radius: 1em !important;
+}
+
+.mud-overlay.on-top {
+    z-index: 10001 !important;
+}
+
+.mud-popover.mud-popover-open {
+    border-radius: 1em !important;
+}
+
+.mud-picker-popover-paper {
+    border-radius: 1em !important;
+}
\ No newline at end of file
diff --git a/SteUp.Shared/wwwroot/css/form.css b/SteUp.Shared/wwwroot/css/form.css
index 8d13e3a..577e09e 100644
--- a/SteUp.Shared/wwwroot/css/form.css
+++ b/SteUp.Shared/wwwroot/css/form.css
@@ -33,7 +33,6 @@
     background: var(--mud-palette-background-gray);
     border-radius: 9px;
     padding: .5rem 1rem;
-    margin-bottom: 1.5rem;
 }
 
 .input-card.clearButton {
diff --git a/SteUp.Shared/wwwroot/js/main.js b/SteUp.Shared/wwwroot/js/main.js
index 65480f7..045b957 100644
--- a/SteUp.Shared/wwwroot/js/main.js
+++ b/SteUp.Shared/wwwroot/js/main.js
@@ -45,3 +45,42 @@ document.addEventListener("DOMContentLoaded", () => {
         }
     }
 });
+
+(function () {
+    // Ascoltiamo l'evento 'mousedown' su tutto il documento
+    document.addEventListener('mousedown', function (event) {
+
+        // Cerca se l'elemento cliccato (o un suo genitore) ha la classe .ripple-container
+        const target = event.target.closest('.ripple-container');
+
+        if (target) {
+            createRipple(event, target);
+        }
+    });
+
+    function createRipple(event, element) {
+        const circle = document.createElement("span");
+        const diameter = Math.max(element.clientWidth, element.clientHeight);
+        const radius = diameter / 2;
+
+        const rect = element.getBoundingClientRect();
+
+        circle.style.width = circle.style.height = `${diameter}px`;
+        circle.style.left = `${event.clientX - rect.left - radius}px`;
+        circle.style.top = `${event.clientY - rect.top - radius}px`;
+        circle.classList.add("ripple");
+
+        // Rimuovi l'elemento dal DOM alla fine dell'animazione per non intasare la memoria
+        const ripple = element.getElementsByClassName("ripple")[0];
+        if (ripple) {
+            ripple.remove();
+        }
+
+        element.appendChild(circle);
+
+        // Pulizia automatica dopo 600ms (durata animazione CSS)
+        setTimeout(() => {
+            circle.remove();
+        }, 600);
+    }
+})();