refactor phase 7-8

frontend/src/pages/Sites/Builder/steps/BusinessDetailsStep.tsx

@@ -205,6 +205,38 @@ function BusinessDetailsStepStage1({
   metadata?: SiteBuilderMetadata;
   selectedSectors?: Array<{ id: number; name: string }>;
 }) {
+  const [userPreferences, setUserPreferences] = useState<{
+    selectedIndustry?: string;
+    selectedSectors?: string[];
+  } | null>(null);
+  const [loadingPreferences, setLoadingPreferences] = useState(true);
+
+  // Load user preferences from account settings
+  useEffect(() => {
+    const loadPreferences = async () => {
+      try {
+        const { fetchAccountSetting } = await import('../../../../services/api');
+        const setting = await fetchAccountSetting('user_preferences');
+        const preferences = setting.config as { selectedIndustry?: string; selectedSectors?: string[] } | undefined;
+        if (preferences) {
+          setUserPreferences(preferences);
+          // Pre-populate industry if available and not already set
+          if (preferences.selectedIndustry && !data.industry) {
+            onChange('industry', preferences.selectedIndustry);
+          }
+        }
+      } catch (error: any) {
+        // 404 means preferences don't exist yet - that's fine
+        if (error.status !== 404) {
+          console.warn('Failed to load user preferences:', error);
+        }
+      } finally {
+        setLoadingPreferences(false);
+      }
+    };
+    loadPreferences();
+  }, []);
+
   return (
     <Card variant="surface" padding="lg" className="space-y-6">
       <div>
@@ -216,7 +248,12 @@ function BusinessDetailsStepStage1({
           Business details
         </h3>
         <p className="text-sm text-gray-500 dark:text-gray-400 max-w-2xl">
-          These inputs help the AI understand what we’re building. You can refine them later in the builder or site settings.
+          These inputs help the AI understand what we're building. You can refine them later in the builder or site settings.
+          {userPreferences?.selectedIndustry && (
+            <span className="block mt-1 text-xs text-green-600 dark:text-green-400">
+              ✓ Using your pre-selected industry and sectors from setup
+            </span>
+          )}
         </p>
       </div>
 
@@ -268,9 +305,8 @@ function BusinessDetailsStepStage1({
           <Input
             value={data.industry}
             onChange={(e) => onChange('industry', e.target.value)}
-            placeholder="Supply chain automation"
+            placeholder={userPreferences?.selectedIndustry || "Supply chain automation"}
           />
-        </div>
         <div className="space-y-3 rounded-2xl border border-gray-100 bg-white p-4 shadow-theme-sm dark:border-white/5 dark:bg-white/[0.02]">
           <label className="text-sm font-semibold text-gray-900 dark:text-white">
             Hosting preference

frontend/src/pages/Sites/List.tsx

@@ -72,6 +72,10 @@ export default function SiteList() {
   const [selectedIndustry, setSelectedIndustry] = useState<string>('');
   const [selectedSectors, setSelectedSectors] = useState<string[]>([]);
   const [isSelectingSectors, setIsSelectingSectors] = useState(false);
+  const [userPreferences, setUserPreferences] = useState<{
+    selectedIndustry?: string;
+    selectedSectors?: string[];
+  } | null>(null);
   
   // Form state for site creation/editing
   const [formData, setFormData] = useState({
@@ -91,8 +95,25 @@ export default function SiteList() {
   useEffect(() => {
     loadSites();
     loadIndustries();
+    loadUserPreferences();
   }, []);
 
+  const loadUserPreferences = async () => {
+    try {
+      const { fetchAccountSetting } = await import('../../services/api');
+      const setting = await fetchAccountSetting('user_preferences');
+      const preferences = setting.config as { selectedIndustry?: string; selectedSectors?: string[] } | undefined;
+      if (preferences) {
+        setUserPreferences(preferences);
+      }
+    } catch (error: any) {
+      // 404 means preferences don't exist yet - that's fine
+      if (error.status !== 404) {
+        console.warn('Failed to load user preferences:', error);
+      }
+    }
+  };
+
   useEffect(() => {
     applyFilters();
   }, [sites, searchTerm, siteTypeFilter, hostingTypeFilter, statusFilter, integrationFilter]);
@@ -132,7 +153,26 @@ export default function SiteList() {
   const loadIndustries = async () => {
     try {
       const response = await fetchIndustries();
-      setIndustries(response.industries || []);
+      let allIndustries = response.industries || [];
+      
+      // Filter to show only user's pre-selected industries/sectors from account preferences
+      try {
+        const { fetchAccountSetting } = await import('../../services/api');
+        const setting = await fetchAccountSetting('user_preferences');
+        const preferences = setting.config as { selectedIndustry?: string; selectedSectors?: string[] } | undefined;
+        
+        if (preferences?.selectedIndustry) {
+          // Filter industries to only show the user's pre-selected industry
+          allIndustries = allIndustries.filter(i => i.slug === preferences.selectedIndustry);
+        }
+      } catch (error: any) {
+        // 404 means preferences don't exist yet - show all industries
+        if (error.status !== 404) {
+          console.warn('Failed to load user preferences for filtering:', error);
+        }
+      }
+      
+      setIndustries(allIndustries);
     } catch (error: any) {
       console.error('Failed to load industries:', error);
     }
@@ -387,7 +427,14 @@ export default function SiteList() {
   const getIndustrySectors = () => {
     if (!selectedIndustry) return [];
     const industry = industries.find(i => i.slug === selectedIndustry);
-    return industry?.sectors || [];
+    let sectors = industry?.sectors || [];
+    
+    // Filter to show only user's pre-selected sectors from account preferences
+    if (userPreferences?.selectedSectors && userPreferences.selectedSectors.length > 0) {
+      sectors = sectors.filter(s => userPreferences.selectedSectors!.includes(s.slug));
+    }
+    
+    return sectors;
   };
 
   const clearFilters = () => {