1import { o as __toESM } from "./chunk-6z4oVpB-.js"; 2import "./capitalize-YV0fqYBS.js"; 3import { t as require_react } from "./react-CCT1erMQ.js"; 4import "./prop-types-BP3O0vhg.js"; 5import { t as require_jsx_runtime } from "./jsx-runtime-6ToSbptA.js"; 6import "./hoist-non-react-statics.cjs-aYVW55CP.js"; 7import "./clsx-BbsgvS4T.js"; 8import "./Stack-DHo_Jfjl.js"; 9import "./setPrototypeOf-BJGl62Ep.js"; 10import "./chainPropTypes-Bly6swO2.js"; 11import "./SvgIcon-C1SXqgmo.js"; 12import "./typeof-CtObx4yR.js"; 13import "./defineProperty-DbJZf-0N.js"; 14import "./Amplify-ydFdTLPK.js"; 15import { n as _objectSpread2, r as init_objectSpread2, t as _objectWithoutProperties } from "./objectWithoutProperties-Cgp7QKOy.js"; 16import "./types-CQ-ki0qK.js"; 17import "./amplifyUrl-DhBXUoj8.js"; 18import "./tslib.es6-CGMJRn24.js"; 19import { u as queryClient } from "./api-BN7R4l5b.js"; 20import "./createCognitoUserPoolEndpointResolver-DIsnsOMn.js"; 21import "./auth-D-8td4-a.js"; 22import { f as formatTableNumber, o as formatDate, u as formatNumber } from "./helpers-BQW8LNh3.js"; 23import "./getCurrentUser-CO2hH9tr.js"; 24import "./_setToArray-yQcq1oYD.js"; 25import "./_baseIsEqual-BQlHczw4.js"; 26import "./_baseGetTag-CcQT-b-8.js"; 27import "./errors-CJ9PkTii.js"; 28import "./_Set-CZ2i3up2.js"; 29import "./_arrayPush-ydaIuwSR.js"; 30import "./isArray-tvs1KjBA.js"; 31import "./isObjectLike-C0C335kY.js"; 32import "./isArguments-Bw559w0l.js"; 33import "./_getTag-Q_I4L1j7.js"; 34import "./isArrayLike-Dem0evm_.js"; 35import "./last-BBkjGqwN.js"; 36import "./shim-BLxGA08a.js"; 37import "./use-isomorphic-layout-effect.browser.esm-BDjLKVP-.js"; 38import "./_arrayMap-DGTSv05P.js"; 39import "./_isIterateeCall-D2gRUu97.js"; 40import "./isSymbol-BD-EcKMA.js"; 41import "./toString-udoFnoNk.js"; 42import "./_baseRest-BoLB-zDN.js"; 43import "./_basePropertyOf-CQxcbbYL.js"; 44import "./transferTask-DlPnuhcM.js"; 45import "./remove-CEeYMWxg.js"; 46import "./useAwsImage-QQzLY1Z9.js"; 47import "./debounce-CIlO4Yzq.js"; 48import "./dist-Cz4mcmaa.js"; 49import "./dist-DaeMORX8.js"; 50import "./react-dom-Dddidh9b.js"; 51import "./dist-DetJSI7l.js"; 52import "./dist-Dsgwk-jH.js"; 53import "./classPrivateFieldGet2-D2HqlEEJ.js"; 54import "./dist-javwCbI7.js"; 55import "./dist-DjKy_3Dj.js"; 56import "./Combination-CE9BhVA8.js"; 57import "./dist-BHtPb5hX.js"; 58import "./dist-C5RjQM0F.js"; 59import "./dist-SbNcsVrs.js"; 60import "./dist-BnVQncHy.js"; 61import "./select-8FJ_dY_9.js"; 62import "./dist-BpwkAU0Q.js"; 63import { n as ie } from "./esm-BezjtZdK.js"; 64import { D as useMatches, P as useRouteLoaderData, j as useParams, n as Form, o as Outlet, r as Link } from "./chunk-62JRHF6Z-z8JX8DDB.js"; 65import "./exports-PpHA8CsK.js"; 66import "./extends-7lTa5GQE.js"; 67import "./notifyManager-Bch6NZ-h.js"; 68import "./useBaseQuery-1WImwwVq.js"; 69import { t as useInfiniteQuery } from "./useInfiniteQuery-CX5ozztk.js"; 70import { t as useMutation } from "./useMutation-k2qXTuOE.js"; 71import "./QueryClientProvider-DBT_lM_H.js"; 72import { t as useQuery } from "./useQuery-DLS21iiV.js"; 73import "./constants-TZTPDohO.js"; 74import "./session-BF1M_iJk.js"; 75import "./iconPropTypes-C5chbmyn-CpVo52O4.js"; 76import { s as ArrowRight, t as Add } from "./bucket-0-Uq1JG5fZ.js"; 77import { t as ArrowsHorizontal } from "./bucket-1-COAg-Eqq.js"; 78import { f as CloseFilled, i as ChevronDown, o as ChevronRight } from "./bucket-3-DKA1ROBB.js"; 79import { r as Edit } from "./bucket-6-B3kg9Htr.js"; 80import { r as InProgress } from "./bucket-9-D-nsYl-Y.js"; 81import "./bucket-10-Ca5cox4R.js"; 82import "./bucket-12-B5dDCr5m.js"; 83import "./bucket-14-IUg4qkXR.js"; 84import "./bucket-15-CpBPyEaO.js"; 85import { o as Subtract, t as Snooze } from "./bucket-16-Cecn6FLo.js"; 86import { c as UserAvatar } from "./bucket-18-BV3V-3UN.js"; 87import "./bucket-19-N0S4-0FN.js"; 88import "./dist-W5s9RbHT.js"; 89import "./dist-DCv7IJcI.js"; 90import "./createLucideIcon-DENnxagg.js"; 91import { t as Calendar } from "./calendar-DPbJXuNK.js"; 92import "./check-BFnH1yl0.js"; 93import "./search-BZG3c53g.js"; 94import { t as cn } from "./utils-DL_RvPHk.js"; 95import "./use-toast-CIbRNZGg.js"; 96import "./mixpanel.module-D03As0KW.js"; 97import { t as subDays } from "./subDays-vez96V8M.js"; 98import { t as format } from "./format-D9Zwzn3m.js"; 99import "./differenceInSeconds-kBSYoYqw.js"; 100import "./addMonths-C0iKCEqw.js"; 101import "./endOfMonth-h_W7cRKV.js"; 102import "./roundingMethods-DuMrTbDg.js"; 103import "./differenceInWeeks-B00-N4lk.js"; 104import "./constants-D45heBrI.js"; 105import "./isValid-x2ON1UYB.js"; 106import "./addLeadingZeros-6PHdxbUP.js"; 107import "./isSameYear-DmJrnTov.js"; 108import "./unsupportedIterableToArray-DgT2AdgB.js"; 109import "./vanilla-CF1b6_qj.js"; 110import "./react-YGktOqY1.js"; 111import { r as ImageType } from "./constants-WpMo2OI9.js"; 112import { t as Button } from "./button-BgUr9YaP.js"; 113import "./tooltip-BQPMLsOF.js"; 114import { n as LongText_default } from "./LongText-Chh0tzMc.js"; 115import "./badge-BfOudBXs.js"; 116import { t as MODULE_NAMES } from "./modules.api-IyEUmc8P.js"; 117import "./xstate-react.esm-DX2qQh45.js"; 118import "./utils-DBLTsd0N.js"; 119import "./atoms-rqPguuWn.js"; 120import { i as createBreadcrumbConfig } from "./dynamic-breadcrumbs.utils-ncCMCfgZ.js"; 121import "./Button-BBS-SiZR.js"; 122import "./Typography-l0CVJQ2v.js"; 123import "./Link-BjqzfEsO.js"; 124import "./ErrorPage-BcFaH7ir.js"; 125import "./useSessionQuery-CydkiRrr.js"; 126import "./bootstrap-BQ86EXdW.js"; 127import "./avatar-CIgO6Y5X.js"; 128import { n as getUsersByModuleQuery } from "./users-CQiZi9Zt.js"; 129import "./command-Bs-4k7Pe.js"; 130import "./dist-C_Pp4NuF.js"; 131import { c as DialogTrigger, i as DialogDescription, o as DialogHeader, r as DialogContent, s as DialogTitle, t as Dialog } from "./dialog-odsl4nrF.js"; 132import "./useDebounce-4Thlngbw.js"; 133import "./svg-icon-tPYESOnr.js"; 134import { n as track_default } from "./track-BOLPaScP.js"; 135import "./main-DuTogBk6.js"; 136import "./parseAtMention-CJ7j8n8N.js"; 137import "./isThisYear-YQo8vanF.js"; 138import "./RelativeDate-G7yDFkE2.js"; 139import { $ as prefCardCommentsQuery, K as postPrefCardComment, N as getTimeDifferenceByUnit, Q as prefCardCasesInfiniteQuery, Tt as usePrefCardsBo
139otstrapQuery, dt as prefCardsBootstrapQuery, et as prefCardDetailsQuery, nt as prefCardItemDetailsQuery, rt as prefCardItemsQuery, tt as prefCardHistoryQuery, xt as usePrefCardCases, z as addCardComment } from "./utils-BFgzP0mr.js"; 140import "./comments-Z3QCdchs.js"; 141import "./base-path-CtfbOIOI.js"; 142import "./upperFirst-B3M7I7Y7.js"; 143import { t as Input } from "./input-wPGsBI9X.js"; 144import "./separator-BIFfjU4z.js"; 145import { t as Skeleton } from "./skeleton-DlrxaJwT.js"; 146import "./v4-WmvKwL3y.js"; 147import { t as invariant } from "./tiny-invariant-DGRZ75gT.js"; 148import "./createSvgIcon-Cz1Kcc8k.js"; 149import "./IconButton-BvgtFPd2.js"; 150import { t as LogErrorBoundary } from "./LogErrorBoundary-CEgwOwnc.js"; 151import "./forms-Bo_NE7_z.js"; 152import "./useDebounceCallback-CpDQu6xV.js"; 153import { i as getCoreRowModel, n as useReactTable, r as createColumnHelper, t as flexRender } from "./lib-BmE5oXwC.js"; 154import "./controlled-pagination-B2SWmftf.js"; 155import { c as TableRow, r as TableCell, t as Table } from "./table-BhizvUWs.js"; 156import "./reset-to-first-page-Buz3wC4q.js"; 157import "./filter-search-params-CGhr97jh.js"; 158import "./use-table-context-DYyO1Fg2.js"; 159import { i as TableProvider, n as TableHeader, t as TableBody } from "./TableContext-E1dvnDuG.js"; 160import "./toConsumableArray-BrngG48p.js"; 161import { t as Label } from "./label-DQ77xjEK.js"; 162import "./_baseFlatten-DfmX7q06.js"; 163import "./assignee-select-value-CK7YPP1d.js"; 164import "./dist-C2D8DSus.js"; 165import "./popover-SmfnFw8c.js"; 166import "./es-CNR3Ocx-.js"; 167import "./alert-dialog-Db6VEVMu.js"; 168import { i as SideBarSectionContainer, n as SideBarContainer, r as SideBarPaddingWrapper, t as Divider } from "./sidebar-C5YHVk8T.js"; 169import { t as SidebarDetailContent } from "./SidebarDetailContent-B6FCLEl7.js"; 170import { i as TabsTrigger, n as TabsContent, r as TabsList, t as Tabs } from "./tabs-DY2Ob9Vv.js"; 171import "./dist-S6WxGKtS.js"; 172import { t as InfoToolTip } from "./InfoTooltip-D9bvAKtf.js"; 173import { a as ChartTooltipContent, c as ReferenceLine, i as ChartTooltip, n as ChartLegend, r as ChartLegendContent, t as ChartContainer, v as Bar, w as Label$1 } from "./chart-CJ4kgNv1.js"; 174import "./react-is-Ddg1tln7.js"; 175import "./_arrayIncludesWith-CigTI19x.js"; 176import "./_baseUniq-DlZTzdfj.js"; 177import { n as XAxis, r as CartesianGrid, t as YAxis } from "./YAxis-BeN2iIH8.js"; 178import { t as Line } from "./Line-CHe-qjRD.js"; 179import { t as LineChart } from "./LineChart-BLUuhtYM.js"; 180import { t as BarChart } from "./BarChart-2JBNN_fm.js"; 181import "./AssigneeSelect-CfcfGe_s.js"; 182import { n as postAttachment, r as useAttachments, t as ATTACHMENT_QUERIES } from "./api-CpfZmtJ4.js"; 183import "./Attachment-xom4yr3f.js"; 184import "./Download-BqyO9PS5.js"; 185import "./uniq-j6l8JKCL.js"; 186import "./queries-BfU_W5J6.js"; 187import "./global-BaueiK1P.js"; 188import "./thumbnailUrl-Dof89KYG.js"; 189import "./images-oX2RBbLs.js"; 190import "./substitutes-CBDzoqci.js"; 191import "./EmptyThumbnail-DQ1rM1uh.js"; 192import "./use-has-thumbnail-signed-url-2av771ip.js"; 193import { t as GlobalImageDialog } from "./ImageDialog-C3nRF__f.js"; 194import "./es-CWSPvrLn.js"; 195import { n as ThumbnailFromImageList } from "./Thumbnail-BfgthJKj.js"; 196import { t as MentionCommentBox } from "./MentionCommentBox-DQByUgYG.js"; 197import "./constants-B4SlYUzs.js"; 198import "./unescape-DYXpaoFa.js"; 199import { i as useCreateThreadedCommentsConfig, n as ThreadedCommentsProvider, r as useCreateThreadedCommentHierarchy, t as CommentItem } from "./CommentItem-D2vNFmmp.js"; 200import "./EmptyBox-DXdAwBOL.js"; 201import { t as DetailSideBarPageLayout } from "./DetailSideBarPage-uasPZPi2.js"; 202import { t as CommentsAndActivities } from "./CommentsAndActivities-C4YE_M4J.js"; 203import { n as SidebarHistoryItemContainer } from "./Container-Dp2Uj-Qo.js"; 204import { t as TimeSeriesWeightedChart } from "./time-series-weighted-chart-D6f_m6f9.js"; 205import { a as ServiceLineDetails, i as PhysicianDetails, n as CaseType, r as LocationDetails } from "./details-info-B4lvihdH.js"; 206import { t as ClariumStatusPill } from "./clarium-status-DCoemswP.js"; 207import { t as PrefCardAssigneeSelect } from "./preference-cards-DaP4zPxY.js";
208import { c as selectAssigneeOptions, g as selectSnoozeBootstrap, i as getActionTypeIdFromItem, o as selectActionNames, r as getActionTypeId } from "./selectors-8yo1wgXa.js"; 209import { f as Context, l as useRemoveItemChangeAction, n as INITIAL_REDUCER_STATE, o as useItemChangeAction, p as canFetchPrefCardItemSummary, r as reducer, s as usePrefCardActionChangedItem, t as getTooltipMessage } from "./utils-BSQFnP4c.js"; 210import { n as useCustomPacksEnabled } from "./use-custom-packs-enabled-CPYjkNRs.js"; 211import { t as UimDescriptionTooltip } from "./uim-description-tooltip-DDhmZW2m.js"; 212import { t as useItemSidebarRouteState } from "./item-sidebar-route-state-BVSFu8e4.js"; 213import "./procedure-cards-BPeGZ6e8.js"; 214import { i as useUnSnooze } from "./hooks-CI__Un2X.js"; 215import { i as usePrefCardProcedureConflictsQuery } from "./preference-card-conflicts-tlVMnSNz.js"; 216import { i as useIsDataFieldNotApplicable, o as NOT_APPLICABLE_DATA_FIELD_KEYS } from "./not-applicable-data-fields-C1oLNi1m.js"; 217import { a as useConflictChanges, l as useRemoveConflictChange, n as useAddConflictChange } from "./store-DIs_KJtL.js"; 218import "./approved-procedures-BjrnXtXH.js"; 219import "./scrollable-table-container-DAgHUe8g.js"; 220import { t as ProcedureCodesList } from "./procedure-codes-list-2UZ7vYyc.js"; 221import { n as prefCardPackContentsQuery, t as PackContents } from "./pack-contents-D60LWn7c.js"; 222var import_react = /* @__PURE__ */ __toESM(require_react(), 1); 223var import_jsx_runtime = /* @__PURE__ */ __toESM(require_jsx_runtime(), 1); 224function PagePrefCardActionContext({ children }) { 225 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Context.Provider, { 226 value: import_react.useReducer(reducer, INITIAL_REDUCER_STATE), 227 children 228 }); 229} 230function handlePreferenceCardCreated() { 231 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 232 className: "flex flex-row items-center space-x-2", 233 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 234 className: "p-[4.5px]", 235 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Edit, {}) 236 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { 237 className: "mt-[2.5px] text-detail text-light", 238 children: "Created this preference card" 239 })] 240 }); 241} 242function generatePreferenceCardUpdateMessage(action) { 243 let ActionIcon = Edit; 244 let message = ""; 245 switch (action.value_name) { 246 case "Assignee": 247 ActionIcon = UserAvatar; 248 if (action.new_value === null) message = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 249 className: "flex flex-row items-start space-x-2", 250 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 251 className: "p-[4.5px]", 252 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActionIcon, {}) 253 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { 254 className: "mt-[2.5px] text-detail text-light", 255 children: ["Removed ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { 256 className: "text-zinc-800", 257 children: "Assignee" 258 })] 259 })] 260 });
261 else message = action.old_value === null ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 262 className: "flex flex-row items-start space-x-2", 263 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 264 className: "p-[4.5px]", 265 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActionIcon, {}) 266 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { 267 className: "mt-[2.5px] text-detail text-light", 268 children: ["Assigned this card to ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { 269 className: "text-zinc-800", 270 children: action.new_value 271 })] 272 })] 273 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 274 className: "flex flex-row items-start space-x-2", 275 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 276 className: "p-[4.5px]", 277 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserAvatar, {}) 278 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { 279 className: "mt-[2.5px] text-detail text-light", 280 children: [ 281 "Changed ", 282 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { 283 className: "text-zinc-800", 284 children: "Assignee" 285 }), 286 " from", 287 " ", 288 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { 289 className: "text-zinc-800", 290 children: action.old_value 291 }), 292 " to", 293 " ", 294 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { 295 className: "text-zinc-800", 296 children: action.new_value 297 }) 298 ] 299 })] 300 }); 301 break; 302 case "Clarium Status": 303 ActionIcon = InProgress; 304 message = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 305 className: "flex flex-row items-start space-x-2", 306 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 307 className: "p-[4.5px]", 308 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActionIcon, {}) 309 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { 310 className: "mt-[2.5px] text-detail text-light",
311 children: action.new_value ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [ 312 action.old_value === null ? "Set" : "Changed", 313 " ", 314 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { 315 className: "text-zinc-800", 316 children: "Status" 317 }), 318 " to", 319 " ", 320 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { 321 className: "text-zinc-800", 322 children: action.new_value 323 }) 324 ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: ["Removed the ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { 325 className: "text-zinc-800", 326 children: "Status" 327 })] }) 328 })] 329 }); 330 break; 331 default: message = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 332 className: "flex flex-row items-start space-x-2", 333 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 334 className: "p-[4.5px]", 335 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Edit, {}) 336 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { 337 className: "mt-[2.5px] text-detail text-light", 338 children: [ 339 "Changed ", 340 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { 341 className: "text-zinc-800", 342 children: action.value_name 343 }), 344 " from", 345 " ", 346 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { 347 className: "text-zinc-800", 348 children: action.old_value || "none" 349 }), 350 " to", 351 " ", 352 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { 353 className: "text-zinc-800", 354 children: action.new_value 355 }) 356 ] 357 })] 358 }); 359 } 360 return message; 361} 362function handlePreferenceCardUpdated(activity) { 363 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { children: activity.actions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [generatePreferenceCardUpdateMessage(action), index < activity.actions.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { 364 className: "text-detail text-light", 365 children: " and " 366 })] }, action.value_name)) }); 367} 368function handleChangeRequestCreated(activity) { 369 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 370 className: "flex flex-row items-start space-x-2", 371 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 372 className: "p-[4.5px]", 373 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Edit, {}) 374 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { 375 className: "mt-[2.5px] text-detail text-light", 376 children: [ 377 "Created change request", 378 " ",
379 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, { 380 to: `requests/${activity.entity_id}`, 381 className: "text-zinc-800", 382 children: activity.entity_name 383 }) 384 ] 385 })] 386 }); 387} 388function handleChangeRequestUpdated(activity) { 389 const filteredActions = activity.actions.filter((action) => action.value_name === "Status" || action.value_name === "Reviewer" || action.value_name === "Response Type" || action.value_name === "Response Comment" && action.new_value); 390 if (filteredActions.length === 0) return null; 391 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { children: filteredActions.map((action) => { 392 let message; 393 let descriptor; 394 let reviewer; 395 switch (action.value_name) { 396 case "Status": 397 message = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 398 className: "flex flex-row items-start space-x-2", 399 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 400 className: "p-[4.5px]", 401 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InProgress, {}) 402 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 403 className: "mt-[2.5px] text-detail text-light", 404 children: [ 405 action.old_value === null ? "Set" : "Updated", 406 " the status of", 407 " ", 408 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, { 409 to: `requests/${activity.entity_id}`, 410 className: "text-zinc-800", 411 children: activity.entity_name || "â" 412 }), 413 " ", 414 "to ", 415 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { 416 className: "text-zinc-800", 417 children: action.new_value 418 }) 419 ] 420 })] 421 }); 422 break; 423 case "Reviewer": 424 descriptor = action.new_value ? "Added" : "Removed"; 425 reviewer = action.new_value || action.old_value || "â"; 426 message = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 427 className: "flex flex-row items-start space-x-2", 428 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 429 className: "p-[4.5px]", 430 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UserAvatar, {}) 431 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 432 className: "mt-[2.5px] text-detail text-light", 433 children: [ 434 descriptor, 435 " ", 436 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { 437 className: "text-zinc-800", 438 children: reviewer 439 }), 440 " as a reviewer on", 441 " ", 442 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, { 443 to: `requests/${activity.entity_id}`, 444 className: "text-zinc-800", 445 children: activity.entity_name || "â" 446 }) 447 ] 448 })] 449 }); 450 break; 451 case "Response Type": 452 message = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 453 className: "flex flex-row items-start space-x-2", 454 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 455 className: "p-[4.5px]", 456 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowsHorizontal, {}) 457 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 458 className: "mt-[2.5px] text-detail text-light", 459 children: [ 460 "Added a review on", 461 " ", 462 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Link, { 463 to: `requests/${activity.entity_id}`, 464 className: "text-zinc-800", 465 children: activity.entity_name || "â" 466 }), 467 ": ", 468 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { 469 className: "text-zinc-800", 470 children: action.new_value 471 }) 472 ] 473 })] 474 }); 475 break; 476 case "Response Comment": 477 message = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 478 className: "flex flex-row items-start space-x-2", 479 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 480 className: "p-[4.5px]", 481 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-4 w-4" }) 482 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 483 className: "mt-[2.5px] w-full text-detail text-light", 484 children: [ 485 "and added a comment:", 486 " ",
487 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 488 className: "my-2 inline-block w-full whitespace-pre-line rounded bg-zinc-100 px-2 py-1.5 text-regular text-zinc-800 sm:w-full [&_.at-m]:bg-transparent [&_.at-m]:font-m [&_.at-m]:text-primary", 489 children: action.new_value 490 }) 491 ] 492 })] 493 }); 494 break; 495 default: message = null; 496 } 497 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: message }, action.value_name); 498 }) }); 499} 500function handlePreferenceCardItemUpdated(activity) { 501 const isSnoozed = activity.actions.some((action) => action.value_name === "Snooze Until" && action.new_value && action.old_value === null); 502 const isUnSnoozed = activity.actions.some((action) => action.value_name === "Snooze Until" && action.old_value && action.old_value !== null && action.new_value === null); 503 if (!isSnoozed && !isUnSnoozed) return null; 504 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 505 className: "flex flex-row items-start space-x-2", 506 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 507 className: "p-[4.5px]", 508 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Snooze, {}) 509 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { 510 className: "mt-[2.5px] text-detail text-light", 511 children: [ 512 isSnoozed ? "Snoozed" : "Unsnoozed", 513 " a recommendation for", 514 " ",
515 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { 516 className: "text-zinc-800", 517 children: ["Item ", activity.entity_name || "â"] 518 }) 519 ] 520 })] 521 }); 522} 523function createActivity(activity) { 524 const entityHandler = { 525 "Preference Card": { 526 Created: handlePreferenceCardCreated, 527 Updated: handlePreferenceCardUpdated 528 }, 529 "Change Request": { 530 Created: handleChangeRequestCreated, 531 Updated: handleChangeRequestUpdated 532 }, 533 "Preference Card Item": { Updated: handlePreferenceCardItemUpdated } 534 }[activity.entity_type]; 535 if (!entityHandler) { 536 console.warn(`Unhandled entity type: ${activity.entity_type}`); 537 return "Unknown"; 538 } 539 const operationHandler = entityHandler[activity.state_operation]; 540 if (!operationHandler) { 541 console.warn(`Unhandled operation ${activity.state_operation} for entity type ${activity.entity_type}`); 542 return "Unknown"; 543 } 544 return operationHandler(activity); 545} 546function wrappedMutationFn() { 547 return async function makeRequest({ id, message, mentions }) { 548 return await addCardComment(id, message, null, mentions); 549 }; 550} 551function AddComment({ cardId }) { 552 const { data } = useQuery(getUsersByModuleQuery("Physician+Preference+Cards")); 553 const users = import_react.useMemo(() => { 554 if (!data) return []; 555 return data.users.map((user) => ({ 556 id: user.id, 557 display: user.name, 558 email: user.email_address 559 })); 560 }, [data]); 561 const mutateComment = useMutation(wrappedMutationFn(), { onSuccess: () => { 562 queryClient.invalidateQueries(prefCardCommentsQuery(cardId)); 563 } }); 564 const mutateAttachment = useMutation(postAttachment, { onSuccess: () => { 565 queryClient.invalidateQueries([ATTACHMENT_QUERIES.get]); 566 } }); 567 async function handleAddComment({ comment: message, attachments, onComplete, onUploadError, mentions }) { 568 if (attachments && attachments.length > 0) try { 569 const comment = await mutateComment.mutateAsync({ 570 id: cardId, 571 message, 572 mentions 573 }); 574 if ("message" in comment) { 575 const keys = attachments.map((a) => ({ 576 key: a.key, 577 file: a.file 578 })).filter((a) => typeof a.key === "string").map((attachment) => ({ 579 key: attachment.key, 580 contentType: attachment.file.type, 581 contentLength: attachment.file.size 582 })); 583 await mutateAttachment.mutateAsync({ 584 conversationId: comment.conversation_message_id, 585 keys 586 }); 587 } 588 track_default.pcm.addComment("card", attachments.length); 589 onComplete(); 590 } catch (err) { 591 console.error("Unexpected error while uploading", err); 592 onUploadError("Unexpected error while uploading"); 593 } 594 else { 595 await mutateComment.mutateAsync({ 596 id: cardId, 597 message, 598 mentions 599 }); 600 track_default.pcm.addComment("card", 0); 601 onComplete(); 602 } 603 } 604 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MentionCommentBox, { 605 users, 606 disabled: mutateComment.isLoading, 607 onAddComment: handleAddComment 608 }); 609} 610var activityFilter = (activity) => { 611 if (activity.entity_type === "Preference Card Item") return activity.actions.some((action) => action.value_name === "Snooze Until" && (action.new_value && action.old_value === null || action.new_value === null && action.old_value)); 612 if (activity.entity_type === "Change Request") return activity.actions.some((action) => action.value_name === "Status" || action.value_name === "Reviewer" || action.value_name === "Response Type" || action.value_name === "Response Comment" && action.new_value); 613 return true; 614}; 615function CardActivities() { 616 const { cardId } = useParams(); 617 const { data: activities } = useQuery(prefCardHistoryQuery(cardId)); 618 const { data: comments } = useQuery(prefCardCommentsQuery(cardId)); 619 const { data: attachmentsById } = useAttachments(import_react.useMemo(() => (comments === null || comments === void 0 ? void 0 : comments.map(({ conversation_message_id }) => conversation_message_id).sort()) || [], [comments])); 620 const threadedComments = useCreateThreadedCommentHierarchy({ 621 comments, 622 attachmentsMap: attachmentsById, 623 enabled: true 624 }); 625 const threadedCommentsConfig = useCreateThreadedCommentsConfig({ 626 moduleName: "Physician+Preference+Cards", 627 async addComment(args) { 628 return await postPrefCardComment({ 629 cardId, 630 message: args.message, 631 parentId: args.parentId, 632 mentions: args.mentions 633 }); 634 }, 635 invalidateComments() {
636 queryClient.invalidateQueries(prefCardCommentsQuery(cardId)); 637 }, 638 onComplete(args) { 639 track_default.pcm.addComment("card", args.attachmentsCount); 640 } 641 }); 642 const sortedHistory = import_react.useMemo(() => { 643 var _activities$filter; 644 const commentsWithDate = threadedComments && threadedComments.map((comment) => { 645 return { 646 date: comment.created_date, 647 historyType: "Comments", 648 component: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThreadedCommentsProvider, { 649 config: threadedCommentsConfig, 650 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CommentItem, { 651 comment, 652 depth: 0, 653 maxDepth: 1, 654 parentId: null, 655 isLastInGroup: true 656 }) 657 }) 658 }; 659 }) || []; 660 return [...(activities === null || activities === void 0 || (_activities$filter = activities.filter(activityFilter)) === null || _activities$filter === void 0 ? void 0 : _activities$filter.map((activity) => ({ 661 date: activity.state_change_time, 662 historyType: "Activities", 663 component: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PreferenceCardActivity, { activity }, activity.state_change_time) 664 }))) || [], ...commentsWithDate || []].sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()); 665 }, [ 666 activities, 667 threadedComments, 668 threadedCommentsConfig 669 ]); 670 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 671 className: "sticky top-0 z-10 mb-2 w-full bg-white p-3 shadow-[0_4px_10px_0_rgba(0,0,0,0.06)]", 672 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AddComment, { cardId }) 673 }
673), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CommentsAndActivities, { history: sortedHistory })] }); 674} 675function PreferenceCardActivity({ activity }) { 676 const activityName = createActivity(activity); 677 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SidebarHistoryItemContainer, { 678 name: activity.acting_account_name, 679 createdDate: activity.state_change_time, 680 activity: activityName, 681 icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Edit, {}) 682 }); 683} 684function CardCasesTable({ cardId }) { 685 const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } = useInfiniteQuery(prefCardCasesInfiniteQuery(cardId)); 686 const cases = import_react.useMemo(() => { 687 var _data$pages$flatMap, _data$pages; 688 return (_data$pages$flatMap = data === null || data === void 0 || (_data$pages = data.pages) === null || _data$pages === void 0 ? void 0 : _data$pages.flatMap((page) => page.items)) !== null && _data$pages$flatMap !== void 0 ? _data$pages$flatMap : []; 689 }, [data]); 690 const tableContainerRef = import_react.useRef(null); 691 const fetchMoreOnBottomReached = import_react.useCallback((containerRefElement) => { 692 if (!containerRefElement) return; 693 const { scrollHeight, scrollTop, clientHeight } = containerRefElement; 694 if (scrollHeight - scrollTop - clientHeight < 200 && hasNextPage && !isFetchingNextPage) fetchNextPage(); 695 }, [ 696 fetchNextPage, 697 hasNextPage, 698 isFetchingNextPage 699 ]); 700 import_react.useEffect(function fetchMoreOnScroll() { 701 const containerElement = tableContainerRef.current; 702 if (!containerElement) return; 703 fetchMoreOnBottomReached(containerElement); 704 const handleScroll = () => fetchMoreOnBottomReached(containerElement); 705 containerElement.addEventListener("scroll", handleScroll); 706 return () => containerElement.removeEventListener("scroll", handleScroll); 707 }, [fetchMoreOnBottomReached]); 708 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 709 className: "w-full flex-1 overflow-y-auto", 710 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableProvider, { 711 table: useReactTable({ 712 data: cases, 713 columns: columns$1, 714 getCoreRowModel: getCoreRowModel(), 715 getRowId: (row) => row.case_id 716 }), 717 isLoading, 718 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Table, { 719 containerClassName: "max-h-[500px]", 720 containerRef: tableContainerRef, 721 children: [ 722 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("caption", { 723 className: "sr-only", 724 children: "Cases that used this preference card in the last 12 months" 725 }), 726 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableHeader, {}), 727 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableBody, { renderRow: (row) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableRow, { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCell, { 728 className: "px-3", 729 children: flexRender(cell.column.columnDef.cell, cell.getContext()) 730 }, cell.id)) }, row.id) }) 731 ] 732 }) 733 }) 734 }); 735} 736var columnHelper$1 = createColumnHelper(); 737var columns$1 = [ 738 columnHelper$1.accessor("case_date", { 739 header: "Procedure Date", 740 cell: ({ getValue }) => { 741 const value = getValue(); 742 return value ? formatDate(value, "2-digit", "2-digit", "2-digit") : "â"; 743 } 744 }), 745 columnHelper$1.accessor("client_case_id", { header: "ID" }), 746 { 747 id: "procedures", 748 header: "Procedure", 749 cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CaseProcedures, { caseItem: row.original }) 750 }, 751 columnHelper$1.accessor("first_physician_name", { 752 header: "Primary Physician", 753 cell: ({ getValue }) => { 754 var _getValue; 755 return (_getValue = getValue()) !== null && _getValue !== void 0 ? _getValue : "â"; 756 } 757 }), 758 columnHelper$1.accessor("location_name", { 759 header: "Approved OR Location", 760 cell: ({ getValue }) => { 761 var _getValue2; 762 return (_getValue2 = getValue()) !== null && _getValue2 !== void 0 ? _getValue2 : "â"; 763 } 764 }) 765]; 766function caseProcedures(caseItem) { 767 var _caseItem$clinical_pr, _caseItem$first_clini; 768 if ((_caseItem$clinical_pr = caseItem.clinical_procedures) === null || _caseItem$clinical_pr === void 0 ? void 0 : _caseItem$clinical_pr.length) return caseItem.clinical_procedures; 769 if (!caseItem.first_clinical_procedure_code) return []; 770 return [{ 771 clinical_procedure_code: caseItem.first_clinical_procedure_code, 772 description: (_caseItem$first_clini = caseItem.first_clinical_procedure_description) !== null && _caseItem$first_clini !== void 0 ? _caseItem$first_clini : "" 773 }]; 774} 775function CaseProcedures({ caseItem }) { 776 const procedures = caseProcedures(caseItem); 777 if (!procedures.length) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: "â" }); 778 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 779 className: "flex flex-col gap-1", 780 children: procedures.map((procedure) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 781 className: "flex flex-col", 782 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: procedure.description || "â" }
782), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { 783 className: "type-body-2xs font-normal text-zinc-400", 784 children: procedure.clinical_procedure_code 785 })] 786 }, procedure.clinical_procedure_code)) 787 }); 788} 789function CardCasesDialog({ caseCount }) { 790 const { cardId } = useParams(); 791 if (!cardId) return null; 792 const countLabel = caseCount.toLocaleString(); 793 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Dialog, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTrigger, { 794 asChild: true, 795 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Button, { 796 onClick: () => track_default.pcm.viewCases(), 797 variant: "text", 798 size: "text", 799 className: "type-body-xs h-5 gap-0.5 p-0 font-medium text-indigo-600", 800 children: [countLabel, /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRight, { size: 16 })] 801 }) 802 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContent, { 803 className: "flex w-[960px] max-w-[80%] bg-white", 804 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 805 className: "flex h-full w-full flex-col gap-4", 806 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogHeader, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitle, { 807 className: "type-body-2xl pr-6 font-medium", 808 children: `${countLabel} Cases Used this Preference Card in Last 12 Months` 809 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogDescription, { 810 className: "type-body font-normal leading-[19px] text-zinc-500", 811 children: "All cases in the past 12 months that were associated with this preference card, including single and multipanel cases." 812 })] }
812), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardCasesTable, { cardId })] 813 }) 814 })] }); 815} 816var NO_OPTIONS = []; 817function CardSideBarDetails() { 818 const { details } = useRouteLoaderData("co-card"); 819 const { cardId } = useParams(); 820 const hideApprovedOrLocation = useIsDataFieldNotApplicable(NOT_APPLICABLE_DATA_FIELD_KEYS.APPROVED_OR_LOCATION); 821 const { isSuccess, data: assigneeOptions } = useQuery(prefCardsBootstrapQuery(selectAssigneeOptions)); 822 const { data: caseCount } = usePrefCardCases(cardId, { page_size: "0" }, { 823 select: (data) => data.result_set_size, 824 enabled: Boolean(cardId) 825 }); 826 const currentAssignee = details.assignee_id ? { 827 name: details.assignee_name, 828 value: details.assignee_id 829 } : null; 830 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SideBarPaddingWrapper, { 831 classNames: "border-b", 832 children: [ 833 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SideBarSectionContainer, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SidebarDetailContent, { 834 classNames: "py-0", 835 label: "Assignee", 836 children: isSuccess ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PrefCardAssigneeSelect, { 837 cardId, 838 options: assigneeOptions || NO_OPTIONS, 839 currentAssignee, 840 variant: "ghost" 841 }) : null 842 }), details && details.clarium_status_display_name && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SidebarDetailContent, { 843 label: "Status", 844 classNames: "pr-1", 845 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ClariumStatusPill, { status: details.clarium_status_display_name }) 846 })] }), 847 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SideBarSectionContainer, { children: [
848 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SidebarDetailContent, { 849 label: "Performing Physician", 850 classNames: "pr-1", 851 detailClassNames: "max-w-[50%]", 852 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PhysicianDetails, { 853 physicians: details.utilizing_physicians, 854 primaryPhysician: details.primary_physician_display_name 855 }) 856 }), 857 !hideApprovedOrLocation ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SidebarDetailContent, { 858 label: "Approved OR Location", 859 classNames: "pr-1", 860 detailClassNames: "max-w-[50%]", 861 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LocationDetails, { locations: details.locations }) 862 }) : null, 863 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SidebarDetailContent, { 864 label: "Service Lines", 865 classNames: "pr-1", 866 detailClassNames: "max-w-[50%]", 867 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ServiceLineDetails, { serviceLines: details.service_lines }) 868 }), 869 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SidebarDetailContent, { 870 label: "Cases in Last 12 Months", 871 classNames: "pr-1", 872 children: typeof caseCount === "number" ? caseCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardCasesDialog, { caseCount }) : 0 : "â" 873 }),
874 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SidebarDetailContent, { 875 label: "Utilizing Case Type", 876 classNames: "pr-1", 877 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CaseType, { sharedCaseFrequency: details.metric_shared_case_frequency }) 878 }) 879 ] }), 880 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 881 className: "pt-3", 882 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProcedureCodesList, { 883 mode: "read", 884 procedureCodes: details.clinical_procedures 885 }) 886 }) 887 ] 888 }); 889} 890function CardSideBar() { 891 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SideBarContainer, { children: [ 892 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardSideBarDetails, {}), 893 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Divider, {}), 894 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardActivities, {}) 895 ] }) }); 896} 897function NumberInput({ insideLabel, name, defaultValue, disabled, onChange, classNames, hideSteppers = false }) { 898 const [count, setCount] = import_react.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0); 899 import_react.useEffect(() => { 900 setCount(defaultValue !== null && defaultValue !== void 0 ? defaultValue : 0); 901 }, [defaultValue]); 902 function handleChange(e) { 903 const c = Number(e.target.value); 904 if (isNaN(c)) return; 905 setCount(c); 906 onChange(c, name); 907 } 908 function handleAddition() { 909 const newCount = count + 1; 910 setCount(newCount); 911 onChange(newCount, name); 912 } 913 function hanldeSubtraction() { 914 const newCount = count > 0 ? count - 1 : count; 915 setCount(newCount); 916 onChange(newCount, name); 917 } 918 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 919 className: cn("flex w-full items-center rounded-lg border border-zinc-200 bg-white py-2 pl-3 pr-2 text-sm font-medium", classNames), 920 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 921 className: cn("flex flex-1 justify-center", disabled || hideSteppers ? "ml-0" : "ml-3"), 922 children: [insideLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { 923 className: "text-zinc-500", 924 children: insideLabel 925 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { 926 className: "text-center disabled:bg-white disabled:text-zinc-500", 927 name, 928 value: count, 929 disabled, 930 onChange: handleChange, 931 size: 2 932 })] 933 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 934 className: cn("rounded-sm shadow", disabled || hideSteppers ? "hidden" : ""), 935 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 936 className: "cursor-pointer select-none border-b border-zinc-200 hover:bg-zinc-100", 937 onClick: handleAddition, 938 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Add, { className: "h-4 w-4 text-indigo-700" }) 939 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 940 className: "cursor-pointer select-none hover:bg-zinc-100", 941 onClick: hanldeSubtraction, 942 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Subtract, { className: "h-4 w-4 text-indigo-700" }) 943 })] 944 })] 945 }); 946} 947function SideBarAction({ item, variant = "default" }) { 948 var _ref, _ref2, _changedItem$change$u, _changedItem$change, _ref3, _ref4, _changedItem$change$u2, _changedItem$change2; 949 const update = useItemChangeAction(); 950 const remove = useRemoveItemChangeAction(); 951 const changedItem = usePrefCardActionChangedItem(item.preference_card_client_item_master_id); 952 const hasActiveSwap = (changedItem === null || changedItem === void 0 ? void 0 : changedItem.swapParentId) === item.preference_card_client_item_master_id; 953 const { data: actions, isSuccess } = useQuery(prefCardsBootstrapQuery(selectActionNames)); 954 const hasAppliedChanges = Boolean(changedItem); 955 const hasRecommendation = item.recommended_action_display_name !== null; 956 const isPack = variant === "pack"; 957 const [isCancelable, setIsCancelable] = import_react.useState(hasAppliedChanges && !hasActiveSwap); 958 const showActions = !isPack || isCancelable || hasAppliedChanges || hasRecommendation; 959 const openDefaultValue = !hasRecommendation && !(changedItem === null || changedItem === void 0 ? void 0 : changedItem.change) ? item.unit_open : (_ref = (_ref2 = (_changedItem$change$u = changedItem === null || changedItem === void 0 || (_changedItem$change = changedItem.change) === null || _changedItem$change === void 0 ? void 0 : _changedItem$change.unit_open) !== null && _changedItem$change$u !== void 0 ? _changedItem$change$u : item.unit_open_recommendation) !== null && _ref2 !== void 0 ? _ref2 : item.unit_open) !== null && _ref !== void 0 ? _ref : void 0; 960 const holdDefaultValue = !hasRecommendation && !(changedItem === null || changedItem === void 0 ? void 0 : changedItem.change) ? item.unit_hold : (_ref3 = (_ref4 = (_changedItem$change$u2 = changedItem === null || changedItem === void 0 || (_changedItem$change2 = changedItem.change) === null || _changedItem$change2 === void 0 ? void 0 : _changedItem$change2.unit_hold) !== null && _changedItem$change$u2 !== void 0 ? _changedItem$change$u2 : item.unit_hold_recommendation) !== null && _ref4 !== void 0 ? _ref4 : item.unit_hold) !== null && _ref3 !== void 0 ? _ref3 : void 0; 961 const [currentChangedOpenCount, setCurrentChangedOpenCount] = import_react.useState(openDefaultValue); 962 const [currentChangedHoldCount, setCurrentChangedHoldCount] = import_react.useState(holdDefaultValue); 963 const [validationError, setValidationError] = import_react.useState(null); 964 const formRef = import_react.useRef(null); 965 const key = changedItem ? `${changedItem.change.unit_open}|${changedItem.change.unit_hold}` : "0"; 966 if (!isSuccess) return null; 967 const isSnoozed = item.snooze_until !== null; 968 const isInPendingRequest = item.in_active_change_request === true; 969 const isInputDisabled = hasAppliedChanges || isSnoozed || isInPendingRequest; 970 const tooltipMessage = getTooltipMessage(isSnoozed, isInPendingRequest); 971 function handleSubmit(event) { 972 event.preventDefault(); 973 setValidationError(null); 974 const formData = new FormData(event.currentTarget);
975 const holdVal = formData.get("unit_hold"); 976 const openVal = formData.get("unit_open"); 977 if (typeof openVal === "string" && typeof holdVal === "string" && item.preference_card_client_item_master_id !== null && typeof actions !== "undefined") { 978 var _item$unit_open, _item$unit_hold; 979 const unit_hold = Number(holdVal); 980 const unit_open = Number(openVal); 981 if (unit_open === ((_item$unit_open = item.unit_open) !== null && _item$unit_open !== void 0 ? _item$unit_open : 0) && unit_hold === ((_item$unit_hold = item.unit_hold) !== null && _item$unit_hold !== void 0 ? _item$unit_hold : 0)) { 982 setValidationError("No changes detected. The quantities match the original values."); 983 return; 984 } 985 update({ 986 change: { 987 preference_card_client_item_master_id: item.preference_card_client_item_master_id, 988 action_type_id: getActionTypeIdFromItem(item, unit_open, unit_hold, actions), 989 unit_hold, 990 unit_open 991 }, 992 item 993 }); 994 } 995 setIsCancelable(true); 996 } 997 function handleChange(updatedCount, name) { 998 if (name === "unit_open") setCurrentChangedOpenCount(updatedCount); 999 if (name === "unit_hold") setCurrentChangedHoldCount(updatedCount); 1000 let isOpenValueDifferent = updatedCount !== item.unit_open && name === "unit_open"; 1001 let isHoldValueDifferent = updatedCount !== item.unit_hold && name === "unit_hold"; 1002 if (hasRecommendation) { 1003 isOpenValueDifferent = updatedCount !== item.unit_open_recommendation && name === "unit_open"; 1004 isHoldValueDifferent = updatedCount !== item.unit_hold_recommendation && name === "unit_hold"; 1005 } 1006 setIsCancelable(isOpenValueDifferent || isHoldValueDifferent); 1007 } 1008 function handleReset() { 1009 if (changedItem && changedItem.item.preference_card_client_item_master_id) remove(changedItem.item.preference_card_client_item_master_id); 1010 if (hasRecommendation) { 1011 setCurrentChangedOpenCount(item.unit_open_recommendation); 1012 setCurrentChangedHoldCount(item.unit_hold_recommendation); 1013 } else { 1014 setCurrentChangedOpenCount(item.unit_open); 1015 setCurrentChangedHoldCount(item.unit_hold); 1016 } 1017 setValidationError(null); 1018 setIsCancelable(false); 1019 } 1020 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Form, { 1021 action: `/preference-cards`, 1022 ref: formRef, 1023 onSubmit: handleSubmit, 1024 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1025 className: cn("flex w-full items-center self-stretch rounded-md bg-zinc-100", !isPack && "mb-3"), 1026 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1027 className: "flex w-full flex-col items-center justify-center", 1028 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 1029 className: "flex h-9 select-none items-center justify-center self-stretch rounded-tl-md bg-indigo-50 px-3 font-medium", 1030 children: "Open Qty" 1031 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 1032 className: "flex items-center justify-center self-stretch px-3 py-2", 1033 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NumberInput, { 1034 name: "unit_open", 1035 defaultValue: currentChangedOpenCount, 1036 disabled: isInputDisabled, 1037 insideLabel: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CurrentUnitCountLabel, { 1038 currentCount: item.unit_open, 1039 showCountLabel: hasAppliedChanges && currentChangedOpenCount !== item.unit_open, 1040 hasRecommendation: hasRecommendation && item.unit_open_recommendation !== null && item.unit_open !== item.unit_open_recommendation 1041 }), 1042 onChange: handleChange, 1043 classNames: isPack ? "h-12 w-full rounded-[5px] py-0" : "w-32", 1044 hideSteppers: isPack 1045 }) 1046 })] 1047 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1048 className: "flex w-full flex-col items-center justify-center", 1049 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 1050 className: "flex h-9 select-none items-center justify-center self-stretch rounded-tr-md bg-indigo-50 px-3 font-medium", 1051 children: isPack ? "Hold Qty" : "PRN Qty" 1052 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 1053 className: "flex items-center justify-center self-stretch px-3 py-2", 1054 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NumberInput, { 1055 name: "unit_hold", 1056 defaultValue: currentChangedHoldCount, 1057 disabled: isInputDisabled, 1058 insideLabel: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CurrentUnitCountLabel, { 1059 currentCount: item.unit_hold, 1060 showCountLabel: hasAppliedChanges && currentChangedHoldCount !== item.unit_hold, 1061 hasRecommendation: hasRecommendation && item.unit_hold_recommendation !== null && item.unit_hold !== item.unit_hold_recommendation 1062 }), 1063 onChange: handleChange, 1064 classNames: isPack ? "h-12 w-full rounded-[5px] py-0" : "w-32", 1065 hideSteppers: isPack 1066 }) 1067 })] 1068 })] 1069 }
1069), showActions ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1070 className: cn("flex flex-col gap-1", isPack && "mt-3"), 1071 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1072 className: "flex flex-row space-x-2", 1073 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { 1074 type: "reset", 1075 disabled: Boolean(tooltipMessage) || !isCancelable, 1076 variant: "destructive-ghost", 1077 onClick: handleReset, 1078 className: "w-1/2 select-none", 1079 children: "Cancel" 1080 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { 1081 type: "submit", 1082 disabled: Boolean(tooltipMessage) || hasAppliedChanges || !hasRecommendation && !isCancelable, 1083 className: "w-1/2 select-none", 1084 children: hasAppliedChanges ? "Applied" : "Save Changes" 1085 })] 1086 }), validationError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 1087 className: "mt-2 rounded-md border border-amber-200 bg-amber-50 px-3 py-2", 1088 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { 1089 className: "text-sm text-amber-800", 1090 children: validationError 1091 }) 1092 }) : null] 1093 }) : null] 1094 }, key) }); 1095} 1096function CurrentUnitCountLabel({ currentCount, showCountLabel, hasRecommendation }) { 1097 if (!hasRecommendation && !showCountLabel) return null; 1098 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1099 className: "flex select-none items-center justify-center gap-1 font-medium", 1100 children: [currentCount, /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowRight, { className: "h-3.5 w-3.5 text-zinc-600" })] 1101 }); 1102} 1103var TOOLTIP_TEXT$2 = ["Distribution of the number of units used per case for the selected item over the past 12 months"]; 1104var chartConfig$2 = { percent_cases: { 1105 label: "Units Used", 1106 color: "hsl(var(--chart-primary))" 1107} }; 1108function FrequencyOfUseChart({ frequency, caseCount }) { 1109 const subText = `${caseCount.toLocaleString()} case(s) in the last 12 months`; 1110 const data = import_react.useMemo(() => { 1111 return frequency.map((f) => ({ 1112 count_items: f.count_items, 1113 count_cases: f.count_cases, 1114 percent_cases: formatYAxisValue$1(f.count_cases, caseCount) 1115 })); 1116 }, [frequency, caseCount]); 1117 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1118 className: "flex flex-col gap-0.5", 1119 children: [ 1120 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 1121 className: "type-body-xs flex items-center font-medium text-zinc-800", 1122 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InfoToolTip, { 1123 iconClassName: "h-4 w-4", 1124 info: TOOLTIP_TEXT$2, 1125 children: "Frequency of Use" 1126 }) 1127 }), 1128 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 1129 className: "type-body-2xs leading-4 text-gray-400", 1130 children: subText 1131 }), 1132 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartContainer, { 1133 config: chartConfig$2, 1134 className: "mt-1 h-full min-h-[230px] w-full", 1135 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(BarChart, { 1136 data, 1137 children: [ 1138 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CartesianGrid, {}), 1139 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(XAxis, { 1140 dataKey: "count_items", 1141 tickLine: false, 1142 tickMargin: 3, 1143 axisLine: false, 1144 fontSize: 9, 1145 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label$1, { 1146 value: "Units Used", 1147 offset: -4, 1148 position: "insideBottom" 1149 }) 1150 }), 1151 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YAxis, { 1152 dataKey: "percent_cases", 1153 tickLine: false, 1154 tickMargin: -1, 1155 axisLine: false, 1156 fontSize: 9, 1157 tickCount: 6, 1158 type: "number", 1159 width: 40, 1160 tickFormatter: (value) => `${value}%`, 1161 ticks: [ 1162 0, 1163 20, 1164 40, 1165 60, 1166 80, 1167 100 1168 ], 1169 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label$1, { 1170 value: "% of Cases Used", 1171 angle: -90, 1172 offset: 0, 1173 position: "insideLeft", 1174 style: { textAnchor: "middle" } 1175 }) 1176 }), 1177 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Bar, { 1178 dataKey: "percent_cases", 1179 fill: "var(--color-percent_cases)", 1180 radius: 4 1181 }),
1182 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartTooltip, { 1183 cursor: false, 1184 content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CustomTooltip$1, {}) 1185 }) 1186 ] 1187 }) 1188 }) 1189 ] 1190 }); 1191} 1192function formatYAxisValue$1(caseCount, totalCases) { 1193 const value = formatNumber(caseCount / totalCases * 100, 1); 1194 return parseFloat(value); 1195} 1196var CustomTooltip$1 = ({ active, payload }) => { 1197 if (active && payload && payload.length) { 1198 const chartData = payload[0].payload; 1199 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 1200 className: "type-body-2xs grid min-w-[6rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-zinc-800 shadow-xl", 1201 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1202 className: "type-body-2xs mb-1.5 font-medium", 1203 children: [chartData.count_items, " Units Used"] 1204 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1205 className: "type-body-2xs", 1206 children: [ 1207 chartData.count_cases.toLocaleString(), 1208 " Cases (", 1209 chartData.percent_cases, 1210 "%)" 1211 ] 1212 })] }) 1213 }); 1214 } 1215 return null; 1216}; 1217init_objectSpread2(); 1218var TOOLTIP_TEXT$1 = ["Distribution of the number of units used per case for the selected item over the past 12 months, weighted by recency"]; 1219var chartConfig$1 = { 1220 count_cases_last_3_months_percent: { 1221 label: "Last 3 mos", 1222 color: "#172554" 1223 }, 1224 count_cases_last_3_6_months_percent: { 1225 label: "3-6 mos ago", 1226 color: "#1E40AF" 1227 }, 1228 count_cases_last_6_12_months_percent: { 1229 label: "6-12 mos ago", 1230 color: "#3B82F6" 1231 } 1232}; 1233var chartExtendedLabelMap = { 1234 count_cases_last_3_months_percent: "Last 3 months", 1235 count_cases_last_3_6_months_percent: "3-6 months ago", 1236 count_cases_last_6_12_months_percent: "6-12 months ago" 1237}; 1238function FrequencyOfUseWeightedChart({ frequency, caseCount }) { 1239 const data = import_react.useMemo(() => { 1240 return frequency.map((f) => { 1241 var _f$count_items, _f$count_cases_0_3m, _f$count_cases_3_6m, _f$count_cases_6_12m, _f$count_cases_0_3m2, _f$count_cases_3_6m2, _f$count_cases_6_12m2, _f$count_cases; 1242 return { 1243 count_items: `${(_f$count_items = f.count_items) !== null && _f$count_items !== void 0 ? _f$count_items : 0}`, 1244 count_cases_last_3_months_value: (_f$count_cases_0_3m = f.count_cases_0_3m) !== null && _f$count_cases_0_3m !== void 0 ? _f$count_cases_0_3m : 0, 1245 count_cases_last_3_6_months_value: (_f$count_cases_3_6m = f.count_cases_3_6m) !== null && _f$count_cases_3_6m !== void 0 ? _f$count_cases_3_6m : 0, 1246 count_cases_last_6_12_months_value: (_f$count_cases_6_12m = f.count_cases_6_12m) !== null && _f$count_cases_6_12m !== void 0 ? _f$count_cases_6_12m : 0, 1247 count_cases_last_3_months_percent: formatYAxisValue((_f$count_cases_0_3m2 = f.count_cases_0_3m) !== null && _f$count_cases_0_3m2 !== void 0 ? _f$count_cases_0_3m2 : 0, caseCount), 1248 count_cases_last_3_6_months_percent: formatYAxisValue((_f$count_cases_3_6m2 = f.count_cases_3_6m) !== null && _f$count_cases_3_6m2 !== void 0 ? _f$count_cases_3_6m2 : 0, caseCount), 1249 count_cases_last_6_12_months_percent: formatYAxisValue((_f$count_cases_6_12m2 = f.count_cases_6_12m) !== null && _f$count_cases_6_12m2 !== void 0 ? _f$count_cases_6_12m2 : 0, caseCount), 1250 count_cases_percent: formatYAxisValue((_f$count_cases = f.count_cases) !== null && _f$count_cases !== void 0 ? _f$count_cases : 0, caseCount) 1251 }; 1252 }); 1253 }, [frequency, caseCount]); 1254 const barRadii = import_react.useMemo(() => { 1255 const barOrder = [ 1256 "count_cases_last_3_months_percent", 1257 "count_cases_last_3_6_months_percent", 1258 "count_cases_last_6_12_months_percent" 1259 ]; 1260 return barOrder.reduce((result, key, index) => { 1261 result[key] = !barOrder.slice(0, index).some((barKey) => data.some((item) => item[barKey] > 0)) ? [ 1262 4, 1263 4, 1264 1, 1265 1 1266 ] : [ 1267 1, 1268 1, 1269 1, 1270 1 1271 ]; 1272 return result; 1273 }, {}); 1274 }, [data]); 1275 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1276 className: "flex flex-col gap-0.5", 1277 children: [ 1278 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 1279 className: "type-body-xs flex items-center font-medium text-zinc-800", 1280 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InfoToolTip, { 1281 iconClassName: "h-4 w-4", 1282 info: TOOLTIP_TEXT$1, 1283 children: "Frequency of Use" 1284 }) 1285 }),
1286 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 1287 className: "type-eyebrow leading-4 text-zinc-500", 1288 children: `${caseCount.toLocaleString()} case(s) in the last 12 months` 1289 }), 1290 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartContainer, { 1291 config: chartConfig$1, 1292 className: "mt-1 h-full min-h-[230px] w-full", 1293 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(BarChart, { 1294 barCategoryGap: "30%", 1295 accessibilityLayer: true, 1296 data, 1297 className: "[&_.recharts-cartesian-grid-horizontal_line]:[stroke-dasharray:none] [&_.recharts-cartesian-grid-vertical_line]:!stroke-zinc-200 [&_.recharts-cartesian-grid-vertical_line]:[stroke-dasharray:3,3]", 1298 children: [ 1299 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CartesianGrid, { verticalCoordinatesGenerator: (props) => { 1300 const xAxis = props.xAxis; 1301 if (!xAxis || !xAxis.scale) return []; 1302 const scale = xAxis.scale; 1303 const bandwidth = scale.bandwidth ? scale.bandwidth() : 0; 1304 const coords = [scale.range()[0]]; 1305 scale.domain().forEach((entry) => { 1306 const value = scale(entry); 1307 if (value !== void 0) coords.push(value + bandwidth); 1308 }); 1309 return coords; 1310 } }), 1311 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(XAxis, { 1312 dataKey: "count_items", 1313 tickLine: false, 1314 tickMargin: 3, 1315 axisLine: false, 1316 fontSize: 9, 1317 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label$1, { 1318 value: "Units Used", 1319 offset: -4, 1320 fontSize: 9, 1321 position: "insideBottom" 1322 }) 1323 }), 1324 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YAxis, { 1325 dataKey: "count_cases_percent", 1326 tickLine: false, 1327 axisLine: false, 1328 fontSize: 9, 1329 domain: [0, 100], 1330 tickCount: 5, 1331 type: "number", 1332 width: 40, 1333 ticks: [ 1334 0, 1335 50, 1336 100 1337 ], 1338 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label$1, { 1339 value: "% of Cases", 1340 offset: 0, 1341 angle: -90, 1342 fontSize: 9, 1343 position: "insideLeft", 1344 style: { textAnchor: "middle" } 1345 }) 1346 }), 1347 [ 1348 0, 1349 25, 1350 50, 1351 75, 1352 100 1353 ].map((val, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReferenceLine, { y: val }, i)), 1354 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartLegend, { content: (props) => { 1355 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1356 className: "type-eyebrow mt-3 text-zinc-500", 1357 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Recency of case:" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartLegendContent, { 1358 className: "justify-start pt-2", 1359 payload: props.payload 1360 })] 1361 }); 1362 } }), 1363 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartTooltip, { 1364 cursor: false, 1365 content: (props) => { 1366 const order = Object.keys(chartConfig$1); 1367 const sortedPayload = [...props.payload].sort((a, b) => order.indexOf(a.dataKey) - order.indexOf(b.dataKey)); 1368 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartTooltipContent, _objectSpread2(_objectSpread2({}, props), {}, { 1369 payload: sortedPayload, 1370 formatter: (value, name, item, _index) => { 1371 var _item$dataKey$toStrin, _item$dataKey; 1372 const extendedLabel = chartExtendedLabelMap[name]; 1373 const rawKey = `${(_item$dataKey$toStrin = (_item$dataKey = item.dataKey) === null || _item$dataKey === void 0 ? void 0 : _item$dataKey.toString().replace("_percent", "").replace("_value", "")) !== null && _item$dataKey$toStrin !== void 0 ? _item$dataKey$toStrin : ""}_value`; 1374 const rawValue = item.payload[rawKey]; 1375 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 1376 className: "h-2.5 w-2.5 shrink-0 rounded-[2px] border", 1377 style: { 1378 backgroundColor: item.color, 1379 borderColor: item.color 1380 } 1381 }
1381), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1382 className: "flex flex-1 items-center justify-between gap-2 leading-none", 1383 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { 1384 className: "font-medium", 1385 children: extendedLabel 1386 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [ 1387 rawValue, 1388 " Cases (", 1389 value, 1390 "%)" 1391 ] })] 1392 })] }); 1393 }, 1394 labelFormatter: (value) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: `${value} Units Used` }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { className: "my-1 w-full border-t border-zinc-200" })] }) 1395 })); 1396 } 1397 }), 1398 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Bar, { 1399 dataKey: "count_cases_last_6_12_months_percent", 1400 stackId: "a", 1401 fill: chartConfig$1["count_cases_last_6_12_months_percent"].color, 1402 radius: barRadii.count_cases_last_6_12_months_percent, 1403 stroke: "white", 1404 strokeWidth: 1 1405 }), 1406 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Bar, { 1407 dataKey: "count_cases_last_3_6_months_percent", 1408 stackId: "a", 1409 fill: chartConfig$1["count_cases_last_3_6_months_percent"].color, 1410 radius: barRadii.count_cases_last_3_6_months_percent, 1411 stroke: "white", 1412 strokeWidth: 1 1413 }), 1414 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Bar, { 1415 dataKey: "count_cases_last_3_months_percent", 1416 stackId: "a", 1417 fill: chartConfig$1["count_cases_last_3_months_percent"].color, 1418 radius: barRadii.count_cases_last_3_months_percent, 1419 stroke: "white", 1420 strokeWidth: 1 1421 }) 1422 ] 1423 }) 1424 }) 1425 ] 1426 }); 1427} 1428function formatYAxisValue(caseCount, totalCases) { 1429 const value = formatNumber(caseCount / totalCases * 100, 1); 1430 return parseFloat(value); 1431} 1432var TOOLTIP_TEXT = "Average number of units used per case for the selected item."; 1433var chartConfig = { average: { 1434 label: "Avg. Units", 1435 color: "hsl(var(--chart-primary))" 1436} }; 1437function TimeSeriesChart({ timeSeries }) { 1438 const data = import_react.useMemo(() => { 1439 return timeSeries.map((t) => ({ 1440 average: Math.round(t.average), 1441 month: format(new Date(t.start_date), "MMM"), 1442 start_date: t.start_date, 1443 end_date: t.end_date 1444 })); 1445 }, [timeSeries]); 1446 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1447 className: "flex flex-col gap-0.5", 1448 children: [ 1449 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 1450 className: "type-body-xs flex items-center font-medium text-zinc-800", 1451 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InfoToolTip, { 1452 info: TOOLTIP_TEXT, 1453 iconClassName: "h-4 w-4", 1454 children: "Used Per Case" 1455 }) 1456 }), 1457 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 1458 className: "type-body-2xs leading-4 text-gray-400", 1459 children: "Last 12 months" 1460 }), 1461 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartContainer, { 1462 config: chartConfig, 1463 className: "mt-1 h-full min-h-[200px] w-full", 1464 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(LineChart, { 1465 data, 1466 children: [ 1467 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CartesianGrid, { vertical: false }), 1468 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(XAxis, { 1469 dataKey: "month", 1470 tickLine: false, 1471 tickMargin: 3, 1472 axisLine: false, 1473 tickFormatter: (value) => value.slice(0, 3), 1474 fontSize: 9, 1475 tickCount: 12, 1476 height: 40, 1477 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label$1, { 1478 value: "Month", 1479 offset: 0, 1480 position: "insideBottom" 1481 }) 1482 }), 1483 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(YAxis, { 1484 dataKey: "average", 1485 allowDecimals: false, 1486 type: "number", 1487 tickLine: false, 1488 tickMargin: 0, 1489 axisLine: false, 1490 fontSize: 9, 1491 width: 25, 1492 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label$1, { 1493 value: "Avg Units Per Case", 1494 offset: 0, 1495 angle: -90, 1496 position: "insideLeft", 1497 style: { textAnchor: "middle" } 1498 }) 1499 }),
1500 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Line, { 1501 dataKey: "average", 1502 stroke: "var(--color-average)", 1503 strokeWidth: 2, 1504 dot: false, 1505 type: "linear" 1506 }), 1507 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartTooltip, { 1508 cursor: false, 1509 content: CustomTooltip 1510 }) 1511 ] 1512 }) 1513 }) 1514 ] 1515 }); 1516} 1517var CustomTooltip = ({ active, payload, label }) => { 1518 if (active && payload && payload.length) { 1519 const payloadItem = payload[0]; 1520 const data = payloadItem.payload; 1521 const value = payloadItem.value; 1522 if (typeof value !== "number" || !(data === null || data === void 0 ? void 0 : data.start_date)) return null; 1523 const isZero = value === 0; 1524 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 1525 className: "type-body-2xs grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-zinc-800 shadow-xl", 1526 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1527 className: "flex flex-col gap-2", 1528 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1529 className: "type-body-2xs mb-1.5 font-medium", 1530 children: [ 1531 label, 1532 " ", 1533 format(new Date(data.start_date), "yyyy") 1534 ] 1535 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 1536 className: "type-body-2xs", 1537 children: isZero ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1538 className: "flex flex-col gap-2 text-amber-600", 1539 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "No units used" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1540 className: "flex flex-col gap-1 text-xs text-gray-500", 1541 children: [ 1542 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Note: This could mean either:" }), 1543 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "⢠No cases used this item" }), 1544 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "⢠No cases occurred this month" }) 1545 ] 1546 })] 1547 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1548 className: "flex justify-between gap-1", 1549 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Avg. Units" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: value })] 1550 }) 1551 })] 1552 }) 1553 }); 1554 } 1555 return null; 1556}; 1557function ItemCharts(props) { 1558 var _item$frequency_of_us, _item$frequency_of_us2, _item$average_used_ra, _item$average_used_ra2; 1559 const { hasCoPrefCardItemFrequencyOfUseWeightedChart, hasCoPrefCardItemTimeSeriesWeightedChart } = ie(); 1560 const { data: item, isLoading } = useQuery(prefCardItemDetailsQuery(props.cardId, props.itemId, true)); 1561 const { data: caseCount } = usePrefCardCases(props.cardId, { 1562 for_preference_card_client_item_master_ids: props.itemId, 1563 page_size: "0" 1564 }, { select: (data) => data.result_set_size }); 1565 if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 1566 className: "h-9", 1567 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "mx-1 my-2 h-7 w-full rounded-lg bg-slate-200" }) 1568 }); 1569 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [hasCoPrefCardItemFrequencyOfUseWeightedChart ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FrequencyOfUseWeightedChart, { 1570 frequency: (_item$frequency_of_us = item === null || item === void 0 ? void 0 : item.frequency_of_use) !== null && _item$frequency_of_us !== void 0 ? _item$frequency_of_us : [], 1571 caseCount: caseCount !== null && caseCount !== void 0 ? caseCount : 0 1572 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FrequencyOfUseChart, { 1573 frequency: (_item$frequency_of_us2 = item === null || item === void 0 ? void 0 : item.frequency_of_use) !== null && _item$frequency_of_us2 !== void 0 ? _item$frequency_of_us2 : [], 1574 caseCount: caseCount !== null && caseCount !== void 0 ? caseCount : 0 1575 }), hasCoPrefCardItemTimeSeriesWeightedChart ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TimeSeriesWeightedChart, { timeSeries: (_item$average_used_ra = item === null || item === void 0 ? void 0 : item.average_used_range) !== null && _item$average_used_ra !== void 0 ? _item$average_used_ra : [] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TimeSeriesChart, { timeSeries: (_item$average_used_ra2 = item === null || item === void 0 ? void 0 : item.average_used_range) !== null && _item$average_used_ra2 !== void 0 ? _item$average_used_ra2 : [] })] }); 1576} 1577function SnoozeNotification({ snoozeUntil, preferenceCardClientItemMasterId }) { 1578 const { cardId } = useParams(); 1579 const { isSuccess, data: snoozeBootstrap }
1579 = useQuery(prefCardsBootstrapQuery(selectSnoozeBootstrap)); 1580 const { unSnooze } = useUnSnooze(cardId); 1581 if (!isSuccess) return null; 1582 const diff = getTimeDifferenceByUnit(snoozeBootstrap.defaultSnoozeValue.unit, snoozeUntil, subDays(/* @__PURE__ */ new Date(), 1)); 1583 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1584 className: "flex w-full flex-row items-center justify-between rounded-md border border-zinc-400 bg-zinc-100 px-2 font-medium", 1585 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [ 1586 "Snoozed for ", 1587 diff, 1588 " ", 1589 snoozeBootstrap.defaultSnoozeValue.unit, 1590 diff === 1 ? "" : "s" 1591 ] }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { 1592 variant: "link", 1593 size: "sm", 1594 onClick: () => unSnooze(preferenceCardClientItemMasterId), 1595 children: "Remove" 1596 })] 1597 }); 1598} 1599function InPendingRequestNotification() { 1600 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 1601 className: "type-body-xs w-full rounded-md border border-yellow-600 bg-yellow-100 px-2 py-1.5 font-medium", 1602 children: "Item is in a pending request" 1603 }); 1604} 1605function HasRecommendationsNotification() { 1606 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 1607 className: "type-body-xs w-full rounded-md border border-yellow-600 bg-yellow-100 px-2 py-1.5 font-medium", 1608 children: "This item has new quantity recommendations" 1609 }); 1610} 1611function ItemHeader(props) { 1612 var _props$description, _props$description2; 1613 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1614 className: "relative flex flex-col gap-y-3", 1615 children: [ 1616 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { 1617 className: cn("absolute -right-4 -top-5 rounded-full", props.compact && "-right-[14px] -top-[23px]"), 1618 "aria-label": "close", 1619 onClick: props.onClose, 1620 size: "icon", 1621 variant: "text", 1622 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CloseFilled, { className: "h-4 w-4 text-zinc-400" }) 1623 }), 1624 props.clientItemMasterId ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1625 className: cn("flex flex-row items-start justify-start", props.compact ? "gap-2" : "space-x-3"), 1626 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlobalImageDialog, { 1627 resourceId: props.clientItemMasterId, 1628 imageType: ImageType.ClientItemMaster, 1629 description: props.description || "N/A", 1630 mfgId: props.mfgId || "â", 1631 isInactive: !props.isActive, 1632 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { 1633 variant: "thumbnail", 1634 size: "thumbnail", 1635 className: cn("bg-white", props.compact && "size-12 overflow-hidden rounded-[3px] p-[2.667px]"), 1636 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThumbnailFromImageList, { 1637 clientItemMasterId: props.clientItemMasterId, 1638 className: props.compact ? "size-full" : void 0 1639 }) 1640 }) 1641 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1642 className: cn(props.compact && "flex min-w-0 flex-1 flex-col gap-1"), 1643 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { 1644 className: cn("font-m", props.compact ? "type-eyebrow uppercase leading-[11px] tracking-[0.02em] text-indigo-600" : "type-body-xs leading-4 text-primary-purple"), 1645 children: props.mfgId 1646 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UimDescriptionTooltip, { 1647 itemDescription: props.description, 1648 uimLongDescription: props.uimLongDescription, 1649 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { 1650 className: cn("cursor-default text-[17px]", props.compact ? "font-m leading-[22px] text-[rgba(0,0,0,0.85)]" : "leading-5"), 1651 children: (_props$description = props.description) !== null && _props$description !== void 0 ? _props$description : "â" 1652 }) 1653 })] 1654 })] 1655 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1656 className: "mr-6", 1657 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { 1658 className: "type-body-xs font-m leading-4 text-primary-purple", 1659 children: props.mfgCatalogId 1660 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UimDescriptionTooltip, { 1661 itemDescription: props.description, 1662 uimLongDescription: props.uimLongDescription, 1663 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { 1664 className: "cursor-default text-[17px]/5", 1665 children: (_props$description2 = props.description) !== null && _props$description2 !== void 0 ? _props$description2 : "â" 1666 }) 1667 })] 1668 }),
1669 props.inActiveChangeRequest ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InPendingRequestNotification, {}) : null, 1670 props.hasRecommendations ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HasRecommendationsNotification, {}) : null, 1671 props.snoozeUntil ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SnoozeNotification, { 1672 snoozeUntil: props.snoozeUntil, 1673 preferenceCardClientItemMasterId: props.clientItemMasterId 1674 }) : null 1675 ] 1676 }); 1677} 1678var TAB_TRIGGER_CLASS_NAME = "type-body rounded-none bg-transparent px-0 pb-2 pt-2 font-m leading-[19px] text-zinc-400 shadow-none data-[state=active]:border-b-2 data-[state=active]:border-indigo-600 data-[state=active]:bg-transparent data-[state=active]:text-zinc-900 data-[state=active]:shadow-none"; 1679function ItemSidebarTabs() { 1680 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TabsList, { 1681 "aria-label": "Item details", 1682 className: "h-9 w-full justify-start gap-6 rounded-none border-0 border-b border-zinc-200 bg-transparent px-4 py-0", 1683 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsTrigger, { 1684 value: "pack_contents", 1685 className: TAB_TRIGGER_CLASS_NAME, 1686 children: "Pack Contents" 1687 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsTrigger, { 1688 value: "overview", 1689 className: TAB_TRIGGER_CLASS_NAME, 1690 children: "Overview" 1691 })] 1692 }); 1693} 1694const CasesTable = ({ cardId, itemId, differenceType, canFetchItemDetails = true }) => { 1695 const { data: item } = useQuery(prefCardItemDetailsQuery(cardId, itemId, canFetchItemDetails && differenceType !== "ADD")); 1696 const { data, isLoading, isFetchingNextPage, hasNextPage, fetchNextPage } = useInfiniteQuery(prefCardCasesInfiniteQuery(cardId, itemId)); 1697 const [expandedDateGroups, setExpandedDateGroups] = import_react.useState([]); 1698 const toggleDateGroup = import_react.useCallback((dateGroup) => () => { 1699 setExpandedDateGroups((prev) => { 1700 if (prev.includes(dateGroup)) return prev.filter((id) => id !== dateGroup); 1701 else return [...prev, dateGroup]; 1702 }); 1703 }, []); 1704 const groupedCases = import_react.useMemo(() => { 1705 var _data$pages$flatMap, _data$pages; 1706 const allCases = (_data$pages$flatMap = data === null || data === void 0 || (_data$pages = data.pages) === null || _data$pages === void 0 ? void 0 : _data$pages.flatMap((page) => page.items)) !== null && _data$pages$flatMap !== void 0 ? _data$pages$flatMap : []; 1707 const baselineDate = item === null || item === void 0 ? void 0 : item.recommendation_impact_start_date; 1708 if (!baselineDate) return allCases; 1709 return groupCasesByDate(allCases, baselineDate); 1710 }, [data, item]); 1711 const nonEmptyGroups = import_react.useMemo(() => { 1712 return groupedCases.filter((item$1) => { 1713 if (isDateGroup(item$1)) return item$1.cases.length > 0; 1714 return true; 1715 }); 1716 }, [groupedCases]); 1717 const allAccordionsExpanded = !nonEmptyGroups.some((item$1) => isDateGroup(item$1)) || nonEmptyGroups.filter((item$1) => isDateGroup(item$1)).every((item$1) => expandedDateGroups.includes(item$1.dateKey)); 1718 const tableContainerRef = import_react.useRef(null); 1719 const fetchMoreOnBottomReached = import_react.useCallback((containerRefElement) => { 1720 if (containerRefElement) { 1721 const { scrollHeight, scrollTop, clientHeight } = containerRefElement; 1722 if (scrollHeight - scrollTop - clientHeight < 200 && hasNextPage && !isFetchingNextPage && allAccordionsExpanded) fetchNextPage(); 1723 } 1724 }, [ 1725 fetchNextPage, 1726 isFetchingNextPage, 1727 hasNextPage, 1728 allAccordionsExpanded 1729 ]); 1730 import_react.useEffect(function fetchMoreOnScroll() { 1731 const containerElement = tableContainerRef.current; 1732 if (!containerElement) return; 1733 fetchMoreOnBottomReached(containerElement); 1734 const handleScroll = () => { 1735 fetchMoreOnBottomReached(containerElement); 1736 }; 1737 containerElement.addEventListener("scroll", handleScroll); 1738 return () => { 1739 containerElement.removeEventListener("scroll", handleScroll); 1740 }; 1741 }, [fetchMoreOnBottomReached]); 1742 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 1743 className: "w-full flex-1 overflow-y-auto", 1744 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 1745 className: "flex h-full min-h-0 flex-col overflow-hidden", 1746 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableProvider, { 1747 table: useReactTable({ 1748 data: import_react.useMemo(() => { 1749 return nonEmptyGroups.reduce((result, item$1) => { 1750 if (isDateGroup(item$1)) { 1751 result.push(item$1); 1752 if (expandedDateGroups.includes(item$1.dateKey)) result.push(...item$1.cases); 1753 } else result.push(item$1); 1754 return result; 1755 }, []); 1756 }, [nonEmptyGroups, expandedDateGroups]), 1757 columns, 1758 getCoreRowModel: getCoreRowModel(), 1759 getRowId: (row) => isDateGroup(row) ? row.dateKey : row.case_id 1760 }), 1761 isLoading, 1762 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 1763 className: "min-h-0 grow-0", 1764 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Table, { 1765 containerClassName: "max-h-[500px]", 1766 containerRef: tableContainerRef, 1767 children: [
1768 /* @__PURE__ */ (0, import_jsx_runtime.jsx)("caption", { 1769 className: "sr-only", 1770 children: "Cases table showing procedure cases with date-based grouping" 1771 }), 1772 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableHeader, {}), 1773 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableBody, { renderRow: (row) => { 1774 const item$1 = row.original; 1775 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: isDateGroup(item$1) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableRowDateGroup, { 1776 item: item$1, 1777 expanded: expandedDateGroups.includes(item$1.dateKey), 1778 onToggle: toggleDateGroup(item$1.dateKey) 1779 }, row.id) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableRow, { children: row.getVisibleCells().map((cell) => { 1780 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCell, { 1781 className: "px-3", 1782 children: flexRender(cell.column.columnDef.cell, cell.getContext()) 1783 }, cell.id); 1784 }) }, row.id) }, row.id); 1785 } }) 1786 ] 1787 }) 1788 }) 1789 }) 1790 }) 1791 }); 1792}; 1793var TableRowDateGroup = ({ item, expanded, onToggle }) => { 1794 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableRow, { 1795 className: "bg-[#EEF2FF] hover:bg-[#ebeefc]", 1796 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableCell, {
1797 colSpan: 6, 1798 className: "h-auto p-0", 1799 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { 1800 className: "type-body-xs flex w-full cursor-pointer items-center justify-between gap-3 px-4 py-2 font-medium", 1801 onClick: onToggle, 1802 role: "button", 1803 "aria-expanded": expanded, 1804 "aria-label": `${expanded ? "Collapse" : "Expand"} ${item.displayDate} group containing ${item.cases.length} cases`, 1805 "aria-describedby": `${item.dateKey}-description`, 1806 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1807 className: "flex items-center gap-1 text-zinc-800", 1808 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Calendar, { className: "h-4 w-4" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [ 1809 "Item edited on this preference card ", 1810 item.displayDate, 1811 ". Recommendations not influenced prior to this date." 1812 ] })] 1813 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1814 className: "flex items-center gap-1 text-[#4F46E5]", 1815 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { 1816 id: `${item.dateKey}-description`, 1817 children: [expanded ? "Hide" : "Show", " prior cases"] 1818 }), expanded ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronDown, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRight, { size: 16 })] 1819 })] 1820 }) 1821 }) 1822 }); 1823}; 1824function groupCasesByDate(cases, baselineDate) { 1825 const baseline = new Date(baselineDate); 1826 const { beforeBaseline, afterBaseline, noDate } = cases.reduce((acc, caseItem) => { 1827 if (!caseItem.case_date) acc.noDate.push(caseItem); 1828 else if (new Date(caseItem.case_date) <= baseline) acc.beforeBaseline.push(caseItem); 1829 else acc.afterBaseline.push(caseItem); 1830 return acc; 1831 }, { 1832 beforeBaseline: [], 1833 afterBaseline: [], 1834 noDate: [] 1835 }); 1836 const sortByDate = (a, b) => { 1837 if (!a.case_date || !b.case_date) return 0; 1838 return new Date(b.case_date).getTime() - new Date(a.case_date).getTime(); 1839 }; 1840 const sortedAfterBaseline = afterBaseline.sort(sortByDate); 1841 const sortedBeforeBaseline = beforeBaseline.sort(sortByDate); 1842 const sortedNoDate = noDate.sort(sortByDate); 1843 const dateGroups = beforeBaseline.length > 0 ? [{ 1844 dateKey: "before-baseline", 1845 displayDate: formatDate(baselineDate, "2-digit", "2-digit", "2-digit"), 1846 cases: sortedBeforeBaseline, 1847 isCollapsed: true 1848 }] : []; 1849 return [ 1850 ...sortedAfterBaseline, 1851 ...sortedNoDate, 1852 ...dateGroups 1853 ]; 1854} 1855var isDateGroup = (row) => "dateKey" in row; 1856var columnHelper = createColumnHelper(); 1857var columns = [ 1858 columnHelper.accessor("case_date", { 1859 header: "Procedure Date", 1860 cell: ({ row }) => { 1861 const item = row.original; 1862 if (isDateGroup(item)) return null; 1863 return item.case_date ? formatDate(item.case_date, "2-digit", "2-digit", "2-digit") : "â"; 1864 } 1865 }), 1866 columnHelper.accessor("client_case_id", { 1867 header: "ID", 1868 cell: ({ row }) => { 1869 const item = row.original; 1870 if (isDateGroup(item)) return null; 1871 return item.client_case_id; 1872 } 1873 }), 1874 columnHelper.accessor("first_physician_name", { 1875 header: "Primary Physician", 1876 cell: ({ row }) => { 1877 var _item$first_physician; 1878 const item = row.original; 1879 if (isDateGroup(item)) return null; 1880 return (_item$first_physician = item.first_physician_name) !== null && _item$first_physician !== void 0 ? _item$first_physician : "â"; 1881 } 1882 }), 1883 columnHelper.accessor("location_name", { 1884 header: "Approved OR Location", 1885 cell: ({ row }) => { 1886 var _item$location_name; 1887 const item = row.original; 1888 if (isDateGroup(item)) return null; 1889 return (_item$location_name = item.location_name) !== null && _item$location_name !== void 0 ? _item$location_name : "â"; 1890 } 1891 }), 1892 columnHelper.accessor("total_items_used", { 1893 header: "Used", 1894 cell: ({ row }) => { 1895 var _item$total_items_use; 1896 const item = row.original; 1897 if (isDateGroup(item)) return null; 1898 return (_item$total_items_use = item.total_items_used) !== null && _item$total_items_use !== void 0 ? _item$total_items_use : "â"; 1899 } 1900 }), 1901 columnHelper.accessor("total_items_wasted", { 1902 header: "Wasted", 1903 cell: ({ row }) => { 1904 var _item$total_items_was; 1905 const item = row.original; 1906 if (isDateGroup(item)) return null; 1907 return (_item$total_items_was = item.total_items_wasted) !== null && _item$total_items_was !== void 0 ? _item$total_items_was : "â"; 1908 } 1909 }) 1910]; 1911function CasesDialog({ itemId, caseCount, differenceType, isPack = false, canFetchItemDetails }) { 1912 const { cardId } = useParams(); 1913 function handleClick() { 1914 track_default.pcm.viewCases(); 1915 } 1916 if (!cardId || !caseCount) return null; 1917 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Dialog, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTrigger, { 1918 asChild: true, 1919 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { 1920 onClick: handleClick, 1921 variant: "ghost", 1922 size: "sm", 1923 className: "type-body-xs h-full w-full border p-2 font-medium", 1924 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1925 className: "flex w-full items-center justify-between gap-2 self
1925-stretch", 1926 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1927 className: "text-left", 1928 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 1929 className: "type-body-xs font-medium leading-4 text-zinc-800", 1930 children: isPack ? "Pack Usage" : "Cases" 1931 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 1932 className: "type-body-2xs leading-4 text-gray-400", 1933 children: "Last 12 months" 1934 })] 1935 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1936 className: "flex items-center gap-2", 1937 children: [ 1938 caseCount.toLocaleString(), 1939 " Cases", 1940 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRight, {}) 1941 ] 1942 })] 1943 }) 1944 }) 1945 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContent, { 1946 className: "flex w-[1040px] max-w-[80%] bg-white", 1947 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1948 className: "flex h-full w-full flex-col gap-4", 1949 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(DialogHeader, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogTitle, { 1950 className: "type-body-2xl font-medium", 1951 children: `${caseCount.toLocaleString()} Cases Associated With This Recommendation` 1952 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogDescription, { 1953 className: "type-body font-normal leading-[19px] text-zinc-500", 1954 children: "Item recommendations are influenced by item usage in single-panel cases completed with this preference card by approved physicians at approved sites and approved OR locations within the last 12 months." 1955 })] }
1955), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CasesTable, { 1956 cardId, 1957 itemId, 1958 differenceType, 1959 canFetchItemDetails 1960 })] 1961 }) 1962 })] }); 1963} 1964function ItemSummary(props) { 1965 var _props$canFetchItemDe; 1966 const shouldFetchItemDetails = ((_props$canFetchItemDe = props.canFetchItemDetails) !== null && _props$canFetchItemDe !== void 0 ? _props$canFetchItemDe : true) && (props.isPack || props.differenceType !== "ADD" && props.differenceType !== void 0); 1967 const { data: item } = useQuery(prefCardItemDetailsQuery(props.cardId, props.itemId, shouldFetchItemDetails)); 1968 const { data: caseCount } = usePrefCardCases(props.cardId, { 1969 for_preference_card_client_item_master_ids: props.itemId, 1970 page_size: "0" 1971 }, { select: (data) => data.result_set_size }); 1972 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 1973 className: "flex flex-col gap-y-1", 1974 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SideBarSectionContainer, { children: [ 1975 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SidebarDetailContent, { 1976 label: "Manufacturer", 1977 classNames: "pr-1", 1978 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LongText_default, { 1979 text: props.mfgName || "â", 1980 className: "max-w-44" 1981 }) 1982 }), 1983 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SidebarDetailContent, { 1984 label: "Item ID", 1985 classNames: "pr-1", 1986 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LongText_default, { 1987 text: props.mfgCatalogId || "â", 1988 className: "max-w-48" 1989 }) 1990 }), 1991 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SidebarDetailContent, { 1992 label: "ERP Price", 1993 classNames: "pr-1", 1994 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LongText_default, { text: typeof (item === null || item === void 0 ? void 0 : item.purchase_uom_price) === "number" ? formatTableNumber(item.purchase_uom_price, { type: "currency" }) : "â" }) 1995 }), 1996 props.isPack ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SidebarDetailContent, { 1997 label: "Components", 1998 classNames: "pr-1", 1999 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LongText_default, { text: typeof props.packComponentCount === "number" ? String(props.packComponentCount) : "â" }) 2000 }) : null 2001 ] }), typeof caseCount === "number" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CasesDialog, { 2002 itemId: props.itemId, 2003 caseCount, 2004 differenceType: props.differenceType, 2005 isPack: props.isPack, 2006 canFetchItemDetails: props.canFetchItemDetails 2007 }) : null] 2008 }); 2009} 2010init_objectSpread2(); 2011var _excluded = ["previousValue"]; 2012function ModifyQuantity(props) { 2013 var _existingItemChange$c, _existingItemChange$c2; 2014 const declineReason = usePrefCardsBootstrapQuery((data) => data.procedure_card_preference_card_client_item_master_override_reasons.find((reason) => reason.display_name === "Quantity Modified")); 2015 const { data: items, isLoading } = usePrefCardProcedureConflictsQuery(props.cardId, (data) => data.filter((item$1) => item$1.pccim_id === props.itemId)); 2016 const add = useAddConflictChange(); 2017 const remove = useRemoveConflictChange(); 2018 const [item] = items !== null && items !== void 0 ? items : []; 2019 const { data: actionsData } = useQuery(prefCardsBootstrapQuery(selectActionNames)); 2020 const existingItemChange = useConflictChanges()[item === null || item === void 0 ? void 0 : item.pccim_id]; 2021 const [validationError, setValidationError] = import_react.useState(null); 2022 if (isLoading || declineReason.isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-[224px] w-full" }); 2023 if (!item || !declineReason.data) return null; 2024 function handleSubmit(event) { 2025 if (!declineReason.data || !actionsData) return; 2026 if (existingItemChange) return; 2027 event.preventDefault(); 2028 setValidationError(null); 2029 const formData = new FormData(event.currentTarget); 2030 const unit_open = Number(formData.get("open_qty")); 2031 const unit_hold = Number(formData.get("prn_qty")); 2032 if (unit_open === item.old_unit_open && unit_hold === item.old_unit_hold) { 2033 setValidationError("No changes detected. The quantities match the original values."); 2034 return; 2035 } 2036 const isOverride = unit_open !== item.new_unit_open || unit_hold !== item.new_unit_hold; 2037 const actionTypeId = getActionTypeId(unit_open, unit_hold, actionsData, { 2038 originalOpen: item.old_unit_open, 2039 originalHold: item.old_unit_hold, 2040 recommendedOpen: item.new_unit_open, 2041 recommendedHold: item.new_unit_hold, 2042 hasRecommendation: true 2043 }); 2044 add({ 2045 originalItem: item, 2046 changes: isOverride ? { 2047 action_type_id: actionTypeId, 2048 preference_card_client_item_master_id: props.itemId, 2049 unit_hold, 2050 unit_open, 2051 create_override: true, 2052 procedure_card_pccim_override_reason_id: declineReason.data.procedure_card_pccim_override_reason_id 2053 } : { 2054 action_type_id: actionTypeId, 2055 preference_card_client_item_master_id: props.itemId, 2056 unit_hold, 2057 unit_open, 2058 create_override: false 2059 } 2060 }); 2061 } 2062 function handleCancel() { 2063 remove(item.pccim_id); 2064 } 2065 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("form", { 2066 onSubmit: handleSubmit, 2067 className: "flex flex-col gap-3", 2068 children: [
2069 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 2070 className: "grid grid-rows-[auto_auto] overflow-hidden rounded-md bg-zinc-50 shadow-[inset_0_0_2px_0_rgba(0,0,0,0.06)]", 2071 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 2072 className: "grid grid-cols-2 bg-indigo-50 py-3 text-center", 2073 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { 2074 htmlFor: "open_qty", 2075 className: "type-body-xs select-none px-2", 2076 children: "Open Qty" 2077 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, { 2078 htmlFor: "prn_qty", 2079 className: "type-body-xs select-none px-2", 2080 children: "PRN Qty" 2081 })] 2082 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 2083 className: "grid grid-cols-2 py-2", 2084 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 2085 className: "px-3", 2086 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(QuantityInput, { 2087 disabled: Boolean(existingItemChange), 2088 name: "open_qty", 2089 id: "open_qty", 2090 previousValue: item.old_unit_open, 2091 defaultValue: (_existingItemChange$c = existingItemChange === null || existingItemChange === void 0 ? void 0 : existingItemChange.changes.unit_open) !== null && _existingItemChange$c !== void 0 ? _existingItemChange$c : item.new_unit_open 2092 }, existingItemChange === null || existingItemChange === void 0 ? void 0 : existingItemChange.originalItem.pccim_id) 2093 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 2094 className: "px-3", 2095 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(QuantityInput, { 2096 disabled: Boolean(existingItemChange), 2097 name: "prn_qty", 2098 id: "prn_qty", 2099 previousValue: item.old_unit_hold, 2100 defaultValue: (_existingItemChange$c2 = existingItemChange === null || existingItemChange === void 0 ? void 0 : existingItemChange.changes.unit_hold) !== null && _existingItemChange$c2 !== void 0 ? _existingItemChange$c2 : item.new_unit_hold 2101 }, existingItemChange === null || existingItemChange === void 0 ? void 0 : existingItemChange.originalItem.pccim_id) 2102 })] 2103 })] 2104 }), 2105 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 2106 className: "grid grid-cols-2 gap-3", 2107 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { 2108 type: "button", 2109 disabled: !existingItemChange, 2110 variant: "destructive-ghost", 2111 onClick: handleCancel, 2112 className: "select-none border border-destructive", 2113 children: "Cancel" 2114 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { 2115 type: "submit", 2116 disabled: Boolean(existingItemChange), 2117 className: "select-none", 2118 children: "Save Changes" 2119 })] 2120 }), 2121 validationError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 2122 className: "mt-2 rounded-md border border-amber-200 bg-amber-50 px-3 py-2", 2123 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { 2124 className: "text-sm text-amber-800", 2125 children: validationError 2126 }) 2127 }) 2128 ] 2129 }); 2130} 2131function QuantityInput(props) { 2132 var _props$defaultValue, _props$defaultValue2; 2133 const { previousValue: _ } = props, inputProps = _objectWithoutProperties(props, _excluded); 2134 const [value, setValue] = import_react.useState((_props$defaultValue = props.defaultValue) !== null && _props$defaultValue !== void 0 ? _props$defaultValue : 0); 2135 const inputRef = import_react.useRef(null); 2136 function handleAddition() { 2137 if (!inputRef.current) return; 2138 const current = Number(inputRef.current.value) || 0; 2139 const next = current >= 0 ? current + 1 : 0; 2140 setValue(next); 2141 inputRef.current.value = next.toString(); 2142 } 2143 function handleSubtraction() { 2144 if (!inputRef.current) return; 2145 const current = Number(inputRef.current.value) || 0; 2146 const next = current > 0 ? current - 1 : 0; 2147 setValue(next); 2148 inputRef.current.value = next.toString(); 2149 } 2150 function handleChange(event) { 2151 var _props$max, _props$min, _props$onChange; 2152 const next = Number(event.currentTarget.value) || 0; 2153 if (next > ((_props$max = props.max) !== null && _props$max !== void 0 ? _props$max : 0) || next < ((_props$min = props.min) !== null && _props$min !== void 0 ? _props$min : 0)) return; 2154 setValue(next); 2155 (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, event); 2156 } 2157 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { 2158 htmlFor: props.name, 2159 className: "flex h-[50px] items-center rounded-[5px] border bg-white p-2", 2160 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 2161 className: "flex w-full justify-center", 2162 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 2163 className: "grid grid-cols-[min-content_min-content] items-center", 2164 children: [typeof props.previousValue === "number" && props.previousValue !== value ? /* @__P
2164URE__ */ (0, import_jsx_runtime.jsxs)("span", { 2165 className: "flex select-none items-center gap-x-1 text-zinc-500", 2166 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: props.previousValue }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowRight, { className: "size-3.5" })] 2167 }) : null, /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, _objectSpread2(_objectSpread2({ 2168 ref: inputRef, 2169 type: "number", 2170 variant: "ghost" 2171 }, inputProps), {}, { 2172 onChange: handleChange, 2173 defaultValue: (_props$defaultValue2 = props.defaultValue) !== null && _props$defaultValue2 !== void 0 ? _props$defaultValue2 : 0, 2174 className: cn("m-0 h-5 min-w-[2ch] border-none p-0 text-center leading-5 [-moz-appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", props.className) 2175 }))] 2176 }) 2177 }), props.disabled ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 2178 className: "flex flex-col items-center justify-center rounded-sm text-indigo-700 shadow", 2179 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { 2180 type: "button", 2181 className: "select-none border-b hover:bg-zinc-100", 2182 onClick: handleAddition, 2183 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Add, { className: "h-4 w-4" }) 2184 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { 2185 type: "button", 2186 className: "select-none hover:bg-zinc-100", 2187 onClick: handleSubtraction, 2188 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Subtract, { className: "h-4 w-4" }) 2189 })] 2190 })] 2191 }); 2192} 2193init_objectSpread2(); 2194function SelectedItem({ itemId }) { 2195 const matches = useMatches(); 2196 const routeState = useItemSidebarRouteState(); 2197 const { setTab, tab } = routeState; 2198 const isItemsRoute = matches.some((match) => match.id === "co-card-items"); 2199 const isStandardizationRoute = matches.some((match) => match.id === "co-card-standardization"); 2200 const routeType = isItemsRoute ? "items" : isStandardizationRoute ? "standardization" : null; 2201 import_react.useEffect(() => { 2202 if (routeType === "standardization" && tab === "pack_contents") setTab("overview", true); 2203 }, [ 2204 routeType, 2205 setTab, 2206 tab 2207 ]); 2208 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SideBarContainer, { 2209 className: "h-full max-h-full min-h-0 overflow-y-hidden", 2210 children: [routeType === "items" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemsSidebar, { 2211 itemId, 2212 routeState 2213 }
2213) : null, routeType === "standardization" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StandardizationSidebar, { 2214 itemId, 2215 routeState 2216 }) : null] 2217 }); 2218} 2219function ItemsSidebar(props) { 2220 var _item$client_item_mas, _packComponents$lengt; 2221 const { cardId } = useParams(); 2222 const { closeItem, selectedItemId, setTab, tab } = props.routeState; 2223 const customPacksEnabled = useCustomPacksEnabled(); 2224 const { data: item, isSuccess } = useQuery(_objectSpread2(_objectSpread2({}, prefCardItemsQuery(cardId)), {}, { 2225 select(data) { 2226 return data.find((item$1) => item$1.preference_card_client_item_master_id === props.itemId); 2227 }, 2228 enabled: !!props.itemId 2229 })); 2230 const isPack = customPacksEnabled && (item === null || item === void 0 ? void 0 : item.is_pack) === true; 2231 const packClientItemMasterId = isPack && item.client_item_master_id ? item.client_item_master_id : null; 2232 const canShowPackContents = packClientItemMasterId !== null; 2233 const activeTab = canShowPackContents ? tab : "overview"; 2234 const { data: packComponents, isLoading: isPackContentsLoading } = useQuery(prefCardPackContentsQuery(packClientItemMasterId)); 2235 import_react.useEffect(() => { 2236 if (isSuccess && item && props.itemId === selectedItemId && !canShowPackContents && tab === "pack_contents") setTab("overview", true); 2237 }, [ 2238 canShowPackContents, 2239 isSuccess, 2240 item, 2241 props.itemId, 2242 selectedItemId, 2243 setTab, 2244 tab 2245 ]); 2246 function handleTabChange(tab$1) { 2247 if (tab$1 === "overview" || tab$1 === "pack_contents") setTab(tab$1); 2248 } 2249 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Tabs, { 2250 value: activeTab, 2251 onValueChange: handleTabChange, 2252 className: "flex min-h-0 flex-1 flex-col", 2253 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 2254 className: cn("sticky top-0 z-10 w-full shrink-0 overflow-hidden border-b border-zinc-200", isPack ? "bg-white" : "bg-background"), 2255 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 2256 className: "px-3 pb-3 pt-4",
2257 children: isSuccess && item ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemHeader, { 2258 clientItemMasterId: (_item$client_item_mas = item.client_item_master_id) !== null && _item$client_item_mas !== void 0 ? _item$client_item_mas : "", 2259 description: item.client_item_description, 2260 mfgId: item.client_erp_item_id, 2261 mfgCatalogId: item.client_mfg_catalog_id, 2262 isActive: item.is_active, 2263 inActiveChangeRequest: item.in_active_change_request, 2264 hasRecommendations: !item.in_active_change_request && !item.snooze_until && item.recommended_action_display_name !== null, 2265 snoozeUntil: item.snooze_until, 2266 uimLongDescription: item.uim_long_description, 2267 onClose: closeItem, 2268 compact: isPack 2269 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-[83px] w-full" }) 2270 }), canShowPackContents ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemSidebarTabs, {}) : null] 2271 }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(SideBarPaddingWrapper, { 2272 classNames: cn("min-h-0 flex-1", activeTab === "pack_contents" ? "flex flex-col py-0" : "overflow-y-auto"), 2273 children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, { 2274 value: "overview", 2275 className: "mt-0", 2276 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemsSidebarOverview, { 2277 item, 2278 itemId: props.itemId, 2279 cardId, 2280 isSuccess, 2281 isPack, 2282 packComponentCount: (_packComponents$lengt = packComponents === null || packComponents === void 0 ? void 0 : packComponents.length) !== null && _packComponents$lengt !== void 0 ? _packComponents$lengt : null 2283 }) 2284 }), canShowPackContents ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsContent, { 2285 value: "pack_contents", 2286 className: "mt-0 flex min-h-0 flex-1 flex-col", 2287 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PackContents, { 2288 components: packComponents, 2289 isLoading: isPackContentsLoading 2290 }) 2291 }) : null] 2292 })] 2293 }); 2294} 2295function ItemsSidebarOverview(props) { 2296 var _props$item, _props$item2, _props$item3; 2297 const canFetchItemDetails = props.item != null && canFetchPrefCardItemSummary(props.item); 2298 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 2299 className: "flex flex-col gap-y-3", 2300 children: [
2301 props.isSuccess && props.item ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SideBarAction, { 2302 item: props.item, 2303 variant: props.isPack ? "pack" : "default" 2304 }, props.item.client_erp_item_id) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-[224px] w-full" }) }), 2305 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemSummary, { 2306 itemId: props.itemId, 2307 cardId: props.cardId, 2308 itemName: ((_props$item = props.item) === null || _props$item === void 0 ? void 0 : _props$item.client_item_description) || "", 2309 mfgName: ((_props$item2 = props.item) === null || _props$item2 === void 0 ? void 0 : _props$item2.client_mfg_name) || null, 2310 mfgCatalogId: ((_props$item3 = props.item) === null || _props$item3 === void 0 ? void 0 : _props$item3.client_mfg_catalog_id) || null, 2311 isPack: props.isPack || void 0, 2312 packComponentCount: props.isPack ? props.packComponentCount : void 0, 2313 canFetchItemDetails 2314 }), 2315 canFetchItemDetails ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemCharts, { 2316 cardId: props.cardId, 2317 itemId: props.itemId 2318 }) : null 2319 ] 2320 }); 2321} 2322function StandardizationSidebar(props) { 2323 var _item$cim_id, _item$manufacturer_na, _item$manufacturer_ca; 2324 const { cardId } = useParams(); 2325 const { data, isSuccess } = usePrefCardProcedureConflictsQuery(cardId, (data$1) => data$1.filter((item$1) => item$1.pccim_id === props.itemId)); 2326 const item = data === null || data === void 0 ? void 0 : data[0]; 2327 const shouldRenderCharts = item ? item.difference_type !== "ADD" : false; 2328 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 2329 className: "sticky top-0 w-full shrink-0 border-b border-zinc-200 px-3 pb-3 pt-4",
2330 children: isSuccess && item ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemHeader, { 2331 clientItemMasterId: (_item$cim_id = item.cim_id) !== null && _item$cim_id !== void 0 ? _item$cim_id : "", 2332 description: item.description, 2333 mfgId: item.erp_item_id, 2334 mfgCatalogId: item.manufacturer_catalog_id, 2335 isActive: false, 2336 inActiveChangeRequest: Boolean(item.preference_card_change_request_id), 2337 hasRecommendations: false, 2338 snoozeUntil: null, 2339 uimLongDescription: item.uim_long_description, 2340 onClose: props.routeState.closeItem 2341 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Skeleton, { className: "h-[83px] w-full" }) 2342 }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SideBarPaddingWrapper, { 2343 classNames: "min-h-0 flex-1 overflow-y-auto", 2344 children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { 2345 className: "flex flex-col gap-3", 2346 children: [ 2347 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ModifyQuantity, { 2348 cardId, 2349 itemId: props.itemId 2350 }), 2351 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemSummary, { 2352 itemId: props.itemId, 2353 cardId, 2354 itemName: (item === null || item === void 0 ? void 0 : item.description) || "", 2355 mfgName: (_item$manufacturer_na = item === null || item === void 0 ? void 0 : item.manufacturer_name) !== null && _item$manufacturer_na !== void 0 ? _item$manufacturer_na : null, 2356 mfgCatalogId: (_item$manufacturer_ca = item === null || item === void 0 ? void 0 : item.manufacturer_catalog_id) !== null && _item$manufacturer_ca !== void 0 ? _item$manufacturer_ca : null, 2357 differenceType: item === null || item === void 0 ? void 0 : item.difference_type 2358 }), 2359 shouldRenderCharts ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemCharts, { 2360 cardId, 2361 itemId: props.itemId 2362 }) : null 2363 ] 2364 }) 2365 })] }); 2366} 2367function CardDetailSidebar() { 2368 const { selectedItemId: itemId } = useItemSidebarRouteState(); 2369 const [isOpen, setIsOpen] = import_react.useState(Boolean(itemId)); 2370 const [persistedItemId, setPersistedItemId] = import_react.useState(itemId); 2371 import_react.useEffect(() => { 2372 if (itemId) { 2373 setPersistedItemId(itemId); 2374 const timeout = setTimeout(() => { 2375 setIsOpen(true); 2376 }, 100); 2377 return () => { 2378 if (timeout) clearTimeout(timeout); 2379 }; 2380 } else { 2381 setIsOpen(false); 2382 const timeout = setTimeout(() => { 2383 setPersistedItemId(null); 2384 }, 300); 2385 return () => { 2386 if (timeout) clearTimeout(timeout); 2387 }; 2388 } 2389 }, [itemId]); 2390 return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardSideBar, {}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 2391 className: cn(`w-340px absolute z-200 h-full translate-x-[340px] transition-all ease-in-out`, isOpen ? "translate-x-0" : ""), 2392 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { 2393 className: "h-full overflow-y-auto", 2394 children: persistedItemId ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectedItem, { itemId: persistedItemId }) : null 2395 }) 2396 })] }); 2397} 2398init_objectSpread2(); 2399async function loader({ params }) { 2400 var _queryClient$getQuery; 2401 const { cardId } = params; 2402 invariant(typeof cardId === "string", "cardId is required"); 2403 const detailsQuery = prefCardDetailsQuery(cardId); 2404 const detailsQueryState = queryClient.getQueryState(detailsQuery.queryKey); 2405 const details = (detailsQueryState === null || detailsQueryState === void 0 ? void 0 : detailsQueryState.isInvalidated) ? await queryClient.fetchQuery(detailsQuery) : (_queryClient$getQuery = queryClient.getQueryData(detailsQuery.queryKey)) !== null && _queryClient$getQuery !== void 0 ? _queryClient$getQuery : await queryClient.fetchQuery(detailsQuery); 2406 return _objectSpread2({ details }, createBreadcrumbConfig({ 2407 label: details.client_card_id || "Card", 2408 module: MODULE_NAMES.PHYSICIAN_PREFERENCE_CARDS 2409 })); 2410} 2411function Component() { 2412 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PagePrefCardActionContext, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DetailSideBarPageLayout, { 2413 contentContainerClassName: "bg-background", 2414 content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Outlet, {}), 2415 managerComponent: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardDetailSidebar, {}) 2416 }) }); 2417}
2418Component.displayName = "PreferenceCardDetails"; 2419const ErrorBoundary = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LogErrorBoundary, { routeComponent: "PreferenceCardDetails" }); 2420export { Component, ErrorBoundary, loader }; 2421 2422//# sourceMappingURL=preference-cards._cardId-DP-bEbUJ.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.