firebase-os 1.1.4 → 1.1.6

package/src/pages/ResetPassword.tsx

@@ -0,0 +1,92 @@
+import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { motion } from 'framer-motion';
+import { ArrowLeft, KeyRound } from 'lucide-react';
+import { Input } from '../components/Input';
+import { Button } from '../components/Button';
+import { auth } from '../lib/firebase';
+import { sendPasswordResetEmail } from 'firebase/auth';
+
+export function ResetPassword() {
+  const [loading, setLoading] = useState(false);
+  const [msg, setMsg] = useState<string | null>(null);
+  const [timer, setTimer] = useState(0);
+  const [attempts, setAttempts] = useState(0);
+
+  useEffect(() => {
+    let interval: ReturnType<typeof setInterval>;
+    if (timer > 0) {
+      interval = setInterval(() => setTimer(t => t - 1), 1000);
+    }
+    return () => clearInterval(interval);
+  }, [timer]);
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    
+    setLoading(true);
+    setMsg(null);
+
+    const formData = new FormData(e.currentTarget);
+    const email = formData.get('email') as string;
+
+    try {
+      await sendPasswordResetEmail(auth, email);
+    } catch (err: unknown) {
+      console.error(err);
+    } finally {
+      setMsg('If an account exists, a password reset link has been sent. Please check your inbox (and spam folder).');
+      const newAttempts = attempts + 1;
+      setAttempts(newAttempts);
+      setTimer(newAttempts === 1 ? 60 : 120);
+      setLoading(false);
+    }
+  };
+
+  const formatTime = (s: number) => {
+    const mins = Math.floor(s / 60);
+    const secs = s % 60;
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+  };
+
+  return (
+    <div className="flex-1 flex items-center justify-center w-full z-10 px-4 mb-16 mt-6 md:mt-8">
+      <motion.div
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        className="w-full max-w-[480px] p-6 md:p-8 lg:p-10 rounded-3xl glass-panel relative glow-hover shadow-[0_8px_32px_rgba(0,0,0,0.08)] text-center"
+      >
+        <div className="absolute -inset-[1px] bg-gradient-to-br from-[var(--primary-glow)] to-transparent opacity-40 blur-[15px] rounded-3xl -z-10" />
+
+        <div className="w-14 h-14 md:w-16 md:h-16 rounded-2xl glass-panel border border-[var(--panel-border)] flex items-center justify-center mx-auto mb-5 md:mb-6 animate-float shadow-xl">
+          <KeyRound className="w-7 h-7 md:w-8 md:h-8 text-accent opacity-90" />
+        </div>
+
+        <div className="mb-6 text-center">
+          <h3 className="text-2xl md:text-3xl font-extrabold mb-2 md:mb-3 text-foreground tracking-tight">Reset Password</h3>
+          <p className="text-[14px] md:text-[15px] font-medium text-foreground/60 tracking-wide">Enter your email to receive a recovery link.</p>
+        </div>
+
+        {msg && <div className="p-3 md:p-4 mb-5 md:mb-6 text-[13px] md:text-[14px] font-medium text-emerald-400 bg-emerald-500/10 rounded-xl border border-emerald-500/20 max-w-[360px] mx-auto">{msg}</div>}
+
+        <form className="space-y-4 text-left max-w-[360px] mx-auto" onSubmit={handleSubmit}>
+          <Input name="email" label="Work Email" type="email" placeholder="name@company.com" required />
+          
+          <div className="pt-2">
+            <Button type="submit" className={`w-full py-2.5 md:py-3 text-[14px] font-bold tracking-wide rounded-xl md:rounded-xl transition-all ${timer > 0 ? 'bg-foreground/5 text-foreground/40 border border-[var(--panel-border)] shadow-none cursor-not-allowed hover:translate-y-0' : 'hover:-translate-y-0.5'}`} isLoading={loading} disabled={timer > 0}>
+              {timer > 0 ? `Resend link in ${formatTime(timer)}` : attempts > 0 ? 'Resend reset password link' : 'Send Reset Link'}
+            </Button>
+          </div>
+        </form>
+
+        <div className="mt-6 pt-5 border-t border-[var(--panel-border)] space-y-4 text-center">
+          <Link to="/login" className="inline-flex items-center text-[13px] md:text-[14px] text-foreground/70 font-medium hover:text-accent transition-colors tracking-wide">
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            Back to Sign In
+          </Link>
+        </div>
+      </motion.div>
+    </div>
+  );
+}

package/src/pages/Settings.test.tsx

@@ -0,0 +1,98 @@
+// @generated-test
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, act } from '@testing-library/react';
+import { BrowserRouter } from 'react-router-dom';
+import { AuthProvider } from '../lib/AuthContext';
+import { ThemeProvider } from '../lib/ThemeContext';
+import { SettingsTab } from './Settings';
+
+// Global mocks
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+vi.mock('../lib/AuthContext', () => ({
+  AuthProvider: ({ children }: any) => <>{children}</>,
+  useAuth: () => ({ 
+    user: { uid: 'mock-user-123', email: 'test@example.com' }, 
+    userWorkspaces: [], 
+    activeWorkspace: null,
+    activeOrg: null,
+    loading: false
+  })
+}));
+
+vi.mock('../lib/ThemeContext', () => ({
+  ThemeProvider: ({ children }: any) => <>{children}</>,
+  useTheme: () => ({ themeMode: 'light', setThemeMode: vi.fn(), activeConfig: {} })
+}));
+
+vi.mock('firebase/auth', () => ({
+  getAuth: vi.fn(() => ({})),
+  onAuthStateChanged: vi.fn((auth, cb) => { cb({ uid: 'mock-user-123', email: 'test@example.com', getIdToken: vi.fn(() => Promise.resolve('mock-token')) }); return () => {}; })
+}));
+vi.mock('firebase/firestore', () => ({
+  getFirestore: vi.fn(() => ({})),
+  collection: vi.fn(),
+  doc: vi.fn(),
+  setDoc: vi.fn(() => Promise.resolve()),
+  addDoc: vi.fn(() => Promise.resolve()),
+  updateDoc: vi.fn(() => Promise.resolve()),
+  deleteDoc: vi.fn(() => Promise.resolve()),
+  query: vi.fn(),
+  where: vi.fn(),
+  orderBy: vi.fn(),
+  limit: vi.fn(),
+  getDoc: vi.fn(() => Promise.resolve({ exists: () => true, data: () => ({ role: 'super_admin' }) })),
+  getDocs: vi.fn(() => Promise.resolve({ docs: [], forEach: vi.fn() })),
+  onSnapshot: vi.fn((...args: any[]) => {
+    let cb = args[1];
+    if (typeof args[2] === 'function') {
+      cb = args[2];
+    }
+    if (typeof cb === 'function') {
+      cb({docs: [], forEach: vi.fn(), data: () => ({}), exists: () => true});
+    }
+    return () => {};
+  })
+}));
+vi.mock('firebase/storage', () => ({
+  getStorage: vi.fn(() => ({})),
+  ref: vi.fn(),
+  listAll: vi.fn(() => Promise.resolve({ items: [], prefixes: [] })),
+  getDownloadURL: vi.fn(() => Promise.resolve('mock-url')),
+  getMetadata: vi.fn(() => Promise.resolve({ size: 1024, timeCreated: new Date().toISOString() }))
+}));
+
+describe('SettingsTab Component', () => {
+  it('renders without crashing', async () => {
+    // Wrap in standard application providers inside act to process async side effects and prevent warnings
+    await act(async () => {
+      render(
+        <BrowserRouter>
+          <AuthProvider>
+            <ThemeProvider>
+              {/* @ts-ignore */}
+              <SettingsTab />
+            </ThemeProvider>
+          </AuthProvider>
+        </BrowserRouter>
+      );
+      // Wait a tick to flush background state updates
+      await new Promise(resolve => setTimeout(resolve, 0));
+    });
+    
+    // Check if the document has anything rendered without throwing
+    expect(document.body).toBeDefined();
+  });
+});

package/src/pages/Settings.tsx

@@ -0,0 +1,393 @@
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { Menu, ChevronUp, ChevronDown, Eye, EyeOff, Trash2, RotateCcw, Blocks, Loader2 } from 'lucide-react';
+import { DashboardNav } from '../components/DashboardNav';
+import { ConfirmModal } from '../components/ConfirmModal';
+import { db } from '../lib/firebase';
+import { doc, onSnapshot, setDoc, deleteDoc, collection, writeBatch } from 'firebase/firestore';
+import type { OrderItem } from '../configs/pages/tabOrders.config';
+import { parseOrderItems, defaultTabOrder } from '../configs/pages/tabOrders.config';
+import { defaultMenuOrder } from '../configs/pages/menuOrders.config';
+
+// ── Info about each page/tab (labels, paths) ──────────────────────────────
+interface PageInfo {
+    id: string;
+    title: string;
+    path: string;
+    isSystem: boolean;
+    type: string;
+}
+
+// System tab definitions (used to always show these in the list)
+const systemTabIds = ['pages', 'forms', 'drive', 'users', 'theme', 'submissions', 'requests', 'settings', 'profile', 'support'];
+const systemTabTitles: Record<string, string> = {
+    pages: 'Pages', forms: 'Forms', drive: 'Drive', users: 'Users', theme: 'Theme',
+    submissions: 'Submissions', requests: 'Requests', settings: 'Settings',
+    profile: 'Profile', support: 'Request Support'
+};
+
+// IDs that can never be hidden via the eye icon
+const ALWAYS_VISIBLE_PAGES = new Set(['home']);
+const ALWAYS_VISIBLE_TABS  = new Set(['settings']);
+
+export function SettingsTab() {
+    const [activeTab, setActiveTab] = useState<'menu' | 'tabs'>('menu');
+
+    // Info maps (labels / paths from Firestore)
+    const [pageInfoMap, setPageInfoMap] = useState<Record<string, PageInfo>>({});
+    const [tabInfoMap,  setTabInfoMap]  = useState<Record<string, PageInfo>>({});
+
+    // Order arrays stored in sys_configs — these include `hidden`
+    const [pageOrder, setPageOrder] = useState<OrderItem[]>(defaultMenuOrder);
+    const [tabOrder,  setTabOrder]  = useState<OrderItem[]>(defaultTabOrder);
+
+    const [isResetting, setIsResetting] = useState(false);
+
+    // Delete confirm state
+    const [deleteTarget, setDeleteTarget] = useState<{ info: PageInfo; isTab: boolean } | null>(null);
+    const [isDeleting, setIsDeleting] = useState(false);
+
+    useEffect(() => {
+        // ── Public page info ──────────────────────────────────────────
+        const unsubPages = onSnapshot(collection(db, 'sys_pages'), (snap) => {
+            const map: Record<string, PageInfo> = {};
+            snap.forEach(d => {
+                const data = d.data();
+                map[d.id] = {
+                    id: d.id,
+                    title: data.pageName || data.title || d.id,
+                    path: data.route || (d.id === 'home' ? '/' : '/' + d.id),
+                    type: 'public',
+                    isSystem: ['home', 'templates', 'contact', 'setup'].includes(d.id),
+                };
+            });
+            // Ensure system stubs exist even if not in Firestore
+            if (!map['setup'])     map['setup']     = { id: 'setup',     title: 'Setup',     path: '/setup',     type: 'public', isSystem: true };
+            if (!map['templates']) map['templates'] = { id: 'templates', title: 'Templates', path: '/templates', type: 'public', isSystem: true };
+            if (!map['contact'])   map['contact']   = { id: 'contact',   title: 'Contact',   path: '/contact',   type: 'public', isSystem: true };
+            setPageInfoMap(map);
+        });
+
+        // ── Dashboard tab info ────────────────────────────────────────
+        const unsubTabs = onSnapshot(collection(db, 'sys_tabs'), (snap) => {
+            const map: Record<string, PageInfo> = {};
+            snap.forEach(d => {
+                const data = d.data();
+                map[d.id] = {
+                    id: d.id,
+                    title: data.pageName || data.tabName || data.title || systemTabTitles[d.id] || d.id,
+                    path: data.route || '/' + d.id,
+                    type: data.pageType || 'admin',
+                    isSystem: systemTabIds.includes(d.id),
+                };
+            });
+            // Ensure system stubs exist even if not in Firestore
+            systemTabIds.forEach(id => {
+                if (!map[id]) map[id] = { id, title: systemTabTitles[id] || id, path: '/' + id, type: 'admin', isSystem: true };
+            });
+            setTabInfoMap(map);
+        });
+
+        // ── Order & visibility ────────────────────────────────────────
+        const unsubPageOrd = onSnapshot(doc(db, 'sys_configs', 'page_order'), d => {
+            setPageOrder(d.exists() ? parseOrderItems(d.data().order || []) : defaultMenuOrder);
+        });
+        const unsubTabOrd = onSnapshot(doc(db, 'sys_configs', 'tab_order'), d => {
+            setTabOrder(d.exists() ? parseOrderItems(d.data().order || []) : defaultTabOrder);
+        });
+
+        return () => { unsubPages(); unsubTabs(); unsubPageOrd(); unsubTabOrd(); };
+    }, []);
+
+    // ── Toggle visibility: flip `hidden` in the order array ───────────────
+    const handleToggle = async (id: string, isTab: boolean) => {
+        const guards = isTab ? ALWAYS_VISIBLE_TABS : ALWAYS_VISIBLE_PAGES;
+        if (guards.has(id)) return;
+
+        const currentOrder = isTab ? tabOrder : pageOrder;
+        const docId = isTab ? 'tab_order' : 'page_order';
+
+        // Clean up any ghosts
+        const cleanOrder = currentOrder.filter(o => 
+            (isTab ? tabInfoMap : pageInfoMap)[o.id] || 
+            (isTab ? systemTabIds.includes(o.id) : ['home', 'contact'].includes(o.id))
+        );
+
+        // Ensure item exists in order, then flip hidden
+        const inOrder = cleanOrder.some(o => o.id === id);
+        const newOrder: OrderItem[] = inOrder
+            ? cleanOrder.map(o => o.id === id ? { ...o, hidden: !o.hidden } : o)
+            : [...cleanOrder, { id, hidden: true }];
+
+        await setDoc(doc(db, 'sys_configs', docId), { order: newOrder });
+    };
+
+    // ── Delete a custom (non-system) item ────────────────────────────────
+    const handleDelete = (info: PageInfo, isTab: boolean) => {
+        if (info.isSystem) return;
+        setDeleteTarget({ info, isTab });
+    };
+
+    const confirmDelete = async () => {
+        if (!deleteTarget) return;
+        setIsDeleting(true);
+        const coll = deleteTarget.isTab ? 'sys_tabs' : 'sys_pages';
+        const docId = deleteTarget.isTab ? 'tab_order' : 'page_order';
+        const currentOrder = deleteTarget.isTab ? tabOrder : pageOrder;
+
+        try {
+            await deleteDoc(doc(db, coll, deleteTarget.info.id));
+            
+            // Clean from order array
+            const newOrder = currentOrder.filter(o => o.id !== deleteTarget.info.id);
+            await setDoc(doc(db, 'sys_configs', docId), { order: newOrder });
+
+        } catch (e) {
+            console.error('Delete failed', e);
+        }
+        setIsDeleting(false);
+        setDeleteTarget(null);
+    };
+
+    // ── Reorder: move item up/down in the order array ────────────────────
+    const moveOrder = async (isTab: boolean, id: string, direction: 'up' | 'down') => {
+        const currentOrder = isTab ? tabOrder : pageOrder;
+        const infoMap = isTab ? tabInfoMap : pageInfoMap;
+        const docId = isTab ? 'tab_order' : 'page_order';
+
+        // Build complete list: ordered items first, then any not yet in order
+        let items = currentOrder.filter(o => infoMap[o.id] || (isTab ? systemTabIds.includes(o.id) : ['home', 'contact'].includes(o.id)));
+        Object.keys(infoMap).forEach(infoId => {
+            if (!items.some(o => o.id === infoId)) {
+                items.push({ id: infoId, hidden: false });
+            }
+        });
+
+        const idx = items.findIndex(o => o.id === id);
+        if (idx === -1) return;
+
+        // Home always pinned first in menu
+        const minIdx = (!isTab && items[0]?.id === 'home') ? 1 : 0;
+        const newIdx = direction === 'up'
+            ? Math.max(minIdx, idx - 1)
+            : Math.min(items.length - 1, idx + 1);
+        if (idx === newIdx) return;
+
+        const newOrder = [...items];
+        const [moved] = newOrder.splice(idx, 1);
+        newOrder.splice(newIdx, 0, moved);
+
+        await setDoc(doc(db, 'sys_configs', docId), { order: newOrder });
+    };
+
+    // ── Reset: restore defaults but keep custom pages at the FRONT of the list ─
+    const handleRestoreDefaults = async () => {
+        if (isResetting) return;
+        setIsResetting(true);
+        try {
+            // Collect custom (non-default) page/tab IDs from Firestore
+            const defaultPageIds = new Set(defaultMenuOrder.map(o => o.id));
+            const defaultTabIds  = new Set(defaultTabOrder.map(o => o.id));
+
+            // Custom items currently in the order lists that are not in the defaults
+            const customPageItems = pageOrder.filter(o => !defaultPageIds.has(o.id));
+            const customTabItems  = tabOrder.filter(o => !defaultTabIds.has(o.id));
+
+            // Custom items come FIRST, then the default order (all unhidden)
+            const newPageOrder: OrderItem[] = [
+                ...customPageItems.map(o => ({ ...o, hidden: false })),
+                ...defaultMenuOrder,
+            ];
+            const newTabOrder: OrderItem[] = [
+                ...customTabItems.map(o => ({ ...o, hidden: false })),
+                ...defaultTabOrder,
+            ];
+
+            const batch = writeBatch(db);
+            batch.set(doc(db, 'sys_configs', 'page_order'), { order: newPageOrder });
+            batch.set(doc(db, 'sys_configs', 'tab_order'),  { order: newTabOrder });
+            await batch.commit();
+        } finally {
+            setTimeout(() => setIsResetting(false), 600);
+        }
+    };
+
+    // ── Build the display list ────────────────────────────────────────────
+    const buildDisplayList = (isTab: boolean) => {
+        const currentOrder = isTab ? tabOrder : pageOrder;
+        const infoMap = isTab ? tabInfoMap : pageInfoMap;
+
+        // Clean up ghost items so deleted pages instantly vanish
+        const validOrder = currentOrder.filter(o => infoMap[o.id] || (isTab ? systemTabIds.includes(o.id) : ['home', 'contact'].includes(o.id)));
+
+        // Merge order entries with any known IDs not yet in the order
+        const placed = new Set(validOrder.map(o => o.id));
+        const extras: OrderItem[] = Object.keys(infoMap)
+            .filter(id => !placed.has(id))
+            .map(id => ({ id, hidden: false }));
+
+        let display = [...validOrder, ...extras];
+
+        // For menu: pin home at front (but don't show it as a toggle-able item)
+        if (!isTab) {
+            display = display.filter(o => o.id !== 'home');
+        }
+
+        return display;
+    };
+
+    const renderSortList = (isTab: boolean) => {
+        const infoMap = isTab ? tabInfoMap : pageInfoMap;
+        const guards = isTab ? ALWAYS_VISIBLE_TABS : ALWAYS_VISIBLE_PAGES;
+        const display = buildDisplayList(isTab);
+
+        return (
+            <div className="flex flex-col gap-3">
+                {display.map((orderItem, idx) => {
+                    const info = infoMap[orderItem.id];
+                    const title = info?.title || systemTabTitles[orderItem.id] || orderItem.id;
+                    const path  = info?.path  || '/' + orderItem.id;
+                    const isSystem = info?.isSystem ?? systemTabIds.includes(orderItem.id);
+                    const isGuarded = guards.has(orderItem.id);
+
+                    const isFirst = idx === 0;
+                    const isLast  = idx === display.length - 1;
+
+                    return (
+                        <div
+                            key={orderItem.id}
+                            className={`flex items-center justify-between p-4 glass-panel border border-[var(--panel-border)] rounded-2xl transition-all duration-200 ${orderItem.hidden ? 'opacity-40' : 'opacity-100'}`}
+                        >
+                            <div className="flex items-center gap-4">
+                                <div className="flex flex-col items-center w-6">
+                                    <button
+                                        disabled={isFirst}
+                                        onClick={() => moveOrder(isTab, orderItem.id, 'up')}
+                                        className="text-foreground/40 hover:text-accent disabled:opacity-20"
+                                    >
+                                        <ChevronUp className="w-4 h-4" />
+                                    </button>
+                                    <button
+                                        disabled={isLast}
+                                        onClick={() => moveOrder(isTab, orderItem.id, 'down')}
+                                        className="text-foreground/40 hover:text-accent disabled:opacity-20 -mt-1"
+                                    >
+                                        <ChevronDown className="w-4 h-4" />
+                                    </button>
+                                </div>
+                                <div className="flex flex-col">
+                                    <span className="font-bold text-foreground text-[14px]">{title}</span>
+                                    <span className="text-[12px] font-mono text-foreground/50">{path}</span>
+                                </div>
+                            </div>
+
+                            <div className="flex items-center gap-3">
+                                {!isGuarded && (
+                                    <button
+                                        onClick={() => handleToggle(orderItem.id, isTab)}
+                                        title={orderItem.hidden ? 'Show this page' : 'Hide this page'}
+                                        className={`p-2 rounded-xl transition-colors ${orderItem.hidden ? 'hover:bg-foreground/5 text-foreground/40' : 'hover:bg-accent/10 text-accent'}`}
+                                    >
+                                        {orderItem.hidden ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                                    </button>
+                                )}
+                                {info && !isSystem && (
+                                    <button
+                                        onClick={() => handleDelete(info, isTab)}
+                                        className="p-2 rounded-xl hover:bg-red-500/10 text-foreground/40 hover:text-red-500 transition-colors"
+                                    >
+                                        <Trash2 className="w-4 h-4" />
+                                    </button>
+                                )}
+                            </div>
+                        </div>
+                    );
+                })}
+            </div>
+        );
+    };
+
+    return (
+        <>
+        <main className="flex-1 w-full max-w-7xl mx-auto p-4 md:p-8 z-10 flex flex-col">
+            <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="mb-8">
+                <h1 className="w-fit inline-block text-3xl md:text-4xl lg:text-5xl font-extrabold tracking-tight mb-3 text-gradient mt-1">
+                    Settings
+                </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" />
+                    /settings
+                </div>
+            </motion.div>
+
+            <div className="flex flex-col gap-6 animate-in fade-in duration-500">
+                <div className="flex justify-start">
+                    <DashboardNav />
+                </div>
+
+                <div className="glass-panel rounded-3xl border border-[var(--panel-border)] shadow-sm grid grid-cols-1 md:grid-cols-3 min-h-[500px]">
+                    {/* Sidebar */}
+                    <div className="md:col-span-1 border-r md:border-r-[var(--panel-border)] border-b md:border-b-0 border-[var(--panel-border)] flex flex-col bg-black/5 dark:bg-white/5 rounded-t-3xl md:rounded-tr-none md:rounded-l-3xl">
+                        <div className="p-6 pb-4 font-bold text-[13px] text-foreground/40 uppercase tracking-widest">Configuration</div>
+                        <div className="flex-1 overflow-y-auto px-4 pb-4 space-y-1">
+                            <button
+                                onClick={() => setActiveTab('menu')}
+                                className={`w-full p-3 rounded-xl transition-all flex items-center gap-3 cursor-pointer ${activeTab === 'menu' ? 'bg-accent/10 text-accent font-bold' : 'bg-transparent text-foreground/70 hover:bg-foreground/5 hover:text-foreground font-medium'}`}
+                            >
+                                <Menu className="w-4 h-4 shrink-0" />
+                                <span className="text-[14px]">Menu Settings</span>
+                            </button>
+                            <button
+                                onClick={() => setActiveTab('tabs')}
+                                className={`w-full p-3 rounded-xl transition-all flex items-center gap-3 cursor-pointer ${activeTab === 'tabs' ? 'bg-accent/10 text-accent font-bold' : 'bg-transparent text-foreground/70 hover:bg-foreground/5 hover:text-foreground font-medium'}`}
+                            >
+                                <Blocks className="w-4 h-4 shrink-0" />
+                                <span className="text-[14px]">Tabs Settings</span>
+                            </button>
+                        </div>
+                    </div>
+
+                    {/* Content */}
+                    <div className="md:col-span-2 flex flex-col p-6 md:p-10">
+                        <div className="animate-in fade-in duration-300 w-full">
+                            <div className="flex flex-col md:flex-row md:items-start justify-between gap-4 mb-8">
+                                <div className="flex flex-col">
+                                    <h3 className="text-2xl md:text-3xl font-extrabold text-foreground tracking-tighter mb-2">
+                                        {activeTab === 'menu' ? 'Menu Settings' : 'Dashboard Tabs'}
+                                    </h3>
+                                    <p className="text-[14px] text-foreground/60 max-w-xl">
+                                        {activeTab === 'menu'
+                                            ? 'Reorder or hide public menu items. Changes take effect instantly for all visitors.'
+                                            : 'Manage visibility and order of all internal dashboard tabs.'}
+                                    </p>
+                                </div>
+                                <button
+                                    onClick={handleRestoreDefaults}
+                                    disabled={isResetting}
+                                    title="Reset order and visibility to defaults"
+                                    className="p-3 h-fit bg-foreground/5 hover:bg-foreground/10 text-foreground/70 active:scale-95 disabled:opacity-50 disabled:pointer-events-none rounded-xl transition-all font-bold text-[13px] flex items-center justify-center border border-transparent hover:border-[var(--panel-border)] shadow-sm shrink-0"
+                                >
+                                    {isResetting
+                                        ? <Loader2 className="w-5 h-5 text-foreground/50 animate-spin" />
+                                        : <RotateCcw className="w-5 h-5 text-foreground/50" />}
+                                </button>
+                            </div>
+
+                            {renderSortList(activeTab === 'tabs')}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+        <ConfirmModal
+            isOpen={!!deleteTarget}
+            onCancel={() => setDeleteTarget(null)}
+            onConfirm={confirmDelete}
+            title="Delete Item"
+            message={`Are you sure you want to delete "${deleteTarget?.info?.title ?? ''}"? This cannot be undone.`}
+            confirmText="Delete"
+            isProcessing={isDeleting}
+        />
+        </>
+    );
+}