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

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

@@ -6,8 +6,11 @@ import { Button } from '@/components/ui/shared/Button';
 import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
 import { Dropdown } from '@/components/ui/shared/Dropdown';
 import type { AppointmentPurpose, AppointmentRecord } from '@/types/appointment';
-import { APPOINTMENT_PURPOSES } from '@/types/appointment';
-import { getPurposeLabel } from '@/components/ui/appointments/appointmentPurposeStyles';
+import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
+import {
+  DROPDOWN_OPTION_BG,
+  treatmentTypeColor,
+} from '@/components/ui/treatment/treatmentTypeDisplay';
 import type { Patient } from '@/types/patient';
 import {
   combineLocalDateAndTime,
@@ -31,6 +34,7 @@ interface AppointmentBookingModalProps {
     endAt: string;
     purpose: AppointmentPurpose;
   }) => Promise<void>;
+  treatmentCatalog: TreatmentCatalogEntry[];
   editingAppointment?: AppointmentRecord | null;
   loading?: boolean;
   canDelete?: boolean;
@@ -38,14 +42,6 @@ interface AppointmentBookingModalProps {
   deleting?: boolean;
 }
 
-const PURPOSE_OPTION_COLORS: Record<AppointmentPurpose, string> = {
-  consultation: '#ddd6fe',
-  filling: '#fed7aa',
-  endo: '#fecaca',
-  visit: '#bae6fd',
-  hygiene: '#d9f99d',
-};
-
 export function AppointmentBookingModal({
   open,
   scheduleDate,
@@ -55,6 +51,7 @@ export function AppointmentBookingModal({
   initialStartMinute,
   onClose,
   onSubmit,
+  treatmentCatalog,
   editingAppointment = null,
   loading = false,
   canDelete = false,
@@ -65,11 +62,14 @@ export function AppointmentBookingModal({
   const tCommon = useTranslations('common');
   const tPatients = useTranslations('patients');
 
+  const defaultPurpose = treatmentCatalog[0]?.code ?? '';
+
   const [startTime, setStartTime] = useState('09:00');
   const [endTime, setEndTime] = useState('10:00');
-  const [purpose, setPurpose] = useState<AppointmentPurpose>('consultation');
+  const [purpose, setPurpose] = useState<AppointmentPurpose>(defaultPurpose);
   const [error, setError] = useState('');
-  const purposeTextColor = PURPOSE_OPTION_COLORS[purpose];
+  const purposeIndex = treatmentCatalog.findIndex((e) => e.code === purpose);
+  const purposeTextColor = treatmentTypeColor(purpose, purposeIndex < 0 ? 0 : purposeIndex);
 
   useEffect(() => {
     if (!open) {
@@ -80,7 +80,7 @@ export function AppointmentBookingModal({
       const end = new Date(editingAppointment.endAt);
       setStartTime(formatTimeForInput(start));
       setEndTime(formatTimeForInput(end));
-      setPurpose((editingAppointment.purpose as AppointmentPurpose) ?? 'consultation');
+      setPurpose(editingAppointment.purpose || defaultPurpose);
     } else {
       const start = new Date(
         scheduleDate.getFullYear(),
@@ -103,10 +103,10 @@ export function AppointmentBookingModal({
       );
       setStartTime(formatTimeForInput(start));
       setEndTime(formatTimeForInput(end));
-      setPurpose('consultation');
+      setPurpose(defaultPurpose);
     }
     setError('');
-  }, [open, scheduleDate, initialStartMinute, editingAppointment]);
+  }, [open, scheduleDate, initialStartMinute, editingAppointment, defaultPurpose]);
 
   if (!open || !providerUserId) {
     return null;
@@ -224,16 +224,16 @@ export function AppointmentBookingModal({
         <Dropdown
           label={t('purposeLabel')}
           value={purpose}
-          onChange={(e) => setPurpose(e.target.value as AppointmentPurpose)}
+          onChange={(e) => setPurpose(e.target.value)}
           style={{ color: purposeTextColor }}
         >
-          {APPOINTMENT_PURPOSES.map((purposeOption) => (
+          {treatmentCatalog.map((entry, index) => (
             <option
-              key={purposeOption}
-              value={purposeOption}
-              style={{ color: PURPOSE_OPTION_COLORS[purposeOption], backgroundColor: '#14253d' }}
+              key={entry.code}
+              value={entry.code}
+              style={{ color: treatmentTypeColor(entry.code, index), backgroundColor: DROPDOWN_OPTION_BG }}
             >
-              {getPurposeLabel(purposeOption, t)}
+              {entry.label}
             </option>
           ))}
         </Dropdown>