@mieweb/ui 0.2.2 → 0.2.4

package/dist/index.js

@@ -29,8 +29,8 @@ import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '.
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from './chunk-AWIULTJW.js';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from './chunk-JFAXLE2J.js';
 export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants, tabsTriggerVariants } from './chunk-JFAXLE2J.js';
-import { Modal, ModalHeader, ModalTitle, ModalClose, ModalBody, ModalFooter } from './chunk-SD44QJIP.js';
-export { Modal, ModalBody, ModalClose, ModalFooter, ModalHeader, ModalTitle, modalContentVariants, modalOverlayVariants } from './chunk-SD44QJIP.js';
+import { Modal, ModalHeader, ModalTitle, ModalClose, ModalBody, ModalFooter } from './chunk-TCQ27C5M.js';
+export { Modal, ModalBody, ModalClose, ModalFooter, ModalHeader, ModalTitle, modalContentVariants, modalOverlayVariants } from './chunk-TCQ27C5M.js';
 export { Pagination, SimplePagination, paginationButtonVariants } from './chunk-ONWOB76P.js';
 export { PhoneInput, PhoneInputGroup } from './chunk-4YRAEFYW.js';
 import { Progress } from './chunk-4MHTSFPX.js';
@@ -55,7 +55,7 @@ import { Input } from './chunk-NXRLGHEC.js';
 export { Input, inputVariants } from './chunk-NXRLGHEC.js';
 import { Dropdown, DropdownItem } from './chunk-265CFCCX.js';
 export { Dropdown, DropdownContent, DropdownHeader, DropdownItem, DropdownLabel, DropdownSeparator } from './chunk-265CFCCX.js';
-import { Clock, FileText, ArrowLeft, Menu, ChevronUp, ChevronDown, Calendar, Mail, Phone, Building, Stethoscope, Users, Share, User, Download, ExternalLink, MoreVertical, Pencil, Send, Printer, ClipboardPlus, ClipboardCheck, FilePlus, FileCheck, Wheat, Pill, Bell, FileHeart, HeartPulse, AlertCircle as AlertCircle$1, Paperclip, ClipboardList, MoreHorizontal, Trash2, Plus, CheckCircle, Upload as Upload$1, Scan, Camera, ScanLine, RefreshCw as RefreshCw$1, Image, X as X$1, Check as Check$1 } from './chunk-Y22SOAJM.js';
+import { Clock, FileText, ArrowLeft, Stethoscope, Users, Mail, Phone, Share, ChevronDown, User, Download, ExternalLink, MoreVertical, Pencil, Send, Calendar, Printer, ClipboardPlus, ClipboardCheck, FilePlus, FileCheck, Wheat, Pill, Bell, FileHeart, HeartPulse, AlertCircle as AlertCircle$1, Paperclip, ClipboardList, MoreHorizontal, Trash2, Plus, CheckCircle, Upload as Upload$1, Scan, Camera, ScanLine, RefreshCw as RefreshCw$1, Image, X as X$1, Check as Check$1 } from './chunk-3K7QCDSV.js';
 import { useCommandK, useIsMobile, useMediaQuery } from './chunk-CP7NPDQW.js';
 export { useCommandK, useIsDesktop, useIsLargeDesktop, useIsMobile, useIsMobileOrTablet, useIsSmallTablet, useIsTablet, useKeyboardShortcut, useMediaQuery } from './chunk-CP7NPDQW.js';
 export { useTheme } from './chunk-KJZNEVYM.js';
@@ -83,7 +83,7 @@ import React48__default, { createContext, useState, useEffect, useCallback, useM
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import * as ReactDOM from 'react-dom';
-import { FileUp, X, AlertCircle, Calendar as Calendar$1, ChevronLeft, ChevronRight, ChevronDown as ChevronDown$1, FolderUp, Upload, Edit2, Check, ChevronUp as ChevronUp$1, Phone as Phone$1, Mail as Mail$1, Clock as Clock$1, MapPin, Shield, Building2, SlidersHorizontal, Trash2 as Trash2$1, Pencil as Pencil$1, Plus as Plus$1, Link, AlertTriangle, RefreshCw } from 'lucide-react';
+import { FileUp, X, AlertCircle, Calendar as Calendar$1, ChevronLeft, ChevronRight, ChevronDown as ChevronDown$1, FolderUp, Upload, Edit2, Check, ChevronUp, Phone as Phone$1, Mail as Mail$1, Clock as Clock$1, MapPin, Shield, Building2, SlidersHorizontal, Trash2 as Trash2$1, Pencil as Pencil$1, Plus as Plus$1, Link, AlertTriangle, RefreshCw } from 'lucide-react';
 
 var SEX_OPTIONS = [
   { value: "F", label: "Female" },
@@ -8628,7 +8628,7 @@ var countChipVariants = cva(
       variant: {
         default: "bg-muted text-foreground/70 dark:bg-muted dark:text-foreground/70",
         info: "bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200",
-        informative: "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200",
+        informative: "bg-blue-50 text-blue-600 dark:bg-blue-950/50 dark:text-blue-300",
         success: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200",
         warning: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200",
         alert: "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200"
@@ -9006,6 +9006,7 @@ var CountBadge = React48.forwardRef(
     onEdit,
     onDelete,
     deleteLabel,
+    countVariant,
     ...props
   }, ref) => {
     const [open, setOpen] = React48.useState(false);
@@ -9067,6 +9068,7 @@ var CountBadge = React48.forwardRef(
           {
             ref,
             type: "button",
+            "data-count-badge": true,
             className: cn(countBadgeVariants({ variant }), className),
             onClick: (e) => {
               if (showMenu) {
@@ -9079,7 +9081,15 @@ var CountBadge = React48.forwardRef(
             children: [
               icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: icon }),
               /* @__PURE__ */ jsx("span", { children: label }),
-              /* @__PURE__ */ jsx("span", { className: cn(countChipVariants({ variant })), children: count })
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    countChipVariants({ variant: countVariant ?? variant })
+                  ),
+                  children: count
+                }
+              )
             ]
           }
         ),
@@ -13945,7 +13955,7 @@ function EmployeeProfileCard({
           "aria-controls": "employee-details",
           children: isExpanded ? /* @__PURE__ */ jsxs(Fragment, { children: [
             lessDetails,
-            /* @__PURE__ */ jsx(ChevronUp$1, { className: "h-4 w-4" })
+            /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
           ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             moreDetails,
             /* @__PURE__ */ jsx(ChevronDown$1, { className: "h-4 w-4" })
@@ -14327,7 +14337,7 @@ function EmployerList({
     const d = typeof date === "string" ? new Date(date) : date;
     return d.toLocaleDateString();
   };
-  const getStatusVariant2 = (status) => {
+  const getStatusVariant = (status) => {
     switch (status) {
       case "active":
         return "success";
@@ -14444,7 +14454,7 @@ function EmployerList({
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx("h3", { className: "truncate font-medium text-gray-900 dark:text-white", children: employer.name }),
-              /* @__PURE__ */ jsx(Badge, { variant: getStatusVariant2(employer.status), children: employer.status })
+              /* @__PURE__ */ jsx(Badge, { variant: getStatusVariant(employer.status), children: employer.status })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex items-center gap-4", children: [
               employer.email && /* @__PURE__ */ jsx("span", { className: "truncate text-sm text-gray-500 dark:text-gray-400", children: employer.email }),
@@ -14626,7 +14636,7 @@ function EmployerView({
       currency: "USD"
     }).format(amount);
   };
-  const getStatusVariant2 = (status) => {
+  const getStatusVariant = (status) => {
     switch (status) {
       case "active":
       case "completed":
@@ -14666,7 +14676,7 @@ function EmployerView({
           /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold text-gray-900 dark:text-white", children: employer.name }),
-              /* @__PURE__ */ jsx(Badge, { variant: getStatusVariant2(employer.status), children: employer.status })
+              /* @__PURE__ */ jsx(Badge, { variant: getStatusVariant(employer.status), children: employer.status })
             ] }),
             /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
               "Linked since ",
@@ -14768,7 +14778,7 @@ function EmployerView({
                 /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: order.services.join(", ") })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
-                /* @__PURE__ */ jsx(Badge, { variant: getStatusVariant2(order.status), children: order.status }),
+                /* @__PURE__ */ jsx(Badge, { variant: getStatusVariant(order.status), children: order.status }),
                 /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-gray-500 dark:text-gray-400", children: formatDate4(order.createdDate) })
               ] }),
               onViewOrder && /* @__PURE__ */ jsx(
@@ -14804,7 +14814,7 @@ function EmployerView({
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
                 /* @__PURE__ */ jsx("p", { className: "font-semibold text-gray-900 dark:text-white", children: formatCurrency3(invoice.amount) }),
-                /* @__PURE__ */ jsx(Badge, { variant: getStatusVariant2(invoice.status), children: invoice.status })
+                /* @__PURE__ */ jsx(Badge, { variant: getStatusVariant(invoice.status), children: invoice.status })
               ] }),
               onViewInvoice && /* @__PURE__ */ jsx(
                 Button,
@@ -17009,7 +17019,7 @@ function InvoiceList({
   const formatCurrency3 = (amount) => {
     return `${currency}${amount.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
   };
-  const getStatusVariant2 = (status) => {
+  const getStatusVariant = (status) => {
     switch (status) {
       case "paid":
         return "success";
@@ -17197,7 +17207,7 @@ function InvoiceList({
               }
             ) }),
             /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-right", children: /* @__PURE__ */ jsx("p", { className: "font-medium text-gray-900 dark:text-white", children: formatCurrency3(invoice.amount) }) }),
-            /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-center", children: /* @__PURE__ */ jsx(Badge, { variant: getStatusVariant2(invoice.status), children: invoice.status }) })
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-center", children: /* @__PURE__ */ jsx(Badge, { variant: getStatusVariant(invoice.status), children: invoice.status }) })
           ]
         },
         invoice.id
@@ -17234,7 +17244,7 @@ function InvoicePaymentPage({
     const d = typeof date === "string" ? new Date(date) : date;
     return d.toLocaleDateString();
   };
-  const getStatusVariant2 = (status) => {
+  const getStatusVariant = (status) => {
     switch (status) {
       case "paid":
         return "success";
@@ -17356,7 +17366,7 @@ function InvoicePaymentPage({
                 "Invoice ",
                 invoice.invoiceNumber
               ] }),
-              /* @__PURE__ */ jsx(Badge, { variant: getStatusVariant2(invoice.status), children: invoice.status })
+              /* @__PURE__ */ jsx(Badge, { variant: getStatusVariant(invoice.status), children: invoice.status })
             ] }) }),
             /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
               /* @__PURE__ */ jsxs("div", { className: "space-y-1 text-sm text-gray-600 dark:text-gray-400", children: [
@@ -17573,7 +17583,7 @@ function InvoiceView({
   const formatCurrency3 = (amount) => {
     return `${currency}${amount.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
   };
-  const getStatusVariant2 = (status) => {
+  const getStatusVariant = (status) => {
     switch (status) {
       case "paid":
         return "success";
@@ -17619,7 +17629,7 @@ function InvoiceView({
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold text-gray-900 dark:text-white", children: invoice.invoiceNumber }),
-            /* @__PURE__ */ jsx(Badge, { variant: getStatusVariant2(invoice.status), children: invoice.status })
+            /* @__PURE__ */ jsx(Badge, { variant: getStatusVariant(invoice.status), children: invoice.status })
           ] }),
           /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
             "Issued ",
@@ -20725,7 +20735,7 @@ function OrderSidebar({
       year: "numeric"
     });
   };
-  const getStatusVariant2 = (s) => {
+  const getStatusVariant = (s) => {
     switch (s?.toLowerCase()) {
       case "completed":
         return "success";
@@ -20804,7 +20814,7 @@ function OrderSidebar({
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "h-[calc(100%-8rem)] overflow-y-auto p-4", children: [
             /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center gap-2", children: [
-              status && /* @__PURE__ */ jsx(Badge, { variant: getStatusVariant2(status), children: status }),
+              status && /* @__PURE__ */ jsx(Badge, { variant: getStatusVariant(status), children: status }),
               priority !== "normal" && /* @__PURE__ */ jsx(
                 "span",
                 {
@@ -20951,24 +20961,6 @@ function formatFullName(name) {
   if (name.suffix) parts.push(name.suffix);
   return parts.filter(Boolean).join(" ");
 }
-function getStatusVariant(status) {
-  switch (status) {
-    case "active":
-      return "success";
-    case "deceased":
-      return "danger";
-    case "inactive":
-      return "secondary";
-    default:
-      return "secondary";
-  }
-}
-function getFlagVariant(flag) {
-  const lower = flag.toLowerCase();
-  if (lower === "duplicate") return "warning";
-  if (lower === "deceased" || lower === "restricted") return "danger";
-  return "secondary";
-}
 function DetailItem({
   icon,
   label,
@@ -21082,12 +21074,12 @@ function PatientOverflowMenu({
         "aria-label": "Patient actions",
         className: cn(
           "absolute top-full right-0 z-50 mt-1",
+          "w-[calc(100vw_-_2rem)] md:w-auto",
           "border-border bg-card rounded-xl border py-1 shadow-lg",
-          "max-h-[calc(100vh-4rem)] overflow-y-auto",
-          "motion-safe:animate-fade-in",
-          "w-56 sm:w-auto"
+          "max-h-[calc(100vh_-_3rem)] overflow-y-auto md:max-h-[calc(100vh_-_4rem)]",
+          "motion-safe:animate-fade-in"
         ),
-        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row", children: [
+        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col md:flex-row", children: [
           /* @__PURE__ */ jsxs("div", { className: "min-w-[13rem]", children: [
             /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-[11px] font-semibold tracking-wide uppercase", children: "Quick Actions" }) }),
             /* @__PURE__ */ jsx(
@@ -21098,6 +21090,14 @@ function PatientOverflowMenu({
                 onClick: () => handleAction("edit-patient")
               }
             ),
+            /* @__PURE__ */ jsx(
+              OverflowMenuItem,
+              {
+                icon: /* @__PURE__ */ jsx(Phone, { size: 15 }),
+                label: "Contact",
+                onClick: () => handleAction("contact")
+              }
+            ),
             /* @__PURE__ */ jsx(
               OverflowMenuItem,
               {
@@ -21131,10 +21131,10 @@ function PatientOverflowMenu({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "border-border my-1 border-t sm:my-0 sm:border-t-0 sm:border-l" }),
-          /* @__PURE__ */ jsxs("div", { className: "min-w-[26rem]", children: [
+          /* @__PURE__ */ jsx("div", { className: "border-border my-1 border-t md:my-0 md:border-t-0 md:border-l" }),
+          /* @__PURE__ */ jsxs("div", { className: "md:min-w-[26rem]", children: [
             /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5", children: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-[11px] font-semibold tracking-wide uppercase", children: "Add" }) }),
-            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-1 md:grid-cols-2 md:gap-2", children: [
               /* @__PURE__ */ jsx(
                 OverflowMenuItem,
                 {
@@ -21244,8 +21244,8 @@ var PatientHeader = React48.forwardRef(
     showAllergyBanner = false,
     showMedicationBanner = false,
     showCommentsBanner = false,
-    showDetails = false,
-    detailsExpanded: detailsExpandedProp,
+    showProviderBanner = false,
+    showFlagBanner = false,
     showOverflowMenu = false,
     onOverflowAction,
     onAddItem,
@@ -21258,33 +21258,19 @@ var PatientHeader = React48.forwardRef(
     const hasAllergies = showAllergyBanner && allergies.length > 0;
     const hasMedications = showMedicationBanner && medications.length > 0;
     const hasComments = showCommentsBanner && comments.length > 0;
-    const hasAlerts = hasAllergies || hasMedications || hasComments;
-    const [detailsExpanded, setDetailsExpanded] = React48.useState(
-      detailsExpandedProp ?? true
-    );
-    const [actionsMenuOpen, setActionsMenuOpen] = React48.useState(false);
-    const actionsMenuRef = React48.useRef(null);
-    useClickOutside(
-      actionsMenuRef,
-      React48.useCallback(() => setActionsMenuOpen(false), [])
-    );
-    useEscapeKey(
-      React48.useCallback(() => setActionsMenuOpen(false), []),
-      actionsMenuOpen
-    );
-    React48.useEffect(() => {
-      if (detailsExpandedProp !== void 0) {
-        setDetailsExpanded(detailsExpandedProp);
-      }
-    }, [detailsExpandedProp]);
+    const hasProviders = showProviderBanner && !!(patient.attendingProvider || patient.familyProvider);
+    const hasInfoRows = hasAllergies || hasMedications || hasComments || hasProviders;
     const [addModalType, setAddModalType] = React48.useState(null);
     const [addForm, setAddForm] = React48.useState({});
     const addEntityLabel = addModalType ? ADD_ENTITY_LABELS[addModalType] ?? "" : "";
+    const [contactModalOpen, setContactModalOpen] = React48.useState(false);
     const [editPatientOpen, setEditPatientOpen] = React48.useState(false);
     const [editPatientForm, setEditPatientForm] = React48.useState({});
     const handleOverflowAction = React48.useCallback(
       (action) => {
-        if (action === "edit-patient") {
+        if (action === "contact") {
+          setContactModalOpen(true);
+        } else if (action === "edit-patient") {
           setEditPatientOpen(true);
           setEditPatientForm({
             firstName: patient.name.first,
@@ -21349,71 +21335,63 @@ var PatientHeader = React48.forwardRef(
               {
                 name: formatFullName(patient.name),
                 src: patient.photo,
-                size: "lg",
-                className: "mt-0.5 shrink-0"
+                size: "md",
+                className: "hidden shrink-0 md:inline-flex"
               }
             ),
-            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-3 gap-y-1", children: [
-                /* @__PURE__ */ jsx("h2", { className: "text-foreground truncate text-xl font-bold", children: displayName }),
-                /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-sm whitespace-nowrap", children: [
+            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1", children: [
+              /* @__PURE__ */ jsx("h2", { className: "text-foreground order-1 min-w-0 flex-1 truncate text-xl font-bold", children: displayName }),
+              showOverflowMenu && /* @__PURE__ */ jsx("div", { className: "order-2 shrink-0 md:order-3", children: /* @__PURE__ */ jsx(PatientOverflowMenu, { onAction: handleOverflowAction }) }),
+              actions && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "order-4 w-full md:order-2 md:w-auto md:shrink-0",
+                    "mt-1 md:mt-0",
+                    "[&_button[data-count-badge]]:gap-1.5 [&_button[data-count-badge]]:px-2 [&_button[data-count-badge]]:py-0.5 [&_button[data-count-badge]]:text-xs",
+                    "md:[&_button[data-count-badge]]:gap-2 md:[&_button[data-count-badge]]:px-3 md:[&_button[data-count-badge]]:py-1 md:[&_button[data-count-badge]]:text-sm"
+                  ),
+                  children: actions
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "order-3 mt-1 flex w-full flex-wrap items-center gap-x-3 gap-y-1 text-sm md:order-4", children: [
+                patient.status && (() => {
+                  const normalizedStatus = patient.status.toLowerCase();
+                  const statusColorMap = {
+                    active: "bg-green-500",
+                    inactive: "bg-gray-400",
+                    deceased: "bg-red-500"
+                  };
+                  const statusColorClass = statusColorMap[normalizedStatus] ?? "bg-yellow-500";
+                  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 whitespace-nowrap", children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: `inline-block h-2 w-2 rounded-full ${statusColorClass}`
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground capitalize", children: normalizedStatus })
+                  ] });
+                })(),
+                /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground whitespace-nowrap", children: [
+                  "MRN: ",
+                  patient.mrn
+                ] }),
+                /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground whitespace-nowrap", children: [
                   patient.age,
                   " y/o ",
                   patient.sex
                 ] }),
-                /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-sm whitespace-nowrap", children: [
-                  "MRN: ",
-                  patient.mrn
-                ] })
-              ] }),
-              (patient.status || patient.flags && patient.flags.length > 0) && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex flex-wrap items-center gap-1.5", children: [
-                patient.status && /* @__PURE__ */ jsx(
-                  Badge,
-                  {
-                    variant: getStatusVariant(patient.status),
-                    size: "sm",
-                    className: "uppercase",
-                    children: patient.status
-                  }
-                ),
-                patient.flags?.map((flag) => /* @__PURE__ */ jsx(Badge, { variant: getFlagVariant(flag), size: "sm", children: flag.toUpperCase() }, flag))
+                /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground whitespace-nowrap", children: [
+                  "DOB: ",
+                  patient.dob
+                ] }),
+                patient.employer && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground whitespace-nowrap", children: patient.employer })
               ] })
-            ] }),
-            (actions || showOverflowMenu) && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex shrink-0 items-start gap-1", children: [
-              actions && /* @__PURE__ */ jsxs("div", { className: "relative", ref: actionsMenuRef, children: [
-                /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    variant: "ghost",
-                    size: "icon",
-                    onClick: () => setActionsMenuOpen(!actionsMenuOpen),
-                    "aria-label": "Open actions menu",
-                    "aria-haspopup": "true",
-                    "aria-expanded": actionsMenuOpen,
-                    "aria-controls": "patient-actions-menu",
-                    className: "h-8 w-8 md:hidden",
-                    children: /* @__PURE__ */ jsx(Menu, { size: 18 })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    id: "patient-actions-menu",
-                    role: "group",
-                    "aria-label": "Patient actions",
-                    className: cn(
-                      "hidden items-center gap-2 md:flex",
-                      actionsMenuOpen && "border-border bg-card motion-safe:animate-fade-in absolute top-full right-0 z-50 mt-1 !flex min-w-[12rem] flex-col gap-1.5 rounded-xl border p-2 shadow-lg",
-                      "md:static md:z-auto md:mt-0 md:min-w-0 md:flex-row md:gap-2 md:rounded-none md:border-0 md:bg-transparent md:p-0 md:shadow-none"
-                    ),
-                    children: actions
-                  }
-                )
-              ] }),
-              showOverflowMenu && /* @__PURE__ */ jsx(PatientOverflowMenu, { onAction: handleOverflowAction })
-            ] })
+            ] }) })
           ] }),
-          hasAlerts && /* @__PURE__ */ jsxs("div", { className: "border-border bg-muted/30 mx-5 mb-3 space-y-2.5 rounded-lg border px-4 py-3", children: [
+          hasInfoRows && /* @__PURE__ */ jsxs("div", { className: "border-border bg-muted/30 mx-5 mb-3 space-y-2.5 rounded-lg border px-4 py-3", children: [
             hasAllergies && /* @__PURE__ */ jsx(AllergyRow, { allergies }),
             hasMedications && /* @__PURE__ */ jsx(
               MedicationRow,
@@ -21422,89 +21400,82 @@ var PatientHeader = React48.forwardRef(
                 maxVisible: maxVisibleMeds
               }
             ),
-            hasComments && /* @__PURE__ */ jsx(AlertRow, { comments })
+            hasComments && /* @__PURE__ */ jsx(AlertRow, { comments }),
+            hasProviders && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-x-8 gap-y-2", children: [
+              patient.attendingProvider && /* @__PURE__ */ jsx(
+                DetailItem,
+                {
+                  icon: /* @__PURE__ */ jsx(Stethoscope, { size: 14 }),
+                  label: "Attending",
+                  value: patient.attendingProvider
+                }
+              ),
+              patient.familyProvider && /* @__PURE__ */ jsx(
+                DetailItem,
+                {
+                  icon: /* @__PURE__ */ jsx(Users, { size: 14 }),
+                  label: "Family MD",
+                  value: patient.familyProvider
+                }
+              )
+            ] })
           ] }),
-          showDetails && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("div", { className: "border-border border-t", children: /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: () => setDetailsExpanded(!detailsExpanded),
-                "aria-expanded": detailsExpanded,
-                "aria-controls": "patient-details-content",
-                className: cn(
-                  "text-primary-800 dark:text-primary-300 flex items-center gap-1 px-5 py-2 text-sm",
-                  "hover:text-primary-900 dark:hover:text-primary-200 w-full transition-colors",
-                  "focus-visible:ring-ring focus-visible:ring-offset-background rounded-sm focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx("span", { children: detailsExpanded ? "Hide details" : "Show details" }),
-                  detailsExpanded ? /* @__PURE__ */ jsx(ChevronUp, { size: 14 }) : /* @__PURE__ */ jsx(ChevronDown, { size: 14 })
-                ]
-              }
-            ) }),
-            detailsExpanded && /* @__PURE__ */ jsxs(
-              "div",
-              {
-                id: "patient-details-content",
-                className: "border-border motion-safe:animate-fade-in space-y-3 border-t px-5 py-4",
-                children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-x-10 gap-y-3", children: [
+          showFlagBanner && patient.flags && patient.flags.length > 0 && /* @__PURE__ */ jsx("div", { className: "border-t border-amber-200 bg-amber-50 px-5 py-1.5 text-left text-xs font-medium tracking-wide text-amber-800 dark:border-amber-800/40 dark:bg-amber-950/40 dark:text-amber-300", children: patient.flags.map(
+            (flag) => flag.charAt(0).toUpperCase() + flag.slice(1).toLowerCase()
+          ).join(" \xB7 ") }),
+          /* @__PURE__ */ jsxs(
+            Modal,
+            {
+              open: contactModalOpen,
+              onOpenChange: (isOpen) => {
+                if (!isOpen) setContactModalOpen(false);
+              },
+              size: "sm",
+              children: [
+                /* @__PURE__ */ jsxs(ModalHeader, { children: [
+                  /* @__PURE__ */ jsx(ModalTitle, { children: "Contact Information" }),
+                  /* @__PURE__ */ jsx(ModalClose, {})
+                ] }),
+                /* @__PURE__ */ jsx(ModalBody, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+                  patient.email && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
                     /* @__PURE__ */ jsx(
-                      DetailItem,
+                      Mail,
                       {
-                        icon: /* @__PURE__ */ jsx(Calendar, { size: 14 }),
-                        label: "DOB",
-                        value: patient.dob
+                        size: 18,
+                        className: "text-muted-foreground shrink-0"
                       }
                     ),
-                    patient.email && /* @__PURE__ */ jsx(
-                      DetailItem,
-                      {
-                        icon: /* @__PURE__ */ jsx(Mail, { size: 14 }),
-                        label: "Email",
-                        value: patient.email
-                      }
-                    ),
-                    patient.phone && /* @__PURE__ */ jsx(
-                      DetailItem,
-                      {
-                        icon: /* @__PURE__ */ jsx(Phone, { size: 14 }),
-                        label: "Phone",
-                        value: patient.phone
-                      }
-                    ),
-                    patient.employer && /* @__PURE__ */ jsx(
-                      DetailItem,
-                      {
-                        icon: /* @__PURE__ */ jsx(Building, { size: 14 }),
-                        label: "Employer",
-                        value: patient.employer
-                      }
-                    )
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs font-semibold tracking-wide uppercase", children: "Email" }),
+                      /* @__PURE__ */ jsx("p", { className: "text-foreground text-sm", children: patient.email })
+                    ] })
                   ] }),
-                  (patient.attendingProvider || patient.familyProvider) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-x-10 gap-y-3", children: [
-                    patient.attendingProvider && /* @__PURE__ */ jsx(
-                      DetailItem,
+                  patient.phone && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+                    /* @__PURE__ */ jsx(
+                      Phone,
                       {
-                        icon: /* @__PURE__ */ jsx(Stethoscope, { size: 14 }),
-                        label: "Attending",
-                        value: patient.attendingProvider
+                        size: 18,
+                        className: "text-muted-foreground shrink-0"
                       }
                     ),
-                    patient.familyProvider && /* @__PURE__ */ jsx(
-                      DetailItem,
-                      {
-                        icon: /* @__PURE__ */ jsx(Users, { size: 14 }),
-                        label: "Family MD",
-                        value: patient.familyProvider
-                      }
-                    )
-                  ] })
-                ]
-              }
-            )
-          ] }),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs font-semibold tracking-wide uppercase", children: "Phone" }),
+                      /* @__PURE__ */ jsx("p", { className: "text-foreground text-sm", children: patient.phone })
+                    ] })
+                  ] }),
+                  !patient.email && !patient.phone && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: "No contact information available." })
+                ] }) }),
+                /* @__PURE__ */ jsx(ModalFooter, { children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "secondary",
+                    onClick: () => setContactModalOpen(false),
+                    children: "Close"
+                  }
+                ) })
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxs(
             Modal,
             {
@@ -21916,7 +21887,7 @@ function PaymentHistoryTable({
   const formatCurrency3 = (amount) => {
     return `${currency}${amount.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
   };
-  const getStatusVariant2 = (status) => {
+  const getStatusVariant = (status) => {
     switch (status) {
       case "completed":
         return "success";
@@ -22110,7 +22081,7 @@ function PaymentHistoryTable({
                   children: formatCurrency3(payment.amount)
                 }
               ) }),
-              /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-center", children: /* @__PURE__ */ jsx(Badge, { variant: getStatusVariant2(payment.status), children: payment.status }) }),
+              /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-center", children: /* @__PURE__ */ jsx(Badge, { variant: getStatusVariant(payment.status), children: payment.status }) }),
               onRefund && /* @__PURE__ */ jsx("td", { className: "px-4 py-3 text-right", children: payment.status === "completed" && /* @__PURE__ */ jsx(
                 Button,
                 {
@@ -22482,7 +22453,7 @@ function PendingClaimsTable({
     const d = typeof date === "string" ? new Date(date) : date;
     return d.toLocaleDateString();
   };
-  const getStatusVariant2 = (status) => {
+  const getStatusVariant = (status) => {
     switch (status) {
       case "approved":
         return "success";
@@ -22553,7 +22524,7 @@ function PendingClaimsTable({
             ] }) }),
             /* @__PURE__ */ jsx("td", { className: "px-4 py-4", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-700 dark:text-gray-300", children: claim.claimantRole || "Not specified" }) }),
             /* @__PURE__ */ jsx("td", { className: "px-4 py-4", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: formatDate4(claim.submittedDate) }) }),
-            /* @__PURE__ */ jsx("td", { className: "px-4 py-4 text-center", children: /* @__PURE__ */ jsx(Badge, { variant: getStatusVariant2(claim.status), children: claim.status }) }),
+            /* @__PURE__ */ jsx("td", { className: "px-4 py-4 text-center", children: /* @__PURE__ */ jsx(Badge, { variant: getStatusVariant(claim.status), children: claim.status }) }),
             /* @__PURE__ */ jsx("td", { className: "px-4 py-4 text-right", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2", children: [
               onViewDetails && /* @__PURE__ */ jsx(
                 Button,
@@ -22597,7 +22568,7 @@ function PendingClaimsTable({
                 /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: claim.claimantEmail })
               ] })
             ] }),
-            /* @__PURE__ */ jsx(Badge, { variant: getStatusVariant2(claim.status), children: claim.status })
+            /* @__PURE__ */ jsx(Badge, { variant: getStatusVariant(claim.status), children: claim.status })
           ] }),
           /* @__PURE__ */ jsx("div", { className: "mt-3 flex items-center justify-between", children: /* @__PURE__ */ jsxs("div", { className: "text-sm text-gray-500 dark:text-gray-400", children: [
             /* @__PURE__ */ jsx("span", { children: claim.claimantRole || "No role" }),
@@ -26658,7 +26629,7 @@ function ProviderUsersTable({
       year: "numeric"
     });
   };
-  const getStatusVariant2 = (status) => {
+  const getStatusVariant = (status) => {
     switch (status) {
       case "active":
         return "success";
@@ -26731,7 +26702,7 @@ function ProviderUsersTable({
           ] })
         ] }) }),
         /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-700 dark:text-gray-300", children: user.role }) }),
-        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Badge, { variant: getStatusVariant2(user.status), children: user.status || "active" }) }),
+        /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Badge, { variant: getStatusVariant(user.status), children: user.status || "active" }) }),
         /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx("span", { className: "text-sm text-gray-500 dark:text-gray-400", children: isPending ? `Invited ${formatDate4(user.invitedAt)}` : formatDate4(user.lastActive) }) }),
         showActions && /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-1", children: [
           isPending && onResendInvite && /* @__PURE__ */ jsx(