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

2026-07-07 13:13:04 +03:30
parent 667b08ed0c
commit ed7e7b1d8f
20 changed files with 321 additions and 148 deletions
--- a/frontend/src/app/[locale]/(dashboard)/appointments/page.tsx
+++ b/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);
--- a/frontend/src/components/ui/appointments/AppointmentBookingModal.tsx
+++ b/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>
--- a/frontend/src/components/ui/appointments/AppointmentOverlapPopover.tsx
+++ b/frontend/src/components/ui/appointments/AppointmentOverlapPopover.tsx
@@ -4,13 +4,15 @@ import { useEffect, useRef } from 'react';
 import { useTranslations } from 'next-intl';
 import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
 import {
-  getPurposeLabel,
-  purposeStyle,
+  purposeBannerStyle,
+  purposeLabel,
 } from '@/components/ui/appointments/appointmentPurposeStyles';
-import type { AppointmentPurpose, AppointmentRecord } from '@/types/appointment';
+import type { AppointmentRecord } from '@/types/appointment';
+import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';

 type AppointmentOverlapPopoverProps = {
  appointments: AppointmentRecord[];
+  treatmentCatalog: TreatmentCatalogEntry[];
  anchorRect: DOMRect;
  onSelect: (appointment: AppointmentRecord) => void;
  onClose: () => void;
@@ -25,6 +27,7 @@ function formatTimeRange(apt: AppointmentRecord): string {

 export function AppointmentOverlapPopover({
  appointments,
+  treatmentCatalog,
  anchorRect,
  onSelect,
  onClose,
@@ -82,29 +85,27 @@ export function AppointmentOverlapPopover({
          <DialogCloseButton onClick={onClose} />
        </div>
        <ul className="space-y-1.5 max-h-[min(16rem,50vh)] overflow-y-auto">
-          {sorted.map((apt) => {
-            const purpose = apt.purpose as AppointmentPurpose;
-            return (
-              <li key={apt.id}>
-                <button
-                  type="button"
-                  onClick={() => {
-                    onSelect(apt);
-                    onClose();
-                  }}
-                  className={`w-full rounded-[var(--radius-sm)] border px-2.5 py-2 text-left transition-colors hover:brightness-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 ${purposeStyle(apt.purpose)}`}
-                >
-                  <p className="text-xs font-medium truncate">
-                    {apt.patient.firstName} {apt.patient.lastName}
-                  </p>
-                  <p className="text-[11px] opacity-90 tabular-nums">{formatTimeRange(apt)}</p>
-                  <p className="text-[10px] opacity-80 truncate">
-                    {getPurposeLabel(purpose, t) ?? apt.purpose}
-                  </p>
-                </button>
-              </li>
-            );
-          })}
+          {sorted.map((apt) => (
+            <li key={apt.id}>
+              <button
+                type="button"
+                onClick={() => {
+                  onSelect(apt);
+                  onClose();
+                }}
+                className="w-full rounded-[var(--radius-sm)] border px-2.5 py-2 text-left transition-colors hover:brightness-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35"
+                style={purposeBannerStyle(apt.purpose, treatmentCatalog)}
+              >
+                <p className="text-xs font-medium truncate">
+                  {apt.patient.firstName} {apt.patient.lastName}
+                </p>
+                <p className="text-[11px] opacity-90 tabular-nums">{formatTimeRange(apt)}</p>
+                <p className="text-[10px] opacity-80 truncate">
+                  {purposeLabel(apt.purpose, treatmentCatalog)}
+                </p>
+              </button>
+            </li>
+          ))}
        </ul>
      </div>
    </div>
--- a/frontend/src/components/ui/appointments/AppointmentScheduleGrid.tsx
+++ b/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);
--- a/frontend/src/components/ui/appointments/AppointmentScheduleLegend.tsx
+++ b/frontend/src/components/ui/appointments/AppointmentScheduleLegend.tsx
@@ -1,25 +1,33 @@
 'use client';

 import { useTranslations } from 'next-intl';
-import {
-  APPOINTMENT_PURPOSE_LEGEND_SWATCH,
-  getPurposeLabel,
-} from '@/components/ui/appointments/appointmentPurposeStyles';
-import { APPOINTMENT_PURPOSES } from '@/types/appointment';
+import { purposeSwatchStyle } from '@/components/ui/appointments/appointmentPurposeStyles';
+import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';

-export function AppointmentScheduleLegend() {
+interface AppointmentScheduleLegendProps {
+  treatmentCatalog: TreatmentCatalogEntry[];
+}
+
+export function AppointmentScheduleLegend({
+  treatmentCatalog,
+}: AppointmentScheduleLegendProps) {
  const t = useTranslations('appointments');

+  if (treatmentCatalog.length === 0) {
+    return null;
+  }
+
  return (
    <div className="surface-panel px-4 py-3">
      <p className="text-xs font-medium text-text-secondary mb-2">{t('legend')}</p>
      <div className="flex flex-wrap gap-3">
-        {APPOINTMENT_PURPOSES.map((p) => (
-          <div key={p} className="flex items-center gap-1.5 text-xs text-text-secondary">
+        {treatmentCatalog.map((entry) => (
+          <div key={entry.code} className="flex items-center gap-1.5 text-xs text-text-secondary">
            <span
-              className={`inline-block h-3 w-3 rounded-sm border ${APPOINTMENT_PURPOSE_LEGEND_SWATCH[p]}`}
+              className="inline-block h-3 w-3 rounded-sm border"
+              style={purposeSwatchStyle(entry.code, treatmentCatalog)}
            />
-            {getPurposeLabel(p, t)}
+            {entry.label}
          </div>
        ))}
      </div>
--- a/frontend/src/components/ui/appointments/appointmentPurposeStyles.ts
+++ b/frontend/src/components/ui/appointments/appointmentPurposeStyles.ts
@@ -1,46 +1,39 @@
-import type { AppointmentPurpose } from '@/types/appointment';
+import type { CSSProperties } from 'react';
+import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
+import {
+  treatmentTypeBannerStyle,
+  treatmentTypeLabelFromCatalog,
+  treatmentTypeSwatchStyle,
+} from '@/components/ui/treatment/treatmentTypeDisplay';

-export const APPOINTMENT_PURPOSE_LABEL_KEYS = {
-  consultation: 'purposeConsultation',
-  filling: 'purposeFilling',
-  endo: 'purposeEndo',
-  visit: 'purposeVisit',
-  hygiene: 'purposeHygiene',
-} as const satisfies Record<AppointmentPurpose, string>;
+/**
+ * Appointment purposes are treatment-type codes. Labels and colors now come from
+ * the shared treatment catalog + palette so the appointment and treatment
+ * features stay in sync. These helpers adapt the shared palette to the appointment
+ * components' call sites.
+ */

-export type AppointmentPurposeLabelKey =
-  (typeof APPOINTMENT_PURPOSE_LABEL_KEYS)[AppointmentPurpose];
-
-export type AppointmentPurposeTranslate = (key: AppointmentPurposeLabelKey) => string;
-
-export function getPurposeLabel(
-  purpose: AppointmentPurpose,
-  t: AppointmentPurposeTranslate,
+export function purposeLabel(
+  purpose: string,
+  catalog: TreatmentCatalogEntry[],
 ): string {
-  const key = APPOINTMENT_PURPOSE_LABEL_KEYS[purpose];
-  return key ? t(key) : purpose;
+  return treatmentTypeLabelFromCatalog(purpose, catalog);
 }

-/** Background + border for blocks / legend (matches reference palette). */
-export const APPOINTMENT_PURPOSE_STYLES: Record<AppointmentPurpose, string> = {
-  consultation:
-    'bg-purpose-consultation-bg border-purpose-consultation-border text-purpose-consultation-fg',
-  filling: 'bg-purpose-filling-bg border-purpose-filling-border text-purpose-filling-fg',
-  endo: 'bg-purpose-endo-bg border-purpose-endo-border text-purpose-endo-fg',
-  visit: 'bg-purpose-visit-bg border-purpose-visit-border text-purpose-visit-fg',
-  hygiene: 'bg-purpose-hygiene-bg border-purpose-hygiene-border text-purpose-hygiene-fg',
-};
-
-export function purposeStyle(purpose: string): string {
-  const p = purpose as AppointmentPurpose;
-  return APPOINTMENT_PURPOSE_STYLES[p] ?? 'bg-surface-elevated border-border text-text-secondary';
+/** Inline style for a colored appointment banner/block. */
+export function purposeBannerStyle(
+  purpose: string,
+  catalog: TreatmentCatalogEntry[],
+): CSSProperties {
+  const index = catalog.findIndex((e) => e.code === purpose);
+  return treatmentTypeBannerStyle(purpose, index);
 }

-/** Small swatch for legend (background + border only). */
-export const APPOINTMENT_PURPOSE_LEGEND_SWATCH: Record<AppointmentPurpose, string> = {
-  consultation: 'bg-violet-500/85 border-violet-400/75',
-  filling: 'bg-orange-500/85 border-orange-400/75',
-  endo: 'bg-red-500/85 border-red-400/75',
-  visit: 'bg-sky-500/85 border-sky-400/75',
-  hygiene: 'bg-lime-500/80 border-lime-400/70',
-};
+/** Inline style for a small legend swatch. */
+export function purposeSwatchStyle(
+  purpose: string,
+  catalog: TreatmentCatalogEntry[],
+): CSSProperties {
+  const index = catalog.findIndex((e) => e.code === purpose);
+  return treatmentTypeSwatchStyle(purpose, index);
+}
--- a/frontend/src/components/ui/treatment/AppointmentsStrip.tsx
+++ b/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'}
              `}
            >
--- a/frontend/src/components/ui/treatment/TreatmentTypeBadge.tsx
+++ b/frontend/src/components/ui/treatment/TreatmentTypeBadge.tsx
@@ -1,7 +1,9 @@
 'use client';

-import { purposeStyle } from '@/components/ui/appointments/appointmentPurposeStyles';
-import { formatCodeAsLabel } from '@/components/ui/treatment/treatmentTypeDisplay';
+import {
+  formatCodeAsLabel,
+  treatmentTypeBannerStyle,
+} from '@/components/ui/treatment/treatmentTypeDisplay';

 interface TreatmentTypeBadgeProps {
  type: string;
@@ -14,7 +16,8 @@ export function TreatmentTypeBadge({ type, label, className = '' }: TreatmentTyp

  return (
    <span
-      className={`inline-flex items-center justify-center box-border rounded-md border min-h-[1.75rem] px-2.5 py-1 text-xs font-medium leading-none shrink-0 ${purposeStyle(type)} ${className}`.trim()}
+      className={`inline-flex items-center justify-center box-border rounded-md border min-h-[1.75rem] px-2.5 py-1 text-xs font-medium leading-none shrink-0 ${className}`.trim()}
+      style={treatmentTypeBannerStyle(type)}
    >
      {display}
    </span>
--- a/frontend/src/components/ui/treatment/TreatmentWorkspace.tsx
+++ b/frontend/src/components/ui/treatment/TreatmentWorkspace.tsx
@@ -242,6 +242,10 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
  const [orgs, setOrgs] = useState<LinkedOrganizationOption[]>([]);
  const [labDependentCodes, setLabDependentCodes] = useState<Set<string>>(new Set());
  const [treatmentCatalog, setTreatmentCatalog] = useState<TreatmentCatalogEntry[]>([]);
+  const treatmentDropdownCatalog = useMemo(
+    () => treatmentCatalog.filter((entry) => entry.availableInTreatment),
+    [treatmentCatalog],
+  );

  const [details, setDetails] = useState<TreatmentDetailDraft[]>(() => [newDetail()]);
  const [labCaseDrafts, setLabCaseDrafts] = useState<LabCaseDraft[]>([]);
@@ -984,7 +988,7 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
            onDetailsChange={setDetails}
            isDetailLocked={isDetailLocked}
            labDependentCodes={labDependentCodes}
-            treatmentCatalog={treatmentCatalog}
+            treatmentCatalog={treatmentDropdownCatalog}
            disabled={!canEditTreatmentForDay}
            canEdit={canEdit}
            saveStatus={saveStatus}
--- a/frontend/src/components/ui/treatment/treatmentTypeDisplay.ts
+++ b/frontend/src/components/ui/treatment/treatmentTypeDisplay.ts
@@ -1,9 +1,19 @@
+import type { CSSProperties } from 'react';
 import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';

+/**
+ * Single source of truth for treatment-type colors across the app
+ * (treatment detail dropdown, appointment booking dropdown, appointment legend,
+ * appointment schedule banners, and the treatment feature's appointment cards).
+ *
+ * There is no universal dental type→color standard (only status-based blue/red
+ * conventions), so this is a curated pastel palette. Extend it as new treatment
+ * types are added; unknown codes fall back to a rotating pastel set by index.
+ */
 const TREATMENT_TYPE_COLORS: Record<string, string> = {
  restoration: '#fed7aa',
  specialized_restoration: '#fdba74',
-  radiography: '#e2e8f0',
+  radiography: '#cbd5e1',
  endo: '#fecaca',
  surgery: '#fca5a5',
  prosthesis: '#c4b5fd',
@@ -11,16 +21,43 @@ const TREATMENT_TYPE_COLORS: Record<string, string> = {
  orthodontics: '#93c5fd',
  perio: '#86efac',
  pediatrics: '#fde68a',
-  extraction: '#f87171',
+  extraction: '#f9a8d4',
  clinic_visit: '#bae6fd',
+  continue_treatment: '#99f6e4',
 };

-const FALLBACK_COLORS = ['#ddd6fe', '#fed7aa', '#fecaca', '#bae6fd', '#d9f99d'];
+const FALLBACK_COLORS = ['#ddd6fe', '#fed7aa', '#fecaca', '#bae6fd', '#d9f99d', '#fbcfe8'];
+
+/** Dark ink that stays readable on every pastel in the palette. */
+const BANNER_INK = '#14253d';
+/** Dark background used behind pastel option text in native <select> dropdowns. */
+export const DROPDOWN_OPTION_BG = '#14253d';

 export function treatmentTypeColor(code: string, index = 0): string {
  return TREATMENT_TYPE_COLORS[code] ?? FALLBACK_COLORS[index % FALLBACK_COLORS.length];
 }

+/** Filled swatch (legend dots, small indicators). */
+export function treatmentTypeSwatchStyle(code: string, index = 0): CSSProperties {
+  const color = treatmentTypeColor(code, index);
+  return { backgroundColor: color, borderColor: 'rgba(0, 0, 0, 0.18)' };
+}
+
+/** Colored banner / card fill with readable dark text (schedule blocks, appointment cards). */
+export function treatmentTypeBannerStyle(code: string, index = 0): CSSProperties {
+  const color = treatmentTypeColor(code, index);
+  return {
+    backgroundColor: color,
+    borderColor: 'rgba(0, 0, 0, 0.16)',
+    color: BANNER_INK,
+  };
+}
+
+/** Pastel option text on the dark dropdown background. */
+export function treatmentTypeOptionStyle(code: string, index = 0): CSSProperties {
+  return { color: treatmentTypeColor(code, index), backgroundColor: DROPDOWN_OPTION_BG };
+}
+
 export function treatmentTypeLabelFromCatalog(
  code: string,
  catalog: TreatmentCatalogEntry[],
--- a/frontend/src/lib/api/treatment-catalog.ts
+++ b/frontend/src/lib/api/treatment-catalog.ts
@@ -1,9 +1,15 @@
 import { apiClient } from './client';
 import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';

+export type TreatmentCatalogContext = 'appointment' | 'treatment';
+
 export const treatmentCatalogApi = {
-  list: async (): Promise<{ success: boolean; data: TreatmentCatalogEntry[] }> => {
-    const response = await apiClient.get('/treatment-catalog');
+  list: async (
+    context?: TreatmentCatalogContext,
+  ): Promise<{ success: boolean; data: TreatmentCatalogEntry[] }> => {
+    const response = await apiClient.get('/treatment-catalog', {
+      params: context ? { context } : undefined,
+    });
    return response.data;
  },
 };
--- a/frontend/src/types/appointment.ts
+++ b/frontend/src/types/appointment.ts
@@ -1,14 +1,11 @@
 import type { Patient } from './patient';

-export const APPOINTMENT_PURPOSES = [
-  'consultation',
-  'filling',
-  'endo',
-  'visit',
-  'hygiene',
-] as const;
-
-export type AppointmentPurpose = (typeof APPOINTMENT_PURPOSES)[number];
+/**
+ * An appointment purpose is any treatment-type code selectable in the appointment
+ * context (see the treatment catalog with `?context=appointment`). Kept as a
+ * string so the set is driven by the DB catalog rather than a hardcoded union.
+ */
+export type AppointmentPurpose = string;

 export interface AppointmentColumnProvider {
  userId: string;
--- a/frontend/src/types/treatment-catalog.ts
+++ b/frontend/src/types/treatment-catalog.ts
@@ -4,6 +4,8 @@ export interface TreatmentCatalogEntry {
  labDependent: boolean;
  sortOrder: number;
  label: string;
+  availableInAppointments: boolean;
+  availableInTreatment: boolean;
 }

 export interface ProsthesisCatalogEntry {