// ============================================================ // Alumnus partner portal — mobile-first responsive web // Screens 2.1 → 2.8 (Maria Reyes, mother of Anna) // ============================================================ const { Icon: PI, Crest: PC, Avatar: PA, Button: PB, Eyebrow: PE, Pill: PP, Sparkline: PSp, MEMBER: MM, PARTNER: PP_USER, SPONSOR: PS } = window.AL; // ───────────────────────────────────────────────────────────── // Shared partner-portal chrome: top bar + side rail (web app) // ───────────────────────────────────────────────────────────── const PartnerShell = ({ children, active = 'overview', alertOpen = false }) => { const nav = [ { k: 'overview', i: 'house-line', l: 'Overview' }, { k: 'timeline', i: 'list-bullets', l: 'Timeline' }, { k: 'alerts', i: 'bell-simple', l: 'Alerts', badge: alertOpen ? 1 : 0 }, { k: 'message', i: 'chat-circle', l: 'Message' }, { k: 'learn', i: 'book-open', l: 'Learn' }, { k: 'profile', i: 'user', l: 'You' }, ]; return (
{/* top bar */}
Alumnus Network · Maria
{/* content */}
{children}
{/* bottom nav (mobile-first) */}
{nav.map(n => { const on = n.k === active; return (
{n.l} {n.badge > 0 && ( )}
); })}
); }; // ───────────────────────────────────────────────────────────── // 2.1 Partner Onboarding / Pairing // ───────────────────────────────────────────────────────────── const P_Onboard = () => (
An invitation

Anna asked you to be in her network.

You're being trusted to look out for one of Pine Tree Recovery's graduates. Here is what you will and won't see.

{[ { ok: true, l: 'Anna\'s overall rhythm', d: 'How her week is tracking — steady, mixed, or off.' }, { ok: true, l: 'Meeting attendance', d: 'When she gets to her meetings. Not what is said in them.' }, { ok: true, l: 'Clear, calm alerts', d: 'A note when a pattern is worth a conversation. Never an alarm.' }, { ok: false, l: 'Messages, browsing, or location history', d: "You will never see contents. Only patterns." }, { ok: false, l: 'A risk score number', d: 'We don\'t show you numbers. We use plain English.' }, ].map((r, i, arr) => (
{r.l}
{r.d}
))}
By accepting you agree to the partner compact. Anna can remove you at any time.
Accept · I'll look out for Anna Not the right time
); // ───────────────────────────────────────────────────────────── // 2.2 Member Overview (Partner Home) // ───────────────────────────────────────────────────────────── const P_Overview = ({ alertOpen = false }) => (
{/* Member identity */}
Anna
Class of 2026 · day {alertOpen ? 45 : 30}
{/* Status hero */}
{alertOpen ? 'A pattern worth a conversation' : 'Where she is'}
{alertOpen ? "Anna's rhythm shifted this week. Sleep is later, two meetings missed. Nothing has happened. She knows you are seeing this." : "Anna is doing steady this week. Sleep is back on rhythm, meetings full, check-ins on time."}
{alertOpen && (
See what we noticed Call Anna
)}
{/* This week summary */}
{[ { n: alertOpen ? '4' : '6', d: 'of 6', l: 'Meetings' }, { n: alertOpen ? '5' : '7', d: 'of 7', l: 'Check-ins' }, { n: alertOpen ? '4' : '7', d: 'nights', l: 'Steady sleep' }, ].map((s, i) => (
{s.n} {s.d}
{s.l}
))}
What you can do
{[ { i: 'chat-circle', l: 'Send Anna a note', d: 'A short message. Suggested phrases ready.' }, { i: 'phone', l: 'Call her', d: 'She usually answers in the evening.' }, { i: 'list-bullets',l: 'See her full timeline', d: 'The last 30 days, in plain language.' }, ].map((a, i) => (
{a.l}
{a.d}
))}
Updated 12 minutes ago · You see patterns, never contents.
); // ───────────────────────────────────────────────────────────── // 2.3 Activity Timeline // ───────────────────────────────────────────────────────────── const P_Timeline = () => { const days = [ { d: 'Wednesday', date: 'May 14', items: [ { i: 'moon-stars', l: 'Sleep started later than usual — 1:40 am.', tone: 'brass' }, { i: 'calendar-x', l: "Did not attend St. Margaret's evening group.", tone: 'brass' }, { i: 'notebook', l: 'Did her morning check-in.', tone: 'moss' }, ]}, { d: 'Tuesday', date: 'May 13', items: [ { i: 'check-circle',l: 'Attended Pine Tree IOP.', tone: 'moss' }, { i: 'chat-circle', l: 'Reached out to Beth — short call.', tone: 'moss' }, { i: 'notebook', l: 'Check-in: "mixed".', tone: 'oat' }, ]}, { d: 'Monday', date: 'May 12', items: [ { i: 'check-circle',l: 'Attended Pine Tree IOP.', tone: 'moss' }, { i: 'moon-stars', l: 'Steady sleep — 7h 20m.', tone: 'moss' }, { i: 'notebook', l: 'Check-in: "light".', tone: 'moss' }, ]}, { d: 'Sunday', date: 'May 11', items: [ { i: 'check-circle',l: 'Attended Sunday women.', tone: 'moss' }, { i: 'notebook', l: 'Check-in: "light".', tone: 'moss' }, ]}, ]; const tones = { moss: { bg: 'rgba(79,106,74,0.14)', fg: 'var(--color-moss)' }, brass:{ bg: 'rgba(168,132,60,0.16)', fg: 'var(--color-brass-dark)' }, oat: { bg: 'var(--color-oat)', fg: 'var(--fg-secondary)' }, }; return (
Timeline · Anna

What we've seen this week.

{['Week', 'Month', 'All'].map((t, i) => (
{t}
))}
{days.map((day, di) => (
{day.d} {day.date}
{day.items.map((it, ii) => { const t = tones[it.tone]; return (
{it.l}
); })}
))}
Sensitive details are never shown. You see what Anna's network needs to see — nothing more.
); }; // ───────────────────────────────────────────────────────────── // 2.4 Alert Detail (the "community noticing" moment) // ───────────────────────────────────────────────────────────── const P_Alert = () => (
A pattern from Anna · this week

Worth a conversation, not an emergency.

Anna's rhythm has shifted since Tuesday. Sleep is later, two meetings have been missed, and her morning check-in tone dropped from light to mixed for three days running. Nothing has happened. She knows you are seeing this.

{/* Tiny chart */}
Sleep start · last 7 nights 10p — 2a
{[10, 18, 14, 22, 16, 44, 48].map((y, i) => ( 38 ? '#A8843C' : '#1E3A2E'}/> ))}
{['Thu','Fri','Sat','Sun','Mon','Tue','Wed'].map((d,i) => = 5 ? 'var(--color-brass-dark)' : undefined, fontWeight: i >= 5 ? 600 : 400 }}>{d})}
Recommended next step · written by Dr. Singh
"Call Anna tonight. Don't ask about the missed meetings — ask about her week. Mention nothing from this app. She knows."
Call Anna Text Anna
Beth (sponsor) has also been notified. Dr. Singh's team is monitoring.
Mark as handled with a note Escalate to Pine Tree's team
); // ───────────────────────────────────────────────────────────── // 2.5 Alert History // ───────────────────────────────────────────────────────────── const P_AlertHistory = () => { const alerts = [ { d: 'May 14', l: 'Rhythm shift — sleep later, meetings missed', status: 'open', by: 'Open · you and Beth notified' }, { d: 'Apr 29', l: 'Two consecutive late nights', status: 'resolved', by: 'You called Anna · resolved' }, { d: 'Apr 19', l: 'Single missed meeting', status: 'resolved', by: 'Auto-cleared · next meeting attended' }, { d: 'Apr 11', l: 'Check-in tone dropped two days', status: 'resolved', by: 'Beth visited · resolved' }, { d: 'Apr 04', l: 'Welcome alert · class graduation', status: 'info', by: 'For your records' }, ]; const tones = { open: { tone: 'ember', label: 'Open' }, resolved: { tone: 'moss', label: 'Resolved' }, info: { tone: 'oat', label: 'Info' }, }; return (
Alert history · Anna

Five notes in six weeks.

{alerts.map((a, i) => { const t = tones[a.status]; return (
{a.d}
{a.l}
{a.by}
{t.label}
); })}
A typical month for a steady member is one to three notes. This is on rhythm.
); }; // ───────────────────────────────────────────────────────────── // 2.6 Send Encouragement / Message // ───────────────────────────────────────────────────────────── const P_Message = () => { const suggestions = [ "Thinking of you tonight.", "Proud of how steady you've been.", "If you need a ride to St. Margaret's, say the word.", "Mama loves you.", ]; const thread = [ { who: 'them', t: '11:42 am', text: "Thinking of you tonight. Coming home Friday — your dad picked up tomatoes for the sauce." }, { who: 'anna', t: '12:08 pm', text: "Love you. I'm at IOP at six. Will call after." }, { who: 'them', t: '12:09 pm', text: "Take your time." }, ]; return (
To Anna

A short note goes a long way.

{/* Thread */}
{thread.map((m, i) => (
{m.text}
{m.t}
))}
Try one of these
{suggestions.map((s, i) => (
"{s}"
))}
Thinking of you tonight.|
Send
); }; // ───────────────────────────────────────────────────────────── // 2.7 Resources for Partners // ───────────────────────────────────────────────────────────── const P_Resources = () => { const articles = [ { tag: 'Conversations', title: 'What to say when a meeting was missed.', mins: '4 min read', src: 'Hazelden Betty Ford library' }, { tag: 'For mothers', title: 'Holding the line without holding the leash.', mins: '6 min read', src: 'Pine Tree alumni writing' }, { tag: 'Warning signs', title: 'The early shifts: sleep, isolation, and tone.', mins: '5 min read', src: 'NIDA digest' }, { tag: 'When to call', title: "If the rhythm doesn't return in a week.", mins: '3 min read', src: 'Pine Tree clinical' }, { tag: 'Self-care', title: 'You can love them and still rest.', mins: '7 min read', src: 'Al-Anon perspectives' }, ]; return (
For partners

Reading for the long road.

Short pieces written for family, sponsors, and partners. Curated by Pine Tree's alumni team.

{articles.map((a, i) => (
A
{a.tag}
{a.title}
{a.mins} · {a.src}
))}
); }; // ───────────────────────────────────────────────────────────── // 2.8 Partner Profile and Settings // ───────────────────────────────────────────────────────────── const P_PartnerProfile = () => { const rows = [ { i: 'bell', l: 'Push notifications', v: 'On · alerts and milestones' }, { i: 'envelope', l: 'Email digests', v: 'Sundays' }, { i: 'chat-circle', l: 'SMS', v: 'Only for serious alerts' }, { i: 'moon', l: 'Quiet hours', v: '10 pm – 7 am' }, { i: 'users-three', l: 'Members paired with you', v: 'Anna Reyes' }, { i: 'shield-check', l: 'Partner compact', v: 'Signed Apr 5' }, { i: 'sign-out', l: 'Sign out', v: null, danger: true }, ]; return (
Maria Reyes
Mother · in Anna's network since Apr 5
Settings
{rows.map((r, i) => (
{r.l}
{r.v &&
{r.v}
}
{!r.danger && }
))}
A membership of Pine Tree Recovery
); }; window.Partner = { P_Onboard, P_Overview, P_Timeline, P_Alert, P_AlertHistory, P_Message, P_Resources, P_PartnerProfile };