+
-
-
+
+
-
- {label}
+
+ {metric.label}
-
- {value}
-
- {meta ? (
-
- {meta}
-
- ) : null}
+
{metric.value}
);
}
@@ -277,6 +290,45 @@ function SidebarCard({ title, icon: Icon, children }: { title: string; icon: Luc
);
}
+// Quick-reference values are the verbose ones (≈164 chars median, up to ~560) and
+// would otherwise make the fixed-width sidebar run very tall. Long values collapse
+// to two lines with a chevron affordance and expand in place on tap — the same
+// clamp-on-collapse pattern the differential sections use (line-clamp-2 +
+// group-open:line-clamp-none inside a
) — so nothing is removed, just
+// tucked one tap away. Short values render as a plain row with no toggle.
+function QuickRefRow({ row }: { row: MedicationQuickRow }) {
+ const value = row.value.replace(/\*\*/g, "");
+ const label = (
+ {row.label}
+ );
+
+ if (value.length <= 110) {
+ return (
+
+ );
+ }
+
+ return (
+
+
+
+ {label}
+
+
+
+ {value}
+
+
+
+ );
+}
+
function MedicationAccessPanel({ record }: { record: MedicationRecord }) {
const badges = useMemo(() => medicationAccessBadges(record), [record]);
const fields = useMemo(() => medicationAccessFields(record), [record]);
@@ -314,8 +366,9 @@ function MedicationRecordDetail({
record: MedicationRecord;
governance?: MedicationGovernance;
}) {
- const tiles = useMemo(() => medicationDetailTiles(record), [record]);
+ const metrics = useMemo(() => medicationHeroMetrics(record), [record]);
const badges = useMemo(() => medicationIdentityBadges(record, governance), [record, governance]);
+ const indication = useMemo(() => medicationIndication(record), [record]);
const [activeTab, setActiveTab] = useState("summary");
const sectionsByTab = useMemo(() => {
@@ -359,26 +412,22 @@ function MedicationRecordDetail({
) : null}
+ {indication ? (
+
+ {indication}
+
+ ) : null}