From a140d5881e60f0d6ff7902d2b3fc1e516d148df9 Mon Sep 17 00:00:00 2001
From: Kato <kato@paraguay-srl.com>
Date: Wed, 2 Sep 2026 19:46:53 +0000
Subject: [PATCH] Add user members section with full-text search

---
 css/styles.css |  8 ++++++++
 index.html     |  9 +++++++--
 js/main.js     | 45 +++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index b60ee31..f4278ca 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -64,6 +64,14 @@ a:hover { text-decoration: underline; }
 .notebook .tab.active { background: var(--white); color: var(--black); border-bottom: 3px solid var(--blue); }
 .notebook .tab-content { padding: 24px; min-height: 200px; }
 .notebook .hidden { display: none; }
+.user-search { margin-bottom: 20px; }
+.user-search input { width: 100%; padding: 10px; border: 1px solid var(--gray2); border-radius: 8px; font-size: 1rem; outline: none; }
+.user-search input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(30,64,175,.1); }
+.users-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
+.user-card { background: var(--white); border: 1px solid var(--gray2); border-radius: 12px; padding: 20px; display: flex; align-items: flex-start; gap: 16px; }
+.user-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.2rem; flex-shrink: 0; }
+.user-info h4 { font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
+.user-company, .user-email { font-size: .9rem; color: #6b7280; margin: 0; }
 .login-panel h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--gray2); }
 .form-group { margin-bottom: 16px; }
 .form-group label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; }
diff --git a/index.html b/index.html
index 7ce325b..959b29a 100644
--- a/index.html
+++ b/index.html
@@ -140,8 +140,13 @@
           <div class="tab-content" id="tab-users">
             <h3 class="hide-de">Mitglieder</h3>
             <h3 class="hide-en">Members</h3>
-            <p class="hide-de">Hier werden in Kürze alle Community-Mitglieder angezeigt.</p>
-            <p class="hide-en">All community members will be displayed here soon.</p>
+            <div class="user-search">
+              <input type="text" id="user-search" placeholder="Search users..." oninput="filterUsers(this.value)" />
+            </div>
+            <div id="users-list" class="users-list">
+              <p class="hide-de">Lade Mitglieder...</p>
+              <p class="hide-en">Loading members...</p>
+            </div>
           </div>
           <div class="tab-content hidden" id="tab-wiki">
             <h3 class="hide-de">Wiki</h3>
diff --git a/js/main.js b/js/main.js
index e252fdb..c9a1b4d 100644
--- a/js/main.js
+++ b/js/main.js
@@ -17,6 +17,7 @@ function setCookie(name, value, days) {
 
 const API_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/login';
 const NEWSLETTER_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/newsletter';
+const USER_URL = 'https://n8n.odoo4projects.com/webhook/paraguay/user';
 
 function checkSession() {
   const sessionid = getCookie('sessionid');
@@ -55,6 +56,7 @@ document.querySelectorAll('.notebook .tab').forEach(tab => {
     const tabName = tab.dataset.tab;
     document.querySelectorAll('.notebook .tab-content').forEach(c => c.classList.add('hidden'));
     document.getElementById('tab-' + tabName).classList.remove('hidden');
+    if (tabName === 'users') loadUsers();
   });
 });
 
@@ -202,4 +204,47 @@ async function subscribeNewsletter() {
     btn.disabled = false;
     btn.textContent = document.body.dataset.lang === 'de' ? 'Abonnieren' : 'Subscribe';
   }
+}
+
+async function loadUsers() {
+  const usersContainer = document.getElementById('users-list');
+  if (!usersContainer) return;
+  try {
+    const response = await fetch(USER_URL);
+    if (!response.ok) throw new Error('Failed to fetch users');
+    const data = await response.json();
+    console.log('loadUsers response:', data);
+    if (data.data && Array.isArray(data.data)) {
+      usersContainer.innerHTML = '';
+      data.data.forEach(user => {
+        const card = document.createElement('div');
+        card.className = 'user-card';
+        card.innerHTML = `
+          <div class="user-avatar">${(user.username || '').charAt(0).toUpperCase()}</div>
+          <div class="user-info">
+            <h4>${user.username || 'N/A'}</h4>
+            <p class="user-company">${user.company || ''}</p>
+            <p class="user-email">${user.email || ''}</p>
+          </div>
+        `;
+        usersContainer.appendChild(card);
+      });
+    } else {
+      usersContainer.innerHTML = '<p>No users found.</p>';
+    }
+  } catch (error) {
+    console.error('loadUsers error:', error);
+    usersContainer.innerHTML = '<p>Error loading users.</p>';
+  }
+}
+
+function filterUsers(searchTerm) {
+  const usersContainer = document.getElementById('users-list');
+  if (!usersContainer) return;
+  const cards = usersContainer.querySelectorAll('.user-card');
+  const term = searchTerm.toLowerCase();
+  cards.forEach(card => {
+    const text = card.innerText.toLowerCase();
+    card.style.display = text.includes(term) ? 'block' : 'none';
+  });
 }
\ No newline at end of file