firebase-os 1.1.4 → 1.1.6

package/src/templates/PrivatePageTemplate.tsx

@@ -0,0 +1,594 @@
+import React, { useState, useEffect, useRef } 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, query, where, serverTimestamp, deleteDoc, updateDoc, doc } 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;
+}
+
+import { privateCrudPrompt } from '../prompts';
+
+export function PrivatePageTemplate({ 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 [availableForms, setAvailableForms] = useState<string[]>([]);
+
+  const parsedTabName = (config.tabName || config.pageId || 'private_page')
+    .toLowerCase().replace(/[^a-z0-9]+/g, '_');
+  const recordsCollection = `user_${parsedTabName}_records`;
+
+  useEffect(() => {
+    document.title = config.tabTitle || config.tabName || 'Firebase OS';
+    getDocs(collection(db, 'sys_forms')).then(snap => {
+       setAvailableForms(snap.docs.filter(d => d.data().formType === 'private').map(doc => doc.id));
+    });
+  }, [config.tabTitle, config.tabName]);
+
+  // ── Fetch user records ────────────────────────────────────────────────────
+  useEffect(() => {
+    if (!user) return;
+    const fetchRecords = async () => {
+      setLoading(true);
+      try {
+        const snap = await getDocs(query(
+          collection(db, recordsCollection),
+          where('uid', '==', user.uid)
+        ));
+        const items = snap.docs.map(d => ({
+          id: d.id,
+          ...d.data(),
+        } as SavedRecord));
+        items.sort((a, b) => {
+          const t1 = a.createdAt?.toMillis?.() || 0;
+          const t2 = b.createdAt?.toMillis?.() || 0;
+          return t2 - t1;
+        });
+        setRecords(items);
+      } catch (e) {
+        console.error('Error fetching records:', e);
+      }
+      setLoading(false);
+    };
+    fetchRecords();
+  }, [user, recordsCollection]);
+
+  // ── Save new record ───────────────────────────────────────────────────────
+  const handleSaveRecord = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!user || !newName.trim()) return;
+    setSaving(true);
+    try {
+      const docRef = await addDoc(collection(db, recordsCollection), {
+        name: newName.trim(),
+        note: newNote.trim(),
+        uid: user.uid,
+        recordType: 'record',
+        createdAt: serverTimestamp(),
+      });
+      setRecords(prev => [{
+        id: docRef.id,
+        name: newName.trim(),
+        note: newNote.trim(),
+        uid: user.uid,
+        recordType: 'record',
+        createdAt: { toMillis: () => Date.now() },
+      }, ...prev]);
+      setNewName('');
+      setNewNote('');
+      setShowAddForm(false);
+    } catch (e) {
+      console.error('Error saving 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 = `user_files/${uniqueName}`;
+      const fileRef = ref(storage, storagePath);
+      await uploadBytes(fileRef, file, {
+        customMetadata: { ownerId: user.uid }
+      });
+      const downloadURL = await getDownloadURL(fileRef);
+
+      // Save to user_files so it appears in Drive > Private
+      await addDoc(collection(db, 'user_files'), {
+        fileName: file.name,
+        fileType: file.type || 'unknown',
+        fileSize: file.size,
+        downloadURL,
+        uid: user.uid,
+        uploaderEmail: user.email || 'user',
+        sourceTab: parsedTabName,
+        accessPrefix: 'user_',
+        createdAt: serverTimestamp(),
+      });
+
+      // Save reference in this tab's records collection
+      const docRef = 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,
+        createdAt: serverTimestamp(),
+      });
+
+      setRecords(prev => [{
+        id: docRef.id,
+        name: file.name,
+        note: `${file.type || 'File'} · ${formatSize(file.size)}`,
+        uid: user.uid,
+        recordType: 'file',
+        fileName: file.name,
+        fileType: file.type,
+        fileSize: file.size,
+        downloadURL,
+        createdAt: { toMillis: () => Date.now() },
+      }, ...prev]);
+    } catch (e) {
+      console.error('Error uploading 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 user_files
+      if (record?.recordType === 'file' && record.downloadURL) {
+        try {
+          const fileName = record.downloadURL.split('user_files%2F')[1]?.split('?')[0];
+          if (fileName) {
+            const fileRef = ref(storage, `user_files/${decodeURIComponent(fileName)}`);
+            await deleteObject(fileRef).catch(() => {});
+          }
+          const filesSnap = await getDocs(query(
+            collection(db, 'user_files'),
+            where('downloadURL', '==', record.downloadURL)
+          ));
+          for (const d of filesSnap.docs) {
+            await deleteDoc(d.ref);
+          }
+        } catch (e) {
+          console.error('Error cleaning up user file:', e);
+        }
+      }
+
+      setRecords(prev => prev.filter(r => r.id !== deleteConfirm));
+      setDeleteConfirm(null);
+    } catch (e) {
+      console.error('Error deleting 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; // no changes
+    }
+    try {
+      await updateDoc(doc(db, recordsCollection, editingId), {
+        name: editName.trim(),
+        note: editNote.trim(),
+      });
+      setRecords(prev => prev.map(r => r.id === editingId ? { ...r, name: editName.trim(), note: editNote.trim() } : r));
+    } catch (e) {
+      console.error('Error updating record:', e);
+    }
+    setEditingId(null);
+  };
+
+  // ── Utils ─────────────────────────────────────────────────────────────────
+  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 = privateCrudPrompt(config, recordsCollection, availableForms);
+
+  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';
+
+  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 || 'Private 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 — buttons live INSIDE the container */}
+          <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'}`}
+              </p>
+            </div>
+
+            <div className="flex items-center gap-2 shrink-0">
+              {/* Prompt Copy — robot icon, secondary, no text */}
+              {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 — to the LEFT of + button */}
+              {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 — primary by default */}
+              {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 to get started
+                </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;
+                    return (
+                      <motion.div
+                        key={record.id}
+                        initial={{ opacity: 0, y: 10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        exit={{ opacity: 0, scale: 0.95 }}
+                        transition={{ delay: i * 0.03, duration: 0.25 }}
+                        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>
+                            )}
+                            <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-3">
+                          <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>
+                          )
+                        )}
+
+
+                      </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>
+                Each user sees their own data only · Edit and delete available on all items ·
+                Records: <code className="text-foreground/40 font-mono text-[10px]">{recordsCollection}</code> ·
+                Files: <code className="text-foreground/40 font-mono text-[10px]">user_files</code> → Drive / Private
+              </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>
+  );
+}