firebase-os 1.1.3 → 1.1.5

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

@@ -0,0 +1,334 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useAuth } from '../lib/AuthContext';
+import { db, storage } from '../lib/firebase';
+import { collection, onSnapshot, doc, updateDoc } from 'firebase/firestore';
+import { ref, uploadBytes, getDownloadURL } from 'firebase/storage';
+import { Users as UsersIcon, Loader2, CheckCircle2, User as UserIcon, Camera } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { DashboardNav } from '../components/DashboardNav';
+
+interface UserProfile {
+  id: string;
+  email: string;
+  displayName?: string;
+  role?: string;
+  avatar?: string;
+  photoURL?: string;
+  createdAt?: string;
+  inactive?: boolean;
+}
+
+export function UsersTab() {
+  const { user, userRole } = useAuth();
+  const [loadingMembers, setLoadingMembers] = useState(true);
+  const navigate = useNavigate();
+  const { id: paramUserId } = useParams();
+
+  const [members, setMembers] = useState<UserProfile[]>([]);
+  const [msg, setMsg] = useState<{ text: string, type: 'success' | 'error' } | null>(null);
+
+  const [editingName, setEditingName] = useState(false);
+  const [tempName, setTempName] = useState('');
+  const [photoLoading, setPhotoLoading] = useState(false);
+
+  const selectedMember = paramUserId ? members.find(m => m.id === paramUserId) || null : (members.length > 0 ? members[0] : null);
+
+  const setSelectedMember = (member: UserProfile | null) => {
+    if (member) navigate(`/users/${member.id}`);
+    else navigate(`/users`);
+  };
+
+  useEffect(() => {
+    setLoadingMembers(true);
+    const unsubscribe = onSnapshot(collection(db, 'user_profiles'), (snapshot) => {
+      const fetched: UserProfile[] = [];
+      snapshot.forEach(docSnap => {
+        fetched.push({ id: docSnap.id, ...docSnap.data() } as UserProfile);
+      });
+      setMembers(fetched);
+      setLoadingMembers(false);
+
+      if (!paramUserId && fetched.length > 0) {
+        navigate(`/users/${fetched[0].id}`, { replace: true });
+      }
+    }, (error) => {
+      console.error("Error fetching users:", error);
+      setLoadingMembers(false);
+    });
+
+    return () => unsubscribe();
+  }, [paramUserId, navigate]);
+
+  const myProfile = members.find(m => m.id === user?.uid);
+
+  const canManageTarget = (target: UserProfile) => {
+    if (target.id === myProfile?.id) return false;
+    if (target.role !== 'admin') return true;
+
+    // Legacy admins without createdAt are treated as absolute oldest
+    if (!myProfile?.createdAt) return true;
+    if (!target.createdAt) return false;
+
+    // Normal comparison: oldest wins
+    return new Date(myProfile.createdAt).getTime() <= new Date(target.createdAt).getTime();
+  };
+
+  const handleUpdateRole = async (target: UserProfile, newIsAdmin: boolean) => {
+    if (userRole !== 'admin' || !canManageTarget(target)) return;
+    try {
+      await updateDoc(doc(db, 'user_profiles', target.id), { role: newIsAdmin ? 'admin' : null });
+      setMsg({ text: `User role updated successfully`, type: 'success' });
+      setTimeout(() => setMsg(null), 3000);
+    } catch (err: any) {
+      setMsg({ text: err.message, type: 'error' });
+      setTimeout(() => setMsg(null), 3000);
+    }
+  };
+
+  const handleDeactivate = async (target: UserProfile, deactivated: boolean) => {
+    if (userRole !== 'admin' || !canManageTarget(target)) return;
+    try {
+      await updateDoc(doc(db, 'user_profiles', target.id), { inactive: deactivated });
+      setMsg({ text: `User ${deactivated ? 'deactivated' : 'activated'} successfully`, type: 'success' });
+      setTimeout(() => setMsg(null), 3000);
+    } catch (err: any) {
+      setMsg({ text: err.message, type: 'error' });
+      setTimeout(() => setMsg(null), 3000);
+    }
+  };
+
+  const handleNameSave = async () => {
+    setEditingName(false);
+    if (!selectedMember || !canManageTarget(selectedMember) || tempName === selectedMember.displayName) return;
+    try {
+      await updateDoc(doc(db, 'user_profiles', selectedMember.id), { displayName: tempName });
+      setMsg({ text: 'Name updated successfully', type: 'success' });
+      setTimeout(() => setMsg(null), 3000);
+    } catch (err: any) {
+      setMsg({ text: err.message, type: 'error' });
+      setTimeout(() => setMsg(null), 3000);
+    }
+  };
+
+  const handlePhotoUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file || !selectedMember || !canManageTarget(selectedMember)) return;
+    if (file.size > 2 * 1024 * 1024) {
+      setMsg({ text: 'File too large.', type: 'error' }); return;
+    }
+
+    setPhotoLoading(true);
+    try {
+      const storagePath = `user_avatars/${selectedMember.id}/file.png`;
+      const fileRef = ref(storage, storagePath);
+      await uploadBytes(fileRef, file);
+      const newPhotoURL = await getDownloadURL(fileRef);
+      await updateDoc(doc(db, 'user_profiles', selectedMember.id), { avatar: newPhotoURL });
+      setMsg({ text: 'Avatar successfully updated.', type: 'success' });
+      setTimeout(() => setMsg(null), 3000);
+    } catch (err: any) {
+      setMsg({ text: 'Failed to upload photo.', type: 'error' });
+    }
+    setPhotoLoading(false);
+  };
+
+  const [showLoader, setShowLoader] = useState(false);
+
+  useEffect(() => {
+    let timer: any;
+    if (loadingMembers && members.length === 0) {
+      timer = setTimeout(() => setShowLoader(true), 150);
+    } else {
+      setShowLoader(false);
+    }
+    return () => clearTimeout(timer);
+  }, [loadingMembers, members.length]);
+
+  if (loadingMembers && members.length === 0) {
+    if (!showLoader) return null;
+    return (
+      <div className="fixed inset-0 z-[100] flex items-center justify-center bg-background/60 backdrop-blur-xl transition-all duration-300">
+        <Loader2 className="w-8 h-8 animate-spin text-accent" />
+      </div>
+    );
+  }
+
+  return (
+    <main className="flex-1 w-full max-w-7xl mx-auto p-4 md:p-8 z-10 flex flex-col">
+
+      {/* Header */}
+      <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">
+          Users
+        </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" />
+          /users
+        </div>
+      </motion.div>
+
+      <div className="flex flex-col gap-6 animate-in fade-in duration-500 pb-20">
+
+        <AnimatePresence>
+          {msg && (
+            <motion.div
+              initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }}
+              className={`p-4 text-[14px] font-medium border ${msg.type === 'error' ? 'text-red-500 bg-red-500/10 border-red-500/20 shadow-[0_0_15px_rgba(239,68,68,0.1)]' : 'text-emerald-400 bg-emerald-500/10 border-emerald-500/20 shadow-[0_0_15px_rgba(52,211,153,0.1)]'} rounded-xl flex items-center gap-2`}
+            >
+              {msg.type === 'success' && <CheckCircle2 className="w-4 h-4 shrink-0" />}
+              {msg.text}
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        <div className="flex justify-start">
+          <DashboardNav />
+        </div>
+
+        <div className="glass-panel rounded-3xl border border-[var(--panel-border)] shadow-sm">
+          {members.length === 0 ? (
+            <div className="p-8 text-center text-foreground/50 text-[14px]">
+              No members found.
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-3 min-h-[500px]">
+              {/* Left Box: List */}
+              <div className="md:col-span-1 border-r md:border-r-[var(--panel-border)] border-b md:border-b-0 border-[var(--panel-border)] flex flex-col hide-scrollbar bg-black/5 dark:bg-white/5 rounded-t-3xl md:rounded-tr-none md:rounded-l-3xl">
+                <div className="p-4 border-b border-[var(--panel-border)] font-bold text-[13px] text-foreground/70 uppercase tracking-wider">
+                  System Users
+                </div>
+                <div className="flex-1 overflow-y-auto p-4 space-y-2">
+                  {members.map(member => (
+                    <div
+                      key={member.id}
+                      onClick={() => setSelectedMember(member)}
+                      className={`p-4 py-5 rounded-2xl border transition-all flex items-center gap-4 cursor-pointer ${selectedMember?.id === member.id ? 'bg-accent/10 border-accent/40 shadow-sm' : 'glass-panel border-transparent hover:border-[var(--panel-border)]'
+                        } ${member.inactive ? 'opacity-50 grayscale' : ''}`}
+                    >
+                      <div className="w-12 h-12 rounded-full overflow-hidden bg-accent/20 shrink-0 flex items-center justify-center border border-[var(--panel-border)]">
+                        {(member.avatar || member.photoURL) ? (
+                          <img src={member.avatar || member.photoURL} alt="" className="w-full h-full object-cover" />
+                        ) : (
+                          <UserIcon className="w-5 h-5 text-accent" />
+                        )}
+                      </div>
+                      <div className="flex flex-col truncate">
+                        <span className="font-bold text-[14px] truncate">{member.displayName || 'No Name'}</span>
+                        <span className="text-[11px] text-foreground/50 truncate font-mono mt-0.5">{member.email}</span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Right Box: Preview */}
+              <div className="md:col-span-2 flex flex-col p-6 md:p-10 relative">
+                {selectedMember ? (
+                  <div className="animate-in fade-in duration-300 w-full max-w-lg">
+
+                    <div className="flex flex-col md:flex-row gap-6 md:gap-8 items-start mb-10">
+                      <div className="w-24 h-24 rounded-full glass-panel border-4 border-[var(--panel-border)] shadow-xl bg-accent/10 flex items-center justify-center relative overflow-hidden shrink-0 group">
+                        {photoLoading ? (
+                          <Loader2 className="w-8 h-8 text-accent animate-spin" />
+                        ) : (selectedMember.avatar || selectedMember.photoURL) ? (
+                          <img src={selectedMember.avatar || selectedMember.photoURL} alt="Avatar" className="w-full h-full object-cover" />
+                        ) : (
+                          <UserIcon className="w-10 h-10 text-accent" />
+                        )}
+
+                        {!photoLoading && canManageTarget(selectedMember) && (
+                          <div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center z-10 backdrop-blur-md">
+                            <label className="flex flex-col items-center justify-center cursor-pointer p-2 hover:bg-white/20 transition-colors text-white rounded-full" title="Upload Photo">
+                              <Camera className="w-5 h-5" />
+                              <input type="file" accept="image/*" onChange={handlePhotoUpload} className="hidden" />
+                            </label>
+                          </div>
+                        )}
+                      </div>
+
+                      <div className="flex flex-col mt-2 flex-1 w-full relative">
+                        {editingName ? (
+                          <input
+                            autoFocus
+                            value={tempName}
+                            onChange={e => setTempName(e.target.value)}
+                            onBlur={handleNameSave}
+                            onKeyDown={e => e.key === 'Enter' && handleNameSave()}
+                            className="text-2xl md:text-3xl font-extrabold mb-1 bg-transparent border-b-2 border-accent outline-none text-foreground w-full py-1"
+                          />
+                        ) : (
+                          <h3
+                            onDoubleClick={() => {
+                              if (canManageTarget(selectedMember)) {
+                                setTempName(selectedMember.displayName || '');
+                                setEditingName(true);
+                              }
+                            }}
+                            className={`text-2xl md:text-3xl font-extrabold mb-1 select-none ${canManageTarget(selectedMember) ? 'cursor-pointer hover:text-accent transition-colors' : ''}`}
+                            title={canManageTarget(selectedMember) ? "Double-click to edit" : ""}
+                          >
+                            {selectedMember.displayName || 'No Name'}
+                          </h3>
+                        )}
+                        <p className="text-[14px] font-mono text-foreground/50">{selectedMember.email}</p>
+
+                        {!canManageTarget(selectedMember) && selectedMember.id !== myProfile?.id && (
+                          <div className="mt-3 inline-block self-start px-3 py-1.5 rounded-lg bg-foreground/5 border border-[var(--panel-border)] text-[11px] font-bold text-foreground/50 tracking-wide uppercase">
+                            Privileged Admin Account
+                          </div>
+                        )}
+                      </div>
+                    </div>
+
+                    <div className="flex flex-col gap-3">
+                      <div className="p-4 rounded-2xl glass-panel border border-[var(--panel-border)] flex items-center justify-between">
+                        <div className="flex flex-col">
+                          <span className="font-bold text-[14px] text-foreground">Admin Access</span>
+                          <span className="text-[12px] text-foreground/50">Toggle system privileges</span>
+                        </div>
+                        <button
+                          type="button"
+                          disabled={!canManageTarget(selectedMember)}
+                          onClick={() => handleUpdateRole(selectedMember, selectedMember.role !== 'admin')}
+                          className={`relative inline-flex h-7 w-12 items-center rounded-full transition-colors focus:outline-none shadow-inner ${selectedMember.role === 'admin' ? 'bg-accent' : 'bg-foreground/20'} ${!canManageTarget(selectedMember) ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
+                        >
+                          <span className={`inline-block h-5 w-5 transform rounded-full bg-white transition-transform shadow-md ${selectedMember.role === 'admin' ? 'translate-x-6' : 'translate-x-1'}`} />
+                        </button>
+                      </div>
+
+                      <div className={`p-4 rounded-2xl glass-panel border flex items-center justify-between ${selectedMember.inactive ? 'border-amber-500/30 bg-amber-500/5' : 'border-red-500/20 bg-red-500/5'}`}>
+                        <div className="flex flex-col">
+                          <span className={`font-bold text-[14px] ${selectedMember.inactive ? 'text-amber-500' : 'text-red-500'}`}>{selectedMember.inactive ? 'Reactivate User' : 'Deactivate User'}</span>
+                          <span className={`text-[12px] ${selectedMember.inactive ? 'text-amber-500/70' : 'text-red-500/70'}`}>Block access to this app</span>
+                        </div>
+                        <button
+                          type="button"
+                          disabled={!canManageTarget(selectedMember)}
+                          onClick={() => handleDeactivate(selectedMember, !selectedMember.inactive)}
+                          className={`relative inline-flex h-7 w-12 items-center rounded-full transition-colors focus:outline-none shadow-inner ${selectedMember.inactive ? 'bg-amber-500' : 'bg-red-500/20'} ${!canManageTarget(selectedMember) ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
+                        >
+                          <span className={`inline-block h-5 w-5 transform rounded-full bg-white transition-transform shadow-md ${selectedMember.inactive ? 'translate-x-6' : 'translate-x-1'}`} />
+                        </button>
+                      </div>
+                    </div>
+
+                  </div>
+                ) : (
+                  <div className="absolute inset-0 flex flex-col items-center justify-center opacity-30 pointer-events-none">
+                    <UsersIcon className="w-12 h-12 mb-4" />
+                    <p className="font-bold tracking-widest uppercase text-[12px]">Select a User</p>
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </main>
+  );
+}

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

@@ -0,0 +1,95 @@
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+import { Mail } from 'lucide-react';
+import { useAuth } from '../lib/AuthContext';
+import { Button } from '../components/Button';
+import { sendEmailVerification } from 'firebase/auth';
+import { auth } from '../lib/firebase';
+import { useNavigate } from 'react-router-dom';
+
+export function Verify() {
+  const { user, refreshUser } = useAuth();
+  const navigate = useNavigate();
+  const [verifying, setVerifying] = useState(false);
+  const [resending, setResending] = useState(false);
+  const [msg, setMsg] = useState('');
+
+  const handleVerify = async () => {
+    setVerifying(true);
+    setMsg('');
+    try {
+      if (auth.currentUser) {
+        await auth.currentUser.reload();
+        if (!auth.currentUser.emailVerified) {
+          setMsg('Email is not verified yet. Please check your inbox.');
+          setVerifying(false);
+          return;
+        }
+        // Force refresh JWT so the rest of the app sees the verified state
+        await auth.currentUser.getIdToken(true);
+        await refreshUser();
+        navigate('/dashboard');
+      }
+    } catch (e) {
+      setMsg('Something went wrong. Please try again.');
+      setVerifying(false);
+    }
+  };
+
+  const handleResend = async () => {
+    if (user) {
+      setResending(true);
+      setMsg('');
+      try {
+        await sendEmailVerification(user);
+        setMsg('Verification email sent! Please check your inbox.');
+      } catch (err: any) {
+        if (err?.code === 'auth/too-many-requests') {
+          setMsg('Failed to resend: Please wait a minute before trying again.');
+        } else {
+          setMsg(err?.message || 'Failed to resend. Please try again later.');
+        }
+      } finally {
+        setResending(false);
+      }
+    }
+  };
+
+  return (
+    <div className="flex-1 flex items-center justify-center w-full z-10 px-4 mb-16">
+      <motion.div
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        className="w-full max-w-[480px] p-6 md:p-8 lg:p-10 rounded-3xl glass-panel relative glow-hover text-center shadow-[0_8px_32px_rgba(0,0,0,0.08)]"
+      >
+        <div className="absolute -inset-[1px] bg-gradient-to-br from-[var(--primary-glow)] to-transparent opacity-30 blur-[20px] rounded-3xl -z-10" />
+
+        <div className="w-14 h-14 md:w-16 md:h-16 rounded-2xl glass-panel border border-[var(--panel-border)] flex items-center justify-center mx-auto mb-5 md:mb-6 animate-float shadow-xl">
+          <Mail className="w-7 h-7 md:w-8 md:h-8 text-accent opacity-90" />
+        </div>
+        
+        <h1 className="text-2xl md:text-3xl font-extrabold mb-3 text-foreground tracking-tight">Verify your email</h1>
+        <p className="text-[14px] md:text-[15px] text-foreground/60 mb-6 md:mb-8 leading-[1.6] tracking-wide">
+          We've sent a verification link to <span className="font-semibold text-foreground">{user?.email}</span>. 
+          Please check your inbox (and spam folder) to verify your account and access your dashboard.
+        </p>
+
+        {msg && (
+          <div className={`p-3 md:p-4 mb-5 md:mb-6 text-[13px] md:text-[14px] font-medium rounded-xl border ${msg.includes('Failed') || msg.includes('not verified') || msg.includes('wrong') ? 'text-red-400 bg-red-500/10 border-red-500/20' : 'text-emerald-400 bg-emerald-500/10 border-emerald-500/20'}`}>
+            {msg}
+          </div>
+        )}
+
+        <div className="flex flex-col gap-3 max-w-[360px] mx-auto">
+           <Button variant="primary" onClick={handleVerify} isLoading={verifying} className="w-full py-2.5 md:py-3 text-[14px] font-bold tracking-wide rounded-xl transition-all hover:-translate-y-0.5">
+             I've verified my email
+           </Button>
+           <Button variant="ghost" onClick={handleResend} isLoading={resending} className="w-full py-2.5 md:py-3 text-[13px] md:text-[14px] font-semibold tracking-wide rounded-xl transition-all hover:-translate-y-0.5">
+             Resend verification link
+           </Button>
+        </div>
+      </motion.div>
+    </div>
+  );
+}

package/src/prompts/index.ts

@@ -0,0 +1,13 @@
+export * from './pages/publicPage';
+export * from './tabs/calendar/privatecalendar';
+export * from './tabs/calendar/admincalendar';
+export * from './tabs/calendar/publiccalendar';
+export * from './tabs/board/privateboard';
+export * from './tabs/board/adminboard';
+export * from './tabs/board/publicboard';
+export * from './tabs/table/privatetable';
+export * from './tabs/table/admintable';
+export * from './tabs/table/publictable';
+export * from './tabs/crud/shared';
+export * from './tabs/crud/admin';
+export * from './tabs/crud/private';