// app/vault.jsx — Document Vault on the deal page. Stores OMs, T-12s, Rent Rolls and // any other deal documents in Supabase Storage (bucket "deal-docs"); metadata lives on // deal.documents (jsonb, synced with the deal). Click a doc → right-side drawer viewer // (PDF inline) with fullscreen + download. Drag-and-drop accepted any time. const { useState: useSV, useEffect: useEffectV, useRef: useRefV } = React; const DOC_CATS = ['OM', 'T-12', 'Rent Roll', 'Other']; const CAT_COLOR = { 'OM': '#2f6df0', 'T-12': '#6b46e0', 'Rent Roll': '#0c7a43', 'Other': '#5b7088' }; function fmtBytes(n) { if (n == null) return ''; if (n < 1024) return n + ' B'; if (n < 1048576) return (n / 1024).toFixed(0) + ' KB'; return (n / 1048576).toFixed(1) + ' MB'; } function docIcon(ext) { const e = (ext || '').toLowerCase(); if (e === 'pdf') return 'doc'; if (['xlsx', 'xls', 'xlsm', 'csv'].includes(e)) return 'chart'; if (['png', 'jpg', 'jpeg', 'gif', 'webp'].includes(e)) return 'search'; return 'doc'; } const isPdf = (d) => (d.ext || '').toLowerCase() === 'pdf' || (d.type || '').includes('pdf'); const isImg = (d) => ['png', 'jpg', 'jpeg', 'gif', 'webp'].includes((d.ext || '').toLowerCase()); const isXls = (d) => ['xlsx','xls','xlsm','csv'].includes((d.ext || '').toLowerCase()); /* ---- Viewer drawer (half-window pop-out) ---- */ function DocViewer({ doc, onClose }) { const [url, setUrl] = useSV(null); const [err, setErr] = useSV(null); const [full, setFull] = useSV(false); const [excelSrc, setExcelSrc] = useSV(null); const cloud = window.AltusCloud; useEffectV(() => { let active = true; setUrl(null); setErr(null); if (!doc) return; if (!cloud || !cloud.signedDocUrl) { setErr('Cloud storage is not connected.'); return; } cloud.signedDocUrl(doc.path, 3600).then((u) => { if (active) setUrl(u); }).catch((e) => { if (active) setErr(String(e.message || e)); }); return () => { active = false; }; }, [doc && doc.path]); // Excel preview: once we have the signed URL, fetch + render via XLSX useEffectV(() => { if (!doc || !isXls(doc) || !url) { setExcelSrc(null); return; } let active = true; (async () => { try { if (!window.XLSX) return; const buf = await (await fetch(url)).arrayBuffer(); const wb = window.XLSX.read(new Uint8Array(buf), { type: 'array' }); const html = window.XLSX.utils.sheet_to_html(wb.Sheets[wb.SheetNames[0]], { id: 'xlp' }); const srcdoc = `${html}`; if (active) setExcelSrc(srcdoc); } catch(e) { /* fall through to download prompt */ } })(); return () => { active = false; }; }, [url]); useEffectV(() => { const onEsc = (e) => { if (e.key === 'Escape') { if (full) setFull(false); else onClose(); } }; window.addEventListener('keydown', onEsc); return () => window.removeEventListener('keydown', onEsc); }, [full]); const download = async () => { if (!url) return; try { const r = await fetch(url); const blob = await r.blob(); const a = document.createElement('a'); a.href = URL.createObjectURL(blob); a.download = doc.name; document.body.appendChild(a); a.click(); a.remove(); setTimeout(() => URL.revokeObjectURL(a.href), 4000); } catch (e) { window.open(url, '_blank'); } }; if (!doc) return null; const width = full ? '100vw' : 'min(52vw, 760px)'; const cat = doc.category || 'Other'; return ( <>
{/* header */}
{doc.name}
{cat} · {fmtBytes(doc.size)}
{/* body */}
{err ? : !url ? : isPdf(doc) ?