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

frontend/src/app/[locale]/(dashboard)/appointments/page.tsx

@@ -4,6 +4,8 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslations } from 'next-intl';
 import { appointmentsApi } from '@/lib/api/appointments';
 import { patientsApi } from '@/lib/api/patients';
+import { treatmentCatalogApi } from '@/lib/api/treatment-catalog';
+import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
 import { useAuth } from '@/lib/hooks/useAuth';
 import { canEditAppointments, hasPermission } from '@/components/shared/permissions';
 import type { AppointmentColumnProvider, AppointmentRecord } from '@/types/appointment';
@@ -36,6 +38,7 @@ export default function AppointmentsPage() {
 
   const [providers, setProviders] = useState<AppointmentColumnProvider[]>([]);
   const [appointments, setAppointments] = useState<AppointmentRecord[]>([]);
+  const [treatmentCatalog, setTreatmentCatalog] = useState<TreatmentCatalogEntry[]>([]);
   const [loadingSchedule, setLoadingSchedule] = useState(false);
   const toast = useToast();
 
@@ -114,6 +117,13 @@ export default function AppointmentsPage() {
     void loadSchedule();
   }, [loadSchedule]);
 
+  useEffect(() => {
+    void treatmentCatalogApi
+      .list('appointment')
+      .then((r) => setTreatmentCatalog(r.data))
+      .catch(() => {});
+  }, []);
+
   useEffect(() => {
     const t = setTimeout(() => {
       void loadPatientsSearch(search);
@@ -301,7 +311,7 @@ export default function AppointmentsPage() {
         </div>
 
         <div className="xl:col-span-2 space-y-4">
-          <AppointmentScheduleLegend />
+          <AppointmentScheduleLegend treatmentCatalog={treatmentCatalog} />
 
           <div className="flex flex-col sm:flex-row sm:items-end gap-4 sm:justify-between">
             <ScheduleDayPicker
@@ -317,6 +327,7 @@ export default function AppointmentsPage() {
             day={scheduleDate}
             providers={providers}
             appointments={appointments}
+            treatmentCatalog={treatmentCatalog}
             canBook={canManageAppointments && !isViewingPastDay}
             onSlotClick={(startMinute, uid, name) => handleSlotClick(startMinute, uid, name)}
             onAppointmentClick={(apt) => handleAppointmentClick(apt)}
@@ -332,6 +343,7 @@ export default function AppointmentsPage() {
         providerUserId={bookingProviderId}
         providerName={bookingProviderName}
         initialStartMinute={bookingStartMinute}
+        treatmentCatalog={treatmentCatalog}
         editingAppointment={activeEditingAppointment}
         onClose={() => {
           setBookingOpen(false);