firebase-os 1.1.4 → 1.1.6

package/src/pages/DynamicPage.tsx

@@ -0,0 +1,237 @@
+import React, { useEffect, useState } from 'react';
+import { Navigate, useLocation } from 'react-router-dom';
+import { collection, getDocs, doc, getDoc } from 'firebase/firestore';
+import { db } from '../lib/firebase';
+import { ContactPopup } from '../components/ContactPopup';
+import { useAuth } from '../lib/AuthContext';
+import { useConfig } from '../lib/ConfigContext';
+import { PublicPageTemplate } from '../templates/PublicPageTemplate';
+import { PrivatePageTemplate } from '../templates/PrivatePageTemplate';
+import { AdminPageTemplate } from '../templates/AdminPageTemplate';
+import { SharedPageTemplate } from '../templates/SharedPageTemplate';
+import { TemplateBoard } from '../templates/TemplateBoard';
+import { TemplateTable } from '../templates/TemplateTable';
+import { TemplateCalendar } from '../templates/TemplateCalendar';
+import { DashboardNav } from '../components/DashboardNav';
+import { Loader2 } from 'lucide-react';
+
+export function DynamicPage() {
+  const location = useLocation();
+  const { user } = useAuth();
+  const globalConfig = useConfig();
+  const [config, setConfig] = useState<any | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchConfigs = async () => {
+      setLoading(true);
+      try {
+        const [pubConfigsSnap, pubTabsSnap] = await Promise.all([
+          getDocs(collection(db, 'sys_pages')),
+          getDocs(collection(db, 'sys_tabs'))
+        ]);
+        
+        let matchedConfig: any = null;
+        let matchedId: string | null = null;
+
+        const checkSnap = (snap: any, isPrivate: boolean) => {
+          snap.forEach((docSnap: any) => {
+             const d = docSnap.data();
+             let route = d.route;
+             if (route && !route.startsWith('/')) route = '/' + route;
+             
+             // System Pages have strict document IDs tracking their canonical path (e.g. 'contact')
+             const pathMatchesSystemId = ('/' + docSnap.id) === location.pathname;
+
+             if (route === location.pathname || pathMatchesSystemId) {
+                matchedConfig = { ...d, isPrivate, isAdmin: d.pageType === 'admin', isShared: d.pageType === 'shared' };
+                matchedId = docSnap.id;
+             }
+          });
+        };
+
+        checkSnap(pubConfigsSnap, false);
+        if (!matchedConfig) {
+          checkSnap(pubTabsSnap, true);
+        }
+
+        // Fallbacks for core pages if not customized yet
+        if (!matchedConfig) {
+            if (location.pathname === '/contact') {
+                matchedConfig = { route: '/contact', template: 'popup_form', form: 'contact' };
+                matchedId = 'contact';
+            } else if (location.pathname === '/support') {
+                matchedConfig = { route: '/support', template: 'popup_form', form: 'support' };
+                matchedId = 'support';
+            }
+        }
+
+        if (matchedConfig) {
+          if ((matchedId === 'contact' || matchedId === 'support') && !matchedConfig.form) {
+             matchedConfig.form = matchedId;
+          }
+          matchedConfig.pageId = matchedId;
+
+          // Hydrate form config immediately to prevent secondary loaders flashing on transitions
+          if (matchedConfig.form) {
+             const formDoc = await getDoc(doc(db, 'sys_forms', matchedConfig.form));
+             if (formDoc.exists()) {
+                 matchedConfig.formConfigOverride = { ...formDoc.data(), id: formDoc.id };
+             } else {
+                 if (matchedConfig.form === 'contact') {
+                     const { contactFormConfig } = await import('../configs/forms/contactForm.config');
+                     matchedConfig.formConfigOverride = contactFormConfig;
+                 } else if (matchedConfig.form === 'support') {
+                     const { supportFormConfig } = await import('../configs/forms/supportForm.config');
+                     matchedConfig.formConfigOverride = supportFormConfig;
+                 }
+             }
+          }
+
+          // Update Document Title matching pageName/tabName globally
+          const newTitle = matchedConfig.pageName || matchedConfig.tabName || matchedConfig.title;
+          if (newTitle) {
+              document.title = newTitle;
+          }
+          
+          setConfig(matchedConfig);
+        } else {
+          setConfig('not-found');
+        }
+      } catch (err) {
+        setConfig('not-found');
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchConfigs();
+  }, [location.pathname]);
+
+  const [showLoader, setShowLoader] = useState(false);
+
+  useEffect(() => {
+    let timer: any;
+    if (loading) timer = setTimeout(() => setShowLoader(true), 150);
+    else setShowLoader(false);
+    return () => clearTimeout(timer);
+  }, [loading]);
+
+  if (loading) {
+    if (!showLoader) return null;
+    if (user) {
+      return (
+        <main className="flex-1 w-full max-w-7xl mx-auto p-4 md:p-8 z-10 flex flex-col">
+          <div className="mb-6">
+            <div className="h-10 w-56 rounded-xl bg-foreground/5 animate-pulse mt-1" />
+            <div className="h-3 w-24 rounded bg-foreground/5 animate-pulse mt-3" />
+          </div>
+          <div className="flex flex-col gap-6 flex-1 pb-16">
+            <DashboardNav />
+            <div className="flex-1 glass-panel border border-[var(--panel-border)] rounded-3xl flex items-center justify-center min-h-[400px] bg-background shadow-2xl">
+              <Loader2 className="w-6 h-6 animate-spin text-accent" />
+            </div>
+          </div>
+        </main>
+      );
+    }
+    return (
+      <div className="flex-1 flex items-center justify-center min-h-[60vh] z-10">
+        <Loader2 className="w-6 h-6 animate-spin text-accent" />
+      </div>
+    );
+  }
+
+  if (config === 'not-found') {
+    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 text-center">
+          <div className="w-16 h-16 bg-red-500/10 text-red-500 rounded-full flex items-center justify-center mb-6">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="w-8 h-8"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
+          </div>
+          <h2 className="text-3xl font-bold mb-3 text-foreground">Page Not Found</h2>
+          <p className="text-foreground/60 max-w-md">The route you are looking for does not exist or has been removed.</p>
+        </div>
+      </main>
+    );
+  }
+
+  // Handle Support specific logic -> only signed in users can see private Support pages
+  if ((config.pageId === 'support' || config.isPrivate) && !user) {
+    return <Navigate to="/login" state={{ from: location }} />;
+  }
+
+  const parsedPageName = config.pageName?.toLowerCase().replace(/\s+/g, '_') || config.pageId || 'custom_page';
+  const prefix = `pub_${parsedPageName}`;
+
+  if (config.template === 'none') {
+    if (config.isAdmin) {
+      return <AdminPageTemplate config={config} />;
+    }
+    if (config.isShared) {
+      return <SharedPageTemplate config={config} />;
+    }
+    if (config.isPrivate) {
+      return <PrivatePageTemplate config={config} />;
+    }
+    return <PublicPageTemplate config={config} />;
+  }
+
+  if (config.template === 'board') {
+    const boardPrefix = config.isAdmin ? `admin_${config.pageId || parsedPageName}`
+      : config.isShared ? `mem_${config.pageId || parsedPageName}`
+      : config.isPrivate ? `user_${config.pageId || parsedPageName}`
+      : prefix;
+    const TemplateBoardComponent = globalConfig.components?.TemplateBoard || TemplateBoard;
+    return <TemplateBoardComponent
+      title={config.tabTitle || config.tabName || config.title || config.pageName || 'Board'}
+      subtitle={config.route}
+      tasksCollection={`${boardPrefix}_tasks`}
+      categoriesCollection={`${boardPrefix}_categories`}
+      config={config}
+    />;
+  }
+
+  if (config.template === 'table') {
+    const tablePrefix = config.isAdmin ? `admin_${config.pageId || parsedPageName}`
+      : config.isShared ? `mem_${config.pageId || parsedPageName}`
+      : config.isPrivate ? `user_${config.pageId || parsedPageName}`
+      : prefix;
+    const TemplateTableComponent = globalConfig.components?.TemplateTable || TemplateTable;
+    return <TemplateTableComponent
+      title={config.tabTitle || config.tabName || config.title || config.pageName || 'Table'}
+      subtitle={config.route}
+      tableCollection={`${tablePrefix}_table`}
+      config={config}
+    />;
+  }
+
+  if (config.template === 'calendar') {
+    // Determine collection prefix based on page type
+    const calPrefix = config.isAdmin ? `admin_${config.pageId || parsedPageName}`
+      : config.isShared ? `mem_${config.pageId || parsedPageName}`
+      : config.isPrivate ? `user_${config.pageId || parsedPageName}`
+      : prefix;
+    const TemplateCalendarComponent = globalConfig.components?.TemplateCalendar || TemplateCalendar;
+    return <TemplateCalendarComponent
+      title={config.tabTitle || config.tabName || config.title || config.pageName || 'Calendar'}
+      subtitle={config.route}
+      eventsCollection={`${calPrefix}_events`}
+      defaultTimeFormat={config.defaultTimeFormat || config.defaulttimeformat || '12h'}
+      config={config}
+    />;
+  }
+
+  if (config.template === 'inline_form') {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-start mt-8 relative z-10 w-full min-h-[60vh]">
+        <ContactPopup isInline={true} formId={config.form} formConfig={config.formConfigOverride} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 flex flex-col items-center justify-center relative z-10 w-full min-h-[60vh]">
+      <ContactPopup formId={config.form} formConfig={config.formConfigOverride} onClose={() => window.history.back()} />
+    </div>
+  );
+}

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();
+  });
+});