Erstes Formular + QR Integration

FilterCair.Client/Layout/MainLayout.razor

@@ -1,4 +1,5 @@
 @inherits LayoutComponentBase
+@using Microsoft.AspNetCore.Components.Authorization
 @using Microsoft.AspNetCore.Components.WebAssembly.Authentication
 
 <div class="d-flex flex-column min-vh-100">
@@ -33,19 +34,21 @@
                     </li>
                 </ul>
 
-                <!-- 🔐 Login/Logout -->
+                <!-- 🔐 Login/Logout Bereich -->
                 <AuthorizeView>
                     <Authorized Context="auth">
-                        <span class="navbar-text me-3 text-white">
-                            
-                        </span>
-                        <NavLink href="authentication/logout" class="btn btn-outline-light btn-sm">
-                            Abmelden
-                        </NavLink>
+                        <div class="d-flex align-items-center gap-2">
+                            <span class="text-white small">
+                                @auth.User.Identity?.Name
+                            </span>
+                            <NavLink href="authentication/logout" class="btn btn-outline-light btn-sm">
+                                <i class="bi bi-box-arrow-right me-1"></i> Abmelden
+                            </NavLink>
+                        </div>
                     </Authorized>
                     <NotAuthorized>
                         <NavLink href="authentication/login" class="btn btn-light btn-sm">
-                            Anmelden
+                            <i class="bi bi-person-lock me-1"></i> Anmelden
                         </NavLink>
                     </NotAuthorized>
                 </AuthorizeView>
@@ -62,6 +65,6 @@
 
     <!-- 🔹 FOOTER -->
     <footer class="footer text-center small text-secondary py-2 mt-auto border-top">
-        © @DateTime.Now.Year FilterCair - FPM Service GmbH
+        © @DateTime.Now.Year FilterCair – FPM Service GmbH
     </footer>
 </div>

FilterCair.Client/Pages/Counter.razor

@@ -1,18 +0,0 @@
-@page "/counter"
-
-<PageTitle>Counter</PageTitle>
-
-<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++;
-    }
-}

FilterCair.Client/Pages/FilterForm.razor

@@ -1,91 +1,147 @@
 @page "/filterform"
 @inject IJSRuntime JS
-
 @using FilterCair.Shared.Models
+@using Microsoft.AspNetCore.Components.Forms
 
 <PageTitle>Filterdaten erfassen</PageTitle>
 
-<div class="container py-4">
-    <h4 class="mb-4 text-center">Filterdaten erfassen</h4>
+<div class="container py-4 fade-in">
+    <div class="card shadow-sm border-0 rounded-4">
+        <div class="card-body p-4">
 
-    <EditForm Model="@filter" OnValidSubmit="SaveForm">
-        <DataAnnotationsValidator />
-        <ValidationSummary />
+            <h4 class="mb-4 text-center text-primary">
+                <i class="bi bi-funnel me-2"></i> Filterdaten erfassen
+            </h4>
 
-        <div class="mb-3">
-            <label class="form-label">Filter-ID</label>
-            <InputText class="form-control" @bind-Value="filter.FilterId" placeholder="z. B. FC-A-234" />
+            <EditForm Model="@filter" OnValidSubmit="SaveForm">
+                <DataAnnotationsValidator />
+                <ValidationSummary />
+
+                <div class="row g-3">
+                    <div class="col-md-6">
+                        <label class="form-label fw-semibold">Filter-ID</label>
+                        <InputText class="form-control form-control-lg" @bind-Value="filter.FilterId" placeholder="z. B. FC-A-234" />
+                    </div>
+
+                    <div class="col-md-6">
+                        <label class="form-label fw-semibold">Halle</label>
+                        <InputSelect class="form-select form-select-lg" @bind-Value="filter.Halle">
+                            <option value="">– bitte wählen –</option>
+                            @foreach (var h in halls)
+                            {
+                                <option value="@h">@h</option>
+                            }
+                        </InputSelect>
+                    </div>
+
+                    <div class="col-md-6">
+                        <label class="form-label fw-semibold">Zustand</label>
+                        <InputSelect class="form-select form-select-lg" @bind-Value="filter.Zustand">
+                            <option value="">– bitte wählen –</option>
+                            <option>In Ordnung</option>
+                            <option>Verschmutzt</option>
+                            <option>Defekt</option>
+                        </InputSelect>
+                    </div>
+
+                    <div class="col-md-6">
+                        <label class="form-label fw-semibold">Luftdruck (Pa)</label>
+                        <InputNumber class="form-control form-control-lg" @bind-Value="filter.Luftdruck" />
+                    </div>
+
+                    <div class="col-12">
+                        <label class="form-label fw-semibold">Bemerkung</label>
+                        <InputTextArea class="form-control form-control-lg" rows="3" @bind-Value="filter.Bemerkung" />
+                    </div>
+
+                    <!-- 📸 Fotos hinzufügen -->
+                    <div class="col-12">
+                        <label class="form-label fw-semibold">Fotos anhängen</label>
+                        <InputFile OnChange="OnFilesSelected" multiple class="form-control" />
+                    </div>
+
+                    @if (imagePreviews.Count > 0)
+                    {
+                        <div class="col-12 mt-3">
+                            <div class="d-flex flex-wrap gap-3 justify-content-center">
+                                @foreach (var img in imagePreviews)
+                                {
+                                    <div class="image-preview border rounded shadow-sm">
+                                        <img src="@img" alt="Foto" class="img-thumbnail" />
+                                    </div>
+                                }
+                            </div>
+                        </div>
+                    }
+                </div>
+
+                <div class="d-grid mt-4">
+                    <button type="submit" class="btn btn-primary btn-lg rounded-pill shadow-sm">
+                        <i class="bi bi-save me-2"></i> Speichern
+                    </button>
+                </div>
+            </EditForm>
+
+            @if (showToast)
+            {
+                <div class="toast-container position-fixed bottom-0 end-0 p-3">
+                    <div class="toast align-items-center text-bg-success border-0 show fade-in-toast">
+                        <div class="d-flex">
+                            <div class="toast-body">
+                                ✅ Filterdaten erfolgreich gespeichert!
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            }
         </div>
-
-        <div class="mb-3">
-            <label class="form-label">Halle</label>
-            <InputSelect class="form-select" @bind-Value="filter.Halle">
-                <option value="">– bitte wählen –</option>
-                @foreach (var h in halls)
-                {
-                    <option value="@h">@h</option>
-                }
-            </InputSelect>
-        </div>
-
-        <div class="mb-3">
-            <label class="form-label">Zustand</label>
-            <InputSelect class="form-select" @bind-Value="filter.Zustand">
-                <option value="">– bitte wählen –</option>
-                <option>In Ordnung</option>
-                <option>Verschmutzt</option>
-                <option>Defekt</option>
-            </InputSelect>
-        </div>
-
-        <div class="mb-3">
-            <label class="form-label">Luftdruck (Pa)</label>
-            <InputNumber class="form-control" @bind-Value="filter.Luftdruck" />
-        </div>
-
-        <div class="mb-3">
-            <label class="form-label">Bemerkung</label>
-            <InputTextArea class="form-control" rows="3" @bind-Value="filter.Bemerkung" />
-        </div>
-
-        <button type="submit" class="btn btn-success w-100">
-            Speichern
-        </button>
-    </EditForm>
-
-    @if (saved)
-    {
-        <div class="alert alert-success mt-4 text-center">
-            Daten gespeichert!
-        </div>
-    }
+    </div>
 </div>
 
 @code {
     private FilterModel filter = new();
-    private bool saved = false;
     private List<string> halls = new() { "Halle A", "Halle B", "Halle C" };
+    private bool showToast;
+    private List<string> imagePreviews = new();
+
+    private async Task OnFilesSelected(InputFileChangeEventArgs e)
+    {
+        imagePreviews.Clear();
+
+        foreach (var file in e.GetMultipleFiles(3)) // max. 3 Bilder
+        {
+            using var stream = file.OpenReadStream(maxAllowedSize: 5_000_000); // 5 MB max
+            using var ms = new MemoryStream();
+            await stream.CopyToAsync(ms);
+            var base64 = Convert.ToBase64String(ms.ToArray());
+            imagePreviews.Add($"data:{file.ContentType};base64,{base64}");
+        }
+
+        StateHasChanged();
+    }
 
     private async Task SaveForm()
     {
-        saved = true;
         Console.WriteLine($"Gespeichert: {System.Text.Json.JsonSerializer.Serialize(filter)}");
-
-        // später → JS.InvokeVoidAsync("IndexedDB.saveFilter", filter);
         await JS.InvokeVoidAsync("console.log", "Filter gespeichert:", filter);
+
+        showToast = true;
+        StateHasChanged();
+
+        await Task.Delay(3000);
+        showToast = false;
+        StateHasChanged();
     }
 
-    // optional: QR-Ergebnis vorbelegen
+    [Inject] NavigationManager? NavManager { get; set; }
+
     protected override void OnInitialized()
     {
         var qrParam = NavManager?.ToAbsoluteUri(NavManager.Uri).Query;
         if (!string.IsNullOrEmpty(qrParam))
         {
-            // z. B. ?id=FC-123
             var parts = System.Web.HttpUtility.ParseQueryString(qrParam);
             filter.FilterId = parts.Get("id");
         }
     }
-
-    [Inject] NavigationManager? NavManager { get; set; }
 }

FilterCair.Client/Pages/Home.razor

@@ -1,79 +1,63 @@
 @page "/"
-@using Microsoft.AspNetCore.Components.Authorization
-@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
 @inject IJSRuntime JS
 @inject NavigationManager Nav
 
-<PageTitle>FilterCair</PageTitle>
+<PageTitle>FilterCair Dashboard</PageTitle>
 
-<div class="container py-4 text-center">
+<div class="container py-5">
+    <div class="text-center mb-5">
+        <h2 class="fw-bold text-primary mb-2">
+            <i class="bi bi-wind me-2"></i> Willkommen bei FilterCair
+        </h2>
+        <p class="text-secondary fs-5">FÜÜS - Filter Überprüf- und Überwachungssoftware</p>
 
-    <!-- 🔐 Login / Logout Bereich -->
-    <AuthorizeView Context="auth">
-        <Authorized>
-            <div class="mb-4">
-                👋 Willkommen, <strong>@auth.User.Identity?.Name</strong>!
-                <br />
-                <button class="btn btn-outline-danger btn-sm mt-2" @onclick="Logout">
-                    <i class="bi bi-box-arrow-right me-1"></i> Abmelden
-                </button>
-            </div>
-        </Authorized>
-        <NotAuthorized>
-            <div class="mb-4">
-                <button class="btn btn-success btn-lg rounded-pill" @onclick="Login">
-                    <i class="bi bi-person-lock me-2"></i> Mit Microsoft anmelden
-                </button>
-            </div>
-        </NotAuthorized>
-    </AuthorizeView>
-
-    <!-- 🌐 Online/Offline-Status -->
-    <div class="mb-4">
-        <span class="badge rounded-pill px-3 py-2 fs-6"
+        <span class="badge rounded-pill px-3 py-2 mt-3 fs-6"
               style="background-color:@(isOnline ? "#198754" : "#dc3545")">
             @(isOnline ? "🟢 Online" : "🔴 Offline")
         </span>
     </div>
 
-    <!-- 💬 Begrüßung -->
-    <h4 class="fw-semibold mb-3">Willkommen bei <span class="text-primary">FilterCair</span></h4>
-    <p class="text-secondary mb-4">
-        Wähle deine Produktionshalle und starte den Wartungsrundgang.
-    </p>
+    <!--  Dashboard-Kacheln -->
+    <div class="row g-4 justify-content-center">
+        <div class="col-12 col-sm-6 col-lg-4">
+            <div class="card dashboard-tile h-100" @onclick="@(() => Nav.NavigateTo("/qrscanner"))">
+                <div class="card-body d-flex flex-column justify-content-center align-items-center text-center">
+                    <i class="bi bi-qr-code-scan display-5 mb-3 text-primary"></i>
+                    <h5 class="fw-semibold mb-2">QR-Code scannen</h5>
+                    <p class="text-muted small mb-0">Starte den Scan und erfasse Filterdaten direkt vor Ort.</p>
+                </div>
+            </div>
+        </div>
 
-    <!-- 🏭 Auswahl der Produktionshalle -->
-    <div class="mb-4">
-        <select class="form-select text-center" @onchange="OnHallChange">
-            <option value="">Bitte Halle auswählen...</option>
-            @foreach (var hall in halls)
-            {
-                <option value="@hall">@hall</option>
-            }
-        </select>
-    </div>
+        <div class="col-12 col-sm-6 col-lg-4">
+            <div class="card dashboard-tile h-100" @onclick="@(() => Nav.NavigateTo("/filterform"))">
+                <div class="card-body d-flex flex-column justify-content-center align-items-center text-center">
+                    <i class="bi bi-funnel display-5 mb-3 text-primary"></i>
+                    <h5 class="fw-semibold mb-2">Filter erfassen</h5>
+                    <p class="text-muted small mb-0">Erfasse technische Daten oder ergänze Wartungsnotizen.</p>
+                </div>
+            </div>
+        </div>
 
-    <!-- ⚙️ Aktionen -->
-    <div class="d-grid gap-3">
-        <button class="btn btn-primary btn-lg rounded-pill" @onclick="StartScan">
-            <i class="bi bi-qr-code-scan me-2"></i> QR-Code scannen
-        </button>
-
-        <button class="btn btn-outline-secondary btn-lg rounded-pill" @onclick="ShowOfflineData">
-            <i class="bi bi-database-down me-2"></i> Offline-Daten anzeigen
-        </button>
+        <div class="col-12 col-sm-6 col-lg-4">
+            <div class="card dashboard-tile h-100" @onclick="@ShowOfflineData">
+                <div class="card-body d-flex flex-column justify-content-center align-items-center text-center">
+                    <i class="bi bi-database-down display-5 mb-3 text-primary"></i>
+                    <h5 class="fw-semibold mb-2">Offline-Daten</h5>
+                    <p class="text-muted small mb-0">Zeige gespeicherte Daten, wenn du ohne Verbindung arbeitest.</p>
+                </div>
+            </div>
+        </div>
     </div>
 
     <!-- 📍 Standortanzeige -->
-    <div class="mt-4 text-muted small">
-        📍 Standort: @currentLocation
+    <div class="text-center mt-5 text-muted small">
+        📍 Aktueller Standort: @currentLocation
     </div>
 </div>
 
 @code {
     private bool isOnline = true;
-    private string? selectedHall;
-    private List<string> halls = new() { "Halle A", "Halle B", "Halle C" };
     private string currentLocation = "unbekannt";
 
     protected override async Task OnInitializedAsync()
@@ -90,32 +74,8 @@
         StateHasChanged();
     }
 
-    private void OnHallChange(ChangeEventArgs e)
-    {
-        selectedHall = e.Value?.ToString();
-    }
-
-    private void StartScan()
-    {
-        Console.WriteLine($"Starte Scan in {selectedHall}");
-    }
-
     private void ShowOfflineData()
     {
         Console.WriteLine("Offline-Daten anzeigen");
     }
-
-    // 🔐 Auth-Methoden
-    [Inject] private IAccessTokenProvider TokenProvider { get; set; } = default!;
-
-    private void Login()
-    {
-        Nav.NavigateTo("authentication/login", forceLoad: true);
-
-    }
-
-    private void Logout()
-    {
-        Nav.NavigateTo("authentication/logout");
-    }
 }

FilterCair.Client/Pages/Weather.razor

@@ -1,57 +0,0 @@
-@page "/weather"
-@inject HttpClient Http
-
-<PageTitle>Weather</PageTitle>
-
-<h1>Weather</h1>
-
-<p>This component demonstrates fetching data from the server.</p>
-
-@if (forecasts == null)
-{
-    <p><em>Loading...</em></p>
-}
-else
-{
-    <table class="table">
-        <thead>
-            <tr>
-                <th>Date</th>
-                <th aria-label="Temperature in Celsius">Temp. (C)</th>
-                <th aria-label="Temperature in Farenheit">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()
-    {
-        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
-    }
-
-    public 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);
-    }
-}

FilterCair.Client/wwwroot/css/app.css

@@ -166,3 +166,60 @@ code {
 .bg-primary {
     background-color: var(--freudenberg-blue) !important;
 }
+
+
+/* Dashboard Style */
+.dashboard-tile {
+    border: none;
+    border-radius: 1rem;
+    box-shadow: 0 4px 12px rgba(0, 91, 153, 0.1);
+    transition: all 0.25s ease;
+    cursor: pointer;
+    background: #fff;
+}
+
+    .dashboard-tile:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 8px 20px rgba(0, 91, 153, 0.25);
+    }
+
+    .dashboard-tile:active {
+        transform: translateY(1px);
+    }
+
+.display-5 {
+    color: var(--freudenberg-blue);
+}
+
+.card-body h5 {
+    color: var(--freudenberg-blue);
+}
+
+.container {
+    animation: fadeIn 0.6s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+
+.image-preview img {
+    width: 120px;
+    height: 120px;
+    object-fit: cover;
+    border-radius: 0.5rem;
+    transition: transform 0.2s ease;
+}
+
+    .image-preview img:hover {
+        transform: scale(1.05);
+    }