improvement: all clinic side ui components related to treatment types updated based on the new real world data.

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

@@ -2,11 +2,13 @@
 
 import { useTranslations } from 'next-intl';
 import { CalendarDays } from 'lucide-react';
-import { purposeStyle } from '@/components/ui/appointments/appointmentPurposeStyles';
 import { Card } from '@/components/ui/shared/Card';
 import { ScheduleDayPicker } from '@/components/ui/shared/ScheduleDayPicker';
 import { startOfLocalDay } from '@/components/appointments/appointmentTime';
-import { treatmentTypeLabelFromCatalog } from '@/components/ui/treatment/treatmentTypeDisplay';
+import {
+  treatmentTypeBannerStyle,
+  treatmentTypeLabelFromCatalog,
+} from '@/components/ui/treatment/treatmentTypeDisplay';
 import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
 import type { TreatmentAppointment } from '@/types/treatment';
 
@@ -91,8 +93,8 @@ export function AppointmentsStrip({
             hour: 'numeric',
             minute: '2-digit',
           })}`;
-          const palette = purposeStyle(a.purpose);
           const purposeLabel = treatmentTypeLabelFromCatalog(a.purpose, treatmentCatalog);
+          const purposeIndex = treatmentCatalog.findIndex((e) => e.code === a.purpose);
           return (
             <Card
               as="button"
@@ -100,10 +102,10 @@ export function AppointmentsStrip({
               type="button"
               onClick={() => onSelectAppointment(a.id)}
               padding="none"
+              style={treatmentTypeBannerStyle(a.purpose, purposeIndex < 0 ? 0 : purposeIndex)}
               className={`
                 text-left rounded-[var(--radius-sm)] px-3 py-2 min-w-[200px] max-w-[280px] transition-shadow min-h-[52px]
                 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/45
-                ${palette}
                 ${sel ? 'ring-2 ring-primary ring-offset-2 ring-offset-background-secondary shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]' : 'hover:brightness-110'}
               `}
             >