firebase-os 1.1.4 → 1.1.5

package/src/templates/TemplateTable.tsx

@@ -0,0 +1,675 @@
+import { ArrowLeft, Search, Download, Plus, Trash, ChevronDown, Palette, X, Bot, Check } from 'lucide-react';
+import { adminTablePrompt, privateTablePrompt, publicTablePrompt } from '../prompts';
+import Fuse from 'fuse.js';
+import { Link } from 'react-router-dom';
+import { Button } from '../components/Button';
+import { useState, useEffect } from 'react';
+import { db } from '../lib/firebase';
+import { collection, onSnapshot, doc, setDoc, deleteDoc, getDocs, query, where } from 'firebase/firestore';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useAuth } from '../lib/AuthContext';
+import { DashboardNav } from '../components/DashboardNav';
+
+interface TableState {
+  id?: string;
+  name?: string;
+  columns: string[];
+  rows: Record<string, string>[];
+  colColors?: Record<string, string>;
+  rowColors?: Record<string, string>;
+  headerColor?: string;
+  colorTimestamps?: Record<string, number>;
+}
+
+const pastelColors = [
+  { text: 'text-red-400', bgCircle: 'bg-red-400', bgCard: 'bg-red-500/[0.08]', borderCard: 'border-red-500/30', bgLight: 'bg-red-500/15', bgHover: 'hover:bg-red-500', bgAlt: 'bg-red-500/[0.04]', name: 'Red' },
+  { text: 'text-orange-400', bgCircle: 'bg-orange-400', bgCard: 'bg-orange-500/[0.08]', borderCard: 'border-orange-500/30', bgLight: 'bg-orange-500/15', bgHover: 'hover:bg-orange-500', bgAlt: 'bg-orange-500/[0.04]', name: 'Orange' },
+  { text: 'text-yellow-400', bgCircle: 'bg-yellow-400', bgCard: 'bg-yellow-500/[0.08]', borderCard: 'border-yellow-500/30', bgLight: 'bg-yellow-500/15', bgHover: 'hover:bg-yellow-500', bgAlt: 'bg-yellow-500/[0.04]', name: 'Yellow' },
+  { text: 'text-green-400', bgCircle: 'bg-green-400', bgCard: 'bg-green-500/[0.08]', borderCard: 'border-green-500/30', bgLight: 'bg-green-500/15', bgHover: 'hover:bg-green-500', bgAlt: 'bg-green-500/[0.04]', name: 'Green' },
+  { text: 'text-blue-400', bgCircle: 'bg-blue-400', bgCard: 'bg-blue-500/[0.08]', borderCard: 'border-blue-500/30', bgLight: 'bg-blue-500/15', bgHover: 'hover:bg-blue-500', bgAlt: 'bg-blue-500/[0.04]', name: 'Blue' },
+  { text: 'text-accent', bgCircle: 'bg-accent', bgCard: 'bg-accent/[0.08]', borderCard: 'border-accent/30', bgLight: 'bg-accent/15', bgHover: 'hover:bg-accent', bgAlt: 'bg-accent/[0.04]', name: 'Purple' },
+  { text: 'text-pink-400', bgCircle: 'bg-pink-400', bgCard: 'bg-pink-500/[0.08]', borderCard: 'border-pink-500/30', bgLight: 'bg-pink-500/15', bgHover: 'hover:bg-pink-500', bgAlt: 'bg-pink-500/[0.04]', name: 'Pink' },
+  { text: 'text-foreground/60', bgCircle: 'bg-foreground/30', bgCard: 'bg-foreground/[0.04]', borderCard: 'border-[var(--panel-border)]/50', bgLight: 'bg-foreground/15', bgHover: 'hover:bg-foreground/30', bgAlt: 'bg-foreground/[0.02]', name: 'Default' },
+];
+
+export interface TableProps {
+  title?: string;
+  subtitle?: string;
+  backUrl?: string;
+  tableCollection?: string;
+  config?: any;
+}
+
+export function TemplateTable({
+  title = 'Table View',
+  subtitle = '/templates/table',
+  backUrl = '/templates',
+  tableCollection = 'pub_table_data',
+  config
+}: TableProps) {
+  const { user } = useAuth();
+  const isTabMode = !!config;
+  const isPrivate = config?.isPrivate && !config?.isAdmin && !config?.isShared;
+  const isAdminOrShared = config?.isAdmin || config?.isShared;
+  const showCreator = isTabMode ? isAdminOrShared : true;
+  const showAddButton = config?.showButton !== false;
+  const addButtonText = config?.buttonText || '+';
+  const addButtonStyle = config?.buttonStyle || 'secondary';
+  const showExportButton = config?.showExportButton !== false;
+  const showPrompt = config?.showPrompt;
+  const [tables, setTables] = useState<TableState[]>([]);
+  const [currentTableId, setCurrentTableId] = useState<string>('demo');
+  const [showTableSelector, setShowTableSelector] = useState(false);
+  const [editingTableName, setEditingTableName] = useState(false);
+  const [tableNameInput, setTableNameInput] = useState('');
+  const [isCreatingTable, setIsCreatingTable] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const [availableForms, setAvailableForms] = useState<string[]>([]);
+
+  // Prompt text
+  const getPrompt = () => {
+    if (config?.isAdmin) return adminTablePrompt(config, title, tableCollection);
+    if (config?.isPrivate) return privateTablePrompt(config, title, tableCollection, availableForms);
+    return publicTablePrompt(config, title, tableCollection, availableForms);
+  };
+  const promptText = getPrompt();
+
+  const handleCopyPrompt = () => {
+    navigator.clipboard.writeText(promptText);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const [editingCell, setEditingCell] = useState<{ id: string, field: string } | null>(null);
+  const [editingHeader, setEditingHeader] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [headerInput, setHeaderInput] = useState('');
+  const [activeRowPicker, setActiveRowPicker] = useState<string | null>(null);
+  const [activeColPicker, setActiveColPicker] = useState<string | null>(null);
+  const [showHeaderPicker, setShowHeaderPicker] = useState(false);
+
+  useEffect(() => {
+    // Fetch forms
+    const isShared = config?.isShared;
+    const isAdmin = config?.isAdmin;
+    const isPrivate = config?.isPrivate && !isAdmin && !isShared;
+    const isPublic = !isAdmin && !isShared && !isPrivate;
+
+    if (isPrivate || isPublic) {
+      getDocs(collection(db, 'sys_forms')).then(snap => {
+        const type = isPublic ? 'public' : 'private';
+        setAvailableForms(snap.docs.filter(d => d.data().formType === type).map(doc => doc.id));
+      });
+    } else {
+      setAvailableForms([]);
+    }
+
+    const isTablePrivate = tableCollection.startsWith('user_');
+    if (isTablePrivate && !user) return; // Wait for auth
+
+    const tableQuery = (isTablePrivate && user)
+      ? query(collection(db, tableCollection), where('uid', '==', user.uid))
+      : collection(db, tableCollection);
+
+    const unsub = onSnapshot(tableQuery as any, (snapshot: any) => {
+      const fetched: TableState[] = [];
+      snapshot.forEach((docSnap: any) => {
+        fetched.push({ id: docSnap.id, ...docSnap.data() } as TableState);
+      });
+
+      if (fetched.length === 0) {
+        const initialState = {
+          name: 'Unnamed Table',
+          columns: ['Column 1', 'Column 2', 'Column 3', 'Column 4'],
+          ...(user ? { uid: user.uid } : {}),
+          rows: [
+            { id: '1', 'Column 1': '', 'Column 2': '', 'Column 3': '', 'Column 4': '' },
+            { id: '2', 'Column 1': '', 'Column 2': '', 'Column 3': '', 'Column 4': '' }
+          ]
+        };
+        setDoc(doc(db, tableCollection, 'demo'), initialState);
+      } else {
+        setTables(fetched.sort((a, b) => (a.name || '').localeCompare(b.name || '')));
+      }
+    });
+    return () => unsub();
+  }, [tableCollection, user]);
+
+  const activeTable = tables.find(t => t.id === currentTableId) || tables[0] || { columns: [], rows: [] };
+
+  const saveState = async (newState: TableState) => {
+    if (activeTable.id) {
+      if (user && tableCollection.startsWith('user_')) (newState as any).uid = user.uid;
+      await setDoc(doc(db, tableCollection, activeTable.id), newState, { merge: true });
+    }
+  };
+
+  const exportCSV = () => {
+    if (!activeTable.rows || activeTable.rows.length === 0) return;
+    const headers = activeTable.columns.join(',');
+    const csvRows = activeTable.rows.map(r => activeTable.columns.map(col => `"${r[col] || ''}"`).join(',')).join('\n');
+    const blob = new Blob([`${headers}\n${csvRows}`], { type: 'text/csv' });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `export_${activeTable.name || 'table'}.csv`;
+    a.click();
+    window.URL.revokeObjectURL(url);
+  };
+
+  const updateCell = (id: string, field: string, value: string) => {
+    saveState({ ...activeTable, rows: activeTable.rows.map(r => r.id === id ? { ...r, [field]: value } : r) });
+  };
+
+  const addRow = () => {
+    const newRow = { id: Date.now().toString() };
+    activeTable.columns.forEach(c => (newRow as any)[c] = '');
+    saveState({ ...activeTable, rows: [...(activeTable.rows || []), newRow] });
+  };
+
+  const deleteRow = (id: string) => {
+    saveState({ ...activeTable, rows: activeTable.rows.filter(r => r.id !== id) });
+  };
+
+  const addColumn = () => {
+    const newColName = `Column ${(activeTable.columns?.length || 0) + 1}`;
+    if (!activeTable.columns?.includes(newColName)) {
+      saveState({ ...activeTable, columns: [...(activeTable.columns || []), newColName] });
+      setTimeout(() => {
+        const container = document.getElementById('table-scroll-container');
+        if (container) container.scrollTo({ left: container.scrollWidth, behavior: 'smooth' });
+      }, 100);
+    }
+  };
+
+  const deleteColumn = (colName: string) => {
+    const newCols = (activeTable.columns || []).filter(c => c !== colName);
+    const newRows = (activeTable.rows || []).map(r => {
+      const nr = { ...r };
+      delete nr[colName];
+      return nr;
+    });
+    const newColColors = { ...(activeTable.colColors || {}) };
+    delete newColColors[colName];
+    saveState({ ...activeTable, columns: newCols, rows: newRows, colColors: newColColors });
+  };
+
+  const renameActiveTable = async (newName: string) => {
+    if (newName.trim() && activeTable.id && newName !== activeTable.name) {
+      await setDoc(doc(db, tableCollection, activeTable.id), { name: newName }, { merge: true });
+    }
+  };
+
+  const createNewTable = async () => {
+    setIsCreatingTable(true);
+    setShowTableSelector(false);
+    const newId = `tbl_${Date.now()}`;
+    await setDoc(doc(db, tableCollection, newId), {
+      name: 'Unnamed Table',
+      columns: ['Column 1', 'Column 2', 'Column 3'],
+      ...(user ? { uid: user.uid } : {}),
+      rows: []
+    });
+    setTimeout(() => {
+      setCurrentTableId(newId);
+      setIsCreatingTable(false);
+    }, 600);
+  };
+
+  const saveHeaderRename = (oldName: string) => {
+    const newName = headerInput.trim();
+    if (newName && newName !== oldName && !activeTable.columns?.includes(newName)) {
+      const newCols = activeTable.columns.map(c => c === oldName ? newName : c);
+      const newRows = (activeTable.rows || []).map(r => {
+        const nr = { ...r };
+        nr[newName] = nr[oldName] || '';
+        delete nr[oldName];
+        return nr;
+      });
+      const newColColors = { ...(activeTable.colColors || {}) };
+      if (newColColors[oldName]) {
+        newColColors[newName] = newColColors[oldName];
+        delete newColColors[oldName];
+      }
+      saveState({ ...activeTable, columns: newCols, rows: newRows, colColors: newColColors });
+    }
+    setEditingHeader(null);
+  };
+
+  let searchedRows = activeTable.rows || [];
+  if (searchQuery.trim() !== '') {
+    const fuseData = searchedRows.map(r => ({ ...r, _creatorMatch: 'Guest' }));
+    const keys = (activeTable.columns || []).concat(['_creatorMatch']);
+    const fuse = new Fuse(fuseData, { keys, threshold: 0.4, ignoreLocation: true });
+    searchedRows = fuse.search(searchQuery).map(result => {
+      const { _creatorMatch, ...originalRow } = result.item;
+      return originalRow as Record<string, string>;
+    });
+  }
+
+
+
+  return (
+    <main className="flex-1 w-full max-w-7xl mx-auto p-4 md:p-8 z-10 flex flex-col pt-12 min-h-screen">
+      <motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="mb-4">
+        <h1 className="w-fit inline-block text-3xl md:text-4xl lg:text-5xl font-extrabold tracking-tight mb-3 text-gradient mt-1">
+          {title}
+        </h1>
+        {subtitle && (
+          <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" />
+            {subtitle}
+          </div>
+        )}
+      </motion.div>
+
+      {isTabMode && <div className="mb-6"><DashboardNav /></div>}
+
+      <div className="flex justify-between items-center mb-6 border-b border-[var(--panel-border)] pb-6 relative z-20">
+        {!isTabMode && backUrl && (
+          <Link to={backUrl} className="px-4 md:px-5 py-2.5 border border-[var(--panel-border)] rounded-xl text-[13px] font-bold hover:bg-foreground/5 transition-all flex items-center gap-2 shrink-0">
+            <ArrowLeft className="w-4 h-4" /> <span className="hidden sm:inline">Go Back</span>
+          </Link>
+        )}
+        {isTabMode && <div />}
+        <div className="flex gap-2 shrink-0">
+          {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 border border-emerald-500/20'
+                : 'btn-secondary shadow-lg'
+                }`}
+            >
+              {copied ? <Check className="w-4 h-4" /> : <Bot className="w-4 h-4" />}
+            </motion.button>
+          )}
+          {showExportButton && (
+            <Button variant="secondary" onClick={exportCSV} className="px-3 py-2.5 font-bold rounded-xl shadow-sm border border-[var(--panel-border)] flex items-center gap-2">
+              <Download className="w-4 h-4" />
+            </Button>
+          )}
+          {showAddButton && (
+            <Button variant={addButtonStyle === 'primary' ? undefined : 'secondary'} onClick={addRow} className="px-3 py-2.5 font-bold rounded-xl border border-[var(--panel-border)] shadow-sm flex items-center gap-2">
+              {addButtonText === '+' ? <Plus className="w-4 h-4" /> : addButtonText}
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="glass-panel border border-[var(--panel-border)] rounded-3xl overflow-hidden shadow-2xl relative z-10 block"
+      >
+        <div className="absolute top-0 right-0 w-[400px] h-[400px] bg-accent/5 blur-[100px] rounded-full pointer-events-none -z-10" />
+
+        <div className="p-4 md:px-6 border-b border-[var(--panel-border)]/50 flex flex-col sm:flex-row items-start sm:items-center justify-between bg-foreground/[0.01] gap-4">
+
+          {/* Table Selector & Title Editor */}
+          <div className="flex flex-col w-full sm:w-auto relative">
+            <div className="flex items-center gap-2 relative">
+              <div className="relative flex items-center">
+                {editingTableName ? (
+                  <div
+                    contentEditable
+                    suppressContentEditableWarning
+                    onBlur={(e) => { setEditingTableName(false); renameActiveTable(e.currentTarget.textContent || ''); }}
+                    onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); e.currentTarget.blur(); } }}
+                    className="bg-transparent border-b-2 border-accent outline-none text-[16px] font-bold text-foreground inline-block min-w-[20px] whitespace-nowrap px-1 py-0.5"
+                  >{activeTable.name || 'Unnamed Table'}</div>
+                ) : (
+                  <h3 className="font-bold text-[16px] text-foreground/90 cursor-pointer hover:text-accent transition-colors truncate max-w-[200px]" onClick={() => setEditingTableName(true)} title="Click to rename table">
+                    {activeTable.name || 'Unnamed Table'}
+                  </h3>
+                )}
+
+                <AnimatePresence>
+                  {showTableSelector && (
+                    <>
+                      <div className="fixed inset-0 z-40" onClick={() => setShowTableSelector(false)} />
+                      <motion.div
+                        initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }}
+                        className="absolute top-[120%] left-0 w-[220px] bg-background/95 backdrop-blur-xl border border-[var(--panel-border)] rounded-2xl shadow-2xl z-50 py-2 flex flex-col"
+                      >
+                        <div className="px-4 py-2 text-[10px] font-bold uppercase tracking-wider text-foreground/40 border-b border-[var(--panel-border)] mb-1">Your Tables</div>
+                        <div className="max-h-[250px] overflow-y-auto styled-scrollbars z-50 relative">
+                          {tables.map(t => (
+                            <button key={t.id} onClick={() => { setCurrentTableId(t.id!); setShowTableSelector(false); }} className={`w-full px-4 py-2 text-[13px] font-bold text-left hover:bg-foreground/[0.03] transition-colors truncate ${currentTableId === t.id ? 'text-accent bg-accent/5' : 'text-foreground/70'}`}>
+                              {t.name || 'Unnamed Table'}
+                            </button>
+                          ))}
+                        </div>
+                        <div className="w-full h-[1px] bg-[var(--panel-border)]/50 my-1" />
+                        <button onClick={createNewTable} className="w-full px-4 py-2.5 text-[13px] font-bold text-left text-foreground/70 hover:text-foreground hover:bg-foreground/5 transition-colors flex items-center gap-2">
+                          <Plus className="w-4 h-4" /> Create New Table
+                        </button>
+                      </motion.div>
+                    </>
+                  )}
+                </AnimatePresence>
+              </div>
+
+              <button onClick={() => setShowTableSelector(!showTableSelector)} className="p-1 px-1.5 rounded-lg hover:bg-foreground/5 transition-colors text-foreground/40 hover:text-foreground shrink-0 border border-transparent hover:border-[var(--panel-border)]">
+                <ChevronDown className={`w-4 h-4 transition-transform ${showTableSelector ? 'rotate-180 text-accent' : ''}`} />
+              </button>
+            </div>
+            <span className="opacity-40 text-[11px] font-bold mt-1 uppercase tracking-wider">{(activeTable.rows || []).length} Records</span>
+          </div>
+
+          <div className="relative w-full sm:max-w-[300px]">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground/40" />
+            <input
+              type="text"
+              placeholder="Search active records..."
+              value={searchQuery}
+              onChange={e => setSearchQuery(e.target.value)}
+              className="w-full bg-background border border-[var(--panel-border)] rounded-xl py-2.5 px-9 text-[13px] font-medium text-foreground focus:outline-none focus:border-accent transition-colors shadow-inner"
+            />
+          </div>
+        </div>
+
+        <div id="table-scroll-container" className="overflow-x-auto w-full block min-h-[300px] relative styled-scrollbars">
+          <AnimatePresence mode="wait">
+            {isCreatingTable ? (
+              <motion.div key="loader" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="absolute inset-0 flex flex-col items-center justify-center bg-background/40 backdrop-blur-[2px] z-50">
+                <div className="w-8 h-8 rounded-full border-2 border-accent border-r-transparent animate-spin mb-4" />
+                <p className="text-[11px] font-bold text-foreground/50 uppercase tracking-widest">Generating Table</p>
+              </motion.div>
+            ) : (
+              <motion.table key="table" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="w-full text-left border-collapse table-auto relative min-w-[800px]">
+                <thead>
+                  <tr className={`border-b border-[var(--panel-border)] transition-colors ${activeTable.headerColor ? pastelColors.find(c => c.text === activeTable.headerColor)?.bgAlt : 'bg-foreground/[0.02]'}`}>
+                    <th className={`py-4 px-6 text-[12px] font-bold uppercase tracking-wider whitespace-nowrap text-foreground/50 w-32 border-r border-[var(--panel-border)]/20 ${!showCreator ? 'hidden' : ''}`}>Creator</th>
+                    {(activeTable.columns || []).map((col, idx) => {
+                      const colColor = (activeTable.colColors || {})[col];
+                      const colTs = (activeTable.colorTimestamps || {})[`col_${col}`] || 0;
+                      const headColor = activeTable.headerColor;
+                      const headTs = (activeTable.colorTimestamps || {})['header'] || 0;
+
+                      let colBgClass = 'bg-transparent';
+                      let colTextClass = 'text-foreground/50';
+
+                      if (colColor && colColor !== 'none' && colTs >= headTs) {
+                        const colDef = pastelColors.find(c => c.text === colColor);
+                        if (colDef) {
+                          colBgClass = colDef.bgCard;
+                          colTextClass = colDef.text;
+                        }
+                      }
+
+                      return (
+                        <th key={`col_${idx}_${col}`} className={`py-3 px-6 text-[12px] font-bold uppercase tracking-wider relative group h-[53px] min-w-[120px] ${colTextClass} ${colBgClass} border-r border-[var(--panel-border)]/20 last:border-r-0 select-none align-middle`}>
+                          <div className="flex items-center justify-between gap-2 w-full h-full">
+                            {editingHeader === col ? (
+                              <div className="flex-1 min-w-[50px]">
+                                <span
+                                  contentEditable
+                                  suppressContentEditableWarning
+                                  onBlur={(e) => {
+                                    setEditingHeader(null);
+                                    setHeaderInput(e.currentTarget.textContent || '');
+                                    if ((e.currentTarget.textContent || '').trim() !== '') saveHeaderRename(col);
+                                  }}
+                                  onKeyDown={e => {
+                                    if (e.key === 'Enter') {
+                                      e.preventDefault();
+                                      e.currentTarget.blur();
+                                    }
+                                  }}
+                                  className={`bg-transparent outline-none border-b border-accent/40 font-bold text-[12px] uppercase tracking-wider p-0 m-0 ${colTextClass} block w-full whitespace-nowrap overflow-hidden cursor-text`}
+                                  ref={el => { if (el) requestAnimationFrame(() => { el.focus(); }); }}
+                                >{headerInput}</span>
+                              </div>
+                            ) : (
+                              <div className="flex items-center gap-2 flex-1 overflow-hidden" onClick={() => { setEditingHeader(col); setHeaderInput(col); }}>
+                                <span className="truncate cursor-text">{col}</span>
+                              </div>
+                            )}
+
+                            <div className="relative shrink-0 flex items-center h-full gap-0.5">
+                              <button onClick={() => setActiveColPicker(activeColPicker === col ? null : col)} className={`p-1.5 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity hover:bg-foreground/10 ${colColor && colColor !== 'none' ? '!opacity-100' : ''} text-current`}>
+                                <Palette className="w-4 h-4" />
+                              </button>
+                              {(activeTable.columns || []).length > 1 && (
+                                <button
+                                  onClick={(e) => { e.stopPropagation(); deleteColumn(col); }}
+                                  className="p-1.5 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-500/10 text-foreground/30 hover:text-red-500"
+                                  title="Delete column"
+                                >
+                                  <Trash className="w-3.5 h-3.5" />
+                                </button>
+                              )}
+                              {activeColPicker === col && (
+                                <>
+                                  <div className="fixed inset-0 z-30" onClick={() => setActiveColPicker(null)} />
+                                  <div className="absolute top-8 right-0 flex gap-1.5 bg-background/95 backdrop-blur-xl border border-[var(--panel-border)] p-2 rounded-xl shadow-xl z-50 items-center">
+                                    <button
+                                      onClick={(e) => {
+                                        e.preventDefault(); e.stopPropagation();
+                                        const colors = { ...(activeTable.colColors || {}), [col]: 'none' };
+                                        const ts = { ...(activeTable.colorTimestamps || {}), [`col_${col}`]: Date.now() };
+                                        saveState({ ...activeTable, colColors: colors, colorTimestamps: ts });
+                                        setActiveColPicker(null);
+                                      }}
+                                      className="w-4 h-4 rounded-full flex items-center justify-center bg-foreground/10 hover:bg-red-500/20 hover:text-red-500 text-foreground/40 transition-colors border border-[var(--panel-border)]/50 shrink-0"
+                                      title="Remove Color"
+                                    >
+                                      <X className="w-3 h-3" />
+                                    </button>
+                                    <div className="h-4 w-px bg-[var(--panel-border)]/50 mx-0.5" />
+                                    {pastelColors.map(c => (
+                                      <button
+                                        key={c.name}
+                                        onClick={(e) => {
+                                          e.preventDefault();
+                                          e.stopPropagation();
+                                          const colors = { ...(activeTable.colColors || {}), [col]: c.text };
+                                          const ts = { ...(activeTable.colorTimestamps || {}), [`col_${col}`]: Date.now() };
+                                          saveState({ ...activeTable, colColors: colors, colorTimestamps: ts });
+                                          setActiveColPicker(null);
+                                        }}
+                                        className={`w-4 h-4 rounded-full ${c.bgCircle} hover:scale-125 transition-transform border border-[var(--panel-border)]/50 shrink-0`}
+                                      />
+                                    ))}
+                                  </div>
+                                </>
+                              )}
+                            </div>
+                          </div>
+                        </th>
+                      )
+                    })}
+                    <th className="py-4 px-4 w-14 border-l border-[var(--panel-border)]/30 relative">
+                      <div className="flex items-center justify-end gap-0.5 relative z-20">
+                        <button onClick={() => setShowHeaderPicker(!showHeaderPicker)} className={`p-1.5 rounded-lg transition-colors hover:bg-foreground/10 ${activeTable.headerColor ? pastelColors.find(p => p.text === activeTable.headerColor)?.text : 'text-foreground/30'}`}>
+                          <Palette className="w-4 h-4" />
+                        </button>
+                        {showHeaderPicker && (
+                          <>
+                            <div className="fixed inset-0 z-30" onClick={() => setShowHeaderPicker(false)} />
+                            <div className="absolute top-6 right-8 flex gap-1.5 bg-background/90 backdrop-blur-xl border border-[var(--panel-border)] p-2 rounded-xl shadow-xl z-50 items-center">
+                              <button
+                                onClick={() => {
+                                  saveState({ ...activeTable, headerColor: '' });
+                                  setShowHeaderPicker(false);
+                                }}
+                                className="w-4 h-4 rounded-full flex items-center justify-center bg-foreground/10 hover:bg-red-500/20 hover:text-red-500 text-foreground/40 transition-colors border border-[var(--panel-border)]/50 shrink-0"
+                                title="Remove Header Color"
+                              >
+                                <X className="w-3 h-3" />
+                              </button>
+                              <div className="h-4 w-px bg-[var(--panel-border)]/50 mx-0.5" />
+                              {pastelColors.map(c => (
+                                <button
+                                  key={c.name}
+                                  onClick={() => {
+                                    const ts = { ...(activeTable.colorTimestamps || {}), ['header']: Date.now() };
+                                    saveState({ ...activeTable, headerColor: c.text, colorTimestamps: ts });
+                                    setShowHeaderPicker(false);
+                                  }}
+                                  className={`w-4 h-4 rounded-full ${c.bgCircle} hover:scale-125 transition-transform border border-[var(--panel-border)]/50`}
+                                />
+                              ))}
+                            </div>
+                          </>
+                        )}
+                        <button onClick={addColumn} className="p-1.5 rounded-lg text-foreground/40 hover:text-accent hover:bg-accent/10 transition-colors flex items-center justify-center">
+                          <Plus className="w-4 h-4" />
+                        </button>
+                      </div>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {searchedRows.map((row, idx) => {
+                    const isOdd = idx % 2 === 1;
+                    const rowColorVal = (activeTable.rowColors || {})[row.id];
+                    const creatorColorClass = rowColorVal ? (isOdd ? pastelColors.find(c => c.text === rowColorVal)?.bgAlt : pastelColors.find(c => c.text === rowColorVal)?.bgCard) : (isOdd ? 'bg-foreground/[0.02]' : 'bg-transparent');
+
+                    return (
+                      <tr key={row.id || `row_${idx}`} className="border-b border-[var(--panel-border)]/30 hover:bg-foreground/[0.04] transition-colors group">
+                        <td className={`py-4 px-6 whitespace-nowrap h-[53px] border-r border-[var(--panel-border)]/20 ${creatorColorClass} ${!showCreator ? 'hidden' : ''}`}>
+                          <div className="flex items-center gap-2">
+                            {isTabMode && user ? (
+                              <>
+                                {user.photoURL ? (
+                                  <img src={user.photoURL} className="w-5 h-5 rounded-full shrink-0 object-cover" />
+                                ) : (
+                                  <div className="w-5 h-5 rounded-full bg-accent/20 text-accent flex items-center justify-center text-[10px] font-bold shrink-0">
+                                    {(user.displayName || user.email || 'U')[0].toUpperCase()}
+                                  </div>
+                                )}
+                                <span className="text-[11px] font-bold text-foreground/80 tracking-tight shrink-0">{user.displayName || user.email?.split('@')[0] || 'User'}</span>
+                              </>
+                            ) : (
+                              <>
+                                <div className="w-5 h-5 rounded-full bg-accent/20 text-accent flex items-center justify-center text-[10px] font-bold shrink-0 shadow-inner group-hover:scale-110 transition-transform">
+                                  G
+                                </div>
+                                <span className="text-[11px] font-bold text-foreground/80 tracking-tight shrink-0">Guest</span>
+                              </>
+                            )}
+                          </div>
+                        </td>
+                        {(activeTable.columns || []).map(field => {
+                          const isEditing = editingCell?.id === row.id && editingCell?.field === field;
+                          const colColorVal = (activeTable.colColors || {})[field];
+                          const colTs = (activeTable.colorTimestamps || {})[`col_${field}`] || 0;
+                          const rowColorVal = (activeTable.rowColors || {})[row.id];
+                          const rowTs = (activeTable.colorTimestamps || {})[`row_${row.id}`] || 0;
+
+                          let activeColorVal = '';
+                          if (rowTs > colTs) {
+                            activeColorVal = rowColorVal === 'none' ? '' : rowColorVal;
+                          } else if (colTs > rowTs) {
+                            activeColorVal = colColorVal === 'none' ? '' : colColorVal;
+                          } else {
+                            activeColorVal = rowColorVal === 'none' ? '' : rowColorVal || colColorVal || '';
+                          }
+
+                          if (activeColorVal === 'none') activeColorVal = '';
+
+                          const activeColorDef = activeColorVal ? pastelColors.find(c => c.text === activeColorVal) : null;
+                          const cellColorClass = activeColorDef ? (isOdd ? activeColorDef.bgAlt : activeColorDef.bgCard) : (isOdd ? 'bg-foreground/[0.02]' : 'bg-transparent');
+                          const textClass = activeColorDef ? activeColorDef.text : 'text-foreground/80';
+
+                          return (
+                            <td
+                              key={`cell_${row.id || idx}_${field}`}
+                              className={`py-4 px-6 whitespace-pre-wrap min-w-[120px] text-[14px] font-medium relative ${cellColorClass} align-top border-r border-[var(--panel-border)]/10 last:border-r-0`}
+                              onClick={() => !isEditing && setEditingCell({ id: row.id, field })}
+                            >
+                              {isEditing ? (
+                                <textarea
+                                  autoFocus
+                                  value={(row as any)[field] || ''}
+                                  onChange={e => updateCell(row.id, field, e.target.value)}
+                                  onBlur={() => setEditingCell(null)}
+                                  onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey) { setEditingCell(null); } }}
+                                  className={`absolute inset-0 bg-transparent !border-0 !outline-none focus:!outline-none focus:!ring-0 !ring-0 !shadow-none focus:!shadow-none p-4 px-6 text-[14px] font-medium w-full h-full caret-accent ${textClass} z-20 resize-none styled-scrollbars`}
+                                />
+                              ) : null}
+                              <span className={`block w-full min-h-[20px] break-words transition-all ${isEditing ? 'opacity-0' : 'opacity-100'} ${textClass} ${(field === 'Status' && (row as any)[field] === 'Active' && !activeColorVal) ? 'text-green-500' : ''}`}>
+                                {(row as any)[field] || (
+                                  <span className="opacity-30 italic font-normal">empty</span>
+                                )}
+                              </span>
+                            </td>
+                          );
+                        })}
+                        <td className={`py-4 px-4 whitespace-nowrap text-right h-[53px] ${creatorColorClass} relative z-10`}>
+                          <div className="flex items-center justify-end gap-1 opacity-20 group-hover:opacity-100 transition-opacity relative">
+                            <button onClick={() => setActiveRowPicker(activeRowPicker === row.id ? null : row.id)} className={`p-1.5 rounded-lg transition-colors hover:bg-foreground/10 ${rowColorVal ? pastelColors.find(p => p.text === rowColorVal)?.text : 'text-foreground/40'}`}>
+                              <Palette className="w-4 h-4" />
+                            </button>
+
+                            {activeRowPicker === row.id && (
+                              <>
+                                <div className="fixed inset-0 z-30" onClick={() => setActiveRowPicker(null)} />
+                                <div className="absolute top-6 right-8 flex gap-1.5 bg-background/90 backdrop-blur-xl border border-[var(--panel-border)] p-2 rounded-xl shadow-xl z-50 items-center">
+                                  <button
+                                    onClick={(e) => {
+                                      e.preventDefault(); e.stopPropagation();
+                                      const rc = { ...(activeTable.rowColors || {}), [row.id]: 'none' };
+                                      const ts = { ...(activeTable.colorTimestamps || {}), [`row_${row.id}`]: Date.now() };
+                                      saveState({ ...activeTable, rowColors: rc, colorTimestamps: ts });
+                                      setActiveRowPicker(null);
+                                    }}
+                                    className="w-4 h-4 rounded-full flex items-center justify-center bg-foreground/10 hover:bg-red-500/20 hover:text-red-500 text-foreground/40 transition-colors border border-[var(--panel-border)]/50 shrink-0"
+                                    title="Remove Row Color"
+                                  >
+                                    <X className="w-3 h-3" />
+                                  </button>
+                                  <div className="h-4 w-px bg-[var(--panel-border)]/50 mx-0.5" />
+                                  {pastelColors.map(c => (
+                                    <button
+                                      key={c.name}
+                                      onClick={() => {
+                                        const ts = { ...(activeTable.colorTimestamps || {}), [`row_${row.id}`]: Date.now() };
+                                        saveState({ ...activeTable, rowColors: { ...(activeTable.rowColors || {}), [row.id]: c.text }, colorTimestamps: ts });
+                                        setActiveRowPicker(null);
+                                      }}
+                                      className={`w-4 h-4 rounded-full ${c.bgCircle} hover:scale-125 transition-transform border border-[var(--panel-border)]/50`}
+                                    />
+                                  ))}
+                                </div>
+                              </>
+                            )}
+
+                            <button onClick={() => deleteRow(row.id)} className="p-2 ml-auto rounded-lg text-foreground/20 hover:text-red-500 hover:bg-red-500/10 transition-colors flex items-center justify-center">
+                              <Trash className="w-4 h-4" />
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    )
+                  })}
+                  {searchedRows.length === 0 && (
+                    <tr>
+                      <td colSpan={(activeTable.columns || []).length + 2} className="py-12 text-center text-foreground/40 text-[14px] font-medium border border-[var(--panel-border)] m-4 rounded-xl border-dashed">
+                        No records found in {activeTable.name || 'this table'}.
+                      </td>
+                    </tr>
+                  )}
+                  <tr>
+                    <td colSpan={(activeTable.columns || []).length + 2} className="py-2 px-4 border-none bg-foreground/[0.01]">
+                      <div className="flex items-center gap-4">
+                        <button onClick={addRow} className="p-1.5 rounded-lg text-foreground/40 hover:text-accent hover:bg-accent/10 transition-colors flex items-center justify-center ml-2 border border-transparent hover:border-accent/20">
+                          <Plus className="w-4 h-4" />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </motion.table>
+            )}
+          </AnimatePresence>
+        </div>
+      </motion.div>
+    </main>
+  );
+}