feat(hq-web): relationship-pulse ribbon on Client 360 overview
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>feat/client-detail-redesign
Thomas Joise
5 days ago
parent
eaecaedd3f
commit
08bb25abfc
@ -0,0 +1,71 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import { groupPulse, LANES, lastMonths, type PulseEvent } from '../pulse'
|
||||||
|
|
||||||
|
const TONE_VAR: Record<PulseEvent['tone'], string> = {
|
||||||
|
accent: 'var(--accent)', ok: 'var(--ok)', warn: 'var(--warn)', err: 'var(--err)',
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Relationship pulse — last 12 months (H-04's timeline ribbon).
|
||||||
|
* Four lanes on a shared month axis; hover fills the readout bar; click opens
|
||||||
|
* the record. Plain DOM dots — no chart library.
|
||||||
|
*/
|
||||||
|
export function PulseRibbon(props: {
|
||||||
|
events: PulseEvent[]
|
||||||
|
todayIso: string
|
||||||
|
onOpen: (ev: PulseEvent) => void
|
||||||
|
}) {
|
||||||
|
const months = lastMonths(props.todayIso)
|
||||||
|
const cells = groupPulse(props.events, months)
|
||||||
|
const [focus, setFocus] = useState<PulseEvent | undefined>()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="pulse">
|
||||||
|
<div className="pulse-head">
|
||||||
|
<h3>Relationship pulse — last 12 months</h3>
|
||||||
|
<div className="pulse-legend">
|
||||||
|
{LANES.map((lane, i) => (
|
||||||
|
<span key={lane}><span className="dot" style={{ background: TONE_VAR[i === 0 ? 'accent' : i === 1 ? 'ok' : i === 2 ? 'warn' : 'err'] }} />{lane.toUpperCase()}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="pulse-grid" style={{ gridTemplateColumns: `110px repeat(${months.length}, 1fr)` }}>
|
||||||
|
{LANES.map((lane, li) => (
|
||||||
|
<div key={lane} style={{ display: 'contents' }}>
|
||||||
|
<div className="pulse-lane">{lane}</div>
|
||||||
|
{months.map((m, mi) => {
|
||||||
|
const evs = cells.get(`${li}:${mi}`) ?? []
|
||||||
|
return (
|
||||||
|
<div key={m} className="pulse-cell">
|
||||||
|
{evs.slice(0, 3).map((ev) => (
|
||||||
|
<button
|
||||||
|
key={ev.id}
|
||||||
|
type="button"
|
||||||
|
className="pulse-dot"
|
||||||
|
style={{ background: TONE_VAR[ev.tone] }}
|
||||||
|
title={ev.label}
|
||||||
|
onMouseEnter={() => setFocus(ev)}
|
||||||
|
onFocus={() => setFocus(ev)}
|
||||||
|
onClick={() => props.onOpen(ev)}
|
||||||
|
aria-label={ev.label}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
{evs.length > 3 && <span className="pulse-more">+{evs.length - 3}</span>}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<div className="pulse-lane" />
|
||||||
|
{months.map((m) => (
|
||||||
|
<div key={m} className="pulse-month">{m.slice(5)}/{m.slice(2, 4)}</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="pulse-readout">
|
||||||
|
{focus !== undefined
|
||||||
|
? <><span className="mono">{focus.date}</span> · {focus.label} <span className="pulse-open">open →</span></>
|
||||||
|
: 'Hover an event · click to open it'}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
/** Pure math for the relationship-pulse ribbon (Client 360 overview). */
|
||||||
|
|
||||||
|
export interface PulseEvent {
|
||||||
|
id: string
|
||||||
|
lane: number
|
||||||
|
date: string // ISO yyyy-mm-dd
|
||||||
|
label: string
|
||||||
|
tone: 'accent' | 'ok' | 'warn' | 'err'
|
||||||
|
}
|
||||||
|
|
||||||
|
export const LANES = ['Documents', 'Payments', 'Interactions', 'AMC & renewals'] as const
|
||||||
|
|
||||||
|
/** n month keys ('YYYY-MM') ending at todayIso's month, oldest first. */
|
||||||
|
export function lastMonths(todayIso: string, n = 12): string[] {
|
||||||
|
const year = Number(todayIso.slice(0, 4))
|
||||||
|
const month = Number(todayIso.slice(5, 7)) // 1-based
|
||||||
|
const out: string[] = []
|
||||||
|
for (let i = n - 1; i >= 0; i--) {
|
||||||
|
const total = year * 12 + (month - 1) - i
|
||||||
|
const y = Math.floor(total / 12)
|
||||||
|
const m = total % 12 + 1
|
||||||
|
out.push(`${y}-${String(m).padStart(2, '0')}`)
|
||||||
|
}
|
||||||
|
return out
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Bucket events into `${lane}:${monthIndex}` cells; out-of-window events are dropped. */
|
||||||
|
export function groupPulse(events: PulseEvent[], months: string[]): Map<string, PulseEvent[]> {
|
||||||
|
const index = new Map<string, number>()
|
||||||
|
months.forEach((m, i) => index.set(m, i))
|
||||||
|
const out = new Map<string, PulseEvent[]>()
|
||||||
|
for (const ev of events) {
|
||||||
|
const mi = index.get(ev.date.slice(0, 7))
|
||||||
|
if (mi === undefined) continue
|
||||||
|
const key = `${ev.lane}:${mi}`
|
||||||
|
const cell = out.get(key)
|
||||||
|
if (cell !== undefined) cell.push(ev)
|
||||||
|
else out.set(key, [ev])
|
||||||
|
}
|
||||||
|
return out
|
||||||
|
}
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
import { describe, expect, it } from 'vitest'
|
||||||
|
import { groupPulse, lastMonths, type PulseEvent } from '../src/pulse'
|
||||||
|
|
||||||
|
describe('lastMonths', () => {
|
||||||
|
it('returns 12 months ending at the given date, oldest first', () => {
|
||||||
|
const m = lastMonths('2026-07-17')
|
||||||
|
expect(m).toHaveLength(12)
|
||||||
|
expect(m[0]).toBe('2025-08')
|
||||||
|
expect(m[11]).toBe('2026-07')
|
||||||
|
})
|
||||||
|
it('crosses year boundaries correctly', () => {
|
||||||
|
expect(lastMonths('2026-01-05', 3)).toEqual(['2025-11', '2025-12', '2026-01'])
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('groupPulse', () => {
|
||||||
|
const ev = (lane: number, date: string, id: string): PulseEvent =>
|
||||||
|
({ id, lane, date, label: id, tone: 'accent' })
|
||||||
|
const months = lastMonths('2026-07-17')
|
||||||
|
|
||||||
|
it('buckets events by lane and month', () => {
|
||||||
|
const g = groupPulse([ev(0, '2026-07-01', 'a'), ev(0, '2026-07-30', 'b'), ev(2, '2025-08-09', 'c')], months)
|
||||||
|
expect(g.get('0:11')?.map((e) => e.id)).toEqual(['a', 'b'])
|
||||||
|
expect(g.get('2:0')?.map((e) => e.id)).toEqual(['c'])
|
||||||
|
})
|
||||||
|
it('drops events outside the window', () => {
|
||||||
|
const g = groupPulse([ev(1, '2024-01-01', 'old'), ev(1, '2027-01-01', 'future')], months)
|
||||||
|
expect(g.size).toBe(0)
|
||||||
|
})
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue