Addet employee frontend and move header to a componet

PointOfSale/Pos.Web/Components/Pages/Settings/Employees.razor

@@ -1,21 +1,50 @@
 @page "/settings/employees"
 @rendermode InteractiveServer
 
+<Header />
 
-<h1>Medarbejder</h1>
+<div class="employees-page">
+    <div class="employees-header">
+        <h1>Medarbejdere</h1>
 
-<FluentButton Appearance="@ButtonAppearance.Primary"
-              OnClick="@CreateEmployee">
-    Opret medarbejder
-</FluentButton>
+        <FluentButton Appearance="@ButtonAppearance.Primary">
+            Opret medarbejder
+        </FluentButton>
+    </div>
 
-<p>@_message</p>
+    <FluentDataGrid TGridItem="EmployeeRow"
+                    Items="@_employees.AsQueryable()"
+                    GridTemplateColumns="1fr 180px">
+
+        <PropertyColumn Property="@(item => item.Name)"
+                        Title="Navn"
+                        Sortable="true" />
+
+        <TemplateColumn Title="Handling" Context="employee">
+            <FluentButton Class="deactivate-button"
+                          Appearance="@ButtonAppearance.Outline"
+                          OnClick="@(() => DeactivateEmployee(employee))">
+                Deaktivér
+            </FluentButton>
+        </TemplateColumn>
+    </FluentDataGrid>
+</div>
 
 @code {
-    private string _message = "";
+    private List<EmployeeRow> _employees =
+    [
+        new EmployeeRow { Name = "Anna Jensen" },
+        new EmployeeRow { Name = "Peter Hansen" },
+        new EmployeeRow { Name = "Maria Nielsen" }
+    ];
 
-    public void CreateEmployee()
+    private void DeactivateEmployee(EmployeeRow employee)
     {
-        _message = "Medarbejder blev oprettet";
+        _employees.Remove(employee);
     }
-}
+
+    private class EmployeeRow
+    {
+        public string Name { get; set; } = string.Empty;
+    }
+}

PointOfSale/Pos.Web/Components/Pages/Settings/Employees.razor.css

@@ -0,0 +1,26 @@
+/* CSS for Employees component */
+.employees-page {
+    width: min(100%, 1100px);
+    margin: 0 auto;
+    padding: 32px;
+}
+
+.employees-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 24px;
+}
+
+.employees-header h1 {
+    margin: 0;
+}
+
+.employees-page ::deep fluent-data-grid {
+    width: 100%;
+}
+
+.employees-page ::deep .deactivate-button {
+    color: #b10e1e;
+    border-color: #b10e1e;
+}

PointOfSale/Pos.Web/Components/Pages/Settings/Settings.razor

@@ -1,54 +1,20 @@
-@using System.Globalization
-@rendermode InteractiveServer
-@implements IDisposable
+@rendermode InteractiveServer
+@inject NavigationManager Nav
 @page "/settings"
 
-<header class="top-nav">
-    <div class="brand">Blomster POS</div>
+<Header />
+<div class="settings-page">
+    <h1>Indstillinger</h1>
 
-    <time datetime="@_currentTime.ToString("O")">
-        @_currentTime.ToString(
-            "dddd d. MMMM yyyy · HH:mm",
-            _danishCulture)
-    </time>
-</header>
+    <p>Administrer data, der bruges i kassesalget.</p>
 
-<p>Administer data, der bruges i kassesalget</p>
-<div class="home-container">
-    <FluentButton Class="menu-button" Size="ButtonSize.Large">
-        Medarbejder
-    </FluentButton>
-    <FluentButton Class="menu-button" Size="ButtonSize.Large">
-        Vare
-    </FluentButton>
-</div>
+    <div class="settings-grid">
+        <FluentButton Class="settings-button" onclick="@(() => Nav.NavigateTo("/settings/employees"))">
+            Medarbejder
+        </FluentButton>
 
-
-
-@code {
-    private readonly CultureInfo _danishCulture =
-        CultureInfo.GetCultureInfo("da-DK");
-
-    private readonly Timer _timer;
-    private DateTime _currentTime = DateTime.Now;
-
-    public Settings()
-    {
-        _timer = new Timer(
-            UpdateTime,
-            null,
-            TimeSpan.FromMinutes(1),
-            TimeSpan.FromMinutes(1));
-    }
-
-    private void UpdateTime(object? state)
-    {
-        _currentTime = DateTime.Now;
-        _ = InvokeAsync(StateHasChanged);
-    }
-
-    public void Dispose()
-    {
-        _timer.Dispose();
-    }
-}
+        <FluentButton Class="settings-button">
+            Vare
+        </FluentButton>
+    </div>
+</div>

PointOfSale/Pos.Web/Components/Pages/Settings/Settings.razor.css

@@ -1,24 +1,24 @@
-/* CSS for Settings component */
-.top-nav {
-    min-height: 72px;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 24px;
-    padding: 0 32px;
-    background: var(--colorNeutralBackground1);
-    border-bottom: 1px solid var(--colorNeutralStroke2);
+.settings-page {
+    width: min(100%, 1100px);
+    margin: 0 auto;
+    padding: 32px;
 }
 
-.brand {
+.settings-page h1 {
+    margin-bottom: 12px;
     color: var(--colorNeutralForeground1);
-    font-size: 26px;
+}
+
+.settings-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 24px;
+    margin-top: 32px;
+}
+
+.settings-grid ::deep .settings-button {
+    width: 100%;
+    min-height: 220px;
+    font-size: 28px;
     font-weight: 600;
 }
-
-time {
-    color: var(--colorNeutralForeground2);
-    font-size: 18px;
-    white-space: nowrap;
-}