improvement: Some improvements done. some bugs fixed.

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

@@ -5,8 +5,9 @@ import { ConnectedSelectionBadge } from '@/components/ui/treatment/ConnectedSele
 import {
   formatToothList,
   prosthesisGroupLabelFromCatalog,
-  prosthesisTypeColorFromCatalog,
+  prosthesisTypeLabelStyleFromCatalog,
 } from '@/components/treatment/prosthesisTypeDisplay';
+import { ProsthesisStackedTypeLabel } from '@/components/ui/lab/ProsthesisStackedTypeLabel';
 import type { ProsthesisCatalogEntry } from '@/types/treatment-catalog';
 
 export type LabCaseProsthesisGroup = {
@@ -23,7 +24,7 @@ interface LabCaseProsthesisGroupsListProps {
 }
 
 function prosthesisLabel(code: string, catalog: readonly ProsthesisCatalogEntry[]): string {
-  return prosthesisGroupLabelFromCatalog(code, catalog);
+  return catalog.find((entry) => entry.code === code)?.label ?? prosthesisGroupLabelFromCatalog(code, catalog);
 }
 
 export function LabCaseProsthesisGroupsList({
@@ -43,13 +44,12 @@ export function LabCaseProsthesisGroupsList({
           <li
             key={`${group.selectionGroupId ?? ''}-${group.prosthesisTypeCode}-${group.teeth.join(',')}`}
             className="text-[11px] leading-snug"
-            style={{
-              color: prosthesisTypeColorFromCatalog(group.prosthesisTypeCode, prosthesisCatalog),
-            }}
           >
-            <span className="font-medium">
-              {prosthesisLabel(group.prosthesisTypeCode, prosthesisCatalog)}
-            </span>
+            <ProsthesisStackedTypeLabel
+              className="font-medium"
+              code={group.prosthesisTypeCode}
+              catalog={prosthesisCatalog}
+            />
             {group.teeth.length > 0 ? (
               <span className="text-text-muted">
                 {' · '}
@@ -73,7 +73,7 @@ export function LabCaseProsthesisGroupsList({
 }
 
 export type LabCaseToothJobRow = {
-  tooth: string;
+  teeth: string[];
   codes: string[];
   connected?: boolean;
 };
@@ -98,11 +98,11 @@ export function LabCaseToothJobsList({
     <ul className="space-y-1">
       {rows.map((row) => (
         <li
-          key={row.tooth}
+          key={`${row.teeth.join(',')}-${row.codes.join('+')}`}
           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)}
+            {formatToothList(row.teeth, archLabels)}
           </span>
           {row.codes.map((code) => (
             <span key={code} className="inline-flex items-baseline gap-x-1.5">
@@ -111,7 +111,7 @@ export function LabCaseToothJobsList({
               </span>
               <span
                 className="font-medium"
-                style={{ color: prosthesisTypeColorFromCatalog(code, prosthesisCatalog) }}
+                style={prosthesisTypeLabelStyleFromCatalog(code, prosthesisCatalog)}
               >
                 {prosthesisLabel(code, prosthesisCatalog)}
               </span>