UCCA Standard Graphics Unit + Finance Page Split Brief¶

SURFACE: ops.ucco.foundation (ucco-ops) — PHASE 1 (build + refine)
SURFACE: ops.ucca.online (ucca-ops) — PHASE 2 (copy + configure)
CF ACCOUNT (UCCO): aed3398a4e698767328cc3a9e698721d
CF ACCOUNT (UCCA): e5a9830215a8d88961dc6c80a8c7442a
DO NOT TOUCH: ucco.foundation, ucca.online, ir.ucca.online, keys.ucca.online, mcp.ucco.foundation, mcp.ucca.online, pioneer.ucco.foundation, rtopacks.com.au

→ TIM¶

Two things in this brief.

Phase 1: Standard Graphics Unit. Right now the finance page graph works but it's dull — basic bar chart, tooltip off to the side, no interactivity. You showed me the LearnWorlds dashboard and said "I want that." What they're doing is Chart.js with good configuration — tooltip anchored to the data point, vertical crosshair guideline, smooth lines, time range pill toggles, accumulative graph switches. We can match and exceed that with a reusable component that becomes the standard across every UCCA and UCCO surface.

The component is called <UCCAChart />. Alex builds it once in a shared library. Every future surface that needs a graph (finance, analytics, RTOpacks ops, board dashboards) just imports it and passes data. One look and feel everywhere. When you brief a future page, you just say "use the Standard Graphics Unit, line chart, time series" and it's done.

Phase 2: Finance page split. Once the graphics unit is polished on the UCCO finance page, Alex copies the entire finance page to UCCA ops. On UCCA's side, it shows all six UCCA accounts with full detail — that's where the real commercial banking view lives. On UCCO's side, the page gets stripped back to show only the UCCO Foundation Account (in trust) ••0538 — because that's the only account that belongs to the foundation. The other five UCCA accounts come off the UCCO view entirely.

Sequencing: refine on UCCO first (it's live, you can iterate), then copy to UCCA once the look and feel is locked.

→ ALEX¶

PHASE 1 — Standard Graphics Unit¶

1. Component: `<UCCAChart />`¶

Create a reusable React chart component in the shared component library (or in a location importable by both ucco-ops and ucca-ops). This becomes the single charting component used across all UCCA and UCCO surfaces.

Underlying library: Chart.js (already available in the stack).

Component API:

<UCCAChart
  type="line" | "bar" | "doughnut" | "area"
  data={chartData}
  options={chartOptions}
  timeRange={true}          // Show 7D/30D/90D/YTD/All pill toggles
  datePicker={true}         // Show custom date range pickers
  accumulative={false}      // Show accumulative toggle switch
  height={300}              // Chart height in px
  loading={false}           // Show skeleton loader
  empty="No data available" // Empty state message
/>

2. Design System Integration¶

All styling must match the existing ops design system (blueprint dark mode, IBM Plex family).

Colours: - Primary series: #4ecdc4 (the teal/green already used in the ops finance bar chart) - Secondary series: #f7b731 (amber/gold for secondary data) - Tertiary series: #8b95a5 (muted grey for third series) - Grid lines: rgba(255,255,255,0.06) in dark mode, rgba(0,0,0,0.06) in light - Tooltip background: #1a2332 (dark mode) / #ffffff (light mode) - Tooltip border: 1px solid rgba(255,255,255,0.12)

Typography: - Axis labels: IBM Plex Mono, 11px, muted colour - Tooltip title (date): IBM Plex Mono, 12px, bold - Tooltip values: IBM Plex Sans, 13px, with coloured dot indicators matching series - Chart title: IBM Plex Sans, 14px, semibold (rendered OUTSIDE the chart, in the page layout — not by Chart.js)

Current problem: Tooltip appears in a fixed position off to the side of the chart, disconnected from the data point.

Required behaviour (match LearnWorlds reference):

interaction.mode: 'index' — tooltip activates on the nearest x-axis position, not requiring hover on a specific point
interaction.intersect: false — tooltip shows even when cursor is between data points
Tooltip ANCHORED to the nearest data point — follows the cursor horizontally
Vertical crosshair line — a dashed vertical line from the data point down to the x-axis label, connecting the tooltip to the date
X-axis date label highlight — when hovering, the date label below the crosshair gets highlighted (bold or background colour)
Tooltip shows ALL series values at that date (e.g., "28 Feb 2026 — Inflow: $110.32, Outflow: $0.00, Net: $110.32")
Tooltip has coloured dot indicators next to each series name (matching the series colour)
Tooltip FOLLOWS the cursor smoothly — no snapping, no jumping
On mobile/touch: tap to show tooltip, tap elsewhere to dismiss

Chart.js configuration pattern:

plugins: {
  tooltip: {
    mode: 'index',
    intersect: false,
    position: 'nearest',    // Anchor to nearest point
    // Use external tooltip or custom positioner for precise anchoring
  },
  crosshair: {
    // Use chartjs-plugin-crosshair or implement custom via plugin API
    line: {
      color: 'rgba(255,255,255,0.3)',
      width: 1,
      dashPattern: [4, 4]
    }
  }
}

If chartjs-plugin-crosshair is not available in the stack, implement the vertical crosshair as a custom Chart.js plugin — it's ~30 lines:

const crosshairPlugin = {
  id: 'crosshair',
  afterDraw(chart) {
    if (chart.tooltip?._active?.length) {
      const x = chart.tooltip._active[0].element.x;
      const yAxis = chart.scales.y;
      const ctx = chart.ctx;
      ctx.save();
      ctx.beginPath();
      ctx.setLineDash([4, 4]);
      ctx.strokeStyle = 'rgba(255,255,255,0.3)';
      ctx.lineWidth = 1;
      ctx.moveTo(x, yAxis.top);
      ctx.lineTo(x, yAxis.bottom);
      ctx.stroke();
      ctx.restore();
    }
  }
};

4. Time Range Controls¶

Render OUTSIDE the chart canvas, above it, as a row of pill buttons + date pickers.

[ 7D ] [ 30D ] [ 90D ] [ YTD ] [ All ]  |  📅 01/01/2020  to  📅 15/03/2026

Pill buttons: rounded, small, the active one filled with teal, others outlined
Clicking a pill recalculates the date range and refetches/re-filters data
Custom date pickers use native <input type="date"> (consistent with what's already on the finance page)
Default selection: 30D
The component manages this state internally — parent just provides the full dataset (or a fetch callback for lazy loading)

5. Accumulative Toggle¶

Optional prop. When enabled, shows a toggle switch (matching the LearnWorlds reference style) in the top-right of the chart header:

ACCUMULATIVE GRAPH  [ ON 🟢 ]

OFF: shows per-period values (e.g., daily inflow/outflow bars)
ON: shows running cumulative total as a line chart
Switching between modes re-renders the chart with animation

6. Chart Types¶

Line chart (time series): - Smooth curves (tension: 0.3) - Filled area below line with 10% opacity of the line colour - Point markers: small dots (radius 3), enlarge on hover (radius 5) - Multiple series supported with legend

Bar chart (daily flow): - Grouped or stacked bars for inflow/outflow - Green for inflow, red/coral for outflow - Hover highlights the specific bar with tooltip

Doughnut/Gauge: - For percentage displays (like the push notification rate gauges in the LearnWorlds reference) - Centre text shows the percentage value - Configurable colour for filled vs unfilled segments

Area chart: - Same as line chart but with stronger fill (20% opacity) - Used for accumulative views

7. Empty and Loading States¶

Loading: Skeleton shimmer animation matching the chart dimensions. No spinner.

Empty: Centred text message with muted icon. "No transactions in this period" or custom message via prop.

Error: "Unable to load chart data" with a retry button.

8. Responsive¶

Chart canvas fills its container width
Minimum height 200px, default 300px, configurable
On viewports < 640px: time range pills wrap to a second line, tooltip becomes full-width overlay at the bottom of the chart instead of floating
X-axis labels auto-thin on narrow viewports (show every Nth label)

PHASE 2 — Finance Page Split¶

Do Phase 2 AFTER Phase 1 is refined and Tim approves the graphics on the UCCO finance page.

9. Copy Finance Page to UCCA Ops¶

Take the entire UCCO finance page (component, API routes, cache layer) and replicate it in ucca-ops.

UCCA Finance Page (ops.ucca.online): - Shows ALL six active UCCA accounts (Checking ••3940, Stripe Clearing ••7892, PayPal USA Clearing ••1511, QBI Clearing ••8239, Shopify ••3244, UCCO Foundation Account in trust ••0538) - Full transaction views per account (click to drill down) - Daily flow chart per account using Standard Graphics Unit - Total balance across all accounts - Entity banner: "UCCA Inc — Commercial Treasury" - L1 access only (Tim, Jimmy) - L2 board view: summary card only (total balance, account count, last activity) — NO account detail - Uses MERCURY_API_TOKEN secret on ucca-ops Worker (UCCA CF account)

API routes on ucca-ops:

GET /api/mercury/accounts       → All active accounts (L1)
GET /api/mercury/transactions   → Transactions with account filter, date range, pagination (L1)
GET /api/mercury/summary        → Aggregate summary (L1 + L2)
POST /api/mercury/refresh       → Force cache refresh (L1)

Transaction endpoint supports query params: - accountId — filter to specific account - start / end — date range - limit / offset — pagination

10. Strip UCCO Finance Page¶

After the copy is confirmed working on UCCA ops:

UCCO Finance Page (ops.ucco.foundation) — updated: - Shows ONLY the UCCO Foundation Account (in trust) ••0538 - Remove all other UCCA account cards from the view - Remove the "proof of connection" banner — replace with "UCCO Foundation Treasury" - If the UCCO Foundation account returns 404 via API (it currently does — savings account restriction), show: "Account registered but not yet accessible via API. Balance will appear when the foundation's Mercury account is activated." - Keep the account card visible in a "pending" state — greyed out, showing account nickname and last4, with a "Pending API access" label - When UCCO incorporates and opens its own Mercury org, the token gets swapped and this account goes live automatically - Total balance shows $0.00 (or the actual balance once the API responds) - Summary endpoint returns data for UCCO Foundation account only

11. Account Filtering Logic¶

Add an entity filter to the MercuryClient or the API route layer:

// UCCO ops: only show foundation account
const UCCO_ACCOUNT_FILTER = ['9649260e-f3bb-11ef-a761-ab39e87b6a34']; // UCCO Foundation in trust

// UCCA ops: show all accounts EXCEPT the foundation one
// OR show all accounts (foundation account is still technically UCCA's money held in trust)

Decision for Tim: Do you want the UCCO Foundation Account to appear on BOTH surfaces (UCCA showing it as "held in trust" and UCCO showing it as "our treasury"), or only on UCCO? For now, this brief assumes it appears on BOTH — UCCA shows it as one of six accounts, UCCO shows it as the only account. Tim can change this.

Deployment Checklist¶

Phase 1 — Standard Graphics Unit¶

Phase 2 — Finance Page Split¶

Finance page + API routes copied to ucca-ops
UCCA finance page shows all 6 accounts with drill-down
UCCA finance page uses Standard Graphics Unit for all charts
UCCO finance page stripped to UCCO Foundation account only
UCCO "proof of connection" banner replaced with "UCCO Foundation Treasury"
UCCA L2 board summary card working
Tim sets MERCURY_API_TOKEN on ucca-ops Worker
Both pages render correctly independently

What This Brief Does NOT Cover (future briefs)¶

RTOpacks analytics — will use Standard Graphics Unit when built
Board member dashboard charts — will use Standard Graphics Unit
Stripe integration — separate data source, separate brief
Multi-entity switcher — after both orgs have their own Mercury accounts
Payment controls — UCCA ops, separate brief
Export/download — chart-to-PNG or data-to-CSV, future enhancement

Reference: LearnWorlds Comparison¶

What they do well (and we're matching): - Tooltip anchored to data marker with vertical crosshair guideline - Smooth line curves with coloured series - Accumulative graph toggle - Time range selector as pill buttons - Doughnut gauges for percentage metrics - Clean stat cards above the charts

What we're adding beyond their implementation: - Dark mode / light mode theming - IBM Plex typography (professional, not generic) - Transaction drill-down on click (their charts are view-only) - Reusable component with standardised API (their graphs are bespoke per page) - Blueprint design system integration

Brief: UCCA Standard Graphics Unit + Finance Page Split 16 March 2026 — Brief #15 in pipeline Infrastructure brief — spans both entities