Implement admin dash workspaces tab

frontend/src/hooks/useAdmin.js

@@ -1,155 +0,0 @@
-import { useState, useCallback, useEffect } from 'react';
-import { notifications } from '@mantine/notifications';
-import * as adminApi from '../services/adminApi';
-
-export const useAdmin = (resource) => {
-  const [data, setData] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
-
-  const fetchData = useCallback(async () => {
-    setLoading(true);
-    try {
-      let result;
-      switch (resource) {
-        case 'users':
-          result = await adminApi.listUsers();
-          break;
-        case 'stats':
-          result = await adminApi.getSystemStats();
-          break;
-        default:
-          throw new Error(`Unknown resource type: ${resource}`);
-      }
-      setData(result);
-      setError(null);
-    } catch (err) {
-      console.error(`Failed to fetch ${resource}:`, err);
-      setError(err.message);
-      notifications.show({
-        title: 'Error',
-        message: `Failed to load ${resource}. Please try again.`,
-        color: 'red',
-      });
-    } finally {
-      setLoading(false);
-    }
-  }, [resource]);
-
-  const createItem = useCallback(
-    async (itemData) => {
-      try {
-        let newItem;
-        switch (resource) {
-          case 'users':
-            newItem = await adminApi.createUser(itemData);
-            break;
-          default:
-            throw new Error(`Create not supported for resource: ${resource}`);
-        }
-        setData((prevData) =>
-          Array.isArray(prevData) ? [...prevData, newItem] : prevData
-        );
-        notifications.show({
-          title: 'Success',
-          message: `${resource} created successfully`,
-          color: 'green',
-        });
-        return { success: true, data: newItem };
-      } catch (err) {
-        console.error(`Failed to create ${resource}:`, err);
-        notifications.show({
-          title: 'Error',
-          message: err.message || `Failed to create ${resource}`,
-          color: 'red',
-        });
-        return { success: false, error: err.message };
-      }
-    },
-    [resource]
-  );
-
-  const deleteItem = useCallback(
-    async (itemId) => {
-      try {
-        switch (resource) {
-          case 'users':
-            await adminApi.deleteUser(itemId);
-            break;
-          default:
-            throw new Error(`Delete not supported for resource: ${resource}`);
-        }
-        setData((prevData) =>
-          Array.isArray(prevData)
-            ? prevData.filter((item) => item.id !== itemId)
-            : prevData
-        );
-        notifications.show({
-          title: 'Success',
-          message: `${resource} deleted successfully`,
-          color: 'green',
-        });
-        return { success: true };
-      } catch (err) {
-        console.error(`Failed to delete ${resource}:`, err);
-        notifications.show({
-          title: 'Error',
-          message: err.message || `Failed to delete ${resource}`,
-          color: 'red',
-        });
-        return { success: false, error: err.message };
-      }
-    },
-    [resource]
-  );
-
-  const updateItem = useCallback(
-    async (itemId, itemData) => {
-      try {
-        let updatedItem;
-        switch (resource) {
-          case 'users':
-            updatedItem = await adminApi.updateUser(itemId, itemData);
-            break;
-          default:
-            throw new Error(`Update not supported for resource: ${resource}`);
-        }
-        setData((prevData) =>
-          Array.isArray(prevData)
-            ? prevData.map((item) => (item.id === itemId ? updatedItem : item))
-            : prevData
-        );
-        notifications.show({
-          title: 'Success',
-          message: `${resource} updated successfully`,
-          color: 'green',
-        });
-        return { success: true, data: updatedItem };
-      } catch (err) {
-        console.error(`Failed to update ${resource}:`, err);
-        notifications.show({
-          title: 'Error',
-          message: err.message || `Failed to update ${resource}`,
-          color: 'red',
-        });
-        return { success: false, error: err.message };
-      }
-    },
-    [resource]
-  );
-
-  // Fetch data on mount
-  useEffect(() => {
-    fetchData();
-  }, [fetchData]);
-
-  return {
-    data,
-    loading,
-    error,
-    refresh: fetchData,
-    create: createItem,
-    delete: deleteItem,
-    update: updateItem,
-  };
-};

frontend/src/hooks/useAdminData.js

@@ -0,0 +1,48 @@
+import { useState, useEffect } from 'react';
+import { notifications } from '@mantine/notifications';
+import { getUsers, getWorkspaces, getSystemStats } from '../services/adminApi';
+
+// Hook for admin data fetching (stats and workspaces)
+export const useAdminData = (type) => {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const loadData = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      let response;
+      switch (type) {
+        case 'stats':
+          response = await getSystemStats();
+          break;
+        case 'workspaces':
+          response = await getWorkspaces();
+          break;
+        case 'users':
+          response = await getUsers();
+          break;
+        default:
+          throw new Error('Invalid data type');
+      }
+      setData(response);
+    } catch (err) {
+      const message = err.response?.data?.error || err.message;
+      setError(message);
+      notifications.show({
+        title: 'Error',
+        message: `Failed to load ${type}: ${message}`,
+        color: 'red',
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadData();
+  }, [type]);
+
+  return { data, loading, error, reload: loadData };
+};

frontend/src/hooks/useUserAdmin.js

@@ -0,0 +1,79 @@
+import { useAdminData } from './useAdminData';
+import { createUser, updateUser, deleteUser } from '../services/adminApi';
+import { notifications } from '@mantine/notifications';
+
+export const useUserAdmin = () => {
+  const { data: users, loading, error, reload } = useAdminData('users');
+
+  const handleCreate = async (userData) => {
+    try {
+      await createUser(userData);
+      notifications.show({
+        title: 'Success',
+        message: 'User created successfully',
+        color: 'green',
+      });
+      reload();
+      return { success: true };
+    } catch (err) {
+      const message = err.response?.data?.error || err.message;
+      notifications.show({
+        title: 'Error',
+        message: `Failed to create user: ${message}`,
+        color: 'red',
+      });
+      return { success: false, error: message };
+    }
+  };
+
+  const handleUpdate = async (userId, userData) => {
+    try {
+      await updateUser(userId, userData);
+      notifications.show({
+        title: 'Success',
+        message: 'User updated successfully',
+        color: 'green',
+      });
+      reload();
+      return { success: true };
+    } catch (err) {
+      const message = err.response?.data?.error || err.message;
+      notifications.show({
+        title: 'Error',
+        message: `Failed to update user: ${message}`,
+        color: 'red',
+      });
+      return { success: false, error: message };
+    }
+  };
+
+  const handleDelete = async (userId) => {
+    try {
+      await deleteUser(userId);
+      notifications.show({
+        title: 'Success',
+        message: 'User deleted successfully',
+        color: 'green',
+      });
+      reload();
+      return { success: true };
+    } catch (err) {
+      const message = err.response?.data?.error || err.message;
+      notifications.show({
+        title: 'Error',
+        message: `Failed to delete user: ${message}`,
+        color: 'red',
+      });
+      return { success: false, error: message };
+    }
+  };
+
+  return {
+    users,
+    loading,
+    error,
+    create: handleCreate,
+    update: handleUpdate,
+    delete: handleDelete,
+  };
+};