Let users email personal reports on demand

frontend/app/insights/reports/EmailReportControl.tsx

@@ -0,0 +1,60 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { authFetch, getApiBase } from '../../lib/auth'
+
+type Delivery = { id: string; month: string; state: string; detail: string }
+type Preference = { email: string | null; can_send: boolean; state: string; detail: string; deliveries: Delivery[] }
+
+export default function EmailReportControl({ month }: { month: string }) {
+  const [data, setData] = useState<Preference | null>(null)
+  const [busy, setBusy] = useState(false)
+  const [notice, setNotice] = useState('')
+  const [error, setError] = useState('')
+  const [revision, setRevision] = useState(0)
+  const request = useRef<{ month: string; id: string } | null>(null)
+  const pending = data?.deliveries.some((item) => ['queued', 'preparing', 'sending', 'retry'].includes(item.state)) ?? false
+
+  useEffect(() => {
+    const abort = new AbortController()
+    void authFetch(`${getApiBase()}/profile/email-recaps`, { signal: abort.signal }).then(async (response) => {
+      if (!response.ok) throw new Error('Could not load your report email preferences. Refresh to try again.')
+      const result = await response.json()
+      if (!abort.signal.aborted) setData(result)
+    }).catch((err: Error) => { if (!abort.signal.aborted) setError(err.message) })
+    return () => abort.abort()
+  }, [revision])
+
+  useEffect(() => {
+    if (!pending) return
+    const timer = window.setInterval(() => setRevision((value) => value + 1), 10000)
+    return () => window.clearInterval(timer)
+  }, [pending])
+
+  const send = async () => {
+    if (busy || !data?.can_send) return
+    setBusy(true); setError(''); setNotice('')
+    if (request.current?.month !== month) request.current = { month, id: crypto.randomUUID() }
+    try {
+      const response = await authFetch(`${getApiBase()}/profile/email-recaps/send`, {
+        method: 'POST', headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ month, request_id: request.current.id }),
+      })
+      const result = await response.json().catch(() => ({}))
+      if (!response.ok) throw new Error(typeof result.detail === 'string' ? result.detail : 'Could not queue your report. Try again.')
+      setNotice(result.message); request.current = null
+      setRevision((value) => value + 1)
+    } catch (err) { setError(err instanceof Error ? err.message : 'Could not queue your report.') }
+    finally { setBusy(false) }
+  }
+
+  return <section className="stats-panel report-email-panel" aria-label="Email your report">
+    <div className="stats-panel-heading"><h2>Email yourself this report</h2><a href="/profile#monthly-recaps">Email preferences</a></div>
+    <p>Choose a month above, including the current month so far, then send its viewing and request summary to your confirmed profile email.</p>
+    {data?.can_send ? <p><strong>{data.email}</strong> · One report email every five minutes.</p> : data && <p>{data.state === 'enabled' ? data.detail : 'Confirm your profile email in Email preferences first. You can choose on-demand delivery without automatic monthly emails.'}</p>}
+    <button type="button" disabled={busy || !data?.can_send} onClick={() => void send()}>{busy ? 'Queueing report…' : 'Email this report'}</button>
+    {notice && <p role="status">{notice}</p>}
+    {error && <p role="alert">{error}</p>}
+    {!!data?.deliveries.length && <details><summary>Recent report emails</summary><ul>{data.deliveries.map((item) => <li key={item.id}><strong>{item.month}</strong> · {item.state === 'sent' ? 'Accepted by mail server' : item.state} — {item.detail || 'Waiting for delivery'}</li>)}</ul></details>}
+  </section>
+}

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>}

frontend/app/insights/reports/reports.css

@@ -24,3 +24,7 @@
   .report-month-picker { width: 100%; }
   .report-month-picker label { flex: 1; }
 }
+
+.report-email-panel { display: grid; gap: 12px; }
+.report-email-panel > button { justify-self: start; }
+.report-email-panel p, .report-email-panel li { overflow-wrap: anywhere; }