Readiness dashboard

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';/* * Readiness dashboard: a compliance officer's screen for "if an inspector came today". An icon * rail, a search, the period controls and tabs over a month-by-month lollipop chart, a card of * headline figures, a prompt to ask the data a question, and three cards under it: reports filed * (nested discs), the readiness score (a gauge) and the client upload funnel. * * - Every chart is HTML and CSS but the gauge, one small SVG. Values move by transforms only: a *   stem is a full-height line scaled from its foot, a dot or a bar a full-height box slid down, *   a disc scaled from the point it stands on. A new series glides in, column after column. * - The tabs pick what the chart shows; the office, Weekly / Monthly / Yearly and the year pick *   which figures. Hovering a column lights it with its value; clicking or the arrow keys pick it, *   and the big change on the left compares it with the one before. * - The figures count up the first time the dashboard comes on screen (at once under reduced *   motion), and the stems, discs and bars rise from the floor. * - The prompt shows /tokens as chips: the field's own text is transparent over a copy of it that *   draws them, so the caret and the selection stay the browser's. * - While on screen and untouched, a demo pointer hovers the months, switches the period and a *   tab, types a question into the prompt and walks the funnel and the discs. Any real input *   hands it over to the reader; it starts again after a while. * - It lays itself out from its own width (container queries): the full screen from 1180 px, a

/* Readiness dashboard (readiness-dashboard.tsx): a near-black app frame with a rail, cards a step   lighter, one periwinkle blue for the data and a pink family for the reports; by day a pale grey   frame with white cards and the same blue, a shade deeper.   Colours are the tokens below, light-dark(light, dark) where the two differ: the component takes   the color-scheme it inherits from the page (light unless the page says otherwise), or the one   its colorScheme prop sets (data-color-scheme).   Layout comes from the component's own width (container queries): the full screen from 1180 px,   then a narrower card of figures, two cards a row, an icon rail, and under 560 px a top bar with   a menu button and everything stacked.   Memory. Every value moves by a transform (stems scale, dots, bars and the funnel's pill slide,   discs scale), so changing a series never lays the page out; the demo pointer is one small layer. */.root {  --frame: #f3f3f5;  --panel: #fff;  --panel-2: #f5f5f7;  --control: #ececef;  --chip: #ececef;  --column: #ececf0;  --line: #e4e4e8;  --line-strong: #d6d6dc;

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';/* * The dashboard's four charts, all HTML and CSS but the gauge (one small SVG): * * - LollipopChart: a stem and a dot per period. Each column is a radio of a group, so the arrows *   walk the months; hovering one lights it like the picked one, with its value in a pill over *   the dot. A stem is a full-height line scaled from its foot, a dot a full-height box slid down: *   both move by transforms, so a new series glides in without laying anything out. * - ReportRings: nested discs standing on one point, each sized by the square root of its count *   (so their areas compare), scaled from that point. * - ScoreGauge: a wide arc running out of its card: grey up to the pass mark, blue up to the *   score, hatched beyond. * - UploadFunnel: four steps as hatched bars, each a full-height box slid down; the picked or *   hovered step fills blue, with its count and share in a pill. */import { useId, type KeyboardEvent } from 'react';import {  FUNNEL_NOUNS,  FUNNEL_STEPS,  PASS_MARK,

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';/* * A small select of the dashboard ("Whole firm", "Year 2026", "This year", "October"): a button * that opens a listbox under it. The list takes the focus while it is open: arrows, Home and End * move through it, Enter or Space picks, Escape closes it and gives the focus back to the button; * a press anywhere else or Tab closes it too. */import { useEffect, useId, useRef, useState, type KeyboardEvent } from 'react';import { icons } from './icons';import styles from './readiness-dashboard.module.css';export function Picker<T extends string>({  label,  value,  options,  onChange,  align = 'start',  part,  defaultOpen = false,}: {

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The dashboard's figures: an invented estate agency's compliance year, as its officer sees it. * Every series is written out or derived here, so the component only picks and draws. */export const PRODUCT = 'Corvane';export const MONTHS = [  'Jan',  'Feb',  'Mar',  'Apr',  'May',  'Jun',  'Jul',  'Aug',  'Sep',  'Oct',  'Nov',  'Dec',] as const;export const MONTH_NAMES = [

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The dashboard's line icons, drawn on a 24-unit grid with round 1.6-unit strokes. They are * decorative (aria-hidden); their size comes from the stylesheet, their colour from currentColor. */import type { ReactNode } from 'react';function Icon({ children, className }: { children: ReactNode; className?: string }) {  return (    <svg      className={className}      viewBox="0 0 24 24"      fill="none"      stroke="currentColor"      strokeWidth="1.6"      strokeLinecap="round"      strokeLinejoin="round"      aria-hidden="true"      focusable="false"    >      {children}    </svg>

'use client';import type { CSSProperties, Ref } from 'react';/* * The demo's pointer, and the steps that move it. A demo is a script of awaited steps: wait, or * glide the pointer somewhere. Stopping the demo (the reader takes over, or it scrolls away) ends * the step in progress at once: its promise rejects, which ends the script right there, and the * pointer fades out. * * Each glide is a curved flight played by the Web Animations API, so nothing runs frame by frame. * The points of the flight are handed to whoever wants to move along with it. The arrow and the hand are HTML boxes * that swap by their visibility: a change of style inside an SVG would lay the SVG out again. */export type Point = { x: number; y: number };/** A glide's path and timing, for an animation that plays along with it. */export type Flight = { points: Point[]; timing: KeyframeAnimationOptions };export type Demo = {  /** Resolves after `ms`. */  wait: (ms: number) => Promise<void>;  /** Glides the pointer to `to`, in the stage's own px, in `ms`; `along` gets the flight. */

'use client';import { useCallback, useEffect, useRef, useState } from 'react';/* * When a demo may play on its own: while part of it is on screen and the tab is visible, never * under reduced motion, and not while the reader is using it. `take()` hands it to the reader; it * takes back over `idle` ms after their last input. */export function useAutoplay<T extends HTMLElement>(idle = 6000) {  const ref = useRef<T>(null);  const [visible, setVisible] = useState(false);  const [reduced, setReduced] = useState(true);  const [taken, setTaken] = useState(false);  const timer = useRef(0);  useEffect(() => {    const element = ref.current;    if (!element) return;    let onScreen = false;    const update = () => setVisible(onScreen && !document.hidden);    const observer = new IntersectionObserver(      ([entry]) => {        onScreen = entry.isIntersecting;