firebase-os 1.1.3 → 1.1.5

package/src/App.tsx

@@ -0,0 +1,214 @@
+import { BrowserRouter, Routes, Route, Navigate, useLocation, useSearchParams } from 'react-router-dom';
+import { AuthProvider, useAuth } from './lib/AuthContext';
+import { Navbar } from './components/Navbar';
+import { Home } from './pages/Home';
+import { Register } from './pages/Register';
+import { Login } from './pages/Login';
+import { Verify } from './pages/Verify';
+import { Profile } from './pages/Profile';
+import { ResetPassword } from './pages/ResetPassword';
+import { UsersTab as Users } from './pages/Users';
+import { SettingsTab as Settings } from './pages/Settings';
+import { Submissions } from './pages/Submissions';
+import { Requests } from './pages/Requests';
+import { StorageAdmin } from './pages/StorageAdmin';
+import { Templates } from './pages/Templates';
+import { TemplateInlineForm } from './templates/TemplateInlineForm';
+import { TemplatePopupForm } from './templates/TemplatePopupForm';
+import { TemplateConfirmation } from './templates/TemplateConfirmation';
+import { TemplateBoard } from './templates/TemplateBoard';
+import { TemplateTable } from './templates/TemplateTable';
+import { TemplateCalendar } from './templates/TemplateCalendar';
+import { ThemeAdmin } from './pages/ThemeAdmin';
+import { PagesAdmin } from './pages/PagesAdmin';
+import { FormsAdmin } from './pages/FormsAdmin';
+import { DynamicPage } from './pages/DynamicPage';
+import { Setup, isSetupComplete } from './pages/Setup';
+import { motion } from 'framer-motion';
+import { Database } from 'lucide-react';
+import { Dashboard } from './pages/Dashboard';
+import { useConfig } from './lib/ConfigContext';
+
+const PageLoader = () => (
+  <div className="flex-1 flex flex-col items-center justify-center min-h-[60vh] z-10 animate-in fade-in duration-500">
+    <div className="w-12 h-12 rounded-xl glass-panel border border-[var(--panel-border)] flex items-center justify-center mb-6 shadow-xl">
+      <Database className="w-6 h-6 text-accent animate-pulse" />
+    </div>
+    <div className="flex items-center gap-3 glass-panel px-5 py-2.5 rounded-full border border-[var(--panel-border)]">
+      <div className="w-4 h-4 border-2 border-accent border-t-transparent rounded-full animate-spin" />
+      <span className="text-[13px] font-bold tracking-widest uppercase text-foreground/70">Connecting</span>
+    </div>
+  </div>
+);
+
+function PrivateRoute({ children }: { children: React.ReactNode }) {
+  const { user, loading, userInactive, signOut, roleResolved } = useAuth();
+  const location = useLocation();
+  if (loading || !roleResolved) return <PageLoader />;
+  if (!user) return <Navigate to={`/login?from=${encodeURIComponent(location.pathname)}`} />;
+  if (userInactive) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center relative z-10 min-h-[60vh] animate-in fade-in duration-500">
+        <div className="glass-panel p-8 md:p-10 rounded-3xl border border-red-500/20 text-center shadow-xl max-w-sm w-full relative overflow-hidden">
+          <div className="absolute inset-0 bg-red-500/5" />
+          <h2 className="text-2xl font-black text-red-500 mb-3 relative z-10 tracking-tight">Access Denied</h2>
+          <p className="text-[14px] text-foreground/70 font-medium leading-relaxed relative z-10 mb-6">You don't have access to this app. Please contact the administrator.</p>
+          <button onClick={() => signOut()} className="w-full relative z-10 py-2.5 bg-foreground/5 hover:bg-foreground/10 text-foreground text-[14px] font-bold rounded-xl transition-colors">Sign Out</button>
+        </div>
+      </div>
+    );
+  }
+  if (!user.emailVerified) return <Navigate to="/verify" />;
+  return <>{children}</>;
+}
+
+function PublicRoute({ children }: { children: React.ReactNode }) {
+  const { user, loading, roleResolved } = useAuth();
+  const [searchParams] = useSearchParams();
+  if (loading || !roleResolved) return <PageLoader />;
+  if (user && user.emailVerified) {
+    const from = searchParams.get('from') || '/dashboard';
+    return <Navigate to={from} replace />;
+  }
+  return <>{children}</>;
+}
+
+function VerifyRoute({ children }: { children: React.ReactNode }) {
+  const { user, loading, roleResolved } = useAuth();
+  if (loading || !roleResolved) return <PageLoader />;
+  if (!user) return <Navigate to="/" />;
+  if (user.emailVerified) return <Navigate to="/dashboard" />;
+  return <>{children}</>;
+}
+
+function AdminRoute({ children }: { children: React.ReactNode }) {
+  const { user, userRole, loading, userInactive, signOut, roleResolved } = useAuth();
+  const location = useLocation();
+  if (loading || !roleResolved) return <PageLoader />;
+  if (!user) return <Navigate to={`/login?from=${encodeURIComponent(location.pathname)}`} />;
+  if (userInactive) {
+    return (
+      <div className="flex-1 flex flex-col items-center justify-center relative z-10 min-h-[60vh] animate-in fade-in duration-500">
+        <div className="glass-panel p-8 md:p-10 rounded-3xl border border-red-500/20 text-center shadow-xl max-w-sm w-full relative overflow-hidden">
+          <div className="absolute inset-0 bg-red-500/5" />
+          <h2 className="text-2xl font-black text-red-500 mb-3 relative z-10 tracking-tight">Access Denied</h2>
+          <p className="text-[14px] text-foreground/70 font-medium leading-relaxed relative z-10 mb-6">You don't have access to this app. Please contact the administrator.</p>
+          <button onClick={() => signOut()} className="w-full relative z-10 py-2.5 bg-foreground/5 hover:bg-foreground/10 text-foreground text-[14px] font-bold rounded-xl transition-colors">Sign Out</button>
+        </div>
+      </div>
+    );
+  }
+  if (!user.emailVerified) return <Navigate to="/verify" />;
+  if (userRole !== 'admin') return <Navigate to="/dashboard" />;
+  return <>{children}</>;
+}
+
+// ── Background decoration (shared between setup and main app) ──
+function BgDecor() {
+  return (
+    <div className="fixed top-0 left-0 w-full h-full pointer-events-none -z-0 overflow-hidden">
+      <motion.div
+        animate={{ scale: [1, 1.1, 1], opacity: [0.6, 1, 0.6] }}
+        transition={{ duration: 12, repeat: Infinity, ease: "easeInOut" }}
+        className="absolute -top-[30%] md:-top-[400px] -right-[10%] md:-right-[200px] w-[500px] md:w-[800px] h-[500px] md:h-[800px] rounded-full bg-decorator-1 blur-[80px] md:blur-[120px]"
+      />
+      <motion.div
+        animate={{ scale: [1, 1.2, 1], opacity: [0.5, 0.9, 0.5] }}
+        transition={{ duration: 18, repeat: Infinity, ease: "easeInOut", delay: 2 }}
+        className="absolute -bottom-[20%] md:-bottom-[300px] -left-[10%] md:-left-[100px] w-[400px] md:w-[600px] h-[400px] md:h-[600px] rounded-full bg-decorator-2 blur-[60px] md:blur-[100px]"
+      />
+    </div>
+  );
+}
+
+// ── The authenticated app with Navbar + routes ──
+function AuthenticatedApp() {
+  const config = useConfig();
+  const HomeComponent = config.components?.Home || Home;
+
+  return (
+    <AuthProvider>
+      <div className="min-h-screen relative flex flex-col overflow-x-hidden">
+        <Navbar />
+
+        <Routes>
+          <Route path="/" element={<PublicRoute><HomeComponent /></PublicRoute>} />
+          <Route path="/register" element={<PublicRoute><Register /></PublicRoute>} />
+          <Route path="/login" element={<PublicRoute><Login /></PublicRoute>} />
+          <Route path="/reset-password" element={<PublicRoute><ResetPassword /></PublicRoute>} />
+
+          <Route path="/verify" element={<VerifyRoute><Verify /></VerifyRoute>} />
+
+          {/* Templates */}
+          <Route path="/templates" element={<Templates />} />
+          <Route path="/templates/inline_form" element={<TemplateInlineForm />} />
+          <Route path="/templates/popup_form" element={<TemplatePopupForm />} />
+          <Route path="/templates/confirmation" element={<TemplateConfirmation />} />
+          <Route path="/templates/board" element={<TemplateBoard />} />
+          <Route path="/templates/table" element={<TemplateTable />} />
+          <Route path="/templates/calendar" element={<TemplateCalendar />} />
+
+          <Route path="/users" element={<AdminRoute><Users /></AdminRoute>} />
+          <Route path="/users/:id" element={<AdminRoute><Users /></AdminRoute>} />
+          <Route path="/submissions" element={<AdminRoute><Submissions /></AdminRoute>} />
+          <Route path="/requests" element={<AdminRoute><Requests /></AdminRoute>} />
+          <Route path="/drive/*" element={<PrivateRoute><StorageAdmin /></PrivateRoute>} />
+          <Route path="/theme" element={<AdminRoute><ThemeAdmin /></AdminRoute>} />
+          <Route path="/pages/*" element={<AdminRoute><PagesAdmin /></AdminRoute>} />
+          <Route path="/forms/*" element={<AdminRoute><FormsAdmin /></AdminRoute>} />
+          <Route path="/settings" element={<AdminRoute><Settings /></AdminRoute>} />
+          <Route path="/profile" element={<PrivateRoute><Profile /></PrivateRoute>} />
+          <Route path="/dashboard" element={<PrivateRoute><Dashboard /></PrivateRoute>} />
+
+          {/* Setup (accessible even after completion for reference) */}
+          <Route path="/setup" element={<Setup />} />
+
+          {/* Dynamic Content Routing */}
+          <Route path="*" element={<DynamicPage />} />
+        </Routes>
+
+        <BgDecor />
+      </div>
+    </AuthProvider>
+  );
+}
+
+function App() {
+  // If setup is not complete AND user is NOT on /setup, redirect to /setup.
+  // The Setup page itself is rendered outside AuthProvider to avoid Firebase init errors.
+  return (
+    <BrowserRouter>
+      <SetupGate />
+    </BrowserRouter>
+  );
+}
+
+function SetupGate() {
+  const config = useConfig();
+
+  // If firebaseConfig was passed as props (library mode), check if it has real values
+  const hasPropsConfig = config.firebaseConfig &&
+    config.firebaseConfig.apiKey &&
+    config.firebaseConfig.apiKey.trim() !== '' &&
+    config.firebaseConfig.projectId &&
+    config.firebaseConfig.projectId.trim() !== '';
+
+  // Props config takes priority; otherwise fall back to env var check
+  const setupDone = hasPropsConfig || isSetupComplete();
+
+  // If setup not complete, always show Setup regardless of current URL
+  if (!setupDone) {
+    return (
+      <div className="min-h-screen relative flex flex-col overflow-x-hidden">
+        <Navbar standalone={true} />
+        <Setup standalone />
+        <BgDecor />
+      </div>
+    );
+  }
+
+  // Setup is complete — render the full app (which includes /setup route for reference)
+  return <AuthenticatedApp />;
+}
+
+export default App;

package/src/FirebaseOS.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { ThemeProvider } from './lib/ThemeContext';
+import { ConfigProvider, type FirebaseOSConfig } from './lib/ConfigContext';
+import { initializeFirebase } from './lib/firebase';
+import App from './App';
+
+// ── Import CSS so Tailwind utilities are bundled into the library ──
+import './index.css';
+
+// ── Public Props API ─────────────────────────────────────────────────────
+
+export interface FirebaseOSProps {
+  /** Skip the setup wizard — pass Firebase config directly */
+  firebaseConfig?: {
+    apiKey: string;
+    authDomain: string;
+    projectId: string;
+    storageBucket: string;
+    messagingSenderId: string;
+    appId: string;
+  };
+
+  /** Admin email addresses (replaces VITE_ADMIN_EMAILS env var) */
+  adminEmails?: string[];
+
+  /** Custom basename for the router (e.g., "/app") */
+  basename?: string;
+
+  /** Called when auth state changes */
+  onAuthChange?: (user: any) => void;
+
+  /** Override the theme configuration */
+  themeConfig?: any;
+
+  /** Component overrides for the hybrid template architecture */
+  components?: {
+    Home?: React.ComponentType<any>;
+    TemplateBoard?: React.ComponentType<any>;
+    TemplateTable?: React.ComponentType<any>;
+    TemplateCalendar?: React.ComponentType<any>;
+    TemplatePopupForm?: React.ComponentType<any>;
+    TemplateInlineForm?: React.ComponentType<any>;
+    TemplatePages?: React.ComponentType<any>;
+    TemplateStorage?: React.ComponentType<any>;
+    TemplateNone?: React.ComponentType<any>;
+  };
+}
+
+// ── The Library Component ────────────────────────────────────────────────
+// This is the single public export. It wraps the entire OS in providers
+// and handles Firebase initialization from props when available.
+
+export function FirebaseOS(props: FirebaseOSProps) {
+  // If the consumer passed firebaseConfig as props, initialize Firebase
+  // before any child component tries to use auth/db/storage.
+  if (props.firebaseConfig) {
+    initializeFirebase(props.firebaseConfig);
+  }
+
+  const config: FirebaseOSConfig = {
+    firebaseConfig: props.firebaseConfig,
+    adminEmails: props.adminEmails,
+    basename: props.basename,
+    onAuthChange: props.onAuthChange,
+    themeConfig: props.themeConfig,
+    components: props.components,
+  };
+
+  return (
+    <ConfigProvider config={config}>
+      <ThemeProvider scopeSelector=".firebase-os">
+        <div 
+          className="firebase-os flex-1 flex flex-col min-h-screen"
+        >
+          <App />
+        </div>
+      </ThemeProvider>
+    </ConfigProvider>
+  );
+}

package/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/src/assets/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="77" height="47" fill="none" aria-labelledby="vite-logo-title" viewBox="0 0 77 47"><title id="vite-logo-title">Vite</title><style>.parenthesis{fill:#000}@media (prefers-color-scheme:dark){.parenthesis{fill:#fff}}</style><path fill="#9135ff" d="M40.151 45.71c-.663.844-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.493c-.92 0-1.457-1.04-.92-1.788l7.479-10.471c1.07-1.498 0-3.578-1.842-3.578H15.443c-.92 0-1.456-1.04-.92-1.788l9.696-13.576c.213-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.472c-1.07 1.497 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.087.89 1.83L40.153 45.712z"/><mask id="a" width="48" height="47" x="14" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M40.047 45.71c-.663.843-2.02.374-2.02-.699V34.708a2.26 2.26 0 0 0-2.262-2.262H24.389c-.92 0-1.457-1.04-.92-1.788l7.479-10.472c1.07-1.497 0-3.578-1.842-3.578H15.34c-.92 0-1.456-1.04-.92-1.788l9.696-13.575c.213-.297.556-.474.92-.474H53.93c.92 0 1.456 1.04.92 1.788L47.37 13.03c-1.07 1.498 0 3.578 1.842 3.578h11.376c.944 0 1.474 1.088.89 1.831L40.049 45.712z"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#eee6ff" rx="5.508" ry="14.704" transform="rotate(269.814 20.96 11.29)scale(-1 1)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#eee6ff" rx="10.399" ry="29.851" transform="rotate(89.814 -16.902 -8.275)scale(1 -1)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#8900ff" rx="5.508" ry="30.487" transform="rotate(89.814 -19.197 -7.127)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.928 4.177)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#8900ff" rx="5.508" ry="30.599" transform="rotate(89.814 -25.738 5.52)scale(1 -1)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#eee6ff" rx="14.072" ry="22.078" transform="rotate(93.35 31.245 55.578)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#8900ff" rx="3.47" ry="21.501" transform="rotate(89.009 35.419 55.202)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx="14.592" cy="9.743" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(39.51 14.592 9.743)"/></g><g filter="url(#k)"><ellipse cx="61.728" cy="-5.321" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 61.728 -5.32)"/></g><g filter="url(#l)"><ellipse cx="55.618" cy="7.104" fill="#00c2ff" rx="5.971" ry="9.665" transform="rotate(37.892 55.618 7.104)"/></g><g filter="url(#m)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#n)"><ellipse cx="12.326" cy="39.103" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 12.326 39.103)"/></g><g filter="url(#o)"><ellipse cx="49.857" cy="30.678" fill="#8900ff" rx="4.407" ry="29.108" transform="rotate(37.892 49.857 30.678)"/></g><g filter="url(#p)"><ellipse cx="52.623" cy="33.171" fill="#00c2ff" rx="5.971" ry="15.297" transform="rotate(37.892 52.623 33.17)"/></g></g><path d="M6.919 0c-9.198 13.166-9.252 33.575 0 46.789h6.215c-9.25-13.214-9.196-33.623 0-46.789zm62.424 0h-6.215c9.198 13.166 9.252 33.575 0 46.789h6.215c9.25-13.214 9.196-33.623 0-46.789" class="parenthesis"/><defs><filter id="b" width="60.045" height="41.654" x="-5.564" y="16.92" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-40.407" y="-6.762" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-35.435" y="2.801" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-30.84" y="20.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-29.307" y="21.949" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="29.961" y="-17.13" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="37.754" y="3.055" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-13.43" y="-22.082" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="34.321" y="-37.644" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="38.847" y="-10.552" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-15.081" y="6.78" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="22.45" y="-1.645" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="32.919" y="11.36" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17286" stdDeviation="4.596"/></filter></defs></svg>

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