firebase-os 1.1.3 → 1.1.5

package/src/pages/FormsAdmin.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 { FormsAdmin } from './FormsAdmin';
+
+// 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('FormsAdmin 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 */}
+              <FormsAdmin />
+            </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/FormsAdmin.tsx

@@ -0,0 +1,459 @@
+import { useState, useEffect } from 'react';
+import { useAuth } from '../lib/AuthContext';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { DashboardNav } from '../components/DashboardNav';
+import { motion, AnimatePresence } from 'framer-motion';
+import { FormInput, Plus, Trash2, Save, Loader2, Edit2, AlertTriangle, Eye, EyeOff, CheckCircle2, Copy, RotateCcw } from 'lucide-react';
+import { Button } from '../components/Button';
+import { db } from '../lib/firebase';
+import { doc, getDocs, collection, setDoc, deleteDoc } from 'firebase/firestore';
+import { defaultForms, type FormConfig } from '../configs/forms';
+import { JsonNode } from './ThemeAdmin';
+import { ConfirmModal } from '../components/ConfirmModal';
+import { ContactPopup } from '../components/ContactPopup';
+import { pubFormConfig } from '../configs/forms/pubForm.config';
+import { userFormConfig } from '../configs/forms/userForm.config';
+
+const Toggle = ({ enabled, onChange, disabled, className = '' }: { enabled: boolean, onChange: (val: boolean) => void, disabled?: boolean, className?: string }) => (
+  <button 
+    disabled={disabled}
+    onClick={(e) => { e.stopPropagation(); onChange(!enabled); }}
+    title={enabled ? "Form Active" : "Form 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>
+);
+
+export function FormsAdmin() {
+  const { userRole } = useAuth();
+  const navigate = useNavigate();
+  const location = useLocation();
+  
+  const [forms, setForms] = useState<Record<string, FormConfig>>({});
+  const [loading, setLoading] = useState(true);
+  const [savingKeys, setSavingKeys] = useState<Record<string, boolean>>({});
+  
+
+  const [previewForm, setPreviewForm] = useState<any | null>(null);
+
+  const [expandedForms, setExpandedForms] = useState<Record<string, boolean>>({});
+  const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  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);
+  };
+
+  useEffect(() => {
+    fetchForms();
+  }, []);
+
+
+
+  const fetchForms = async () => {
+    try {
+      const snap = await getDocs(collection(db, 'sys_forms'));
+      const activeForms: Record<string, FormConfig> = {};
+      
+      snap.forEach(doc => {
+        if (doc.id !== 'pubForm' && doc.id !== 'userForm') {
+          const data = doc.data() as any;
+          if (!data._uiKey) data._uiKey = Math.random().toString(36).substring(7);
+          activeForms[doc.id] = data as FormConfig;
+        }
+      });
+
+      // Clean up templates if they linger in the db
+      try {
+        await deleteDoc(doc(db, 'sys_forms', 'pubForm'));
+        await deleteDoc(doc(db, 'sys_forms', 'userForm'));
+      } catch (e) {}
+
+      // Ensure system core forms exist identically to configurations
+      for (const [id, f] of Object.entries(defaultForms)) {
+        if (!activeForms[id]) {
+          await setDoc(doc(db, 'sys_forms', id), f);
+          const data = { ...f } as any;
+          data._uiKey = Math.random().toString(36).substring(7);
+          activeForms[id] = data as FormConfig;
+        } else {
+           // Additionally ensure properties aren't completely wiped if someone accidentally broke fields array
+           if (!activeForms[id].fields || activeForms[id].fields.length === 0) {
+               const defaultF = defaultForms[id];
+               activeForms[id].fields = defaultF.fields || [];
+               await setDoc(doc(db, 'sys_forms', id), activeForms[id]);
+           }
+        }
+      }
+
+      // Sync URL expansion before revealing the list — avoids a second render/reposition
+      const pathId = window.location.pathname.split('/forms/')[1]?.split('/')[0];
+      if (pathId && activeForms[pathId]) {
+        setExpandedForms({ [pathId]: true });
+      }
+      setForms(activeForms);
+    } catch (err) {
+      console.error('Failed to load forms:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleUpdateForm = async (formId: string, newValue: FormConfig) => {
+    let guardedValue = { ...newValue } as any;
+    if ((forms[formId] as any)?._uiKey) {
+        guardedValue._uiKey = (forms[formId] as any)._uiKey;
+    }
+
+    if (formId === 'contact') {
+       guardedValue.systemName = 'contact';
+       guardedValue.formType = 'public';
+       guardedValue.submitPage = 'submissions';
+    } else if (formId === 'support') {
+       guardedValue.systemName = 'support';
+       guardedValue.formType = 'private';
+       guardedValue.submitPage = 'requests';
+    }
+
+    const targetId = guardedValue.systemName || formId;
+    const isIdMutated = targetId !== formId && targetId.trim() !== '';
+
+    if (isIdMutated) {
+      setForms(prev => {
+        const payload: Record<string, FormConfig> = {};
+        for (const k of Object.keys(prev)) {
+          if (k === formId) {
+             payload[targetId] = guardedValue;
+          } else {
+             payload[k] = prev[k];
+          }
+        }
+        return payload;
+      });
+
+      if (expandedForms[formId]) {
+        setExpandedForms(prev => {
+           const expandedPayload: Record<string, boolean> = {};
+           for (const k of Object.keys(prev)) {
+              if (k === formId) {
+                 expandedPayload[targetId] = prev[k];
+              } else {
+                 expandedPayload[k] = prev[k];
+              }
+           }
+           return expandedPayload;
+        });
+      }
+
+      setSavingKeys(prev => ({ ...prev, [targetId]: true }));
+      try {
+        await setDoc(doc(db, 'sys_forms', targetId), guardedValue);
+        await deleteDoc(doc(db, 'sys_forms', formId));
+      } catch (err) {
+        console.error('Failed to migrate form map ID:', err);
+      } finally {
+        setTimeout(() => {
+          setSavingKeys(prev => ({ ...prev, [targetId]: false }));
+        }, 500);
+      }
+    } else {
+      setForms(prev => ({ ...prev, [formId]: guardedValue }));
+      
+      setSavingKeys(prev => ({ ...prev, [formId]: true }));
+      try {
+        await setDoc(doc(db, 'sys_forms', formId), guardedValue);
+      } catch (err) {
+        console.error('Failed to save form:', err);
+      } finally {
+        setTimeout(() => {
+          setSavingKeys(prev => ({ ...prev, [formId]: false }));
+        }, 500);
+      }
+    }
+  };
+
+  const toggleFormVisibility = (id: string, currentEnabled: boolean) => {
+    const config = forms[id];
+    handleUpdateForm(id, { ...config, enabled: !currentEnabled });
+  };
+
+  const [addingForm, setAddingForm] = useState(false);
+
+  const handleAddNewForm = async () => {
+    if (addingForm) return;
+    setAddingForm(true);
+
+    const formattedId = `new_form_${Date.now().toString().slice(-4)}`;
+    const newForm: FormConfig = {
+      title: 'New Custom Form',
+      systemName: formattedId,
+      formType: 'public',
+      submitPage: 'submissions',
+      redirectTo: '',
+      submitText: 'Submit',
+      fields: [],
+      enabled: true,
+      _uiKey: Math.random().toString(36).substring(7)
+    } as any;
+
+    try {
+      setSavingKeys(prev => ({ ...prev, [formattedId]: true }));
+      await setDoc(doc(db, 'sys_forms', formattedId), newForm);
+      setForms(prev => ({ [formattedId]: newForm, ...prev }));
+      setExpandedForms(prev => ({ [formattedId]: true, ...prev }));
+      navigate(`/forms/${formattedId}`);
+    } catch (err) {
+      console.error("Failed to create form", err);
+    } finally {
+      setSavingKeys(prev => ({ ...prev, [formattedId]: false }));
+      setAddingForm(false);
+    }
+  };
+
+  const handleDeleteForm = async (formId: string) => {
+    if (formId === 'contact' || formId === 'support') return;
+    setIsDeleting(true);
+    try {
+      await deleteDoc(doc(db, 'sys_forms', formId));
+      setForms(prev => {
+        const next = { ...prev };
+        delete next[formId];
+        return next;
+      });
+      navigate('/forms');
+    } catch (err) {
+      console.error('Failed to delete form', err);
+    } finally {
+      setIsDeleting(false);
+      setDeleteConfirm(null);
+    }
+  };
+
+  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">
+           <AlertTriangle className="w-12 h-12 text-red-500 mb-4" />
+           <h2 className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-br from-red-400 to-red-600">Access Restricted</h2>
+           <p className="text-foreground/60 max-w-sm text-center mt-2 font-medium leading-relaxed">
+             This area is exclusively for system administrators.
+           </p>
+        </div>
+      </main>
+    );
+  }
+
+  const toggleExpand = (id: string) => {
+    setExpandedForms(prev => {
+      const newState = { ...prev, [id]: !prev[id] };
+      if (newState[id]) {
+        window.history.replaceState(null, '', `/forms/${id}`);
+      } else {
+        const remaining = Object.keys(newState).filter(k => newState[k]);
+        if (remaining.length > 0) {
+          window.history.replaceState(null, '', `/forms/${remaining[0]}`);
+        } else {
+          window.history.replaceState(null, '', `/forms`);
+        }
+      }
+      return newState;
+    });
+  };
+
+  const openFormId = Object.keys(expandedForms).find(k => expandedForms[k]);
+
+  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-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">
+            Forms
+          </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" />
+            /forms{openFormId ? `/${openFormId}` : ''}
+          </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 bg-background/50">
+             <div>
+                <h2 className="text-xl font-extrabold text-foreground tracking-tight">Custom Forms</h2>
+                <p className="text-[14px] font-medium text-foreground/60 mt-2 leading-relaxed">
+                  This is the central page where you configure and manage your application's forms. Easily add and customize the fields for your users.
+                </p>
+             </div>
+            
+            <div className="relative z-50 shrink-0 w-full md:w-auto flex justify-end">
+              <Button 
+                variant="secondary"
+                onClick={handleAddNewForm} 
+                title="Add Custom Form" 
+                disabled={addingForm}
+                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"
+              >
+                {addingForm ? <Loader2 className="w-4 h-4 text-foreground/60 animate-spin" /> : <Plus className="w-4 h-4 text-foreground/60 group-hover:text-foreground transition-colors" />}
+              </Button>
+            </div>
+          </div>
+
+          <div className="p-6 md:p-8 flex flex-col gap-4 overflow-y-auto">
+             {loading ? (
+                  <div className="flex items-center justify-center p-12 glass-panel rounded-3xl border border-[var(--panel-border)]">
+                     <Loader2 className="w-6 h-6 animate-spin text-accent" />
+                  </div>
+             ) : Object.keys(forms).length === 0 ? (
+                  <div className="flex flex-col items-center justify-center p-12 glass-panel rounded-3xl border border-[var(--panel-border)] border-dashed opacity-50">
+                    <FormInput className="w-6 h-6 mb-3 text-foreground/40" />
+                    <p className="text-[13px] font-bold">No forms currently configured.</p>
+                  </div>
+             ) : (
+                  <AnimatePresence>
+                   {Object.entries(forms).map(([id, config]) => {
+                     const isExpanded = expandedForms[id];
+                     const isSaving = savingKeys[id];
+
+                     return (
+                       <motion.div 
+                         key={(config as any)._uiKey || id}
+                         initial={false}
+                         animate={{ opacity: 1, y: 0 }}
+                         exit={{ opacity: 0, y: -10 }}
+                         onClick={() => toggleExpand(id)}
+                         className={`group flex flex-col p-3 px-4 glass-panel border transition-all rounded-2xl hover:shadow-sm cursor-pointer hover:border-accent/40 ${isExpanded ? 'border-[var(--panel-border)] bg-background/50' : 'border-transparent hover:border-[var(--panel-border)]'} flex-shrink-0 ${config.enabled === false ? 'opacity-40 grayscale bg-foreground/[0.01] border-[var(--panel-border)]/50' : ''}`}
+                       >
+                         <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between w-full">
+                           <div className="flex flex-col gap-1 w-full sm:w-auto pr-4">
+                               <div className="flex items-center gap-2">
+                                 <h3 className="text-[14px] font-bold text-foreground break-words ml-1 leading-snug">{config.title || "Untitled Form"}</h3>
+                                 {isSaving && <Loader2 className="w-3 h-3 animate-spin text-accent ml-2 shrink-0" />}
+                               </div>
+                               <div className="flex items-center gap-2 mt-1.5 ml-1">
+                                <span className="text-[10px] font-bold uppercase tracking-widest border border-[var(--panel-border)] bg-foreground/5 text-foreground/60 px-2 py-0.5 rounded-md">{config.systemName || id}</span>
+                                <span className={`text-[10px] font-bold uppercase tracking-widest border px-2 py-0.5 rounded-md shrink-0 ${config.formType === 'private' ? 'text-blue-500 bg-blue-500/10 border-blue-500/20' : 'text-green-500 bg-green-500/10 border-green-500/20'}`}>
+                                  {config.formType || 'public'}
+                                </span>
+                              </div>
+                            </div>
+
+                            <div className="flex items-center gap-4 w-full sm:w-auto justify-end mt-2 sm:mt-0 shrink-0">
+                              <button onClick={(e) => { e.stopPropagation(); setPreviewForm(config); }} className="p-1.5 hover:bg-accent/10 text-foreground/40 hover:text-accent transition-colors rounded-lg flex items-center justify-center mr-2" title="Preview Form">
+                                <Eye className="w-4 h-4" />
+                              </button>
+                              {(id !== 'contact' && id !== 'support') ? (
+                                <button 
+                                  onClick={(e) => { e.stopPropagation(); setDeleteConfirm(id); }}
+                                  className="p-1.5 hover:bg-red-500/10 text-foreground/30 hover:text-red-500 transition-colors rounded-lg opacity-0 group-hover:opacity-100 flex items-center justify-center mr-2" 
+                                  title="Delete Form"
+                                >
+                                  <Trash2 className="w-4 h-4" />
+                                </button>
+                              ) : (
+                                <div className="w-7 mr-2 shrink-0" />
+                              )}
+                              <div className={`p-1.5 transition-transform duration-300 text-foreground/40 ${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>
+                          </div>
+
+                         <AnimatePresence>
+                           {isExpanded && (
+                             <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"
+                               onClick={e => e.stopPropagation()} // Prevent folding when interacting with JSON
+                             >
+                                <div className="flex flex-col font-mono text-[13px] leading-relaxed relative bg-background/50 p-4 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) => { e.stopPropagation(); handleUpdateForm(id, (defaultForms[id] || defaultForms['contact']) as FormConfig); }} 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">
+                                        {isSaving ? <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(id, config); }} 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 === id ? <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={{
+                                       systemName: config.systemName || id,
+                                       formType: config.formType || 'public',
+                                       submitPage: config.submitPage || (config.formType === 'private' ? 'requests' : 'submissions'),
+                                       redirectTo: config.redirectTo || '',
+                                       title: config.title || '',
+                                       buttonName: config.buttonName || config.submitText || '',
+                                       fields: config.fields || []
+                                     }} 
+                                     keysToRender={['systemName', 'formType', 'submitPage', 'redirectTo', 'title', 'buttonName', 'fields']}
+                                     meta={{ formType: config.formType || 'public' }}
+                                     onChange={(val: any) => {
+                                        // Interconnect formType and submitPage
+                                        if (val.formType !== config.formType) {
+                                            val.submitPage = val.formType === 'public' ? 'submissions' : 'requests';
+                                        } else if (val.submitPage !== config.submitPage) {
+                                            val.formType = val.submitPage === 'requests' ? 'private' : 'public';
+                                        }
+                                        handleUpdateForm(id, {...config, ...val, submitText: val.buttonName});
+                                     }}
+                                     isLast={true}
+                                     isGlobalSaving={isSaving}
+                                     disabledKeys={(id === 'contact' || id === 'support') ? ['systemName', 'formType', 'submitPage'] : []}
+                                     customEnums={{ type: ['text', 'email', 'tel', 'textarea', 'number', 'select', 'checkbox', 'currency', 'age'] }}
+                                     customExplanations={{
+                                        formType: id === 'contact' 
+                                          ? "Public means its for not signed in users. Private is disabled for contact so don't allow the user to change it." 
+                                          : (id === 'support' ? "This means that the form is available to signed in users only." : "Public means it's for non-signed in users."),
+                                        submitPage: id === 'contact' 
+                                          ? "Means the form submissions go to this folder. User can't change that since it's directly linked. Public is tied to submissions." 
+                                          : (id === 'support' ? "Can't change since all private forms go there." : "Where to route data submissions."),
+                                        redirectTo: "If not added form will just show a success message. If added, in 30 seconds after success user is redirected."
+                                     }}
+                                  />
+                               </div>
+                             </motion.div>
+                           )}
+                         </AnimatePresence>
+                       </motion.div>
+                     );
+                   })}
+                 </AnimatePresence>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <ConfirmModal
+        isOpen={!!deleteConfirm}
+        onCancel={() => setDeleteConfirm(null)}
+        onConfirm={() => {
+          if (deleteConfirm) handleDeleteForm(deleteConfirm);
+        }}
+        title="Delete Form"
+        message={`Are you sure you want to permanently delete "${deleteConfirm}"? This action cannot be reversed.`}
+        confirmText="Delete form"
+        isProcessing={isDeleting}
+      />
+
+      {previewForm && (
+        <ContactPopup 
+          formConfig={previewForm} 
+          onClose={() => setPreviewForm(null)} 
+        />
+      )}
+
+    </main>
+  );
+}

package/src/pages/Home.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 { Home } from './Home';
+
+// 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('Home 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 */}
+              <Home />
+            </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();
+  });
+});