firebase-os 1.1.3 → 1.1.5

package/src/pages/PagesAdmin.tsx

@@ -0,0 +1,1022 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { DashboardNav } from '../components/DashboardNav';
+import { useAuth } from '../lib/AuthContext';
+import { Shield, Eye, EyeOff, Lock, Globe, Plus, Trash2, Power, ChevronUp, ChevronDown, Layers, Loader2, Save, Copy, RotateCcw, CheckCircle2 } from 'lucide-react';
+import { Button } from '../components/Button';
+import { db } from '../lib/firebase';
+import { doc, onSnapshot, setDoc, collection, getDocs, getDoc } from 'firebase/firestore';
+import { ConfirmModal } from '../components/ConfirmModal';
+import { JsonNode } from './ThemeAdmin';
+import { defaultHomeConfig } from '../configs/pages/home.config';
+import { defaultContactConfig } from '../configs/pages/contact.config';
+import { defaultSupportConfig } from '../configs/pages/support.config';
+import { defaultPublicConfig } from '../configs/pages/pub.config';
+import { userPageConfig as defaultPrivateConfig } from '../configs/pages/user.config';
+import { adminPageConfig as defaultAdminConfig } from '../configs/pages/admin.config';
+import { sharedPageConfig as defaultSharedConfig } from '../configs/pages/shared.config';
+
+type PageType = 'shared' | 'private' | 'admin' | 'public';
+
+interface PageItem {
+  id: string;
+  _uiKey?: string;
+  title: string;
+  path: string;
+  isSystem: boolean;
+  enabled: boolean;
+  type: PageType;
+}
+
+const initialPages: PageItem[] = [
+  // Public
+  { id: 'home', title: 'Home Page', path: '/', type: 'public', isSystem: true, enabled: true },
+  { id: 'contact', title: 'Contact', path: '/contact', type: 'public', isSystem: true, enabled: true },
+
+  // Private
+  { id: 'support', title: 'Request Support', path: '/support', type: 'private', isSystem: true, enabled: true },
+];
+
+const Toggle = ({ enabled, onChange, disabled, className = '' }: { enabled: boolean, onChange: (val: boolean) => void, disabled?: boolean, className?: string }) => (
+  <button
+    disabled={disabled}
+    onClick={() => onChange(!enabled)}
+    title={enabled ? "Page Active" : "Page Hidden"}
+    className={`p-1.5 transition-colors rounded-lg flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity ${className} ${enabled ? 'text-accent hover:bg-accent/10' : 'text-foreground/40 hover:bg-foreground/5'} ${disabled ? '!opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
+  >
+    {enabled ? <Eye className="w-4 h-4" /> : <EyeOff className="w-4 h-4" />}
+  </button>
+);
+
+import { useLocation } from 'react-router-dom';
+
+export function PagesAdmin() {
+  const { userRole } = useAuth();
+  const location = useLocation();
+  const [pages, setPages] = useState<PageItem[]>(initialPages);
+  const [expandedPageId, setExpandedPageId] = useState<string | null>(null);
+  const [isAddingPage, setIsAddingPage] = useState(false);
+  const [draftConfigs, setDraftConfigs] = useState<Record<string, any>>({});
+  const [savingConfigMap, setSavingConfigMap] = useState<Record<string, boolean>>({});
+  const [resettingMap, setResettingMap] = useState<Record<string, boolean>>({});
+  const [deleteConfirmId, setDeleteConfirmId] = useState<string | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const addMenuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (addMenuRef.current && !addMenuRef.current.contains(event.target as Node)) {
+        setIsAddingPage(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const [homeConfig, setHomeConfig] = useState<any>(null);
+  const [savingHome, setSavingHome] = useState(false);
+  const [resettingHome, setResettingHome] = useState(false);
+
+  const [contactConfig, setContactConfig] = useState<any>(null);
+  const [savingContact, setSavingContact] = useState(false);
+  const [resettingContact, setResettingContact] = useState(false);
+
+  const [supportConfig, setSupportConfig] = useState<any>(null);
+  const [savingSupport, setSavingSupport] = useState(false);
+  const [resettingSupport, setResettingSupport] = useState(false);
+  // ── Order-based visibility (single source of truth) ─────────────────────
+  const [pageHiddenIds, setPageHiddenIds] = useState<Set<string>>(new Set());
+  const [tabHiddenIds, setTabHiddenIds] = useState<Set<string>>(new Set());
+  const [pageOrderItems, setPageOrderItems] = useState<{ id: string; hidden: boolean }[]>([]);
+  const [tabOrderItems, setTabOrderItems] = useState<{ id: string; hidden: boolean }[]>([]);
+
+  const parseOrder = (raw: any[]): { id: string; hidden: boolean }[] =>
+    (raw || []).map((i: any) => typeof i === 'string' ? { id: i, hidden: false } : { id: String(i.id), hidden: Boolean(i.hidden) });
+
+  useEffect(() => {
+    const unsubPageOrd = onSnapshot(doc(db, 'sys_configs', 'page_order'), snap => {
+      const items = parseOrder(snap.exists() ? snap.data().order || [] : []);
+      setPageOrderItems(items);
+      setPageHiddenIds(new Set(items.filter(i => i.hidden).map(i => i.id)));
+    });
+    const unsubTabOrd = onSnapshot(doc(db, 'sys_configs', 'tab_order'), snap => {
+      const items = parseOrder(snap.exists() ? snap.data().order || [] : []);
+      setTabOrderItems(items);
+      setTabHiddenIds(new Set(items.filter(i => i.hidden).map(i => i.id)));
+    });
+    return () => { unsubPageOrd(); unsubTabOrd(); };
+  }, []);
+
+  useEffect(() => {
+    const pathId = location.pathname.split('/pages/')[1]?.split('/')[0];
+    if (pathId && !expandedPageId && pages.some(p => p.id === pathId)) {
+      setExpandedPageId(pathId);
+    }
+  }, [location.pathname, pages]);
+
+
+
+  useEffect(() => {
+    const mergeConfig = (def: any, dbVal: any) => {
+      if (!dbVal) return def;
+      const cleanVal = Object.fromEntries(Object.entries(dbVal).filter(([_, v]) => v !== undefined && v !== null && v !== ''));
+      return { ...def, ...cleanVal };
+    };
+
+    const unsubHome = onSnapshot(doc(db, 'sys_pages', 'home'), (docSnap) => {
+      setHomeConfig(docSnap.exists() ? mergeConfig(defaultHomeConfig, docSnap.data()) : defaultHomeConfig);
+    });
+    const unsubContact = onSnapshot(doc(db, 'sys_pages', 'contact'), (docSnap) => {
+      setContactConfig(docSnap.exists() ? mergeConfig(defaultContactConfig, docSnap.data()) : defaultContactConfig);
+    });
+    const unsubSupport = onSnapshot(doc(db, 'sys_tabs', 'support'), (docSnap) => {
+      setSupportConfig(docSnap.exists() ? mergeConfig(defaultSupportConfig, docSnap.data()) : defaultSupportConfig);
+    });
+    return () => { unsubHome(); unsubContact(); unsubSupport(); };
+  }, []);
+
+  useEffect(() => {
+    const fetchCustomConfigs = async () => {
+      try {
+        const [pubConfigs, pubTabs] = await Promise.all([
+          getDocs(collection(db, 'sys_pages')),
+          getDocs(collection(db, 'sys_tabs'))
+        ]);
+
+        const systemIds = ['home', 'contact', 'support', 'theme', 'page_order', 'tab_order'];
+        const loadedPages: PageItem[] = [];
+        const loadedConfigs: Record<string, any> = {};
+
+        pubConfigs.forEach(d => {
+          if (!systemIds.includes(d.id)) {
+            const data = d.data();
+            loadedPages.push({ id: d.id, title: data.pageName || data.title || d.id, path: data.route || '/' + d.id, type: 'public', isSystem: false, enabled: data.enabled !== false });
+            loadedConfigs[d.id] = data;
+          }
+        });
+
+        pubTabs.forEach(d => {
+          if (!systemIds.includes(d.id)) {
+            const data = d.data();
+            const pType = data.pageType || 'private';
+            loadedPages.push({ id: d.id, title: data.tabName || data.title || d.id, path: data.route || '/' + d.id, type: pType, isSystem: false, enabled: data.enabled !== false });
+            loadedConfigs[d.id] = data;
+          }
+        });
+
+        if (loadedPages.length > 0) {
+          setPages(prev => {
+            const base = prev.filter(p => p.isSystem || p.id.startsWith('draft_'));
+            const newPages = loadedPages.filter(lp => !base.some(p => p.id === lp.id));
+            return [...base, ...newPages];
+          });
+          setDraftConfigs(prev => ({ ...prev, ...loadedConfigs }));
+        }
+      } catch (e) {
+        console.error("Error loading custom pages", e);
+      }
+    };
+    fetchCustomConfigs();
+  }, []);
+
+
+
+  const [publicForms, setPublicForms] = useState<string[]>(['contact']);
+  const [privateForms, setPrivateForms] = useState<string[]>(['support']);
+
+  useEffect(() => {
+    getDocs(collection(db, 'sys_forms')).then(snap => {
+      const pub: string[] = [];
+      const priv: string[] = [];
+      snap.forEach(d => {
+        if (d.data().formType === 'private') priv.push(d.id);
+        else pub.push(d.id);
+      });
+      if (pub.length > 0) setPublicForms(pub);
+      if (priv.length > 0) setPrivateForms(priv);
+    }).catch(console.error);
+  }, []);
+  const [copyStateId, setCopyStateId] = useState<string | null>(null);
+
+  const handleCopyBtn = (id: string, val: any) => {
+    let str = JSON.stringify(val, null, 2);
+    navigator.clipboard.writeText(str);
+    setCopyStateId(id);
+    setTimeout(() => setCopyStateId(null), 2000);
+  };
+
+  const handleSaveConfig = async (id: string, val: any) => {
+    if (val.route && !val.route.startsWith('/')) {
+      val.route = '/' + val.route;
+    }
+
+    const targetPage = pages.find(p => p.id === id);
+    const pageType = targetPage?.type;
+    const collectionName = pageType === 'public' ? 'sys_pages' : 'sys_tabs';
+
+    if (pageType && pageType !== 'public') {
+      val.pageType = pageType;
+    }
+
+    const isSystemPage = ['home', 'contact', 'support'].includes(id);
+    const targetId = isSystemPage
+      ? id
+      : (val.route ? val.route.replace(/^\/+/, '').replace(/[^a-zA-Z0-9_\-]/g, '_').toLowerCase() : id);
+
+    if (id === 'home') setSavingHome(true);
+    else if (id === 'contact') setSavingContact(true);
+    else if (id === 'support') setSavingSupport(true);
+    else setSavingConfigMap(p => ({ ...p, [id]: true, [targetId]: true }));
+
+    try {
+      const isIdMutated = targetId !== id && targetId.trim() !== '' && targetId !== 'draft';
+
+      if (isIdMutated) {
+        try {
+          const { deleteDoc } = await import('firebase/firestore');
+          await deleteDoc(doc(db, collectionName, id));
+        } catch (e) { }
+        await setDoc(doc(db, collectionName, targetId), val);
+
+        setPages(prev => prev.map(p => p.id === id ? { ...p, id: targetId, _uiKey: p._uiKey || id, path: val.route, title: val.pageName || val.tabName || val.title || p.title } : p));
+        setDraftConfigs(prev => {
+          const next = { ...prev };
+          next[targetId] = val;
+          delete next[id];
+          return next;
+        });
+
+        if (expandedPageId === id) {
+          setExpandedPageId(targetId);
+          window.history.replaceState(null, '', `/pages/${targetId}`);
+        }
+
+        // Append new tab to the BOTTOM of the order list
+        const isPublicPage = pageType === 'public';
+        const orderDocId = isPublicPage ? 'page_order' : 'tab_order';
+        const currentOrder = isPublicPage ? pageOrderItems : tabOrderItems;
+        const alreadyInOrder = currentOrder.some(o => o.id === targetId);
+        if (!alreadyInOrder) {
+          const newOrder = [...currentOrder.filter(o => o.id !== id), { id: targetId, hidden: false }];
+          try {
+            await setDoc(doc(db, 'sys_configs', orderDocId), { order: newOrder });
+          } catch (e) {
+            console.error('Failed to update tab order:', e);
+          }
+        }
+      } else {
+        await setDoc(doc(db, collectionName, id), val);
+        if (id === 'home') setHomeConfig(val);
+        else if (id === 'contact') setContactConfig(val);
+        else if (id === 'support') setSupportConfig(val);
+        else {
+          setDraftConfigs(p => ({ ...p, [id]: val }));
+          setPages(prev => prev.map(p => p.id === id ? { ...p, path: val.route || p.path, title: val.pageName || val.tabName || val.title || p.title } : p));
+        }
+      }
+    } catch (e) {
+      console.error(`Failed to save ${id} config:`, e);
+    } finally {
+      setTimeout(() => {
+        if (id === 'home') setSavingHome(false);
+        else if (id === 'contact') setSavingContact(false);
+        else if (id === 'support') setSavingSupport(false);
+        else setSavingConfigMap(p => ({ ...p, [id]: false, [targetId]: false }));
+      }, 500);
+    }
+  };
+
+  const handleResetHome = async (e: React.MouseEvent) => {
+    e.stopPropagation(); setResettingHome(true);
+    await handleSaveConfig('home', defaultHomeConfig);
+    setTimeout(() => setResettingHome(false), 500);
+  };
+
+  const handleResetContact = async (e: React.MouseEvent) => {
+    e.stopPropagation(); setResettingContact(true);
+    await handleSaveConfig('contact', defaultContactConfig);
+    setTimeout(() => setResettingContact(false), 500);
+  };
+
+  const handleResetSupport = async (e: React.MouseEvent) => {
+    e.stopPropagation(); setResettingSupport(true);
+    await handleSaveConfig('support', defaultSupportConfig);
+    setTimeout(() => setResettingSupport(false), 500);
+  };
+
+  const handleResetPage = async (e: React.MouseEvent, pageId: string, defConfig: any) => {
+    e.stopPropagation(); setResettingMap(p => ({ ...p, [pageId]: true }));
+    await handleSaveConfig(pageId, defConfig);
+    setTimeout(() => setResettingMap(p => ({ ...p, [pageId]: false })), 500);
+  };
+
+  const startDraft = (type: PageType) => {
+    const newId = 'draft_' + Math.floor(Math.random() * 10000);
+    setPages([...pages, { id: newId, title: 'New Tab', path: '/draft', type, isSystem: false, enabled: true }]);
+
+    let defaultPayload = {};
+    if (type === 'public') {
+      defaultPayload = { ...defaultPublicConfig };
+    } else if (type === 'private') {
+      defaultPayload = { ...defaultPrivateConfig };
+    } else if (type === 'admin') {
+      defaultPayload = { ...defaultAdminConfig };
+    } else if (type === 'shared') {
+      defaultPayload = { ...defaultSharedConfig };
+    }
+    setDraftConfigs(p => ({ ...p, [newId]: defaultPayload }));
+    setExpandedPageId(newId);
+    setIsAddingPage(false);
+    setTimeout(() => {
+      document.getElementById(`page-${newId}`)?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }, 100);
+  };
+
+  if (userRole !== 'admin') {
+    return (
+      <main className="flex-1 w-full max-w-7xl mx-auto p-4 md:p-8 z-10 flex flex-col pt-12 min-h-screen">
+        <div className="flex flex-col items-center justify-center flex-1">
+          <Shield className="w-12 h-12 text-red-500 mb-4" />
+          <h2 className="text-2xl font-bold">Access Denied</h2>
+          <p className="text-foreground/60">You do not have permission to view pages configuration.</p>
+        </div>
+      </main>
+    );
+  }
+
+  const togglePage = async (id: string, isSystem: boolean, pageType: PageType) => {
+    const isPublic = pageType === 'public';
+    const docId = isPublic ? 'page_order' : 'tab_order';
+    const currentOrderItems = isPublic ? pageOrderItems : tabOrderItems;
+    const currentHidden = isPublic ? pageHiddenIds : tabHiddenIds;
+    const nowHidden = currentHidden.has(id);
+
+    // Optimistic local update
+    setPages(pages.map(p => p.id === id ? { ...p, enabled: nowHidden } : p));
+
+    // Ensure item is represented in the order array
+    let newOrder = [...currentOrderItems];
+    const existingIdx = newOrder.findIndex(o => o.id === id);
+    if (existingIdx !== -1) {
+      newOrder[existingIdx] = { ...newOrder[existingIdx], hidden: !nowHidden };
+    } else {
+      newOrder.push({ id, hidden: true }); // wasn't in order → adding as hidden
+    }
+
+    await setDoc(doc(db, 'sys_configs', docId), { order: newOrder });
+  };
+
+  const deletePage = (id: string, isSystem: boolean) => {
+    if (isSystem) return;
+    setDeleteConfirmId(id);
+  };
+
+  const confirmDeletePage = async () => {
+    if (!deleteConfirmId) return;
+    setIsDeleting(true);
+    try {
+      const { deleteDoc, collection, getDocs, doc } = await import('firebase/firestore');
+      const page = pages.find(p => p.id === deleteConfirmId);
+      const collectionName = page?.type === 'public' ? 'sys_pages' : 'sys_tabs';
+      await deleteDoc(doc(db, collectionName, deleteConfirmId));
+
+      if (collectionName === 'sys_tabs' && page) {
+        const tabName = page.id;
+        try {
+          const collectionsClean = [
+            `admin_${tabName}_records`,
+            `mem_${tabName}_records`,
+            `user_${tabName}_records`
+          ];
+
+          for (const col of collectionsClean) {
+            const recordsSnap = await getDocs(collection(db, col));
+            const deletePromises = recordsSnap.docs.map(d => deleteDoc(d.ref));
+            await Promise.all(deletePromises);
+          }
+        } catch (cleanupErr) {
+          console.error("Error cleaning up tab records:", cleanupErr);
+        }
+      }
+
+      const orderDocId = collectionName === 'sys_pages' ? 'page_order' : 'tab_order';
+      const currentOrderItems = collectionName === 'sys_pages' ? pageOrderItems : tabOrderItems;
+      const { setDoc } = await import('firebase/firestore');
+      const newOrder = currentOrderItems.filter(o => o.id !== deleteConfirmId);
+      await setDoc(doc(db, 'sys_configs', orderDocId), { order: newOrder });
+
+      setPages(prev => prev.filter(p => p.id !== deleteConfirmId));
+      if (expandedPageId === deleteConfirmId) setExpandedPageId(null);
+    } catch (e) {
+      console.error("Error deleting page:", e);
+    }
+    setIsDeleting(false);
+    setDeleteConfirmId(null);
+  };
+
+  const duplicatePage = (originalPage: PageItem) => {
+    const newId = originalPage.id + '_' + Math.floor(Math.random() * 1000);
+    const newPage: PageItem = {
+      ...originalPage,
+      id: newId,
+      title: `${originalPage.title} (Copy)`,
+      path: `${originalPage.path}_copy`,
+      isSystem: false,
+      enabled: true
+    };
+
+    setPages(prev => [...prev, newPage]);
+
+    let sourceConfig = draftConfigs[originalPage.id];
+    if (!sourceConfig) {
+      if (originalPage.id === 'contact') sourceConfig = contactConfig || defaultContactConfig;
+      if (originalPage.id === 'support') sourceConfig = supportConfig || defaultSupportConfig;
+    }
+
+    const newConfig = { ...sourceConfig, route: newPage.path, pageName: newPage.title };
+    if (newPage.type !== 'public') {
+      newConfig.tabName = newPage.title;
+      newConfig.pageType = newPage.type;
+    }
+
+    setDraftConfigs(prev => ({ ...prev, [newId]: newConfig }));
+
+    setExpandedPageId(newId);
+    setTimeout(() => {
+      document.getElementById(`page-${newId}`)?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }, 100);
+  };
+
+
+  const sections: { id: string; title: string; icon: any; description: string; color: string; filter: (p: PageItem) => boolean }[] = [
+    {
+      id: 'public',
+      title: 'Public Pages', icon: Globe, color: 'bg-amber-500',
+      description: "Creates external menu items. Invisible to signed-in dashboard users.",
+      filter: p => p.type === 'public'
+    },
+    {
+      id: 'private',
+      title: 'Private Pages', icon: Lock, color: 'bg-emerald-500',
+      description: "Internal dashboard tabs for regular users.",
+      filter: p => p.type === 'private'
+    },
+    {
+      id: 'shared',
+      title: 'Shared Pages', icon: Eye, color: 'bg-blue-500',
+      description: "Dashboard tabs visible to all members, editors, and admins.",
+      filter: p => p.type === 'shared'
+    },
+    {
+      id: 'admin',
+      title: 'Admin Pages', icon: Shield, color: 'bg-red-500',
+      description: "Internal dashboard tabs for admin users only.",
+      filter: p => p.type === 'admin'
+    },
+  ];
+
+  const [showResetAllConfirm, setShowResetAllConfirm] = useState(false);
+  const [isResettingAll, setIsResettingAll] = useState(false);
+
+  const handleResetAllDefaults = async () => {
+    setIsResettingAll(true);
+    try {
+      const { deleteDoc } = await import('firebase/firestore');
+      await Promise.all([
+        deleteDoc(doc(db, 'sys_pages', 'home')),
+        deleteDoc(doc(db, 'sys_pages', 'contact')),
+        deleteDoc(doc(db, 'sys_tabs', 'support'))
+      ]);
+      setHomeConfig(defaultHomeConfig);
+      setContactConfig(defaultContactConfig);
+      setSupportConfig(defaultSupportConfig);
+    } catch (e) {
+      console.error("Error resetting defaults:", e);
+    }
+    setTimeout(() => {
+      setIsResettingAll(false);
+      setShowResetAllConfirm(false);
+    }, 1000);
+  };
+
+  return (
+    <main className="flex-1 w-full max-w-7xl mx-auto p-4 md:p-8 z-10 flex flex-col">
+      {/* Header */}
+      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="mb-6 flex items-center justify-between">
+        <div>
+          <h1 className="w-fit inline-block text-3xl md:text-4xl lg:text-5xl font-extrabold tracking-tight mb-3 text-gradient mt-1">
+            Pages
+          </h1>
+          <div className="flex items-center gap-2 text-foreground/40 font-bold uppercase tracking-[0.2em] text-[11px]">
+            <span className="w-8 h-[1px] bg-foreground/10" />
+            /pages{expandedPageId ? `/${expandedPageId}` : ''}
+          </div>
+        </div>
+      </motion.div>
+
+      <div className="flex flex-col gap-6 flex-1 pb-16">
+        <DashboardNav />
+
+        <div className="flex flex-col glass-panel border border-[var(--panel-border)] rounded-3xl overflow-hidden flex-1 shadow-2xl bg-background">
+          <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-6 mb-6 pb-6 border-b border-[var(--panel-border)]/50 relative z-10 shrink-0 px-6 pt-6 md:px-10 md:pt-10">
+            <div>
+              <h2 className="text-xl font-extrabold text-foreground tracking-tight">Architecture</h2>
+              <p className="text-[14px] font-medium text-foreground/60 mt-2 leading-relaxed">
+                Manage the structure of your application tabs and public pages.
+              </p>
+            </div>
+
+            <div className="relative z-50 shrink-0 w-full md:w-auto flex justify-end gap-1">
+              <Button variant="secondary" onClick={() => setShowResetAllConfirm(true)} className="w-10 h-10 p-0 border-transparent bg-transparent hover:bg-foreground/5 rounded-xl flex items-center justify-center shrink-0 transition-colors group cursor-pointer" title="Reset Defaults">
+                <RotateCcw className="w-4 h-4 text-foreground/60 group-hover:text-foreground transition-colors" />
+              </Button>
+              <div className="relative">
+                <Button variant="secondary" onClick={() => setIsAddingPage(!isAddingPage)} className="w-10 h-10 p-0 border-transparent bg-transparent hover:bg-foreground/5 rounded-xl flex items-center justify-center shrink-0 transition-colors group cursor-pointer" title="Add New Page">
+                  <Plus className="w-4 h-4 text-foreground/60 group-hover:text-foreground transition-colors" />
+                </Button>
+                <AnimatePresence>
+                  {isAddingPage && (
+                    <motion.div
+                      ref={addMenuRef}
+                      initial={{ opacity: 0, y: 10, scale: 0.95 }}
+                      animate={{ opacity: 1, y: 0, scale: 1 }}
+                      exit={{ opacity: 0, y: 10, scale: 0.95 }}
+                      className="absolute top-full mt-2 right-0 w-48 glass-panel border border-[var(--panel-border)] rounded-2xl p-2 shadow-xl z-50 flex flex-col gap-1"
+                    >
+                      {['public', 'private', 'shared', 'admin'].map((t) => (
+                        <button
+                          key={t}
+                          onClick={() => { startDraft(t as PageType); setIsAddingPage(false); }}
+                          className="text-left px-3 py-2 text-[13px] font-bold uppercase tracking-wider text-foreground/70 hover:text-foreground hover:bg-foreground/5 rounded-lg transition-colors cursor-pointer"
+                        >
+                          {t} Page
+                        </button>
+                      ))}
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </div>
+            </div>
+          </div>
+          <div className="px-6 md:px-10 pb-6 md:pb-10 flex flex-col pt-0 gap-10 overflow-y-auto mt-2 relative min-h-[400px]">
+            <AnimatePresence>
+              {isResettingAll && (
+                <motion.div
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  className="absolute inset-0 z-50 flex items-center justify-center bg-background/50 backdrop-blur-[2px] rounded-3xl"
+                >
+                  <div className="flex flex-col items-center justify-center p-6 glass-panel rounded-2xl shadow-xl">
+                    <Loader2 className="w-8 h-8 md:w-10 md:h-10 animate-spin text-accent mb-4" />
+                    <span className="text-sm font-bold text-foreground">Synchronizing Architecture...</span>
+                  </div>
+                </motion.div>
+              )}
+            </AnimatePresence>
+            {sections.map((section, idx) => {
+              const unsortedSectionPages = pages.filter(section.filter);
+              // Sort pages within each section by tab_order/page_order
+              const orderItems = section.id === 'public' ? pageOrderItems : tabOrderItems;
+              const sectionPages = unsortedSectionPages.sort((a, b) => {
+                const aIdx = orderItems.findIndex(o => o.id === a.id);
+                const bIdx = orderItems.findIndex(o => o.id === b.id);
+                // Items in the order list come first, in order; items not in the list go to the end
+                if (aIdx === -1 && bIdx === -1) return 0;
+                if (aIdx === -1) return 1;
+                if (bIdx === -1) return -1;
+                return aIdx - bIdx;
+              });
+              const Icon = section.icon;
+
+              const isPageHidden = (p: PageItem) =>
+                p.type === 'public' ? pageHiddenIds.has(p.id) : tabHiddenIds.has(p.id);
+
+              const activePages = sectionPages.filter(p => !isPageHidden(p));
+              const hiddenPages = sectionPages.filter(p => isPageHidden(p));
+
+              const getPublicKeys = (val: any) => {
+                if (!val) return [];
+                const keys = ['route', 'pageName', 'template'];
+                if (val.template === 'none') {
+                  keys.push('pageTitle', 'copyPrompt');
+                  keys.push('showButton');
+                  if (val.showButton !== false) {
+                    keys.push('buttonText', 'action');
+                    if (val.action === 'form') keys.push('form');
+                    else if (val.action === 'redirect') keys.push('redirectUrl');
+                  }
+                } else if (val.template === 'popup_form' || val.template === 'inline_form') {
+                  keys.push('showButton');
+                  if (val.showButton !== false) {
+                    keys.push('form');
+                  }
+                }
+                return keys;
+              };
+
+              const getPrivateKeys = (val: any) => {
+                if (!val) return [];
+                const keys = ['tabName', 'iconName', 'route', 'template'];
+                if (val.template === 'popup_form' || val.template === 'inline_form') {
+                  keys.push('showButton');
+                  if (val.showButton !== false) {
+                    keys.push('form');
+                  }
+                } else if (val.template === 'none') {
+                  keys.push('showPrompt', 'tabTitle');
+                  keys.push('showButton');
+                  if (val.showButton !== false) {
+                    keys.push('buttonStyle', 'buttonText', 'buttonAction');
+                  }
+                  keys.push('storage');
+                  if (val.storage !== false) {
+                    keys.push('buttonStorageIcon', 'buttonStorageText', 'buttonStorageStyle', 'buttonStorageAction');
+                  }
+                } else if (val.template === 'calendar') {
+                  // Calendar-specific settings
+                  keys.push('tabTitle', 'showPrompt');
+                  keys.push('defaultView', 'defaultTimeFormat');
+                  keys.push('showButton');
+                  if (val.showButton !== false) {
+                    keys.push('buttonText', 'buttonStyle');
+                  }
+                  keys.push('showViewsButton');
+                  if (val.showViewsButton !== false) {
+                    keys.push('viewsButtonStyle');
+                  }
+                } else if (val.template === 'table') {
+                  // Table-specific settings
+                  keys.push('tabTitle', 'showPrompt');
+                  keys.push('showButton');
+                  if (val.showButton !== false) {
+                    keys.push('buttonText', 'buttonStyle');
+                  }
+                  keys.push('showExportButton');
+                  if (val.showExportButton !== false) {
+                    keys.push('exportButtonIcon');
+                  }
+                } else if (val.template === 'board') {
+                  // Board-specific settings
+                  keys.push('tabTitle', 'showPrompt');
+                  keys.push('showButton');
+                  if (val.showButton !== false) {
+                    keys.push('buttonText', 'buttonStyle');
+                  }
+                  keys.push('keyName', 'valueName');
+                }
+                return keys;
+              };
+
+              // Inject template-specific defaults when switching templates
+              const injectTemplateDefaults = (currentVal: any, newVal: any): any => {
+                if (newVal.template === currentVal.template) return newVal;
+                if (newVal.template === 'calendar') {
+                  return {
+                    ...newVal,
+                    defaultView: newVal.defaultView || 'calendar',
+                    defaultTimeFormat: newVal.defaultTimeFormat || '12h',
+                    showViewsButton: newVal.showViewsButton !== undefined ? newVal.showViewsButton : true,
+                    viewsButtonStyle: newVal.viewsButtonStyle || 'secondary',
+                  };
+                }
+                if (newVal.template === 'table') {
+                  return {
+                    ...newVal,
+                    showExportButton: newVal.showExportButton !== undefined ? newVal.showExportButton : true,
+                    exportButtonIcon: newVal.exportButtonIcon || 'download-square',
+                  };
+                }
+                if (newVal.template === 'board') {
+                  return {
+                    ...newVal,
+                    keyName: newVal.keyName || 'key',
+                    valueName: newVal.valueName || 'value',
+                  };
+                }
+                return newVal;
+              };
+
+              const renderPage = (page: PageItem, pIdx: number, isHidden: boolean) => {
+                const isHome = page.id === 'home';
+                const isContact = page.id === 'contact';
+                const isSupport = page.id === 'support';
+                const isExpanded = expandedPageId === page.id;
+                const isConfigurable = isHome || isContact || isSupport || !page.isSystem;
+
+                return (
+                  <div
+                    id={`page-${page.id}`}
+                    key={`${section.id}-${page._uiKey || page.id}`}
+                    onClick={(e) => {
+                      if (isConfigurable) {
+                        const newId = isExpanded ? null : page.id;
+                        setExpandedPageId(newId);
+                        window.history.replaceState(null, '', newId ? `/pages/${newId}` : `/pages`);
+                      }
+                    }}
+                    className={`group flex flex-col py-4 px-5 glass-panel border transition-all rounded-2xl hover:shadow-sm ${isConfigurable ? 'cursor-pointer hover:border-accent/40' : ''} ${isHidden ? 'opacity-40 grayscale bg-foreground/[0.01] border-[var(--panel-border)]/50' : 'border-transparent hover:border-[var(--panel-border)]'}`}
+                  >
+                    <div className="flex flex-col sm:flex-row items-center justify-between w-full gap-4">
+                      <div className="flex items-center gap-1 w-full flex-1">
+                        <div className="flex items-center gap-2">
+                          <h3 className="text-[14px] font-bold text-foreground truncate">{page.title}</h3>
+                          {((isHome && savingHome) || (isContact && savingContact) || (isSupport && savingSupport)) && <Loader2 className="w-3 h-3 animate-spin text-accent ml-2" />}
+                        </div>
+                        <div className={`text-[11px] font-medium font-mono px-2 py-0.5 rounded w-fit ml-6 border ${isHidden ? 'text-foreground/50 border-foreground/10 bg-foreground/5' : 'text-accent/70 bg-accent/5 border-accent/10'}`}>
+                          {window.location.host}{page.path}
+                        </div>
+                      </div>
+
+                      <div className="flex items-center gap-4 shrink-0">
+                        {(!page.isSystem || ['contact', 'support', 'templates'].includes(page.id)) ? (
+                          <button onClick={(e) => { e.stopPropagation(); duplicatePage(page); }} className="p-1.5 hover:bg-accent/10 text-foreground/40 hover:text-accent transition-colors rounded-lg flex items-center justify-center shrink-0" title="Duplicate Page">
+                            <Copy className="w-4 h-4" />
+                          </button>
+                        ) : (
+                          <div className="w-[28px] shrink-0" />
+                        )}
+                        <div className="flex items-center justify-end w-8 shrink-0">
+                          {page.id !== 'home' ? (
+                            <Toggle enabled={!isPageHidden(page)} onChange={() => togglePage(page.id, page.isSystem, page.type)} />
+                          ) : (
+                            <div className="w-[28px] shrink-0" />
+                          )}
+                        </div>
+
+                        {!page.isSystem ? (
+                          <button onClick={(e) => { e.stopPropagation(); deletePage(page.id, page.isSystem); }} className="p-1.5 hover:bg-red-500/10 text-foreground/30 hover:text-red-500 transition-colors rounded-lg flex items-center justify-center shrink-0" title="Delete Page">
+                            <Trash2 className="w-4 h-4" />
+                          </button>
+                        ) : (
+                          <div className="w-[28px] shrink-0" />
+                        )}
+
+                        {isConfigurable ? (
+                          <div className={`p-1.5 transition-transform duration-300 text-foreground/40 shrink-0 ${isExpanded ? 'rotate-180' : ''}`}>
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
+                          </div>
+                        ) : (
+                          <div className="w-[24px] shrink-0" />
+                        )}
+                      </div>
+                    </div>
+
+                    <AnimatePresence>
+                      {isExpanded && isHome && homeConfig && (
+                        <motion.div
+                          initial={{ height: 0, opacity: 0 }}
+                          animate={{ height: "auto", opacity: 1 }}
+                          exit={{ height: 0, opacity: 0 }}
+                          className="overflow-hidden mt-4 pt-4 border-t border-[var(--panel-border)]/50 pb-4"
+                          onClick={e => e.stopPropagation()}
+                        >
+                          <div className="flex flex-col font-mono text-[13px] leading-relaxed relative bg-background/50 p-4 py-6 rounded-xl border border-[var(--panel-border)] shadow-inner">
+
+                            <div className="absolute top-4 right-4 flex items-center gap-1 z-20">
+                              <button onClick={handleResetHome} className="w-8 h-8 p-0 border-transparent bg-transparent hover:bg-red-500/10 rounded-lg flex items-center justify-center shrink-0 transition-colors group" title="Reset to Defaults">
+                                {resettingHome ? <Loader2 className="w-3.5 h-3.5 text-red-500 animate-spin" /> : <RotateCcw className="w-3.5 h-3.5 text-foreground/40 group-hover:text-red-500 transition-colors" />}
+                              </button>
+                              <button onClick={(e) => { e.stopPropagation(); handleCopyBtn('home', homeConfig); }} className="w-8 h-8 p-0 border-transparent bg-transparent hover:bg-foreground/10 rounded-lg flex items-center justify-center shrink-0 transition-colors" title="Copy JSON">
+                                {copyStateId === 'home' ? <CheckCircle2 className="w-3.5 h-3.5 text-emerald-500" /> : <Copy className="w-3.5 h-3.5 text-foreground/40 hover:text-foreground transition-colors" />}
+                              </button>
+                            </div>
+                            <JsonNode
+                              value={homeConfig}
+                              keysToRender={['hero']}
+                              onChange={(val: any) => handleSaveConfig('home', val)}
+                              isLast={true}
+                              isGlobalSaving={savingHome}
+                              customEnums={{ form: publicForms }}
+                              customExplanations={{
+                                form: "User can click to switch to any public form we have in the forms tab. Private forms are not an option here. Add a new form in forms with a link that actually works."
+                              }}
+                            />
+                          </div>
+                        </motion.div>
+                      )}
+                      {isExpanded && isContact && contactConfig && (
+                        <motion.div
+                          initial={{ height: 0, opacity: 0 }}
+                          animate={{ height: "auto", opacity: 1 }}
+                          exit={{ height: 0, opacity: 0 }}
+                          className="overflow-hidden mt-4 pt-4 border-t border-[var(--panel-border)]/50 pb-4"
+                          onClick={e => e.stopPropagation()}
+                        >
+                          <div className="flex flex-col font-mono text-[13px] leading-relaxed relative bg-background/50 p-4 py-6 rounded-xl border border-[var(--panel-border)] shadow-inner">
+
+                            <div className="absolute top-4 right-4 flex items-center gap-1 z-20">
+                              <button onClick={handleResetContact} className="w-8 h-8 p-0 border-transparent bg-transparent hover:bg-red-500/10 rounded-lg flex items-center justify-center shrink-0 transition-colors group" title="Reset to Defaults">
+                                {resettingContact ? <Loader2 className="w-3.5 h-3.5 text-red-500 animate-spin" /> : <RotateCcw className="w-3.5 h-3.5 text-foreground/40 group-hover:text-red-500 transition-colors" />}
+                              </button>
+                              <button onClick={(e) => { e.stopPropagation(); handleCopyBtn('contact', contactConfig); }} className="w-8 h-8 p-0 border-transparent bg-transparent hover:bg-foreground/10 rounded-lg flex items-center justify-center shrink-0 transition-colors" title="Copy JSON">
+                                {copyStateId === 'contact' ? <CheckCircle2 className="w-3.5 h-3.5 text-emerald-500" /> : <Copy className="w-3.5 h-3.5 text-foreground/40 hover:text-foreground transition-colors" />}
+                              </button>
+                            </div>
+                            <JsonNode
+                              value={contactConfig}
+                              keysToRender={contactConfig.showButton !== false ? ['pageName', 'route', 'template', 'showButton', 'form'] : ['pageName', 'route', 'template', 'showButton']}
+                              disabledKeys={['route']}
+                              onChange={(val: any) => handleSaveConfig('contact', val)}
+                              isLast={true}
+                              isGlobalSaving={savingContact}
+                              customEnums={{ form: publicForms, template: ['popup_form', 'inline_form'] }}
+                              customExplanations={{
+                                pageName: "This defines the text that actually appears globally in the Navigation menus.",
+                                template: "This just simply tells our app when a user clicks on the contact page item what type of form do we load? is it a page or popup? this doesn't define form content! this setting just defines page layout.",
+                                form: "This is the form that will be used. Go to /forms to edit it."
+                              }}
+                            />
+                          </div>
+                        </motion.div>
+                      )}
+                      {isExpanded && isSupport && supportConfig && (
+                        <motion.div
+                          initial={{ height: 0, opacity: 0 }}
+                          animate={{ height: "auto", opacity: 1 }}
+                          exit={{ height: 0, opacity: 0 }}
+                          className="overflow-hidden mt-4 pt-4 border-t border-[var(--panel-border)]/50 pb-4"
+                          onClick={e => e.stopPropagation()}
+                        >
+                          <div className="flex flex-col font-mono text-[13px] leading-relaxed relative bg-background/50 p-4 py-6 rounded-xl border border-[var(--panel-border)] shadow-inner">
+
+                            <div className="absolute top-4 right-4 flex items-center gap-1 z-20">
+                              <button onClick={handleResetSupport} className="w-8 h-8 p-0 border-transparent bg-transparent hover:bg-red-500/10 rounded-lg flex items-center justify-center shrink-0 transition-colors group" title="Reset to Defaults">
+                                {resettingSupport ? <Loader2 className="w-3.5 h-3.5 text-red-500 animate-spin" /> : <RotateCcw className="w-3.5 h-3.5 text-foreground/40 group-hover:text-red-500 transition-colors" />}
+                              </button>
+                              <button onClick={(e) => { e.stopPropagation(); handleCopyBtn('support', supportConfig); }} className="w-8 h-8 p-0 border-transparent bg-transparent hover:bg-foreground/10 rounded-lg flex items-center justify-center shrink-0 transition-colors" title="Copy JSON">
+                                {copyStateId === 'support' ? <CheckCircle2 className="w-3.5 h-3.5 text-emerald-500" /> : <Copy className="w-3.5 h-3.5 text-foreground/40 hover:text-foreground transition-colors" />}
+                              </button>
+                            </div>
+                            <JsonNode
+                              value={supportConfig}
+                              keysToRender={supportConfig.showButton !== false ? ['pageName', 'iconName', 'route', 'template', 'showButton', 'form'] : ['pageName', 'iconName', 'route', 'template', 'showButton']}
+                              disabledKeys={['route']}
+                              onChange={(val: any) => handleSaveConfig('support', val)}
+                              isLast={true}
+                              isGlobalSaving={savingSupport}
+                              customEnums={{ form: privateForms, template: ['popup_form', 'inline_form'] }}
+                              customExplanations={{
+                                pageName: "Defines the textual title label rendering in internal sidebars.",
+                                iconName: "To modify this icon, visit https://iconoir.com/, find an icon, and copy its exact name (e.g. 'learning', 'server'). Then paste it here.",
+                                template: "This just simply tells our app when a user clicks on the support page item what type of form do we load? is it a page or popup? this doesn't define form content! this setting just defines page layout.",
+                                form: "This is the form that will be used. Go to /forms to edit it."
+                              }}
+                            />
+                          </div>
+                        </motion.div>
+                      )}
+                      {isExpanded && !page.isSystem && draftConfigs[page.id] && (
+                        <motion.div
+                          initial={{ height: 0, opacity: 0 }}
+                          animate={{ height: "auto", opacity: 1 }}
+                          exit={{ height: 0, opacity: 0 }}
+                          className="overflow-hidden mt-4 pt-4 border-t border-[var(--panel-border)]/50 pb-4"
+                          onClick={e => e.stopPropagation()}
+                        >
+                          <div className="flex flex-col font-mono text-[13px] leading-relaxed relative bg-background/50 p-4 py-6 rounded-xl border border-[var(--panel-border)] shadow-inner">
+
+                            <div className="absolute top-4 right-4 flex items-center gap-1 z-20">
+                              <button onClick={(e) => handleResetPage(e, page.id, page.type === 'admin' ? defaultAdminConfig : page.type === 'shared' ? defaultSharedConfig : page.type === 'public' ? defaultPublicConfig : defaultPrivateConfig)} className="w-8 h-8 p-0 border-transparent bg-transparent hover:bg-red-500/10 rounded-lg flex items-center justify-center shrink-0 transition-colors group" title="Reset to Defaults">
+                                {resettingMap[page.id] ? <Loader2 className="w-3.5 h-3.5 text-red-500 animate-spin" /> : <RotateCcw className="w-3.5 h-3.5 text-foreground/40 group-hover:text-red-500 transition-colors" />}
+                              </button>
+                              <button onClick={(e) => { e.stopPropagation(); handleCopyBtn(page.id, draftConfigs[page.id]); }} className="w-8 h-8 p-0 border-transparent bg-transparent hover:bg-foreground/10 rounded-lg flex items-center justify-center shrink-0 transition-colors" title="Copy JSON">
+                                {copyStateId === page.id ? <CheckCircle2 className="w-10 h-10 p-0 border-transparent bg-transparent hover:bg-foreground/10 rounded-lg flex items-center justify-center shrink-0 transition-colors" /> : <Copy className="w-3.5 h-3.5 text-foreground/40 hover:text-foreground transition-colors" />}
+                              </button>
+                            </div>
+                            <JsonNode
+                              value={draftConfigs[page.id]}
+                              keysToRender={page.type === 'public' ? getPublicKeys(draftConfigs[page.id]) : getPrivateKeys(draftConfigs[page.id])}
+                              onChange={(val: any) => handleSaveConfig(page.id, val)}
+                              isLast={true}
+                              isGlobalSaving={savingConfigMap[page.id]}
+                              customEnums={{
+                                form: page.type === 'public' ? publicForms : privateForms,
+                                template: page.type === 'public' ? ['none', 'popup_form', 'inline_form']
+                                  : (page.type === 'admin' || page.type === 'shared') ? ['none', 'calendar', 'table', 'board']
+                                    : ['none', 'calendar', 'table', 'board', 'popup_form', 'inline_form'],
+                                action: ['save_Info', 'form'],
+                                defaultTimeFormat: ['12h', '24h'],
+                                defaultView: ['calendar', 'board'],
+                                buttonStyle: ['primary', 'secondary'],
+                                buttonAction: ['save_info'],
+                                viewsButtonStyle: ['primary', 'secondary'],
+                                buttonStorageStyle: ['primary', 'secondary'],
+                                buttonStorageAction: ['upload_file']
+                              }}
+                              customExplanations={{
+                                tabName: "Defines the tab label in the dashboard navigation.",
+                                iconName: "Visit https://iconoir.com/, find an icon, and paste its exact name (e.g. 'learning', 'server', 'cloud-upload').",
+                                route: "The URL path for this tab (e.g. '/my-tab'). Must start with /.",
+                                template: "Page layout type. 'none' gives you a freeform dashboard with add/upload buttons.",
+                                form: "Which form to display. Only applies to popup_form or inline_form templates. Go to /forms to edit forms.",
+                                tabTitle: "The heading that appears at the top of the page content area.",
+                                showPrompt: "Shows the developer AI prompt copy button in the header.",
+                                showButton: "Toggles the + add record button in the header.",
+                                buttonStyle: "Visual style of the add button: 'primary' (accent) or 'secondary' (subtle).",
+                                buttonText: "Label on the add button. Use '+' for a minimal icon-only button.",
+                                buttonAction: "'save_info' saves a name + note record to the tab's Firestore collection.",
+                                storage: "Enables the file upload button for this tab.",
+                                buttonStorageIcon: "Icon name from https://iconoir.com/ for the upload button (e.g. 'upload', 'cloud-upload').",
+                                buttonStorageText: "Label next to the upload icon. Leave empty for icon-only.",
+                                buttonStorageStyle: "'primary' or 'secondary' visual style for the upload button.",
+                                buttonStorageAction: page.type === 'admin'
+                                  ? "'upload_file' uploads to admin_files/ in Storage and mirrors metadata to admin_files collection (Drive > Admin)."
+                                  : page.type === 'shared'
+                                    ? "'upload_file' uploads to mem_files/ in Storage and mirrors metadata to mem_files collection (Drive > Shared)."
+                                    : "'upload_file' uploads to user_files/ in Storage and mirrors metadata to user_files collection (Drive > Private).",
+                                defaultView: "Starting view: 'calendar' (month grid) or 'board' (event list). Users can switch between them.",
+                                defaultTimeFormat: "12h or 24h time format. Users can toggle this in the toolbar.",
+                                showViewsButton: "Show the calendar/board view toggle button in the toolbar.",
+                                viewsButtonStyle: "'primary' or 'secondary' visual style for the view toggle.",
+                                showExportButton: "Show the CSV export/download button in the table toolbar.",
+                                exportButtonIcon: "Icon name from https://iconoir.com/ for the export button (e.g. 'download-square', 'import').",
+                                keyName: "Label for the key/title field in board items (e.g. 'Task', 'Name').",
+                                valueName: "Label for the value/description field in board items (e.g. 'Notes', 'Details').",
+                              }}
+                              hideInnerLoader={true}
+                            />
+                          </div>
+                        </motion.div>
+                      )}
+                    </AnimatePresence>
+                  </div>
+                );
+              };
+
+              return (
+                <motion.div
+                  key={section.id}
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  className="flex flex-col relative"
+                >
+                  <div className="flex items-center gap-3 mb-2 border-b border-[var(--panel-border)]/50 pb-4">
+                    <div className="w-8 h-8 rounded-xl glass-panel border border-[var(--panel-border)] flex items-center justify-center -ml-1 shadow-sm">
+                      <Icon className="w-4 h-4 text-accent" />
+                    </div>
+                    <h2 className="text-xl font-extrabold tracking-tight text-foreground">{section.title}</h2>
+                  </div>
+                  <p className="text-[13px] leading-relaxed text-foreground/50 font-medium max-w-3xl mb-4 ml-[2px]">
+                    {section.description}
+                  </p>
+
+                  {sectionPages.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center py-8 opacity-40 glass-panel rounded-2xl border border-[var(--panel-border)]/50 border-dashed">
+                      <Layers className="w-5 h-5 mb-2" />
+                      <p className="text-[12px] font-bold">This section is currently empty.</p>
+                    </div>
+                  ) : (
+                    <div className="flex flex-col gap-4">
+                      {activePages.map((page) => {
+                        const orgIdx = sectionPages.findIndex(p => p.id === page.id);
+                        return renderPage(page, orgIdx, false);
+                      })}
+
+                      {hiddenPages.length > 0 && (
+                        <details className="mt-4 group/details">
+                          <summary className="text-[11px] font-bold uppercase tracking-wider text-foreground/40 cursor-pointer list-none flex items-center gap-2 select-none hover:text-foreground/70 transition-colors w-fit pb-1 ml-1 outline-none">
+                            <ChevronDown className="w-3.5 h-3.5 group-open/details:-rotate-180 transition-transform" />
+                            Hidden pages ({hiddenPages.length})
+                          </summary>
+                          <div className="flex flex-col gap-4 mt-4">
+                            {hiddenPages.map((page) => {
+                              const orgIdx = sectionPages.findIndex(p => p.id === page.id);
+                              return renderPage(page, orgIdx, true);
+                            })}
+                          </div>
+                        </details>
+                      )}
+                    </div>
+                  )}
+
+                  {idx < sections.length - 1 && (
+                    <div className="w-full border-t border-[var(--panel-border)]/70 my-10" />
+                  )}
+                </motion.div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+      <ConfirmModal
+        isOpen={showResetAllConfirm}
+        onCancel={() => setShowResetAllConfirm(false)}
+        onConfirm={handleResetAllDefaults}
+        title="Reset System Pages"
+        message="Are you sure you want to reset all system page configurations? Custom pages and their order will remain intact."
+        confirmText="Reset"
+        isProcessing={isResettingAll}
+      />
+      <ConfirmModal
+        isOpen={!!deleteConfirmId}
+        onCancel={() => setDeleteConfirmId(null)}
+        onConfirm={confirmDeletePage}
+        title="Delete Page"
+        message={`Are you sure you want to delete this page? This action cannot be undone and will remove all associated configurations.`}
+        confirmText="Remove Page"
+        isProcessing={isDeleting}
+      />
+    </main>
+  );
+}