feat(web): add React Query, dark mode toggle, and error retry UX

- Install @tanstack/react-query with exponential backoff retry config
- Create QueryClientProvider and custom hooks for listings, analytics,
  payments, and subscription API calls
- Migrate 5 dashboard pages from useState/useEffect to React Query hooks
- Add dark mode CSS variables and ThemeProvider with localStorage persistence
- Add theme toggle button in dashboard header (sun/moon icon)
- Enhance error boundaries with auto-retry, retry count, and loading state

Co-Authored-By: Paperclip <noreply@paperclip.ing>

apps/web/lib/hooks/use-analytics.ts

@@ -0,0 +1,48 @@
+import { useQuery } from '@tanstack/react-query';
+import { analyticsApi } from '@/lib/analytics-api';
+
+export const analyticsKeys = {
+  all: ['analytics'] as const,
+  marketReport: (city: string, period: string) =>
+    ['analytics', 'market-report', city, period] as const,
+  heatmap: (city: string, period: string) =>
+    ['analytics', 'heatmap', city, period] as const,
+  districtStats: (city: string, period: string) =>
+    ['analytics', 'district-stats', city, period] as const,
+  priceTrend: (district: string, city: string, propertyType: string, periods: string[]) =>
+    ['analytics', 'price-trend', district, city, propertyType, periods] as const,
+};
+
+export function useMarketReport(city: string, period: string) {
+  return useQuery({
+    queryKey: analyticsKeys.marketReport(city, period),
+    queryFn: () => analyticsApi.getMarketReport(city, period),
+  });
+}
+
+export function useHeatmap(city: string, period: string) {
+  return useQuery({
+    queryKey: analyticsKeys.heatmap(city, period),
+    queryFn: () => analyticsApi.getHeatmap(city, period),
+  });
+}
+
+export function useDistrictStats(city: string, period: string) {
+  return useQuery({
+    queryKey: analyticsKeys.districtStats(city, period),
+    queryFn: () => analyticsApi.getDistrictStats(city, period),
+  });
+}
+
+export function usePriceTrend(
+  district: string,
+  city: string,
+  propertyType: string,
+  periods: string[],
+) {
+  return useQuery({
+    queryKey: analyticsKeys.priceTrend(district, city, propertyType, periods),
+    queryFn: () => analyticsApi.getPriceTrend(district, city, propertyType, periods),
+    enabled: !!district && !!city,
+  });
+}

apps/web/lib/hooks/use-listings.ts

@@ -0,0 +1,23 @@
+import { useQuery } from '@tanstack/react-query';
+import { listingsApi, type SearchListingsParams } from '@/lib/listings-api';
+
+export const listingsKeys = {
+  all: ['listings'] as const,
+  search: (params: SearchListingsParams) => ['listings', 'search', params] as const,
+  detail: (id: string) => ['listings', 'detail', id] as const,
+};
+
+export function useListingsSearch(params: SearchListingsParams = {}) {
+  return useQuery({
+    queryKey: listingsKeys.search(params),
+    queryFn: () => listingsApi.search(params),
+  });
+}
+
+export function useListingDetail(id: string) {
+  return useQuery({
+    queryKey: listingsKeys.detail(id),
+    queryFn: () => listingsApi.getById(id),
+    enabled: !!id,
+  });
+}

apps/web/lib/hooks/use-payments.ts

@@ -0,0 +1,28 @@
+import { useQuery } from '@tanstack/react-query';
+import { paymentApi } from '@/lib/payment-api';
+
+export const paymentKeys = {
+  all: ['payments'] as const,
+  transactions: (params: { status?: string; limit?: number; offset?: number }) =>
+    ['payments', 'transactions', params] as const,
+  status: (id: string) => ['payments', 'status', id] as const,
+};
+
+export function useTransactions(params: {
+  status?: string;
+  limit?: number;
+  offset?: number;
+} = {}) {
+  return useQuery({
+    queryKey: paymentKeys.transactions(params),
+    queryFn: () => paymentApi.getTransactions(params),
+  });
+}
+
+export function usePaymentStatus(id: string) {
+  return useQuery({
+    queryKey: paymentKeys.status(id),
+    queryFn: () => paymentApi.getPaymentStatus(id),
+    enabled: !!id,
+  });
+}

apps/web/lib/hooks/use-subscription.ts

@@ -0,0 +1,31 @@
+import { useQuery } from '@tanstack/react-query';
+import { subscriptionApi } from '@/lib/subscription-api';
+
+export const subscriptionKeys = {
+  all: ['subscription'] as const,
+  plans: () => ['subscription', 'plans'] as const,
+  billing: () => ['subscription', 'billing'] as const,
+  quota: (metric: string) => ['subscription', 'quota', metric] as const,
+};
+
+export function usePlans() {
+  return useQuery({
+    queryKey: subscriptionKeys.plans(),
+    queryFn: () => subscriptionApi.getPlans(),
+  });
+}
+
+export function useBillingHistory() {
+  return useQuery({
+    queryKey: subscriptionKeys.billing(),
+    queryFn: () => subscriptionApi.getBillingHistory(),
+  });
+}
+
+export function useQuota(metric: string) {
+  return useQuery({
+    queryKey: subscriptionKeys.quota(metric),
+    queryFn: () => subscriptionApi.checkQuota(metric),
+    enabled: !!metric,
+  });
+}

apps/web/lib/query-client.ts

@@ -0,0 +1,32 @@
+'use client';
+
+import { QueryClient } from '@tanstack/react-query';
+
+function makeQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60 * 1000,
+        gcTime: 5 * 60 * 1000,
+        retry: 3,
+        retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
+        refetchOnWindowFocus: false,
+      },
+      mutations: {
+        retry: 1,
+      },
+    },
+  });
+}
+
+let browserQueryClient: QueryClient | undefined;
+
+export function getQueryClient() {
+  if (typeof window === 'undefined') {
+    return makeQueryClient();
+  }
+  if (!browserQueryClient) {
+    browserQueryClient = makeQueryClient();
+  }
+  return browserQueryClient;
+}