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

frontend/src/components/ui/appointments/AppointmentScheduleGrid.tsx

@@ -18,10 +18,11 @@ import {
   findOverlapCluster,
   lanePositionStyles,
 } from '@/components/appointments/appointmentOverlapLayout';
-import { purposeStyle } from '@/components/ui/appointments/appointmentPurposeStyles';
+import { purposeBannerStyle } from '@/components/ui/appointments/appointmentPurposeStyles';
 import { AppointmentOverlapPopover } from '@/components/ui/appointments/AppointmentOverlapPopover';
 import { formatMobileForDisplay } from '@/lib/phone';
 import { startOfLocalDay } from '@/components/appointments/appointmentTime';
+import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
 
 const HOUR_PX = 80;
 const SLOT_PX = (HOUR_PX * SCHEDULE_SLOT_MINUTES) / 60;
@@ -78,6 +79,7 @@ interface AppointmentScheduleGridProps {
   day: Date;
   providers: AppointmentColumnProvider[];
   appointments: AppointmentRecord[];
+  treatmentCatalog: TreatmentCatalogEntry[];
   canBook: boolean;
   onSlotClick: (startMinute: number, providerUserId: string, providerName: string) => void;
   onAppointmentClick?: (appointment: AppointmentRecord) => void;
@@ -88,6 +90,7 @@ export function AppointmentScheduleGrid({
   day,
   providers,
   appointments,
+  treatmentCatalog,
   canBook,
   onSlotClick,
   onAppointmentClick,
@@ -320,7 +323,7 @@ export function AppointmentScheduleGrid({
                               e.currentTarget,
                             )
                           }
-                          className={`absolute min-h-0 overflow-hidden rounded-[var(--radius-sm)] border pointer-events-auto z-10 flex text-left ${purposeStyle(apt.purpose)} focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 ${
+                          className={`absolute min-h-0 overflow-hidden rounded-[var(--radius-sm)] border pointer-events-auto z-10 flex text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 ${
                             outsideHours ? 'opacity-70 ring-1 ring-amber-500/60' : ''
                           } ${
                             isUnderOneHour
@@ -332,6 +335,7 @@ export function AppointmentScheduleGrid({
                             height: pos.height,
                             left: lanePos.left,
                             width: lanePos.width,
+                            ...purposeBannerStyle(apt.purpose, treatmentCatalog),
                           }}
                           title={bannerTitle}
                         >
@@ -366,6 +370,7 @@ export function AppointmentScheduleGrid({
       {overlapPopover && (
         <AppointmentOverlapPopover
           appointments={overlapPopover.appointments}
+          treatmentCatalog={treatmentCatalog}
           anchorRect={overlapPopover.anchorRect}
           onSelect={(apt) => {
             const provider = providers.find((p) => p.userId === apt.providerUserId);