improvement: new prosthesis type data structure implemented and finally working!

frontend/src/components/ui/lab/LabCaseProsthesisGroupsList.tsx

@@ -1,8 +1,10 @@
 'use client';
 
+import { useTranslations } from 'next-intl';
 import { ConnectedSelectionBadge } from '@/components/ui/treatment/ConnectedSelectionBadge';
 import {
   formatToothList,
+  prosthesisGroupLabelFromCatalog,
   prosthesisTypeColorFromCatalog,
 } from '@/components/treatment/prosthesisTypeDisplay';
 import type { ProsthesisCatalogEntry } from '@/types/treatment-catalog';
@@ -21,7 +23,7 @@ interface LabCaseProsthesisGroupsListProps {
 }
 
 function prosthesisLabel(code: string, catalog: readonly ProsthesisCatalogEntry[]): string {
-  return catalog.find((entry) => entry.code === code)?.label ?? code;
+  return prosthesisGroupLabelFromCatalog(code, catalog);
 }
 
 export function LabCaseProsthesisGroupsList({
@@ -29,6 +31,11 @@ export function LabCaseProsthesisGroupsList({
   prosthesisCatalog,
   fallbackTeeth = [],
 }: LabCaseProsthesisGroupsListProps) {
+  const tTreatment = useTranslations('treatment');
+  const archLabels = {
+    UA: tTreatment('selectedArchUpper'),
+    LA: tTreatment('selectedArchLower'),
+  };
   if (groups.length > 0) {
     return (
       <ul className="space-y-0.5">
@@ -46,7 +53,7 @@ export function LabCaseProsthesisGroupsList({
             {group.teeth.length > 0 ? (
               <span className="text-text-muted">
                 {' · '}
-                {formatToothList(group.teeth)}
+                {formatToothList(group.teeth, archLabels)}
               </span>
             ) : null}
             {group.connected ? (
@@ -59,8 +66,62 @@ export function LabCaseProsthesisGroupsList({
   }
 
   if (fallbackTeeth.length > 0) {
-    return <p className="text-[11px] text-text-muted">{formatToothList(fallbackTeeth)}</p>;
+    return <p className="text-[11px] text-text-muted">{formatToothList(fallbackTeeth, archLabels)}</p>;
   }
 
   return null;
 }
+
+export type LabCaseToothJobRow = {
+  tooth: string;
+  codes: string[];
+  connected?: boolean;
+};
+
+interface LabCaseToothJobsListProps {
+  rows: LabCaseToothJobRow[];
+  prosthesisCatalog: readonly ProsthesisCatalogEntry[];
+}
+
+export function LabCaseToothJobsList({
+  rows,
+  prosthesisCatalog,
+}: LabCaseToothJobsListProps) {
+  const tTreatment = useTranslations('treatment');
+  const archLabels = {
+    UA: tTreatment('selectedArchUpper'),
+    LA: tTreatment('selectedArchLower'),
+  };
+  if (rows.length === 0) return null;
+
+  return (
+    <ul className="space-y-1">
+      {rows.map((row) => (
+        <li
+          key={row.tooth}
+          className="flex flex-wrap items-baseline gap-x-1.5 gap-y-0.5 text-[11px] leading-snug"
+        >
+          <span className="font-semibold text-text-primary">
+            {formatToothList([row.tooth], archLabels)}
+          </span>
+          {row.codes.map((code) => (
+            <span key={code} className="inline-flex items-baseline gap-x-1.5">
+              <span className="text-text-muted" aria-hidden>
+                ·
+              </span>
+              <span
+                className="font-medium"
+                style={{ color: prosthesisTypeColorFromCatalog(code, prosthesisCatalog) }}
+              >
+                {prosthesisLabel(code, prosthesisCatalog)}
+              </span>
+            </span>
+          ))}
+          {row.connected ? (
+            <ConnectedSelectionBadge className="align-middle text-[9px] px-1 py-px" />
+          ) : null}
+        </li>
+      ))}
+    </ul>
+  );
+}