// Elder/pastor logged-in views: dashboard, vouch inbox, members under care,
// looped-in conversation, reports, notifications.

const ElderShell = ({ tweaks, navigate, active, children }) => {
  const { Nav, Footer } = window;
  return (
    <div>
      <Nav tweaks={tweaks} navigate={navigate} active={active} />
      <main style={{ minHeight: 'calc(100vh - 220px)' }}>{children}</main>
      <Footer tweaks={tweaks} navigate={navigate} />
    </div>
  );
};

const ElderHeader = ({ eyebrow, title, sub, right }) => (
  <div style={{ borderBottom: '1px solid var(--line)' }}>
    <div style={{ maxWidth: 1240, margin: '0 auto', padding: '56px 56px 40px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 32, flexWrap: 'wrap' }}>
      <div style={{ maxWidth: 720 }}>
        {eyebrow && <div className="mono" style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--taupe)', marginBottom: 14 }}>{eyebrow}</div>}
        <h1 className="serif" style={{ fontSize: 52, fontWeight: 500, lineHeight: 1.05, margin: 0, letterSpacing: '-0.01em', textWrap: 'balance' }}>{title}</h1>
        {sub && <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--ink-2)', marginTop: 16, marginBottom: 0, textWrap: 'pretty' }}>{sub}</p>}
      </div>
      {right}
    </div>
  </div>
);

// Mock church-member roster
const CHURCH_MEMBERS = [
  { id: 1, name: "Hannah K.", age: 26, status: 'active', joined: 'Mar 2026', interactions: 4, mutual: 1, notes: '' },
  { id: 7, name: "Ruth M.", age: 24, status: 'active', joined: 'Jan 2026', interactions: 7, mutual: 0, notes: '' },
  { id: 8, name: "Joel V.", age: 30, status: 'paused', joined: 'Nov 2025', interactions: 12, mutual: 2, notes: 'In a courtship with a member; paused 2 weeks ago.' },
  { id: 9, name: "Naomi P.", age: 28, status: 'pending', joined: '—', interactions: 0, mutual: 0, notes: 'Commendation awaiting your reply.' },
  { id: 10, name: "Eli S.", age: 27, status: 'active', joined: 'Feb 2026', interactions: 2, mutual: 0, notes: '' },
  { id: 11, name: "Phoebe G.", age: 25, status: 'married', joined: 'Sep 2025', interactions: 14, mutual: 1, notes: 'Married Oct 2026 — to a member from Christ Covenant, Matthews NC. Officiated by Rev. Carrick.' },
];

const STATUS_TONES = {
  active: { fg: 'var(--navy)', bg: 'var(--paper)', label: 'Active' },
  paused: { fg: 'var(--taupe)', bg: 'var(--paper)', label: 'Paused' },
  pending: { fg: '#7a2727', bg: 'var(--paper)', label: 'Commendation pending' },
  married: { fg: 'var(--ink)', bg: 'var(--bg-2)', label: 'Married ✓' },
};

// ─── ELDER HOME — Full church report ───────────────────────────────────
const ElderHome = ({ tweaks, navigate }) => {
  const { Btn } = window;
  const stats = [
    { label: 'Members you have commended', value: '6', note: '5 active · 1 paused' },
    { label: 'Pending commendations', value: '1', note: 'Naomi P. — sent 2 days ago' },
    { label: 'Active conversations', value: '12', note: 'Across all members' },
    { label: 'Marriages, all-time', value: '1', note: 'Phoebe G. → Christ Covenant, Matthews' },
  ];

  return (
    <ElderShell tweaks={tweaks} navigate={navigate} active="elder-home">
      <ElderHeader
        eyebrow="Second Presbyterian · Greenville, SC"
        title="Your church on the network."
        sub="A standing record of the members you have commended, and what has come of it."
        right={<Btn kind="secondary" onClick={() => navigate('elder-reports')}>Download church report (PDF)</Btn>}
      />

      {/* Stats */}
      <section style={{ background: 'var(--paper)', borderBottom: '1px solid var(--line)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: '40px 56px', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
          {stats.map((s, i) => (
            <div key={s.label} style={{ padding: '8px 32px', borderLeft: i > 0 ? '1px solid var(--line)' : 'none' }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 8 }}>{s.label}</div>
              <div className="serif" style={{ fontSize: 38, fontWeight: 500, color: 'var(--ink)', lineHeight: 1 }}>{s.value}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 8, lineHeight: 1.4 }}>{s.note}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Pending vouch alert */}
      <section style={{ background: 'var(--bg)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: '40px 56px 0' }}>
          <div style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderLeft: '4px solid #7a2727', padding: '20px 28px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
            <div>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#7a2727', marginBottom: 6 }}>1 commendation request awaiting</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 18, color: 'var(--ink)' }}>
                <strong>Naomi P.</strong> has asked you to commend her. Sent 2 days ago.
              </div>
            </div>
            <Btn kind="primary" size="sm" onClick={() => navigate('elder-vouch-inbox')}>Open the form →</Btn>
          </div>
        </div>
      </section>

      {/* Members table */}
      <section style={{ background: 'var(--bg)' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', padding: '40px 56px 96px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 20 }}>
            <h2 className="serif" style={{ fontSize: 28, fontWeight: 500, margin: 0 }}>Members under your care</h2>
            <Btn kind="ghost" size="sm" onClick={() => navigate('elder-members')}>See all →</Btn>
          </div>
          <div style={{ background: 'var(--paper)', border: '1px solid var(--line)' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 2fr 1fr', padding: '14px 24px', borderBottom: '1px solid var(--line)', background: 'var(--bg-2)', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>
              <div>Member</div><div>Status</div><div>Joined</div><div>Activity</div><div></div>
            </div>
            {CHURCH_MEMBERS.map((m, i) => {
              const tone = STATUS_TONES[m.status];
              return (
                <div key={m.id} style={{
                  display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 2fr 1fr', padding: '18px 24px',
                  borderTop: i === 0 ? 'none' : '1px solid var(--line)', alignItems: 'center', gap: 12
                }}>
                  <div>
                    <div className="serif" style={{ fontSize: 17, fontWeight: 500 }}>{m.name}, {m.age}</div>
                    {m.notes && <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 4, fontStyle: 'italic' }}>{m.notes}</div>}
                  </div>
                  <div>
                    <span style={{
                      display: 'inline-block', padding: '3px 10px', fontSize: 11, fontFamily: 'var(--mono)',
                      letterSpacing: '0.08em', textTransform: 'uppercase',
                      color: tone.fg, background: tone.bg, border: `1px solid ${tone.fg}`
                    }}>{tone.label}</span>
                  </div>
                  <div style={{ fontSize: 13, color: 'var(--ink-3)', fontFamily: 'var(--mono)' }}>{m.joined}</div>
                  <div style={{ fontSize: 13, color: 'var(--ink-2)' }}>
                    {m.interactions} conversations · <strong>{m.mutual} mutual</strong>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <Btn kind="ghost" size="sm" onClick={() => navigate('elder-member-detail', m.id)}>View →</Btn>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>
    </ElderShell>
  );
};

// ─── VOUCH INBOX ───────────────────────────────────────────────────────
const ElderVouchInbox = ({ tweaks, navigate }) => {
  const { Btn, Portrait } = window;
  const pending = [
    { id: 9, name: "Naomi P.", age: 28, sent: '2 days ago', img: 5 }
  ];
  const completed = [
    { id: 1, name: "Hannah K.", age: 26, sent: 'Mar 1, 2026', img: 1 },
    { id: 7, name: "Ruth M.", age: 24, sent: 'Jan 12, 2026', img: 3 },
    { id: 8, name: "Joel V.", age: 30, sent: 'Nov 4, 2025', img: 4 },
  ];

  return (
    <ElderShell tweaks={tweaks} navigate={navigate} active="elder-vouch-inbox">
      <ElderHeader title="Commendations." sub="Members of Second Presbyterian who have asked you to commend them. Each takes about five minutes." />
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '40px 56px 96px' }}>
        <h2 className="serif" style={{ fontSize: 22, fontWeight: 500, marginTop: 0, marginBottom: 16 }}>Awaiting your reply</h2>
        {pending.map(p => (
          <div key={p.id} style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderLeft: '4px solid #7a2727', padding: '20px 28px', marginBottom: 14, display: 'grid', gridTemplateColumns: '64px 1fr auto', gap: 24, alignItems: 'center' }}>
            <div style={{ width: 64, height: 64 }}><Portrait seed={p.img} size={64} name={p.name} /></div>
            <div>
              <div className="serif" style={{ fontSize: 20, fontWeight: 500 }}>{p.name}, {p.age}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 4 }}>Commendation requested {p.sent}. Takes about five minutes.</div>
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <Btn kind="primary" size="sm" onClick={() => navigate('vouch')}>Open form</Btn>
              <Btn kind="ghost" size="sm">Decline kindly</Btn>
            </div>
          </div>
        ))}

        <h2 className="serif" style={{ fontSize: 22, fontWeight: 500, marginTop: 56, marginBottom: 16 }}>Completed</h2>
        <div style={{ background: 'var(--paper)', border: '1px solid var(--line)' }}>
          {completed.map((p, i) => (
            <div key={p.id} style={{ display: 'grid', gridTemplateColumns: '64px 1fr auto', gap: 24, alignItems: 'center', padding: '16px 28px', borderTop: i === 0 ? 'none' : '1px solid var(--line)' }}>
              <div style={{ width: 48, height: 48 }}><Portrait seed={p.img} size={48} name={p.name} /></div>
              <div>
                <div className="serif" style={{ fontSize: 17, fontWeight: 500 }}>{p.name}, {p.age}</div>
                <div style={{ fontSize: 12, color: 'var(--ink-3)', fontFamily: 'var(--mono)', marginTop: 2 }}>Confirmed {p.sent}</div>
              </div>
              <Btn kind="ghost" size="sm" onClick={() => navigate('elder-member-detail', p.id)}>View →</Btn>
            </div>
          ))}
        </div>
      </div>
    </ElderShell>
  );
};

// ─── MEMBERS UNDER CARE ────────────────────────────────────────────────
const ElderMembers = ({ tweaks, navigate }) => {
  const { Btn } = window;
  const [filter, setFilter] = React.useState('all');
  const filtered = filter === 'all' ? CHURCH_MEMBERS : CHURCH_MEMBERS.filter(m => m.status === filter);

  return (
    <ElderShell tweaks={tweaks} navigate={navigate} active="elder-members">
      <ElderHeader title="Members under your care." sub="Every single from Second Presbyterian on the network." />
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '32px 56px 96px' }}>
        <div style={{ display: 'flex', gap: 8, marginBottom: 20, flexWrap: 'wrap' }}>
          {[['all', 'All'], ['active', 'Active'], ['paused', 'Paused'], ['pending', 'Pending'], ['married', 'Married']].map(([v, l]) => (
            <button key={v} onClick={() => setFilter(v)} style={{
              padding: '6px 14px', fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.06em', textTransform: 'uppercase',
              background: filter === v ? 'var(--ink)' : 'transparent', color: filter === v ? 'var(--paper)' : 'var(--ink-2)',
              border: '1px solid ' + (filter === v ? 'var(--ink)' : 'var(--line-2)'), cursor: 'pointer'
            }}>{l}</button>
          ))}
        </div>
        <div style={{ background: 'var(--paper)', border: '1px solid var(--line)' }}>
          {filtered.map((m, i) => {
            const tone = STATUS_TONES[m.status];
            return (
              <div key={m.id} onClick={() => navigate('elder-member-detail', m.id)} style={{
                display: 'grid', gridTemplateColumns: '2.5fr 1fr 1fr 1fr 1fr', padding: '20px 28px',
                borderTop: i === 0 ? 'none' : '1px solid var(--line)', alignItems: 'center', cursor: 'pointer', gap: 16
              }}>
                <div>
                  <div className="serif" style={{ fontSize: 19, fontWeight: 500 }}>{m.name}, {m.age}</div>
                  {m.notes && <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 4, fontStyle: 'italic' }}>{m.notes}</div>}
                </div>
                <div><span style={{ padding: '3px 10px', fontSize: 11, fontFamily: 'var(--mono)', letterSpacing: '0.08em', textTransform: 'uppercase', color: tone.fg, border: `1px solid ${tone.fg}` }}>{tone.label}</span></div>
                <div style={{ fontSize: 13, color: 'var(--ink-3)', fontFamily: 'var(--mono)' }}>Joined {m.joined}</div>
                <div style={{ fontSize: 13, color: 'var(--ink-2)' }}>{m.interactions} convos</div>
                <div style={{ fontSize: 13, color: 'var(--ink-2)' }}>{m.mutual} mutual</div>
              </div>
            );
          })}
        </div>
      </div>
    </ElderShell>
  );
};

// ─── MEMBER DETAIL (elder view) — also serves as looped-in conversation ──
const ElderMemberDetail = ({ tweaks, navigate, memberId = 1 }) => {
  const { Btn, Portrait, Badge } = window;
  const m = CHURCH_MEMBERS.find(x => x.id === memberId) || CHURCH_MEMBERS[0];
  const member = window.HMN_DATA.MEMBERS.find(x => x.id === memberId) || window.HMN_DATA.MEMBERS[0];
  const tone = STATUS_TONES[m.status];

  return (
    <ElderShell tweaks={tweaks} navigate={navigate} active="elder-members">
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '40px 56px 0' }}>
        <button onClick={() => navigate('elder-members')} style={{
          background: 'none', border: 'none', padding: 0, cursor: 'pointer',
          fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.08em', color: 'var(--ink-3)', marginBottom: 24
        }}>← BACK TO MEMBERS</button>
      </div>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 56px 96px', display: 'grid', gridTemplateColumns: '280px 1fr', gap: 56 }}>
        <aside>
          <div style={{ aspectRatio: '4/5', overflow: 'hidden' }}><Portrait seed={member.img} size={280} name={member.name} /></div>
          <h1 className="serif" style={{ fontSize: 32, fontWeight: 500, margin: '20px 0 6px' }}>{member.name}, {member.age}</h1>
          <div style={{ fontSize: 13, color: 'var(--ink-3)', fontFamily: 'var(--mono)', letterSpacing: '0.04em', marginBottom: 16 }}>
            {member.location}
          </div>
          <span style={{ padding: '4px 12px', fontSize: 11, fontFamily: 'var(--mono)', letterSpacing: '0.08em', textTransform: 'uppercase', color: tone.fg, border: `1px solid ${tone.fg}` }}>{tone.label}</span>
          <div style={{ marginTop: 28, fontSize: 13, color: 'var(--ink-3)' }}>
            Joined {m.joined}<br/>
            {m.interactions} conversations · {m.mutual} mutual
          </div>
        </aside>

        <div>
          <h2 className="serif" style={{ fontSize: 22, fontWeight: 500, marginTop: 0 }}>Looped-in conversations</h2>
          <p style={{ fontSize: 14, color: 'var(--ink-3)', lineHeight: 1.6 }}>
            {member.name.split(' ')[0]} has invited you into the conversations below. Reading is private; she'll be notified if you reply or write a counsel-note.
          </p>

          <div style={{ background: 'var(--paper)', border: '1px solid var(--line)', padding: 28, marginTop: 24 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 18, paddingBottom: 14, borderBottom: '1px solid var(--line)' }}>
              <div>
                <div className="serif" style={{ fontSize: 22, fontWeight: 500 }}>Conversation with Caleb R.</div>
                <div style={{ fontSize: 13, color: 'var(--ink-3)', fontFamily: 'var(--mono)', marginTop: 4 }}>
                  Briarwood Presbyterian · commended by Rev. Jonathan H. Pace
                </div>
              </div>
              <Badge tone="vouched">Mutual</Badge>
            </div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 15, lineHeight: 1.65, color: 'var(--ink-2)' }}>
              <p style={{ marginTop: 0 }}><strong>Hannah:</strong> "Right now I read Scripture and a hymn before bed alone, but I would love a household where it's the rhythm of every evening…"</p>
              <p><strong>Caleb:</strong> "Yes — would Saturday morning work for a call? My elder is fine looping in if either of us want."</p>
              <p style={{ color: 'var(--ink-3)', fontStyle: 'italic', marginBottom: 0 }}>5 messages · last activity 2 hours ago</p>
            </div>
            <div style={{ marginTop: 20, display: 'flex', gap: 10 }}>
              <Btn kind="secondary" size="sm">Read full thread</Btn>
              <Btn kind="ghost" size="sm">Write a private counsel-note to Hannah</Btn>
              <Btn kind="ghost" size="sm">Connect with Rev. Pace</Btn>
            </div>
          </div>

          <h2 className="serif" style={{ fontSize: 22, fontWeight: 500, marginTop: 48 }}>Your commendation on file</h2>
          <div style={{ background: 'var(--paper)', border: '1px solid var(--line)', padding: 28, marginTop: 16, fontFamily: 'var(--serif)', fontSize: 16, lineHeight: 1.6, fontStyle: 'italic', color: 'var(--ink-2)' }}>
            "Hannah is a current communing member of our church, in good standing, with no discipline pending. I know her personally and commend her as a mature, godly woman, ready to pursue marriage. I would gladly officiate her wedding."
            <div style={{ fontFamily: 'var(--mono)', fontStyle: 'normal', fontSize: 11, color: 'var(--ink-3)', marginTop: 16, letterSpacing: '0.06em' }}>
              SUBMITTED MARCH 1, 2026 · REV. DANIEL M. CARRICK
            </div>
            <div style={{ marginTop: 16 }}>
              <Btn kind="ghost" size="sm">Update or rescind →</Btn>
            </div>
          </div>
        </div>
      </div>
    </ElderShell>
  );
};

// ─── REPORTS ───────────────────────────────────────────────────────────
const ElderReports = ({ tweaks, navigate }) => {
  const { Btn } = window;
  return (
    <ElderShell tweaks={tweaks} navigate={navigate} active="elder-reports">
      <ElderHeader title="Reports." sub="Quarterly summaries you can take to your elders, or to a denominational meeting." />
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '40px 56px 96px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24, marginBottom: 48 }}>
          {[
            { period: 'Q1 2026', range: 'Jan – Mar', members: 5, mutual: 3, marriages: 0 },
            { period: 'Q4 2025', range: 'Oct – Dec', members: 4, mutual: 2, marriages: 1 },
            { period: 'Q3 2025', range: 'Jul – Sep', members: 3, mutual: 1, marriages: 0 },
            { period: 'Q2 2025', range: 'Apr – Jun', members: 2, mutual: 0, marriages: 0 },
          ].map(r => (
            <div key={r.period} style={{ background: 'var(--paper)', border: '1px solid var(--line)', padding: 28 }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--taupe)', marginBottom: 8 }}>{r.range}</div>
              <h3 className="serif" style={{ fontSize: 28, fontWeight: 500, margin: 0 }}>{r.period}</h3>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 24 }}>
                <Stat label="Members" value={r.members} />
                <Stat label="Mutual" value={r.mutual} />
                <Stat label="Marriages" value={r.marriages} />
              </div>
              <div style={{ marginTop: 20, display: 'flex', gap: 8 }}>
                <Btn kind="ghost" size="sm">PDF</Btn>
                <Btn kind="ghost" size="sm">Read online →</Btn>
              </div>
            </div>
          ))}
        </div>

        <div style={{ background: 'var(--bg-2)', padding: 28, fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.6 }}>
          <strong>A note on the all-time number.</strong> Of the members you have commended, <strong>1 marriage</strong> has resulted from the network — Phoebe G. and Jacob R., October 2026, officiated by you. We celebrate quietly.
        </div>
      </div>
    </ElderShell>
  );
};

const Stat = ({ label, value }) => (
  <div>
    <div className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-3)', marginBottom: 4 }}>{label}</div>
    <div className="serif" style={{ fontSize: 28, fontWeight: 500, color: 'var(--ink)', lineHeight: 1 }}>{value}</div>
  </div>
);

// ─── ELDER NOTIFICATIONS ───────────────────────────────────────────────
const ElderNotifications = ({ tweaks, navigate }) => {
  const Toggle = window.MemberToggle || (({ label, on }) => (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 0', borderTop: '1px solid var(--line)' }}>
      <div style={{ fontSize: 14, color: 'var(--ink-2)' }}>{label}</div>
      <div style={{ width: 36, height: 20, borderRadius: 10, padding: 2, background: on ? 'var(--ink)' : 'var(--line-2)', cursor: 'pointer' }}>
        <div style={{ width: 16, height: 16, borderRadius: 8, background: 'var(--paper)', transform: on ? 'translateX(16px)' : 'translateX(0)', transition: 'transform 150ms' }}></div>
      </div>
    </div>
  ));
  return (
    <ElderShell tweaks={tweaks} navigate={navigate} active="elder-notifications">
      <ElderHeader title="Notifications." sub="Most elders only check this once a quarter. We'll keep email gentle." />
      <div style={{ maxWidth: 760, margin: '0 auto', padding: '40px 56px 96px' }}>
        <h2 className="serif" style={{ fontSize: 22, fontWeight: 500 }}>By email</h2>
        <Toggle label="A member of your church asks you to commend them" on />
        <Toggle label="A member you commended invites you into a conversation" on />
        <Toggle label="A member you commended has a mutual interest" on />
        <Toggle label="Your member's conversation has gone quiet for 30+ days" on />
        <Toggle label="Quarterly church report is ready" on />
        <Toggle label="Magnalia digest — 2× per year newsletter" on />
      </div>
    </ElderShell>
  );
};

Object.assign(window, { ElderHome, ElderVouchInbox, ElderMembers, ElderMemberDetail, ElderReports, ElderNotifications });