fix: Update activeTab when tabs array changes

Issue: Blank form when tabs change dynamically

Problem:
- When product type changes (simple → variable)
- Tabs array changes (adds/removes variations tab)
- activeTab state still points to old tab ID
- If old tab ID doesn't exist, no section shows
- Result: Blank form

Fix:
- Added useEffect to watch tabs array
- Check if current activeTab exists in new tabs
- If not, reset to first tab (tabs[0].id)
- Ensures valid activeTab always

Example:
- Initial: tabs = [general, inventory, organization]
- activeTab = 'general' ✅
- Type changes to variable
- New tabs = [general, inventory, variations, organization]
- activeTab still 'general' ✅ (exists, no change)
- But if activeTab was 'variations' and type changed to simple
- Old activeTab 'variations' doesn't exist
- Reset to 'general' ✅

Result:
✅ Form always shows active section
✅ Handles dynamic tab changes
✅ No blank forms

admin-spa/src/components/VerticalTabForm.tsx

@@ -18,6 +18,13 @@ export function VerticalTabForm({ tabs, children, className }: VerticalTabFormPr
   const contentRef = useRef<HTMLDivElement>(null);
   const sectionRefs = useRef<{ [key: string]: HTMLElement }>({});
 
+  // Update activeTab when tabs change (e.g., product type changes)
+  useEffect(() => {
+    if (tabs.length > 0 && !tabs.find(t => t.id === activeTab)) {
+      setActiveTab(tabs[0].id);
+    }
+  }, [tabs, activeTab]);
+
   // Scroll spy - update active tab based on scroll position
   useEffect(() => {
     const handleScroll = () => {