improvement: tasks feature UX fully overhauled.

frontend/src/components/ui/today/TodayDashboard.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { useAuth } from '@/lib/hooks/useAuth';
 import {
@@ -43,8 +43,10 @@ import {
   type TodayDashboardCell,
 } from '@/components/today/today-dashboard-layout';
 import { getEligibleTodayKpis, getVisibleTodayKpis } from '@/components/today/widget-registry';
-import { prosthesisTypeColor } from '@/components/treatment/prosthesisTypeDisplay';
+import { prosthesisTypeColorFromCatalog } from '@/components/treatment/prosthesisTypeDisplay';
+import { prosthesisCatalogApi } from '@/lib/api/prosthesis-catalog';
 import { treatmentTypeColor } from '@/components/shared/treatmentTypeDisplay';
+import type { ProsthesisCatalogEntry } from '@/types/treatment-catalog';
 import type {
   TodayCompletionGauge,
   TodaySubscriptionSnapshot,
@@ -77,6 +79,15 @@ export function TodayDashboard({
   const { currentOrganization } = useAuth();
   const orgType = currentOrganization?.type;
   const isOwner = Boolean(currentOrganization?.isOwner);
+  const [prosthesisCatalog, setProsthesisCatalog] = useState<ProsthesisCatalogEntry[]>([]);
+
+  useEffect(() => {
+    if (orgType !== 'LAB') return;
+    void prosthesisCatalogApi
+      .list()
+      .then((response) => setProsthesisCatalog(response.data))
+      .catch(() => {});
+  }, [orgType]);
 
   const showUpcoming =
     orgType === 'CLINIC' &&
@@ -159,6 +170,7 @@ export function TodayDashboard({
       orgType,
       isOwner,
       currentOrganization,
+      prosthesisCatalog,
     });
   }, [
     isInitialLoad,
@@ -177,6 +189,7 @@ export function TodayDashboard({
     actions,
     subscription,
     currentOrganization,
+    prosthesisCatalog,
   ]);
 
   if (hasError && !loading && cells.length === 0) {
@@ -297,6 +310,7 @@ function buildDashboardCells(options: {
   orgType?: 'CLINIC' | 'LAB';
   isOwner: boolean;
   currentOrganization: ReturnType<typeof useAuth>['currentOrganization'];
+  prosthesisCatalog: ProsthesisCatalogEntry[];
 }): TodayDashboardCell[] {
   const cells: TodayDashboardCell[] = [];
 
@@ -318,6 +332,7 @@ function buildDashboardCells(options: {
             (options.orgType === 'LAB' &&
               canEditCases(options.currentOrganization))),
         dayLabelFormatter: options.dayLabelFormatter,
+        prosthesisCatalog: options.prosthesisCatalog,
       }),
     );
   }
@@ -405,6 +420,7 @@ function buildChartCells(options: {
   showMyAppointmentsWeekChart: boolean;
   showCasePartnersChart: boolean;
   dayLabelFormatter: ReturnType<typeof useTodayDayLabelFormatter>;
+  prosthesisCatalog: ProsthesisCatalogEntry[];
 }): TodayDashboardCell[] {
   const { t, charts, orgType, isOwner, showMyAppointmentsWeekChart } = options;
   const cells: TodayDashboardCell[] = [];
@@ -580,7 +596,7 @@ function buildChartCells(options: {
         >
           <TodayBarChart
             data={tasksByProsthesisData}
-            colorForCode={(code, index) => prosthesisTypeColor(code, index)}
+            colorForCode={(code) => prosthesisTypeColorFromCatalog(code, options.prosthesisCatalog)}
           />
         </ChartCard>
       ),