uhc-portal-components-react 0.1.25 → 0.1.26

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.1.26
+
+- Add a brand-neutral clinical document and Encounter explorer for an
+  authorized care journey.
+- Navigate chronologically between supplied Encounters while preserving
+  `Encounter.partOf` as hierarchy and rendering only document Bundles whose
+  leading Composition references the selected Encounter.
+- Reuse the section viewer for IPS and non-IPS documents; the Composition title
+  and type provide the document label.
+
 ## 0.1.25
 
 - Render every labelled quantity component of a composite FHIR `Observation` in the shared IPS card, including systolic and diastolic blood-pressure values and units.

package/README.md

@@ -53,6 +53,11 @@ The package deliberately exposes modules instead of a cloned application:
 - `IpsBundleSummary`: receives one in-memory IPS document Bundle, obtains all
   `Composition.section` entries through Common Utils and renders every
   section's cards. It performs no ingestion or GW call.
+- `ClinicalDocumentEncounterExplorer`: receives host-authorized Encounter
+  resources and Composition-first document Bundles, provides backward/forward
+  journey navigation and renders either IPS or non-IPS sections with the same
+  viewer. It never treats an Encounter as the clinical subject or performs
+  authorization, fetching or persistence in the browser.
 - `ClinicalArtifactEditor`: renders the same schema-driven clinical form for
   human and animal subjects. The host supplies its UHC/Vet schema,
   terminology-search adapter and authorized persistence callback. Selecting a

package/dist/ClinicalDocumentEncounterExplorer.d.ts

@@ -0,0 +1,62 @@
+import type { ClinicalResourceBundleLike } from 'gdc-common-utils-ts/utils/clinical-resource-view';
+export type EncounterJourneyResource = Readonly<{
+    resourceType: 'Encounter';
+    id?: string;
+    status?: string;
+    class?: Readonly<{
+        display?: string;
+        code?: string;
+    }>;
+    serviceType?: readonly Readonly<{
+        concept?: Readonly<{
+            text?: string;
+        }>;
+    }>[];
+    location?: readonly Readonly<{
+        location?: Readonly<{
+            display?: string;
+            reference?: string;
+        }>;
+    }>[];
+    actualPeriod?: Readonly<{
+        start?: string;
+        end?: string;
+    }>;
+    period?: Readonly<{
+        start?: string;
+        end?: string;
+    }>;
+    partOf?: Readonly<{
+        reference?: string;
+    }>;
+}>;
+export type ClinicalDocumentBundle = ClinicalResourceBundleLike & Readonly<{
+    id?: string;
+}>;
+export type ClinicalDocumentEncounterExplorerLabels = Readonly<{
+    journeyTitle: string;
+    documentsTitle: string;
+    previousEncounter: string;
+    nextEncounter: string;
+    noDocuments: string;
+    emptySection: string;
+    noSections: string;
+    documentTypeLabel: string;
+    currentEncounter: string;
+}>;
+export type ClinicalDocumentEncounterExplorerProps = Readonly<{
+    encounters: readonly EncounterJourneyResource[];
+    documents: readonly ClinicalDocumentBundle[];
+    labels: ClinicalDocumentEncounterExplorerLabels;
+    locale?: string;
+}>;
+/**
+ * Explores one host-authorized Encounter journey and its FHIR document Bundles.
+ *
+ * A document Bundle is Composition-first. The Encounter is care context, not
+ * the clinical subject, and `Encounter.partOf` remains a hierarchy rather than
+ * a substitute for chronological navigation. Fetching, authorization and
+ * persistence remain responsibilities of the hosting portal.
+ */
+export declare function ClinicalDocumentEncounterExplorer({ encounters, documents, labels, locale, }: ClinicalDocumentEncounterExplorerProps): import("react").JSX.Element;
+//# sourceMappingURL=ClinicalDocumentEncounterExplorer.d.ts.map

package/dist/ClinicalDocumentEncounterExplorer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClinicalDocumentEncounterExplorer.d.ts","sourceRoot":"","sources":["../src/ClinicalDocumentEncounterExplorer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,kDAAkD,CAAA;AAGlG,MAAM,MAAM,wBAAwB,GAAG,QAAQ,CAAC;IAC9C,YAAY,EAAE,WAAW,CAAA;IACzB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,QAAQ,CAAC;QAAE,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACrD,WAAW,CAAC,EAAE,SAAS,QAAQ,CAAC;QAAE,OAAO,CAAC,EAAE,QAAQ,CAAC;YAAE,IAAI,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,CAAA;KAAE,CAAC,EAAE,CAAA;IAC5E,QAAQ,CAAC,EAAE,SAAS,QAAQ,CAAC;QAAE,QAAQ,CAAC,EAAE,QAAQ,CAAC;YAAE,OAAO,CAAC,EAAE,MAAM,CAAC;YAAC,SAAS,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,CAAA;KAAE,CAAC,EAAE,CAAA;IACjG,YAAY,CAAC,EAAE,QAAQ,CAAC;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACzD,MAAM,CAAC,EAAE,QAAQ,CAAC;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACnD,MAAM,CAAC,EAAE,QAAQ,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CAC1C,CAAC,CAAA;AAEF,MAAM,MAAM,sBAAsB,GAAG,0BAA0B,GAAG,QAAQ,CAAC;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAA;AAE3F,MAAM,MAAM,uCAAuC,GAAG,QAAQ,CAAC;IAC7D,YAAY,EAAE,MAAM,CAAA;IACpB,cAAc,EAAE,MAAM,CAAA;IACtB,iBAAiB,EAAE,MAAM,CAAA;IACzB,aAAa,EAAE,MAAM,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,MAAM,CAAA;IACpB,UAAU,EAAE,MAAM,CAAA;IAClB,iBAAiB,EAAE,MAAM,CAAA;IACzB,gBAAgB,EAAE,MAAM,CAAA;CACzB,CAAC,CAAA;AAEF,MAAM,MAAM,sCAAsC,GAAG,QAAQ,CAAC;IAC5D,UAAU,EAAE,SAAS,wBAAwB,EAAE,CAAA;IAC/C,SAAS,EAAE,SAAS,sBAAsB,EAAE,CAAA;IAC5C,MAAM,EAAE,uCAAuC,CAAA;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAC,CAAA;AASF;;;;;;;GAOG;AACH,wBAAgB,iCAAiC,CAAC,EAChD,UAAU,EACV,SAAS,EACT,MAAM,EACN,MAAM,GACP,EAAE,sCAAsC,+BAgHxC"}

package/dist/ClinicalDocumentEncounterExplorer.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { IpsBundleSummary } from './IpsBundleSummary.js';
+/**
+ * Explores one host-authorized Encounter journey and its FHIR document Bundles.
+ *
+ * A document Bundle is Composition-first. The Encounter is care context, not
+ * the clinical subject, and `Encounter.partOf` remains a hierarchy rather than
+ * a substitute for chronological navigation. Fetching, authorization and
+ * persistence remain responsibilities of the hosting portal.
+ */
+export function ClinicalDocumentEncounterExplorer({ encounters, documents, labels, locale, }) {
+    const orderedEncounters = useMemo(() => [...encounters].sort((left, right) => encounterStart(left).localeCompare(encounterStart(right))), [encounters]);
+    const documentHeaders = useMemo(() => documents.map((document) => ({ document, header: compositionHeader(document) })), [documents]);
+    const firstDocumentEncounterIndex = orderedEncounters.findIndex((encounter) => documentHeaders.some(({ header }) => referencesEncounter(header.encounterReference, encounter)));
+    const [selectedEncounterId, setSelectedEncounterId] = useState(orderedEncounters[Math.max(firstDocumentEncounterIndex, 0)]?.id ?? '');
+    const selectedIndex = Math.max(orderedEncounters.findIndex((encounter) => encounter.id === selectedEncounterId), 0);
+    const selectedEncounter = orderedEncounters[selectedIndex];
+    const encounterDocuments = selectedEncounter
+        ? documentHeaders.filter(({ header }) => referencesEncounter(header.encounterReference, selectedEncounter))
+        : [];
+    const [selectedDocumentId, setSelectedDocumentId] = useState('');
+    const selectedDocument = encounterDocuments.find(({ document }) => document.id === selectedDocumentId)
+        ?? encounterDocuments[0];
+    function selectEncounter(encounter) {
+        setSelectedEncounterId(encounter.id ?? '');
+        setSelectedDocumentId('');
+    }
+    return (_jsxs("section", { className: "uhcp-document-explorer", "data-clinical-document-explorer": true, children: [_jsxs("header", { className: "uhcp-document-explorer-heading", children: [_jsxs("div", { children: [_jsx("p", { children: labels.currentEncounter }), _jsx("h2", { children: selectedEncounter ? encounterName(selectedEncounter) : labels.journeyTitle })] }), _jsxs("nav", { "aria-label": labels.journeyTitle, children: [_jsx("button", { type: "button", "aria-label": labels.previousEncounter, disabled: selectedIndex <= 0, onClick: () => selectEncounter(orderedEncounters[selectedIndex - 1]), children: "\u2190" }), _jsx("button", { type: "button", "aria-label": labels.nextEncounter, disabled: selectedIndex >= orderedEncounters.length - 1, onClick: () => selectEncounter(orderedEncounters[selectedIndex + 1]), children: "\u2192" })] })] }), _jsx("div", { className: "uhcp-encounter-rail", role: "list", "aria-label": labels.journeyTitle, children: orderedEncounters.map((encounter) => (_jsx("div", { role: "listitem", children: _jsxs("button", { type: "button", "aria-label": encounterName(encounter), "aria-current": encounter.id === selectedEncounter?.id ? 'step' : undefined, onClick: () => selectEncounter(encounter), children: [_jsx("strong", { children: encounterName(encounter) }), _jsx("span", { children: encounter.location?.[0]?.location?.display ?? encounter.class?.display }), _jsx("time", { dateTime: encounterStart(encounter), children: formatPeriod(encounter, locale) }), _jsx("small", { "data-status": encounter.status, children: encounter.status })] }) }, encounter.id))) }), _jsxs("section", { className: "uhcp-document-panel", children: [_jsx("h2", { children: labels.documentsTitle }), encounterDocuments.length === 0 ? _jsx("p", { children: labels.noDocuments }) : (_jsxs(_Fragment, { children: [encounterDocuments.length > 1 ? (_jsx("div", { className: "uhcp-document-tabs", role: "list", children: encounterDocuments.map(({ document, header }) => (_jsx("span", { role: "listitem", children: _jsx("button", { type: "button", "aria-pressed": document === selectedDocument?.document, onClick: () => setSelectedDocumentId(document.id ?? ''), children: header.title }) }, document.id ?? header.title))) })) : null, selectedDocument ? (_jsxs("article", { "data-clinical-document": true, children: [_jsxs("header", { children: [_jsxs("div", { children: [_jsxs("p", { children: [labels.documentTypeLabel, ": ", selectedDocument.header.type] }), _jsx("h3", { children: selectedDocument.header.title })] }), selectedDocument.header.date ? _jsx("time", { dateTime: selectedDocument.header.date, children: formatInstant(selectedDocument.header.date, locale) }) : null] }), _jsx(IpsBundleSummary, { bundle: selectedDocument.document, locale: locale, emptyLabel: labels.emptySection, noSectionsLabel: labels.noSections })] })) : null] }))] })] }));
+}
+function encounterName(encounter) {
+    return encounter.serviceType?.find(({ concept }) => concept?.text)?.concept?.text
+        ?? encounter.class?.display
+        ?? encounter.id
+        ?? 'Encounter';
+}
+function encounterStart(encounter) {
+    return encounter.actualPeriod?.start ?? encounter.period?.start ?? '';
+}
+function formatPeriod(encounter, locale) {
+    const period = encounter.actualPeriod ?? encounter.period;
+    if (!period?.start)
+        return '';
+    const start = formatInstant(period.start, locale);
+    return period.end ? `${start} – ${formatInstant(period.end, locale)}` : start;
+}
+function formatInstant(value, locale) {
+    const date = new Date(value);
+    return Number.isNaN(date.valueOf()) ? value : new Intl.DateTimeFormat(locale, {
+        dateStyle: 'medium',
+        timeStyle: 'short',
+        timeZone: 'UTC',
+    }).format(date);
+}
+function compositionHeader(document) {
+    const composition = (document.entry ?? document.data ?? [])
+        .map((entry) => entry.resource)
+        .find((resource) => resource?.resourceType === 'Composition');
+    return {
+        title: composition?.title ?? document.id ?? 'Clinical document',
+        type: composition?.type?.text
+            ?? composition?.type?.coding?.find(({ display }) => display)?.display
+            ?? 'Clinical document',
+        encounterReference: composition?.encounter?.reference,
+        date: composition?.date,
+    };
+}
+function referencesEncounter(reference, encounter) {
+    return Boolean(encounter.id && (reference === `Encounter/${encounter.id}` || reference === encounter.id));
+}

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export * from './ProfileProtectionGate.js';
 export * from './PortalLoadingSkeleton.js';
 export * from './ClinicalSectionSummary.js';
 export * from './IpsBundleSummary.js';
+export * from './ClinicalDocumentEncounterExplorer.js';
 export * from './ClinicalArtifactEditor.js';
 export * from './VitalSignArtifactEditor.js';
 export * from './InvitationAcceptancePanel.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA;AAChC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,0CAA0C,CAAA;AACxD,cAAc,kCAAkC,CAAA;AAChD,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oCAAoC,CAAA;AAClD,cAAc,sCAAsC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,kBAAkB,CAAA;AAChC,cAAc,yBAAyB,CAAA;AACvC,cAAc,mBAAmB,CAAA;AACjC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,6BAA6B,CAAA;AAC3C,cAAc,uBAAuB,CAAA;AACrC,cAAc,wCAAwC,CAAA;AACtD,cAAc,6BAA6B,CAAA;AAC3C,cAAc,8BAA8B,CAAA;AAC5C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,wBAAwB,CAAA;AACtC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,0CAA0C,CAAA;AACxD,cAAc,kCAAkC,CAAA;AAChD,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,oCAAoC,CAAA;AAClD,cAAc,sCAAsC,CAAA"}

package/dist/index.js

@@ -8,6 +8,7 @@ export * from './ProfileProtectionGate.js';
 export * from './PortalLoadingSkeleton.js';
 export * from './ClinicalSectionSummary.js';
 export * from './IpsBundleSummary.js';
+export * from './ClinicalDocumentEncounterExplorer.js';
 export * from './ClinicalArtifactEditor.js';
 export * from './VitalSignArtifactEditor.js';
 export * from './InvitationAcceptancePanel.js';

package/dist/styles.css

@@ -183,6 +183,27 @@ html[data-theme='dark'] .uhcp-brand-artwork-dark { display: block !important; }
 .uhcp-clinical-editor footer button,.uhcp-terminology-results button { border:1px solid var(--uhcp-border); border-radius:.7rem; cursor:pointer; font:inherit; padding:.7rem 1rem; }
 .uhcp-clinical-editor footer button[type=submit] { background:linear-gradient(135deg,var(--uhcp-action-start),var(--uhcp-action-end)); color:#fff; font-weight:800; }
 .uhcp-clinical-editor-error { color:#b42318; font-weight:700; }
+.uhcp-document-explorer { background:var(--uhcp-surface); color:var(--uhcp-text); display:grid; gap:1rem; padding:1rem; }
+.uhcp-document-explorer button { color:inherit; cursor:pointer; font:inherit; }
+.uhcp-document-explorer button:disabled { cursor:not-allowed; opacity:.45; }
+.uhcp-document-explorer-heading { align-items:center; display:flex; gap:1rem; justify-content:space-between; }
+.uhcp-document-explorer-heading p,.uhcp-document-panel>article>header p { color:var(--uhcp-muted); font-size:.8rem; font-weight:750; margin:0 0 .25rem; text-transform:uppercase; }
+.uhcp-document-explorer-heading h2,.uhcp-document-panel h2,.uhcp-document-panel h3 { margin:0; }
+.uhcp-document-explorer-heading nav { display:flex; gap:.45rem; }
+.uhcp-document-explorer-heading button { background:var(--uhcp-panel); border:1px solid var(--uhcp-border); border-radius:50%; height:2.5rem; width:2.5rem; }
+.uhcp-encounter-rail { display:flex; gap:.75rem; overflow-x:auto; padding:.15rem .05rem .65rem; scroll-snap-type:x proximity; }
+.uhcp-encounter-rail>div { flex:0 0 min(17rem,76vw); scroll-snap-align:start; }
+.uhcp-encounter-rail>div>button { background:var(--uhcp-panel); border:1px solid var(--uhcp-border); border-radius:1rem; display:grid; gap:.45rem; min-height:9.5rem; padding:1rem; text-align:start; width:100%; }
+.uhcp-encounter-rail>div>button[aria-current=step] { border-color:var(--uhcp-turquoise); box-shadow:0 0 0 2px color-mix(in srgb,var(--uhcp-turquoise) 24%,transparent); }
+.uhcp-encounter-rail span,.uhcp-encounter-rail time { color:var(--uhcp-muted); font-size:.78rem; }
+.uhcp-encounter-rail small { background:var(--uhcp-surface-muted); border-radius:999px; justify-self:start; padding:.25rem .55rem; }
+.uhcp-document-panel { background:var(--uhcp-panel); border:1px solid var(--uhcp-border); border-radius:1.5rem; padding:1.25rem; }
+.uhcp-document-panel>p { color:var(--uhcp-muted); }
+.uhcp-document-tabs { display:flex; gap:.5rem; overflow:auto; padding:.75rem 0; }
+.uhcp-document-tabs button { background:var(--uhcp-surface-muted); border:1px solid var(--uhcp-border); border-radius:999px; padding:.55rem .8rem; white-space:nowrap; }
+.uhcp-document-tabs button[aria-pressed=true] { background:var(--uhcp-turquoise); color:#fff; }
+.uhcp-document-panel>article>header { align-items:start; border-bottom:1px solid var(--uhcp-border); display:flex; gap:1rem; justify-content:space-between; margin:1rem 0; padding-bottom:1rem; }
+.uhcp-document-panel>article>header time { color:var(--uhcp-muted); font-size:.8rem; white-space:nowrap; }
 .uhcp-terminology-results ul { display:grid; gap:.35rem; list-style:none; margin:.25rem 0 0; padding:0; }
 .uhcp-terminology-results button { background:var(--uhcp-surface-muted); color:inherit; display:grid; text-align:start; width:100%; }
 .uhcp-terminology-results small { color:var(--uhcp-muted); display:block; font-weight:400; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uhc-portal-components-react",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "description": "Brand-neutral React portal shell, account preferences and protected-profile UI for UHC and VetChain portals.",
   "license": "Apache-2.0",
   "type": "module",
@@ -31,7 +31,7 @@
     "react-dom": ">=18.3.0"
   },
   "dependencies": {
-    "fhir-data-utils-ts": "0.6.7",
+    "fhir-data-utils-ts": "0.6.8",
     "gdc-common-utils-ts": "^2.3.12"
   },
   "devDependencies": {