fix: Admin UI clickable labels and granular settings save logic

Author: lead-matrix

app/admin/settings/page.tsx

@@ -69,15 +69,15 @@ export default async function AdminSettings() {
                                         Maintenance Mode Kill Switch
                                     </p>
                                 </div>
-                                <div className="relative inline-flex items-center cursor-pointer">
+                                <label className="relative inline-flex items-center cursor-pointer">
                                     <input
                                         type="checkbox"
                                         name="storeEnabled"
                                         defaultChecked={isEnabled}
                                         className="sr-only peer"
                                     />
                                     <div className="w-14 h-7 bg-[#121214] peer-focus:outline-none rounded-full border border-white/10 peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[4px] after:bg-white after:border-charcoal/30 after:border after:rounded-full after:h-6 after:w-6 after:transition-all peer-checked:bg-emerald-500 shadow-inner group transition-all"></div>
-                                </div>
+                                </label>
                             </div>
                         </SettingsForm>
                     </section>
@@ -96,21 +96,21 @@ export default async function AdminSettings() {
                                             <p className="text-[11px] uppercase tracking-luxury font-bold text-white">Show Bestsellers in Hero</p>
                                             <p className="text-[9px] text-luxury-subtext leading-relaxed">Replace the top sale slider with bestsellers.</p>
                                         </div>
-                                        <div className="relative inline-flex items-center cursor-pointer">
+                                        <label className="relative inline-flex items-center cursor-pointer">
                                             <input type="checkbox" name="show_bestsellers_hero" defaultChecked={homeConfig.show_bestsellers_hero === true} className="sr-only peer" />
                                             <div className="w-11 h-6 bg-[#121214] peer-focus:outline-none rounded-full border border-white/10 peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-charcoal/30 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-gold shadow-inner group transition-all"></div>
-                                        </div>
+                                        </label>
                                     </div>
 
                                     <div className="flex items-center justify-between border-t border-white/5 pt-6">
                                         <div className="space-y-1">
                                             <p className="text-[11px] uppercase tracking-luxury font-bold text-white">Obsidian Bestsellers</p>
                                             <p className="text-[9px] text-luxury-subtext leading-relaxed">Show the horizontal scrolling carousel of best-selling items.</p>
                                         </div>
-                                        <div className="relative inline-flex items-center cursor-pointer">
+                                        <label className="relative inline-flex items-center cursor-pointer">
                                             <input type="checkbox" name="show_bestsellers" defaultChecked={homeConfig.show_bestsellers !== false} className="sr-only peer" />
                                             <div className="w-11 h-6 bg-[#121214] peer-focus:outline-none rounded-full border border-white/10 peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-charcoal/30 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-gold shadow-inner group transition-all"></div>
-                                        </div>
+                                        </label>
                                     </div>
 
                                     <div className="grid grid-cols-1 md:grid-cols-2 gap-4">

lib/actions/admin.ts

@@ -494,19 +494,39 @@ export async function updateOrderStatus(orderId: string, status: string) {
 export async function updateStoreSettings(formData: FormData) {
     const supabase = await ensureAdmin();
 
-    const name = formData.get('name') as string;
-    const tagline = formData.get('tagline') as string;
-    const currency = formData.get('currency') as string;
-    const logo_url = formData.get('logo_url') as string;
-    const storeEnabled = formData.get('storeEnabled') === 'on' || formData.get('storeEnabled') === 'true';
-
-    const warehouseJson = formData.get('warehouse_info') as string;
-
-    const { error: infoError } = await supabase
-        .from('site_settings')
-        .upsert({ setting_key: 'store_info', setting_value: { name, tagline, currency, logo_url } }, { onConflict: 'setting_key' });
-
-    if (infoError) throw infoError;
+    const name = formData.get('name') as string | null;
+    const tagline = formData.get('tagline') as string | null;
+    const currency = formData.get('currency') as string | null;
+    const logo_url = formData.get('logo_url') as string | null;
+    
+    // Check if storeEnabled was even in the form before using its value
+    const hasStoreEnabled = formData.has('storeEnabled');
+    const storeEnabledRaw = formData.get('storeEnabled');
+    const storeEnabled = storeEnabledRaw === 'on' || storeEnabledRaw === 'true';
+
+    const warehouseJson = formData.get('warehouse_info') as string | null;
+
+    // Handle store_info (merge if only some fields are present)
+    if (name !== null || tagline !== null || currency !== null || logo_url !== null) {
+        const { data: existingInfo } = await supabase
+            .from('site_settings')
+            .select('setting_value')
+            .eq('setting_key', 'store_info')
+            .maybeSingle();
+
+        const newInfo = {
+            ...(existingInfo?.setting_value || {}),
+            ...(name !== null ? { name } : {}),
+            ...(tagline !== null ? { tagline } : {}),
+            ...(currency !== null ? { currency } : {}),
+            ...(logo_url !== null ? { logo_url } : {}),
+        };
+
+        const { error } = await supabase
+            .from('site_settings')
+            .upsert({ setting_key: 'store_info', setting_value: newInfo }, { onConflict: 'setting_key' });
+        if (error) throw error;
+    }
 
     if (warehouseJson) {
         const { error: whError } = await supabase
@@ -515,14 +535,14 @@ export async function updateStoreSettings(formData: FormData) {
         if (whError) throw whError;
     }
 
-    const { error: enabledError } = await supabase
-        .from('site_settings')
-        .upsert({ setting_key: 'store_enabled', setting_value: storeEnabled }, { onConflict: 'setting_key' });
-
-    if (enabledError) throw enabledError;
+    if (hasStoreEnabled) {
+        const { error: enabledError } = await supabase
+            .from('site_settings')
+            .upsert({ setting_key: 'store_enabled', setting_value: storeEnabled }, { onConflict: 'setting_key' });
+        if (enabledError) throw enabledError;
+    }
 
     revalidatePath('/admin/settings');
-    revalidatePath('/collections');
     revalidatePath('/', 'layout');
     return { success: true };
 }
@@ -649,23 +669,40 @@ export async function updateShippingSettings(formData: FormData) {
 export async function updateHomeSections(formData: FormData) {
     const supabase = await ensureAdmin();
 
-    const show_bestsellers = formData.get('show_bestsellers') === 'on';
-    const bestseller_heading = (formData.get('bestseller_heading') as string)?.trim() || 'Obsidian Bestsellers';
-    const bestseller_subheading = (formData.get('bestseller_subheading') as string)?.trim() || 'Most-loved by our community';
-    const show_featured = formData.get('show_featured') !== 'off';
-    const show_collections = formData.get('show_collections') !== 'off';
+    // Fetch existing to avoid wiping out fields not present in this form/v4 schema
+    const { data: existing } = await supabase
+        .from('site_settings')
+        .select('setting_value')
+        .eq('setting_key', 'home_sections')
+        .maybeSingle();
+
+    const newValue = { ...(existing?.setting_value || {}) };
+
+    // Only update keys that are actually in the form data
+    if (formData.has('show_bestsellers')) {
+        newValue.show_bestsellers = formData.get('show_bestsellers') === 'on' || formData.get('show_bestsellers') === 'true';
+    }
+    if (formData.has('show_bestsellers_hero')) {
+        newValue.show_bestsellers_hero = formData.get('show_bestsellers_hero') === 'on' || formData.get('show_bestsellers_hero') === 'true';
+    }
+    if (formData.has('bestseller_heading')) {
+        newValue.bestseller_heading = (formData.get('bestseller_heading') as string)?.trim();
+    }
+    if (formData.has('bestseller_subheading')) {
+        newValue.bestseller_subheading = (formData.get('bestseller_subheading') as string)?.trim();
+    }
+    if (formData.has('show_featured')) {
+        newValue.show_featured = formData.get('show_featured') === 'on' || formData.get('show_featured') === 'true';
+    }
+    if (formData.has('show_collections')) {
+        newValue.show_collections = formData.get('show_collections') === 'on' || formData.get('show_collections') === 'true';
+    }
 
     const { error } = await supabase
         .from('site_settings')
         .upsert({
             setting_key: 'home_sections',
-            setting_value: {
-                show_bestsellers,
-                bestseller_heading,
-                bestseller_subheading,
-                show_featured,
-                show_collections,
-            },
+            setting_value: newValue,
         }, { onConflict: 'setting_key' });
 
     if (error) throw error;