Fix hardcoded preferences bug - use actual user profile data

wardrobe-ai/frontend/src/components/CuratedBox.js

@@ -6,26 +6,49 @@ export default function CuratedBox() {
   const [box, setBox] = useState(null);
   const [feedback, setFeedback] = useState({});
   const [userId, setUserId] = useState(null);
+  const [profile, setProfile] = useState(null);
+  const [loadingProfile, setLoadingProfile] = useState(false);
 
   useEffect(() => {
     const userIdParam = router.query.userId;
     if (userIdParam) {
       setUserId(userIdParam);
-      generateBox(userIdParam);
+      fetchProfile(userIdParam);
     }
   }, [router.query]);
 
+  const fetchProfile = async (userId) => {
+    try {
+      setLoadingProfile(true);
+      const response = await fetch(`/api/profile/${userId}`);
+      const data = await response.json();
+      if (response.ok) {
+        setProfile(data);
+      } else {
+        console.error('Failed to fetch profile:', data.error);
+      }
+    } catch (error) {
+      console.error('Error fetching profile:', error);
+    } finally {
+      setLoadingProfile(false);
+    }
+  };
+
   const generateBox = async (userId) => {
     try {
-      // For now, use placeholder preferences - in real app, fetch from user profile
+      // Use actual user profile preferences, or fallback to defaults
+      const preferredColors = profile?.preferred_colors || ['Black', 'White', 'Navy', 'Grey'];
+      const stylePreferences = profile?.style_preferences || ['Classic', 'Casual'];
+      const budget = profile?.budget || 100;
+      
       const response = await fetch('/api/box', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           userId,
-          preferredColors: ['Black', 'White', 'Navy', 'Grey'],
-          stylePreferences: ['Classic', 'Casual'],
-          budget: 100
+          preferredColors,
+          stylePreferences,
+          budget
         })
       });
       
@@ -36,6 +59,13 @@ export default function CuratedBox() {
     }
   };
 
+  // Generate box when profile is loaded
+  useEffect(() => {
+    if (userId && profile) {
+      generateBox(userId);
+    }
+  }, [userId, profile]);
+
   const handleFeedbackChange = (productId, field, value) => {
     setFeedback(prev => ({
       ...prev,