@mmlogic/components 0.1.30 → 0.3.0

package/dist/collection/dev/app.js

@@ -2,13 +2,17 @@
    APP STATE
    ===================================================================== */
 
-let _selectedTenant = null;
-let _selectedType   = null; // { name, pluralName }
-let _relationMeta   = {};   // relatedClass / mostSignificantClass → { name, mostSignificantClass }
-let _tableDataHref  = null; // base href for the current table view (without ?page=)
-let _locale         = navigator.language || 'nl-NL';
-let _dashboard      = null; // full dashboard response — used for view switching
-let _currentViewKey = null; // key of the view currently displayed in the table
+let _selectedTenant    = null;
+let _selectedType      = null; // { name, pluralName }
+let _relationMeta      = {};   // relatedClass / mostSignificantClass → { name, mostSignificantClass }
+let _baseHref          = null; // tenant base href: /data/{tenant}
+let _locale            = navigator.language || 'nl-NL';
+let _dashboardData     = null; // full dashboard response
+let _dashboardRecord   = null; // data-object voor object/form dashboards
+let _activeLayoutIndex = 0;
+let _dashboardType     = 'class'; // 'class' | 'general' | 'navigation' | 'object' | 'form'
+let _sectionGeneration = 0;       // incremented on each renderSection(); prevents stale fetches
+let _navHistory        = [];      // stack van { dashboardData, dashboardRecord, activeLayoutIndex }
 
 /* =====================================================================
    UTILITIES
@@ -21,6 +25,29 @@ function escHtml(str) {
     .replace(/"/g, '"').replace(/'/g, ''');
 }
 
+function formatJson(value) {
+  try {
+    const parsed = typeof value === 'string' ? JSON.parse(value) : value;
+    const json = JSON.stringify(parsed, null, 2);
+    return json.replace(
+      /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
+      match => {
+        let style = 'color:#2aa198';
+        if (/^"/.test(match)) {
+          style = /:$/.test(match) ? 'color:#81a1c1' : 'color:#a3be8c';
+        } else if (/true|false/.test(match)) {
+          style = 'color:#ebcb8b';
+        } else if (/null/.test(match)) {
+          style = 'color:#bf616a';
+        }
+        return `<span style="${style}">${match}</span>`;
+      },
+    );
+  } catch {
+    return escHtml(String(value));
+  }
+}
+
 function httpStatusText(code) {
   const map = {
     200: 'OK', 201: 'Created', 204: 'No Content',
@@ -31,9 +58,43 @@ function httpStatusText(code) {
   return map[code] || '';
 }
 
+const EVENT_LOG_MAX = 200;
+
 function logEvent(type, data) {
-  document.getElementById('event-log').textContent =
-    '[' + type + ']\n' + JSON.stringify(data, null, 2);
+  const log = document.getElementById('event-log');
+
+  const empty = log.querySelector('.event-log-empty');
+  if (empty) empty.remove();
+
+  // Trim oldest entries when the log grows too large
+  while (log.children.length >= EVENT_LOG_MAX) log.removeChild(log.firstChild);
+
+  const now  = new Date();
+  const time = now.toTimeString().slice(0, 8) + '.' + String(now.getMilliseconds()).padStart(3, '0');
+  const json = data !== undefined ? JSON.stringify(data, null, 2) : null;
+
+  const entry = document.createElement('div');
+  entry.className  = 'event-log-entry';
+  entry.dataset.type = type;
+  entry.innerHTML = `
+    <div class="event-log-entry-head">
+      <span class="event-log-time">${escHtml(time)}</span>
+      <span class="event-log-type">${escHtml(type)}</span>
+      ${json ? '<span class="event-log-arrow">▶</span>' : ''}
+    </div>
+    ${json ? `<pre class="event-log-detail">${escHtml(json)}</pre>` : ''}`;
+
+  entry.querySelector('.event-log-entry-head')?.addEventListener('click', () => {
+    if (json) entry.classList.toggle('open');
+  });
+
+  log.appendChild(entry);
+  log.scrollTop = log.scrollHeight;
+}
+
+function clearEventLog() {
+  const log = document.getElementById('event-log');
+  log.innerHTML = '<span class="event-log-empty">Wacht op events…</span>';
 }
 
 /* =====================================================================
@@ -139,293 +200,339 @@ function showCompanyList() {
    ===================================================================== */
 
 async function loadTenants() {
-  const panel = document.getElementById('panel-tenant');
-  panel.classList.remove('hidden');
-  const grid = document.getElementById('tenant-grid');
-  grid.innerHTML = '<span class="spinner"></span>';
+  document.getElementById('panel-controls').classList.remove('hidden');
+  const sel = document.getElementById('tenant-select-compact');
+  sel.innerHTML = '<option value="">⏳ laden...</option>';
 
   try {
     const tenants = await apiFetchTenants(authGetToken());
-    renderTenants(tenants);
-  } catch (err) {
-    grid.innerHTML = `<span style="color:var(--mrd-color-danger)">❌ ${escHtml(err.message)}</span>`;
-  }
-}
-
-function renderTenants(tenants) {
-  const grid = document.getElementById('tenant-grid');
-  if (!tenants || tenants.length === 0) {
-    grid.innerHTML = '<em style="color:var(--mrd-color-neutral-500)">Geen tenants gevonden.</em>';
-    return;
-  }
-
-  grid.innerHTML = tenants.map((t, i) => {
-    const code = t.tenantCode || t.code || t.id || String(i);
-    const name = t.name || code;
-    const desc = t.description || '';
-    return `
-      <div class="tenant-card">
-        <input type="radio" name="tenant" id="tenant-${escHtml(code)}" value="${escHtml(code)}"
-               onchange="onTenantChange('${escHtml(code)}', '${escHtml(name)}')">
-        <label for="tenant-${escHtml(code)}">
-          ${escHtml(name)}
-          ${desc ? `<small>${escHtml(desc)}</small>` : ''}
-        </label>
-      </div>`;
-  }).join('');
-
-  const savedTenant = localStorage.getItem('last_tenant');
-  if (savedTenant) {
-    const radio = document.getElementById(`tenant-${savedTenant}`);
-    if (radio) {
-      radio.checked = true;
-      const label = document.querySelector(`label[for="tenant-${savedTenant}"]`);
-      const name  = label ? (label.firstChild?.textContent?.trim() || savedTenant) : savedTenant;
-      onTenantChange(savedTenant, name);
+    if (!tenants || tenants.length === 0) {
+      sel.innerHTML = '<option value="">— geen tenants gevonden —</option>';
+      return;
+    }
+    sel.innerHTML = '<option value="">— selecteer tenant —</option>' +
+      tenants.map(t => {
+        const code = t.tenantCode || t.code || t.id;
+        return `<option value="${escHtml(code)}">${escHtml(t.name || code)}</option>`;
+      }).join('');
+
+    const saved = localStorage.getItem('last_tenant');
+    if (saved) {
+      sel.value = saved;
+      onCompactTenantChange(saved);
     }
+  } catch (err) {
+    sel.innerHTML = `<option value="">❌ ${escHtml(err.message)}</option>`;
   }
 }
 
-async function onTenantChange(code, name) {
+function onCompactTenantChange(code) {
   _selectedTenant = code;
+  _baseHref = `/data/${code}`;
   localStorage.setItem('last_tenant', code);
-  _selectedType   = null;
-  document.getElementById('panel-table').classList.add('hidden');
-  document.getElementById('panel-form').classList.add('hidden');
-  document.getElementById('panel-response').innerHTML = '';
+  if (_dashboardType === 'class' && code) loadCompactTypes(code);
+}
 
-  const typePanel = document.getElementById('panel-type');
-  typePanel.classList.remove('hidden');
-  const sel = document.getElementById('type-select');
+async function loadCompactTypes(tenantCode) {
+  const sel = document.getElementById('type-select-compact');
   sel.innerHTML = '<option value="">⏳ laden...</option>';
   sel.disabled = true;
-
   try {
-    const types = await apiFetchTypes(authGetToken(), code);
-    renderTypes(types);
+    const types = await apiFetchTypes(authGetToken(), tenantCode);
+    if (!types || types.length === 0) {
+      sel.innerHTML = '<option value="">— geen types —</option>';
+      return;
+    }
+    sel.innerHTML = '<option value="">— selecteer type —</option>' +
+      types.map(t => {
+        const plural = t.pluralName || t.name;
+        return `<option value="${escHtml(plural)}">${escHtml(t.name)}</option>`;
+      }).join('');
+    sel.disabled = false;
+
+    const saved = localStorage.getItem('last_type');
+    if (saved && sel.querySelector(`option[value="${saved}"]`)) {
+      sel.value = saved;
+    }
   } catch (err) {
-    sel.innerHTML = '<option value="">— fout bij laden —</option>';
+    sel.innerHTML = `<option value="">❌ ${escHtml(err.message)}</option>`;
     sel.disabled = false;
-    typePanel.querySelector('h3').insertAdjacentHTML('afterend',
-      `<p style="color:var(--mrd-color-danger);font-size:.875rem;margin:0 0 .75rem">❌ ${escHtml(err.message)}</p>`);
   }
 }
 
-function renderTypes(types) {
-  const sel = document.getElementById('type-select');
-  if (!types || types.length === 0) {
-    sel.innerHTML = '<option value="">— geen types gevonden —</option>';
-    sel.disabled = true;
-    return;
-  }
-  sel.innerHTML = '<option value="">— selecteer type —</option>' +
-    types.map(t => {
-      const plural = t.pluralName || t.name;
-      return `<option value="${escHtml(plural)}" data-name="${escHtml(t.name)}">${escHtml(t.name)}</option>`;
-    }).join('');
-  sel.disabled = false;
+function onDashboardTypeChange(type) {
+  _dashboardType = type;
+  document.getElementById('controls-class-group').classList.toggle('hidden', type !== 'class');
+  document.getElementById('controls-object-group').classList.toggle('hidden', type !== 'object' && type !== 'form');
+  if (type === 'class' && _selectedTenant) loadCompactTypes(_selectedTenant);
 }
 
 /* =====================================================================
-   TABLE
+   DASHBOARD — laad + render layout sections
    ===================================================================== */
 
-async function loadTable() {
-  const sel = document.getElementById('type-select');
-  const pluralName = sel.value;
-  if (!pluralName) return;
-
-  const opt = sel.options[sel.selectedIndex];
-  _selectedType = { name: opt.dataset.name || pluralName, pluralName };
+async function loadDashboard() {
+  const name  = document.getElementById('dashboard-name-input').value.trim() || undefined;
+  const token = authGetToken();
 
-  const tablePanel = document.getElementById('panel-table');
-  tablePanel.classList.remove('hidden');
-  tablePanel.innerHTML = '<span class="spinner"></span> Lijst laden...';
-  document.getElementById('panel-form').classList.add('hidden');
+  document.getElementById('sections-container').innerHTML =
+    '<span class="spinner"></span> Dashboard laden...';
+  document.getElementById('panel-sections').classList.remove('hidden');
   document.getElementById('panel-response').innerHTML = '';
-  _tableDataHref = null;
 
   try {
-    const dashboard = await apiFetchDashboard(authGetToken(), _selectedTenant, pluralName);
-    _dashboard = dashboard;
-
-    const layoutItem = dashboard.layouts?.[0]?.items?.[0];
-    const viewKey    = layoutItem?.name;
-    const view       = viewKey && dashboard.views?.[viewKey];
-    const dataHref   = viewKey && dashboard._links?.[viewKey]?.href;
-    if (!view || !dataHref) throw new Error('Geen geldige view gevonden in dashboard response.');
-
-    _currentViewKey = viewKey;
-
-    // Strip any ?page= from href so we control pagination ourselves
-    _tableDataHref = dataHref.replace(/([?&])page=\d+/, '').replace(/\?$/, '');
-
-    const columns          = (view.values ?? []).map(mapApiItem);
-    const defaultSort      = view.defaultSort ?? '';
-    const viewLabel        = layoutItem?.label ?? viewKey ?? '';
-    const alternativeViews = layoutItem?.alternativeViews ?? [];
-    const viewFilter       = view.filter ?? [];
-
-    // Fetch page 0 for totalElements + first rows (including defaultSort + view filters)
-    const page0    = await apiFetchPage(authGetToken(), applyViewFilter(_tableDataHref, viewFilter), 0, defaultSort);
-    const meta     = page0.page ?? {};
-    const total    = meta.totalElements ?? 0;
-    const pageSize = meta.size ?? 20;
-    const embedded = page0._embedded ?? {};
-    const rows0    = Object.values(embedded)[0] ?? [];
-
-    renderTable(columns, total, pageSize, rows0, _tableDataHref, defaultSort, viewLabel, alternativeViews, viewFilter);
+    let dashboard;
+    let recordData = null;
+
+    if (_dashboardType === 'class') {
+      const pluralName = document.getElementById('type-select-compact').value;
+      if (!pluralName) throw new Error('Selecteer een type');
+      const opt = document.getElementById('type-select-compact').selectedOptions[0];
+      _selectedType = { name: opt.text, pluralName };
+      localStorage.setItem('last_type', pluralName);
+      dashboard = await apiFetchClassDashboard(token, _selectedTenant, pluralName, name);
+
+    } else if (_dashboardType === 'general') {
+      dashboard = await apiFetchGeneralDashboard(token, _selectedTenant, name);
+
+    } else if (_dashboardType === 'navigation') {
+      dashboard = await apiFetchNavigationPane(token, _selectedTenant, name);
+
+    } else {
+      // 'object' of 'form': fetch record → gebruik _links.metadata.href of _links.form.href
+      const objectHref = document.getElementById('object-href-input').value.trim();
+      if (!objectHref) throw new Error('Vul een Object URL in');
+      const recResp = await apiRequest('GET', objectHref, token);
+      if (!recResp.ok) throw new Error(`${recResp.status}: kon object niet ophalen`);
+      recordData = recResp.body;
+
+      const linkKey  = _dashboardType === 'form' ? 'form' : 'metadata';
+      const dashHref = recordData._links?.[linkKey]?.href;
+      if (!dashHref) throw new Error(`Geen _links.${linkKey} gevonden in object`);
+
+      const dashResp = await apiRequest('GET', dashHref, token);
+      if (!dashResp.ok) throw new Error(`${dashResp.status}: dashboard ophalen mislukt`);
+      dashboard = dashResp.body;
+    }
+
+    _dashboardData   = dashboard;
+    _dashboardRecord = recordData;
+    _activeLayoutIndex = 0;
+    _navHistory = [];
+
+    renderSectionTabs(dashboard.layouts ?? []);
+    renderSection(0);
+    updateBackButton();
   } catch (err) {
-    tablePanel.innerHTML = `<span style="color:var(--mrd-color-danger)">❌ ${escHtml(err.message)}</span>`;
+    document.getElementById('sections-container').innerHTML =
+      `<span style="color:var(--mrd-color-danger)">❌ ${escHtml(err.message)}</span>`;
   }
 }
 
-function renderTable(columns, totalElements, pageSize, page0Rows, dataHref, defaultSort = '', initialViewLabel = '', initialAlternativeViews = [], initialViewFilter = []) {
-  const tablePanel = document.getElementById('panel-table');
-  tablePanel.innerHTML = '<mrd-table id="live-table"></mrd-table>';
-
-  customElements.whenDefined('mrd-table').then(async () => {
-    const table = document.getElementById('live-table');
-
-    // Mutable closure state — reassigned on view switch so subsequent handlers see new values
-    let _activeFilters   = [];
-    let _pageLinks       = {};  // _links from the most recent page 0 response (self, excel, etc.)
-    let viewLabel        = initialViewLabel;
-    let alternativeViews = initialAlternativeViews;
-    let viewFilter       = initialViewFilter; // static filters from view definition
-
-    _tableDataHref = dataHref;
-
-    table.columns          = columns;
-    table.locale           = _locale;
-    table.pageSize         = pageSize;
-    table.tableHeight      = 500;
-    table.totalElements    = totalElements;
-    table.defaultSort      = defaultSort;
-    table.viewLabel        = viewLabel;
-    table.alternativeViews = alternativeViews;
-    table.actions          = [
-      { action: 'create', label: 'Nieuw record',          icon: 'dev/sprites.svg#icon-plus',       variant: 'primary' },
-      { action: 'export', label: 'Exporteer naar Excel',  icon: 'dev/sprites.svg#icon-file-excel' },
-    ];
-
-    function buildParams(sort) {
-      const params = new URLSearchParams();
-      if (sort) params.set('sort', sort);
-      // Static view-level filters (from view.filter in dashboard response)
-      viewFilter.forEach(f => { if (f.name && f.value != null) params.set(f.name, String(f.value)); });
-      // User-applied column filters
-      _activeFilters.forEach(f => {
-        if (f.operator === 'isEmpty')    { params.set(f.field, '');                       return; }
-        if (f.operator === 'isNotEmpty') { params.set(f.field + '_notempty', 'true');     return; }
-        if (f.values?.length)            { params.set(f.field, f.values.join(','));        return; }
-        if (f.value != null && f.value !== '') params.set(f.field, String(f.value));
-        if (f.from  != null && f.from  !== '') params.set(f.field + '_from', String(f.from));
-        if (f.to    != null && f.to    !== '') params.set(f.field + '_to',   String(f.to));
-      });
-      return params;
+function renderSectionTabs(layouts) {
+  const bar = document.getElementById('sections-tab-bar');
+  bar.innerHTML = '';
+  if (layouts.length <= 1) return;
+
+  layouts.forEach((layout, i) => {
+    const label = layout.label ?? layout.type ?? `Sectie ${i + 1}`;
+    const btn = document.createElement('button');
+    btn.className = 'section-tab-btn' + (i === 0 ? ' active' : '');
+    btn.textContent = label;
+    btn.onclick = () => renderSection(i);
+    bar.appendChild(btn);
+  });
+}
+
+function renderSection(index) {
+  _activeLayoutIndex = index;
+  const generation = ++_sectionGeneration; // snapshot for stale-fetch detection
+
+  document.querySelectorAll('.section-tab-btn').forEach((btn, i) =>
+    btn.classList.toggle('active', i === index));
+
+  const layout = _dashboardData.layouts[index];
+  document.getElementById('json-viewer').innerHTML = formatJson(layout);
+
+  const container = document.getElementById('sections-container');
+  container.innerHTML = '';
+
+  const section = document.createElement('mrd-layout-section');
+  section.items  = layout.items;
+  section.data   = _dashboardRecord ?? { _links: _dashboardData._links ?? {} };
+  section.locale = _locale;
+
+  section.addEventListener('mrdLoadViewPage', async (e) => {
+    if (generation !== _sectionGeneration) return;
+    const { name, page, path, qs } = e.detail;
+    logEvent('mrdLoadViewPage', e.detail);
+    try {
+      const url = `${_baseHref}${path}${qs ? '?' + qs : ''}`;
+      const result = await apiFetchPage(authGetToken(), url, page);
+      const rows  = Object.values(result._embedded ?? {})[0] ?? [];
+      const total = result.page?.totalElements;
+      await section.setViewPage(name, page, rows, total);
+    } catch (err) {
+      console.error('[mrdLoadViewPage] mislukt', name, err);
     }
+  });
 
-    // Register mrdLoadPage before init() so scroll events are caught immediately
-    table.addEventListener('mrdLoadPage', async (e) => {
-      const { page, sort } = e.detail;
-      try {
-        const params = buildParams(sort);
-        const qs  = params.toString();
-        const url = qs ? `${_tableDataHref}?${qs}` : _tableDataHref;
+  section.addEventListener('mrdLoadViewAggregations', async (e) => {
+    if (generation !== _sectionGeneration) return;
+    const { name, path, qs: filterQs, sum, avg, count } = e.detail;
+    logEvent('mrdLoadViewAggregations', e.detail);
+    try {
+      const aggUrl = `${_baseHref}${path}/aggregations`;
+      const p = new URLSearchParams(filterQs ?? '');
+      p.delete('page');
+      p.delete('sort');
+      if (sum?.length)   p.set('sum',   sum.join(','));
+      if (avg?.length)   p.set('avg',   avg.join(','));
+      if (count?.length) p.set('count', count.join(','));
+      const qs     = p.toString();
+      const result = await apiRequest('GET', qs ? `${aggUrl}?${qs}` : aggUrl, authGetToken());
+      if (result.ok) await section.setViewAggregations(name, result.body);
+    } catch (err) {
+      console.error('[mrdLoadViewAggregations] mislukt', name, err);
+    }
+  });
 
-        const result   = await apiFetchPage(authGetToken(), url, page);
-        const embedded = result._embedded ?? {};
-        const rows     = Object.values(embedded)[0] ?? [];
-        await table.setPage(page, rows);
-      } catch (err) {
-        console.error('[mrd-table] pagina laden mislukt', page, err);
-      }
-    });
+  section.addEventListener('mrdViewAction', async (e) => {
+    logEvent('mrdViewAction', e.detail);
+  });
 
-    // Open form with existing record on row click
-    table.addEventListener('mrdRowClick', async (e) => {
-      await loadRecord(e.detail);
-    });
+  section.addEventListener('mrdNavigate', async (e) => {
+    if (generation !== _sectionGeneration) return;
+    await handleNavigate(e.detail);
+  });
+  section.addEventListener('mrdDownload',   (e) => logEvent('mrdDownload',   e.detail));
+  section.addEventListener('mrdSearch',     (e) => logEvent('mrdSearch',     e.detail));
 
-    // Table-level action buttons (toolbar)
-    table.addEventListener('mrdAction', (e) => {
-      logEvent('mrdAction', e.detail);
-      if (e.detail.action === 'create') loadForm();
-    });
+  container.appendChild(section);
+}
 
-    // Store filters; mrdLoadPage will pick them up automatically
-    table.addEventListener('mrdFilter', (e) => {
-      logEvent('mrdFilter', e.detail);
-      _activeFilters = e.detail.filters;
-    });
 
-    // Fetch aggregation totals from /aggregations endpoint with same filter params
-    table.addEventListener('mrdLoadAggregations', async (e) => {
-      const { sum, avg, count } = e.detail;
-      try {
-        const aggUrl = _tableDataHref.split('?')[0] + '/aggregations';
-        const params = buildParams('');
-        if (sum?.length)   params.set('sum',   sum.join(','));
-        if (avg?.length)   params.set('avg',   avg.join(','));
-        if (count?.length) params.set('count', count.join(','));
-        const qs     = params.toString();
-        const result = await apiRequest('GET', qs ? `${aggUrl}?${qs}` : aggUrl, authGetToken());
-        if (result.ok) await table.setAggregations(result.body);
-      } catch (err) {
-        console.error('[mrdLoadAggregations] mislukt', err);
-      }
-    });
+function toggleJsonViewer() {
+  const viewer = document.getElementById('json-viewer');
+  const btn    = document.getElementById('btn-json-toggle');
+  const open   = !viewer.classList.toggle('hidden');
+  btn.classList.toggle('active', open);
+}
+
+function updateBackButton() {
+  const btn = document.getElementById('btn-nav-back');
+  if (btn) btn.classList.toggle('hidden', _navHistory.length === 0);
+}
 
-    // Switch to an alternative view: swap current and clicked view
-    table.addEventListener('mrdSwitchView', async (e) => {
-      const newKey  = e.detail.name;
-      const newView = _dashboard?.views?.[newKey];
-      const newHref = _dashboard?._links?.[newKey]?.href;
-      if (!newView || !newHref) { console.error('[mrdSwitchView] view niet gevonden:', newKey); return; }
-
-      const clickedAlt   = alternativeViews.find(av => av.name === newKey);
-      const newViewLabel = clickedAlt?.label ?? newKey;
-      const layoutItem   = _dashboard.layouts?.[0]?.items?.[0];
-
-      // Old current becomes an alternative; clicked alternative becomes current
-      const newAlts = [
-        { name: _currentViewKey, label: viewLabel, class: layoutItem?.class ?? '' },
-        ...alternativeViews.filter(av => av.name !== newKey),
-      ];
-
-      _currentViewKey  = newKey;
-      _tableDataHref   = newHref.replace(/([?&])page=\d+/, '').replace(/\?$/, '');
-      viewLabel        = newViewLabel;
-      alternativeViews = newAlts;
-      viewFilter       = newView.filter ?? [];
-      _activeFilters   = [];
+function syncDashboardTypeUI(type, objectHref) {
+  _dashboardType = type;
+  document.getElementById('dashboard-type-select').value = type;
+  const isObject = type === 'object' || type === 'form';
+  document.getElementById('controls-class-group').classList.toggle('hidden', type !== 'class');
+  document.getElementById('controls-object-group').classList.toggle('hidden', !isObject);
+  if (isObject && objectHref) {
+    document.getElementById('object-href-input').value = objectHref;
+  }
+}
 
-      try {
-        const newDefaultSort = newView.defaultSort ?? '';
-        const page0    = await apiFetchPage(authGetToken(), applyViewFilter(_tableDataHref, viewFilter), 0, newDefaultSort);
-        const meta     = page0.page ?? {};
-        const rows0    = Object.values(page0._embedded ?? {})[0] ?? [];
-
-        table.columns          = (newView.values ?? []).map(mapApiItem);
-        table.defaultSort      = newDefaultSort;
-        table.totalElements    = meta.totalElements ?? 0;
-        table.pageSize         = meta.size ?? 20;
-        table.viewLabel        = viewLabel;
-        table.alternativeViews = alternativeViews;
-
-        await table.init();
-        await table.setPage(0, rows0);
-      } catch (err) {
-        console.error('[mrdSwitchView] laden mislukt', err);
-      }
-    });
+function navigateBack() {
+  if (_navHistory.length === 0) return;
+  const prev = _navHistory.pop();
+  _dashboardData     = prev.dashboardData;
+  _dashboardRecord   = prev.dashboardRecord;
+  _activeLayoutIndex = prev.activeLayoutIndex;
+  syncDashboardTypeUI(prev.dashboardType ?? _dashboardType, prev.objectHref ?? '');
+  renderSectionTabs(_dashboardData.layouts ?? []);
+  renderSection(_activeLayoutIndex);
+  updateBackButton();
+}
 
-    await table.init();
-    await table.setPage(0, page0Rows); // inject pre-fetched page 0 — no extra request
+function pushHistory() {
+  _navHistory.push({
+    dashboardData:     _dashboardData,
+    dashboardRecord:   _dashboardRecord,
+    activeLayoutIndex: _activeLayoutIndex,
+    dashboardType:     _dashboardType,
+    objectHref:        document.getElementById('object-href-input').value,
   });
 }
 
+async function navigateToObjectDashboard(selfHref) {
+  if (!selfHref) return;
+
+  document.getElementById('sections-container').innerHTML =
+    '<span class="spinner"></span> Object laden...';
+  document.getElementById('panel-sections').classList.remove('hidden');
+
+  try {
+    const recResp = await apiRequest('GET', selfHref, authGetToken());
+    if (!recResp.ok) throw new Error(`${recResp.status}: object ophalen mislukt`);
+    const record = recResp.body;
+
+    const dashHref = record._links?.metadata?.href;
+    if (!dashHref) throw new Error('Geen _links.metadata gevonden in object');
+
+    const dashResp = await apiRequest('GET', dashHref, authGetToken());
+    if (!dashResp.ok) throw new Error(`${dashResp.status}: dashboard ophalen mislukt`);
+    const dashboard = dashResp.body;
+
+    pushHistory();
+    _dashboardData   = dashboard;
+    _dashboardRecord = record;
+    _activeLayoutIndex = 0;
+
+    const displayHref = selfHref.startsWith('http') ? selfHref : API_BASE + selfHref;
+    syncDashboardTypeUI('object', displayHref);
+    renderSectionTabs(dashboard.layouts ?? []);
+    renderSection(0);
+    updateBackButton();
+  } catch (err) {
+    document.getElementById('sections-container').innerHTML =
+      `<span style="color:var(--mrd-color-danger)">❌ ${escHtml(err.message)}</span>`;
+  }
+}
+
+async function navigateToClassDashboard(pluralName) {
+  if (!_selectedTenant || !pluralName) return;
+
+  document.getElementById('sections-container').innerHTML =
+    '<span class="spinner"></span> Dashboard laden...';
+  document.getElementById('panel-sections').classList.remove('hidden');
+
+  try {
+    const dashboard = await apiFetchClassDashboard(authGetToken(), _selectedTenant, pluralName);
+
+    pushHistory();
+    _dashboardData   = dashboard;
+    _dashboardRecord = null;
+    _activeLayoutIndex = 0;
+
+    syncDashboardTypeUI('class', '');
+    const sel = document.getElementById('type-select-compact');
+    if (sel.querySelector(`option[value="${pluralName}"]`)) sel.value = pluralName;
+
+    renderSectionTabs(dashboard.layouts ?? []);
+    renderSection(0);
+    updateBackButton();
+  } catch (err) {
+    document.getElementById('sections-container').innerHTML =
+      `<span style="color:var(--mrd-color-danger)">❌ ${escHtml(err.message)}</span>`;
+  }
+}
+
+async function handleNavigate(detail) {
+  const { href, label, navigate } = detail;
+  if (href) {
+    logEvent('mrdNavigate', { href, label });
+    await navigateToObjectDashboard(href);
+  } else if (navigate?.dataClass) {
+    logEvent('mrdNavigate', { dataClass: navigate.dataClass, navigationType: navigate.navigationType, label });
+    await navigateToClassDashboard(navigate.dataClass);
+  } else {
+    logEvent('mrdNavigate', detail);
+  }
+}
+
 /* =====================================================================
    FORM — LOAD & RENDER
    ===================================================================== */
@@ -438,37 +545,29 @@ function renderTable(columns, totalElements, pageSize, page0Rows, dataHref, defa
 async function loadRecord(row) {
   const selfHref = row?._links?.self?.href;
   if (!selfHref) { console.warn('[loadRecord] geen _links.self.href in rij', row); return; }
-
-  const sel = document.getElementById('type-select');
-  if (!sel.value) return;
+  if (!_selectedType) return;
 
   const formPanel = document.getElementById('panel-form');
   formPanel.classList.remove('hidden');
   formPanel.innerHTML = '<span class="spinner"></span> Record laden...';
-  document.getElementById('panel-table').classList.add('hidden');
   document.getElementById('panel-response').innerHTML = '';
 
   try {
-    // Fetch the record first so we can read _links.form.href for the exact layout URL
     const recordResp = await apiRequest('GET', selfHref, authGetToken());
     if (!recordResp.ok) throw new Error(`${recordResp.status}: kon record niet ophalen`);
 
     const formHref = recordResp.body?._links?.form?.href ?? null;
     const layout   = await apiFetchForm(authGetToken(), _selectedTenant, _selectedType.pluralName, formHref);
-    renderForm(layout, recordResp.body, selfHref);
+    await renderForm(layout, recordResp.body, selfHref);
   } catch (err) {
     formPanel.innerHTML = `<span style="color:var(--mrd-color-danger)">❌ ${escHtml(err.message)}</span>`;
   }
 }
 
 async function loadForm() {
-  const sel = document.getElementById('type-select');
-  const pluralName = sel.value;
+  const pluralName = _selectedType?.pluralName;
   if (!pluralName) return;
 
-  const opt = sel.options[sel.selectedIndex];
-  _selectedType = { name: opt.dataset.name || pluralName, pluralName };
-
   const formPanel = document.getElementById('panel-form');
   formPanel.classList.remove('hidden');
   formPanel.innerHTML = '<span class="spinner"></span> Formulier laden...';
@@ -476,7 +575,7 @@ async function loadForm() {
 
   try {
     const layout = await apiFetchForm(authGetToken(), _selectedTenant, pluralName);
-    renderForm(layout);
+    await renderForm(layout);
   } catch (err) {
     formPanel.innerHTML = `<span style="color:var(--mrd-color-danger)">❌ ${escHtml(err.message)}</span>`;
   }
@@ -489,21 +588,21 @@ async function loadForm() {
  * @param record   - existing record for edit mode (null = new record)
  * @param selfHref - absolute URL for PATCH; null = POST (new record)
  */
-function renderForm(layout, record = null, selfHref = null) {
+async function renderForm(layout, record = null, selfHref = null) {
   // Build relation metadata map keyed by both relatedClass and mostSignificantClass
   // so lookups work regardless of which value arrives in events (mrdSearch uses mostSignificantClass).
   _relationMeta = {};
   function collectRelations(items) {
     if (!Array.isArray(items)) return;
     items.forEach(item => {
-      if (item.type === 'RELATION' && item.relation) {
+      if (item.type === 'RELATION' && item.relatedClass) {
         const meta = {
-          name:                 item.relation.name,
-          mostSignificantClass: item.relation.mostSignificantClass,
+          name:                 item.name,
+          mostSignificantClass: item.mostSignificantClass,
         };
-        _relationMeta[item.relation.relatedClass] = meta;
-        if (item.relation.mostSignificantClass) {
-          _relationMeta[item.relation.mostSignificantClass] = meta;
+        _relationMeta[item.relatedClass] = meta;
+        if (item.mostSignificantClass) {
+          _relationMeta[item.mostSignificantClass] = meta;
         }
       }
       if (Array.isArray(item.items)) collectRelations(item.items);
@@ -532,14 +631,21 @@ function renderForm(layout, record = null, selfHref = null) {
   }
 
   const formPanel = document.getElementById('panel-form');
-  formPanel.innerHTML = `<mrd-form id="live-form" locale="${_locale}"></mrd-form>`;
+  formPanel.innerHTML = `<mrd-form id="live-form" locale="${escHtml(_locale)}"></mrd-form>`;
 
-  customElements.whenDefined('mrd-form').then(() => {
-    const form = document.getElementById('live-form');
-    form.layout = layout;
-    if (record) form.values = initialValues;
+  const form = document.getElementById('live-form');
+  // Wait for Stencil to fully initialize this specific instance before setting props.
+  // componentOnReady() resolves after componentDidLoad — more reliable than customElements.whenDefined.
+  if (typeof form.componentOnReady === 'function') {
+    await form.componentOnReady();
+  } else {
+    await customElements.whenDefined('mrd-form');
+  }
 
-    // Upload files immediately on selection; write binary URI back via setFieldValue
+  form.layout = layout;
+  if (record) form.values = initialValues;
+
+  // Upload files immediately on selection; write binary URI back via setFieldValue
     form.addEventListener('mrdChange', async (e) => {
       const { name, value } = e.detail;
       if (!(value instanceof File)) return;
@@ -645,7 +751,6 @@ function renderForm(layout, record = null, selfHref = null) {
         console.error('[mrdFetchAll] failed:', err);
       }
     });
-  });
 }
 
 /* =====================================================================
@@ -695,15 +800,13 @@ customElements.whenDefined('mrd-form').then(() => {
 
 document.getElementById('locale-select').addEventListener('change', (e) => {
   _locale = e.target.value;
-  // Update embedded demo form
   const demoForm = document.getElementById('demo-form');
   if (demoForm) demoForm.locale = _locale;
-  // Update live table if present
-  const liveTable = document.getElementById('live-table');
-  if (liveTable) liveTable.locale = _locale;
-  // Update live form if present
   const liveForm = document.getElementById('live-form');
   if (liveForm) liveForm.locale = _locale;
+  // Update actieve section als aanwezig
+  const section = document.querySelector('#sections-container mrd-layout-section');
+  if (section) section.locale = _locale;
 });
 
 document.getElementById('btn-inject-results').addEventListener('click', () => {