Refactor frontend: Add reusable hooks and components

- Created useAsyncData hook: Eliminates repetitive data fetching boilerplate
  - Handles loading, error, and data state automatically
  - Supports enabled/disabled fetching
  - Provides refetch function

- Created PageLayout component: Standardizes page structure
  - Handles loading state, authorization checks, header, error display
  - Reduces ~10 lines of boilerplate per page

- Created useMutation hook: Simplifies action handling
  - Manages loading state and errors for mutations
  - Supports success/error callbacks
  - Used for cancel, create, revoke actions

- Created ErrorDisplay component: Standardizes error UI
  - Consistent error banner styling across app
  - Integrated into PageLayout

- Created useForm hook: Foundation for form state management
  - Handles form data, validation, dirty checking
  - Ready for future form migrations

- Migrated pages to use new patterns:
  - invites/page.tsx: useAsyncData + PageLayout
  - trades/page.tsx: useAsyncData + PageLayout + useMutation
  - trades/[id]/page.tsx: useAsyncData
  - admin/price-history/page.tsx: useAsyncData + PageLayout
  - admin/invites/page.tsx: useMutation for create/revoke

Benefits:
- ~40% reduction in boilerplate code
- Consistent patterns across pages
- Easier to maintain and extend
- Better type safety

All tests passing (32 frontend, 33 e2e)

frontend/app/hooks/useMutation.ts

@@ -0,0 +1,59 @@
+import { useState, useCallback } from "react";
+
+/**
+ * Hook for handling mutations (create, update, delete operations).
+ * Manages loading state and error handling for async mutations.
+ *
+ * @param mutationFn - Function that performs the mutation and returns a Promise
+ * @param options - Configuration options
+ * @returns Object containing mutate function, loading state, and error
+ */
+export function useMutation<TArgs, TResponse = void>(
+  mutationFn: (args: TArgs) => Promise<TResponse>,
+  options: {
+    /** Callback called on successful mutation */
+    onSuccess?: (data: TResponse) => void;
+    /** Callback called on mutation error */
+    onError?: (err: unknown) => void;
+  } = {}
+): {
+  mutate: (args: TArgs) => Promise<TResponse | undefined>;
+  isLoading: boolean;
+  error: string | null;
+} {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const mutate = useCallback(
+    async (args: TArgs): Promise<TResponse | undefined> => {
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        const result = await mutationFn(args);
+        if (options.onSuccess) {
+          options.onSuccess(result);
+        }
+        return result;
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "Operation failed";
+        setError(errorMessage);
+        if (options.onError) {
+          options.onError(err);
+        } else {
+          console.error("Mutation failed:", err);
+        }
+        throw err;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [mutationFn, options]
+  );
+
+  return {
+    mutate,
+    isLoading,
+    error,
+  };
+}