firebase-os 1.1.4 → 1.1.6

package/src/components/AdminNotifications.tsx

@@ -0,0 +1,194 @@
+import { useState, useEffect, useRef } from 'react';
+import { Bell, User, Mail, HelpCircle } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { db } from '../lib/firebase';
+import { collection, query, orderBy, limit, onSnapshot } from 'firebase/firestore';
+import { useNavigate } from 'react-router-dom';
+
+interface NotificationItem {
+  id: string;
+  type: 'user' | 'submission' | 'request';
+  title: string;
+  subtitle: string;
+  time: any;
+}
+
+export function AdminNotifications() {
+  const [open, setOpen] = useState(false);
+  const [notifications, setNotifications] = useState<NotificationItem[]>([]);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  // Use a ref to combine data reliably on client side
+  const dataRef = useRef({ users: [] as NotificationItem[], submissions: [] as NotificationItem[], requests: [] as NotificationItem[] });
+  
+  const updateNotifications = (type: 'users' | 'submissions' | 'requests', data: NotificationItem[]) => {
+    dataRef.current[type] = data;
+    const combined = [...dataRef.current.users, ...dataRef.current.submissions, ...dataRef.current.requests];
+    combined.sort((a, b) => {
+      const tA = a.time?.toDate ? a.time.toDate().getTime() : new Date(a.time).getTime();
+      const tB = b.time?.toDate ? b.time.toDate().getTime() : new Date(b.time).getTime();
+      return (tB || 0) - (tA || 0);
+    });
+    setNotifications(combined.slice(0, 8)); // keep top 8
+  };
+
+  useEffect(() => {
+    // Listen to recent users
+    const usersQ = query(collection(db, 'user_profiles'), orderBy('createdAt', 'desc'), limit(5));
+    const unsubUsers = onSnapshot(usersQ, (snap) => {
+      const usersData = snap.docs.map(doc => {
+        const data = doc.data();
+        return {
+          id: `u_${doc.id}`,
+          type: 'user' as const,
+          title: 'New user registered',
+          subtitle: data.email || 'Unknown',
+          time: data.createdAt
+        };
+      });
+      updateNotifications('users', usersData);
+    });
+
+    // Listen to recent submissions
+    const subsQ = query(collection(db, 'user_submissions'), orderBy('submittedAt', 'desc'), limit(5));
+    const unsubSubs = onSnapshot(subsQ, (snap) => {
+      const subsData = snap.docs.map(doc => {
+        const data = doc.data();
+        return {
+          id: `s_${doc.id}`,
+          type: 'submission' as const,
+          title: 'New form submission',
+          subtitle: data.name || data.email || 'Anonymous',
+          time: data.submittedAt
+        };
+      });
+      updateNotifications('submissions', subsData);
+    });
+
+    // Listen to recent user requests
+    const reqQ = query(collection(db, 'user_requests'), orderBy('submittedAt', 'desc'), limit(5));
+    const unsubReq = onSnapshot(reqQ, (snap) => {
+      const reqData = snap.docs.map(doc => {
+        const data = doc.data();
+        return {
+          id: `r_${doc.id}`,
+          type: 'request' as const,
+          title: 'New support request',
+          subtitle: data.name || data.submitterName || data.contactEmail || data.email || 'Anonymous',
+          time: data.submittedAt
+        };
+      });
+      updateNotifications('requests', reqData);
+    });
+
+    return () => {
+      unsubUsers();
+      unsubSubs();
+      unsubReq();
+    };
+  }, []);
+
+
+
+  const [lastReadTime, setLastReadTime] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return parseInt(localStorage.getItem('admin_notifications_last_read') || '0', 10);
+    }
+    return 0;
+  });
+
+  const handleToggleOpen = () => {
+    const nextState = !open;
+    setOpen(nextState);
+    if (nextState) {
+       const now = Date.now();
+       setLastReadTime(now);
+       if (typeof window !== 'undefined') {
+         localStorage.setItem('admin_notifications_last_read', now.toString());
+       }
+    }
+  };
+
+  const hasUnread = notifications.some(n => {
+    if (!n.time) return true;
+    const t = n.time?.toDate ? n.time.toDate().getTime() : new Date(n.time).getTime();
+    return t > lastReadTime || isNaN(t);
+  });
+
+  const handleNavigate = (type: 'user' | 'submission' | 'request') => {
+    setOpen(false);
+    if (type === 'user') navigate('/users');
+    else if (type === 'submission') navigate('/submissions');
+    else navigate('/requests');
+  };
+
+  const formatTime = (ts: any) => {
+    if (!ts) return '';
+    const date = ts.toDate ? ts.toDate() : new Date(ts);
+    return new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric' }).format(date);
+  };
+
+  return (
+    <div className="relative z-50 flex-shrink-0 mr-1 md:mr-2" ref={dropdownRef}>
+      <button
+        onClick={handleToggleOpen}
+        className="p-2 rounded-xl glass-panel transition-all border border-transparent relative text-notification-icon hover:bg-foreground/5 hover:border-[var(--panel-border)]"
+        aria-label="Admin Notifications"
+      >
+        <Bell className="w-4 h-4 md:w-5 md:h-5" />
+        {hasUnread && (
+          <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full animate-pulse" />
+        )}
+      </button>
+
+      <AnimatePresence>
+        {open && (
+           <motion.div
+             initial={{ opacity: 0, y: -5, scale: 0.98 }}
+             animate={{ opacity: 1, y: 0, scale: 1 }}
+             exit={{ opacity: 0, scale: 0.98, y: -5 }}
+             className="absolute top-full mt-2 right-[-60px] md:right-0 w-[320px] md:w-[400px] glass-panel border border-[var(--panel-border)] rounded-2xl shadow-2xl z-50 flex flex-col origin-top-right overflow-hidden bg-[var(--panel-bg)]"
+           >
+              <div className="px-4 border-b border-[var(--panel-border)]/50 pb-3 pt-4 flex items-center justify-between">
+                <span className="font-bold text-[14px] text-foreground tracking-wide">Notifications</span>
+                <span className="text-[10px] font-bold uppercase tracking-widest text-accent bg-accent/10 px-2 py-0.5 rounded-md">Admin</span>
+              </div>
+              <div className="max-h-[350px] overflow-y-auto w-full p-2 flex flex-col gap-1">
+                {notifications.length === 0 ? (
+                  <div className="p-6 text-center text-foreground/40 text-[13px] font-medium">No recent activity.</div>
+                ) : (
+                  notifications.map((n) => (
+                    <button
+                      key={n.id}
+                      onClick={() => handleNavigate(n.type)}
+                      className="w-full flex items-start gap-3 p-3 rounded-xl hover:bg-foreground/5 transition-all text-left group border border-transparent hover:border-[var(--panel-border)]"
+                    >
+                      <div className="mt-0.5 w-8 h-8 rounded-full flex items-center justify-center shrink-0 bg-foreground/5 text-notification-icon">
+                        {n.type === 'user' ? <User className="w-4 h-4" /> : n.type === 'submission' ? <Mail className="w-4 h-4" /> : <HelpCircle className="w-4 h-4" />}
+                      </div>
+                      <div className="flex flex-col flex-1 min-w-0 pr-2">
+                        <span className="text-[13px] font-semibold text-foreground group-hover:text-accent transition-colors truncate">{n.title}</span>
+                        <span className="text-[12px] text-foreground/60 truncate">{n.subtitle}</span>
+                        <span className="text-[10px] font-mono tracking-wide text-foreground/40 mt-1">{formatTime(n.time)}</span>
+                      </div>
+                    </button>
+                  ))
+                )}
+              </div>
+           </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

package/src/components/Button.test.tsx

@@ -0,0 +1,22 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Button } from '../components/Button';
+
+describe('Button component', () => {
+  it('renders correctly with given text', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByText('Click me')).toBeInTheDocument();
+  });
+
+  it('triggers onClick when properly clicked', () => {
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick}>Submit</Button>);
+    fireEvent.click(screen.getByText('Submit'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('shows loading state properly', () => {
+    render(<Button isLoading={true}>Submit</Button>);
+    expect(screen.queryByText('Submit')?.closest('span')).toHaveClass('opacity-0');
+  });
+});

package/src/components/Button.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { motion, type HTMLMotionProps } from 'framer-motion';
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+interface ButtonProps extends HTMLMotionProps<"button"> {
+  variant?: 'primary' | 'secondary' | 'ghost';
+  isLoading?: boolean;
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = 'primary', isLoading, children, ...props }, ref) => {
+    
+    const variants = {
+      primary: 'btn-primary !border-none',
+      secondary: 'btn-secondary !border-none',
+      ghost: 'bg-transparent hover:bg-black/5 dark:hover:bg-white/5 text-foreground/60 hover:text-foreground transition-all duration-300 !border-none',
+    };
+
+    return (
+      <motion.button
+        ref={ref}
+        whileHover={{ scale: 1.02, y: -2 }}
+        whileTap={{ scale: 0.98 }}
+        className={cn(
+          'relative inline-flex items-center justify-center px-5 py-2 text-sm font-medium transition-all duration-300 overflow-hidden group',
+          variants[variant],
+          className
+        )}
+        style={{ borderRadius: 'var(--btn-radius, 0.75rem)' }}
+        disabled={isLoading || props.disabled}
+        {...props}
+      >
+        {isLoading ? (
+          <span className="absolute inset-0 flex items-center justify-center">
+            <svg className="w-5 h-5 animate-spin text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+          </span>
+        ) : null}
+        <span className={cn("inline-flex items-center justify-center gap-2", isLoading && 'opacity-0')}>
+          {children as React.ReactNode}
+        </span>
+      </motion.button>
+    );
+  }
+);
+Button.displayName = 'Button';

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

@@ -0,0 +1,73 @@
+import { motion, AnimatePresence } from 'framer-motion';
+import { AlertCircle, Loader2 } from 'lucide-react';
+import { Button } from './Button';
+
+export interface ConfirmModalProps {
+  isOpen: boolean;
+  title: string;
+  message: React.ReactNode;
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  isProcessing?: boolean;
+  disableConfirm?: boolean;
+}
+
+export function ConfirmModal({
+  isOpen,
+  title,
+  message,
+  confirmText = 'Delete',
+  cancelText = 'Cancel',
+  onConfirm,
+  onCancel,
+  isProcessing = false,
+  disableConfirm = false
+}: ConfirmModalProps) {
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <motion.div 
+            onClick={() => !isProcessing && onCancel()} 
+            initial={{ opacity: 0 }} 
+            animate={{ opacity: 1 }} 
+            exit={{ opacity: 0 }} 
+            className="absolute inset-0 bg-background/80 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 }}
+            className="w-full max-w-[400px] p-6 rounded-3xl glass-panel border border-[var(--panel-border)] shadow-2xl relative z-10 text-center"
+          >
+            <div className="w-full flex flex-col items-center">
+              <h3 className="text-xl font-extrabold mb-2 text-foreground tracking-tight">{title}</h3>
+              <p className="text-[14px] font-medium text-foreground/60 leading-relaxed mb-6">
+                {message}
+              </p>
+              <div className="flex items-center gap-3 w-full">
+                <Button 
+                  variant="secondary"
+                  onClick={onCancel}
+                  disabled={isProcessing}
+                  className="flex-1 py-2.5 text-[13px] font-bold rounded-xl"
+                >
+                  {cancelText}
+                </Button>
+                <Button 
+                  onClick={onConfirm}
+                  disabled={isProcessing || disableConfirm}
+                  className="flex-1 py-2.5 text-[13px] font-bold rounded-xl bg-red-500 hover:bg-red-600 border-none text-white shadow-xl hover:shadow-red-500/20 glow-hover"
+                >
+                  {isProcessing ? <Loader2 className="w-5 h-5 animate-spin mx-auto" /> : confirmText}
+                </Button>
+              </div>
+            </div>
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>
+  );
+}

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