From d193f05974615aaf25d853a3d34959e3c69f8f9e Mon Sep 17 00:00:00 2001
From: johnpccd <johnpccd@yahoo.com>
Date: Sat, 24 May 2025 15:25:58 +0200
Subject: [PATCH] cp

---
 client/js/apikeys.js |  8 ++++++--
 client/js/images.js  |  6 ++++--
 client/js/teams.js   | 16 ++++++++++++----
 client/js/users.js   | 28 +++++++++++++++++++++-------
 4 files changed, 43 insertions(+), 15 deletions(-)

diff --git a/client/js/apikeys.js b/client/js/apikeys.js
index 3e9d9f3..19fb1f9 100644
--- a/client/js/apikeys.js
+++ b/client/js/apikeys.js
@@ -11,7 +11,9 @@ async function loadApiKeys() {
     container.innerHTML = '<div class="text-center"><div class="loading-spinner"></div> Loading API keys...</div>';
 
     try {
-        const apiKeys = await apiClient.getApiKeys();
+        const response = await apiClient.getApiKeys();
+        // Handle structured response - extract api_keys array from response object
+        const apiKeys = response.api_keys || response;
         displayApiKeys(apiKeys);
     } catch (error) {
         handleApiError(error, 'loading API keys');
@@ -252,7 +254,9 @@ async function copyApiKey(key) {
 // View API key details
 async function viewApiKey(keyId) {
     try {
-        const apiKeys = await apiClient.getApiKeys();
+        const response = await apiClient.getApiKeys();
+        // Handle structured response - extract api_keys array from response object
+        const apiKeys = response.api_keys || response;
         const apiKey = apiKeys.find(k => k.id === keyId);
         
         if (!apiKey) {
diff --git a/client/js/images.js b/client/js/images.js
index 205b25e..ceaf52a 100644
--- a/client/js/images.js
+++ b/client/js/images.js
@@ -16,9 +16,11 @@ async function loadImages(page = 1, tags = null) {
     try {
         const response = await apiClient.getImages(page, 20, tags);
         currentPage = page;
-        totalPages = Math.ceil(response.total / response.limit);
+        totalPages = Math.ceil(response.total / (response.limit || 20));
         
-        displayImages(response.images);
+        // Handle structured response - extract images array from response object
+        const images = response.images || response;
+        displayImages(images);
         displayPagination(response);
     } catch (error) {
         handleApiError(error, 'loading images');
diff --git a/client/js/teams.js b/client/js/teams.js
index ae29786..157ae2e 100644
--- a/client/js/teams.js
+++ b/client/js/teams.js
@@ -11,7 +11,9 @@ async function loadTeams() {
     container.innerHTML = '<div class="text-center"><div class="loading-spinner"></div> Loading teams...</div>';
 
     try {
-        const teams = await apiClient.getTeams();
+        const response = await apiClient.getTeams();
+        // Handle structured response - extract teams array from response object
+        const teams = response.teams || response;
         displayTeams(teams);
     } catch (error) {
         handleApiError(error, 'loading teams');
@@ -147,7 +149,9 @@ async function createTeam() {
 // View team details
 async function viewTeam(teamId) {
     try {
-        const teams = await apiClient.getTeams();
+        const response = await apiClient.getTeams();
+        // Handle structured response - extract teams array from response object
+        const teams = response.teams || response;
         const team = teams.find(t => t.id === teamId);
         
         if (!team) {
@@ -198,7 +202,9 @@ async function viewTeam(teamId) {
 // Load team member count
 async function loadTeamMemberCount(teamId) {
     try {
-        const users = await apiClient.getUsers();
+        const response = await apiClient.getUsers();
+        // Handle structured response - extract users array from response object
+        const users = response.users || response;
         const teamMembers = users.filter(user => user.team_id === teamId);
         document.getElementById('teamMemberCount').textContent = teamMembers.length;
     } catch (error) {
@@ -209,7 +215,9 @@ async function loadTeamMemberCount(teamId) {
 // Edit team
 async function editTeam(teamId) {
     try {
-        const teams = await apiClient.getTeams();
+        const response = await apiClient.getTeams();
+        // Handle structured response - extract teams array from response object
+        const teams = response.teams || response;
         const team = teams.find(t => t.id === teamId);
         
         if (!team) {
diff --git a/client/js/users.js b/client/js/users.js
index cedd9c2..550e043 100644
--- a/client/js/users.js
+++ b/client/js/users.js
@@ -11,7 +11,9 @@ async function loadUsers() {
     container.innerHTML = '<div class="text-center"><div class="loading-spinner"></div> Loading users...</div>';
 
     try {
-        const users = await apiClient.getUsers();
+        const response = await apiClient.getUsers();
+        // Handle structured response - extract users array from response object
+        const users = response.users || response;
         displayUsers(users);
     } catch (error) {
         handleApiError(error, 'loading users');
@@ -102,7 +104,9 @@ function displayUsers(users) {
 // Load team names for display
 async function loadTeamNames() {
     try {
-        const teams = await apiClient.getTeams();
+        const response = await apiClient.getTeams();
+        // Handle structured response - extract teams array from response object
+        const teams = response.teams || response;
         teams.forEach(team => {
             const teamBadges = document.querySelectorAll(`#team-${team.id}`);
             teamBadges.forEach(badge => {
@@ -117,7 +121,9 @@ async function loadTeamNames() {
 // Show create user modal
 async function showCreateUserModal() {
     try {
-        const teams = await apiClient.getTeams();
+        const response = await apiClient.getTeams();
+        // Handle structured response - extract teams array from response object
+        const teams = response.teams || response;
         
         const modalBody = `
             <form id="createUserForm">
@@ -227,7 +233,9 @@ async function createUser() {
 // View user details
 async function viewUser(userId) {
     try {
-        const users = await apiClient.getUsers();
+        const usersResponse = await apiClient.getUsers();
+        // Handle structured response - extract users array from response object
+        const users = usersResponse.users || usersResponse;
         const user = users.find(u => u.id === userId);
         
         if (!user) {
@@ -235,7 +243,9 @@ async function viewUser(userId) {
             return;
         }
         
-        const teams = await apiClient.getTeams();
+        const teamsResponse = await apiClient.getTeams();
+        // Handle structured response - extract teams array from response object
+        const teams = teamsResponse.teams || teamsResponse;
         const userTeam = teams.find(t => t.id === user.team_id);
         
         const modalBody = `
@@ -287,7 +297,9 @@ async function viewUser(userId) {
 // Edit user
 async function editUser(userId) {
     try {
-        const users = await apiClient.getUsers();
+        const usersResponse = await apiClient.getUsers();
+        // Handle structured response - extract users array from response object
+        const users = usersResponse.users || usersResponse;
         const user = users.find(u => u.id === userId);
         
         if (!user) {
@@ -295,7 +307,9 @@ async function editUser(userId) {
             return;
         }
         
-        const teams = await apiClient.getTeams();
+        const teamsResponse = await apiClient.getTeams();
+        // Handle structured response - extract teams array from response object
+        const teams = teamsResponse.teams || teamsResponse;
         
         const modalBody = `
             <form id="editUserForm">