Budget v3 page + cents migration + warm shell

.gitignore

@@ -41,4 +41,6 @@ yarn-error.log*
 # Local only
 /data
 /docs/superpowers
+packages/convex/scripts/*.xlsx
 .playwright-mcp
+.claude

apps/budget/.prettierignore

@@ -3,3 +3,4 @@ pnpm-lock.yaml
 yarn.lock
 
 convex/_generated
+**/routeTree.gen.ts

apps/budget/src/components/budget/BudgetBreakdownTable.tsx

@@ -0,0 +1,93 @@
+import { formatCurrency } from '@/lib/budget';
+
+export interface BreakdownRowData {
+  date: number;
+  income: number;
+  spend: number;
+  mortgage: number | null;
+  net: number;
+}
+
+interface Props {
+  rows: Array<BreakdownRowData> | undefined;
+  onRowClick: (date: number) => void;
+}
+
+function monthLabel(date: number): string {
+  return new Date(date).toLocaleString('en-AU', {
+    month: 'short',
+    year: 'numeric'
+  });
+}
+
+function SkeletonRows() {
+  return (
+    <div className="flex flex-col gap-2">
+      {Array.from({ length: 6 }).map((_, i) => (
+        <div
+          key={i}
+          className="h-10 rounded-xl bg-warm-bg-card-soft animate-pulse"
+        />
+      ))}
+    </div>
+  );
+}
+
+export default function BudgetBreakdownTable({ rows, onRowClick }: Props) {
+  return (
+    <div className="rounded-3xl bg-warm-bg-card-soft p-5">
+      <h2 className="text-base font-warm-display text-warm-text-primary mb-3">
+        Monthly breakdown
+      </h2>
+      {!rows ? (
+        <SkeletonRows />
+      ) : rows.length === 0 ? (
+        <p className="text-sm text-warm-text-secondary">No budget rows.</p>
+      ) : (
+        <div className="-mx-5 overflow-x-auto px-5">
+          <table className="w-full min-w-[460px] text-sm">
+            <thead>
+              <tr className="text-warm-text-tertiary text-[11px] uppercase tracking-wide">
+                <th className="text-left font-medium py-2 pr-3">Month</th>
+                <th className="text-right font-medium py-2 px-3">Income</th>
+                <th className="text-right font-medium py-2 px-3">Spend</th>
+                <th className="text-right font-medium py-2 px-3">Mortgage</th>
+                <th className="text-right font-medium py-2 pl-3">Net</th>
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((r) => (
+                <tr
+                  key={r.date}
+                  onClick={() => onRowClick(r.date)}
+                  className="cursor-pointer border-t border-warm-border hover:bg-warm-bg-card transition-colors"
+                >
+                  <td className="py-2 pr-3 text-warm-text-primary font-medium whitespace-nowrap">
+                    {monthLabel(r.date)}
+                  </td>
+                  <td className="py-2 px-3 text-right text-warm-text-primary whitespace-nowrap">
+                    {formatCurrency(r.income)}
+                  </td>
+                  <td className="py-2 px-3 text-right text-warm-text-primary whitespace-nowrap">
+                    {formatCurrency(r.spend)}
+                  </td>
+                  <td className="py-2 px-3 text-right text-warm-text-secondary whitespace-nowrap">
+                    {r.mortgage === null ? '—' : formatCurrency(r.mortgage)}
+                  </td>
+                  <td
+                    className={`py-2 pl-3 text-right font-medium whitespace-nowrap ${
+                      r.net >= 0 ? 'text-warm-positive' : 'text-warm-negative'
+                    }`}
+                  >
+                    {r.net >= 0 ? '+' : ''}
+                    {formatCurrency(r.net)}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}

apps/budget/src/components/budget/BudgetChart.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { Group } from '@visx/group';
 import { scaleBand, scaleLinear } from '@visx/scale';
 import { AxisBottom, AxisLeft } from '@visx/axis';
@@ -8,7 +7,6 @@ import { useTooltip } from '@visx/tooltip';
 import BudgetChartBars from './BudgetChartBars';
 import BudgetChartLines from './BudgetChartLines';
 import BudgetChartTooltip from './BudgetChartTooltip';
-import BudgetChartFilters from './BudgetChartFilters';
 import type { BudgetDataPoint, TimePeriod } from '@/lib/budget';
 import {
   computeMovingAverage,
@@ -24,15 +22,15 @@ const CHART_HEIGHT = 520;
 
 interface BudgetChartProps {
   data: Array<BudgetDataPoint>;
+  period: TimePeriod;
 }
 
 function BudgetChartInner({
   data,
+  period,
   width,
   height
 }: BudgetChartProps & { width: number; height: number }) {
-  const [period, setPeriod] = useState<TimePeriod>('ALL');
-
   const {
     tooltipData,
     tooltipLeft,
@@ -46,9 +44,9 @@ function BudgetChartInner({
 
   if (filtered.length === 0) {
     return (
-      <div className="flex min-h-[500px] flex-col items-center justify-center gap-2 text-center">
-        <p className="text-sm font-medium text-neutral-700">No budget data</p>
-        <p className="text-sm text-neutral-500">
+      <div className="flex min-h-[400px] flex-col items-center justify-center gap-2 text-center text-warm-text-secondary">
+        <p className="text-sm font-medium">No budget data</p>
+        <p className="text-sm text-warm-text-tertiary">
           Seed the budget table to render the chart.
         </p>
       </div>
@@ -111,106 +109,117 @@ function BudgetChartInner({
   if (innerWidth <= 0 || innerHeight <= 0) return null;
 
   return (
-    <div className="relative">
+    <div className="rounded-3xl bg-warm-bg-card-soft p-5">
       <div className="flex items-center justify-between mb-4">
-        <div className="flex items-center gap-6 text-sm text-gray-500">
+        <h2 className="text-base font-warm-display text-warm-text-primary">
+          Income vs Spending
+        </h2>
+        <div className="flex items-center gap-4 text-xs text-warm-text-secondary">
           <div className="flex items-center gap-2">
             <span
               className="inline-block w-3 h-3 rounded-sm"
-              style={{ backgroundColor: 'rgba(250, 128, 114, 0.7)' }}
+              style={{ backgroundColor: '#D85A36' }}
             />
             Spend
           </div>
           <div className="flex items-center gap-2">
             <span
               className="inline-block w-3 h-3 rounded-sm"
-              style={{ backgroundColor: 'rgba(100, 149, 237, 0.7)' }}
+              style={{ backgroundColor: '#5F9466' }}
             />
             Sink or Swim
           </div>
         </div>
-        <BudgetChartFilters selected={period} onChange={setPeriod} />
       </div>
 
-      <svg
-        viewBox={`0 0 ${width} ${height}`}
-        preserveAspectRatio="none"
-        className="h-[28rem] min-w-[720px] w-full sm:h-[32rem]"
-      >
-        <Group left={MARGIN.left} top={MARGIN.top}>
-          <GridRows
-            scale={yScale}
-            width={innerWidth}
-            stroke="#e5e7eb"
-            strokeOpacity={0.5}
-          />
+      <div className="relative">
+        <svg
+          viewBox={`0 0 ${width} ${height}`}
+          preserveAspectRatio="none"
+          className="h-[28rem] min-w-[720px] w-full sm:h-[32rem]"
+        >
+          <Group left={MARGIN.left} top={MARGIN.top}>
+            <GridRows
+              scale={yScale}
+              width={innerWidth}
+              stroke="#EFE3D2"
+              strokeOpacity={0.6}
+            />
 
-          <BudgetChartBars
-            data={filtered}
-            xScale={xScale}
-            yScale={yScale}
-            height={innerHeight}
-            onMouseMove={handleMouseMove}
-            onMouseLeave={hideTooltip}
-          />
+            <BudgetChartBars
+              data={filtered}
+              xScale={xScale}
+              yScale={yScale}
+              height={innerHeight}
+              onMouseMove={handleMouseMove}
+              onMouseLeave={hideTooltip}
+            />
 
-          <BudgetChartLines
-            spendTrend={spendTrend}
-            sinkOrSwimTrend={sinkOrSwimTrend}
-            xScale={xScale}
-            yScale={yScale}
-          />
+            <BudgetChartLines
+              spendTrend={spendTrend}
+              sinkOrSwimTrend={sinkOrSwimTrend}
+              xScale={xScale}
+              yScale={yScale}
+            />
 
-          <AxisBottom
-            top={innerHeight}
-            scale={xScale}
-            tickFormat={(date) => formatDateLabel(date)}
-            tickValues={filtered
-              .map((d) => d.date)
-              .filter((_, i) => i % labelInterval === 0)}
-            tickLabelProps={() => ({
-              fill: '#6b7280',
-              fontSize: 11,
-              textAnchor: 'end',
-              dy: '0.25em',
-              dx: '-0.5em',
-              angle: -45
-            })}
-            stroke="#d1d5db"
-            tickStroke="#d1d5db"
-            hideTicks={false}
-          />
+            <AxisBottom
+              top={innerHeight}
+              scale={xScale}
+              tickFormat={(date) => formatDateLabel(date)}
+              tickValues={filtered
+                .map((d) => d.date)
+                .filter((_, i) => i % labelInterval === 0)}
+              tickLabelProps={() => ({
+                fill: '#7C6755',
+                fontSize: 11,
+                textAnchor: 'end',
+                dy: '0.25em',
+                dx: '-0.5em',
+                angle: -45
+              })}
+              stroke="#EFE3D2"
+              tickStroke="#EFE3D2"
+              hideTicks={false}
+            />
 
-          <AxisLeft
-            scale={yScale}
-            tickFormat={(v) => formatCurrency(v as number)}
-            tickLabelProps={() => ({
-              fill: '#6b7280',
-              fontSize: 11,
-              textAnchor: 'end',
-              dx: '-0.5em',
-              dy: '0.33em'
-            })}
-            stroke="#d1d5db"
-            tickStroke="#d1d5db"
-            numTicks={6}
+            <AxisLeft
+              scale={yScale}
+              tickFormat={(v) => formatCurrency(v as number)}
+              tickLabelProps={() => ({
+                fill: '#7C6755',
+                fontSize: 11,
+                textAnchor: 'end',
+                dx: '-0.5em',
+                dy: '0.33em'
+              })}
+              stroke="#EFE3D2"
+              tickStroke="#EFE3D2"
+              numTicks={6}
+            />
+          </Group>
+        </svg>
+
+        {tooltipOpen && tooltipData && (
+          <BudgetChartTooltip
+            date={tooltipData.date}
+            spend={tooltipData.spend}
+            sinkOrSwim={tooltipData.sinkOrSwim}
+            top={tooltipTop ?? 0}
+            left={tooltipLeft ?? 0}
           />
-        </Group>
-      </svg>
-
-      {tooltipOpen && tooltipData && (
-        <BudgetChartTooltip
-          date={tooltipData.date}
-          spend={tooltipData.spend}
-          sinkOrSwim={tooltipData.sinkOrSwim}
-          top={tooltipTop ?? 0}
-          left={tooltipLeft ?? 0}
-        />
-      )}
+        )}
+      </div>
     </div>
   );
 }
 
-export default function BudgetChart({ data }: BudgetChartProps) {
-  return <BudgetChartInner data={data} width={CHART_WIDTH} height={CHART_HEIGHT} />;
+export default function BudgetChart({ data, period }: BudgetChartProps) {
+  return (
+    <BudgetChartInner
+      data={data}
+      period={period}
+      width={CHART_WIDTH}
+      height={CHART_HEIGHT}
+    />
+  );
 }

apps/budget/src/components/budget/BudgetChartBars.tsx

@@ -39,7 +39,7 @@ export default function BudgetChartBars({
             y={y}
             width={bandwidth}
             height={Math.max(0, barHeight)}
-            fill="rgba(100, 149, 237, 0.5)"
+            fill="#D8E9D2"
             onMouseMove={(e) =>
               onMouseMove(e as React.MouseEvent<SVGRectElement>, d)
             }
@@ -61,7 +61,7 @@ export default function BudgetChartBars({
             y={y}
             width={bandwidth}
             height={Math.max(0, barHeight)}
-            fill="rgba(250, 128, 114, 0.5)"
+            fill="#FFDFC7"
             onMouseMove={(e) =>
               onMouseMove(e as React.MouseEvent<SVGRectElement>, d)
             }