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/useAsyncData.ts

@@ -0,0 +1,65 @@
+import { useState, useEffect, useCallback } from "react";
+
+/**
+ * Hook for fetching async data with loading and error states.
+ * Handles the common pattern of fetching data when component mounts or dependencies change.
+ *
+ * @param fetcher - Function that returns a Promise with the data
+ * @param options - Configuration options
+ * @returns Object containing data, loading state, error, and refetch function
+ */
+export function useAsyncData<T>(
+  fetcher: () => Promise<T>,
+  options: {
+    /** Whether the fetch should be enabled (default: true) */
+    enabled?: boolean;
+    /** Callback for handling errors */
+    onError?: (err: unknown) => void;
+    /** Initial data value (useful for optimistic updates) */
+    initialData?: T;
+  } = {}
+): {
+  data: T | null;
+  isLoading: boolean;
+  error: string | null;
+  refetch: () => Promise<void>;
+} {
+  const { enabled = true, onError, initialData } = options;
+
+  const [data, setData] = useState<T | null>(initialData ?? null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchData = useCallback(async () => {
+    if (!enabled) return;
+
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const result = await fetcher();
+      setData(result);
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Failed to load data";
+      setError(errorMessage);
+      if (onError) {
+        onError(err);
+      } else {
+        console.error("Failed to fetch data:", err);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }, [fetcher, enabled, onError]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  return {
+    data,
+    isLoading,
+    error,
+    refetch: fetchData,
+  };
+}

frontend/app/hooks/useForm.ts

@@ -0,0 +1,96 @@
+import { useState, useCallback, useMemo } from "react";
+
+/**
+ * Hook for managing form state with validation and dirty checking.
+ * Handles common form patterns like tracking changes, validation, and submission.
+ *
+ * @param initialData - Initial form data
+ * @param validator - Validation function that returns field errors
+ * @param onSubmit - Submit handler function
+ * @returns Form state and handlers
+ */
+export function useForm<
+  TData extends Record<string, unknown>,
+  TErrors extends Record<string, string | undefined>,
+>(
+  initialData: TData,
+  validator: (data: TData) => TErrors,
+  onSubmit: (data: TData) => Promise<void>
+): {
+  formData: TData;
+  setFormData: React.Dispatch<React.SetStateAction<TData>>;
+  errors: TErrors;
+  setErrors: React.Dispatch<React.SetStateAction<TErrors>>;
+  isDirty: boolean;
+  isValid: boolean;
+  isSubmitting: boolean;
+  handleChange: (field: keyof TData) => (e: React.ChangeEvent<HTMLInputElement>) => void;
+  handleSubmit: (e: React.FormEvent) => Promise<void>;
+  reset: () => void;
+} {
+  const [formData, setFormData] = useState<TData>(initialData);
+  const [originalData] = useState<TData>(initialData);
+  const [errors, setErrors] = useState<TErrors>({} as TErrors);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const isDirty = useMemo(() => {
+    return JSON.stringify(formData) !== JSON.stringify(originalData);
+  }, [formData, originalData]);
+
+  const isValid = useMemo(() => {
+    return Object.keys(errors).length === 0;
+  }, [errors]);
+
+  const handleChange = useCallback(
+    (field: keyof TData) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      setFormData((prev) => ({ ...prev, [field]: e.target.value }));
+      // Clear error for this field when user starts typing
+      setErrors((prev) => {
+        const newErrors = { ...prev };
+        delete newErrors[field as keyof TErrors];
+        return newErrors;
+      });
+    },
+    []
+  );
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent) => {
+      e.preventDefault();
+
+      // Validate all fields
+      const validationErrors = validator(formData);
+      setErrors(validationErrors);
+
+      if (Object.keys(validationErrors).length > 0) {
+        return;
+      }
+
+      setIsSubmitting(true);
+      try {
+        await onSubmit(formData);
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [formData, validator, onSubmit]
+  );
+
+  const reset = useCallback(() => {
+    setFormData(originalData);
+    setErrors({} as TErrors);
+  }, [originalData]);
+
+  return {
+    formData,
+    setFormData,
+    errors,
+    setErrors,
+    isDirty,
+    isValid,
+    isSubmitting,
+    handleChange,
+    handleSubmit,
+    reset,
+  };
+}

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,
+  };
+}