firebase-os 1.1.4 → 1.1.6

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

@@ -0,0 +1,422 @@
+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 { HelpCircle, Calendar, Mail, AlertCircle, ChevronDown, ChevronUp, User, Archive, ArchiveRestore, Loader2, FolderArchive } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+interface UserRequest {
+  id: string;
+  name: string;
+  email?: string;
+  contactEmail?: string;
+  topic?: string;
+  description: string;
+  uid: string;
+  submittedAt: any;
+  avatarUrl?: string;
+  isArchived?: boolean;
+  [key: string]: any;
+}
+
+export function Requests() {
+  const [requests, setRequests] = useState<UserRequest[]>([]);
+  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_requests'),
+      orderBy('submittedAt', 'desc')
+    );
+
+    const unsubscribe = onSnapshot(q, async (snapshot) => {
+      const data: UserRequest[] = [];
+      for (const docSnap of snapshot.docs) {
+        const reqData = docSnap.data() as UserRequest;
+        let avatarUrl = '';
+
+        // Attempt to fetch profile avatar if available
+        if (reqData.uid && reqData.uid !== 'guest') {
+          try {
+            const profileSnap = await getDoc(doc(db, 'user_profiles', reqData.uid));
+            if (profileSnap.exists()) {
+              const pData = profileSnap.data();
+              if (pData.avatar || pData.photoURL) avatarUrl = pData.avatar || pData.photoURL;
+              if (pData.displayName && !reqData.name) reqData.name = pData.displayName;
+              if (pData.email && !reqData.email) reqData.email = pData.email;
+              if (pData.email && !reqData.contactEmail) reqData.contactEmail = pData.email;
+            }
+          } catch (e) {
+            console.error('Failed to fetch avatar', e);
+          }
+        }
+
+        data.push({ ...reqData, id: docSnap.id, avatarUrl });
+      }
+      setRequests(data);
+      setLoading(false);
+    }, (error) => {
+      console.error("Error fetching requests:", 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_requests', id), {
+        isArchived: !currentStatus
+      });
+      if (!currentStatus && expandedId === id) {
+        setExpandedId(null);
+      }
+    } catch (e) {
+      console.error("Failed to archive/unarchive", e);
+    }
+    setIsArchiving(null);
+  };
+
+  const activeRequests = requests.filter(r => !r.isArchived);
+  const archivedRequests = requests.filter(r => r.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">
+          User Requests
+        </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" />
+          /requests
+        </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>
+            ) : requests.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">
+                  <HelpCircle className="w-6 h-6 outline-none" />
+                </div>
+                <h2 className="text-2xl font-extrabold text-foreground mb-2">No User Requests</h2>
+                <p className="text-[14px] text-foreground/50 font-medium max-w-md">User support tickets will appear here once submitted.</p>
+              </div>
+            ) : (
+              <div className="flex flex-col gap-3 pb-8">
+                {activeRequests.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 requests have been archived.</p>
+                  </div>
+                )}
+                <AnimatePresence>
+                  {activeRequests.map((request, index) => {
+                    const isExpanded = expandedId === request.id;
+
+                    return (
+                      <motion.div
+                        key={request.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(request.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">
+                              {(request.avatarUrl || request.submitterAvatar) ? (
+                                <img src={request.avatarUrl || request.submitterAvatar} alt={request.submitterName || request.name} className="w-10 h-10 rounded-full object-cover border border-[var(--panel-border)] shadow-sm" />
+                              ) : (
+                                <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 uppercase">
+                                  {(request.submitterName || request.name || request.contactEmail || request.email || 'U')[0]}
+                                </div>
+                              )}
+                            </div>
+
+                            <div className="flex flex-col min-w-0 flex-1">
+                              {request.uid !== 'guest' ? (
+                                <Link to={`/users/${request.uid}`} onClick={(e: any) => e.stopPropagation()} className="w-fit font-bold text-[14px] md:text-[15px] text-foreground truncate hover:text-accent flex items-center gap-2">
+                                  {request.submitterName || request.name || 'Anonymous User'}
+                                  {request.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">
+                                      {request.formId.replace(/_/g, ' ')}
+                                    </span>
+                                  )}
+                                </Link>
+                              ) : (
+                                <div className="flex items-center gap-2">
+                                  <span className="font-bold text-[14px] md:text-[15px] text-foreground truncate">{request.name || 'Anonymous User'}</span>
+                                  {request.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">
+                                      {request.formId.replace(/_/g, ' ')}
+                                    </span>
+                                  )}
+                                </div>
+                              )}
+                              <span className="text-[13px] text-foreground/50 truncate flex items-center gap-1.5 font-medium mt-0.5">
+                                <Mail className="w-3.5 h-3.5" /> {request.contactEmail || request.email || '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(request.submittedAt)}
+                            </div>
+                            <button
+                              onClick={(e) => { e.stopPropagation(); handleArchive(request.id, false); }}
+                              disabled={isArchiving === request.id}
+                              className="p-1.5 rounded-lg text-foreground/30 hover:text-orange-500 hover:bg-orange-500/10 transition-colors"
+                              title="Archive Request"
+                            >
+                              {isArchiving === request.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(request.submittedAt)}
+                                </div>
+                                {request.topic && (
+                                  <div className="flex items-center gap-2 mb-4 text-[13px] text-foreground/70 bg-foreground/5 px-4 py-2.5 rounded-xl w-fit border border-[var(--panel-border)]">
+                                    <AlertCircle className="w-4 h-4 text-accent" />
+                                    <span className="font-medium text-accent">Topic:</span>
+                                    <span className="font-bold">{request.topic}</span>
+                                  </div>
+                                )}
+
+
+                                {Object.entries(request)
+                                  .filter(([key]) => !['id', 'uid', 'submittedAt', 'avatarUrl', 'name', 'full_name', 'email', 'contactEmail', 'topic'].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 */}
+                {archivedRequests.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'} {archivedRequests.length} Archived Request{archivedRequests.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">
+                            {archivedRequests.map((request, index) => {
+                              const isExpanded = expandedId === request.id;
+                              return (
+                                <motion.div
+                                  key={request.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(request.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">
+                                        {(request.avatarUrl || request.submitterAvatar) ? (
+                                          <img src={request.avatarUrl || request.submitterAvatar} alt={request.submitterName || request.name} className="w-10 h-10 rounded-full object-cover border border-[var(--panel-border)] shadow-sm" />
+                                        ) : (
+                                          <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 uppercase">
+                                            {(request.submitterName || request.name || request.contactEmail || request.email || 'U')[0]}
+                                          </div>
+                                        )}
+                                      </div>
+
+                                      <div className="flex flex-col min-w-0 flex-1">
+                                        {request.uid !== 'guest' ? (
+                                          <div className="w-fit font-bold text-[14px] md:text-[15px] text-foreground truncate flex items-center gap-2">
+                                            {request.submitterName || request.name || 'Anonymous User'}
+                                            {request.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">
+                                                {request.formId.replace(/_/g, ' ')}
+                                              </span>
+                                            )}
+                                          </div>
+                                        ) : (
+                                          <div className="flex items-center gap-2">
+                                            <span className="font-bold text-[14px] md:text-[15px] text-foreground truncate">{request.name || 'Anonymous User'}</span>
+                                            {request.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">
+                                                {request.formId.replace(/_/g, ' ')}
+                                              </span>
+                                            )}
+                                          </div>
+                                        )}
+                                        <span className="text-[13px] text-foreground/50 truncate flex items-center gap-1.5 font-medium mt-0.5">
+                                          <Mail className="w-3.5 h-3.5" /> {request.contactEmail || request.email || '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(request.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(request.submittedAt)}
+                                          </div>
+                                          {request.topic && (
+                                            <div className="flex items-center gap-2 mb-4 text-[13px] text-foreground/70 bg-foreground/5 px-4 py-2.5 rounded-xl w-fit border border-[var(--panel-border)]">
+                                              <AlertCircle className="w-4 h-4 text-accent" />
+                                              <span className="font-medium text-accent">Topic:</span>
+                                              <span className="font-bold">{request.topic}</span>
+                                            </div>
+                                          )}
+
+                                          {Object.entries(request)
+                                            .filter(([key]) => !['id', 'uid', 'submittedAt', 'avatarUrl', 'name', 'full_name', 'email', 'contactEmail', 'topic', '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(request.id, request.isArchived)}
+                                              disabled={isArchiving === request.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 === request.id ? (
+                                                <Loader2 className="w-4 h-4 animate-spin" />
+                                              ) : (
+                                                <ArchiveRestore className="w-4 h-4" />
+                                              )}
+                                              Unarchive Request
+                                            </button>
+                                          </div>
+                                        </div>
+                                      </motion.div>
+                                    )}
+                                  </AnimatePresence>
+                                </motion.div>
+                              );
+                            })}
+                          </div>
+                        </motion.div>
+                      )}
+                    </AnimatePresence>
+                  </div>
+                )}
+
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

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