// ─────────────────────────────────────────────
// DEV_Design.jsx (V7)
// PALETTE_GROUPS, OBJ_ICONS, helpers
// ColDropZone, RowBuilder
// DEVDesign main component
// SDS styles
//
// Loaded after:
// /v6/DEV_Design.jsx — DOConfirm, IconBrowser, ThemePanel, ValueListsPanel
// /v7/DEV_Design_Inspector.jsx
// /v7/DEV_Design_ListView.jsx
// ─────────────────────────────────────────────
// ─────────────────────────────────────────────
// DEV_Design.jsx (V7)
//
// V7 changes vs V6:
// - Layout: pages → rows → cols (nested JSON)
// No separate row/col/tab DB records
// - Objects reference col_id (UUID), not row/col#
// - Tabs removed — pages live in detail.layout[]
// - Fields: field_id (UUID) + field_code (fN)
// - API: /v7/dev/apps/:appId/design/:tNum
// - Save: detail/save + objects/save + listview/save
//
// Components in this file:
// PALETTE_GROUPS, OBJ_ICONS — same as V6
// Inspector — V7 field refs
// ListViewPanel — V7 display mode + field refs
// HomeCanvas — V7 table JSON
// ThemePanel — unchanged
// DEVDesign — main component (full rewrite)
//
// Note: DOConfirm, IconBrowser, ColorPicker,
// ValueListPicker, ValueListsPanel, KBIcon,
// KBSidebar all come from V6 DEV_Design.jsx
// which loads before this file.
// ─────────────────────────────────────────────
const PALETTE_GROUPS = [
{ label:'Data Fields', items:[
{ type:'input', label:'Text Input', icon:'T', color:'#2563eb' },
{ type:'number', label:'Number', icon:'#', color:'#0891b2' },
{ type:'date', label:'Date', icon:'📅', color:'#059669' },
{ type:'time', label:'Time', icon:'🕐', color:'#059669' },
{ type:'select', label:'Dropdown', icon:'▾', color:'#d97706' },
{ type:'checkbox', label:'Check/Radio', icon:'☑', color:'#d97706' },
{ type:'file', label:'File/Gallery',icon:'📎', color:'#dc2626' },
]},
{ label:'Display', items:[
{ type:'text', label:'Text/Label', icon:'ℹ', color:'#64748b' },
{ type:'rating', label:'Rating', icon:'⭐', color:'#f59e0b' },
{ type:'divider', label:'Divider', icon:'—', color:'#94a3b8' },
]},
{ label:'External', items:[
{ type:'map', label:'Map', icon:'🗺', color:'#059669' },
{ type:'portal', label:'Portal', icon:'⊞', color:'#7c3aed' },
{ type:'weather', label:'Weather', icon:'⛅', color:'#0891b2' },
]},
];
const OBJ_ICONS = {
input: { icon:'T', color:'#2563eb' },
number: { icon:'#', color:'#0891b2' },
date: { icon:'📅', color:'#059669' },
time: { icon:'🕐', color:'#059669' },
select: { icon:'▾', color:'#d97706' },
checkbox: { icon:'☑', color:'#d97706' },
file: { icon:'📎', color:'#dc2626' },
text: { icon:'ℹ', color:'#64748b' },
rating: { icon:'⭐', color:'#f59e0b' },
divider: { icon:'—', color:'#94a3b8' },
map: { icon:'🗺', color:'#059669' },
portal: { icon:'⊞', color:'#7c3aed' },
weather: { icon:'⛅', color:'#0891b2' },
};
function objIcon(type) { return OBJ_ICONS[type] || { icon:'?', color:'#94a3b8' }; }
function tempId() {
return 'temp_' + Math.random().toString(36).substr(2, 9);
}
function newPageId() { return 'page_' + Math.random().toString(36).substr(2, 9); }
function newRowId() { return 'row_' + Math.random().toString(36).substr(2, 9); }
function newColId() { return 'col_' + Math.random().toString(36).substr(2, 9); }
// ─────────────────────────────────────────────
// V7 Inspector
// selectedObj: the full object JSON
// fields: schema fields array from table JSON
// { id, code, name, desc, status }
// ─────────────────────────────────────────────
function ColDropZone({ col, objects, selectedId, placingType, onPlace, onSelectObj,
onSelectCol, siblingTotal, dragOver, onDragStart, onColMouseMove,
onColMouseLeave }) {
const colObjs = objects
.filter(o => o.col_id === col.id && o.status !== 0)
.sort((a,b) => (a.order||0) - (b.order||0));
const isPlacing = !!placingType;
const isDragOver = dragOver?.colId === col.id;
const oi = placingType ? objIcon(placingType) : null;
// Render a blue drop indicator line at position idx
function DropLine({ idx }) {
if (!isDragOver || dragOver.idx !== idx) return null;
return (
);
}
return (
isPlacing && onPlace(col.id)}
onMouseMove={e => !isPlacing && onColMouseMove(e, col.id)}
onMouseLeave={() => !isPlacing && onColMouseLeave()}
style={{
flex: col.width || 1,
minHeight: 60,
border: isPlacing
? '2px dashed #2563eb'
: isDragOver ? '1.5px solid #93c5fd' : '1px solid #e2e8f0',
borderRadius: 6,
padding: '4px 6px',
background: isPlacing ? '#f0f7ff' : isDragOver ? '#f0f7ff' : '#fff',
cursor: isPlacing ? 'crosshair' : 'default',
position: 'relative',
transition: 'border-color 0.1s, background 0.1s',
}}>
{/* Col header */}
{col.width}/12
{/* Drop indicator before first object */}
{/* Objects */}
{colObjs.map((obj, i) => {
const ic = objIcon(obj.type);
const isSelected = selectedId === obj.id;
return (
{ e.stopPropagation(); if (!isPlacing) onDragStart(e, obj); }}
onClick={e => { e.stopPropagation(); !isPlacing && onSelectObj(obj); }}
style={{
display:'flex', alignItems:'center', gap:6,
padding:'5px 8px', marginBottom:0, borderRadius:5,
background: isSelected ? '#eff6ff' : '#f8fafc',
border: isSelected ? '1.5px solid #2563eb' : '1px solid #e2e8f0',
cursor: isPlacing ? 'crosshair' : 'grab',
fontSize:12, userSelect:'none',
}}>
⠿
{ic.icon}
{obj.label || obj.field_code || obj.type}
{/* Drop indicator after each object */}
);
})}
{/* Placing hint */}
{isPlacing && (
{oi?.icon}
click to place
)}
{/* Empty state */}
{!isPlacing && colObjs.length === 0 && (
empty
)}
{/* Row header */}
row
{row.cols.map(c => c.width).join(' + ')} = {row.cols.reduce((s,c) => s+(c.width||0), 0)}/12
{/* Cols */}
{row.cols.map(col => {
const sibTotal = row.cols
.filter(c => c.id !== col.id)
.reduce((s, c) => s + (c.width || 0), 0);
return (
);
})}
{txt}
;
const toggle = (key, opts) => (
{opts.map(o => (
))}
);
return (
Tabs
{typeof KBIcon !== 'undefined' && }
✏️
{lbl('Tab Style')}
{toggle('tab_style', [
{ v:'underline', l:'Underline' },
{ v:'tabs', l:'Tabs' },
{ v:'pills', l:'Pills' },
])}
{lbl('Tabs')}
{local.layout.map((page, idx) => (
onDragStart(idx)}
onDragEnter={() => onDragEnter(idx)}
onDragEnd={onDragEnd}
onDragOver={e => e.preventDefault()}
style={{ display:'flex', alignItems:'center', gap:4, padding:'4px 6px',
borderTop: idx > 0 ? '1px solid #f1f5f9' : 'none',
background: overIdx===idx && dragIdx!==idx ? '#eff6ff' : '#fff',
opacity: dragIdx===idx ? 0.4 : 1,
cursor:'grab' }}>
{/* Grip */}
⠿
{/* Name input */}
renamePage(page.id, e.target.value)}
style={{ flex:1, minWidth:0, padding:'4px 6px',
border:'1.5px solid #e2e8f0', borderRadius:5,
fontSize:12, fontFamily:'DM Sans, sans-serif',
outline:'none', color:'#0f1923', background:'#fff' }} />
{/* Delete */}
))}
);
}
// ─────────────────────────────────────────────
// LayoutInspector — nav colors, font, width, nav_data
// Overrides app theme when set
// ─────────────────────────────────────────────
function LayoutInspector({ detail, onUpdate }) {
const [local, setLocal] = React.useState(() => JSON.parse(JSON.stringify(detail)));
React.useEffect(() => {
setLocal(JSON.parse(JSON.stringify(detail)));
}, [detail?.id]);
function set(key, val) {
const updated = { ...local, [key]: val };
setLocal(updated);
onUpdate(updated);
}
function clear(key) {
const updated = { ...local };
delete updated[key];
setLocal(updated);
onUpdate(updated);
}
const lbl = txt => {txt}
;
return (
Layout
{typeof KBIcon !== 'undefined' && }
⚙️
Set values override the app theme for this table only. Clear to inherit.
set('nav_bg', v)} />
{local.nav_bg
?
:
from theme
}
set('nav_color', v)} />
{local.nav_color
?
:
from theme
}
{lbl('Nav Data')}
set('nav_data', e.target.value)}
placeholder="{f1} {f2}"
style={SDS.inspInput} />
Use {'{f1}'}, {'{f2}'} etc. for field values
{lbl('Layout Font')}
{lbl('Font Size')}
{lbl('Layout Width')}
{[['fixed','Fixed (1200px)'],['fluid','Full Width']].map(([v,l]) => (
))}
);
}
// ─────────────────────────────────────────────
// Main DEVDesign component (V7)
// ─────────────────────────────────────────────
function DEVDesign({ app, jwt }) {
// ── Table selection ──
const [tables, setTables] = React.useState([]);
const [activeTableOid, setActiveTableOid] = React.useState(null);
const [schema, setSchema] = React.useState(null); // current table + fields
// ── Sub-tab ──
const [subTab, setSubTab] = React.useState('detail');
// ── Design data ──
const [detail, setDetail] = React.useState(null);
const [listview, setListview] = React.useState(null);
const [objects, setObjects] = React.useState([]);
const [theme, setTheme] = React.useState(null);
// ── Active page ──
const [activePage, setActivePage] = React.useState(null); // page ID in layout[]
// ── Inspector panel mode ──
// 'object' | 'col' | 'tabs' | 'layout'
const [inspMode, setInspMode] = React.useState('object');
// ── Selection ──
const [selectedObj, setSelectedObj] = React.useState(null);
const [placingType, setPlacingType] = React.useState(null);
// ── Drag state ──
const dragState = React.useRef(null); // { objId, fromColId }
const dragOverRef = React.useRef(null); // { colId, idx }
const [dragOver, setDragOver] = React.useState(null);
// ── Dirty tracking ──
const [dirty, setDirty] = React.useState(false);
const [listviewDirty, setListviewDirty] = React.useState(false);
const [themeDirty, setThemeDirty] = React.useState(false);
const [saving, setSaving] = React.useState(false);
const [saveMsg, setSaveMsg] = React.useState(null);
// ── Widescreen ──
const [wide, setWide] = React.useState(false);
function toggleWide() {
const el = document.getElementById('do-design-panel');
if (!el) return;
if (!wide) {
el.style.position = 'fixed';
el.style.top = '54px';
el.style.left = '0';
el.style.right = '0';
el.style.bottom = '0';
el.style.zIndex = '500';
el.style.borderRadius = '0';
el.style.marginTop = '0';
el.style.overflowY = 'auto';
} else {
el.style.position = el.style.top = el.style.left =
el.style.right = el.style.bottom = el.style.zIndex =
el.style.borderRadius = el.style.marginTop = el.style.overflowY = '';
}
setWide(w => !w);
}
// ── Home Page card selection (for inspector) ──
const [selectedTable, setSelectedTable] = React.useState(null);
// ── Misc ──
const [loading, setLoading] = React.useState(false);
const [error, setError] = React.useState(null);
const [confirm, setConfirm] = React.useState(null);
const [renamePage, setRenamePage] = React.useState(null); // { pageId, name }
const [showIconBrowser, setShowIconBrowser] = React.useState(null); // callback fn
// ── Drag handlers ──
function handleDragStart(e, obj) {
e.preventDefault();
dragState.current = { objId: obj.id, fromColId: obj.col_id };
document.body.style.cursor = 'grabbing';
function onMouseUp() {
document.body.style.cursor = '';
document.removeEventListener('mouseup', onMouseUp);
if (dragState.current && dragOverRef.current) {
commitDrop(dragState.current, dragOverRef.current);
}
dragState.current = null;
dragOverRef.current = null;
setDragOver(null);
}
document.addEventListener('mouseup', onMouseUp);
}
function handleColMouseMove(e, colId) {
if (!dragState.current) return;
const items = Array.from(e.currentTarget.querySelectorAll('[data-objid]'));
let idx = items.length;
for (let i = 0; i < items.length; i++) {
const rect = items[i].getBoundingClientRect();
if (e.clientY < rect.top + rect.height / 2) { idx = i; break; }
}
const next = { colId, idx };
dragOverRef.current = next;
setDragOver(prev => {
if (prev?.colId === colId && prev?.idx === idx) return prev;
return next;
});
}
function handleColMouseLeave() {
if (!dragState.current) return;
dragOverRef.current = null;
setDragOver(null);
}
function commitDrop(ds, dov) {
const { objId, fromColId } = ds;
const { colId: toColId, idx: toIdx } = dov;
setObjects(prev => {
const obj = prev.find(o => o.id === objId);
if (!obj) return prev;
// Build target col list without the dragged object
const toColObjs = prev
.filter(o => o.col_id === toColId && o.status !== 0 && o.id !== objId)
.sort((a, b) => (a.order||0) - (b.order||0));
// Insert dragged object at target index
const insertAt = Math.max(0, Math.min(toIdx, toColObjs.length));
toColObjs.splice(insertAt, 0, { ...obj, col_id: toColId });
// Build source col list (only needed if moving between cols)
const fromColObjs = fromColId !== toColId
? prev
.filter(o => o.col_id === fromColId && o.status !== 0 && o.id !== objId)
.sort((a, b) => (a.order||0) - (b.order||0))
: null;
// Apply new order values
return prev.map(o => {
const toPos = toColObjs.findIndex(t => t.id === o.id);
if (toPos !== -1) return { ...o, col_id: toColId, order: toPos + 1 };
if (fromColObjs) {
const fromPos = fromColObjs.findIndex(f => f.id === o.id);
if (fromPos !== -1) return { ...o, order: fromPos + 1 };
}
return o;
});
});
setDirty(true);
}
// ── Load tables on mount ──
React.useEffect(() => {
loadTables();
}, [app.app_id]);
// ── Escape cancels placing ──
React.useEffect(() => {
function onKey(e) {
if (e.key === 'Escape') { setPlacingType(null); setSelectedObj(null); }
}
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, []);
async function loadTables() {
setLoading(true);
try {
const res = await apiFetch(`${API_BASE}/v7/dev/apps/${app.app_id}/tables`);
const data = await res.json();
if (data.status !== 'ok') throw new Error(data.message);
const rows = data.tables || [];
setTables(rows);
if (rows.length) {
const first = rows[0];
setActiveTableOid(first._oid);
await loadDesign(first);
}
} catch(err) { setError(err.message); }
setLoading(false);
}
async function loadDesign(tableRow) {
setSchema(tableRow);
setDetail(null); setListview(null); setObjects([]); setTheme(null);
setSelectedObj(null); setPlacingType(null); setDirty(false);
setListviewDirty(false); setThemeDirty(false);
const tNum = tableRow.tNum || (tableRow.code || '').replace('t', '');
try {
const res = await apiFetch(`${API_BASE}/v7/dev/apps/${app.app_id}/design/${tNum}`);
const data = await res.json();
if (data.status !== 'ok') throw new Error(data.message);
// Detail layout
const det = data.detail || makeDefaultDetail(tableRow);
setDetail(det);
const firstPage = det.layout?.[0]?.id || null;
setActivePage(firstPage);
// Other
setListview(data.listview || makeDefaultListview(tableRow));
setObjects(data.objects || []);
setTheme(data.theme || {});
} catch(err) { setError(err.message); }
}
function makeDefaultDetail(t) {
const pageId = newPageId();
return {
schema_version: 1,
group: 'design', type: 'detail',
table_id: t._oid || t.id,
table: t.code,
name: t.name,
nav_data: '',
width: 'fixed',
tab_style:'underline',
tab_sticky: true,
layout: [{
id: pageId,
name: 'Info',
order: 1,
rows: [],
}],
status: 1,
};
}
function makeDefaultListview(t) {
const fields = (t.fields || []).filter(f => f.status !== 0);
return {
schema_version: 1,
group: 'design', type: 'listview',
table_id: t._oid || t.id,
table: t.code,
name: t.name,
display: 'list',
pagesize: 25,
sortfield: 'r_auto',
sortdir: 'asc',
editable: false,
fields: fields.slice(0, 4).map(f => ({
field_id: f.id, field_code: f.code, label: f.name, width: 2,
})),
status: 1,
};
}
// ── Table switch ──
async function switchTable(t) {
if (dirty || listviewDirty || themeDirty) {
setConfirm({
msg: 'Unsaved changes',
detail: 'Switch tables without saving?',
okLabel:'Switch anyway',
okDanger: true,
onOk: () => { setActiveTableOid(t._oid); loadDesign(t); },
});
return;
}
setActiveTableOid(t._oid);
await loadDesign(t);
}
// ── Page management ──
function addPage() {
const det = JSON.parse(JSON.stringify(detail));
const newPage = {
id: newPageId(),
name: `Page ${det.layout.length + 1}`,
order: det.layout.length + 1,
rows: [],
};
det.layout.push(newPage);
setDetail(det); setDirty(true);
setActivePage(newPage.id);
}
function deletePage(pageId) {
const det = JSON.parse(JSON.stringify(detail));
const page = det.layout.find(p => p.id === pageId);
if (!page) return;
// Collect all col IDs from this page
const colIds = page.rows.flatMap(r => r.cols.map(c => c.id));
// Soft-delete objects in those cols
const updatedObjects = objects.map(o =>
colIds.includes(o.col_id) ? { ...o, status: 0 } : o
);
setObjects(updatedObjects);
det.layout = det.layout.filter(p => p.id !== pageId);
det.layout.forEach((p, i) => p.order = i + 1);
setDetail(det); setDirty(true);
setActivePage(det.layout[0]?.id || null);
if (selectedObj?.col_id && colIds.includes(selectedObj.col_id)) setSelectedObj(null);
}
function renamingPage(pageId) {
const page = detail.layout.find(p => p.id === pageId);
setRenamePage({ pageId, name: page?.name || '' });
}
function commitRenamePage() {
if (!renamePage) return;
const det = JSON.parse(JSON.stringify(detail));
const page = det.layout.find(p => p.id === renamePage.pageId);
if (page) page.name = renamePage.name;
setDetail(det); setDirty(true);
setRenamePage(null);
}
// ── Row management ──
function addRow(pageId) {
const det = JSON.parse(JSON.stringify(detail));
const page = det.layout.find(p => p.id === pageId);
if (!page) return;
const rowId = newRowId();
const colId = newColId();
page.rows.push({
id: rowId,
order: page.rows.length + 1,
cols: [{ id: colId, width: 12, order: 1 }],
});
setDetail(det); setDirty(true);
}
function deleteRow(pageId, rowId) {
const det = JSON.parse(JSON.stringify(detail));
const page = det.layout.find(p => p.id === pageId);
if (!page) return;
const row = page.rows.find(r => r.id === rowId);
const colIds = row?.cols.map(c => c.id) || [];
// Soft-delete objects in these cols
const updatedObjects = objects.map(o =>
colIds.includes(o.col_id) ? { ...o, status: 0 } : o
);
setObjects(updatedObjects);
page.rows = page.rows.filter(r => r.id !== rowId);
page.rows.forEach((r, i) => r.order = i + 1);
setDetail(det); setDirty(true);
if (colIds.includes(selectedObj?.col_id)) setSelectedObj(null);
}
// ── Col management ──
function splitCol(pageId, rowId) {
const det = JSON.parse(JSON.stringify(detail));
const page = det.layout.find(p => p.id === pageId);
const row = page?.rows.find(r => r.id === rowId);
if (!row) return;
// Find widest col with width >= 2
const widest = [...row.cols].sort((a,b) => (b.width||0) - (a.width||0))
.find(c => (c.width||0) >= 2);
if (!widest) return;
const half1 = Math.floor(widest.width / 2);
const half2 = widest.width - half1;
widest.width = half1;
const newCol = { id: newColId(), width: half2, order: row.cols.length + 1 };
const idx = row.cols.findIndex(c => c.id === widest.id);
row.cols.splice(idx + 1, 0, newCol);
row.cols.forEach((c, i) => c.order = i + 1);
setDetail(det); setDirty(true);
}
function updateColWidth(pageId, rowId, colId, newWidth) {
const det = JSON.parse(JSON.stringify(detail));
const page = det.layout.find(p => p.id === pageId);
const row = page?.rows.find(r => r.id === rowId);
const col = row?.cols.find(c => c.id === colId);
if (!col) return;
col.width = newWidth;
setDetail(det); setDirty(true);
}
function deleteCol(pageId, rowId, colId) {
const det = JSON.parse(JSON.stringify(detail));
const page = det.layout.find(p => p.id === pageId);
const row = page?.rows.find(r => r.id === rowId);
if (!row) return;
// Redistribute width to adjacent col
const col = row.cols.find(c => c.id === colId);
const remaining = row.cols.filter(c => c.id !== colId);
if (remaining.length > 0) remaining[0].width += (col?.width || 0);
row.cols = remaining;
row.cols.forEach((c, i) => c.order = i + 1);
const updatedObjects = objects.map(o =>
o.col_id === colId ? { ...o, status: 0 } : o
);
setObjects(updatedObjects);
setDetail(det); setDirty(true);
if (selectedObj?.col_id === colId) setSelectedObj(null);
if (selectedObj?._isCol && selectedObj?.id === colId) setSelectedObj(null);
}
// ── Object placement ──
function placeObject(colId) {
if (!placingType) return;
const newObj = {
id: tempId(),
group: 'object',
type: placingType,
col_id: colId,
order: objects.filter(o => o.col_id === colId && o.status !== 0).length + 1,
label: '',
field_id: '',
field_code: '',
status: 1,
};
setObjects(prev => [...prev, newObj]);
setPlacingType(null);
setSelectedObj(newObj);
setDirty(true);
}
// ── Object inspector callbacks ──
function handleUpdateObj(updated) {
setObjects(prev => prev.map(o => o.id === updated.id ? { ...updated } : o));
setSelectedObj(updated);
setDirty(true);
}
function handleDeleteObj(obj) {
setObjects(prev => prev.map(o => o.id === obj.id ? { ...o, status: 0 } : o));
setSelectedObj(null);
setDirty(true);
}
// ── Col inspector callbacks ──
function selectCol(col, siblingTotal, pageId, rowId) {
setSelectedObj({ ...col, _isCol: true, _siblingTotal: siblingTotal,
_pageId: pageId, _rowId: rowId });
}
function handleUpdateCol(updated) {
if (!updated._isCol) return;
updateColWidth(updated._pageId, updated._rowId, updated.id, updated.width);
setSelectedObj(null);
}
function handleDeleteCol(updated) {
if (!updated._isCol) return;
deleteCol(updated._pageId, updated._rowId, updated.id);
}
// ── Save ──
async function handleSave() {
setSaving(true); setSaveMsg(null);
const tNum = schema?.tNum || (schema?.code || '').replace('t', '');
try {
// 1. Save detail layout
if (dirty) {
const res = await apiFetch(
`${API_BASE}/v7/dev/apps/${app.app_id}/design/${tNum}/detail/save`,
{ method:'POST', body: JSON.stringify(detail) }
);
const data = await res.json();
if (data.status !== 'ok') throw new Error('Detail save: ' + data.message);
}
// 2. Save objects
const newObjs = objects.filter(o => String(o.id).startsWith('temp_') && o.status !== 0);
const existingActive = objects.filter(o => !String(o.id).startsWith('temp_') && o.status !== 0);
const toDelete = objects.filter(o => !String(o.id).startsWith('temp_') && o.status === 0);
const allToSave = [...existingActive, ...newObjs];
if (allToSave.length) {
const res = await apiFetch(
`${API_BASE}/v7/dev/apps/${app.app_id}/design/${tNum}/objects/save`,
{ method:'POST', body: JSON.stringify({ objects: allToSave }) }
);
const data = await res.json();
if (data.status !== 'ok') throw new Error('Objects save: ' + data.message);
// Replace temp IDs with real UUIDs
if (data.idMap && Object.keys(data.idMap).length) {
setObjects(prev => prev.map(o => {
const realId = data.idMap[o.id];
return realId ? { ...o, id: realId } : o;
}));
}
}
if (toDelete.length) {
await apiFetch(
`${API_BASE}/v7/dev/apps/${app.app_id}/design/${tNum}/objects/delete`,
{ method:'POST', body: JSON.stringify({ ids: toDelete.map(o => o.id) }) }
);
}
// 3. Save listview
if (listviewDirty && listview) {
const res = await apiFetch(
`${API_BASE}/v7/dev/apps/${app.app_id}/design/${tNum}/listview/save`,
{ method:'POST', body: JSON.stringify(listview) }
);
const data = await res.json();
if (data.status !== 'ok') throw new Error('Listview save: ' + data.message);
}
// 4. Save theme
if (themeDirty && theme) {
await apiFetch(
`${API_BASE}/v7/dev/apps/${app.app_id}/design/theme/save`,
{ method:'POST', body: JSON.stringify({ theme }) }
);
}
// 5. Save home config (table visibility/sort)
if (dirty && subTab === 'home') {
await apiFetch(
`${API_BASE}/v7/dev/apps/${app.app_id}/design/home/save`,
{ method:'POST', body: JSON.stringify({ tables }) }
);
}
setDirty(false); setListviewDirty(false); setThemeDirty(false);
setSaveMsg('Saved ✓');
setTimeout(() => setSaveMsg(null), 2500);
} catch(err) {
setSaveMsg('Error: ' + err.message);
}
setSaving(false);
}
// ── Derived ──
const activePageObj = detail?.layout?.find(p => p.id === activePage);
const isDirty = dirty || listviewDirty || themeDirty;
const currentTNum = schema?.tNum || (schema?.code || '').replace('t', '');
if (loading) return Loading…
;
if (error) return {error}
;
if (!tables.length) return (
No tables yet — create one in the Database tab first.
);
return (
{confirm &&
setConfirm(null)} />}
{/* ── Toolbar ── */}
{/* Home Page */}
{/* Tables dropdown */}
{/* List View / Detail View — only when a table is selected */}
{(subTab === 'detail' || subTab === 'listview') && activeTableOid && (
{[['listview','List View'],['detail','Detail View']].map(([v,l]) => (
))}
)}
{/* Separator */}
{/* Theme */}
{/* Value Lists */}
{/* Right side: dirty + save + widescreen */}
{saveMsg && (
{saveMsg}
)}
{isDirty && !saveMsg && (
● Unsaved
)}
{/* Widescreen toggle */}
{/* ══ DETAIL tab ══════════════════════════════════ */}
{subTab === 'detail' && detail && (
{/* ── Left: Palette ── */}
Objects
{PALETTE_GROUPS.map(group => (
{group.label}
{group.items.map(item => {
const isActive = placingType === item.type;
return (
setPlacingType(isActive ? null : item.type)}
style={{
display:'flex', alignItems:'center', gap:8,
padding:'6px 10px', borderRadius:6, marginBottom:3,
cursor:'pointer', fontSize:12,
background: isActive ? '#eff6ff' : 'transparent',
border: isActive ? '1.5px solid #2563eb' : '1.5px solid transparent',
color: isActive ? '#2563eb' : '#374151',
transition:'all 0.1s',
}}>
{item.icon}
{item.label}
{isActive && ✓}
);
})}
))}
{placingType && (
Placing: {placingType}
Click a column to place.
ESC to cancel.
)}
{/* ── Center: Canvas ── */}
{/* Page tabs */}
{detail.layout.map(page => (
{renamePage?.pageId === page.id ? (
setRenamePage(p => ({ ...p, name: e.target.value }))}
onBlur={commitRenamePage}
onKeyDown={e => { if(e.key==='Enter') commitRenamePage();
if(e.key==='Escape') setRenamePage(null); }}
style={{ padding:'4px 8px', border:'1.5px solid #2563eb', borderRadius:5,
fontSize:12, fontFamily:'DM Sans, sans-serif',
outline:'none', width:100 }} />
) : (
)}
))}
{/* Tabs + Layout inspector icons */}
{/* Active page rows */}
{!activePageObj ? (
Select or add a page
) : (
<>
{activePageObj.rows.length === 0 && (
No rows yet — add one below
)}
{activePageObj.rows.map(row => (
{ setSelectedObj(obj); setPlacingType(null); setInspMode('object'); }}
onSelectCol={(col, sibTotal) => {
selectCol(col, sibTotal, activePageObj.id, row.id);
setInspMode('col');
}}
onDeleteRow={() => setConfirm({
msg: 'Delete this row?',
detail: 'All columns and objects in this row will be removed.',
okDanger: true,
onOk: () => deleteRow(activePageObj.id, row.id),
})}
onSplitCol={() => splitCol(activePageObj.id, row.id)}
dragOver={dragOver}
onDragStart={handleDragStart}
onColMouseMove={handleColMouseMove}
onColMouseLeave={handleColMouseLeave}
/>
))}
{/* Add row */}
)}
{/* ── Right: Inspector ── */}
{inspMode === 'tabs' && (
{ setDetail(updated); setDirty(true); }}
/>
)}
{inspMode === 'layout' && (
{ setDetail(updated); setDirty(true); }}
/>
)}
{(inspMode === 'object' || inspMode === 'col') && (
setShowIconBrowser(() => cb)}
onUpdate={updated => {
if (updated._isCol) handleUpdateCol(updated);
else handleUpdateObj(updated);
}}
onDelete={obj => {
if (obj._isCol) handleDeleteCol(obj);
else handleDeleteObj(obj);
}}
/>
)}
{
setListview(prev => ({ ...prev, ...updated }));
setListviewDirty(true);
}}
/>
)}
{/* ══ HOME tab ════════════════════════════════════ */}
{subTab === 'home' && (
{/* Card canvas */}
setSelectedTable({ ...t, _isTable:true })}
onReorder={updated => { setTables(updated); setDirty(true); }}
/>
{/* Inspector panel */}
{
setTables(prev => prev.map(t =>
t._oid === updated._oid ? { ...t, ...updated } : t
));
setSelectedTable(updated);
setDirty(true);
}}
/>
{typeof ThemePanel !== 'undefined'
?
{ setTheme(t); setThemeDirty(true); }} />
:
Theme panel loading…
}
{typeof ValueListsPanel !== 'undefined'
?
:
Loading…
}
setRenamePage(null)}>
e.stopPropagation()}>
Rename Page
setRenamePage(p => ({ ...p, name: e.target.value }))}
onKeyDown={e => { if(e.key==='Enter') commitRenamePage(); }}
style={{ width:'100%', padding:'8px 12px', border:'1.5px solid #e2e8f0',
borderRadius:7, fontSize:13, fontFamily:'DM Sans, sans-serif',
outline:'none', marginBottom:14, boxSizing:'border-box' }} />