firebase-os 1.1.4 → 1.1.5

package/src/pages/Submissions.test.tsx

@@ -0,0 +1,95 @@
+// @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 { Submissions } from './Submissions';
+
+// 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 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('Submissions 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 */}
+              <Submissions />
+            </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/Submissions.tsx

@@ -0,0 +1,372 @@
+import { useEffect, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { db } from '../lib/firebase';
+import { collection, query, orderBy, onSnapshot, doc, getDoc, updateDoc } from 'firebase/firestore';
+import { DashboardNav } from '../components/DashboardNav';
+import { MessageSquare, Calendar, Mail, Phone, ChevronDown, HelpCircle, User, Archive, ArchiveRestore, Loader2, FolderArchive } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+interface Submission {
+  id: string;
+  name: string;
+  email: string;
+  phone: string;
+  questions: string;
+  uid: string;
+  submittedAt: any;
+  avatarUrl?: string;
+  isArchived?: boolean;
+  [key: string]: any;
+}
+
+export function Submissions() {
+  const [submissions, setSubmissions] = useState<Submission[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+  const [showArchived, setShowArchived] = useState(false);
+  const [isArchiving, setIsArchiving] = useState<string | null>(null);
+
+  useEffect(() => {
+    const q = query(
+      collection(db, 'user_submissions'),
+      orderBy('submittedAt', 'desc')
+    );
+
+    const unsubscribe = onSnapshot(q, async (snapshot) => {
+      const data: Submission[] = [];
+      for (const docSnap of snapshot.docs) {
+        const subData = docSnap.data() as Submission;
+        let avatarUrl = '';
+
+        // Attempt to fetch profile avatar if available
+        if (subData.uid && subData.uid !== 'guest') {
+          try {
+            const profileSnap = await getDoc(doc(db, 'user_profiles', subData.uid));
+            if (profileSnap.exists()) {
+              const pData = profileSnap.data();
+              if (pData.avatar) avatarUrl = pData.avatar;
+              if (pData.name && !subData.name) subData.name = pData.name;
+              if (pData.email && !subData.email) subData.email = pData.email;
+            }
+          } catch (e) {
+            console.error('Failed to fetch avatar', e);
+          }
+        }
+
+        data.push({ ...subData, id: docSnap.id, avatarUrl });
+      }
+      setSubmissions(data);
+      setLoading(false);
+    }, (error) => {
+      console.error("Error fetching submissions:", error);
+      setLoading(false);
+    });
+
+    return () => unsubscribe();
+  }, []);
+
+  const formatDate = (timestamp: any) => {
+    if (!timestamp) return 'Just now';
+    const date = timestamp.toDate ? timestamp.toDate() : new Date(timestamp);
+    return new Intl.DateTimeFormat('en-US', {
+      month: 'short',
+      day: 'numeric',
+      hour: 'numeric',
+      minute: 'numeric',
+    }).format(date);
+  };
+
+  const toggleExpand = (id: string) => {
+    setExpandedId(prev => (prev === id ? null : id));
+  };
+
+  const handleArchive = async (id: string, currentStatus: boolean = false) => {
+    setIsArchiving(id);
+    try {
+      await updateDoc(doc(db, 'user_submissions', id), {
+        isArchived: !currentStatus
+      });
+      if (!currentStatus && expandedId === id) {
+        setExpandedId(null);
+      }
+    } catch (e) {
+      console.error("Failed to archive/unarchive", e);
+    }
+    setIsArchiving(null);
+  };
+
+  const activeSubmissions = submissions.filter(s => !s.isArchived);
+  const archivedSubmissions = submissions.filter(s => s.isArchived);
+
+  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">
+          Form Submissions
+        </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" />
+          /submissions
+        </div>
+      </motion.div>
+
+      <div className="flex flex-col gap-4 flex-1 min-h-[500px]">
+        <div className="flex justify-start">
+          <DashboardNav />
+        </div>
+
+        <div className="w-full flex-1 glass-panel rounded-3xl p-6 md:p-10 relative overflow-hidden border border-[var(--panel-border)] shadow-2xl bg-[var(--panel-bg)]">
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-accent/5 blur-[100px] rounded-full pointer-events-none" />
+
+          <div className="relative z-10 h-full flex flex-col">
+            {loading ? (
+              <div className="flex-1 flex items-center justify-center min-h-[500px]">
+                <div className="w-8 h-8 md:w-10 md:h-10 border-4 border-accent/20 border-t-accent rounded-full animate-spin" />
+              </div>
+            ) : submissions.length === 0 ? (
+              <div className="flex-1 flex flex-col items-center justify-center text-center p-8">
+                <div className="w-16 h-16 rounded-3xl bg-accent/10 border border-accent/20 flex items-center justify-center text-accent mx-auto mb-6 shadow-inner">
+                  <MessageSquare className="w-6 h-6 outline-none" />
+                </div>
+                <h2 className="text-2xl font-extrabold text-foreground mb-2">No Submissions</h2>
+                <p className="text-[14px] text-foreground/50 font-medium max-w-md">Try submitting a form on the public layout to see it appear here.</p>
+              </div>
+            ) : (
+              <div className="flex flex-col gap-3 pb-8">
+                {activeSubmissions.length === 0 && (
+                  <div className="bg-foreground/[0.02] border border-dashed border-[var(--panel-border)] rounded-2xl flex flex-col items-center justify-center p-8 text-center mb-4">
+                    <p className="text-[14px] font-bold text-foreground/50">All submissions have been archived.</p>
+                  </div>
+                )}
+                <AnimatePresence>
+                  {activeSubmissions.map((submission, index) => {
+                    const isExpanded = expandedId === submission.id;
+
+                    return (
+                      <motion.div
+                        key={submission.id}
+                        initial={{ opacity: 0, y: 10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ delay: index * 0.05 }}
+                        className="glass-panel border border-[var(--panel-border)] rounded-2xl flex flex-col overflow-hidden hover:border-accent/40 transition-all duration-300"
+                      >
+                        <button
+                          onClick={() => toggleExpand(submission.id)}
+                          className="w-full flex items-center justify-between p-4 md:px-6 hover:bg-foreground/[0.02] transition-colors text-left"
+                        >
+                          <div className="flex items-center gap-4 flex-1 min-w-0">
+                            <div className="relative shrink-0">
+                              <div className="w-10 h-10 rounded-full bg-accent/10 text-accent flex items-center justify-center font-bold border border-accent/20 shadow-sm">
+                                <Mail className="w-4 h-4" />
+                              </div>
+                            </div>
+
+                            <div className="flex flex-col min-w-0 flex-1 justify-center">
+                              <div className="flex items-center gap-2">
+                                <span className="font-bold text-[14px] md:text-[15px] text-foreground truncate">{submission.name || submission.full_name || 'Anonymous Submission'}</span>
+                                {submission.formId && (
+                                  <span className="text-[10px] font-bold uppercase tracking-widest text-accent bg-accent/10 px-2 py-0.5 rounded-md border border-accent/20 shrink-0">
+                                    {submission.formId.replace(/_/g, ' ')}
+                                  </span>
+                                )}
+                              </div>
+                              <span className="text-[13px] text-foreground/50 truncate flex items-center gap-1.5 font-medium mt-0.5">
+                                {submission.email || submission.contactEmail || 'No email provided'}
+                              </span>
+                            </div>
+                          </div>
+
+                          <div className="hidden md:flex items-center gap-4 ml-6 shrink-0">
+                            <div className="text-[12px] font-medium text-foreground/40">
+                              {formatDate(submission.submittedAt)}
+                            </div>
+                            <button
+                              onClick={(e) => { e.stopPropagation(); handleArchive(submission.id, false); }}
+                              disabled={isArchiving === submission.id}
+                              className="p-1.5 rounded-lg text-foreground/30 hover:text-orange-500 hover:bg-orange-500/10 transition-colors"
+                              title="Archive Submission"
+                            >
+                              {isArchiving === submission.id ? <Loader2 className="w-4 h-4 animate-spin" /> : <Archive className="w-4 h-4" />}
+                            </button>
+                            <div className={`p-1.5 rounded-xl glass-panel transition-transform ${isExpanded ? 'rotate-180 bg-foreground/5' : ''}`}>
+                              <ChevronDown className="w-4 h-4 text-foreground/50" />
+                            </div>
+                          </div>
+                        </button>
+
+                        <AnimatePresence>
+                          {isExpanded && (
+                            <motion.div
+                              initial={{ height: 0, opacity: 0 }}
+                              animate={{ height: 'auto', opacity: 1 }}
+                              exit={{ height: 0, opacity: 0 }}
+                              className="overflow-hidden"
+                            >
+                              <div className="p-4 md:p-6 pt-0 mt-2 border-t border-[var(--panel-border)]/30">
+                                <div className="md:hidden text-[12px] font-medium text-foreground/40 w-fit mb-4">
+                                  {formatDate(submission.submittedAt)}
+                                </div>
+                                {Object.entries(submission)
+                                  .filter(([key]) => !['id', 'uid', 'submittedAt', 'avatarUrl', 'name', 'full_name', 'email', 'contactEmail'].includes(key) && !key.toLowerCase().startsWith('submitter') && key.toLowerCase() !== 'formid')
+                                  .map(([key, val]) => {
+                                    const formattedKey = key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+                                    return (
+                                      <div key={key} className="bg-foreground/[0.02] rounded-2xl p-5 border border-[var(--panel-border)] relative mb-3">
+                                        <div className="flex items-center gap-2 mb-3 text-foreground/60 w-full justify-between">
+                                          <div className="flex items-center gap-2 text-accent">
+                                            <span className="text-[12px] font-bold uppercase tracking-widest text-accent">{formattedKey}</span>
+                                          </div>
+                                        </div>
+                                        <p className="text-[14px] md:text-[15px] text-foreground/80 leading-relaxed whitespace-pre-wrap font-medium">
+                                          {typeof val === 'boolean' ? (val ? 'Yes' : 'No') : String(val || "No data provided")}
+                                        </p>
+                                      </div>
+                                    );
+                                  })}
+
+                              </div>
+                            </motion.div>
+                          )}
+                        </AnimatePresence>
+                      </motion.div>
+                    );
+                  })}
+                </AnimatePresence>
+
+                {/* Archived Folders Toggle */}
+                {archivedSubmissions.length > 0 && (
+                  <div className="mt-6 pt-4 border-t border-[var(--panel-border)]/30">
+                    <div className="flex justify-center">
+                      <button
+                        onClick={() => setShowArchived(!showArchived)}
+                        className="flex items-center gap-2 text-[11px] font-bold text-foreground/40 hover:text-foreground/70 transition-colors py-2 uppercase tracking-widest outline-none"
+                      >
+                        {showArchived ? 'Hide' : 'View'} {archivedSubmissions.length} Archived Submission{archivedSubmissions.length !== 1 ? 's' : ''}
+                        <ChevronDown className={`w-3.5 h-3.5 transition-transform duration-300 ${showArchived ? 'rotate-180' : ''}`} />
+                      </button>
+                    </div>
+
+                    <AnimatePresence>
+                      {showArchived && (
+                        <motion.div
+                          initial={{ height: 0, opacity: 0 }}
+                          animate={{ height: 'auto', opacity: 1 }}
+                          exit={{ height: 0, opacity: 0 }}
+                          className="overflow-hidden mt-4"
+                        >
+                          <div className="flex flex-col gap-3">
+                            {archivedSubmissions.map((submission, index) => {
+                              const isExpanded = expandedId === submission.id;
+                              return (
+                                <motion.div
+                                  key={submission.id}
+                                  initial={{ opacity: 0, y: 10 }}
+                                  animate={{ opacity: 1, y: 0 }}
+                                  transition={{ delay: index * 0.05 }}
+                                  className="glass-panel border border-[var(--panel-border)] rounded-2xl flex flex-col overflow-hidden opacity-50 grayscale hover:opacity-100 hover:grayscale-0 hover:border-accent/40 transition-all duration-300"
+                                >
+                                  <button
+                                    onClick={() => toggleExpand(submission.id)}
+                                    className="w-full flex items-center justify-between p-4 md:px-6 hover:bg-foreground/[0.02] transition-colors text-left"
+                                  >
+                                    <div className="flex items-center gap-4 flex-1 min-w-0">
+                                      <div className="relative shrink-0 grayscale">
+                                        <div className="w-10 h-10 rounded-full bg-accent/10 text-accent flex items-center justify-center font-bold border border-accent/20 shadow-sm">
+                                          <Mail className="w-4 h-4" />
+                                        </div>
+                                      </div>
+
+                                      <div className="flex flex-col min-w-0 flex-1 justify-center">
+                                        <div className="flex items-center gap-2">
+                                          <span className="font-bold text-[14px] md:text-[15px] text-foreground truncate">{submission.name || submission.full_name || 'Anonymous Submission'}</span>
+                                          {submission.formId && (
+                                            <span className="text-[10px] font-bold uppercase tracking-widest text-accent bg-accent/10 px-2 py-0.5 rounded-md border border-accent/20 shrink-0">
+                                              {submission.formId.replace(/_/g, ' ')}
+                                            </span>
+                                          )}
+                                        </div>
+                                        <span className="text-[13px] text-foreground/50 truncate flex items-center gap-1.5 font-medium mt-0.5">
+                                          {submission.email || submission.contactEmail || 'No email provided'}
+                                        </span>
+                                      </div>
+                                    </div>
+
+                                    <div className="hidden md:flex items-center gap-6 ml-6 shrink-0">
+                                      <div className="text-[12px] font-medium text-foreground/40">
+                                        {formatDate(submission.submittedAt)}
+                                      </div>
+                                      <div className={`p-2 rounded-xl glass-panel transition-transform ${isExpanded ? 'rotate-180 bg-foreground/5' : ''}`}>
+                                        <ChevronDown className="w-4 h-4 text-foreground/50" />
+                                      </div>
+                                    </div>
+                                  </button>
+
+                                  <AnimatePresence>
+                                    {isExpanded && (
+                                      <motion.div
+                                        initial={{ height: 0, opacity: 0 }}
+                                        animate={{ height: 'auto', opacity: 1 }}
+                                        exit={{ height: 0, opacity: 0 }}
+                                        className="overflow-hidden"
+                                      >
+                                        <div className="p-4 md:p-6 pt-0 mt-2 border-t border-[var(--panel-border)]/30">
+                                          <div className="md:hidden text-[12px] font-medium text-foreground/40 w-fit mb-4">
+                                            {formatDate(submission.submittedAt)}
+                                          </div>
+                                          {Object.entries(submission)
+                                            .filter(([key]) => !['id', 'uid', 'submittedAt', 'avatarUrl', 'name', 'full_name', 'email', 'contactEmail', 'isArchived'].includes(key) && !key.toLowerCase().startsWith('submitter') && key.toLowerCase() !== 'formid')
+                                            .map(([key, val]) => {
+                                              const formattedKey = key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+                                              return (
+                                                <div key={key} className="bg-foreground/[0.02] rounded-2xl p-5 border border-[var(--panel-border)] relative mb-3">
+                                                  <div className="flex items-center gap-2 mb-3 text-foreground/60 w-full justify-between">
+                                                    <div className="flex items-center gap-2 text-accent">
+                                                      <span className="text-[12px] font-bold uppercase tracking-widest text-accent">{formattedKey}</span>
+                                                    </div>
+                                                  </div>
+                                                  <p className="text-[14px] md:text-[15px] text-foreground/80 leading-relaxed whitespace-pre-wrap font-medium">
+                                                    {typeof val === 'boolean' ? (val ? 'Yes' : 'No') : String(val || "No data provided")}
+                                                  </p>
+                                                </div>
+                                              );
+                                            })}
+
+                                          <div className="mt-6 flex justify-end">
+                                            <button
+                                              onClick={() => handleArchive(submission.id, submission.isArchived)}
+                                              disabled={isArchiving === submission.id}
+                                              className="flex items-center gap-2 px-4 py-2.5 rounded-xl text-[13px] font-bold text-foreground/70 hover:text-emerald-500 bg-foreground/5 hover:bg-emerald-500/10 transition-colors border border-transparent shadow-sm"
+                                            >
+                                              {isArchiving === submission.id ? (
+                                                <Loader2 className="w-4 h-4 animate-spin" />
+                                              ) : (
+                                                <ArchiveRestore className="w-4 h-4" />
+                                              )}
+                                              Unarchive Submission
+                                            </button>
+                                          </div>
+                                        </div>
+                                      </motion.div>
+                                    )}
+                                  </AnimatePresence>
+                                </motion.div>
+                              );
+                            })}
+                          </div>
+                        </motion.div>
+                      )}
+                    </AnimatePresence>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

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

@@ -0,0 +1,103 @@
+import { motion } from 'framer-motion';
+import { Link } from 'react-router-dom';
+import { LayoutTemplate, AppWindow, CheckCheck, Kanban, Table as TableIcon, Calendar } from 'lucide-react';
+
+export function Templates() {
+  const templates = [
+    {
+      id: 'form',
+      title: 'Inline Form',
+      description: 'A static, embedded contact form designed directly into the page layout.',
+      icon: LayoutTemplate,
+      path: '/templates/inline_form',
+    },
+    {
+      id: 'popup',
+      title: 'Modal Popup Form',
+      description: 'A centralized popup contact form that visually blurs the background context.',
+      icon: AppWindow,
+      path: '/templates/popup_form',
+    },
+    {
+      id: 'confirmation',
+      title: 'Action Confirmation',
+      description: 'A classic confirmation dialog styled for decisive user actions.',
+      icon: CheckCheck,
+      path: '/templates/confirmation',
+    },
+    {
+      id: 'board',
+      title: 'Board View',
+      description: 'A modern, drag-and-drop styled Kanban board aesthetic for task management.',
+      icon: Kanban,
+      path: '/templates/board',
+    },
+    {
+      id: 'table',
+      title: 'Data Table',
+      description: 'A clean, column-based data table optimized for large datasets and bulk actions.',
+      icon: TableIcon,
+      path: '/templates/table',
+    },
+    {
+      id: 'calendar',
+      title: 'Calendar View',
+      description: 'A structured monthly calendar grid for scheduling and date-based resource planning.',
+      icon: Calendar,
+      path: '/templates/calendar',
+    }
+  ];
+
+  return (
+    <main className="flex-1 w-full max-w-7xl mx-auto p-4 md:p-8 z-10 flex flex-col pt-12">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="mb-10 text-center"
+      >
+        <h1 className="w-fit mx-auto inline-block text-4xl md:text-5xl lg:text-[4.8rem] leading-[1.1] font-extrabold tracking-tight mb-4 text-gradient animate-float">
+          Premium Templates
+        </h1>
+        <p className="text-foreground/60 text-lg font-medium max-w-2xl mx-auto">
+          Explore our collection of fully functional, beautifully designed boilerplate components.
+        </p>
+      </motion.div>
+
+      <div className="w-full max-w-4xl mx-auto flex flex-col gap-4 relative">
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[80%] h-[80%] bg-accent/5 blur-[120px] rounded-full pointer-events-none -z-10" />
+
+        {templates.map((tpl, i) => {
+          const Icon = tpl.icon;
+          return (
+            <motion.div
+              key={tpl.id}
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: i * 0.05 }}
+            >
+              <Link 
+                to={tpl.path}
+                className="flex items-center gap-6 w-full p-4 md:px-6 glass-panel border border-[var(--panel-border)] rounded-2xl hover:border-accent/40 transition-all duration-300 group hover:bg-foreground/[0.02]"
+              >
+                <div className="w-12 h-12 rounded-xl bg-accent/10 flex items-center justify-center text-accent shrink-0 border border-accent/20 group-hover:scale-105 transition-transform">
+                  <Icon className="w-5 h-5" />
+                </div>
+                
+                <div className="flex flex-col flex-1 min-w-0">
+                  <h3 className="text-[15px] font-bold text-foreground truncate">{tpl.title}</h3>
+                  <p className="text-[13px] text-foreground/50 truncate font-medium">
+                    {tpl.description}
+                  </p>
+                </div>
+
+                <div className="hidden md:flex items-center gap-2 text-[13px] font-bold px-5 py-2.5 rounded-xl btn-primary shrink-0 transition-transform shadow-lg group-hover:-translate-y-0.5">
+                  View <span className="font-black leading-none ml-0.5">→</span>
+                </div>
+              </Link>
+            </motion.div>
+          );
+        })}
+      </div>
+    </main>
+  );
+}