Let users email personal reports on demand

frontend/app/insights/reports/page.tsx

@@ -1,5 +1,7 @@
 'use client'
 
+import EmailReportControl from './EmailReportControl'
+
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { authFetch, getApiBase } from '../../lib/auth'
@@ -124,6 +126,7 @@ export default function MonthlyReportsPage() {
       <p className="stats-source"><span className={data?.state === 'ready' ? 'stats-source-dot is-ready' : 'stats-source-dot'} />From Jellystat · UTC</p>
     </div>
     {downloadError && <p className="stats-notice" role="alert">{downloadError}</p>}
+    {data?.state === 'ready' && !busy && <EmailReportControl month={data.month} />}
     {busy && <div className="stats-state" role="status"><span className="stats-state-symbol" aria-hidden="true">◷</span><h2>Putting your month together</h2><p>Gathering your viewing history and the previous month’s comparison.</p></div>}
     {error && <div className="stats-state" role="alert"><h2>Report couldn’t load</h2><p>{error}</p><button type="button" className="ghost-button" onClick={() => setRevision((value) => value + 1)}>Try again</button>{month && <button type="button" className="ghost-button" onClick={() => setMonth('')}>Latest complete month</button>}</div>}
     {data?.state === 'not_configured' && <section className="stats-state"><h2>Your monthly story starts here</h2><p>{data.is_admin ? 'Connect Jellystat to bring your monthly viewing reports into Magent.' : 'Monthly reports will appear once your administrator connects Jellystat.'}</p>{data.is_admin && <a className="stats-action" href="/admin/jellystat">Connect Jellystat</a>}</section>}