From a772e53840355c92e14b05fba47efd706192f530 Mon Sep 17 00:00:00 2001
From: DJP <DJP>
Date: Fri, 5 Sep 2025 09:12:04 -0400
Subject: [PATCH] Improve user management UX with clean list layout and search
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace grid layout with clean line-by-line agent list
- Add search functionality for agent selection with real-time filtering
- Implement professional list items with agent names and descriptions
- Add proper hover effects and spacing for better interactivity
- Include description truncation to keep interface compact
- Clear search query when modal opens/closes for better UX
- Style search input with brand colors and focus states

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 admin/src/pages/Admin.vue | 288 ++++++++++++++++++++++++++++++++++----
 admin/src/pages/Home.vue  |  10 +-
 admin/src/services/api.js |  32 +++++
 3 files changed, 301 insertions(+), 29 deletions(-)

diff --git a/admin/src/pages/Admin.vue b/admin/src/pages/Admin.vue
index 6068bf1..171b013 100644
--- a/admin/src/pages/Admin.vue
+++ b/admin/src/pages/Admin.vue
@@ -315,6 +315,86 @@
       </div>
     </div>
 
+    <!-- Edit User Modal -->
+    <div v-if="showEditUserModal" class="modal">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h3>Edit User</h3>
+          <button @click="showEditUserModal = false" class="close-btn">&times;</button>
+        </div>
+        <form @submit.prevent="updateUser">
+          <div class="form-group">
+            <label>Name:</label>
+            <input v-model="editingUser.name" type="text" required>
+          </div>
+          <div class="form-group">
+            <label>Email:</label>
+            <input v-model="editingUser.email" type="email" required>
+          </div>
+          <div class="form-group">
+            <label>Role:</label>
+            <select v-model="editingUser.role" required>
+              <option value="user">User</option>
+              <option value="admin">Admin</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label>Status:</label>
+            <select v-model="editingUser.isActive" required>
+              <option :value="true">Active</option>
+              <option :value="false">Inactive</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label>Agent Access:</label>
+            <div class="agent-access-controls">
+              <label class="checkbox-label">
+                <input 
+                  type="checkbox" 
+                  v-model="editingUser.hasAllAgents"
+                  @change="toggleAllAgents"
+                >
+                All Agents (Full Access)
+              </label>
+              
+              <div v-if="!editingUser.hasAllAgents" class="agent-selection">
+                <label>Select Specific Agents:</label>
+                <div class="agent-search">
+                  <input 
+                    type="text" 
+                    v-model="agentSearchQueryUser"
+                    placeholder="Search agents..."
+                    class="agent-search-input"
+                  >
+                </div>
+                <div class="agent-list">
+                  <label 
+                    v-for="agent in filteredAgentsForUser" 
+                    :key="agent.key" 
+                    class="agent-list-item"
+                  >
+                    <input 
+                      type="checkbox" 
+                      :value="agent.key"
+                      v-model="editingUser.allowedAgents"
+                    >
+                    <div class="agent-info">
+                      <span class="agent-name">{{ agent.name }}</span>
+                      <span class="agent-description">{{ agent.description }}</span>
+                    </div>
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="form-actions">
+            <button type="button" @click="showEditUserModal = false" class="btn btn-secondary">Cancel</button>
+            <button type="submit" class="btn btn-primary">Update User</button>
+          </div>
+        </form>
+      </div>
+    </div>
+
     <!-- Create Agent Modal -->
     <div v-if="showCreateAgentModal" class="modal">
       <div class="modal-content">
@@ -656,7 +736,7 @@
 </template>
 
 <script>
-import { agentsAPI, analyticsAPI } from '../services/api.js'
+import { agentsAPI, analyticsAPI, usersAPI } from '../services/api.js'
 import {
   Chart as ChartJS,
   CategoryScale,
@@ -690,6 +770,7 @@ export default {
       users: [],
       agents: [],
       agentSearchQuery: '',
+      agentSearchQueryUser: '',
       conversations: [],
       conversationFilter: 'all',
       usageData: [],
@@ -705,11 +786,13 @@ export default {
       trendsDays: 30,
       isAdmin: false,
       showCreateUserModal: false,
+      showEditUserModal: false,
       showCreateAgentModal: false,
       showEditAgentModal: false,
       showCreateVectorStoreModal: false,
       showFileUploadModal: false,
       editingAgent: null,
+      editingUser: null,
       vectorStores: [],
       openaiVectorStores: [],
       selectedVectorStore: null,
@@ -764,6 +847,17 @@ export default {
         agent.category.toLowerCase().includes(query) ||
         agent.model.toLowerCase().includes(query)
       )
+    },
+    filteredAgentsForUser() {
+      if (!this.agentSearchQueryUser.trim()) {
+        return this.agents
+      }
+      const query = this.agentSearchQueryUser.toLowerCase()
+      return this.agents.filter(agent => 
+        agent.name.toLowerCase().includes(query) ||
+        agent.description.toLowerCase().includes(query) ||
+        agent.category.toLowerCase().includes(query)
+      )
     }
   },
   async mounted() {
@@ -829,25 +923,13 @@ export default {
     },
 
     async loadUsers() {
-      // Mock data for now - you'll need to create an API endpoint
-      this.users = [
-        {
-          id: '1',
-          name: 'Administrator',
-          email: 'admin@oliver.agency',
-          preferences: { role: 'admin' },
-          isActive: true,
-          createdAt: new Date()
-        },
-        {
-          id: '2', 
-          name: 'User',
-          email: 'user@oliver.agency',
-          preferences: { role: 'user' },
-          isActive: true,
-          createdAt: new Date()
-        }
-      ]
+      try {
+        const response = await usersAPI.getAll()
+        this.users = response.users || []
+      } catch (error) {
+        console.error('Error loading users:', error)
+        this.users = []
+      }
     },
 
     async loadAgents() {
@@ -865,13 +947,68 @@ export default {
     },
 
     editUser(user) {
-      // TODO: Implement user editing
-      console.log('Edit user:', user)
+      // Set up the editing user with role and access from preferences
+      this.editingUser = {
+        ...user,
+        role: user.preferences?.role || 'user',
+        allowedAgents: user.preferences?.allowedAgents || [],
+        hasAllAgents: !user.preferences?.allowedAgents || user.preferences?.allowedAgents.length === 0
+      }
+      this.agentSearchQueryUser = '' // Clear search when opening modal
+      this.showEditUserModal = true
+    },
+
+    async updateUser() {
+      try {
+        const userData = {
+          name: this.editingUser.name,
+          email: this.editingUser.email,
+          isActive: this.editingUser.isActive,
+          preferences: {
+            role: this.editingUser.role,
+            allowedAgents: this.editingUser.hasAllAgents ? null : this.editingUser.allowedAgents
+          }
+        }
+
+        // Call API to update user
+        await usersAPI.update(this.editingUser.id, userData)
+        
+        // Update user in local list
+        const index = this.users.findIndex(u => u.id === this.editingUser.id)
+        if (index !== -1) {
+          this.users[index] = { ...this.editingUser, preferences: userData.preferences }
+        }
+        
+        this.showEditUserModal = false
+        this.editingUser = null
+        alert('User updated successfully!')
+      } catch (error) {
+        console.error('Error updating user:', error)
+        alert('Failed to update user. Please try again.')
+      }
+    },
+
+    toggleAllAgents() {
+      if (this.editingUser.hasAllAgents) {
+        this.editingUser.allowedAgents = []
+      }
     },
 
     async toggleUserStatus(user) {
-      // TODO: Implement user status toggle
-      console.log('Toggle user status:', user)
+      try {
+        const response = await usersAPI.toggleStatus(user.id)
+        
+        // Update user in local list
+        const index = this.users.findIndex(u => u.id === user.id)
+        if (index !== -1) {
+          this.users[index].isActive = response.user.isActive
+        }
+        
+        alert(response.message)
+      } catch (error) {
+        console.error('Error toggling user status:', error)
+        alert('Failed to toggle user status. Please try again.')
+      }
     },
 
     editAgent(agent) {
@@ -1764,6 +1901,109 @@ export default {
   border-top: 1px solid #e5e7eb;
 }
 
+/* Agent Access Control Styles */
+.agent-access-controls {
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  padding: 1rem;
+  background: #f9fafb;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  font-weight: 500;
+  color: #374151;
+}
+
+.checkbox-label input[type="checkbox"] {
+  width: auto;
+  margin: 0;
+}
+
+.agent-selection {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  border-top: 1px solid #e5e7eb;
+}
+
+.agent-search {
+  margin-bottom: 0.75rem;
+}
+
+.agent-search-input {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 0.8rem;
+}
+
+.agent-search-input:focus {
+  outline: none;
+  border-color: #e6a335;
+  box-shadow: 0 0 0 3px rgba(230, 163, 53, 0.1);
+}
+
+.agent-list {
+  max-height: 250px;
+  overflow-y: auto;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  background: white;
+}
+
+.agent-list-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  border-bottom: 1px solid #f3f4f6;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.agent-list-item:last-child {
+  border-bottom: none;
+}
+
+.agent-list-item:hover {
+  background: #f8f9fa;
+}
+
+.agent-list-item input[type="checkbox"] {
+  width: auto;
+  margin: 0;
+  margin-top: 0.1rem;
+  flex-shrink: 0;
+}
+
+.agent-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.agent-name {
+  font-weight: 600;
+  color: #1f2937;
+  font-size: 0.8rem;
+  line-height: 1.2;
+}
+
+.agent-description {
+  color: #6b7280;
+  font-size: 0.7rem;
+  line-height: 1.3;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
 .loading,
 .error {
   display: flex;
diff --git a/admin/src/pages/Home.vue b/admin/src/pages/Home.vue
index 9436148..266d920 100644
--- a/admin/src/pages/Home.vue
+++ b/admin/src/pages/Home.vue
@@ -53,20 +53,20 @@
     <div class="stats-section mt-8">
       <div class="card">
         <div class="card-body text-center">
-          <h3>Migration Complete! 🎉</h3>
-          <p class="mb-4">Successfully migrated from Make.com workflow to Node.js backend</p>
+          <h3>AI-Powered Creativity Platform</h3>
+          <p class="mb-4">Advanced AI assistants ready to help with your creative projects</p>
           <div class="stats-grid">
             <div class="stat">
               <div class="stat-number">{{ totalAssistants }}</div>
               <div class="stat-label">AI Assistants</div>
             </div>
             <div class="stat">
-              <div class="stat-number">✅</div>
-              <div class="stat-label">Responses API</div>
+              <div class="stat-number">🧠</div>
+              <div class="stat-label">Advanced AI</div>
             </div>
             <div class="stat">
               <div class="stat-number">🚀</div>
-              <div class="stat-label">Ready to Use</div>
+              <div class="stat-label">Ready to Create</div>
             </div>
           </div>
         </div>
diff --git a/admin/src/services/api.js b/admin/src/services/api.js
index 4639b69..60ea27f 100644
--- a/admin/src/services/api.js
+++ b/admin/src/services/api.js
@@ -191,4 +191,36 @@ export const analyticsAPI = {
   }
 };
 
+export const usersAPI = {
+  async getAll() {
+    const response = await api.get('/users');
+    return response.data;
+  },
+
+  async getById(id) {
+    const response = await api.get(`/users/${id}`);
+    return response.data;
+  },
+
+  async update(id, userData) {
+    const response = await api.put(`/users/${id}`, userData);
+    return response.data;
+  },
+
+  async create(userData) {
+    const response = await api.post('/users', userData);
+    return response.data;
+  },
+
+  async delete(id) {
+    const response = await api.delete(`/users/${id}`);
+    return response.data;
+  },
+
+  async toggleStatus(id) {
+    const response = await api.patch(`/users/${id}/toggle-status`);
+    return response.data;
+  }
+};
+
 export default api
\ No newline at end of file