firebase-os 1.1.4 → 1.1.5

package/src/components/ContactPopup.tsx

@@ -0,0 +1,437 @@
+import { useState, useRef, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { motion } from 'framer-motion';
+import { CheckCircle2, AlertCircle, ChevronDown, Loader2, ArrowLeft } from 'lucide-react';
+import { auth, db } from '../lib/firebase';
+import { collection, addDoc, serverTimestamp } from 'firebase/firestore';
+import { Input } from './Input';
+import { Button } from './Button';
+import { CustomSelect } from './CustomSelect';
+import { useTheme } from '../lib/ThemeContext';
+
+import { PhoneInput, defaultCountries } from 'react-international-phone';
+import 'react-international-phone/style.css';
+
+const popularCountryCodes = ['us', 'gb', 'ca', 'au', 'nz', 'ie', 'ae', 'sg'];
+const customizedCountries = [
+  ...defaultCountries.filter((c) => popularCountryCodes.includes(c[1])),
+  ...defaultCountries.filter((c) => !popularCountryCodes.includes(c[1]))
+];
+
+import { doc, getDoc } from 'firebase/firestore';
+
+interface ContactPopupProps {
+  onClose?: () => void;
+  formId?: string;
+  formConfig?: any; // Fallback
+  isInline?: boolean;
+}
+
+function PhoneInputField({ field, value, onChange }: { field: any, value: string, onChange: (val: string) => void }) {
+  return (
+    <div className="flex flex-col w-full relative z-[99999]">
+       <label className="text-[13px] font-medium text-foreground/50 select-none mb-1.5 ml-1">
+         {field.label} {field.required && <span className="text-red-500">*</span>}
+       </label>
+       <PhoneInput
+         defaultCountry="us"
+         countries={customizedCountries}
+         value={value}
+         onChange={(val) => onChange(val)}
+         forceDialCode={true}
+         className="w-full flex items-center rounded-xl text-[15px] text-foreground transition-all duration-300 focus-within:border-accent glow-focus glass-panel overflow-visible relative h-12"
+         inputClassName="flex-1 w-full !bg-transparent !border-none !outline-none !shadow-none px-3 text-[15px] text-foreground m-0 p-0 h-full tracking-[0.5px] no-glow"
+         countrySelectorStyleProps={{
+           buttonClassName: "!bg-transparent !border-0 border-r !border-[var(--panel-border)]/50 !outline-none !shadow-none !px-3 hover:!bg-foreground/5 transition-colors h-full !rounded-xl !rounded-r-none flex items-center justify-center shrink-0",
+         }}
+       />
+    </div>
+  );
+}
+
+import { contactFormConfig } from '../configs/forms/contactForm.config';
+import { supportFormConfig } from '../configs/forms/supportForm.config';
+
+export function ContactPopup({ onClose, formId, formConfig: propsConfig, isInline }: ContactPopupProps) {
+  const [formData, setFormData] = useState<any>({});
+  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
+  const [errorMessage, setErrorMessage] = useState('');
+  
+  const popupRef = useRef<HTMLDivElement>(null);
+  const [formConfig, setFormConfig] = useState<any>(propsConfig || null);
+  const [loadingConfig, setLoadingConfig] = useState(!propsConfig);
+
+  useEffect(() => {
+    if (propsConfig) {
+      setFormConfig(propsConfig);
+      setLoadingConfig(false);
+      return;
+    }
+
+    const fetchConfig = async () => {
+      try {
+        if (!formId) {
+            setFormConfig(contactFormConfig);
+            return;
+        }
+        const configDoc = await getDoc(doc(db, 'sys_forms', formId));
+        if (configDoc.exists()) {
+          setFormConfig({ ...configDoc.data(), id: configDoc.id });
+        } else {
+           if (formId === 'contact') {
+               setFormConfig(contactFormConfig);
+           } else if (formId === 'support') {
+               setFormConfig(supportFormConfig);
+           }
+        }
+      } catch (err) {
+        console.error('Failed to load form config:', err);
+      } finally {
+        setLoadingConfig(false);
+      }
+    };
+    fetchConfig();
+  }, [formId, propsConfig]);
+
+  useEffect(() => {
+    if (formConfig && formConfig.fields) {
+      setFormData((prev: any) => {
+         const newData = { ...prev };
+         let changed = false;
+         formConfig.fields.forEach((f: any) => {
+           if ((f.name === 'contactEmail' || f.type === 'email') && !newData[f.name]) {
+             if (auth.currentUser?.email) {
+               newData[f.name] = auth.currentUser.email;
+               changed = true;
+             }
+           }
+         });
+         return changed ? newData : prev;
+      });
+    }
+  }, [formConfig]);
+
+  // Close popup when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (popupRef.current && !popupRef.current.contains(event.target as Node)) {
+        onClose?.();
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [onClose]);
+
+  useEffect(() => {
+    if (isInline) return;
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose?.();
+    };
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [onClose, isInline]);
+  
+  // Prevent background scrolling when popup is open
+  useEffect(() => {
+    if (!isInline) {
+      document.body.style.overflow = 'hidden';
+      return () => {
+        document.body.style.overflow = 'unset';
+      };
+    }
+  }, [isInline]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setStatus('loading');
+    setErrorMessage('');
+
+    try {
+      const collectionName = formConfig?.submitPage === 'requests' ? 'user_requests' : 'user_submissions';
+      
+      const userPayload = auth.currentUser ? {
+         uid: auth.currentUser.uid,
+         submitterName: auth.currentUser.displayName || '',
+         submitterEmail: auth.currentUser.email || '',
+         submitterAvatar: auth.currentUser.photoURL || ''
+      } : { uid: 'guest' };
+
+      await addDoc(collection(db, collectionName), {
+        ...formData,
+        ...userPayload,
+        formId: formId || 'unknown',
+        submittedAt: serverTimestamp(),
+      });
+
+      setStatus('success');
+      setTimeout(() => {
+        if (formConfig?.redirectTo) {
+          window.location.href = formConfig.redirectTo;
+        } else {
+          onClose?.();
+          setStatus('idle');
+          setFormData({});
+        }
+      }, 3000);
+    } catch (error: any) {
+      console.error('Submission error:', error);
+      setStatus('error');
+      setErrorMessage('We could not send your message right now. Please try again.');
+    }
+  };
+
+  const [showLoader, setShowLoader] = useState(false);
+
+  useEffect(() => {
+    let timer: any;
+    if (loadingConfig || (!formConfig && !propsConfig)) {
+      timer = setTimeout(() => setShowLoader(true), 150);
+    } else {
+      setShowLoader(false);
+    }
+    return () => clearTimeout(timer);
+  }, [loadingConfig, formConfig, propsConfig]);
+
+  if (loadingConfig || !formConfig) {
+    if (!showLoader) return null;
+    if (isInline) {
+      return (
+        <div className="w-full flex justify-center py-[10vh]">
+           <Loader2 className="w-8 h-8 animate-spin text-accent" />
+        </div>
+      );
+    }
+    return createPortal(
+      <div className="fixed inset-0 z-[100] flex items-center justify-center bg-background/60 backdrop-blur-xl">
+         <Loader2 className="w-8 h-8 animate-spin text-accent" />
+      </div>,
+      document.body
+    );
+  }
+
+  const content = (
+    <div className="relative z-10 w-full">
+      {status === 'success' ? (
+        <motion.div
+           initial={{ opacity: 0, y: 10 }}
+           animate={{ opacity: 1, y: 0 }}
+           className="flex flex-col items-center justify-center py-8 text-center"
+        >
+          <div className="w-16 h-16 rounded-full bg-green-500/10 border border-green-500/20 flex items-center justify-center text-green-500 mb-4">
+            <CheckCircle2 className="w-8 h-8" />
+          </div>
+          <h4 className="text-lg font-bold text-foreground mb-2">Message Sent!</h4>
+          <p className="text-[14px] text-foreground/60 leading-relaxed">Thank you for your interest. We'll get back to you shortly.</p>
+        </motion.div>
+      ) : status === 'loading' ? (
+        <motion.div
+           initial={{ opacity: 0, scale: 0.95 }}
+           animate={{ opacity: 1, scale: 1 }}
+           className="flex flex-col items-center justify-center py-16 text-center"
+        >
+          <Loader2 className="w-10 h-10 animate-spin text-accent mb-4" />
+          <h4 className="text-lg font-bold text-foreground tracking-tight">Processing</h4>
+          <p className="text-[13px] text-foreground/50 mt-1">Please wait a moment...</p>
+        </motion.div>
+      ) : (
+        <>
+           <div className="mb-6 text-center">
+             <h3 className="text-2xl sm:text-3xl font-extrabold mb-2 text-foreground tracking-tight break-words">{formConfig.title}</h3>
+             {formConfig.description && <p className="text-[14px] md:text-[15px] font-medium text-foreground/60 tracking-wide leading-relaxed">{formConfig.description}</p>}
+           </div>
+          {status === 'error' && (
+            <motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} className="mb-4 p-3 sm:p-4 rounded-xl bg-red-500/10 border border-red-500/20 flex items-start gap-3">
+              <AlertCircle className="w-5 h-5 text-red-500 shrink-0 mt-0.5" />
+              <p className="text-[14px] font-medium text-red-500/90">{errorMessage}</p>
+            </motion.div>
+          )}
+
+          <form onSubmit={handleSubmit} className="flex flex-col gap-4 sm:gap-5 w-full">
+            {[...(formConfig.fields || [])].sort((a: any, b: any) => {
+               const aIsCheckbox = a.type === 'checkbox';
+               const bIsCheckbox = b.type === 'checkbox';
+               if (aIsCheckbox && !bIsCheckbox) return 1;
+               if (!aIsCheckbox && bIsCheckbox) return -1;
+               return 0;
+            }).map((field: any, idx: number) => {
+              if (field.type === 'tel') {
+                return (
+                   <PhoneInputField
+                     key={idx}
+                     field={field}
+                     value={formData[field.name] || ''}
+                     onChange={val => setFormData({ ...formData, [field.name]: val })}
+                   />
+                );
+              }
+
+              if (field.type === 'textarea') {
+                return (
+                  <div key={idx} className="flex flex-col w-full relative">
+                    <label className="text-[13px] font-medium text-foreground/50 select-none mb-1.5 ml-1">
+                      {field.label}
+                    </label>
+                    <textarea
+                      required={field.required}
+                      rows={3}
+                      placeholder={field.placeholder}
+                      value={formData[field.name] || ''}
+                      onChange={e => setFormData({ ...formData, [field.name]: e.target.value })}
+                      className="flex w-full rounded-xl text-[15px] text-foreground px-4 py-3 transition-all duration-300 placeholder:text-foreground/40 focus:outline-none focus:border-accent glow-focus disabled:cursor-not-allowed disabled:opacity-50 glass-panel min-h-[100px] resize-none"
+                    />
+                  </div>
+                );
+              }
+              if (field.type === 'select') {
+                return (
+                  <div key={idx} className="w-full">
+                     <CustomSelect
+                        label={field.label}
+                        value={formData[field.name] || ''}
+                        options={[
+                           { value: '', label: <span className="text-foreground/40">Select an option...</span> },
+                           ...(field.options || []).map((opt: string) => ({ value: opt, label: opt }))
+                        ]}
+                        onChange={val => setFormData({ ...formData, [field.name]: val })}
+                     />
+                  </div>
+                );
+              }
+
+              if (field.type === 'checkbox') {
+                 return (
+                    <label key={idx} className="flex items-center gap-3 w-full cursor-pointer group py-2">
+                       <div className="relative flex items-center justify-center w-5 h-5 rounded border border-foreground/20 bg-background/50 group-hover:border-accent transition-colors">
+                          <input 
+                            type="checkbox" 
+                            required={field.required}
+                            checked={!!formData[field.name]}
+                            onChange={e => setFormData({...formData, [field.name]: e.target.checked})}
+                            className="absolute opacity-0 w-full h-full cursor-pointer"
+                          />
+                          {formData[field.name] && <span className="w-2.5 h-2.5 bg-accent rounded-sm shrink-0"></span>}
+                       </div>
+                       <span className="text-[14px] font-medium text-foreground/80 leading-snug group-hover:text-foreground transition-colors">{field.label}</span>
+                    </label>
+                 );
+              }
+
+              if (field.type === 'age') {
+                 return (
+                    <Input
+                       key={idx}
+                       label={field.label}
+                       required={field.required}
+                       type="number"
+                       min={0}
+                       max={120}
+                       placeholder={field.placeholder || "Age (Max 120)"}
+                       value={formData[field.name] || ''}
+                       onChange={e => {
+                          const rawVal = e.target.value;
+                          if (rawVal === '') {
+                             setFormData({ ...formData, [field.name]: '' });
+                          } else {
+                             const num = Math.max(0, Math.min(120, parseInt(rawVal, 10)));
+                             setFormData({ ...formData, [field.name]: isNaN(num) ? '' : String(num) });
+                          }
+                       }}
+                    />
+                 );
+              }
+
+              if (field.type === 'currency' || (field.type === 'number' && field.name === 'budget')) {
+                 return (
+                    <div key={idx} className="flex flex-col w-full relative">
+                      <label className="text-[13px] font-medium text-foreground/50 select-none mb-1.5 ml-1">
+                        {field.label}
+                      </label>
+                      <div className="relative flex items-center justify-center">
+                        <span className="absolute left-4 text-foreground/50 font-bold flex items-center h-full">{field.currencySymbol || '$'}</span>
+                        <input
+                          required={field.required}
+                          type="number"
+                          placeholder={field.placeholder}
+                          value={formData[field.name] || ''}
+                          onChange={e => setFormData({ ...formData, [field.name]: e.target.value })}
+                          className="block h-12 w-full text-[15px] text-foreground pl-8 pr-4 py-2 transition-all duration-300 placeholder:text-foreground/40 focus:outline-none focus:border-accent glow-focus disabled:cursor-not-allowed disabled:opacity-50 glass-panel"
+                          style={{ borderRadius: 'var(--input-radius, 0.75rem)' }}
+                        />
+                      </div>
+                    </div>
+                 );
+              }
+              
+              return (
+                <Input
+                  key={idx}
+                  label={field.label}
+                  required={field.required}
+                  type={field.type}
+                  placeholder={field.placeholder}
+                  currencySymbol={field.currencySymbol}
+                  value={formData[field.name] || ''}
+                  onChange={e => setFormData({ ...formData, [field.name]: e.target.value })}
+                />
+              );
+            })}
+
+            <div className="pt-2">
+              <Button
+                type="submit"
+                className="w-full px-6 md:px-8 py-3 md:py-3.5 rounded-xl font-semibold tracking-wide btn-primary text-[15px] shadow-xl transition-all duration-300 hover:-translate-y-1 active:scale-95 flex items-center justify-center"
+                isLoading={false}
+              >
+                {formConfig.submitText || formConfig.buttonName || 'Submit'}
+              </Button>
+            </div>
+          </form>
+        </>
+      )}
+    </div>
+  );
+
+  if (isInline) {
+    return (
+      <div className="w-full flex justify-center flex-col items-center">
+        <div className="w-full max-w-[500px] mb-6 px-2">
+           <button onClick={() => window.history.back()} className="flex items-center gap-2 text-foreground/40 hover:text-foreground font-medium transition-colors w-fit group">
+              <ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
+              Go Back
+           </button>
+        </div>
+        <motion.div
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="w-full max-w-[500px] p-6 sm:p-8 lg:p-10 rounded-3xl md:rounded-3xl glass-panel relative glow-hover shadow-[0_8px_32px_rgba(0,0,0,0.08)] z-10 mx-auto"
+        >
+          <div className="absolute -inset-[1px] bg-gradient-to-br from-[var(--primary-glow)] to-transparent opacity-30 blur-[20px] rounded-3xl md:rounded-3xl -z-10" />
+          {content}
+        </motion.div>
+      </div>
+    );
+  }
+
+  return createPortal(
+    <div className="fixed inset-0 z-[100] flex items-start justify-center p-4 py-20 md:py-10 h-[-webkit-fill-available] md:h-screen w-screen overflow-y-auto no-scrollbar">
+      <motion.div
+        onClick={onClose}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        className="fixed inset-0 bg-background/60 backdrop-blur-xl cursor-pointer"
+      />
+      <motion.div
+        initial={{ opacity: 0, scale: 0.95, y: 10 }}
+        animate={{ opacity: 1, scale: 1, y: 0 }}
+        exit={{ opacity: 0, scale: 0.95, y: 10 }}
+        ref={popupRef}
+        className="w-full max-w-[500px] p-6 sm:p-8 lg:p-10 rounded-3xl md:rounded-3xl glass-panel relative glow-hover shadow-[0_8px_32px_rgba(0,0,0,0.08)] z-10 mx-auto my-auto border border-[var(--panel-border)] shrink-0"
+      >
+        <div className="absolute -inset-[1px] bg-gradient-to-br from-[var(--primary-glow)] to-transparent opacity-30 blur-[20px] rounded-3xl md:rounded-3xl -z-10" />
+        {content}
+      </motion.div>
+    </div>,
+    document.body
+  );
+}

package/src/components/CustomSelect.test.tsx

@@ -0,0 +1,47 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { CustomSelect } from '../components/CustomSelect';
+
+describe('CustomSelect Component', () => {
+  const options = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+  ];
+
+  it('renders default selected option', () => {
+    render(<CustomSelect value="banana" options={options} onChange={() => {}} />);
+    expect(screen.getByText('Banana')).toBeInTheDocument();
+  });
+
+  it('opens dropdown when clicked', () => {
+    render(<CustomSelect value="apple" options={options} onChange={() => {}} />);
+    
+    // Apple should be visible as the chosen item
+    const selectedItem = screen.getByText('Apple');
+    fireEvent.click(selectedItem);
+
+    // Dropdown should show 'Banana'
+    expect(screen.getByText('Banana')).toBeInTheDocument();
+    expect(screen.getByText('Cherry')).toBeInTheDocument();
+  });
+
+  it('fires onChange callback when option is clicked', () => {
+    const handleChange = vi.fn();
+    render(<CustomSelect value="apple" options={options} onChange={handleChange} />);
+    
+    // Open dropdown
+    fireEvent.click(screen.getByText('Apple'));
+    
+    // Click 'Cherry'
+    fireEvent.click(screen.getByText('Cherry'));
+    
+    expect(handleChange).toHaveBeenCalledWith('cherry');
+  });
+  
+  it('does not open if disabled is true', () => {
+    render(<CustomSelect value="apple" options={options} onChange={() => {}} disabled />);
+    const container = screen.getByText('Apple').closest('div')?.parentElement;
+    expect(container).toHaveClass('opacity-50 pointer-events-none');
+  });
+});

package/src/components/CustomSelect.tsx

@@ -0,0 +1,89 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { ChevronDown, Check } from 'lucide-react';
+
+interface Option {
+  value: string;
+  label: React.ReactNode;
+}
+
+interface CustomSelectProps {
+  value: string;
+  options: Option[];
+  onChange: (val: string) => void;
+  label?: string;
+  disabled?: boolean;
+  variant?: 'default' | 'ghost';
+}
+
+export function CustomSelect({ value, options, onChange, label, disabled, variant = 'default' }: CustomSelectProps) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const selectedOption = options.find(o => o.value === value) || options[0];
+
+  return (
+    <div className={`flex flex-col gap-2 relative ${disabled ? 'opacity-50 pointer-events-none' : ''}`} ref={ref}>
+      {label && <label className="text-[14px] font-medium text-foreground/80">{label}</label>}
+      
+      <div 
+        onClick={() => {
+           if (options.length > 1) setOpen(!open);
+        }}
+        className={`w-full rounded-xl text-[14px] font-medium text-foreground px-4 transition-all flex items-center justify-between ${
+          options.length <= 1 ? 'cursor-default opacity-80' : 'cursor-pointer'
+        } ${
+          variant === 'ghost' 
+            ? 'h-10 hover:bg-foreground/5 bg-transparent' 
+            : 'h-12 bg-foreground/[0.02] border border-[var(--panel-border)] hover:border-foreground/30 glass-panel shadow-sm'
+        }`}
+      >
+        <span className="truncate">{selectedOption?.label}</span>
+        {options.length > 1 && (
+          <ChevronDown className={`w-4 h-4 text-foreground/50 transition-transform duration-300 ${open ? 'rotate-180' : ''}`} />
+        )}
+      </div>
+
+      <AnimatePresence>
+        {open && (
+          <motion.div 
+            initial={{ opacity: 0, y: 5, scale: 0.98 }}
+            animate={{ opacity: 1, y: 0, scale: 1 }}
+            exit={{ opacity: 0, y: 5, scale: 0.98 }}
+            transition={{ duration: 0.15 }}
+            className="absolute z-[99999] top-[calc(100%+8px)] left-0 w-full border border-[var(--panel-border)] bg-[var(--bg-color)] rounded-xl shadow-[0_15px_40px_rgba(0,0,0,0.5)] overflow-hidden ring-1 ring-[var(--panel-border)]"
+          >
+            <div className="max-h-60 overflow-y-auto no-scrollbar p-1">
+              {options.map((opt) => (
+                <div
+                  key={opt.value}
+                  onClick={() => {
+                    onChange(opt.value);
+                    setOpen(false);
+                  }}
+                  className={`flex items-center justify-between px-3 py-2.5 rounded-lg cursor-pointer transition-colors text-[13px] font-medium ${
+                    value === opt.value 
+                      ? 'bg-accent/10 text-accent' 
+                      : 'text-foreground/80 hover:bg-foreground/5 hover:text-foreground'
+                  }`}
+                >
+                  <span className="truncate">{opt.label}</span>
+                  {value === opt.value && <Check className="w-3.5 h-3.5 shrink-0" />}
+                </div>
+              ))}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

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