@@ -272,32 +279,44 @@ export function LabCasesDispatchPanel({
{activeLabCase ? (
{sent ? (
- <>
- {activeLabOrgName ? (
- 
+
+ );
+}
diff --git a/frontend/src/components/ui/treatment/ProsthesisJobPopover.tsx b/frontend/src/components/ui/treatment/ProsthesisJobPopover.tsx
index 2641abf..0e49275 100644
--- a/frontend/src/components/ui/treatment/ProsthesisJobPopover.tsx
+++ b/frontend/src/components/ui/treatment/ProsthesisJobPopover.tsx
@@ -1,6 +1,6 @@
'use client';
-import type { ReactNode } from 'react';
+import { useLayoutEffect, useRef, useState, type ReactNode } from 'react';
import { useTranslations } from 'next-intl';
import { ArrowLeft, Plus, Trash2 } from 'lucide-react';
import { Button } from '@/components/ui/shared/Button';
@@ -11,6 +11,11 @@ import {
import type { ProsthesisCatalogEntry } from '@/types/treatment-catalog';
import { prosthesisFamilyTone } from '@/components/shared/catalog-type-colors';
import { prosthesisTypeColorFromCatalog, prosthesisTypeFillAccent } from '@/components/treatment/prosthesisTypeDisplay';
+import { prosthesisCatalogIconSrc } from '@/components/treatment/prosthesisCatalogIcons';
+import {
+ PROSTHESIS_JOB_PATH_SEP,
+ prosthesisJobPathParts,
+} from '@/components/treatment/prosthesisJobPath';
import {
catalogByCode,
categoryCodesInCatalog,
@@ -23,14 +28,24 @@ import {
type ArchTarget,
type PickerScope,
} from '@/components/treatment/prosthesisTree';
+import { ProsthesisCatalogIcon } from '@/components/ui/treatment/ProsthesisCatalogIcon';
const CHIP_INK = '#14253d';
+const PARENT_BACK_INK = '#000000';
const TILE_CLASS =
- 'flex min-h-[3.25rem] w-full flex-col items-center justify-center gap-0.5 rounded-[var(--radius-md)] border px-2.5 py-2 text-center transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:cursor-not-allowed disabled:opacity-45';
+ 'flex min-h-[4.5rem] min-w-0 w-full flex-col items-center justify-center rounded-[var(--radius-md)] border px-2.5 py-2 text-center transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:cursor-not-allowed disabled:opacity-45';
+const CHILD_TILE_CLASS =
+ 'flex min-h-[3.75rem] min-w-0 w-full flex-col items-center justify-center rounded-[var(--radius-md)] border px-2 py-1 text-center transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:cursor-not-allowed disabled:opacity-45';
+const PARENT_BAR_CLASS =
+ 'flex min-h-[3.75rem] min-w-0 w-full flex-row items-center justify-start gap-2 rounded-[var(--radius-md)] border px-3 py-1.5 text-start transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:cursor-not-allowed disabled:opacity-45';
const TILE_TEXT_CLASS =
- 'w-full whitespace-normal break-words text-center text-xs font-medium leading-snug sm:text-[13px]';
+ 'w-full whitespace-normal break-words text-center text-xs font-medium leading-tight sm:text-[13px]';
+const TILE_TEXT_CHILD_CLASS =
+ 'w-full min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-center text-[11px] font-medium leading-tight sm:text-xs';
const TILE_GRID_CLASS =
'grid gap-2 [grid-template-columns:repeat(auto-fill,minmax(8rem,1fr))]';
+const TILE_GRID_CHILD_CLASS =
+ 'grid gap-2 [grid-template-columns:repeat(auto-fill,minmax(10.2rem,1fr))]';
const HEADER_BTN_CLASS = 'h-auto min-h-8 w-full px-2 py-1 text-xs leading-tight whitespace-normal';
function tileSurfaceClass(active?: boolean) {
@@ -70,7 +85,9 @@ function Tile({
active,
disabled,
hint,
- className = TILE_CLASS,
+ iconSrc,
+ compact,
+ className,
onClick,
}: {
label: string;
@@ -78,19 +95,23 @@ function Tile({
active?: boolean;
disabled?: boolean;
hint?: string;
+ iconSrc?: string;
+ compact?: boolean;
className?: string;
onClick: () => void;
}) {
+ const base = className ?? (compact ? CHILD_TILE_CLASS : TILE_CLASS);
return (
);
}
@@ -109,6 +130,19 @@ function parentStep(step: PickerStep): PickerStep | null {
}
}
+function pickerStepKey(step: PickerStep): string {
+ switch (step.kind) {
+ case 'category':
+ return 'category';
+ case 'addon':
+ return `addon:${step.slot}`;
+ case 'subcategory':
+ return `sub:${step.category}:${step.arch ?? ''}`;
+ case 'leaves':
+ return `leaves:${step.category}:${step.subcategory ?? ''}:${step.arch ?? ''}`;
+ }
+}
+
export function ProsthesisJobPopover({
open,
mobile,
@@ -128,6 +162,31 @@ export function ProsthesisJobPopover({
onClose,
}: ProsthesisJobPopoverProps) {
const t = useTranslations('prosthesis');
+ const childGridRef = useRef(null);
+ const [branchH, setBranchH] = useState(0);
+ const stepKey = pickerStepKey(step);
+
+ useLayoutEffect(() => {
+ if (!open || stepKey === 'category') return;
+ const grid = childGridRef.current;
+ if (!grid) return;
+
+ const sync = () => {
+ const first = grid.firstElementChild;
+ if (!(first instanceof HTMLElement)) return;
+ setBranchH(first.offsetHeight);
+ };
+
+ sync();
+ const ro = new ResizeObserver(sync);
+ ro.observe(grid);
+ grid.addEventListener('animationend', sync);
+ return () => {
+ ro.disconnect();
+ grid.removeEventListener('animationend', sync);
+ };
+ }, [open, stepKey]);
+
if (!open) return null;
const categories = categoryCodesInCatalog(catalog, scope);
@@ -159,10 +218,15 @@ export function ProsthesisJobPopover({
}
function leafTile(leaf: ProsthesisCatalogEntry) {
+ const path = prosthesisJobPathParts(leaf.code, catalog, (key) => t(key as never));
+ const underIndirectSub =
+ leaf.category === 'indirect' && step.kind === 'leaves' && Boolean(step.subcategory);
return (
onPickLeaf(leaf.code, archForLeaves)}
@@ -180,7 +244,11 @@ export function ProsthesisJobPopover({
onPickAddon(null, 'crown')}
@@ -240,7 +314,9 @@ export function ProsthesisJobPopover({
...crownLeaves.map((opt) => (
onPickAddon(opt.code, 'crown')}
@@ -250,13 +326,19 @@ export function ProsthesisJobPopover({
break;
case 'subcategory': {
const parentFill = categoryTileColor(step.category);
- selectedNode = { label: categoryLabel(step.category), color: parentFill };
+ selectedNode = {
+ label: categoryLabel(step.category),
+ color: parentFill,
+ iconSrc: prosthesisCatalogIconSrc({ category: step.category }),
+ };
childrenKey = `sub-${step.category}`;
childTiles = [
...subcategoriesFor(catalog, step.category, scope).map((sub, i) => (
onStep({
@@ -277,6 +359,10 @@ export function ProsthesisJobPopover({
selectedNode = {
label: subLabel(step.subcategory),
color: prosthesisFamilyTone(categoryTileColor(step.category), 1),
+ iconSrc: prosthesisCatalogIconSrc({
+ category: step.category,
+ subcategory: step.subcategory,
+ }),
};
childrenKey = `leaves-${step.category}-${step.subcategory}`;
childTiles = leavesFor(catalog, step.category, step.subcategory, scope).map(leafTile);
@@ -284,6 +370,7 @@ export function ProsthesisJobPopover({
selectedNode = {
label: categoryLabel(step.category),
color: categoryTileColor(step.category),
+ iconSrc: prosthesisCatalogIconSrc({ category: step.category }),
};
childrenKey = `leaves-${step.category}`;
childTiles = leavesFor(catalog, step.category, undefined, scope).map(leafTile);
@@ -294,9 +381,10 @@ export function ProsthesisJobPopover({
const tileGrid = (
- setShareQrOpen(false)}
+ shareUrl={shareUrl}
+ />
+ ) : null}
);
}
diff --git a/frontend/src/components/ui/treatment/ProsthesisCatalogIcon.tsx b/frontend/src/components/ui/treatment/ProsthesisCatalogIcon.tsx
new file mode 100644
index 0000000..35c8a12
--- /dev/null
+++ b/frontend/src/components/ui/treatment/ProsthesisCatalogIcon.tsx
@@ -0,0 +1,19 @@
+export function ProsthesisCatalogIcon({
+ src,
+ size = 'md',
+}: {
+ src: string;
+ size?: 'sm' | 'md';
+}) {
+ const box = size === 'sm' ? 'h-8 w-8 sm:h-9 sm:w-9' : 'h-9 w-9 sm:h-10 sm:w-10';
+ return (
+
+ {t('selectLab')}
-{activeLabOrgName}
+
+
) : (
<>
+
{hasTrackerSummary && labCaseSummary ? (
+ {activeLabOrgName ? (
+
- ) : null}
-
-
+
+ ) : null}
+
+ {t('selectLab')}
+{activeLabOrgName}
+
+ setShareQrOpen(true)}
+ />
+
+ ) : null}
+
@@ -430,6 +449,13 @@ export function LabCasesDispatchPanel({
)}
) : null}
+ {shareUrl ? (
+
{childTiles}
@@ -311,7 +399,7 @@ export function ProsthesisJobPopover({
if (back) onStep(back);
}}
disabled={!back}
- className={`${TILE_CLASS} flex-row justify-start gap-2 px-3 text-start`}
+ className={PARENT_BAR_CLASS}
style={
selectedNode.color
? { backgroundColor: selectedNode.color, color: CHIP_INK }
@@ -320,18 +408,19 @@ export function ProsthesisJobPopover({
aria-label={t('pickerBack')}
>
-
+
{jobCodes.map((code) => {
- const entry = byCode.get(code);
+ const path = prosthesisJobPathParts(code, catalog, (key) => t(key as never));
const color = prosthesisTypeColorFromCatalog(code, catalog);
const trashColor = prosthesisTypeFillAccent(color);
return (
@@ -388,13 +477,14 @@ export function ProsthesisJobPopover({
borderColor: 'rgba(0,0,0,0.16)',
}}
>
-
-
- {entry?.category
- ? t(`category_${entry.category}` as never)
- : t('regionCrown')}
-
- {entry?.label ?? code}
+
+ {path.ancestors.length > 0 ? (
+
+ {path.ancestors.join(PROSTHESIS_JOB_PATH_SEP)}
+ {PROSTHESIS_JOB_PATH_SEP}
+
+ ) : null}
+ {path.leaf}