{/* Hero with photo */}

{/* ambient glyph */}

{/* back */}

Occupied

{/* title */}

{p.area} · {p.type}

{p.name}

{/* Your position card (floats over hero edge) */}

Your position

AED {fmt(p.current)}

{Icon.arrowUp(T.primary)} +AED {fmt(p.current - p.invested)} (+{gain}%)

Invested

AED {fmt(p.invested)}

{p.blocks} blocks · {p.acquired}

{/* Performance chart */}

Performance

Value over time

{['1M','3M','6M','1Y'].map(r => ( ))}

{/* Key stats */}

{/* Rental income history */}

Rental income

Last 3 payouts

View all {Icon.chevR('#9CA5A1')}

{p.rental3m.map((r, i) => (

{r.m.split(' ')[0].slice(0,3).toUpperCase()}

Rent payout

{r.m} · {r.tenant}

+AED {r.amt}

Paid

))} {/* next payout row */}

APR

Next payout

Apr 2026 · Scheduled in 12 days

AED {p.monthly}

{/* Action buttons · concept only in this prototype */}

); } function StatCard({ label, value, detail, T, emph }) { return (

{label}

{value}

{detail}

); } function PerformanceChart({ data, T }) { const W = 308, H = 140, pad = 8; const min = Math.min(...data) * 0.98; const max = Math.max(...data) * 1.02; const stepX = (W - pad * 2) / (data.length - 1); const points = data.map((v, i) => { const x = pad + i * stepX; const y = pad + (1 - (v - min) / (max - min)) * (H - pad * 2); return [x, y]; }); const pathD = points.map((pt, i) => (i === 0 ? 'M' : 'L') + pt[0].toFixed(1) + ' ' + pt[1].toFixed(1)).join(' '); const areaD = pathD + ` L${(W - pad).toFixed(1)} ${(H - pad).toFixed(1)} L${pad} ${(H - pad).toFixed(1)} Z`; const months = ['OCT','NOV','DEC','JAN','FEB','MAR']; const lastPt = points[points.length - 1]; return (

); } // ───────────────────────────────────────────── // Tab bar // ───────────────────────────────────────────── function TabBar({ T, active, onChange }) { const tabs = [ { id: 'portfolio', label: 'Portfolio', icon: Icon.home }, { id: 'explore', label: 'Explore', icon: Icon.explore }, { id: 'wallet', label: 'Wallet', icon: Icon.wallet }, { id: 'profile', label: 'Profile', icon: Icon.profile }, ]; return (

{tabs.map(t => { const isActive = active === t.id; const dead = t.id !== 'portfolio'; return ( ); })}

); } // ───────────────────────────────────────────── // Notification overlay // ───────────────────────────────────────────── function NotifBanner({ T, show, onClose, onInvest }) { return (

PRYPCO

now

Your Marina property earned AED 186 this month 🏠

A new property just listed at 10.8% yield. Invest now before it fills.

{/* In-banner listing preview */}

Palm Vista · Studio

Palm Jumeirah · 412 blocks available

10.8%

yield

); } // ───────────────────────────────────────────── // Tweaks panel // ───────────────────────────────────────────── function TweaksPanel({ T, visible, onChange, onClose, tweaks }) { if (!visible) return null; return (

Tweaks

Primary color

{[ ['#0F6E56', '#0A4A3A'], ['#134E4A', '#0B3331'], ['#0B3D2E', '#072A1F'], ['#1E5AA8', '#143E76'], ['#111111', '#000000'], ].map(([p, d]) => (

Background

{[ ['Warm', '#FBFBF9'], ['Cool', '#F6F8F7'], ['Pure', '#FFFFFF'], ['Sand', '#F6F3EC'], ].map(([label, bg]) => ( ))}

); } function hexToAccent(hex) { // super-simple tinted accent const map = { '#0F6E56': '#E8F3EF', '#134E4A': '#E4EFED', '#0B3D2E': '#E3EBE7', '#1E5AA8': '#E6ECF5', '#111111': '#F1F1F0', }; return map[hex] || '#E8F3EF'; } // ───────────────────────────────────────────── // App // ───────────────────────────────────────────── function App() { const [tweaks, setTweaks] = useState(PRYPCO_DEFAULTS); const [tweaksVisible, setTweaksVisible] = useState(false); const [screen, setScreen] = useState('portfolio'); // portfolio | detail const [propertyId, setPropertyId] = useState('marina'); const [activeTab, setActiveTab] = useState('portfolio'); const [notif, setNotif] = useState(false); const T = tweaks; const currentProperty = PROPERTIES.find(p => p.id === propertyId); // edit-mode protocol useEffect(() => { const handler = (e) => { const d = e.data || {}; if (d.type === '__activate_edit_mode') setTweaksVisible(true); if (d.type === '__deactivate_edit_mode') setTweaksVisible(false); }; window.addEventListener('message', handler); window.parent.postMessage({ type: '__edit_mode_available' }, '*'); return () => window.removeEventListener('message', handler); }, []); // Do NOT auto-open the notification · user triggers via bell icon // (still surfaced prominently: bell has a red dot badge) const changeTweaks = (patch) => { const next = { ...tweaks, ...patch }; setTweaks(next); window.parent.postMessage({ type: '__edit_mode_set_keys', edits: patch }, '*'); }; const openDetail = (id) => { setPropertyId(id); setScreen('detail'); }; const onInvestFromNotif = () => { setNotif(false); // Navigate to Marina detail setPropertyId('marina'); setScreen('detail'); }; return (

{/* Screen stack */}

setNotif(true)}/>

setScreen('portfolio')}/>

{/* Tab bar · only Portfolio is wired in this prototype */} { if (id !== 'portfolio') return; setActiveTab(id); setScreen('portfolio'); }}/> {/* Notification */} setNotif(false)} onInvest={onInvestFromNotif}/> {/* Floating notif replay button (subtle) */} {!notif && (

); } window.PrypcoApp = App;