Added basic Groups view and controller

src/Views/Home/Groups.cshtml

@@ -0,0 +1,169 @@
+@using Microsoft.AspNetCore.Mvc.Localization
+@using Berufsschule_HAM.Models
+@using System.Buffers.Text
+@* @model UsersIndexViewModel *@
+@inject IViewLocalizer T
+@{
+    ViewData["Title"] = T["Groups"];
+}
+
+
+<div class="container py-4">
+    <h2 class="mb-3">@T["Groups"]</h2>
+
+    
+    <div class="mb-4 d-flex flex-wrap gap-2">
+        <button class="btn btn-primary">@T["Create group"]</button>
+    </div>
+
+    
+    <div class="table-responsive">
+        <table class="table table-striped align-middle">
+            <thead>
+                <tr>
+                    <th style="text-align: center">Group</th>
+                    <th style="text-align: center">@T["Can"]:<br/>@T["inventorize"]</th>
+                    <th style="text-align: center">@T["Can"]:<br/>@T["Manage users"]</th>
+                    <th style="text-align: center">@T["Can"]:<br/>@T["Manage locations"]</th>
+                    <th style="text-align: center">@T["Can"]:<br/>@T["Manage assets"]</th>
+                    <th style="text-align: center">@T["Can"]:<br/>@T["manage groups"]</th>
+                </tr>
+            </thead>
+            <tbody>
+            @* @{
+                foreach (UserTableViewModel userTableViewModel in Model.UserTableViewModels)
+                {
+                <tr>
+                    <td>
+                    <img class="rounded-circle user-icon" src="data:image/jpeg;base64,@userTableViewModel.JpegPhoto" alt="Photo" style="max-width:300px;" />
+                    </td>
+                    <td>@userTableViewModel.Uid</td>
+                    <td>@userTableViewModel.Title</td>
+                    <td>@userTableViewModel.Name</td>
+                    <td>@userTableViewModel.Surname</td>
+                    <td>@userTableViewModel.Workplace</td>
+                    <td>
+                        <div class="d-flex gap-2">
+                            <button class="btn btn-sm btn-primary">Update</button>
+                            <button class="btn btn-sm btn-danger btn-delete" 
+                                data-user-id="@userTableViewModel.Uid"
+                                data-bs-toggle="modal"
+                                data-bs-target="#deleteModal">
+                                🗑️ Delete
+                            </button>
+                        </div>
+                    </td>
+                </tr>
+                }
+            } *@
+            </tbody>
+        </table>
+    </div>
+</div>
+@* 
+<!-- User Delete Confirmation Modal -->
+<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header bg-danger text-white">
+                <h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <p>Are you sure you want to delete the user <strong id="userName"></strong> (ID: <span id="userId"></span>)?</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <form id="deleteForm" method="post" action="">
+                    <button type="submit" class="btn btn-danger">Yes, Delete</button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        const deleteModal = document.getElementById('deleteModal');
+        let currentButton = null; // The delete button that opened the modal
+
+        deleteModal.addEventListener('show.bs.modal', event => {
+            currentButton = event.relatedTarget; // Button that triggered the modal
+            const userId = currentButton.getAttribute('data-user-id');
+            const userName = currentButton.getAttribute('data-user-name');
+
+            deleteModal.querySelector('#userId').textContent = userId;
+            deleteModal.querySelector('#userName').textContent = userName;
+
+            // Store the delete URL for later use
+            deleteModal.querySelector('#deleteForm').dataset.url = `/Users/Delete?uid=${userId}`;
+        });
+
+        // Handle submit of deleteForm via fetch()
+        const deleteForm = document.getElementById('deleteForm');
+        deleteForm.addEventListener('submit', async e => {
+            e.preventDefault();
+
+            const url = deleteForm.dataset.url;
+            const userId = deleteModal.querySelector('#userId').textContent;
+
+            try {
+                const response = await fetch(url, {
+                    method: 'GET',
+                    headers: {
+                        'Content-Type': 'application/json',
+                        'Accept': 'application/json'
+                    }//,
+                    //body: JSON.stringify({ id: userId }) // Use this for Post requests with [FromBody] parameters like in /Groups/Update
+                });
+
+                const result = await response.json();
+
+                if (result.success) {
+                    // Close the modal
+                    const modal = bootstrap.Modal.getInstance(deleteModal);
+                    modal.hide();
+
+                    // Remove the row from the table
+                    const row = currentButton.closest('tr');
+                    row.classList.add('table-danger');
+                    setTimeout(() => row.remove(), 300);
+
+                    showToast('User deleted successfully', 'success');
+                } else {
+                    showToast(`❌ ${result.reason}: ${result.exception || 'Unknown error'}`, 'danger');
+                }
+            } catch (error) {
+                console.error(error);
+                showToast('Error contacting server', 'danger');
+            }
+        });
+
+        // Simple toast helper
+        function showToast(message, type) {
+            const toastContainer = document.getElementById('toastContainer') || createToastContainer();
+            const toast = document.createElement('div');
+            toast.className = `toast align-items-center text-white bg-${type} border-0`;
+            toast.role = 'alert';
+            toast.innerHTML = `
+                <div class="d-flex">
+                    <div class="toast-body">${message}</div>
+                    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
+                </div>
+            `;
+            toastContainer.appendChild(toast);
+            const bsToast = new bootstrap.Toast(toast, { delay: 3000 });
+            bsToast.show();
+            toast.addEventListener('hidden.bs.toast', () => toast.remove());
+        }
+
+        function createToastContainer() {
+            const container = document.createElement('div');
+            container.id = 'toastContainer';
+            container.className = 'toast-container position-fixed bottom-0 end-0 p-3';
+            document.body.appendChild(container);
+            return container;
+        }
+    });
+</script> *@

src/Views/Shared/_Layout.cshtml

@@ -46,6 +46,9 @@
                             <li class="nav-item">
                                 <a class="nav-link text" asp-area="" asp-controller="Home" asp-action="Users">@T["Users"]</a>
                             </li>
+                            <li class="nav-item">
+                                <a class="nav-link text" asp-area="" asp-controller="Home" asp-action="Groups">@T["Groups"]</a>
+                            </li>
                         }
                         <li class="nav-item">
                             @if (User.Identity.IsAuthenticated)