firebase-os 1.1.4 → 1.1.6

package/src/templates/AdminPageTemplate.tsx

@@ -0,0 +1,678 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Bot, Plus, X, Loader2, Trash2, FileText, Download, Check, Edit2, Info } from 'lucide-react';
+import * as IconoirIcons from 'iconoir-react';
+import { DashboardNav } from '../components/DashboardNav';
+import { Button } from '../components/Button';
+import { useAuth } from '../lib/AuthContext';
+import { db, storage } from '../lib/firebase';
+import { collection, addDoc, getDocs, getDoc, query, orderBy, where, serverTimestamp, deleteDoc, updateDoc, doc, onSnapshot } from 'firebase/firestore';
+import { ref, uploadBytes, getDownloadURL, deleteObject } from 'firebase/storage';
+import { ConfirmModal } from '../components/ConfirmModal';
+
+interface SavedRecord {
+  id: string;
+  name: string;
+  note: string;
+  uid: string;
+  createdAt: any;
+  recordType?: 'record' | 'file';
+  fileName?: string;
+  fileType?: string;
+  fileSize?: number;
+  downloadURL?: string;
+  // Creator profile fields
+  creatorName?: string;
+  creatorEmail?: string;
+  creatorAvatar?: string;
+}
+
+import { adminCrudPrompt } from '../prompts';
+
+export function AdminPageTemplate({ config }: { config: any }) {
+  const { user } = useAuth();
+  const [records, setRecords] = useState<SavedRecord[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showAddForm, setShowAddForm] = useState(false);
+  const [newName, setNewName] = useState('');
+  const [newNote, setNewNote] = useState('');
+  const [saving, setSaving] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editName, setEditName] = useState('');
+  const [editNote, setEditNote] = useState('');
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [profileCache, setProfileCache] = useState<Record<string, { name: string; email: string; avatar: string }>>({});
+
+  const parsedTabName = (config.tabName || config.pageId || 'admin_page')
+    .toLowerCase().replace(/[^a-z0-9]+/g, '_');
+  const recordsCollection = `admin_${parsedTabName}_records`;
+
+  useEffect(() => {
+    document.title = config.tabTitle || config.tabName || 'Firebase OS';
+  }, [config.tabTitle, config.tabName]);
+
+  // ── Fetch live profile for a uid (cached) ────────────────────────────────
+  const fetchProfile = useCallback(async (uid: string) => {
+    if (profileCache[uid]) return profileCache[uid];
+    try {
+      const profileDoc = await getDoc(doc(db, 'user_profiles', uid));
+      if (profileDoc.exists()) {
+        const data = profileDoc.data();
+        const profile = {
+          name: data.displayName || data.name || data.email?.split('@')[0] || 'Admin',
+          email: data.email || '',
+          avatar: data.avatar || '',
+        };
+        setProfileCache(prev => ({ ...prev, [uid]: profile }));
+        return profile;
+      }
+    } catch (e) { /* fallback */ }
+    const fallback = { name: 'Admin', email: '', avatar: '' };
+    setProfileCache(prev => ({ ...prev, [uid]: fallback }));
+    return fallback;
+  }, [profileCache]);
+
+  // ── Real-time listener for admin records (shared between admins) ─────────
+  useEffect(() => {
+    if (!user) return;
+    setLoading(true);
+
+    const q = query(collection(db, recordsCollection), orderBy('createdAt', 'desc'));
+    const unsub = onSnapshot(q, (snap) => {
+      const items = snap.docs.map(d => ({ id: d.id, ...d.data() } as SavedRecord));
+      setRecords(items);
+      setLoading(false);
+
+      // Pre-fetch profiles for any new creators
+      const uids = [...new Set(items.map(r => r.uid).filter(Boolean))];
+      for (const uid of uids) { fetchProfile(uid); }
+    }, (err) => {
+      console.error('Error listening to admin records:', err);
+      // Fallback: try without orderBy (index not yet created)
+      const fallbackUnsub = onSnapshot(collection(db, recordsCollection), (snap) => {
+        const items = snap.docs.map(d => ({ id: d.id, ...d.data() } as SavedRecord));
+        items.sort((a, b) => (b.createdAt?.toMillis?.() || 0) - (a.createdAt?.toMillis?.() || 0));
+        setRecords(items);
+        setLoading(false);
+        const uids = [...new Set(items.map(r => r.uid).filter(Boolean))];
+        for (const uid of uids) { fetchProfile(uid); }
+      });
+      return () => fallbackUnsub();
+    });
+
+    return () => unsub();
+  }, [user, recordsCollection]);
+
+  // ── Save new record ───────────────────────────────────────────────────────
+  const handleSaveRecord = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!user || !newName.trim()) return;
+    setSaving(true);
+    try {
+      const profile = await getCreatorProfile();
+      await addDoc(collection(db, recordsCollection), {
+        name: newName.trim(),
+        note: newNote.trim(),
+        uid: user.uid,
+        recordType: 'record',
+        creatorName: profile.name,
+        creatorEmail: profile.email,
+        creatorAvatar: profile.avatar,
+        createdAt: serverTimestamp(),
+      });
+      // onSnapshot will update the records list automatically
+      setNewName('');
+      setNewNote('');
+      setShowAddForm(false);
+    } catch (e) {
+      console.error('Error saving admin record:', e);
+    }
+    setSaving(false);
+  };
+
+  // ── Upload file ───────────────────────────────────────────────────────────
+  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file || !user) return;
+    setUploading(true);
+    try {
+      const uniqueName = `${Date.now()}_${file.name.replace(/[^a-zA-Z0-9.-]/g, '_')}`;
+      const storagePath = `admin_files/${uniqueName}`;
+      const fileRef = ref(storage, storagePath);
+      await uploadBytes(fileRef, file, {
+        customMetadata: { ownerId: user.uid }
+      });
+      const downloadURL = await getDownloadURL(fileRef);
+      const profile = await getCreatorProfile();
+
+      // Save to admin_files so it appears in Drive > Admin
+      await addDoc(collection(db, 'admin_files'), {
+        fileName: file.name,
+        fileType: file.type || 'unknown',
+        fileSize: file.size,
+        downloadURL,
+        uid: user.uid,
+        uploaderEmail: user.email || 'admin',
+        sourceTab: parsedTabName,
+        accessPrefix: 'admin_',
+        creatorName: profile.name,
+        creatorEmail: profile.email,
+        creatorAvatar: profile.avatar,
+        createdAt: serverTimestamp(),
+      });
+
+      // Save reference in this tab's records collection
+      await addDoc(collection(db, recordsCollection), {
+        name: file.name,
+        note: `${file.type || 'File'} · ${formatSize(file.size)}`,
+        uid: user.uid,
+        recordType: 'file',
+        fileName: file.name,
+        fileType: file.type || 'unknown',
+        fileSize: file.size,
+        downloadURL,
+        creatorName: profile.name,
+        creatorEmail: profile.email,
+        creatorAvatar: profile.avatar,
+        createdAt: serverTimestamp(),
+      });
+      // onSnapshot will update the records list automatically
+    } catch (e) {
+      console.error('Error uploading admin file:', e);
+    }
+    setUploading(false);
+    if (fileInputRef.current) fileInputRef.current.value = '';
+  };
+
+  // ── Delete record ─────────────────────────────────────────────────────────
+  const handleDelete = async () => {
+    if (!deleteConfirm) return;
+    setIsDeleting(true);
+    try {
+      const record = records.find(r => r.id === deleteConfirm);
+      await deleteDoc(doc(db, recordsCollection, deleteConfirm));
+
+      // If it's a file, also delete from Storage and admin_files
+      if (record?.recordType === 'file' && record.downloadURL) {
+        try {
+          // Delete from Storage
+          const fileName = record.downloadURL.split('admin_files%2F')[1]?.split('?')[0];
+          if (fileName) {
+            const fileRef = ref(storage, `admin_files/${decodeURIComponent(fileName)}`);
+            await deleteObject(fileRef).catch(() => {});
+          }
+          // Delete from admin_files Firestore collection
+          const filesSnap = await getDocs(query(
+            collection(db, 'admin_files'),
+            where('downloadURL', '==', record.downloadURL)
+          ));
+          for (const d of filesSnap.docs) {
+            await deleteDoc(d.ref);
+          }
+        } catch (e) {
+          console.error('Error cleaning up admin file:', e);
+        }
+      }
+
+      // onSnapshot will update the records list automatically
+      setDeleteConfirm(null);
+    } catch (e) {
+      console.error('Error deleting admin record:', e);
+    }
+    setIsDeleting(false);
+  };
+
+  // ── Edit record (inline) ──────────────────────────────────────────────────
+  const startEdit = (record: SavedRecord) => {
+    setEditingId(record.id);
+    setEditName(record.name);
+    setEditNote(record.note || '');
+  };
+
+  const handleSaveEdit = async () => {
+    if (!editingId || !editName.trim()) { setEditingId(null); return; }
+    const original = records.find(r => r.id === editingId);
+    if (original && original.name === editName.trim() && (original.note || '') === editNote.trim()) {
+      setEditingId(null); return;
+    }
+    try {
+      await updateDoc(doc(db, recordsCollection, editingId), {
+        name: editName.trim(),
+        note: editNote.trim(),
+      });
+      // onSnapshot will update the records list automatically
+    } catch (e) {
+      console.error('Error updating admin record:', e);
+    }
+    setEditingId(null);
+  };
+
+  // ── Utils ─────────────────────────────────────────────────────────────────
+  const getCreatorProfile = async (): Promise<{ name: string; email: string; avatar: string }> => {
+    try {
+      const profileDoc = await getDoc(doc(db, 'user_profiles', user!.uid));
+      if (profileDoc.exists()) {
+        const data = profileDoc.data();
+        const profile = {
+          name: data.displayName || data.name || user!.email?.split('@')[0] || 'Admin',
+          email: data.email || user!.email || '',
+          avatar: data.avatar || user!.photoURL || '',
+        };
+        // Update cache so CreatorBadge shows the latest avatar
+        setProfileCache(prev => ({ ...prev, [user!.uid]: profile }));
+        return profile;
+      }
+    } catch (e) { /* fallback below */ }
+    return {
+      name: user!.displayName || user!.email?.split('@')[0] || 'Admin',
+      email: user!.email || '',
+      avatar: user!.photoURL || '',
+    };
+  };
+
+  const formatSize = (bytes: number) => {
+    if (!bytes) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  const formatDate = (ts: any) => {
+    if (!ts) return '';
+    const ms = ts.toMillis ? ts.toMillis() : ts;
+    return new Date(ms).toLocaleDateString('en-US', {
+      month: 'short', day: 'numeric', year: 'numeric'
+    });
+  };
+
+  // ── Prompt text ───────────────────────────────────────────────────────────
+  const promptText = adminCrudPrompt(config, recordsCollection);
+
+  const handleCopyPrompt = () => {
+    navigator.clipboard.writeText(promptText);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  // ── Resolve storage icon from iconoir ─────────────────────────────────────
+  const getStorageIcon = () => {
+    const iconName = config.buttonStorageIcon || 'upload';
+    const cleanName = iconName.trim();
+    const variations = [
+      cleanName,
+      cleanName.charAt(0).toUpperCase() + cleanName.slice(1),
+      cleanName.split('-').map((w: string) => w.charAt(0).toUpperCase() + w.slice(1)).join(''),
+      cleanName.split('_').map((w: string) => w.charAt(0).toUpperCase() + w.slice(1)).join(''),
+    ];
+    for (const v of variations) {
+      if ((IconoirIcons as any)[v]) return (IconoirIcons as any)[v];
+    }
+    return (IconoirIcons as any)['Upload'] || Plus;
+  };
+
+  const StorageIcon = getStorageIcon();
+  const isPrimaryBtn = config.buttonStyle !== 'secondary';
+  const isPrimaryStorage = config.buttonStorageStyle === 'primary';
+  const isOwner = (record: SavedRecord) => record.uid === user?.uid;
+
+  // ── Creator badge (uses live profile from cache) ──────────────────────────
+  const CreatorBadge = ({ record }: { record: SavedRecord }) => {
+    const liveProfile = profileCache[record.uid];
+    const name = liveProfile?.name || record.creatorName || record.creatorEmail?.split('@')[0] || 'Admin';
+    const email = liveProfile?.email || record.creatorEmail || '';
+    const avatar = liveProfile?.avatar || record.creatorAvatar || '';
+    const initials = name.split(' ').map(w => w[0]).join('').toUpperCase().slice(0, 2);
+    return (
+      <div className="flex items-center gap-2 mt-2 pt-2 border-t border-[var(--panel-border)]/30">
+        {avatar ? (
+          <img src={avatar} alt="" className="w-5 h-5 rounded-full object-cover shrink-0" />
+        ) : (
+          <div className="w-5 h-5 rounded-full bg-accent/15 text-accent flex items-center justify-center text-[8px] font-extrabold shrink-0">
+            {initials}
+          </div>
+        )}
+        <div className="flex items-center gap-1 min-w-0 flex-1">
+          <span className="text-[11px] font-semibold text-foreground/40 truncate">{name}</span>
+          {email && <span className="text-[10px] text-foreground/25 truncate">· {email}</span>}
+        </div>
+      </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-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">
+            {config.tabTitle || config.tabName || 'Admin Page'}
+          </h1>
+          {config.route && (
+            <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" />
+              {config.route}
+            </div>
+          )}
+        </div>
+      </motion.div>
+
+      <div className="flex flex-col gap-6 flex-1 pb-16">
+        <DashboardNav />
+
+        {/* ── Main Container ────────────────────────────────────────────── */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.1 }}
+          className="flex flex-col glass-panel border border-[var(--panel-border)] rounded-3xl overflow-hidden flex-1 shadow-2xl bg-background"
+        >
+          {/* Container Header */}
+          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 p-6 md:px-8 md:py-6 border-b border-[var(--panel-border)]/50 bg-background/50 shrink-0">
+            <div className="flex-1 min-w-0">
+              <h2 className="text-xl font-extrabold text-foreground tracking-tight truncate">
+                {config.tabTitle || config.tabName || 'Dashboard'}
+              </h2>
+              <p className="text-[13px] font-medium text-foreground/50 mt-1">
+                {loading ? 'Loading…' : `${records.length} ${records.length === 1 ? 'item' : 'items'} · Shared between admins`}
+              </p>
+            </div>
+
+            <div className="flex items-center gap-2 shrink-0">
+              {/* Prompt Copy */}
+              {config.showPrompt && (
+                <motion.button
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.95 }}
+                  onClick={handleCopyPrompt}
+                  title={copied ? 'Copied!' : 'Copy Developer Prompt'}
+                  className={`w-10 h-10 flex items-center justify-center rounded-xl transition-all duration-300 cursor-pointer ${
+                    copied
+                      ? 'bg-emerald-500/10 text-emerald-500'
+                      : 'btn-secondary'
+                  }`}
+                >
+                  {copied ? <Check className="w-4 h-4" /> : <Bot className="w-4 h-4" />}
+                </motion.button>
+              )}
+
+              {/* Storage Upload */}
+              {config.storage !== false && (
+                <>
+                  <input
+                    type="file"
+                    ref={fileInputRef}
+                    onChange={handleFileSelect}
+                    className="hidden"
+                  />
+                  <motion.button
+                    whileHover={{ scale: 1.05 }}
+                    whileTap={{ scale: 0.95 }}
+                    onClick={() => fileInputRef.current?.click()}
+                    disabled={uploading}
+                    title={config.buttonStorageText || 'Upload File'}
+                    className={`h-10 flex items-center justify-center gap-2 rounded-xl transition-all duration-300 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed ${
+                      config.buttonStorageText ? 'px-4' : 'w-10'
+                    } ${isPrimaryStorage ? 'btn-primary' : 'btn-secondary'}`}
+                  >
+                    {uploading ? (
+                      <Loader2 className="w-4 h-4 animate-spin" />
+                    ) : (
+                      <StorageIcon className="w-4 h-4" />
+                    )}
+                    {config.buttonStorageText && (
+                      <span className="text-[13px] font-bold">{config.buttonStorageText}</span>
+                    )}
+                  </motion.button>
+                </>
+              )}
+
+              {/* Add Button */}
+              {config.showButton !== false && (
+                <motion.button
+                  whileHover={{ scale: 1.05 }}
+                  whileTap={{ scale: 0.95 }}
+                  onClick={() => setShowAddForm(true)}
+                  title="Add New"
+                  className={`h-10 flex items-center justify-center gap-2 rounded-xl transition-all duration-300 cursor-pointer ${
+                    config.buttonText && config.buttonText !== '+' ? 'px-5' : 'w-10'
+                  } ${isPrimaryBtn ? 'btn-primary' : 'btn-secondary'}`}
+                >
+                  {config.buttonText === '+' || !config.buttonText ? (
+                    <Plus className="w-4 h-4" />
+                  ) : (
+                    <span className="text-[13px] font-bold">{config.buttonText}</span>
+                  )}
+                </motion.button>
+              )}
+            </div>
+          </div>
+
+          {/* ── Content Area ─────────────────────────────────────────────── */}
+          <div className="p-6 md:p-8 flex-1 overflow-y-auto relative min-h-[400px]">
+            {/* Loading */}
+            {loading && (
+              <div className="absolute inset-0 z-10 flex items-center justify-center bg-background/50 backdrop-blur-sm">
+                <Loader2 className="w-8 h-8 text-accent animate-spin" />
+              </div>
+            )}
+
+            {/* Empty State */}
+            {!loading && records.length === 0 && (
+              <motion.div
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="flex-1 flex flex-col items-center justify-center border border-[var(--panel-border)]/50 border-dashed rounded-2xl p-8 py-20 text-center min-h-[350px]"
+              >
+                <div className="w-16 h-16 rounded-2xl bg-accent/5 border border-accent/10 flex items-center justify-center mb-5">
+                  <Plus className="w-6 h-6 text-accent/40" />
+                </div>
+                <p className="text-[15px] font-bold mb-1.5 text-foreground/50">No items yet</p>
+                <p className="text-[13px] font-medium text-foreground/35 max-w-xs leading-relaxed">
+                  Use the buttons above to add records or upload files. All admins can view and contribute.
+                </p>
+              </motion.div>
+            )}
+
+            {/* Records Grid */}
+            {!loading && records.length > 0 && (
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                <AnimatePresence>
+                  {records.map((record, i) => {
+                    const isEditing = editingId === record.id;
+                    const owned = isOwner(record);
+                    return (
+                    <motion.div
+                      key={record.id}
+                      initial={false}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, scale: 0.95 }}
+                      className={`group flex flex-col bg-background border rounded-2xl p-5 transition-all relative ${
+                        isEditing ? 'border-accent/40 shadow-lg ring-1 ring-accent/20' : 'border-[var(--panel-border)] hover:border-accent/30 hover:shadow-lg'
+                      }`}
+                    >
+                      {/* Top-right action icons — download + edit + delete */}
+                      {!isEditing && (
+                        <div className="absolute top-3 right-3 flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-all">
+                          {record.recordType === 'file' && record.downloadURL && (
+                            <a
+                              href={record.downloadURL}
+                              target="_blank"
+                              rel="noreferrer"
+                              className="p-1.5 rounded-lg text-foreground/25 hover:text-blue-500 hover:bg-blue-500/10 transition-all"
+                              title="Download"
+                            >
+                              <Download className="w-3.5 h-3.5" />
+                            </a>
+                          )}
+                          {owned && (
+                            <>
+                              <button onClick={() => startEdit(record)} className="p-1.5 rounded-lg text-foreground/25 hover:text-accent hover:bg-accent/10 transition-all cursor-pointer" title="Edit">
+                                <Edit2 className="w-3.5 h-3.5" />
+                              </button>
+                              <button onClick={() => setDeleteConfirm(record.id)} className="p-1.5 rounded-lg text-foreground/25 hover:text-red-500 hover:bg-red-500/10 transition-all cursor-pointer" title="Delete">
+                                <Trash2 className="w-3.5 h-3.5" />
+                              </button>
+                            </>
+                          )}
+                        </div>
+                      )}
+
+                      <div className="flex items-start gap-3 mb-2">
+                        <div className={`w-9 h-9 rounded-xl flex items-center justify-center shrink-0 ${
+                          record.recordType === 'file'
+                            ? 'bg-blue-500/10 text-blue-500'
+                            : 'bg-accent/10 text-accent'
+                        }`}>
+                          {record.recordType === 'file' ? (
+                            <FileText className="w-4 h-4" />
+                          ) : (
+                            <div className="w-2 h-2 rounded-full bg-current" />
+                          )}
+                        </div>
+                        <div className="flex flex-col min-w-0 flex-1">
+                          {isEditing ? (
+                            <input
+                              autoFocus
+                              value={editName}
+                              onChange={e => setEditName(e.target.value)}
+                              onBlur={handleSaveEdit}
+                              onKeyDown={e => { if (e.key === 'Enter') handleSaveEdit(); if (e.key === 'Escape') setEditingId(null); }}
+                              className="text-[14px] font-bold text-foreground bg-transparent border-b border-accent/30 outline-none pb-0.5 w-full"
+                            />
+                          ) : (
+                            <span className="text-[14px] font-bold text-foreground truncate pr-12">
+                              {record.name}
+                            </span>
+                          )}
+                          <span className="text-[11px] text-foreground/35 font-bold uppercase tracking-wider mt-0.5">
+                            {formatDate(record.createdAt)}
+                          </span>
+                        </div>
+                      </div>
+
+                      {isEditing ? (
+                        <textarea
+                          value={editNote}
+                          onChange={e => setEditNote(e.target.value)}
+                          onBlur={handleSaveEdit}
+                          onKeyDown={e => { if (e.key === 'Escape') setEditingId(null); }}
+                          placeholder="Note (optional)"
+                          rows={2}
+                          className="text-[13px] text-foreground/70 font-medium bg-transparent border-b border-accent/20 outline-none resize-none w-full mb-1 placeholder:text-foreground/30"
+                        />
+                      ) : (
+                        record.note && (
+                          <p className="text-[13px] text-foreground/55 font-medium leading-relaxed line-clamp-3 mb-1">
+                            {record.note}
+                          </p>
+                        )
+                      )}
+
+
+
+                      {/* Creator profile badge */}
+                      <CreatorBadge record={record} />
+                    </motion.div>
+                  );
+                  })}
+                </AnimatePresence>
+              </div>
+            )}
+          </div>
+
+          {/* ── Settings Info ─────────────────────────────────────────────── */}
+          <div className="px-6 md:px-8 py-4 border-t border-[var(--panel-border)]/30 bg-background/30 shrink-0">
+            <div className="flex items-start gap-2 text-[11px] text-foreground/30 font-medium leading-relaxed">
+              <Info className="w-3.5 h-3.5 shrink-0 mt-0.5" />
+              <span>
+                Shared between all admins · Edit and delete available on your own items only · 
+                Records: <code className="text-foreground/40 font-mono text-[10px]">{recordsCollection}</code> · 
+                Files: <code className="text-foreground/40 font-mono text-[10px]">admin_files</code> → Drive / Admin
+              </span>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+
+      {/* ── Add Record Modal ──────────────────────────────────────────────── */}
+      <AnimatePresence>
+        {showAddForm && (
+          <div className="fixed inset-0 z-[120] flex items-center justify-center p-4">
+            <motion.div
+              onClick={() => !saving && setShowAddForm(false)}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              className="absolute inset-0 bg-background/60 backdrop-blur-sm cursor-pointer"
+            />
+            <motion.div
+              initial={{ opacity: 0, scale: 0.97, y: 6 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.97, y: 6 }}
+              transition={{ duration: 0.2 }}
+              className="w-full max-w-[360px] border-[var(--panel-border)] border rounded-2xl relative z-10 glass-panel shadow-2xl bg-background overflow-hidden"
+            >
+              <form onSubmit={handleSaveRecord} className="p-5 flex flex-col gap-3">
+                <div className="flex items-center justify-between mb-1">
+                  <span className="text-[14px] font-bold text-foreground">New Record</span>
+                  <button
+                    type="button"
+                    onClick={() => !saving && setShowAddForm(false)}
+                    className="text-foreground/30 hover:text-foreground/60 transition-colors cursor-pointer p-0.5"
+                  >
+                    <X className="w-4 h-4" />
+                  </button>
+                </div>
+                <input
+                  autoFocus
+                  type="text"
+                  required
+                  value={newName}
+                  onChange={e => setNewName(e.target.value)}
+                  placeholder="Name *"
+                  disabled={saving}
+                  className="w-full bg-foreground/[0.03] border border-[var(--panel-border)] px-3.5 py-2.5 text-[13px] font-semibold text-foreground outline-none focus:border-accent transition-colors placeholder:text-foreground/30"
+                  style={{ borderRadius: 'var(--input-radius, 0.75rem)' }}
+                />
+                <textarea
+                  value={newNote}
+                  onChange={e => setNewNote(e.target.value)}
+                  placeholder="Note (optional)"
+                  disabled={saving}
+                  rows={2}
+                  className="w-full bg-foreground/[0.03] border border-[var(--panel-border)] px-3.5 py-2.5 text-[13px] font-medium text-foreground outline-none focus:border-accent transition-colors placeholder:text-foreground/30 resize-none"
+                  style={{ borderRadius: 'var(--input-radius, 0.75rem)' }}
+                />
+                <div className="flex justify-end pt-1">
+                  <Button
+                    type="submit"
+                    isLoading={saving}
+                    className="px-5 py-2 text-[12px] font-bold shadow-md"
+                  >
+                    {saving ? 'Saving…' : 'Save'}
+                  </Button>
+                </div>
+              </form>
+            </motion.div>
+          </div>
+        )}
+      </AnimatePresence>
+
+      {/* ── Delete Confirmation ────────────────────────────────────────────── */}
+      <ConfirmModal
+        isOpen={!!deleteConfirm}
+        onCancel={() => setDeleteConfirm(null)}
+        onConfirm={handleDelete}
+        title="Delete Record"
+        message="Are you sure you want to delete this record? This action cannot be undone."
+        confirmText="Delete"
+        isProcessing={isDeleting}
+      />
+    </main>
+  );
+}