Illustrate monthly reports and add viewing pattern breakdowns

frontend/app/insights/reports/page.tsx

@@ -151,8 +151,19 @@ export default function MonthlyReportsPage() {
           <div className="stats-highlight"><span className="stats-highlight-number">{data.daily?.length ? number(summary.minutes / data.daily.length) : 0}<small> min</small></span><div><strong>Daily average</strong><p>Across the calendar days in this report.</p></div></div>
         </section>
       </div>
+      {data.patterns && <>
+        <section className="report-pattern-summary" aria-label="Viewing insights">
+          <article><span>Average play</span><strong>{decimal(data.patterns.average_play_minutes)} <small>min</small></strong><p>Time per recorded playback session.</p></article>
+          <article><span>Longest play</span><strong>{decimal(data.patterns.longest_play_minutes)} <small>min</small></strong><p>Your longest recorded session this month.</p></article>
+          <article><span>Weekend viewing</span><strong>{decimal(data.patterns.weekend_percent)}<small>%</small></strong><p>Share of viewing on Saturday and Sunday (UTC).</p></article>
+        </section>
+        <div className="stats-main-grid">
+          <BreakdownCard title="Your week in viewing (UTC)" rows={data.patterns.weekdays} />
+          <BreakdownCard title="Movies, TV and more" rows={data.patterns.media} />
+        </div>
+      </>}
       <div className="stats-three-grid">
-        <section className="stats-panel"><div className="stats-panel-heading"><h2>Most watched</h2><span className="stats-unit">By minutes</span></div>{data.top_titles?.length ? <ol className="stats-top-titles report-top-titles">{data.top_titles.map((title, index) => <li key={`${title.title}-${index}`}><div><strong>{title.title}</strong><small>{title.type === 'series' ? 'TV series' : title.type === 'movie' ? 'Movie' : 'Other media'} · {title.plays} plays</small></div><span>{number(title.minutes)}<small>min</small></span></li>)}</ol> : <p className="stats-muted">Your most watched titles will appear here.</p>}</section>
+        <section className="stats-panel"><div className="stats-panel-heading"><h2>Most watched</h2><span className="stats-unit">By minutes</span></div>{data.top_titles?.length ? <ol className="stats-top-titles report-top-titles">{data.top_titles.map((title, index) => <li key={`${title.title}-${index}`}><RecentArtwork url={title.artwork_url} type={title.type} /><div><strong>{title.title}</strong><small>{title.type === 'series' ? 'TV series' : title.type === 'movie' ? 'Movie' : 'Other media'} · {title.plays} plays</small></div><span>{number(title.minutes)}<small>min</small></span></li>)}</ol> : <p className="stats-muted">Your most watched titles will appear here.</p>}</section>
         <BreakdownCard title="Your players" rows={data.clients ?? []} />
         <StreamingCard rows={data.methods ?? []} transcoding={data.transcoding} />
       </div>

frontend/app/insights/reports/reports.css

@@ -28,3 +28,14 @@
 .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; }
+
+.report-pattern-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:20px 0; }
+.report-pattern-summary article { padding:24px; border:1px solid #45404e; border-radius:16px; background:linear-gradient(135deg,#262137,#14292d); }
+.report-pattern-summary span { color:#d0c6e7; font-size:13px; }
+.report-pattern-summary strong { display:block; font-size:36px; margin:12px 0; color:#c5baff; }
+.report-pattern-summary small { font-size:16px; }
+.report-pattern-summary p { color:#b6b6c0; font-size:13px; margin:0; }
+.report-top-titles li { grid-template-columns:44px minmax(0,1fr) auto; gap:12px; }
+.report-top-titles li > div { flex:1; min-width:0; }
+.report-top-titles li > .stats-media-icon { width:44px; }
+@media(max-width:640px) { .report-pattern-summary { grid-template-columns:1fr; } }