frontend: pharmacy inventory, lab add-result & analysis charts

- Pharmacy: the sidebar entry now expands into Pharmacy + a new Inventory page
  (searchable medication stock with derived in-stock/low/out availability,
  backed by /api/inventory). Fix the dispensing-queue "Expiring" badge so it
  only flags courses ending within the next 7 days, not ones already elapsed.
- Lab "Add analysis result": the patient picker no longer lists patients until
  you type and supports arrow-key + Enter selection; the test field offers a
  catalog of common analyses with an Advanced option (custom analysis + ref
  range); submitted results now show immediately in a Recent results feed.
- Analysis: add a Live panel (real-time line chart) and replace the flat trend
  sparklines with bklit-ui area + bar charts (installed from the @bklit shadcn
  registry; chart CSS variables wired into the theme for light and dark).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/components/charts/highlight-segment.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { type MotionValue, motion } from "motion/react";
+import { type RefObject, useId } from "react";
+
+// Hover-highlight overlay: re-strokes the base path `d`, clipped to a vertical
+// band whose x/width spring to track the hovered point, so only the segment
+// around the dot shows brighter. The band comes from `useHighlightSegment`;
+// because the bright stroke reuses the base `d`, it follows whatever curve is
+// drawn (see `highlight-segment-bounds.ts` for the band-extent caveat).
+
+export interface HighlightSegmentProps {
+  /** Ref to the rendered base stroke `<path>` — its `d` is re-used verbatim. */
+  pathRef: RefObject<SVGPathElement | null>;
+  /** Whether to render (caller gates on showHighlight + active + loaded). */
+  visible: boolean;
+  stroke: string;
+  strokeWidth: number;
+  /** Plot height — the clip band spans it fully. */
+  height: number;
+  /** Spring-eased left edge of the clip band (px). */
+  x: MotionValue<number>;
+  /** Spring-eased width of the clip band (px). */
+  width: MotionValue<number>;
+}
+
+export function HighlightSegment({
+  pathRef,
+  visible,
+  stroke,
+  strokeWidth,
+  height,
+  x,
+  width,
+}: HighlightSegmentProps) {
+  const clipId = useId();
+  if (!(visible && pathRef.current)) {
+    return null;
+  }
+  return (
+    <>
+      <defs>
+        <clipPath id={clipId}>
+          <motion.rect height={height} width={width} x={x} y={0} />
+        </clipPath>
+      </defs>
+      <motion.path
+        animate={{ opacity: 1 }}
+        clipPath={`url(#${clipId})`}
+        d={pathRef.current.getAttribute("d") || ""}
+        exit={{ opacity: 0 }}
+        fill="none"
+        initial={{ opacity: 0 }}
+        stroke={stroke}
+        strokeLinecap="round"
+        strokeWidth={strokeWidth}
+        transition={{ duration: 0.4, ease: "easeInOut" }}
+      />
+    </>
+  );
+}
+
+HighlightSegment.displayName = "HighlightSegment";
+
+export default HighlightSegment;