Technical details —Admin Dashboard

const queryClient = new QueryClient({
  defaultOptions: { queries: { retry: 1, refetchOnWindowFocus: false } },
});

return (
  <QueryClientProvider client={queryClient}>
    <Router>
      <Routes>
        <Route path="/login" element={<LoginPage/>} />
        <Route path="/users" element={
          <ProtectedRoute requiredPermission="userManagement">
            <Layout><UsersManagement/></Layout>
          </ProtectedRoute>} />
        // … catch-all → Navigate to="/dashboard"
      </Routes>
      <Toaster position="top-right" />
    </Router>
  </QueryClientProvider>
)

if (isLoading) return <LoadingPage message="Verifying..." />;

if (!isAuthenticated)
  return <Navigate to="/login" state={{ from: location }} replace />;

if (requiredRole && !hasRole(requiredRole))
  return <Navigate to="/dashboard" replace />;

if (requiredPermission && !hasPermission(requiredPermission))
  return <Navigate to="/dashboard" replace />;

return <>{children}</>;

if (!authState.user) return false;

// Admin has ALL rights
if (user.profile?.role === 'admin') return true;

// Finance only has 4 financial rights
if (user.profile?.role === 'finance') {
  const financePermissions = [
    'walletManagement', 'transactionManagement',
    'withdrawalManagement', 'financeManagement',
  ];
  return financePermissions.includes(permission);
}
return false; // other roles → no rights

this.client = axios.create({ baseURL: API_BASE_URL, timeout: 10000 });

this.client.interceptors.request.use((config) => {
  const token = localStorage.getItem('admin_auth_token');
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

this.client.interceptors.response.use(r => r, (error) => {
  if (error.response?.status === 401) {
    localStorage.removeItem('admin_auth_token');
    window.location.href = '/login';
  }
  return Promise.reject(error);
});

export const useUsers = (filters) =>
  useQuery(['users', filters], () => apiClient.getUsers(filters),
    { keepPreviousData: true, staleTime: 5 * 60 * 1000 });

export const useBanUser = () => {
  const qc = useQueryClient();
  return useMutation(({ userId, data }) => apiClient.banUser(userId, data), {
    onSuccess: () => {
      qc.invalidateQueries('users');
      qc.invalidateQueries('userDetails');
      toast.success(SUCCESS_MESSAGES.USER_BANNED);
    },
    onError: (e) => toast.error(parseErrorMessage(e)),
  });
};

export interface ApiResponse<T> {
  success: boolean; message?: string;
  data: T; statusCode?: number; timestamp?: string;
}

export interface User {
  id: string; email: string; status: 'active'|'inactive'|'suspended';
  banned: boolean; profile: Record<string, any>; // role is in profile.role
}

// ⚠ NO envelope — only flat:
export interface WithdrawalsResponse {
  withdrawals: Withdrawal[]; pagination: Pagination;
}

const [selectedWithdrawal, setSelectedWithdrawal] =
  useState<WithdrawalRequest | null>(null);
const [showApproveModal, setShowApproveModal] = useState(false);

const handleApproveWithdrawal = (w) => {
  setSelectedWithdrawal(w);
  setShowApproveModal(true);
};

// onSuccess of the modal → refetch() to update the list
const handleWithdrawalUpdate = () => refetch();

@tailwind base; @tailwind components; @tailwind utilities;

@layer base {
  :root {
    --primary: 221.2 83.2% 53.3%;  /* blue */
    --card: 0 0% 100%; --border: 214.3 31.8% 91.4%;
    --radius: 0.5rem;
  }
  .dark { --background: 222.2 84% 4.9%; /* …defined but not used yet */ }
}

// tailwind.config.js → colors: { primary: 'hsl(var(--primary))', card: 'hsl(var(--card))' … }

npm start    # PORT=3002 react-scripts start → http://localhost:3002
npm run build  # react-scripts build (Webpack) → build/
npm test     # react-scripts test (Jest, no tests yet)
npm run eject  # extract CRA config (not recommended)