feat(drill): ProviderDrawer with Overview tab + DrillDrawerHeader shell

2026-06-21 14:40:08 -06:00
parent 5b3b8619e6
commit 0678e25de7
7 changed files with 241 additions and 1 deletions
@@ -0,0 +1,55 @@
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { DrillDrawerHeader } from "@/components/drill/DrillDrawerHeader";
+import { ProviderOverview } from "./ProviderOverview";
+import { useProviderDetail } from "@/hooks/useProviderDetail";
+import { Skeleton } from "@/components/ui/skeleton";
+
+interface Props {
+  npi: string | null;
+  onClose: () => void;
+}
+
+/**
+ * Provider drill-down drawer (SP21 Task 2.2).
+ *
+ * Side-panel shell that consumes ``useProviderDetail(npi)`` and renders
+ * the Overview tab content (Phase 2 ships only this tab; Phase 3 adds
+ * Claims/Activity tabs once ``recent_claims`` and ``recent_activity``
+ * rendering lands).
+ *
+ * Layout mirrors the ClaimDrawer / RemitDrawer pattern: Radix Dialog
+ * repositioned to the right edge as a fixed-height side panel, with
+ * the shared ``DrillDrawerHeader`` on top and a scrollable body below.
+ */
+export function ProviderDrawer({ npi, onClose }: Props) {
+  const { data, isLoading } = useProviderDetail(npi);
+  return (
+    <Dialog open={npi !== null} onOpenChange={(o) => { if (!o) onClose(); }}>
+      <DialogContent
+        className="fixed right-0 top-0 h-full w-full max-w-2xl translate-x-0 translate-y-0 rounded-none border-l border-border bg-card p-0"
+        aria-describedby={undefined}
+      >
+        {npi === null ? null : (
+          <>
+            <DrillDrawerHeader
+              eyebrow="Provider"
+              title={data?.name ?? "Loading…"}
+              onClose={onClose}
+            />
+            <div className="p-6 overflow-y-auto h-[calc(100%-64px)]">
+              {isLoading || !data ? (
+                <div className="space-y-2">
+                  <Skeleton variant="row" />
+                  <Skeleton variant="row" />
+                  <Skeleton variant="row" />
+                </div>
+              ) : (
+                <ProviderOverview provider={data} />
+              )}
+            </div>
+          </>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}