From 23d58e48d95ebb7237d1d4b2de7484d66cfc6443 Mon Sep 17 00:00:00 2001
From: bernd <kontakt@digitalschmiede.tech>
Date: Thu, 13 Aug 2026 18:03:09 +0000
Subject: [PATCH] =?UTF-8?q?Sidebar:=20Mieter=20zu=20Mieterverwaltung=20mit?=
 =?UTF-8?q?=20Untermen=C3=BCs=20Mietereinladungen/Mieterdaten=20umbauen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/src/routes/contracts.ts |  1 +
 web-dashboard/index.html        | 66 ++++++++++++++++++++++++++++++++-
 2 files changed, 65 insertions(+), 2 deletions(-)

diff --git a/backend/src/routes/contracts.ts b/backend/src/routes/contracts.ts
index 88ac4d5..1c6e091 100644
--- a/backend/src/routes/contracts.ts
+++ b/backend/src/routes/contracts.ts
@@ -131,6 +131,7 @@ const CONTRACT_DOCUMENTS_SELECT = {
     select: {
       id: true,
       fullName: true,
+      email: true,
       phoneNumber: true,
       firstResidenceAddress: true,
       idDocumentFrontUrl: true,
diff --git a/web-dashboard/index.html b/web-dashboard/index.html
index 8f6cf22..cdfd176 100644
--- a/web-dashboard/index.html
+++ b/web-dashboard/index.html
@@ -450,6 +450,17 @@
   .nav-item .nav-icon { font-size: 15px; width: 18px; text-align: center; }
   .nav-item:hover { background: var(--bg); }
   .nav-item.active { background: var(--green-bg); color: var(--green); font-weight: 600; }
+  .nav-group-title {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    padding: 10px 12px 2px;
+    font-size: 13.5px;
+    color: var(--text);
+    font-weight: 600;
+  }
+  .nav-subitem { padding-left: 34px; font-size: 13px; }
 
   .content-area { flex: 1; min-width: 0; }
   .page { display: none; }
@@ -578,7 +589,9 @@
       <div class="sidebar-brand">WG Nackenheim<span>Vermieter-Cockpit</span></div>
       <nav id="sidebarNav">
         <button class="nav-item active" data-page="page-overview" onclick="switchPage('page-overview')"><span class="nav-icon">🏠</span>Übersicht</button>
-        <button class="nav-item" data-page="page-tenants" onclick="switchPage('page-tenants')"><span class="nav-icon">👥</span>Mieter</button>
+        <div class="nav-group-title"><span class="nav-icon">👥</span>Mieterverwaltung</div>
+        <button class="nav-item nav-subitem" data-page="page-tenant-invites" onclick="switchPage('page-tenant-invites')">Mietereinladungen</button>
+        <button class="nav-item nav-subitem" data-page="page-tenant-data" onclick="switchPage('page-tenant-data')">Mieterdaten</button>
         <button class="nav-item" data-page="page-tickets" onclick="switchPage('page-tickets')"><span class="nav-icon">🛠️</span>Tickets &amp; Handwerker</button>
         <button class="nav-item" data-page="page-cleaning" onclick="switchPage('page-cleaning')"><span class="nav-icon">🧹</span>Putzplan</button>
         <button class="nav-item" data-page="page-finance" onclick="switchPage('page-finance')"><span class="nav-icon">💶</span>WG-Kasse</button>
@@ -649,7 +662,7 @@
           </section>
         </div>
 
-        <div class="page" id="page-tenants">
+        <div class="page" id="page-tenant-invites">
 
     <section id="inviteSection" style="display:none">
       <h2>Mieter einladen</h2>
@@ -703,6 +716,15 @@
       </div>
     </section>
 
+        </div>
+
+        <div class="page" id="page-tenant-data">
+
+    <section id="tenantDataSection" style="display:none">
+      <h2>Mieterdaten</h2>
+      <div class="ticket-list" id="tenantDataList"></div>
+    </section>
+
     <section id="ratingsSection">
       <h2>Mieter-Bewertung</h2>
       <div class="invite-card" style="margin-bottom:16px;">
@@ -1449,6 +1471,7 @@
 
     const isLandlord = currentUser.role === 'LANDLORD' || currentUser.role === 'ADMIN';
     document.getElementById('inviteSection').style.display = isLandlord ? 'block' : 'none';
+    document.getElementById('tenantDataSection').style.display = isLandlord ? 'block' : 'none';
     document.getElementById('rentSectionTitle').textContent = isLandlord ? 'Miet-Ampel je Zimmer' : 'Meine Miete';
     document.getElementById('cleaningAssignSection').style.display = isLandlord ? 'block' : 'none';
     document.getElementById('cleaningSectionTitle').textContent = isLandlord ? 'Putzplan (alle Mieter)' : 'Mein Putzplan';
@@ -1495,6 +1518,7 @@
     loadContractDocuments();
     loadContractArchive();
     loadAnnouncements();
+    if (isLandlord) loadTenantData();
 
     setInterval(loadData, REFRESH_INTERVAL_MS);
     setInterval(loadCleaningTasks, REFRESH_INTERVAL_MS);
@@ -1512,6 +1536,7 @@
     setInterval(loadContractDocuments, REFRESH_INTERVAL_MS);
     setInterval(loadContractArchive, REFRESH_INTERVAL_MS);
     setInterval(loadAnnouncements, REFRESH_INTERVAL_MS);
+    if (isLandlord) setInterval(loadTenantData, REFRESH_INTERVAL_MS);
   }
 
   // ---------------------------------------------------------------------
@@ -3576,6 +3601,43 @@
     return wrap;
   }
 
+  // Mieterdaten-Übersicht (nur Vermieter/Admin): eine Zeile je aktivem
+  // Vertrag mit Kontaktdaten + derselben Profil-Vollständigkeits-/Schufa-
+  // Anzeige wie bei den Vertragsdokumenten — nutzt bewusst denselben
+  // Endpunkt (/contracts/documents), statt die Daten zu duplizieren.
+  async function loadTenantData() {
+    try {
+      const data = await apiFetch('/contracts/documents');
+      renderTenantData(data.contracts || []);
+    } catch (err) {
+      console.error('[tenantData] Laden fehlgeschlagen:', err.message);
+    }
+  }
+
+  function renderTenantData(contracts) {
+    const list = document.getElementById('tenantDataList');
+    list.innerHTML = '';
+    if (!contracts.length) {
+      list.appendChild(el('div', 'empty-state', 'Keine aktiven Mieter gefunden.'));
+      return;
+    }
+    contracts.forEach(c => {
+      const card = el('div', 'ticket-row');
+      card.style.flexDirection = 'column';
+      card.style.alignItems = 'stretch';
+      card.style.gap = '10px';
+
+      const top = el('div');
+      top.appendChild(el('div', 'title', `${c.user.fullName} · ${c.room.roomNumber}`));
+      top.appendChild(el('div', 'meta-text',
+        `${c.user.email}${c.user.phoneNumber ? ' · ' + c.user.phoneNumber : ''}`));
+      card.appendChild(top);
+
+      card.appendChild(buildProfileCompletenessBadge(c.user));
+      list.appendChild(card);
+    });
+  }
+
   function renderContractDocuments(contracts) {
     const isLandlord = currentUser.role === 'LANDLORD' || currentUser.role === 'ADMIN';
     const list = document.getElementById('contractDocumentsList');