Werk hoofdapplicatie bij

Legt de bestaande wijzigingen in de hoofdworktree vast voordat de laatste worktree wordt gemerged.\n\nCo-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

views/household/index.ejs

@@ -1,31 +1,88 @@
-<div class="card">
+<div class="page-header mb-4">
 
-<div class="card-body">
-
-
-<h2>
-<%= user.household_name %>
-</h2>
-
-
-<p>
-
-Rol:
-
-<strong>
-<%= user.role %>
-</strong>
-
-</p>
-
-
-<button class="btn btn-primary">
-
-Lid uitnodigen
-
-</button>
+    <h1>👨‍👩‍👧 <%= user.household_name %></h1>
 
+    <p class="text-secondary">Rol: <strong><%= user.role %></strong></p>
 
 </div>
 
-</div>
+<div class="row">
+
+    <div class="col-md-8">
+
+        <div class="card">
+
+            <div class="card-header">
+
+                <h3 class="card-title">Leden</h3>
+
+            </div>
+
+            <div class="list-group">
+
+                <% members.forEach(member => { %>
+                <div class="list-group-item">
+
+                    <div class="d-flex justify-content-between">
+
+                        <div>
+                            <strong><%= member.name %></strong>
+                            <div class="text-secondary small"><%= member.email %></div>
+                        </div>
+
+                        <span class="badge bg-primary"><%= member.role %></span>
+
+                    </div>
+
+                </div>
+                <% }) %>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="col-md-4">
+
+        <div class="card">
+
+            <div class="card-header">
+
+                <h3 class="card-title">Instellingen</h3>
+
+            </div>
+
+            <div class="card-body">
+
+                <% if(user.role === 'OWNER') { %>
+
+                    <div class="mb-3">
+
+                        <label class="form-label">Lid uitnodigen</label>
+
+                        <p class="text-secondary small">Delen van deze code met anderen:</p>
+
+                        <div class="input-group">
+
+                            <input type="text" class="form-control" value="HOUSEHOLD_<%= user.household_id %>" readonly>
+
+                            <button class="btn btn-outline-primary" onclick="navigator.clipboard.writeText('HOUSEHOLD_<%= user.household_id %>')">
+
+                                Kopieren
+
+                            </button>
+
+                        </div>
+
+                    </div>
+
+                <% } %>
+
+            </div>
+
+        </div>
+
+    </div>
+
+</div>