4bnode 4.0.2 → 4.0.4

package/skeleton/.4bnode/assets/js/pages/ReportsPage.js

@@ -0,0 +1,667 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { LuDownload, LuFileSpreadsheet, LuDatabase, LuCheck, LuChevronRight, LuLink, LuX, LuLoader, LuGripVertical, LuArrowUp, LuArrowDown } from "react-icons/lu";
+import { html, api, API, getStoredPasskey } from "../lib.js";
+import { useApp } from "../context.js";
+
+export function ReportsPage() {
+  const { toast } = useApp();
+  const [models, setModels] = useState([]);
+  const [selectedModels, setSelectedModels] = useState([]);
+  const [modelConfig, setModelConfig] = useState({});
+  const [activeModel, setActiveModel] = useState(null);
+  const [reportName, setReportName] = useState("report");
+  const [loading, setLoading] = useState(false);
+  const [schemaLoading, setSchemaLoading] = useState(true);
+  const [limit, setLimit] = useState(0);
+  const [dateFormat, setDateFormat] = useState("YYYY-MM-DD HH:mm:ss");
+  const [timezone, setTimezone] = useState(Intl.DateTimeFormat().resolvedOptions().timeZone);
+  const [preview, setPreview] = useState(null);
+  const [previewLoading, setPreviewLoading] = useState(false);
+
+  useEffect(() => {
+    api("/reports/schema-info")
+      .then((data) => { setModels(data.models || []); setSchemaLoading(false); })
+      .catch((err) => { toast(err.message, "error"); setSchemaLoading(false); });
+  }, []);
+
+  function toggleModel(name) {
+    setSelectedModels((prev) => {
+      if (prev.includes(name)) {
+        const next = prev.filter((n) => n !== name);
+        if (activeModel === name) setActiveModel(next[0] || null);
+        return next;
+      }
+      if (!modelConfig[name]) {
+        const model = models.find((m) => m.name === name);
+        const allFields = (model?.fields || []).map((f) => f.name);
+        const defaultOrder = ["_id", ...allFields, "createdAt", "updatedAt"];
+        setModelConfig((prev) => ({
+          ...prev,
+          [name]: { fields: [...allFields], systemFields: ["_id", "createdAt", "updatedAt"], populatedFields: {}, columnOrder: defaultOrder, headerLabels: {} },
+        }));
+      }
+      if (!activeModel) setActiveModel(name);
+      return [...prev, name];
+    });
+    setPreview(null);
+  }
+
+  function toggleField(modelName, fieldName) {
+    setModelConfig((prev) => {
+      const mc = prev[modelName] || { fields: [], systemFields: [], populatedFields: {}, columnOrder: [] };
+      const removing = mc.fields.includes(fieldName);
+      const fields = removing ? mc.fields.filter((f) => f !== fieldName) : [...mc.fields, fieldName];
+      const columnOrder = removing ? (mc.columnOrder || []).filter((c) => c !== fieldName) : [...(mc.columnOrder || []), fieldName];
+      return { ...prev, [modelName]: { ...mc, fields, columnOrder } };
+    });
+    setPreview(null);
+  }
+
+  function toggleAllFields(modelName) {
+    const model = models.find((m) => m.name === modelName);
+    if (!model) return;
+    const allFields = model.fields.map((f) => f.name);
+    setModelConfig((prev) => {
+      const mc = prev[modelName] || { fields: [], systemFields: [], populatedFields: {}, columnOrder: [] };
+      const allSelected = allFields.every((f) => mc.fields.includes(f));
+      if (allSelected) {
+        const columnOrder = (mc.columnOrder || []).filter((c) => !allFields.includes(c));
+        return { ...prev, [modelName]: { ...mc, fields: [], columnOrder } };
+      } else {
+        const existing = new Set(mc.columnOrder || []);
+        const columnOrder = [...(mc.columnOrder || []), ...allFields.filter((f) => !existing.has(f))];
+        return { ...prev, [modelName]: { ...mc, fields: [...allFields], columnOrder } };
+      }
+    });
+    setPreview(null);
+  }
+
+  function toggleSystemField(modelName, fieldName) {
+    setModelConfig((prev) => {
+      const mc = prev[modelName] || { fields: [], systemFields: [], populatedFields: {}, columnOrder: [] };
+      const removing = (mc.systemFields || []).includes(fieldName);
+      const systemFields = removing ? mc.systemFields.filter((f) => f !== fieldName) : [...(mc.systemFields || []), fieldName];
+      const columnOrder = removing ? (mc.columnOrder || []).filter((c) => c !== fieldName) : [...(mc.columnOrder || []), fieldName];
+      return { ...prev, [modelName]: { ...mc, systemFields, columnOrder } };
+    });
+    setPreview(null);
+  }
+
+  function toggleSubField(modelName, refField, subField) {
+    const colKey = refField + "." + subField;
+    setModelConfig((prev) => {
+      const mc = prev[modelName] || { fields: [], systemFields: [], populatedFields: {}, columnOrder: [] };
+      const pop = { ...mc.populatedFields };
+      const current = pop[refField] || [];
+      pop[refField] = current.includes(subField)
+        ? current.filter((f) => f !== subField)
+        : [...current, subField];
+      const removing = current.includes(subField);
+      const columnOrder = removing ? (mc.columnOrder || []).filter((c) => c !== colKey) : [...(mc.columnOrder || []), colKey];
+      return { ...prev, [modelName]: { ...mc, populatedFields: pop, columnOrder } };
+    });
+    setPreview(null);
+  }
+
+  function toggleAllSubFields(modelName, refField, allSubFields) {
+    setModelConfig((prev) => {
+      const mc = prev[modelName] || { fields: [], systemFields: [], populatedFields: {}, columnOrder: [] };
+      const pop = { ...mc.populatedFields };
+      const current = pop[refField] || [];
+      const allSelected = allSubFields.every((f) => current.includes(f));
+      const refKeys = allSubFields.map((sf) => refField + "." + sf);
+      let columnOrder = [...(mc.columnOrder || [])];
+      if (allSelected) {
+        pop[refField] = [];
+        columnOrder = columnOrder.filter((c) => !refKeys.includes(c));
+      } else {
+        pop[refField] = [...allSubFields];
+        const existing = new Set(columnOrder);
+        columnOrder = [...columnOrder, ...refKeys.filter((k) => !existing.has(k))];
+      }
+      return { ...prev, [modelName]: { ...mc, populatedFields: pop, columnOrder } };
+    });
+    setPreview(null);
+  }
+
+  function updateHeaderLabel(modelName, colKey, label) {
+    setModelConfig((prev) => {
+      const mc = prev[modelName];
+      if (!mc) return prev;
+      const headerLabels = { ...(mc.headerLabels || {}) };
+      if (label && label !== colKey) headerLabels[colKey] = label;
+      else delete headerLabels[colKey];
+      return { ...prev, [modelName]: { ...mc, headerLabels } };
+    });
+  }
+
+  function updateFieldPrefix(modelName, colKey, prefix) {
+    setModelConfig((prev) => {
+      const mc = prev[modelName];
+      if (!mc) return prev;
+      const fieldPrefixes = { ...(mc.fieldPrefixes || {}) };
+      if (prefix) fieldPrefixes[colKey] = prefix;
+      else delete fieldPrefixes[colKey];
+      return { ...prev, [modelName]: { ...mc, fieldPrefixes } };
+    });
+    setPreview(null);
+  }
+
+  function moveColumn(modelName, from, to) {
+    setModelConfig((prev) => {
+      const mc = prev[modelName];
+      if (!mc) return prev;
+      const order = [...(mc.columnOrder || [])];
+      const [item] = order.splice(from, 1);
+      order.splice(to, 0, item);
+      return { ...prev, [modelName]: { ...mc, columnOrder: order } };
+    });
+    setPreview(null);
+  }
+
+  // Drag state
+  const dragItem = useRef(null);
+  const dragOverItem = useRef(null);
+
+  function handleDragStart(idx) { dragItem.current = idx; }
+  function handleDragEnter(idx) { dragOverItem.current = idx; }
+  function handleDragEnd() {
+    if (dragItem.current !== null && dragOverItem.current !== null && dragItem.current !== dragOverItem.current) {
+      moveColumn(activeModel, dragItem.current, dragOverItem.current);
+    }
+    dragItem.current = null;
+    dragOverItem.current = null;
+  }
+
+  // Get ordered columns for active model
+  function getOrderedColumns(mc) {
+    const order = mc.columnOrder || [];
+    const allSelected = new Set([
+      ...(mc.systemFields || []),
+      ...mc.fields,
+      ...Object.entries(mc.populatedFields || {}).flatMap(([ref, subs]) => subs.map((sf) => ref + "." + sf)),
+    ]);
+    return order.filter((c) => allSelected.has(c));
+  }
+
+  async function loadPreview() {
+    if (!activeModel || !selectedModels.includes(activeModel)) return;
+    const mc = modelConfig[activeModel] || { fields: [], populatedFields: {} };
+    if (mc.fields.length === 0) { toast("Select at least one field", "error"); return; }
+    setPreviewLoading(true);
+    try {
+      const res = await api('/reports/preview', {
+        method: 'POST',
+        body: { name: activeModel, fields: mc.fields, systemFields: mc.systemFields || [], populatedFields: mc.populatedFields, columnOrder: getOrderedColumns(mc), headerLabels: mc.headerLabels || {}, fieldPrefixes: mc.fieldPrefixes || {}, dateFormat, timezone },
+      });
+      setPreview(res.rows || []);
+    } catch { setPreview([]); }
+    setPreviewLoading(false);
+  }
+
+  function getSelectedFieldCount() {
+    let count = 0;
+    selectedModels.forEach((name) => {
+      const mc = modelConfig[name] || { fields: [], systemFields: [], populatedFields: {} };
+      count += mc.fields.length + (mc.systemFields || []).length;
+      Object.values(mc.populatedFields).forEach((sf) => { count += sf.length; });
+    });
+    return count;
+  }
+
+  async function handleDownload() {
+    if (selectedModels.length === 0) { toast("Select at least one model", "error"); return; }
+    setLoading(true);
+    try {
+      const config = {
+        models: selectedModels.map((name) => {
+          const mc = modelConfig[name];
+          return { name, fields: mc.fields, systemFields: mc.systemFields || [], populatedFields: mc.populatedFields, columnOrder: getOrderedColumns(mc), headerLabels: mc.headerLabels || {}, fieldPrefixes: mc.fieldPrefixes || {} };
+        }),
+        filename: reportName || "report",
+        limit: limit > 0 ? limit : undefined,
+        dateFormat,
+        timezone,
+      };
+      const passkey = getStoredPasskey();
+      const headers = { "Content-Type": "application/json" };
+      if (passkey) headers["x-passkey"] = passkey;
+      const res = await fetch(API + "/reports/generate", { method: "POST", headers, body: JSON.stringify(config) });
+      if (!res.ok) { const err = await res.json(); throw new Error(err.error || "Download failed"); }
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url; a.download = (reportName || "report") + ".xlsx"; a.click();
+      URL.revokeObjectURL(url);
+      toast("Report downloaded successfully", "success");
+    } catch (err) { toast(err.message, "error"); }
+    setLoading(false);
+  }
+
+  const activeModelData = models.find((m) => m.name === activeModel);
+  const activeMc = modelConfig[activeModel] || { fields: [], systemFields: [], populatedFields: {} };
+  const totalFields = getSelectedFieldCount();
+  const refFields = (activeModelData?.fields || []).filter((f) => f.type === "ObjectId" && f.ref && f.refFields);
+
+  if (schemaLoading) {
+    return html`<div style=${{ display: "flex", alignItems: "center", justifyContent: "center", height: "300px", gap: "12px", color: "var(--text-muted)" }}>
+      <${LuLoader} size=${20} className="spinner" /> Loading schema information...
+    </div>`;
+  }
+
+  if (models.length === 0) {
+    return html`<div style=${{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "300px", gap: "16px" }}>
+      <div style=${{ width: "64px", height: "64px", borderRadius: "16px", background: "var(--bg-surface)", display: "flex", alignItems: "center", justifyContent: "center" }}>
+        <${LuFileSpreadsheet} size=${28} color="var(--text-muted)" />
+      </div>
+      <div style=${{ textAlign: "center" }}>
+        <div style=${{ fontSize: "15px", fontWeight: 600, marginBottom: "4px" }}>No models found</div>
+        <div style=${{ fontSize: "12px", color: "var(--text-muted)" }}>Create models in the Schemas page to generate reports.</div>
+      </div>
+    </div>`;
+  }
+
+  return html`<div style=${{ display: "flex", flexDirection: "column", height: "100%", gap: "0" }}>
+    <!-- Summary Bar -->
+    <div style=${{
+      display: "flex", alignItems: "center", gap: "16px", padding: "14px 18px",
+      background: "var(--bg-surface)", borderRadius: "10px", border: "1px solid var(--border)", marginBottom: "16px",
+    }}>
+      <div style=${{ display: "flex", alignItems: "center", gap: "12px", flex: 1 }}>
+        <div style=${{ width: "36px", height: "36px", borderRadius: "8px", background: "var(--accent-glow)", display: "flex", alignItems: "center", justifyContent: "center" }}>
+          <${LuFileSpreadsheet} size=${18} color="var(--accent-light)" />
+        </div>
+        <div>
+          <div style=${{ display: "flex", alignItems: "center", gap: "8px" }}>
+            <input type="text" value=${reportName} onInput=${(e) => setReportName(e.target.value)} placeholder="report"
+              style=${{ fontSize: "15px", fontWeight: 600, background: "transparent", border: "none", color: "var(--text)", outline: "none", width: "200px", padding: 0 }} />
+            <span style=${{ fontSize: "12px", color: "var(--text-muted)" }}>.xlsx</span>
+          </div>
+          <div style=${{ fontSize: "11px", color: "var(--text-muted)", marginTop: "2px" }}>
+            ${selectedModels.length} collection${selectedModels.length !== 1 ? "s" : ""} · ${totalFields} field${totalFields !== 1 ? "s" : ""} selected
+          </div>
+        </div>
+      </div>
+
+      <div style=${{ display: "flex", alignItems: "center", gap: "12px", flexWrap: "wrap" }}>
+        <div style=${{ display: "flex", alignItems: "center", gap: "4px" }}>
+          <label style=${{ fontSize: "11px", color: "var(--text-muted)" }}>Limit</label>
+          <select value=${limit} onChange=${(e) => setLimit(Number(e.target.value))}
+            style=${{ padding: "5px 8px", fontSize: "11px", background: "var(--bg-input)", border: "1px solid var(--border)", borderRadius: "5px", color: "var(--text)", outline: "none" }}>
+            <option value=${0}>All rows</option>
+            <option value=${100}>100</option>
+            <option value=${500}>500</option>
+            <option value=${1000}>1,000</option>
+            <option value=${5000}>5,000</option>
+            <option value=${10000}>10,000</option>
+          </select>
+        </div>
+        <div style=${{ display: "flex", alignItems: "center", gap: "4px" }}>
+          <label style=${{ fontSize: "11px", color: "var(--text-muted)" }}>Date</label>
+          <select value=${dateFormat} onChange=${(e) => { setDateFormat(e.target.value); setPreview(null); }}
+            style=${{ padding: "5px 8px", fontSize: "11px", background: "var(--bg-input)", border: "1px solid var(--border)", borderRadius: "5px", color: "var(--text)", outline: "none" }}>
+            <option value="YYYY-MM-DD HH:mm:ss">YYYY-MM-DD HH:mm:ss (24h)</option>
+            <option value="DD/MM/YYYY HH:mm:ss">DD/MM/YYYY HH:mm:ss (24h)</option>
+            <option value="MM/DD/YYYY HH:mm:ss">MM/DD/YYYY HH:mm:ss (24h)</option>
+            <option value="YYYY-MM-DD hh:mm:ss A">YYYY-MM-DD hh:mm:ss AM/PM</option>
+            <option value="DD/MM/YYYY hh:mm:ss A">DD/MM/YYYY hh:mm:ss AM/PM</option>
+            <option value="MM/DD/YYYY hh:mm:ss A">MM/DD/YYYY hh:mm:ss AM/PM</option>
+            <option value="YYYY-MM-DD">YYYY-MM-DD</option>
+            <option value="DD/MM/YYYY">DD/MM/YYYY</option>
+            <option value="MM/DD/YYYY">MM/DD/YYYY</option>
+            <option value="ISO">ISO 8601</option>
+            <option value="UNIX">Unix Timestamp</option>
+          </select>
+        </div>
+        <div style=${{ display: "flex", alignItems: "center", gap: "4px" }}>
+          <label style=${{ fontSize: "11px", color: "var(--text-muted)" }}>TZ</label>
+          <select value=${timezone} onChange=${(e) => { setTimezone(e.target.value); setPreview(null); }}
+            style=${{ padding: "5px 8px", fontSize: "11px", background: "var(--bg-input)", border: "1px solid var(--border)", borderRadius: "5px", color: "var(--text)", outline: "none", maxWidth: "150px" }}>
+            <option value="UTC">UTC</option>
+            <option value="Asia/Kolkata">Asia/Kolkata (IST)</option>
+            <option value="America/New_York">America/New_York (EST)</option>
+            <option value="America/Chicago">America/Chicago (CST)</option>
+            <option value="America/Denver">America/Denver (MST)</option>
+            <option value="America/Los_Angeles">America/Los_Angeles (PST)</option>
+            <option value="Europe/London">Europe/London (GMT)</option>
+            <option value="Europe/Paris">Europe/Paris (CET)</option>
+            <option value="Europe/Berlin">Europe/Berlin (CET)</option>
+            <option value="Asia/Dubai">Asia/Dubai (GST)</option>
+            <option value="Asia/Shanghai">Asia/Shanghai (CST)</option>
+            <option value="Asia/Tokyo">Asia/Tokyo (JST)</option>
+            <option value="Australia/Sydney">Australia/Sydney (AEST)</option>
+            <option value=${Intl.DateTimeFormat().resolvedOptions().timeZone}>Local (${Intl.DateTimeFormat().resolvedOptions().timeZone})</option>
+          </select>
+        </div>
+      </div>
+
+      <button onClick=${handleDownload} disabled=${loading || selectedModels.length === 0}
+        style=${{
+          padding: "9px 24px", fontSize: "13px", fontWeight: 600, borderRadius: "8px", border: "none", cursor: loading || selectedModels.length === 0 ? "not-allowed" : "pointer",
+          background: loading || selectedModels.length === 0 ? "var(--bg-input)" : "linear-gradient(135deg, var(--accent), #7c3aed)",
+          color: loading || selectedModels.length === 0 ? "var(--text-muted)" : "#fff",
+          display: "flex", alignItems: "center", gap: "8px", transition: "all 0.2s", boxShadow: loading || selectedModels.length === 0 ? "none" : "0 2px 12px rgba(99,102,241,0.3)",
+        }}>
+        ${loading ? html`<${LuLoader} size=${14} className="spinner" />` : html`<${LuDownload} size=${14} />`}
+        ${loading ? "Generating..." : "Download"}
+      </button>
+    </div>
+
+    <!-- Main Layout -->
+    <div style=${{ display: "flex", gap: "16px", flex: 1, minHeight: 0 }}>
+      <!-- Left Panel: Collections -->
+      <div style=${{ width: "260px", flexShrink: 0, display: "flex", flexDirection: "column", gap: "0", background: "var(--bg-surface)", borderRadius: "10px", border: "1px solid var(--border)", overflow: "hidden" }}>
+        <div style=${{ padding: "12px 16px", borderBottom: "1px solid var(--border)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+          <span style=${{ fontSize: "11px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.5px", color: "var(--text-muted)" }}>Collections</span>
+          <span style=${{ fontSize: "10px", padding: "2px 8px", borderRadius: "10px", background: "var(--accent-glow)", color: "var(--accent-light)", fontWeight: 600 }}>${models.length}</span>
+        </div>
+        <div style=${{ flex: 1, overflowY: "auto", padding: "6px" }}>
+          ${models.map((m) => {
+            const isSelected = selectedModels.includes(m.name);
+            const isActive = activeModel === m.name;
+            const mc = modelConfig[m.name] || { fields: [], populatedFields: {} };
+            const fieldCount = mc.fields.length + Object.values(mc.populatedFields).reduce((a, b) => a + b.length, 0);
+            return html`<div key=${m.name}
+              onClick=${() => { if (!isSelected) toggleModel(m.name); setActiveModel(m.name); }}
+              style=${{
+                display: "flex", alignItems: "center", gap: "10px", padding: "10px 12px", borderRadius: "8px", cursor: "pointer",
+                background: isActive ? "rgba(99,102,241,0.1)" : "transparent",
+                border: isActive ? "1px solid rgba(99,102,241,0.2)" : "1px solid transparent",
+                transition: "all 0.15s", marginBottom: "2px",
+              }}>
+              <div onClick=${(e) => { e.stopPropagation(); toggleModel(m.name); }}
+                style=${{
+                  width: "18px", height: "18px", borderRadius: "4px", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer",
+                  background: isSelected ? "var(--accent)" : "transparent",
+                  border: isSelected ? "none" : "1.5px solid var(--border)", transition: "all 0.15s",
+                }}>
+                ${isSelected && html`<${LuCheck} size=${12} color="#fff" />`}
+              </div>
+              <div style=${{ flex: 1, minWidth: 0 }}>
+                <div style=${{ fontSize: "13px", fontWeight: isSelected ? 600 : 400, color: isSelected ? "var(--text)" : "var(--text-muted)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>${m.name}</div>
+                <div style=${{ fontSize: "10px", color: "var(--text-muted)" }}>${m.fields.length} fields</div>
+              </div>
+              ${isSelected && html`<span style=${{ fontSize: "10px", padding: "2px 6px", borderRadius: "4px", background: "var(--success-glow)", color: "var(--success)", fontWeight: 600 }}>${fieldCount}</span>`}
+              ${isActive && html`<${LuChevronRight} size=${12} color="var(--text-muted)" />`}
+            </div>`;
+          })}
+        </div>
+      </div>
+
+      <!-- Right Panel: Field Config -->
+      <div style=${{ flex: 1, display: "flex", flexDirection: "column", background: "var(--bg-surface)", borderRadius: "10px", border: "1px solid var(--border)", overflow: "hidden" }}>
+        ${!activeModel || !selectedModels.includes(activeModel)
+          ? html`<div style=${{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%", gap: "12px", color: "var(--text-muted)" }}>
+              <${LuDatabase} size=${32} style=${{ opacity: 0.3 }} />
+              <span style=${{ fontSize: "13px" }}>Select a collection to configure fields</span>
+            </div>`
+          : html`<${React.Fragment}>
+              <!-- Header -->
+              <div style=${{ padding: "14px 18px", borderBottom: "1px solid var(--border)", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+                <div style=${{ display: "flex", alignItems: "center", gap: "10px" }}>
+                  <div style=${{ width: "28px", height: "28px", borderRadius: "6px", background: "var(--accent-glow)", display: "flex", alignItems: "center", justifyContent: "center" }}>
+                    <${LuDatabase} size=${14} color="var(--accent-light)" />
+                  </div>
+                  <div>
+                    <div style=${{ fontSize: "14px", fontWeight: 600 }}>${activeModel}</div>
+                    <div style=${{ fontSize: "10px", color: "var(--text-muted)" }}>${activeMc.fields.length} of ${activeModelData?.fields?.length || 0} fields selected</div>
+                  </div>
+                </div>
+                <div style=${{ display: "flex", gap: "6px" }}>
+                  ${preview !== null
+                    ? html`<button onClick=${() => setPreview(null)}
+                        style=${{ padding: "5px 12px", fontSize: "11px", borderRadius: "6px", border: "1px solid var(--border)", background: "transparent", color: "var(--accent)", cursor: "pointer" }}>
+                        Configure Fields
+                      </button>`
+                    : html`<${React.Fragment}>
+                        <button onClick=${() => loadPreview()}
+                          style=${{ padding: "5px 12px", fontSize: "11px", borderRadius: "6px", border: "1px solid var(--accent)", background: "var(--accent-glow)", color: "var(--accent-light)", cursor: "pointer" }}>
+                          ${previewLoading ? "Loading..." : "Preview"}
+                        </button>
+                        <button onClick=${() => toggleAllFields(activeModel)}
+                          style=${{ padding: "5px 12px", fontSize: "11px", borderRadius: "6px", border: "1px solid var(--border)", background: "transparent", color: "var(--accent)", cursor: "pointer" }}>
+                          ${activeModelData && activeModelData.fields.every((f) => activeMc.fields.includes(f.name)) ? "Deselect All" : "Select All"}
+                        </button>
+                      <//>`}
+                </div>
+              </div>
+
+              <div style=${{ flex: 1, overflowY: "auto", padding: "16px 18px" }}>
+              ${preview === null ? html`<${React.Fragment}>
+                <!-- Fields -->
+                <div style=${{ fontSize: "10px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.8px", color: "var(--text-muted)", marginBottom: "10px" }}>Model Fields</div>
+                <div style=${{ display: "flex", flexWrap: "wrap", gap: "8px", marginBottom: "16px" }}>
+                  ${(activeModelData?.fields || []).map((field) => {
+                    const active = activeMc.fields.includes(field.name);
+                    const isRef = field.type === "ObjectId" && field.ref;
+                    return html`<button key=${field.name}
+                      onClick=${() => toggleField(activeModel, field.name)}
+                      style=${{
+                        padding: "6px 14px", borderRadius: "8px", fontSize: "12px", cursor: "pointer", display: "flex", alignItems: "center", gap: "6px",
+                        border: active ? "1.5px solid var(--accent)" : "1.5px solid var(--border)",
+                        background: active ? "var(--accent-glow)" : "var(--bg-input)",
+                        color: active ? "var(--accent-light)" : "var(--text-secondary)",
+                        fontWeight: active ? 600 : 400, transition: "all 0.15s",
+                      }}>
+                      ${active && html`<${LuCheck} size=${10} />`}
+                      ${field.name}
+                      <span style=${{ fontSize: "9px", padding: "1px 5px", borderRadius: "3px", background: "rgba(255,255,255,0.05)", color: isRef ? "#f472b6" : "var(--text-muted)" }}>
+                        ${field.type}${isRef ? " → " + field.ref : ""}
+                      </span>
+                    </button>`;
+                  })}
+                </div>
+
+                <!-- System Fields -->
+                <div style=${{ fontSize: "10px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.8px", color: "var(--text-muted)", marginBottom: "10px" }}>System Fields</div>
+                <div style=${{ display: "flex", flexWrap: "wrap", gap: "8px", marginBottom: "16px" }}>
+                  ${["_id", "createdAt", "updatedAt"].map((sf) => {
+                    const active = (activeMc.systemFields || []).includes(sf);
+                    const isDate = sf === "createdAt" || sf === "updatedAt";
+                    return html`<button key=${sf}
+                      onClick=${() => toggleSystemField(activeModel, sf)}
+                      style=${{
+                        padding: "6px 14px", borderRadius: "8px", fontSize: "12px", cursor: "pointer", display: "flex", alignItems: "center", gap: "6px",
+                        border: active ? "1.5px solid #a78bfa" : "1.5px solid var(--border)",
+                        background: active ? "rgba(167,139,250,0.1)" : "var(--bg-input)",
+                        color: active ? "#a78bfa" : "var(--text-secondary)",
+                        fontWeight: active ? 600 : 400, transition: "all 0.15s",
+                      }}>
+                      ${active && html`<${LuCheck} size=${10} />`}
+                      ${sf}
+                      <span style=${{ fontSize: "9px", padding: "1px 5px", borderRadius: "3px", background: "rgba(255,255,255,0.05)", color: isDate ? "#a78bfa" : "var(--text-muted)" }}>
+                        ${isDate ? "Date" : "ObjectId"}
+                      </span>
+                    </button>`;
+                  })}
+                </div>
+
+                <!-- Column Order (drag & drop + rename headers) -->
+                ${(() => {
+                  const orderedCols = getOrderedColumns(activeMc);
+                  if (orderedCols.length === 0) return null;
+                  const sysSet = new Set(activeMc.systemFields || []);
+                  const fieldSet = new Set(activeMc.fields || []);
+                  const labels = activeMc.headerLabels || {};
+                  return html`<div>
+                    <div style=${{ fontSize: "10px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.8px", color: "var(--text-muted)", marginBottom: "10px", display: "flex", alignItems: "center", gap: "6px" }}>
+                      <${LuGripVertical} size=${10} /> Column Order & Headers
+                      <span style=${{ fontWeight: 400, textTransform: "none", letterSpacing: 0 }}>(drag to reorder, edit header names for excel)</span>
+                    </div>
+                    <div style=${{ background: "var(--bg)", borderRadius: "8px", border: "1px solid var(--border)", overflow: "hidden" }}>
+                      <!-- Table header -->
+                      <div style=${{ display: "flex", alignItems: "center", gap: "10px", padding: "6px 12px", borderBottom: "1px solid var(--border)", background: "rgba(255,255,255,0.02)" }}>
+                        <span style=${{ width: "12px" }} />
+                        <span style=${{ fontSize: "9px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.5px", color: "var(--text-muted)", width: "20px", textAlign: "center" }}>#</span>
+                        <span style=${{ fontSize: "9px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.5px", color: "var(--text-muted)", width: "140px" }}>Field Key</span>
+                        <span style=${{ fontSize: "9px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.5px", color: "var(--text-muted)", flex: 1 }}>Excel Header</span>
+                        <span style=${{ fontSize: "9px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.5px", color: "var(--text-muted)", width: "160px" }}>Prefix</span>
+                        <span style=${{ fontSize: "9px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.5px", color: "var(--text-muted)", width: "40px" }}>Type</span>
+                        <span style=${{ width: "40px" }} />
+                      </div>
+                      ${orderedCols.map((col, idx) => {
+                        const isSys = sysSet.has(col);
+                        const isRef = col.includes(".");
+                        const color = isSys ? "#a78bfa" : isRef ? "var(--success)" : "var(--accent-light)";
+                        const tag = isSys ? (col === "_id" ? "ID" : "SYS") : isRef ? "REF" : "FLD";
+                        const customLabel = labels[col] || "";
+                        const prefixes = activeMc.fieldPrefixes || {};
+                        const customPrefix = prefixes[col] || "";
+                        return html`<div key=${col}
+                          draggable=${true}
+                          onDragStart=${() => handleDragStart(idx)}
+                          onDragEnter=${() => handleDragEnter(idx)}
+                          onDragEnd=${handleDragEnd}
+                          onDragOver=${(e) => e.preventDefault()}
+                          style=${{
+                            display: "flex", alignItems: "center", gap: "10px", padding: "7px 12px",
+                            borderBottom: idx < orderedCols.length - 1 ? "1px solid var(--border)" : "none",
+                            cursor: "grab", transition: "background 0.1s", userSelect: "none",
+                          }}
+                          onMouseOver=${(e) => e.currentTarget.style.background = "rgba(255,255,255,0.02)"}
+                          onMouseOut=${(e) => e.currentTarget.style.background = "transparent"}>
+                          <${LuGripVertical} size=${12} color="var(--text-muted)" style=${{ opacity: 0.3, flexShrink: 0 }} />
+                          <span style=${{ fontSize: "11px", color: "var(--text-muted)", width: "20px", textAlign: "center", flexShrink: 0 }}>${idx + 1}</span>
+                          <span style=${{ fontSize: "11px", fontWeight: 500, fontFamily: "'SF Mono', monospace", color, width: "140px", flexShrink: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>${col}</span>
+                          <input
+                            type="text"
+                            value=${customLabel}
+                            placeholder=${col}
+                            onClick=${(e) => e.stopPropagation()}
+                            onMouseDown=${(e) => e.stopPropagation()}
+                            onInput=${(e) => updateHeaderLabel(activeModel, col, e.target.value)}
+                            draggable=${false}
+                            style=${{
+                              flex: 1, padding: "3px 8px", fontSize: "11px", borderRadius: "4px",
+                              border: customLabel ? "1px solid var(--accent)" : "1px solid var(--border)",
+                              background: customLabel ? "var(--accent-glow)" : "transparent",
+                              color: customLabel ? "var(--accent-light)" : "var(--text-muted)",
+                              outline: "none", fontFamily: "inherit", minWidth: 0,
+                            }}
+                          />
+                          <input
+                            type="text"
+                            value=${customPrefix}
+                            placeholder="prefix..."
+                            onClick=${(e) => e.stopPropagation()}
+                            onMouseDown=${(e) => e.stopPropagation()}
+                            onInput=${(e) => updateFieldPrefix(activeModel, col, e.target.value)}
+                            draggable=${false}
+                            style=${{
+                              width: "160px", flexShrink: 0, padding: "3px 8px", fontSize: "11px", borderRadius: "4px",
+                              border: customPrefix ? "1px solid var(--warning)" : "1px solid var(--border)",
+                              background: customPrefix ? "rgba(245,158,11,0.08)" : "transparent",
+                              color: customPrefix ? "var(--warning)" : "var(--text-muted)",
+                              outline: "none", fontFamily: "'SF Mono', monospace", minWidth: 0,
+                            }}
+                          />
+                          <span style=${{ fontSize: "9px", padding: "1px 5px", borderRadius: "3px", background: "rgba(255,255,255,0.04)", color: "var(--text-muted)", fontWeight: 600, width: "40px", textAlign: "center", flexShrink: 0 }}>${tag}</span>
+                          <div style=${{ display: "flex", gap: "1px", flexShrink: 0, width: "40px" }}>
+                            <button onClick=${(e) => { e.stopPropagation(); if (idx > 0) moveColumn(activeModel, idx, idx - 1); }}
+                              disabled=${idx === 0}
+                              style=${{ background: "none", border: "none", cursor: idx === 0 ? "default" : "pointer", padding: "2px", opacity: idx === 0 ? 0.15 : 0.5, color: "var(--text-muted)" }}>
+                              <${LuArrowUp} size=${11} />
+                            </button>
+                            <button onClick=${(e) => { e.stopPropagation(); if (idx < orderedCols.length - 1) moveColumn(activeModel, idx, idx + 1); }}
+                              disabled=${idx === orderedCols.length - 1}
+                              style=${{ background: "none", border: "none", cursor: idx === orderedCols.length - 1 ? "default" : "pointer", padding: "2px", opacity: idx === orderedCols.length - 1 ? 0.15 : 0.5, color: "var(--text-muted)" }}>
+                              <${LuArrowDown} size=${11} />
+                            </button>
+                          </div>
+                        </div>`;
+                      })}
+                    </div>
+                  </div>`;
+                })()}
+
+                <!-- Referenced Model Fields -->
+                ${refFields.length > 0 && html`<div>
+                  <div style=${{ fontSize: "10px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.8px", color: "var(--text-muted)", marginBottom: "10px", display: "flex", alignItems: "center", gap: "6px" }}>
+                    <${LuLink} size=${10} /> Referenced Fields (Populate)
+                  </div>
+                  ${refFields.map((field) => {
+                    const subSelected = activeMc.populatedFields[field.name] || [];
+                    const allSelected = subSelected.length === field.refFields.length;
+                    return html`<div key=${"ref-" + field.name}
+                      style=${{ marginBottom: "12px", background: "var(--bg)", borderRadius: "8px", border: "1px solid var(--border)", overflow: "hidden" }}>
+                      <div style=${{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 14px", borderBottom: subSelected.length > 0 || true ? "1px solid var(--border)" : "none" }}>
+                        <div style=${{ display: "flex", alignItems: "center", gap: "8px" }}>
+                          <span style=${{ fontSize: "12px", fontWeight: 600 }}>${field.name}</span>
+                          <span style=${{ fontSize: "10px", color: "var(--text-muted)" }}>→</span>
+                          <span style=${{ fontSize: "11px", padding: "2px 8px", borderRadius: "4px", background: "rgba(244,114,182,0.1)", color: "#f472b6", fontWeight: 500 }}>${field.ref}</span>
+                          ${subSelected.length > 0 && html`<span style=${{ fontSize: "10px", padding: "1px 6px", borderRadius: "4px", background: "var(--success-glow)", color: "var(--success)", fontWeight: 600 }}>${subSelected.length}</span>`}
+                        </div>
+                        <button onClick=${() => toggleAllSubFields(activeModel, field.name, field.refFields)}
+                          style=${{ padding: "3px 10px", fontSize: "10px", borderRadius: "4px", border: "1px solid var(--border)", background: "transparent", color: allSelected ? "var(--text-muted)" : "var(--success)", cursor: "pointer" }}>
+                          ${allSelected ? "Clear" : "Select All"}
+                        </button>
+                      </div>
+                      <div style=${{ display: "flex", flexWrap: "wrap", gap: "6px", padding: "10px 14px" }}>
+                        ${field.refFields.map((sf) => {
+                          const active = subSelected.includes(sf);
+                          return html`<button key=${sf}
+                            onClick=${() => toggleSubField(activeModel, field.name, sf)}
+                            style=${{
+                              padding: "5px 12px", borderRadius: "6px", fontSize: "11px", cursor: "pointer", display: "flex", alignItems: "center", gap: "5px",
+                              border: active ? "1.5px solid var(--success)" : "1.5px solid var(--border)",
+                              background: active ? "rgba(52,211,153,0.08)" : "transparent",
+                              color: active ? "var(--success)" : "var(--text-muted)",
+                              fontWeight: active ? 600 : 400, transition: "all 0.15s",
+                            }}>
+                            ${active && html`<${LuCheck} size=${9} />`}
+                            ${field.name}.${sf}
+                          </button>`;
+                        })}
+                      </div>
+                    </div>`;
+                  })}
+                </div>`}
+
+              <//>` : null}
+                <!-- Preview Table -->
+                ${preview !== null && (() => {
+                  const previewCols = getOrderedColumns(activeMc);
+                  const previewLabels = activeMc.headerLabels || {};
+                  return html`<div>
+                    <div style=${{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "12px" }}>
+                      <div style=${{ fontSize: "10px", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.8px", color: "var(--text-muted)" }}>
+                        Preview (${preview.length} rows · ${previewCols.length} columns)
+                      </div>
+                      <button onClick=${() => setPreview(null)}
+                        style=${{ background: "none", border: "none", color: "var(--text-muted)", cursor: "pointer", padding: "2px" }}>
+                        <${LuX} size=${12} />
+                      </button>
+                    </div>
+                    ${preview.length === 0
+                      ? html`<div style=${{ padding: "20px", textAlign: "center", color: "var(--text-muted)", fontSize: "12px", background: "var(--bg)", borderRadius: "6px" }}>No data in this collection</div>`
+                      : html`<div style=${{ overflowX: "auto", borderRadius: "6px", border: "1px solid var(--border)", overflowY: "auto" }}>
+                          <table style=${{ minWidth: Math.max(previewCols.length * 130, 400) + "px", fontSize: "11px", borderCollapse: "collapse" }}>
+                            <thead><tr>
+                              ${previewCols.map((f) => {
+                                const isRef = f.includes(".");
+                                const label = previewLabels[f] || f;
+                                return html`<th key=${f} style=${{ padding: "8px 12px", textAlign: "left", fontWeight: 600, color: isRef ? "#f472b6" : "var(--text-muted)", borderBottom: "1px solid var(--border)", background: "var(--bg)", whiteSpace: "nowrap", fontSize: "10px", textTransform: "uppercase", letterSpacing: "0.3px", position: "sticky", top: 0, zIndex: 1 }}>${label}</th>`;
+                              })}
+                            </tr></thead>
+                            <tbody>
+                              ${preview.map((row, i) => html`<tr key=${i}>
+                                ${previewCols.map((f) => {
+                                  const val = row[f];
+                                  let display = val === null || val === undefined ? "—" : typeof val === "object" ? JSON.stringify(val) : String(val);
+                                  if (display.length > 40) display = display.slice(0, 37) + "...";
+                                  const isRef = f.includes(".");
+                                  return html`<td key=${f} style=${{ padding: "6px 12px", borderBottom: "1px solid var(--border)", color: val === null || val === undefined ? "var(--text-muted)" : isRef ? "var(--success)" : "var(--text-secondary)", whiteSpace: "nowrap", fontFamily: "'SF Mono', monospace", fontSize: "11px", maxWidth: "200px", overflow: "hidden", textOverflow: "ellipsis" }}>${display}</td>`;
+                                })}
+                              </tr>`)}
+                            </tbody>
+                          </table>
+                        </div>`}
+                  </div>`;
+                })()}
+              </div>
+            <//>`}
+      </div>
+    </div>
+  </div>`;
+}