your-ai-workflow-firebase-os 1.2.20 → 1.2.21

package/src/templates/AdminPageTemplate.tsx

@@ -1,13 +1,14 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { createPortal } from 'react-dom';
 import { motion, AnimatePresence } from 'framer-motion';
-import { Bot, Plus, X, Loader2, Trash2, FileText, Download, Check, Edit2, Info } from 'lucide-react';
+import { Bot, Plus, X, Loader2, Trash2, FileText, Download, Check, Edit2, Info, Link, Image, Video, Archive, Code, FileIcon } from 'lucide-react';
 import * as LucideIcons from 'lucide-react';
 import { DashboardNav } from '../components/DashboardNav';
 import { Button } from '../components/Button';
 import { useAuth } from '../lib/AuthContext';
 import { useTheme } from '../lib/ThemeContext';
 import { db, storage } from '../lib/firebase';
-import { collection, addDoc, getDocs, getDoc, query, orderBy, where, serverTimestamp, deleteDoc, updateDoc, doc, onSnapshot, limit } from 'firebase/firestore';
+import { collection, addDoc, getDocs, getDoc, query, orderBy, where, serverTimestamp, deleteDoc, updateDoc, doc, onSnapshot, limit, deleteField } from 'firebase/firestore';
 import { ref, uploadBytes, getDownloadURL, deleteObject } from 'firebase/storage';
 import { ConfirmModal } from '../components/ConfirmModal';
 
@@ -42,11 +43,25 @@ export function AdminPageTemplate({ config }: { config: any }) {
   const [copied, setCopied] = useState(false);
   const [uploading, setUploading] = useState(false);
   const [deleteConfirm, setDeleteConfirm] = useState<string | null>(null);
+  const [_previewFile, _setPreviewFile] = useState<any | null>(null);
+  const setPreviewFile = (f: any) => {
+    _setPreviewFile(f);
+    if (f) {
+      const t = f.fileType || '';
+      const canPreview = t.startsWith('image/') || t.startsWith('video/') || t === 'application/pdf';
+      setPreviewLoading(canPreview);
+    }
+  };
+  const previewFile = _previewFile;
+  const [previewLoading, setPreviewLoading] = useState(true);
   const [isDeleting, setIsDeleting] = useState(false);
   const [editingId, setEditingId] = useState<string | null>(null);
   const [editName, setEditName] = useState('');
   const [editNote, setEditNote] = useState('');
+  const [editFields, setEditFields] = useState<{ key: string; value: string }[]>([]);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const [copiedLink, setCopiedLink] = useState<string | null>(null);
+  const originalFieldKeysRef = useRef<string[]>([]);
 
 
   const parsedTabName = (config.tabName || config.pageId || 'admin_page')
@@ -69,7 +84,7 @@ export function AdminPageTemplate({ config }: { config: any }) {
   // ── Real-time listener for admin records (shared between admins) ─────────
   useEffect(() => {
     if (!user) return;
-    
+
     // 1. Instant Cache Hydration
     try {
       const cached = localStorage.getItem(`fbos_records_${recordsCollection}`);
@@ -79,7 +94,7 @@ export function AdminPageTemplate({ config }: { config: any }) {
       } else {
         setLoading(true);
       }
-    } catch(e) {}
+    } catch (e) { }
 
     // Helper to serialize records for cache
     const processItems = (snapDocs: any[]) => {
@@ -212,7 +227,7 @@ export function AdminPageTemplate({ config }: { config: any }) {
           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(() => {});
+            await deleteObject(fileRef).catch(() => { });
           }
           // Delete from admin_files Firestore collection
           const filesSnap = await getDocs(query(
@@ -236,30 +251,169 @@ export function AdminPageTemplate({ config }: { config: any }) {
   };
 
   // ── Edit record (inline) ──────────────────────────────────────────────────
+  // Inline rename state for file records (Drive-style)
+  const [renamingFileId, setRenamingFileId] = useState<string | null>(null);
+  const [renameFileName, setRenameFileName] = useState('');
+  const [isRenamingFile, setIsRenamingFile] = useState(false);
+
   const startEdit = (record: SavedRecord) => {
+    // For file records, use inline rename (Drive-style)
+    if (record.recordType === 'file') {
+      setRenamingFileId(record.id);
+      setRenameFileName(record.name);
+      return;
+    }
     setEditingId(record.id);
     setEditName(record.name);
     setEditNote(record.note || '');
+    // Load any extra custom fields (anything beyond the reserved keys)
+    const reserved = ['name', 'note', 'uid', 'recordType', 'fileName', 'fileType', 'fileSize', 'downloadURL', 'createdAt', 'creatorName', 'creatorEmail', 'creatorAvatar'];
+    const extras = Object.entries(record as any)
+      .filter(([k]) => !reserved.includes(k) && k !== 'id')
+      .map(([key, value]) => ({ key, value: String(value ?? '') }));
+    setEditFields(extras);
+    originalFieldKeysRef.current = extras.map(f => f.key);
+  };
+
+  const handleRenameFile = async () => {
+    if (!renamingFileId || !renameFileName.trim()) { setRenamingFileId(null); return; }
+    const original = records.find(r => r.id === renamingFileId);
+    if (original && original.name === renameFileName.trim()) { setRenamingFileId(null); return; }
+    setIsRenamingFile(true);
+    try {
+      await updateDoc(doc(db, recordsCollection, renamingFileId), {
+        name: renameFileName.trim(),
+      });
+      setRecords(prev => prev.map(r =>
+        r.id === renamingFileId ? { ...r, name: renameFileName.trim() } : r
+      ));
+    } catch (e) {
+      console.error('Error renaming file:', e);
+    }
+    setIsRenamingFile(false);
+    setRenamingFileId(null);
   };
 
   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;
-    }
+    setSaving(true);
+    const extraData: Record<string, any> = {};
+    editFields.forEach(({ key, value }) => {
+      if (key.trim()) extraData[key.trim()] = value;
+    });
+    const currentKeys = editFields.map(f => f.key.trim()).filter(Boolean);
+    const removedKeys = originalFieldKeysRef.current.filter(k => !currentKeys.includes(k));
+    removedKeys.forEach(k => { extraData[k] = deleteField(); });
     try {
       await updateDoc(doc(db, recordsCollection, editingId), {
         name: editName.trim(),
         note: editNote.trim(),
+        ...extraData,
       });
-      // onSnapshot will update the records list automatically
+      setRecords(prev => prev.map(r => {
+        if (r.id !== editingId) return r;
+        const updated = { ...r, name: editName.trim(), note: editNote.trim() };
+        removedKeys.forEach(k => { delete (updated as any)[k]; });
+        editFields.forEach(({ key, value }) => { if (key.trim()) (updated as any)[key.trim()] = value; });
+        return updated;
+      }));
+      originalFieldKeysRef.current = currentKeys;
     } catch (e) {
-      console.error('Error updating admin record:', e);
+      console.error('Error updating record:', e);
     }
+    setSaving(false);
     setEditingId(null);
   };
 
+  // Silent save: persist to Firestore without closing modal or showing loader
+  const handleSilentSave = async () => {
+    if (!editingId || !editName.trim()) return;
+    const extraData: Record<string, any> = {};
+    editFields.forEach(({ key, value }) => {
+      if (key.trim()) extraData[key.trim()] = value;
+    });
+    const currentKeys = editFields.map(f => f.key.trim()).filter(Boolean);
+    const removedKeys = originalFieldKeysRef.current.filter(k => !currentKeys.includes(k));
+    removedKeys.forEach(k => { extraData[k] = deleteField(); });
+    try {
+      await updateDoc(doc(db, recordsCollection, editingId), {
+        name: editName.trim(),
+        note: editNote.trim(),
+        ...extraData,
+      });
+      setRecords(prev => prev.map(r => {
+        if (r.id !== editingId) return r;
+        const updated = { ...r, name: editName.trim(), note: editNote.trim() };
+        removedKeys.forEach(k => { delete (updated as any)[k]; });
+        editFields.forEach(({ key, value }) => { if (key.trim()) (updated as any)[key.trim()] = value; });
+        return updated;
+      }));
+      originalFieldKeysRef.current = currentKeys;
+    } catch (e) {
+      console.error('Error silently saving record:', e);
+    }
+  };
+
+
+  // ── File type icon renderer ───────────────────────────────────────────────
+  const renderFileIcon = (type?: string, url?: string) => {
+    if (!type) return <FileText className="w-4 h-4" />;
+    if (type.startsWith('image/')) {
+      if (url) return <div className="w-9 h-9 rounded-xl bg-cover bg-center shrink-0" style={{ backgroundImage: `url(${url})` }} />;
+      return <Image className="w-4 h-4" />;
+    }
+    if (type.startsWith('video/') || type.startsWith('audio/')) return <Video className="w-4 h-4" />;
+    if (type.includes('pdf') || type.includes('word') || type.includes('text')) return <FileText className="w-4 h-4" />;
+    if (type.includes('zip') || type.includes('rar') || type.includes('archive')) return <Archive className="w-4 h-4" />;
+    if (type.includes('html') || type.includes('csv') || type.includes('json')) return <Code className="w-4 h-4" />;
+    return <FileIcon className="w-4 h-4" />;
+  };
+
+  const renderFileIconBg = (type?: string) => {
+    if (!type) return 'bg-foreground/5 text-foreground/40';
+    if (type.startsWith('image/')) return 'bg-emerald-500/10 text-emerald-500';
+    if (type.startsWith('video/') || type.startsWith('audio/')) return 'bg-purple-500/10 text-purple-500';
+    if (type.includes('pdf') || type.includes('word') || type.includes('text')) return 'bg-blue-500/10 text-blue-500';
+    if (type.includes('zip') || type.includes('rar') || type.includes('archive')) return 'bg-yellow-500/10 text-yellow-500';
+    if (type.includes('html') || type.includes('csv') || type.includes('json')) return 'bg-emerald-500/10 text-emerald-500';
+    return 'bg-foreground/5 text-foreground/40';
+  };
+
+  const formatExtension = (type?: string) => {
+    if (!type) return 'FILE';
+    const mimeMap: Record<string, string> = {
+      'application/pdf': 'PDF',
+      'application/zip': 'ZIP',
+      'application/x-zip-compressed': 'ZIP',
+      'application/x-rar-compressed': 'RAR',
+      'application/x-7z-compressed': '7Z',
+      'application/json': 'JSON',
+      'application/xml': 'XML',
+      'application/javascript': 'JS',
+      'application/typescript': 'TS',
+      'application/msword': 'DOC',
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document': 'DOCX',
+      'application/vnd.ms-excel': 'XLS',
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': 'XLSX',
+      'application/vnd.ms-powerpoint': 'PPT',
+      'application/vnd.openxmlformats-officedocument.presentationml.presentation': 'PPTX',
+      'application/rtf': 'RTF',
+      'application/x-tar': 'TAR',
+      'application/gzip': 'GZ',
+      'text/plain': 'TXT',
+      'text/html': 'HTML',
+      'text/css': 'CSS',
+      'text/csv': 'CSV',
+      'text/markdown': 'MD',
+    };
+    const lower = type.toLowerCase();
+    if (mimeMap[lower]) return mimeMap[lower];
+    const parts = lower.split('/');
+    const sub = parts[parts.length - 1];
+    const clean = sub.replace(/^x-/, '').replace(/^vnd\..*\./, '');
+    return clean.toUpperCase().slice(0, 10);
+  };
+
   const formatSize = (bytes: number) => {
     if (!bytes) return '0 B';
     const k = 1024;
@@ -357,7 +511,7 @@ export function AdminPageTemplate({ config }: { config: any }) {
                 {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`}
+                {loading ? 'Loading…' : `${records.length} ${records.length === 1 ? 'item' : 'items'}`}
               </p>
             </div>
 
@@ -369,11 +523,10 @@ export function AdminPageTemplate({ config }: { config: any }) {
                   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'
-                  }`}
+                  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>
@@ -394,9 +547,8 @@ export function AdminPageTemplate({ config }: { config: any }) {
                     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'}`}
+                    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" />
@@ -417,9 +569,8 @@ export function AdminPageTemplate({ config }: { config: any }) {
                   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'}`}
+                  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" />
@@ -465,99 +616,94 @@ export function AdminPageTemplate({ config }: { config: any }) {
                     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}
+                      <motion.div
+                        key={record.id}
+                        initial={false}
+                        animate={{ opacity: 1, y: 0 }}
+                        exit={{ opacity: 0, scale: 0.95 }}
+                        onClick={() => startEdit(record)}
+                        className={`group flex flex-col bg-background border rounded-2xl p-5 transition-all relative cursor-pointer ${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 */}
+                        {true && (
+                          <div className="absolute top-3 right-3 flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-all z-10">
+                            {record.recordType === 'file' && record.downloadURL && (
+                              <>
+                                <button onClick={(e) => { e.stopPropagation(); navigator.clipboard.writeText(record.downloadURL!); setCopiedLink(record.id); setTimeout(() => setCopiedLink(null), 2000); }} className="p-1.5 rounded-lg text-foreground/25 hover:text-emerald-500 hover:bg-emerald-500/10 transition-all cursor-pointer" title="Copy Link">
+                                  {copiedLink === record.id ? <Check className="w-3.5 h-3.5 text-emerald-500" /> : <Link className="w-3.5 h-3.5" />}
+                                </button>
+                                <a href={record.downloadURL} target="_blank" rel="noreferrer" onClick={e => e.stopPropagation()} 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={(e) => { e.stopPropagation(); 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={(e) => { e.stopPropagation(); 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
+                            onClick={(e) => { e.stopPropagation(); if (record.recordType === 'file') setPreviewFile(record); }}
+                            className={`w-9 h-9 rounded-xl flex items-center justify-center shrink-0 ${record.recordType === 'file' ? `cursor-pointer hover:scale-105 transition-transform ${renderFileIconBg(record.fileType)}` : 'bg-accent/10 text-accent'}`}
+                          >
+                            {record.recordType === 'file' ? renderFileIcon(record.fileType, record.downloadURL) : <div className="w-2 h-2 rounded-full bg-current" />}
+                          </div>
+                          <div className="flex flex-col min-w-0 flex-1 relative">
+                            {renamingFileId === record.id ? (
+                              <input
+                                autoFocus
+                                type="text"
+                                value={renameFileName}
+                                onChange={e => setRenameFileName(e.target.value)}
+                                onBlur={() => handleRenameFile()}
+                                onKeyDown={e => { if (e.key === 'Enter') handleRenameFile(); if (e.key === 'Escape') setRenamingFileId(null); }}
+                                onClick={e => e.stopPropagation()}
+                                className="no-glow text-[14px] font-bold text-foreground bg-transparent border-b border-accent/30 outline-none pb-0.5 w-full pr-12"
+                              />
+                            ) : (
+                              <span className="text-[14px] font-bold text-foreground truncate pr-12">
+                                {record.name}
+                              </span>
+                            )}
+                            {record.recordType === 'file' && <div className="absolute inset-0 z-0 cursor-pointer" onClick={() => setPreviewFile(record)} />}
+                            <span className="text-[11px] text-foreground/35 font-bold uppercase tracking-wider mt-0.5">
+                              {formatDate(record.createdAt)}
                             </span>
-                          )}
-                          <span className="text-[11px] text-foreground/35 font-bold uppercase tracking-wider mt-0.5">
-                            {formatDate(record.createdAt)}
-                          </span>
+                          </div>
                         </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 && (
+                        {record.note && (
                           <p className="text-[13px] text-foreground/55 font-medium leading-relaxed line-clamp-3 mb-1">
                             {record.note}
                           </p>
-                        )
-                      )}
-
+                        )}
+                        {/* Extra custom fields display */}
+                        {Object.entries(record as any)
+                          .filter(([k]) => !['name','note','uid','recordType','fileName','fileType','fileSize','downloadURL','createdAt','creatorName','creatorEmail','creatorAvatar'].includes(k) && k !== 'id')
+                          .slice(0, 3)
+                          .map(([k, v]) => (
+                            <div key={k} className="flex items-center gap-1.5 mt-1">
+                              <span className="text-[10px] font-bold text-foreground/30 uppercase tracking-wider shrink-0">{k}:</span>
+                              <span className="text-[11px] font-semibold text-foreground/60 truncate">{String(v)}</span>
+                            </div>
+                          ))
+                        }
 
 
-                      {/* Creator profile badge */}
-                      <CreatorBadge record={record} />
-                    </motion.div>
-                  );
+                        {/* Creator profile badge */}
+                        <CreatorBadge record={record} />
+                      </motion.div>
+                    );
                   })}
                 </AnimatePresence>
               </div>
@@ -569,8 +715,8 @@ export function AdminPageTemplate({ config }: { config: any }) {
             <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> · 
+                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>
@@ -642,13 +788,256 @@ export function AdminPageTemplate({ config }: { config: any }) {
         )}
       </AnimatePresence>
 
+      {/* ── File Preview Modal (Drive-style) ───────────────────────────────────── */}
+      {typeof window !== 'undefined' && createPortal(
+        <AnimatePresence>
+          {previewFile && (
+            <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4 md:p-12">
+              <motion.div onClick={() => setPreviewFile(null)} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="absolute inset-0 bg-background/95 backdrop-blur-xl cursor-pointer" />
+              <button onClick={() => setPreviewFile(null)} className="absolute top-6 right-6 z-[160] w-12 h-12 bg-foreground/10 hover:bg-foreground/20 text-foreground rounded-full flex items-center justify-center backdrop-blur-md transition-all cursor-pointer outline-none">
+                <X className="w-5 h-5" />
+              </button>
+              <motion.div
+                initial={{ opacity: 0, scale: 0.95, y: 10 }}
+                animate={{ opacity: 1, scale: 1, y: 0 }}
+                exit={{ opacity: 0, scale: 0.95, y: 10 }}
+                className="relative z-10 w-full max-w-6xl max-h-[85vh] flex flex-col pointer-events-auto shadow-2xl rounded-3xl overflow-hidden glass-panel border border-[var(--panel-border)]"
+              >
+                {/* File Header */}
+                <div className="flex items-center justify-between p-6 bg-background/80 backdrop-blur-md border-b border-[var(--panel-border)] shrink-0 shadow-sm z-20">
+                  <div className="flex flex-col min-w-0 pr-4">
+                    <span className="text-xl font-extrabold text-foreground truncate">{previewFile.fileName || previewFile.name}</span>
+                    <span className="text-[12px] text-foreground/70 font-bold uppercase tracking-wider mt-1">
+                      {formatExtension(previewFile.fileType)} • {formatSize(previewFile.fileSize || 0)}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-2 shrink-0">
+                    <button
+                      onClick={() => { navigator.clipboard.writeText(previewFile.downloadURL!); setCopiedLink('preview'); setTimeout(() => setCopiedLink(null), 2000); }}
+                      className="p-2.5 bg-foreground/5 hover:bg-foreground/10 text-foreground/70 transition-colors rounded-xl shadow-sm hover:text-emerald-500 cursor-pointer"
+                      title="Copy Link"
+                    >
+                      {copiedLink === 'preview' ? <Check className="w-4 h-4 text-emerald-500" /> : <Link className="w-4 h-4" />}
+                    </button>
+                    <button
+                      onClick={() => { setPreviewFile(null); setRenamingFileId(previewFile.id); setRenameFileName(previewFile.name); }}
+                      className="p-2.5 bg-foreground/5 hover:bg-foreground/10 text-foreground/70 hover:text-accent transition-colors rounded-xl shadow-sm cursor-pointer"
+                      title="Rename"
+                    >
+                      <Edit2 className="w-4 h-4" />
+                    </button>
+                    <button
+                      onClick={() => { setPreviewFile(null); setDeleteConfirm(previewFile.id); }}
+                      className="p-2.5 bg-red-500/10 hover:bg-red-500/20 text-red-500 transition-colors rounded-xl shadow-sm cursor-pointer"
+                      title="Delete"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                    <a
+                      href={previewFile.downloadURL}
+                      download
+                      target="_blank"
+                      rel="noreferrer"
+                      className="p-2.5 btn-primary transition-colors rounded-xl shadow-lg ml-1"
+                      title="Download"
+                    >
+                      <Download className="w-4 h-4" />
+                    </a>
+                  </div>
+                </div>
+
+                {/* Preview Content */}
+                <div className="flex-1 w-full relative bg-foreground/[0.02] min-h-[50vh] md:min-h-[600px]" onClick={() => setPreviewFile(null)}>
+                  <div className="absolute inset-x-4 inset-y-8 md:inset-x-12 md:inset-y-12 flex items-center justify-center">
+                    {previewLoading && (
+                      <div className="absolute inset-0 flex items-center justify-center rounded-lg z-50 pointer-events-none">
+                        <div className="w-12 h-12 rounded-full bg-background/80 backdrop-blur-md shadow-xl flex items-center justify-center border border-[var(--panel-border)]/50">
+                          <Loader2 className="w-5 h-5 text-accent animate-spin" />
+                        </div>
+                      </div>
+                    )}
+                    {previewFile.fileType?.startsWith('image/') ? (
+                      <img
+                        onLoad={() => setPreviewLoading(false)}
+                        onError={() => setPreviewLoading(false)}
+                        src={previewFile.downloadURL}
+                        alt={previewFile.fileName || previewFile.name}
+                        className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-auto h-auto max-w-full max-h-full object-contain drop-shadow-[0_0_40px_rgba(0,0,0,0.5)] rounded-lg pointer-events-auto transition-opacity duration-500 ${previewLoading ? 'opacity-0' : 'opacity-100'}`}
+                        onClick={e => e.stopPropagation()}
+                      />
+                    ) : previewFile.fileType?.startsWith('video/') ? (
+                      <video
+                        onLoadedData={() => setPreviewLoading(false)}
+                        onError={() => setPreviewLoading(false)}
+                        src={previewFile.downloadURL}
+                        controls
+                        autoPlay
+                        className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-auto h-auto max-w-full max-h-full outline-none bg-black/40 rounded-lg pointer-events-auto drop-shadow-[0_0_40px_rgba(0,0,0,0.5)] transition-opacity duration-500 ${previewLoading ? 'opacity-0' : 'opacity-100'}`}
+                        onClick={e => e.stopPropagation()}
+                      />
+                    ) : previewFile.fileType === 'application/pdf' ? (
+                      <iframe
+                        onLoad={() => setPreviewLoading(false)}
+                        src={previewFile.downloadURL}
+                        className={`w-full h-full border-none rounded-lg relative z-10 transition-opacity duration-500 ${previewLoading ? 'opacity-0' : 'opacity-100'}`}
+                        style={{ backgroundColor: 'white' }}
+                        title="PDF Preview"
+                        onClick={e => e.stopPropagation()}
+                      />
+                    ) : (
+                      <div
+                        className="w-full h-full flex flex-col items-center justify-center text-foreground/40 text-center relative z-10"
+                        onClick={e => { e.stopPropagation(); setPreviewLoading(false); }}
+                      >
+                        <FileText className="w-24 h-24 mb-6 opacity-40 drop-shadow-sm" />
+                        <span className="text-[20px] font-extrabold text-foreground">Preview Unavailable</span>
+                        <span className="text-[14px] mt-2 text-foreground/60 font-medium max-w-xs">This file format cannot be previewed. Please download it instead.</span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </motion.div>
+            </div>
+          )}
+        </AnimatePresence>,
+        document.body
+      )}
+
+      {/* ── Edit Record Modal ──────────────────────────────────────────────── */}
+      <AnimatePresence>
+        {editingId && (
+          <div className="fixed inset-0 z-[120] flex items-center justify-center p-4">
+            <motion.div
+              onClick={() => handleSaveEdit()}
+              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-[440px] border-[var(--panel-border)] border rounded-2xl relative z-10 glass-panel shadow-2xl bg-background overflow-hidden"
+            >
+              <div className="p-5 flex flex-col gap-3 max-h-[80vh] overflow-y-auto">
+                {/* Header */}
+                <div className="flex items-center justify-between mb-2 mt-2 px-1">
+                  <div className="flex items-center gap-2">
+                    <span className="text-[14px] font-bold text-foreground">Edit Record</span>
+                    {saving && <Loader2 className="w-3 h-3 animate-spin text-foreground/40" />}
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => handleSaveEdit()}
+                    className="text-foreground/30 hover:text-foreground/60 transition-colors cursor-pointer"
+                  >
+                    <X className="w-4 h-4" />
+                  </button>
+                </div>
+
+                <div className="flex flex-col gap-0 max-h-[70vh] overflow-y-auto no-scrollbar px-1">
+                  {/* Name field */}
+                  <div className="flex flex-col relative group/field">
+                    <input
+                      readOnly
+                      value="NAME"
+                      className="no-glow bg-transparent text-[10px] font-bold text-foreground/30 uppercase tracking-[0.15em] outline-none pt-3 pb-0.5"
+                    />
+                    <input
+                      autoFocus
+                      required
+                      value={editName}
+                      onChange={e => setEditName(e.target.value)}
+                      onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); e.currentTarget.blur(); } }}
+                      onBlur={() => handleSilentSave()}
+                      placeholder="Name *"
+                      className="no-glow bg-transparent text-[13px] font-medium text-foreground outline-none placeholder:text-foreground/15 pb-1 caret-foreground/50"
+                    />
+                    <div className="border-b border-dashed border-[var(--panel-border)]/60" />
+                  </div>
+
+                  {/* Note field */}
+                  <div className="flex flex-col relative group/field">
+                    <input
+                      readOnly
+                      value="NOTE"
+                      className="no-glow bg-transparent text-[10px] font-bold text-foreground/30 uppercase tracking-[0.15em] outline-none pt-3 pb-0.5"
+                    />
+                    <textarea
+                      ref={el => { if (el) { el.style.height = 'auto'; el.style.height = el.scrollHeight + 'px'; } }}
+                      value={editNote}
+                      onChange={e => { setEditNote(e.target.value); e.target.style.height = 'auto'; e.target.style.height = e.target.scrollHeight + 'px'; }}
+                      onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); (e.target as HTMLTextAreaElement).blur(); } }}
+                      onBlur={() => handleSilentSave()}
+                      placeholder="Add a note..."
+                      rows={1}
+                      className="no-glow bg-transparent text-[13px] font-medium text-foreground outline-none placeholder:text-foreground/15 pb-1 caret-foreground/50 resize-none overflow-hidden"
+                    />
+                    <div className="border-b border-dashed border-[var(--panel-border)]/60" />
+                  </div>
+
+                  {/* Custom Fields */}
+                  {editFields.map((field, idx) => (
+                    <div key={idx} className="flex flex-col relative group/field">
+                      <input
+                        placeholder="FIELD NAME"
+                        value={field.key}
+                        onChange={e => {
+                          const next = [...editFields];
+                          next[idx].key = e.target.value;
+                          setEditFields(next);
+                        }}
+                        onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); e.currentTarget.blur(); } }}
+                        onBlur={() => handleSilentSave()}
+                        className="no-glow bg-transparent text-[10px] font-bold text-foreground/30 uppercase tracking-[0.15em] outline-none placeholder:text-foreground/15 pt-3 pb-0.5 caret-foreground/40"
+                      />
+                      <input
+                        placeholder="Field value..."
+                        value={field.value}
+                        onChange={e => {
+                          const next = [...editFields];
+                          next[idx].value = e.target.value;
+                          setEditFields(next);
+                        }}
+                        onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); e.currentTarget.blur(); } }}
+                        onBlur={() => handleSilentSave()}
+                        className="no-glow bg-transparent text-[13px] font-medium text-foreground outline-none placeholder:text-foreground/15 pt-1.5 pb-1 caret-foreground/50"
+                      />
+                      <div className="border-b border-dashed border-[var(--panel-border)]/60" />
+                      <button
+                        type="button"
+                        onClick={() => setEditFields(editFields.filter((_, i) => i !== idx))}
+                        className="absolute top-3 right-0 p-1 text-foreground/0 group-hover/field:text-foreground/20 hover:!text-red-400 transition-colors cursor-pointer"
+                      >
+                        <X className="w-3 h-3" />
+                      </button>
+                    </div>
+                  ))}
+
+                  {/* Add Field */}
+                  <button
+                    type="button"
+                    onClick={() => setEditFields([...editFields, { key: '', value: '' }])}
+                    className="flex items-center gap-1.5 text-[11px] font-medium text-foreground/25 hover:text-foreground/40 transition-colors cursor-pointer mt-4 mb-4"
+                  >
+                    <Plus className="w-3 h-3" /> Add Field
+                  </button>
+                </div>
+              </div>
+            </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."
+        message={<>Are you sure you want to delete <strong className="text-foreground block my-0.5 text-left overflow-hidden text-ellipsis whitespace-nowrap max-w-full">{records.find(r => r.id === deleteConfirm)?.name}</strong> This action cannot be undone.</>}
         confirmText="Delete"
         isProcessing={isDeleting}
       />