/* ════════════════════════════════════════════════════════════════════════════
dashboards-native-sections.jsx
Native React replacements for the iframe sections in /dashboards/admin and
/dashboards/host. Each section:
• Uses the same API endpoints the operational pages call
• Renders with the new design language (Panel, Display, Sans, CC tokens)
• Has loading + error + empty states
• Falls back to demo data from D.* when not authed (so the preview is
browseable end-to-end without login)
Goal: when every section is wired native, the operational dashboards
/admin + /host can be retired and these previews become the production
dashboards. Until then, sections that aren't yet ported stay as iframe
embeds with a "PORTING" badge.
════════════════════════════════════════════════════════════════════════════
*/
const D = window.TLB_DASH_DATA;
const { useState, useEffect, useMemo, useRef } = React;
// ── Helper — resolve legacy tlb_token only if the stored session role
// matches the requested tokenType. Backward-compat for users who logged
// in BEFORE the v82 saveSession update populated tlb_admin_token /
// tlb_host_token. Reads tlb_session JSON to check the role marker.
function _resolveLegacyTokenIfRole(wantRole) {
try {
const raw = localStorage.getItem('tlb_session') || localStorage.getItem('tlb_user');
if (raw) {
const sess = JSON.parse(raw);
const sessRole = sess && sess.role;
if (sessRole === wantRole) {
return localStorage.getItem('tlb_token') || '';
}
// Role mismatch — DON'T use the legacy token. Sending a host token
// to admin endpoints would always 403 anyway, so silent skip is fine.
return '';
}
// No session marker — single legacy token, treat as host (most common).
if (wantRole === 'host') return localStorage.getItem('tlb_token') || '';
return '';
} catch { return ''; }
}
// ── 0 · Generic data hook ───────────────────────────────────────────────
// Fetches once on mount, exposes { data, loading, error, refetch }. Token
// type defaults to admin; pass 'host' for /api/bookings + /api/reviews.
function useApi(url, { tokenType = null } = {}, deps = []) {
const [state, setState] = useState({ data: null, loading: true, error: null });
function refetch() {
setState(s => ({ ...s, loading: true, error: null }));
// Round-15 fix — strict role-based token resolution. The new dashboards
// route admin sections to /api/admin* and host sections to /api/properties
// etc. We MUST NOT mix tokens — sending a host token to an admin endpoint
// wastes a server roundtrip + leaks 403s into the UI; sending an admin
// token to a host endpoint succeeds but shows the WRONG host's data.
//
// Resolution order (strict, no cross-fallback):
// tokenType='admin' → tlb_admin_token only (then generic fallback)
// tokenType='host' → tlb_host_token only (then generic fallback)
// The generic tlb_token fallback remains because legacy login flows
// populated only that key. After v82 saveSession update, NEW logins
// populate the role-specific key in addition to the generic one.
let token = '';
try {
if (tokenType === 'admin') {
token = localStorage.getItem('tlb_admin_token')
|| _resolveLegacyTokenIfRole('admin')
|| '';
} else if (tokenType === 'host') {
token = localStorage.getItem('tlb_host_token')
|| _resolveLegacyTokenIfRole('host')
|| '';
} else {
// No tokenType passed (rare) — anonymous request.
token = '';
}
} catch {}
const headers = token ? { 'Authorization': 'Bearer ' + token } : {};
fetch(url, { headers })
.then(r => {
if (r.status === 401) throw new Error('Sign in required to view live data.');
if (!r.ok) throw new Error('Request failed (' + r.status + ').');
return r.json();
})
.then(data => setState({ data, loading: false, error: null }))
.catch(err => setState({ data: null, loading: false, error: err.message || 'Failed to load' }));
}
useEffect(refetch, deps); // eslint-disable-line
return { ...state, refetch };
}
// ── 1 · Shared atoms ────────────────────────────────────────────────────
function SectionHeader({ title, subtitle, actions, badge }) {
return (
{/* v141.163 re-skin Stage 2 — calm upright Playfair section
title per the delivered redesign (was full-italic + period). */}
{title}
{badge}
{refundType === 'full' && preview.refund_percent < 100 && (
Override grants the guest a full refund of {fmtMoney(preview.amount_paid, preview.currency)}, beyond what the policy requires. Use only for goodwill / TLB-side error.
)}