feature: Preview added for treatments.

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

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { X } from 'lucide-react';
 import { Button } from '@/components/ui/common/Button';
 import { Dropdown } from '@/components/ui/common/Dropdown';
-import { APPOINTMENT_PURPOSES, type AppointmentPurpose } from '@/types/appointment';
+import type { AppointmentPurpose } from '@/types/appointment';
 import { APPOINTMENT_PURPOSE_LABEL } from '@/components/ui/appointments/appointmentPurposeStyles';
 import type { Patient } from '@/types/patient';
 import {
@@ -46,6 +46,16 @@ export function AppointmentBookingModal({
   const [endTime, setEndTime] = useState('10:00');
   const [purpose, setPurpose] = useState<AppointmentPurpose>('consultation');
   const [error, setError] = useState('');
+  const purposeTextColor =
+    purpose === 'consultation'
+      ? '#ddd6fe'
+      : purpose === 'filling'
+        ? '#fed7aa'
+        : purpose === 'endo'
+          ? '#fecaca'
+          : purpose === 'visit'
+            ? '#bae6fd'
+            : '#d9f99d';
 
   useEffect(() => {
     if (!open) {
@@ -175,12 +185,23 @@ export function AppointmentBookingModal({
           label="Purpose"
           value={purpose}
           onChange={(e) => setPurpose(e.target.value as AppointmentPurpose)}
+          style={{ color: purposeTextColor }}
         >
-          {APPOINTMENT_PURPOSES.map((p) => (
-            <option key={p} value={p}>
-              {APPOINTMENT_PURPOSE_LABEL[p]}
-            </option>
-          ))}
+          <option value="consultation" style={{ color: '#ddd6fe', backgroundColor: '#14253d' }}>
+            {APPOINTMENT_PURPOSE_LABEL.consultation}
+          </option>
+          <option value="filling" style={{ color: '#fed7aa', backgroundColor: '#14253d' }}>
+            {APPOINTMENT_PURPOSE_LABEL.filling}
+          </option>
+          <option value="endo" style={{ color: '#fecaca', backgroundColor: '#14253d' }}>
+            {APPOINTMENT_PURPOSE_LABEL.endo}
+          </option>
+          <option value="visit" style={{ color: '#bae6fd', backgroundColor: '#14253d' }}>
+            {APPOINTMENT_PURPOSE_LABEL.visit}
+          </option>
+          <option value="hygiene" style={{ color: '#d9f99d', backgroundColor: '#14253d' }}>
+            {APPOINTMENT_PURPOSE_LABEL.hygiene}
+          </option>
         </Dropdown>
 
         {error && <p className="text-sm text-red-400">{error}</p>}