// ───────────────────────────────────────────── // DEV_AppDetail.jsx — App detail with tabs // Tabs: App | Database | Design | Users | Security | Logs | API // ───────────────────────────────────────────── const TABS = [ { id:'app', label:'App' }, { id:'database', label:'Database' }, { id:'design', label:'Design' }, { id:'users', label:'Users' }, { id:'security', label:'Security' }, { id:'logs', label:'Logs' }, { id:'api', label:'API' }, ]; const REGIONS = [ { value:'east', label:'US East', flag:'🇺🇸' }, { value:'west', label:'US West', flag:'🇺🇸' }, { value:'eu', label:'Europe', flag:'🇪🇺' }, { value:'uk', label:'UK', flag:'🇬🇧' }, { value:'au', label:'Australia', flag:'🇦🇺' }, { value:'jp', label:'Japan', flag:'🇯🇵' }, ]; function formatDate(d) { if (!d) return '—'; try { return new Date(d).toLocaleDateString('en-US', { year:'numeric', month:'short', day:'numeric', hour:'2-digit', minute:'2-digit' }); } catch(e) { return d; } } function formatDateShort(d) { if (!d) return '—'; const diff = Date.now() - new Date(d).getTime(); const m = Math.floor(diff / 60000); if (m < 1) return 'just now'; if (m < 60) return `${m}m ago`; const h = Math.floor(m / 60); if (h < 24) return `${h}h ago`; const dy = Math.floor(h / 24); if (dy < 7) return `${dy}d ago`; return new Date(d).toLocaleDateString('en-US', { month:'short', day:'numeric' }); } function fmtStorage(bytes) { if (!bytes) return '0 B'; if (bytes < 1024) return bytes + ' B'; if (bytes < 1024*1024) return (bytes/1024).toFixed(1) + ' KB'; if (bytes < 1024*1024*1024) return (bytes/1024/1024).toFixed(1) + ' MB'; return (bytes/1024/1024/1024).toFixed(2) + ' GB'; } // ── App Stats — pulls live data from /v6/dev/stats ── function AppStats({ app }) { const [stats, setStats] = React.useState(null); const [loading, setLoading] = React.useState(true); React.useEffect(() => { apiFetch(`${API_BASE}/v6/dev/stats?app=${app.app_id}`) .then(r => r.json()) .then(data => { if (data.status === 'ok') setStats(data.stats); }) .catch(() => {}) .finally(() => setLoading(false)); }, [app.app_id]); const val = (v) => loading ? '…' : (v == null ? '—' : Number(v).toLocaleString()); return ( <> {[ { label:'Tables', v: val(stats?.tables) }, { label:'Records', v: val(stats?.records) }, { label:'Active Users', v: val(stats?.users) }, { label:'Files', v: val(stats?.files) }, { label:'Storage Used', v: loading ? '…' : fmtStorage(stats?.storage) }, { label:'Last Activity', v: loading ? '…' : formatDateShort(stats?.last_activity) }, ].map(row => (
{row.label}
{row.v}
))} ); } // ── Recent Activity — last 10 login events ── function RecentActivity({ app, onViewAll }) { const [logs, setLogs] = React.useState([]); const [loading, setLoading] = React.useState(true); React.useEffect(() => { apiFetch(`${API_BASE}/v6/dev/logs?app=${app.app_id}&limit=10&type=access`) .then(r => r.json()) .then(data => { if (data.status === 'ok') setLogs(data.logs || []); }) .catch(() => {}) .finally(() => setLoading(false)); }, [app.app_id]); if (loading) return
Loading…
; if (!logs.length) return
No activity yet.
; return (
{logs.map(log => { let d = {}; try { d = JSON.parse(log.log_data || '{}'); } catch(e) {} return (
{formatDateShort(log.log_date_insert)}
{d.email || log.log_user || '—'}
{d.location || d.ip || log.log_ip || ''}
); })}
); } // ── Placeholder tab ────────────────────────── function ComingSoon({ label }) { return (
⚙
{label}
Coming soon
); } // ── Custom Domain modal ────────────────────── // First of the "DO Add-On" modals. Pattern to reuse for paid add-ons // (API Access, AI Indexing, Remote Backup, more users/storage): explain the // add-on, show setup steps, then a confirm/agree action that will eventually // create a billing item + kick off Stripe. For now the action is "coming soon". function CustomDomainModal({ appId, cnameTarget, onClose }) { const [copied, setCopied] = React.useState(false); function copyTarget() { try { navigator.clipboard.writeText(cnameTarget); setCopied(true); setTimeout(() => setCopied(false), 2000); } catch(e) {} } return (
e.stopPropagation()}>
🧭 Custom Domain

Point your own domain at this app — e.g. app.yourcompany.com{' '} instead of the default DataObjects End Point URL.

Setup
  1. Go to your DNS provider for the domain you want to use.
  2. Add a CNAME record pointing your chosen hostname to:
    {cnameTarget}
  3. Save the record and allow time for DNS to propagate (usually minutes, up to 24h).
Coming soon. Custom domains will be available as an add-on. We'll show pricing and confirmation here before any charges apply.
); } // ── App tab ─────────────────────────────────── function AppTab({ app, jwt, onAppUpdate, onSwitchTab }) { const [name, setName] = React.useState(app.app_name || ''); const [desc, setDesc] = React.useState(app.app_desc || ''); const [active, setActive] = React.useState(app.app_status == 1); const [saving, setSaving] = React.useState(false); const [saved, setSaved] = React.useState(false); const [error, setError] = React.useState(null); const [showDomainModal, setShowDomainModal] = React.useState(false); const region = REGIONS.find(r => r.value === app.app_data); const endpoint = `https://app.dataobjects.com/${app.app_id}`; const CNAME_TARGET = 'do-app.pages.dev'; async function handleSave(e) { e.preventDefault(); setSaving(true); setSaved(false); setError(null); try { const res = await apiFetch(`${API_BASE}/v6/dev/apps/${app.app_id}`, { method: 'POST', body: JSON.stringify({ name: name.trim(), desc: desc.trim(), status: active ? 1 : 0 }), }); const data = await res.json(); if (data.status !== 'ok') throw new Error(data.message); setSaved(true); onAppUpdate({ ...app, app_name: name.trim(), app_desc: desc.trim(), app_status: active ? 1 : 0 }); setTimeout(() => setSaved(false), 3000); } catch(err) { setError(err.message); } setSaving(false); } return (
{/* App Info */}
App Info
{error &&
{error}
}
{/* ── Active / Inactive toggle (moved to top) ── */}
App Status
Inactive apps show a maintenance notice to users
setActive(v => !v)}>
{active ? 'Active' : 'Inactive'}
setName(e.target.value)} required />