Merge pull request #513 from mijinummi/feat/464-react-query-hooks-users-settings

Feat/464 react query hooks users settings

Author: yusuftomilola

frontend/app/hooks/useUsers.ts

@@ -1,8 +1,14 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { getUsers, updateUserRole } from '../lib/api/usersApi';
+import { getUsers, updateUserRole, updateProfile } from '../lib/api/usersApi';
+import { getReportsSummary } from '../lib/api/reportsApi';
+import { User, ReportSummary } from '../lib/types/users';
+import { useAuthStore } from '../store/authStore';
 
-export function useUsers() {
-  return useQuery({ queryKey: ['users'], queryFn: getUsers });
+export function useUsersList() {
+  return useQuery<User[]>({
+    queryKey: ['users'],
+    queryFn: getUsers,
+  });
 }
 
 export function useUpdateUserRole() {
@@ -15,3 +21,23 @@ export function useUpdateUserRole() {
     },
   });
 }
+
+export function useUpdateProfile() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, payload }: { id: string; payload: Partial<User> }) =>
+      updateProfile(id, payload),
+    onSuccess: (updatedUser) => {
+      // Update Zustand store to keep sidebar in sync
+      useAuthStore.getState().setUser(updatedUser);
+      queryClient.invalidateQueries({ queryKey: ['users'] });
+    },
+  });
+}
+
+export function useReportsSummary() {
+  return useQuery<ReportSummary>({
+    queryKey: ['reportsSummary'],
+    queryFn: getReportsSummary,
+  });
+}

frontend/lib/api/reportsApi.ts

@@ -0,0 +1,7 @@
+import api from './client';
+import { ReportSummary } from '../users';
+
+export async function getReportsSummary(): Promise<ReportSummary> {
+  const res = await api.get('/api/reports/summary');
+  return res.data;
+}

frontend/lib/api/usersApi.ts

@@ -1,11 +1,17 @@
 import api from './client';
+import { User } from '../users';
 
-export async function getUsers() {
+export async function getUsers(): Promise<User[]> {
   const res = await api.get('/api/users');
   return res.data;
 }
 
-export async function updateUserRole(id: string, role: string) {
+export async function updateUserRole(id: string, role: string): Promise<User> {
   const res = await api.patch(`/api/users/${id}/role`, { role });
   return res.data;
 }
+
+export async function updateProfile(id: string, payload: Partial<User>): Promise<User> {
+  const res = await api.patch(`/api/users/${id}`, payload);
+  return res.data;
+}

frontend/lib/users.ts

@@ -0,0 +1,13 @@
+export interface User {
+  id: string;
+  name: string;
+  email: string;
+  role: 'admin' | 'manager' | 'staff';
+  joinedAt: string;
+}
+
+export interface ReportSummary {
+  totalUsers: number;
+  activeUsers: number;
+  inactiveUsers: number;
+}