Add 24-month dept split chart below rolling trend

Stacked bar chart (Rooms/Dry/Wet) for the previous 12 months and last
12 months side by side, with a reference line marking the boundary.
No extra API calls — data comes from the existing 36-month fetch.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/pages/WeeklyActual.tsx

@@ -7,9 +7,10 @@ import {
   PieChart, Pie, Cell,
   LineChart, Line,
   CartesianGrid,
+  ReferenceLine,
 } from 'recharts'
 import { getWeeklyActual } from '../api'
-import type { WeeklyActualData, WeekSummaryRow } from '../types'
+import type { WeeklyActualData, WeekSummaryRow, MonthSplitEntry } from '../types'
 
 // ── Formatters ─────────────────────────────────────────────────────────────
 
@@ -255,13 +256,47 @@ function OccupancyTable({ occupancy }: { occupancy: WeeklyActualData['occupancy'
   )
 }
 
+// ── Section: Monthly Dept Split (24 months) ────────────────────────────────
+
+function MonthSplitChart({ splits }: { splits: MonthSplitEntry[] }) {
+  // Mark the boundary between previous-12 and last-12
+  const boundaryLabel = splits[11]?.label
+
+  return (
+    <div className="wa-chart-card" style={{ marginTop: 0 }}>
+      <h4>Monthly Turnover by Dept — Previous 12 &amp; Last 12 Months</h4>
+      <ResponsiveContainer width="100%" height={240}>
+        <BarChart data={splits} margin={{ top: 8, right: 8, left: 8, bottom: 0 }}>
+          <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" vertical={false} />
+          <XAxis dataKey="label" tick={{ fontSize: 8 }} interval={1} />
+          <YAxis tickFormatter={v => `£${(v/1000).toFixed(0)}k`} tick={{ fontSize: 10 }} width={52} />
+          <Tooltip formatter={fmtChartCcy} />
+          <Legend iconSize={10} wrapperStyle={{ fontSize: 11 }} />
+          {boundaryLabel && (
+            <ReferenceLine
+              x={boundaryLabel}
+              stroke="#6b7280"
+              strokeDasharray="4 3"
+              label={{ value: '← prev 12 | last 12 →', position: 'top', fontSize: 9, fill: '#6b7280' }}
+            />
+          )}
+          <Bar dataKey="rooms" stackId="a" fill={CHART_COLORS.rooms} name="Rooms" />
+          <Bar dataKey="dry"   stackId="a" fill={CHART_COLORS.dry}   name="Dry" />
+          <Bar dataKey="wet"   stackId="a" fill={CHART_COLORS.wet}   name="Wet" radius={[2,2,0,0]} />
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}
+
 // ── Section: Month Progress ────────────────────────────────────────────────
 
 function MonthProgressSection({
-  mp, trend,
+  mp, trend, splits,
 }: {
   mp: WeeklyActualData['month_progress']
   trend: WeeklyActualData['monthly_trend']
+  splits: WeeklyActualData['monthly_split']
 }) {
   const deptBarData = [
     { name: 'Rooms', 'Net Sales': mp.split.rooms.net, 'Budget Net': mp.split.rooms.budget_net, 'Last Year': mp.split.rooms.ly_net },
@@ -366,6 +401,8 @@ function MonthProgressSection({
           </ResponsiveContainer>
         </div>
       </div>
+
+      <MonthSplitChart splits={splits} />
     </div>
   )
 }
@@ -467,7 +504,7 @@ export default function WeeklyActual() {
             <h2 className="wa-section-title">
               {MONTH_NAMES[data.month_progress.month - 1]} {data.month_progress.year} — Month Progress to Date
             </h2>
-            <MonthProgressSection mp={data.month_progress} trend={data.monthly_trend} />
+            <MonthProgressSection mp={data.month_progress} trend={data.monthly_trend} splits={data.monthly_split} />
           </section>
 
           {/* ── Utilities ────────────────────────────────────────────── */}