improvement: some new gadgets added to dashboard. some new functionality added to existed gadgets.

frontend/src/components/ui/treatment/TreatmentLabCasesPanel.tsx

@@ -2,12 +2,9 @@
 
 import { useTranslations } from 'next-intl';
 import { CaseTaskProgressBar } from '@/components/ui/lab/CaseDetailPanel';
+import { LabCaseProsthesisGroupsList } from '@/components/ui/lab/LabCaseProsthesisGroupsList';
 import { LabCaseDueDateBadge } from '@/components/lab/LabCaseDueDateBadge';
 import { formatCaseDateTime } from '@/components/lab/caseDetailUtils';
-import {
-  formatToothList,
-  prosthesisTypeColorFromCatalog,
-} from '@/components/treatment/prosthesisTypeDisplay';
 import type { ProsthesisCatalogEntry } from '@/types/treatment-catalog';
 import type { PatientLabCaseSummary } from '@/types/lab-case-activity';
 
@@ -28,10 +25,6 @@ interface TreatmentLabCasesPanelProps {
   compact?: boolean;
 }
 
-function prosthesisLabel(code: string, catalog: ProsthesisCatalogEntry[]): string {
-  return catalog.find((entry) => entry.code === code)?.label ?? code;
-}
-
 export function TreatmentLabCasesPanel({
   scope,
   onScopeChange,
@@ -138,33 +131,12 @@ export function TreatmentLabCasesPanel({
                         />
                       </div>
 
-                      {item.prosthesisGroups.length > 0 ? (
-                        <ul className="space-y-0.5">
-                          {item.prosthesisGroups.map((group) => (
-                            <li
-                              key={group.prosthesisTypeCode}
-                              className="text-[11px] leading-snug"
-                              style={{
-                                color: prosthesisTypeColorFromCatalog(
-                                  group.prosthesisTypeCode,
-                                  prosthesisCatalog,
-                                ),
-                              }}
-                            >
-                              <span className="font-medium">
-                                {prosthesisLabel(group.prosthesisTypeCode, prosthesisCatalog)}
-                              </span>
-                              {group.teeth.length > 0 ? (
-                                <span className="text-text-muted">
-                                  {' · '}
-                                  {formatToothList(group.teeth)}
-                                </span>
-                              ) : null}
-                            </li>
-                          ))}
-                        </ul>
-                      ) : item.teeth.length > 0 ? (
-                        <p className="text-[11px] text-text-muted">{formatToothList(item.teeth)}</p>
+                      {item.prosthesisGroups.length > 0 || item.teeth.length > 0 ? (
+                        <LabCaseProsthesisGroupsList
+                          groups={item.prosthesisGroups}
+                          prosthesisCatalog={prosthesisCatalog}
+                          fallbackTeeth={item.teeth}
+                        />
                       ) : null}
 
                       <p className="text-[10px] text-text-muted">