improvement: tasks feature UX fully overhauled.

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useMemo, useState, type ReactNode } from 'react';
+import { useEffect, useMemo, useState, type ReactNode } from 'react';
 import { useTranslations } from 'next-intl';
 import { MessageSquare } from 'lucide-react';
 import { Badge } from '@/components/ui/shared/Badge';
@@ -12,8 +12,9 @@ import { LabCaseAttachmentsDialog } from '@/components/ui/lab/LabCaseAttachments
 import { labTaskStatusVariant } from '@/components/lab/labTaskStatusDisplay';
 import {
   formatToothList,
-  prosthesisTypeBadgeStyle,
+  prosthesisTypeBadgeStyleFromCatalog,
 } from '@/components/treatment/prosthesisTypeDisplay';
+import { prosthesisCatalogApi } from '@/lib/api/prosthesis-catalog';
 import {
   buildCaseProsthesisRows,
   formatCaseDateTime,
@@ -21,6 +22,7 @@ import {
   latestCaseAttachment,
 } from '@/components/lab/caseDetailUtils';
 import type { LabCaseDetail, LabTaskStatus } from '@/types/cases';
+import type { ProsthesisCatalogEntry } from '@/types/treatment-catalog';
 
 function CaseTaskProgressBar({ completed, total }: { completed: number; total: number }) {
   const pct = total > 0 ? Math.round((completed / total) * 100) : 0;
@@ -77,6 +79,14 @@ export function CaseDetailPanel({
 }: CaseDetailPanelProps) {
   const t = useTranslations('cases');
   const [attachmentsDialogOpen, setAttachmentsDialogOpen] = useState(false);
+  const [prosthesisCatalog, setProsthesisCatalog] = useState<ProsthesisCatalogEntry[]>([]);
+
+  useEffect(() => {
+    void prosthesisCatalogApi
+      .list()
+      .then((response) => setProsthesisCatalog(response.data))
+      .catch(() => {});
+  }, []);
 
   const prosthesisRows = useMemo(() => buildCaseProsthesisRows(labCase), [labCase]);
   const previewAttachment = useMemo(() => latestCaseAttachment(labCase), [labCase]);
@@ -154,6 +164,7 @@ export function CaseDetailPanel({
       <CaseToothChartPanel
         details={labCase.detail ? [{ teeth: labCase.detail.teeth }] : []}
         prosthesisRows={prosthesisRows}
+        prosthesisCatalog={prosthesisCatalog}
         className="w-full"
       />
 
@@ -177,7 +188,7 @@ export function CaseDetailPanel({
         {labCase.tasksByTooth.length === 0 ? (
           <p className="text-sm text-text-muted">{t('noTasks')}</p>
         ) : (
-          labCase.tasksByTooth.map((group, groupIndex) => (
+          labCase.tasksByTooth.map((group) => (
             <div
               key={`${group.treatmentDetailId}-${group.prosthesisTypeCode}`}
               className="rounded-md border border-border p-3 space-y-2"
@@ -186,7 +197,10 @@ export function CaseDetailPanel({
                 <Badge
                   truncate
                   title={group.prosthesisTypeLabel}
-                  style={prosthesisTypeBadgeStyle(group.prosthesisTypeCode, groupIndex)}
+                  style={prosthesisTypeBadgeStyleFromCatalog(
+                    group.prosthesisTypeCode,
+                    prosthesisCatalog,
+                  )}
                 >
                   {group.prosthesisTypeLabel}
                 </Badge>