feat(dashboard): Recent activity events route to entity by kind
SP21 Task 2.5 — the Dashboard's 'Recent activity' card now routes clicks
to the matching entity drawer / page by event kind:
- claim_* → /claims?claim=<id> (drawer in Phase 5)
- provider_added → /providers?provider=<npi> (ProviderDrawer)
- remit_received → toast 'coming in a later phase' (RemitDrawer in Phase 4)
- anything else → toast (manual_match, unknown kinds)
Implementation:
- New src/lib/event-routing.ts with the eventKindToUrl() helper,
plus a unit test covering all 6 + default branches.
- src/components/ActivityFeed.tsx gains an optional onItemClick
prop; when set, each row gets role='button', tabIndex=0, the
drillable hover affordance (chevron + tint), and an Enter/Space
keybinding. e.stopPropagation() is called before the handler so a
parent row click can't double-fire (same fix as Task 2.4).
- src/pages/Dashboard.tsx wires the handler on the 'Recent activity'
card via eventKindToUrl + sonner toast for unhandled kinds.
- Backend: CycloneStore.recent_activity() now exposes claimId and
remittanceId on each row (read from ActivityEvent.claim_id /
remittance_id) so the routing helper has the entity ids it needs.
- The frontend Activity interface gains optional claimId /
remittanceId fields; the in-memory sample data and the
addClaim store action populate them so the dashboard works in
both API-configured and sample-data modes.
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
import type { KeyboardEvent, MouseEvent } from "react";
|
||||
import {
|
||||
Banknote,
|
||||
CheckCircle2,
|
||||
@@ -63,9 +64,22 @@ const FALLBACK_KIND: { icon: LucideIcon; tone: string; tint: string } = {
|
||||
export function ActivityFeed({
|
||||
items,
|
||||
emptyMessage = "No activity yet.",
|
||||
onItemClick,
|
||||
}: {
|
||||
items: Activity[];
|
||||
emptyMessage?: string;
|
||||
/**
|
||||
* Optional click handler for SP21 Universal Drill-Down (Task 2.5).
|
||||
* When provided, each row becomes a clickable target: the row's
|
||||
* outer `<li>` gets `role="button"`, `tabIndex`, the `drillable`
|
||||
* hover affordance (chevron + tint), and an Enter/Space keybinding.
|
||||
*
|
||||
* `e.stopPropagation()` is called before invoking the handler so the
|
||||
* click doesn't bubble to a hypothetical parent row click — same
|
||||
* fix that landed on `DrillableCell` in Task 2.4. When omitted, the
|
||||
* feed renders exactly as before (no extra DOM, no extra attrs).
|
||||
*/
|
||||
onItemClick?: (event: Activity) => void;
|
||||
}) {
|
||||
if (items.length === 0) {
|
||||
return (
|
||||
@@ -79,11 +93,36 @@ export function ActivityFeed({
|
||||
{items.map((a) => {
|
||||
const cfg = kindConfig[a.kind] ?? FALLBACK_KIND;
|
||||
const Icon = cfg.icon;
|
||||
// SP21 Task 2.5: when a click handler is wired, the row
|
||||
// becomes a keyboard-focusable button-like element with the
|
||||
// drillable hover affordance. We attach the handler to the
|
||||
// <li> directly (matching the Dashboard's existing patterns
|
||||
// for "Top providers" / "Recent denials" rows) so the click
|
||||
// target covers the full row width including padding.
|
||||
const rowProps = onItemClick
|
||||
? {
|
||||
role: "button" as const,
|
||||
tabIndex: 0,
|
||||
"aria-label": `View ${a.kind.replace(/_/g, " ")}: ${a.message}`,
|
||||
className:
|
||||
"drillable flex items-start gap-3 py-3 first:pt-0 last:pb-0 rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
|
||||
onClick: (e: MouseEvent<HTMLLIElement>) => {
|
||||
e.stopPropagation();
|
||||
onItemClick(a);
|
||||
},
|
||||
onKeyDown: (e: KeyboardEvent<HTMLLIElement>) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onItemClick(a);
|
||||
}
|
||||
},
|
||||
}
|
||||
: {
|
||||
className: "flex items-start gap-3 py-3 first:pt-0 last:pb-0",
|
||||
};
|
||||
return (
|
||||
<li
|
||||
key={a.id}
|
||||
className="flex items-start gap-3 py-3 first:pt-0 last:pb-0"
|
||||
>
|
||||
<li key={a.id} {...rowProps}>
|
||||
<div
|
||||
className={cn(
|
||||
"mt-0.5 h-7 w-7 shrink-0 rounded-md ring-1 ring-inset ring-border/40 flex items-center justify-center",
|
||||
|
||||
Reference in New Issue
Block a user