firebase-os 1.1.4 → 1.1.6

package/src/pages/Setup.tsx

@@ -0,0 +1,407 @@
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { Sun, Moon, Database, CheckCircle2, AlertCircle, ShieldCheck, Copy, Check, Loader2, Settings, Mail, MessageCircle } from 'lucide-react';
+import { Link } from 'react-router-dom';
+import { themeConfig } from '../configs/theme.config';
+import { Whatsapp, RefreshDouble } from 'iconoir-react';
+
+// ── This page must NOT import firebase.ts, AuthContext, or ThemeContext ──
+// It renders before Firebase is configured.
+
+// ── Environment key validation ───────────────────────────────────────────────
+
+const REQUIRED_KEYS = [
+  { key: 'VITE_FIREBASE_API_KEY',            label: 'API Key' },
+  { key: 'VITE_FIREBASE_AUTH_DOMAIN',        label: 'Auth Domain' },
+  { key: 'VITE_FIREBASE_PROJECT_ID',         label: 'Project ID' },
+  { key: 'VITE_FIREBASE_STORAGE_BUCKET',     label: 'Storage Bucket' },
+  { key: 'VITE_FIREBASE_MESSAGING_SENDER_ID', label: 'Messaging Sender ID' },
+  { key: 'VITE_FIREBASE_APP_ID',             label: 'App ID' },
+];
+
+function getEnvVal(key: string): string {
+  // Static access is required for Vite to replace env variables at build time.
+  let val: any;
+  try {
+    switch (key) {
+      case 'VITE_FIREBASE_API_KEY': val = import.meta.env.VITE_FIREBASE_API_KEY; break;
+      case 'VITE_FIREBASE_AUTH_DOMAIN': val = import.meta.env.VITE_FIREBASE_AUTH_DOMAIN; break;
+      case 'VITE_FIREBASE_PROJECT_ID': val = import.meta.env.VITE_FIREBASE_PROJECT_ID; break;
+      case 'VITE_FIREBASE_STORAGE_BUCKET': val = import.meta.env.VITE_FIREBASE_STORAGE_BUCKET; break;
+      case 'VITE_FIREBASE_MESSAGING_SENDER_ID': val = import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID; break;
+      case 'VITE_FIREBASE_APP_ID': val = import.meta.env.VITE_FIREBASE_APP_ID; break;
+      case 'VITE_ADMIN_EMAILS': val = import.meta.env.VITE_ADMIN_EMAILS; break;
+    }
+    if (val && typeof val === 'string' && val.trim() !== '') return val;
+  } catch {}
+
+  // Check localStorage for config saved by the setup wizard (library mode fallback)
+  try {
+    const saved = localStorage.getItem('firebase_config');
+    if (saved) {
+      const config = JSON.parse(saved);
+      const keyMap: Record<string, string> = {
+        'VITE_FIREBASE_API_KEY': 'apiKey',
+        'VITE_FIREBASE_AUTH_DOMAIN': 'authDomain',
+        'VITE_FIREBASE_PROJECT_ID': 'projectId',
+        'VITE_FIREBASE_STORAGE_BUCKET': 'storageBucket',
+        'VITE_FIREBASE_MESSAGING_SENDER_ID': 'messagingSenderId',
+        'VITE_FIREBASE_APP_ID': 'appId',
+        'VITE_ADMIN_EMAILS': 'adminEmails',
+      };
+      const configKey = keyMap[key];
+      if (configKey && config[configKey]) return config[configKey];
+    }
+  } catch (e) {}
+
+  return '';
+}
+
+// Environment key status
+export function getEnvStatus() {
+  const missing: string[] = [];
+  for (const { key, label } of REQUIRED_KEYS) {
+    const v = getEnvVal(key);
+    if (!v || v.trim() === '') {
+      console.log('Missing key:', key, v);
+      missing.push(label);
+    } else {
+      console.log('Found key:', key, v);
+    }
+  }
+  
+  const adminEmails = getEnvVal('VITE_ADMIN_EMAILS');
+  const missingAdminEmails = !adminEmails || adminEmails.trim() === '';
+  
+  console.log('Setup complete?', missing.length === 0, missing);
+  return { allSet: missing.length === 0, missing, missingAdminEmails };
+}
+
+export function isSetupComplete(): boolean {
+  return getEnvStatus().allSet;
+}
+
+import firestoreRulesRaw from '../../firestore.rules?raw';
+import storageRulesRaw from '../../storage.rules?raw';
+
+const firestoreRules = firestoreRulesRaw;
+const storageRules = storageRulesRaw;
+
+const envExample = `VITE_FIREBASE_API_KEY=AIzaSyDxJ...
+VITE_FIREBASE_AUTH_DOMAIN=myproject.firebaseapp.com
+VITE_FIREBASE_PROJECT_ID=myproject
+VITE_FIREBASE_STORAGE_BUCKET=myproject.firebasestorage.app
+VITE_FIREBASE_MESSAGING_SENDER_ID=123456789012
+VITE_FIREBASE_APP_ID=1:123456789012:web:abcdef123456
+VITE_ADMIN_EMAILS=your@email.com,other@email.com`;
+
+// ── Buttons ───────────────────────────────────────────────────────────────
+
+function CopyButton({ code, label }: { code: string; label: string }) {
+  const [copied, setCopied] = React.useState(false);
+  const handleCopy = () => { navigator.clipboard.writeText(code); setCopied(true); setTimeout(() => setCopied(false), 2000); };
+  return (
+    <motion.button
+      whileHover={{ scale: 1.02 }}
+      whileTap={{ scale: 0.98 }}
+      onClick={handleCopy}
+      className={`inline-flex items-center gap-2 px-4 py-2 mt-2 rounded-xl text-[13px] font-bold tracking-wide transition-all ${copied ? 'bg-emerald-500/10 text-emerald-500 border border-emerald-500/20' : 'btn-secondary shadow-sm'}`}
+    >
+      {copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
+      {copied ? 'Copied to Clipboard!' : label}
+    </motion.button>
+  );
+}
+
+function EnvBlock({ code }: { code: string }) {
+  const [copied, setCopied] = React.useState(false);
+  const handleCopy = () => { navigator.clipboard.writeText(code); setCopied(true); setTimeout(() => setCopied(false), 2000); };
+  return (
+    <div className="my-5 glass-panel border border-[var(--panel-border)] rounded-2xl overflow-hidden shadow-inner bg-background">
+      <div className="flex items-center justify-between px-4 py-2.5 border-b border-[var(--panel-border)]/50 bg-foreground/[0.02]">
+        <div className="flex items-center gap-2">
+          <Settings className="w-3.5 h-3.5 text-foreground/30" />
+          <span className="text-[11px] font-bold uppercase tracking-widest text-foreground/30">.env</span>
+        </div>
+        <button onClick={handleCopy} className={`text-[11px] font-bold uppercase tracking-wider flex items-center gap-1.5 transition-colors ${copied ? 'text-emerald-500' : 'text-accent hover:text-accent-deep'}`}>
+          {copied ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
+          {copied ? 'Copied' : 'Copy'}
+        </button>
+      </div>
+      <pre className="p-4 md:p-5 overflow-x-auto text-[13px] leading-[1.8] font-mono styled-scrollbars">
+        <code>{code.split('\n').map((line, i) => {
+          const eqIdx = line.indexOf('=');
+          if (eqIdx === -1) return <span key={i} className="text-foreground/30">{line}{'\n'}</span>;
+          const key = line.substring(0, eqIdx);
+          const val = line.substring(eqIdx + 1);
+          return <span key={i}><span className="text-accent">{key}</span><span className="text-foreground/30">=</span><span className="text-foreground/60">{val}</span>{'\n'}</span>;
+        })}</code>
+      </pre>
+    </div>
+  );
+}
+
+// ── Step ──────────────────────────────────────────────────────────────────────
+
+function Step({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="flex flex-col relative pb-10 mb-10 border-b border-[var(--panel-border)]/50 last:border-0 last:pb-0 last:mb-0">
+      <div className="flex items-center gap-3 mb-4">
+        <h3 className="text-[17px] md:text-[19px] font-extrabold text-foreground tracking-tight">{title}</h3>
+      </div>
+      <div className="text-[14px] md:text-[15px] text-foreground/70 leading-relaxed space-y-4">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// ── Main Setup Page ──────────────────────────────────────────────────────────
+
+interface SetupProps {
+  /** When true, renders its own Navbar (pre-Firebase standalone mode) */
+  standalone?: boolean;
+}
+
+export function Setup({ standalone }: SetupProps) {
+  const [darkMode, setDarkMode] = useState<boolean>(() => {
+    const saved = localStorage.getItem('theme-mode');
+    if (saved === 'light') return false;
+    if (saved === 'dark') return true;
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+  });
+
+  const [verifyResult, setVerifyResult] = useState<{ missing: string[]; missingAdminEmails?: boolean } | null>(null);
+  const [isVerifying, setIsVerifying] = useState(false);
+
+  // Only manage the data-theme attribute and favicon when standalone (no ThemeContext)
+  useEffect(() => {
+    if (!standalone) return;
+    document.documentElement.setAttribute('data-theme', darkMode ? 'dark' : 'light');
+  }, [darkMode, standalone]);
+
+  // Set favicon from themeConfig when standalone
+  useEffect(() => {
+    if (!standalone) return;
+    if (themeConfig.faviconUrl) {
+      let favicon = document.querySelector("link[rel*='icon']") as HTMLLinkElement;
+      if (!favicon) {
+        favicon = document.createElement('link');
+        favicon.rel = 'icon';
+        document.head.appendChild(favicon);
+      }
+      favicon.href = themeConfig.faviconUrl;
+    }
+  }, [standalone]);
+
+  const handleVerify = () => {
+    setIsVerifying(true);
+    setVerifyResult(null);
+    setTimeout(() => {
+      const status = getEnvStatus();
+      setVerifyResult({ missing: status.missing, missingAdminEmails: status.missingAdminEmails });
+      if (status.allSet) {
+        setTimeout(() => { window.location.href = '/'; }, 1800);
+      }
+      setIsVerifying(false);
+    }, 800);
+  };
+
+  return (
+    <main className="flex-1 w-full max-w-7xl mx-auto p-4 md:p-8 z-10 flex flex-col min-h-screen">
+
+      {/* ── Page heading (identical to ThemeAdmin / PagesAdmin / Calendar) ── */}
+      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="mb-6 flex items-center justify-between">
+        <div>
+          <h1 className="w-fit inline-block text-3xl md:text-4xl lg:text-5xl font-extrabold tracking-tight mb-3 text-gradient mt-1">
+            Setup
+          </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" />
+            /setup
+          </div>
+        </div>
+      </motion.div>
+
+      {/* ── Content panel ── */}
+      <div className="flex flex-col gap-6 flex-1 pb-16">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.1 }}
+          className="glass-panel border border-[var(--panel-border)] rounded-3xl p-6 md:p-10 shadow-2xl relative overflow-hidden bg-background flex flex-col"
+        >
+          {/* Panel header with support buttons */}
+          <div className="flex flex-col gap-4 mb-8 pb-6 border-b border-[var(--panel-border)]/50 relative z-10">
+            <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
+              <div>
+                <h2 className="text-xl font-extrabold text-foreground tracking-tight">Firebase Configuration</h2>
+                <p className="text-[14px] font-medium text-foreground/50 mt-2 leading-relaxed">
+                  Follow these steps to connect your Firebase project. Takes about 5 minutes.
+                </p>
+              </div>
+              <div className="flex items-center gap-2 shrink-0">
+                <motion.a
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.95 }}
+                  href="mailto:antonina@youraiworkflow.co"
+                  title="Email Support"
+                  className="w-10 h-10 flex items-center justify-center rounded-xl transition-all duration-300 cursor-pointer btn-secondary"
+                >
+                  <Mail className="w-4 h-4" />
+                </motion.a>
+                <motion.a
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.95 }}
+                  href="https://wa.me/34632407883"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  title="WhatsApp Support"
+                  className="w-10 h-10 flex items-center justify-center rounded-xl transition-all duration-300 cursor-pointer btn-secondary"
+                >
+                  <Whatsapp className="w-4 h-4 text-foreground/80" />
+                </motion.a>
+                <motion.button
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.95 }}
+                  onClick={handleVerify}
+                  disabled={isVerifying}
+                  className="h-10 px-4 flex items-center justify-center gap-2 rounded-xl transition-all duration-300 cursor-pointer btn-primary shadow-lg disabled:opacity-50 disabled:cursor-not-allowed ml-2"
+                  title="Verify Configuration"
+                >
+                  {isVerifying ? <Loader2 className="w-4 h-4 animate-spin" /> : <RefreshDouble className="w-4 h-4" />}
+                  <span className="text-[13px] font-bold hidden sm:block">Verify Setup</span>
+                </motion.button>
+              </div>
+            </div>
+
+            {verifyResult && verifyResult.missing.length > 0 && (
+              <motion.div
+                initial={{ opacity: 0, y: -10 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="flex flex-col gap-2 mt-2 bg-red-500/5 border border-red-500/10 p-4 rounded-2xl"
+              >
+                <div className="flex items-center gap-2.5 text-[13px]">
+                  <div className="w-8 h-8 rounded-full bg-red-500/10 border border-red-500/20 flex items-center justify-center shrink-0">
+                    <AlertCircle className="w-4 h-4 text-red-500" />
+                  </div>
+                  <span className="font-bold text-foreground/70">Missing values — update <code className="text-accent text-[12px]">.env</code> and restart dev server</span>
+                </div>
+                <div className="flex flex-wrap gap-1.5 ml-10">
+                  {verifyResult.missing.map(m => (
+                    <span key={m} className="px-2.5 py-1 text-[11px] font-bold uppercase tracking-wider rounded-lg bg-red-500/10 border border-red-500/20 text-red-500">{m}</span>
+                  ))}
+                </div>
+              </motion.div>
+            )}
+
+            {verifyResult && verifyResult.missing.length === 0 && verifyResult.missingAdminEmails && (
+              <motion.div
+                initial={{ opacity: 0, y: -10 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="flex items-center gap-2.5 mt-2 bg-yellow-500/5 border border-yellow-500/10 p-4 rounded-2xl"
+              >
+                <div className="w-8 h-8 rounded-full bg-yellow-500/10 border border-yellow-500/20 flex items-center justify-center shrink-0">
+                  <AlertCircle className="w-4 h-4 text-yellow-500" />
+                </div>
+                <span className="text-[13px] font-bold text-yellow-500">Warning: No Admin Emails configured. App is operational. Redirecting…</span>
+              </motion.div>
+            )}
+
+            {verifyResult && verifyResult.missing.length === 0 && !verifyResult.missingAdminEmails && (
+              <motion.div
+                initial={{ opacity: 0, y: -10 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="flex items-center gap-2.5 mt-2 bg-emerald-500/5 border border-emerald-500/10 p-4 rounded-2xl"
+              >
+                <div className="w-8 h-8 rounded-full bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center shrink-0">
+                  <CheckCircle2 className="w-4 h-4 text-emerald-500" />
+                </div>
+                <span className="text-[13px] font-bold text-emerald-500">All configured — redirecting…</span>
+              </motion.div>
+            )}
+          </div>
+
+          {/* ── Steps ── */}
+          <div className="flex flex-col relative z-10 p-6 md:p-8 bg-foreground/[0.015] rounded-3xl border border-[var(--panel-border)]/50 mt-4">
+
+            <Step title="Create a Firebase Project">
+              <p>
+                1. Navigate to{' '}
+                <a href="https://console.firebase.google.com" target="_blank" rel="noopener noreferrer" className="text-accent underline underline-offset-2 font-semibold hover:text-accent-deep transition-colors">
+                  console.firebase.google.com
+                </a>{' '}
+                and click <strong>Add Project</strong>. <br />
+                2. Enter a project name and click <strong>Continue</strong>. <br />
+                3. You can disable Google Analytics or leave it enabled. Click <strong>Create Project</strong>.
+              </p>
+            </Step>
+
+            <Step title="Add a Web App">
+              <p>
+                1. On your Firebase project dashboard, click the <strong>&lt;/&gt; Web</strong> icon (next to iOS and Android icons). <br />
+                2. Give your app a simple nickname (e.g., <span className="text-accent">MyApp</span>). You don't need to check "Firebase Hosting". <br />
+                3. Click <strong>Register App</strong>. <br />
+                4. Firebase will show you an SDK script block containing an object with keys like <code className="text-[12px] bg-foreground/5 rounded px-2 py-0.5">apiKey</code>, <code className="text-[12px] bg-foreground/5 rounded px-2 py-0.5">authDomain</code>, etc. Keep this tab open.
+              </p>
+              <pre className="mt-4 p-4 md:p-5 overflow-x-auto text-[13px] leading-[1.8] font-mono styled-scrollbars glass-panel border border-[var(--panel-border)] rounded-2xl bg-background shadow-inner text-foreground/60">
+                <code>{`const firebaseConfig = {
+  apiKey: "AIzaSy...",
+  authDomain: "myproject.firebaseapp.com",
+  projectId: "myproject",
+  storageBucket: "myproject.firebasestorage.app",
+  messagingSenderId: "123456789012",
+  appId: "1:123456789012:web:abcdef123456"
+};`}</code>
+              </pre>
+            </Step>
+
+            <Step title="Configure your .env file">
+              <p>
+                Open the <code className="text-accent font-bold text-[13px]">.env</code> file in your source code root. Map the keys from your Firebase Web SDK to the <code className="bg-foreground/5 rounded px-2 py-0.5 font-mono text-[11px]">VITE_ FIREBASE_</code> variables.
+              </p>
+              <p className="text-[13px] bg-accent/10 border border-accent/20 p-3 rounded-xl mt-2 text-foreground/80">
+                <strong>Important:</strong> Provide your own emails in <code className="bg-background/80 rounded px-1.5 py-0.5 font-mono text-[11px]">VITE_ADMIN_EMAILS</code> separated by commas. These users will automatically get full admin privileges upon their first registration. No quotes or spaces!
+              </p>
+              <EnvBlock code={envExample} />
+            </Step>
+
+            <Step title="Enable Authentication">
+              <p>
+                1. In Firebase console Sidebar, go to <strong>Product categories</strong> → <strong>Security</strong> → <strong>Authentication</strong>. Click <strong>Get Started</strong>. <br />
+                2. Click the <strong>Sign-in method</strong> tab. <br />
+                3. Enable <strong>Email/Password</strong> (no need to enable email links). <br />
+                4. Enable <strong>Google</strong>. <br />
+                5. Enable <strong>Anonymous</strong>.
+              </p>
+            </Step>
+
+            <Step title="Create Firestore Database">
+              <p>
+                1. In the Sidebar, go to <strong>Product categories</strong> → <strong>Database and Storage</strong> → <strong>Firestore</strong>. Click <strong>Create database</strong>. <br />
+                2. Keep the default location and start in <strong>Production mode</strong>. <br />
+                3. Go to the <strong>Rules</strong> tab, paste the rules below, and click <strong>Publish</strong>.
+              </p>
+              <CopyButton code={firestoreRules} label="Copy Firestore Rules" />
+            </Step>
+
+            <Step title="Configure Storage (Optional but Recommended)">
+              <p>
+                1. In the Sidebar, go to <strong>Product categories</strong> → <strong>Database and Storage</strong> → <strong>Storage</strong>. Click <strong>Get started</strong>. Start in production mode. <br />
+                2. Once created, copy the bucket URL (e.g. <code className="text-[12px] bg-foreground/5 rounded px-1.5 py-0.5">your-project.firebasestorage.app</code>) and paste it into <code className="text-[12px] bg-foreground/5 rounded px-1.5 py-0.5">VITE_FIREBASE_STORAGE_BUCKET</code> in your <code className="text-[13px] font-bold">.env</code>. <br />
+                3. In Firebase Storage, go to the <strong>Rules</strong> tab, paste tracking rules, and click <strong>Publish</strong>.
+              </p>
+              <CopyButton code={storageRules} label="Copy Storage Rules" />
+              <p className="text-[12px] mt-4 opacity-60 font-medium border-l-2 border-foreground/20 pl-3">
+                Note: Storage rules require the Blaze pay-as-you-go plan, but there are large free tiers so you won't be charged for development usage.
+              </p>
+            </Step>
+
+          </div>
+
+
+        </motion.div>
+      </div>
+    </main>
+  );
+}

package/src/pages/StorageAdmin.test.tsx

@@ -0,0 +1,150 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { StorageAdmin } from './StorageAdmin';
+import { BrowserRouter } from 'react-router-dom';
+import { AuthProvider } from '../lib/AuthContext';
+import * as firestore from 'firebase/firestore';
+
+const mockFile = {
+  _id: 'file123',
+  fileName: 'test-document.pdf',
+  uid: 'user-id',
+  uploaderEmail: 'user@example.com',
+  fileSize: 1048576, // 1MB
+  fileType: 'application/pdf',
+  downloadURL: 'https://example.com/test-document.pdf',
+  accessPrefix: 'user_'
+};
+
+vi.mock('../lib/firebase', () => ({
+  auth: {
+    currentUser: { uid: 'user-id', email: 'user@example.com' }
+  },
+  db: {},
+  storage: {}
+}));
+
+const dummyQuery = { type: 'query' };
+vi.mock('firebase/firestore', () => ({
+  getFirestore: vi.fn(() => ({})),
+  collection: vi.fn(() => dummyQuery),
+  doc: vi.fn(() => dummyQuery),
+  setDoc: vi.fn(() => Promise.resolve()),
+  updateDoc: vi.fn(() => Promise.resolve()),
+  deleteDoc: vi.fn(() => Promise.resolve()),
+  addDoc: vi.fn(() => Promise.resolve({ id: 'new-id' })),
+  getDocs: vi.fn((...args) => {
+    console.log("Mock getDocs called with:", args);
+    return Promise.resolve({
+      docs: [{ id: mockFile._id, data: () => mockFile }]
+    });
+  }),
+  query: vi.fn(() => dummyQuery),
+  where: vi.fn(() => dummyQuery),
+  orderBy: vi.fn(() => dummyQuery),
+  serverTimestamp: vi.fn(() => ({ toMillis: () => Date.now() })),
+  onSnapshot: vi.fn((ref, cb) => {
+    // Immediate return
+    cb({
+        forEach: (docCb: any) => {
+          docCb({ id: mockFile._id, data: () => mockFile });
+        }
+    });
+    return vi.fn();
+  })
+}));
+
+vi.mock('firebase/storage', async () => {
+  const actual = await vi.importActual('firebase/storage');
+  return {
+    ...actual,
+    getStorage: vi.fn(),
+    ref: vi.fn(),
+    uploadBytes: vi.fn(() => Promise.resolve()),
+    getDownloadURL: vi.fn(() => Promise.resolve('https://example.com/test-document.pdf')),
+    deleteObject: vi.fn(() => Promise.resolve()),
+    getBlob: vi.fn(() => Promise.resolve(new Blob(['mock data'], { type: 'application/pdf' })))
+  };
+});
+
+// Mock clipboard and URL.createObjectURL
+const mockClipboardRead = vi.fn();
+const mockClipboardWrite = vi.fn();
+Object.assign(navigator, {
+  clipboard: {
+    readText: mockClipboardRead,
+    writeText: mockClipboardWrite,
+  },
+});
+(globalThis as any).URL.createObjectURL = vi.fn(() => 'blob:mock-url');
+(globalThis as any).URL.revokeObjectURL = vi.fn();
+
+vi.mock('../lib/AuthContext', () => ({
+  useAuth: () => ({
+    userRole: 'admin',
+    user: { uid: 'user-id', email: 'user@example.com' },
+    activeOrg: { id: 'test-org' },
+    activeWorkspace: { id: 'test-ws' },
+    authLoading: false
+  }),
+  AuthProvider: ({ children }: any) => <>{children}</>
+}));
+
+vi.mock('../components/DashboardNav', () => ({
+  DashboardNav: () => <div data-testid="dashboard-nav">Nav</div>
+}));
+
+(globalThis as any).ResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+
+(globalThis as any).IntersectionObserver = class IntersectionObserver {
+  root: any = null;
+  rootMargin: string = '';
+  thresholds: ReadonlyArray<number> = [];
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+  takeRecords() { return []; }
+};
+
+describe('StorageAdmin Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  const renderStorageAdmin = () => {
+    return render(
+      <AuthProvider>
+        <BrowserRouter>
+          <StorageAdmin />
+        </BrowserRouter>
+      </AuthProvider>
+    );
+  };
+
+  it('renders all storage folders for super_admin', async () => {
+    renderStorageAdmin();
+    expect((await screen.findAllByText('Private'))[0]).toBeInTheDocument();
+    expect((await screen.findAllByText('Shared'))[0]).toBeInTheDocument();
+    expect((await screen.findAllByText('Public'))[0]).toBeInTheDocument();
+    expect((await screen.findAllByText('User Uploads'))[0]).toBeInTheDocument();
+  });
+
+  it('renders correctly', async () => {
+    renderStorageAdmin();
+    expect(await screen.findByText('Drive')).toBeInTheDocument();
+  });
+
+  it('can open file rename modal safely', async () => {
+    renderStorageAdmin();
+    expect((await screen.findAllByText('Private'))[0]).toBeInTheDocument();
+  });
+
+  it('opens delete confirmation safely', async () => {
+    renderStorageAdmin();
+    expect((await screen.findAllByText('Shared'))[0]).toBeInTheDocument();
+  });
+});