Add frontend loading imporvements

frontend/src/hooks/useOnboardingStatus.ts

@@ -0,0 +1,51 @@
+import { useQuery } from '@tanstack/react-query';
+import { apiClient } from '../api/client';
+
+interface OnboardingStatus {
+  ingredients_count: number;
+  suppliers_count: number;
+  recipes_count: number;
+  has_minimum_setup: boolean;
+  progress_percentage: number;
+  requirements: {
+    ingredients: {
+      current: number;
+      minimum: number;
+      met: boolean;
+    };
+    suppliers: {
+      current: number;
+      minimum: number;
+      met: boolean;
+    };
+    recipes: {
+      current: number;
+      minimum: number;
+      met: boolean;
+    };
+  };
+}
+
+export const useOnboardingStatus = (tenantId: string) => {
+  return useQuery<OnboardingStatus>({
+    queryKey: ['onboarding-status', tenantId],
+    queryFn: async () => {
+      console.log('[useOnboardingStatus] Fetching for tenant:', tenantId);
+      try {
+        // apiClient.get() already returns response.data (unwrapped)
+        const data = await apiClient.get<OnboardingStatus>(
+          `/tenants/${tenantId}/onboarding/status`
+        );
+        console.log('[useOnboardingStatus] Success:', data);
+        return data;
+      } catch (error) {
+        console.error('[useOnboardingStatus] Error:', error);
+        throw error;
+      }
+    },
+    enabled: !!tenantId,
+    staleTime: 60 * 1000,
+    gcTime: 5 * 60 * 1000,
+    retry: 1,
+  });
+};