@sasindi/radiologytestscheduling 0.0.0-stage → 1.0.1

package/src/radiology-test-scheduling.component.tsx

@@ -0,0 +1,875 @@
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Loading } from '@carbon/react';
+import Swal from 'sweetalert2';
+import {
+  fetchCurrentSessionAndInstitute,
+  fetchInstitutes,
+  fetchPendingSchedulingOrders,
+  fetchPatientDetails,
+  fetchLocationDisplay,
+  fetchUserDisplay,
+  fetchExamRooms,
+  fetchCalendarData,
+  saveScheduling,
+  SessionInfo,
+} from './radiology-test-scheduling.resource';
+import {
+  SchedulingOrderDTO,
+  PatientDemographics,
+  InstituteOption,
+  ExamRoom,
+  RadiologyOrder,
+} from './types';
+import styles from './radiology-test-scheduling.scss';
+
+const DEFAULT_AVATAR =
+  'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="%23b0bec5"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>';
+
+const RadiologyTestScheduling: React.FC = () => {
+  const { t } = useTranslation();
+
+  // Session & Institute states
+  const [sessionInfo, setSessionInfo] = useState<SessionInfo>({
+    userUuid: '',
+    personUuid: '',
+    locationUuid: '',
+    locationName: '',
+  });
+  const [institutes, setInstitutes] = useState<InstituteOption[]>([]);
+  const [selectedInstitute, setSelectedInstitute] = useState<string>('all');
+
+  // Pending Tests & Table states
+  const [pendingOrders, setPendingOrders] = useState<SchedulingOrderDTO[]>([]);
+  const [loadingOrders, setLoadingOrders] = useState<boolean>(true);
+  const [searchTerm, setSearchTerm] = useState<string>('');
+
+  // Selected Order & Patient state
+  const [selectedOrder, setSelectedOrder] = useState<SchedulingOrderDTO | null>(null);
+  const [patientDetails, setPatientDetails] = useState<PatientDemographics | null>(null);
+  const [loadingPatient, setLoadingPatient] = useState<boolean>(false);
+
+  // Scheduling inputs
+  const [scheduledDateTime, setScheduledDateTime] = useState<string>('');
+  const [remarks, setRemarks] = useState<string>('');
+  const [isSaving, setIsSaving] = useState<boolean>(false);
+
+  // Calendar filter states
+  const [selectedModality, setSelectedModality] = useState<string>('all');
+  const [examRooms, setExamRooms] = useState<ExamRoom[]>([]);
+  const [selectedExamRoom, setSelectedExamRoom] = useState<string>('all');
+  const [calendarOrders, setCalendarOrders] = useState<RadiologyOrder[]>([]);
+  const [calendarDate, setCalendarDate] = useState<Date>(new Date());
+  const [loadingCalendar, setLoadingCalendar] = useState<boolean>(false);
+
+  // Initialize Session and Institutes
+  useEffect(() => {
+    let isMounted = true;
+    (async () => {
+      try {
+        const [session, instList] = await Promise.all([
+          fetchCurrentSessionAndInstitute(),
+          fetchInstitutes(),
+        ]);
+        if (!isMounted) return;
+        setSessionInfo(session);
+        setInstitutes(instList);
+        if (session.locationUuid) {
+          setSelectedInstitute(session.locationUuid);
+        }
+      } catch (err) {
+        console.error('Initialization failed', err);
+      }
+    })();
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  // Load Pending Orders whenever selected institute changes
+  const loadPendingOrders = useCallback(async (instUuid: string) => {
+    setLoadingOrders(true);
+    try {
+      const orders = await fetchPendingSchedulingOrders(instUuid);
+      // Enhance with async location / user names if available
+      const enhanced = await Promise.all(
+        orders.map(async (dto) => {
+          const loc = dto.radiology.location ? await fetchLocationDisplay(dto.radiology.location) : '';
+          const ordBy = dto.radiology.requesterReference
+            ? await fetchUserDisplay(dto.radiology.requesterReference)
+            : '';
+          return {
+            ...dto,
+            locationName: loc,
+            orderedByName: ordBy,
+          };
+        }),
+      );
+      setPendingOrders(enhanced);
+    } catch (err) {
+      console.error('Failed to load pending scheduling orders', err);
+      Swal.fire({
+        icon: 'error',
+        title: 'Error Loading Orders',
+        text: 'Unable to fetch pending radiology test orders.',
+      });
+    } finally {
+      setLoadingOrders(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadPendingOrders(selectedInstitute);
+  }, [selectedInstitute, loadPendingOrders]);
+
+  // Load Exam Rooms when modality changes
+  useEffect(() => {
+    (async () => {
+      if (selectedModality === 'all' || !selectedModality) {
+        setExamRooms([]);
+        setSelectedExamRoom('all');
+      } else {
+        const rooms = await fetchExamRooms(selectedModality);
+        setExamRooms(rooms);
+        setSelectedExamRoom('all');
+      }
+    })();
+  }, [selectedModality]);
+
+  // Load Calendar Data
+  const loadCalendar = useCallback(async () => {
+    setLoadingCalendar(true);
+    try {
+      const data = await fetchCalendarData(selectedModality, selectedExamRoom, selectedInstitute);
+      setCalendarOrders(data);
+    } catch (err) {
+      console.error('Failed to load calendar data', err);
+    } finally {
+      setLoadingCalendar(false);
+    }
+  }, [selectedModality, selectedExamRoom, selectedInstitute]);
+
+  useEffect(() => {
+    loadCalendar();
+  }, [loadCalendar]);
+
+  // Handle row selection
+  const handleSelectRow = async (dto: SchedulingOrderDTO) => {
+    setSelectedOrder(dto);
+    setScheduledDateTime('');
+    setRemarks('');
+    setLoadingPatient(true);
+
+    try {
+      const details = await fetchPatientDetails(dto.radiology.patientPhn);
+      setPatientDetails(details);
+    } catch (e) {
+      console.error('Failed to load patient details', e);
+    } finally {
+      setLoadingPatient(false);
+    }
+  };
+
+  // Reset selection
+  const handleClear = () => {
+    setSelectedOrder(null);
+    setPatientDetails(null);
+    setScheduledDateTime('');
+    setRemarks('');
+  };
+
+  // Save Schedule Handler
+  const handleSave = async () => {
+    if (!selectedOrder) {
+      Swal.fire({
+        icon: 'warning',
+        title: 'No Order Selected',
+        text: 'Please select a pending test order from the table to schedule.',
+        confirmButtonColor: '#0f62fe',
+      });
+      return;
+    }
+
+    if (!scheduledDateTime) {
+      Swal.fire({
+        icon: 'warning',
+        title: 'Date & Time Required',
+        text: 'Please choose the Scheduled Date and Time before saving.',
+        confirmButtonColor: '#0f62fe',
+      });
+      return;
+    }
+
+    // Format datetime string: "YYYY-MM-DD HH:mm:ss"
+    const formattedDateTime = scheduledDateTime.replace('T', ' ') + ':00';
+
+    const result = await Swal.fire({
+      title: 'Confirm Scheduling',
+      text: `Schedule ${selectedOrder.radiology.codeDisplay || 'test'} on ${formattedDateTime}?`,
+      icon: 'question',
+      showCancelButton: true,
+      confirmButtonColor: '#0f62fe',
+      cancelButtonColor: '#6c757d',
+      confirmButtonText: 'Yes, Schedule',
+      cancelButtonText: 'Cancel',
+    });
+
+    if (!result.isConfirmed) {
+      return;
+    }
+
+    setIsSaving(true);
+    try {
+      await saveScheduling(selectedOrder.type, {
+        id: selectedOrder.radiology.id,
+        scheduledDateTime: formattedDateTime,
+        remarks: remarks || '',
+        cby: sessionInfo.userUuid || '1',
+      });
+
+      await Swal.fire({
+        icon: 'success',
+        title: 'Saved Successfully!',
+        text: 'The radiology test has been scheduled.',
+        timer: 2000,
+        showConfirmButton: false,
+      });
+
+      handleClear();
+      loadPendingOrders(selectedInstitute);
+      loadCalendar();
+    } catch (err: any) {
+      console.error('Failed to save schedule', err);
+      Swal.fire({
+        icon: 'error',
+        title: 'Save Failed',
+        text: err?.message || 'Could not schedule radiology test. Please check server logs.',
+        confirmButtonColor: '#da1e28',
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  // Filtered Orders for search input
+  const filteredOrders = useMemo(() => {
+    if (!searchTerm.trim()) return pendingOrders;
+    const term = searchTerm.toLowerCase();
+    return pendingOrders.filter((dto) => {
+      const phn = dto.radiology.patientPhn?.toLowerCase() || '';
+      const test = dto.radiology.codeDisplay?.toLowerCase() || '';
+      const section = dto.type?.toLowerCase() || '';
+      const priority = dto.radiology.priority?.toLowerCase() || '';
+      const location = dto.locationName?.toLowerCase() || '';
+      return (
+        phn.includes(term) ||
+        test.includes(term) ||
+        section.includes(term) ||
+        priority.includes(term) ||
+        location.includes(term)
+      );
+    });
+  }, [pendingOrders, searchTerm]);
+
+  // Calendar grouping helper
+  const calendarDays = useMemo(() => {
+    const year = calendarDate.getFullYear();
+    const month = calendarDate.getMonth();
+    const firstDayIndex = new Date(year, month, 1).getDay();
+    const totalDays = new Date(year, month + 1, 0).getDate();
+    const prevMonthDays = new Date(year, month, 0).getDate();
+
+    // Map scheduled tests by date string "YYYY-MM-DD"
+    const dateMap = new Map<string, RadiologyOrder[]>();
+    for (const ord of calendarOrders) {
+      if (ord.scheduledDateTime) {
+        const dStr = ord.scheduledDateTime.split(' ')[0];
+        if (!dateMap.has(dStr)) {
+          dateMap.set(dStr, []);
+        }
+        dateMap.get(dStr)!.push(ord);
+      }
+    }
+
+    const cells = [];
+
+    // Previous month filler days
+    for (let i = firstDayIndex - 1; i >= 0; i--) {
+      const dayNum = prevMonthDays - i;
+      cells.push({
+        dayNum,
+        isCurrentMonth: false,
+        dateStr: '',
+        orders: [],
+      });
+    }
+
+    // Current month days
+    const todayStr = new Date().toISOString().split('T')[0];
+    for (let day = 1; day <= totalDays; day++) {
+      const monthStr = String(month + 1).padStart(2, '0');
+      const dayStr = String(day).padStart(2, '0');
+      const dateStr = `${year}-${monthStr}-${dayStr}`;
+      cells.push({
+        dayNum: day,
+        isCurrentMonth: true,
+        isToday: dateStr === todayStr,
+        dateStr,
+        orders: dateMap.get(dateStr) || [],
+      });
+    }
+
+    // Next month filler days to complete grid (multiples of 7)
+    const remaining = 7 - (cells.length % 7);
+    if (remaining < 7) {
+      for (let i = 1; i <= remaining; i++) {
+        cells.push({
+          dayNum: i,
+          isCurrentMonth: false,
+          dateStr: '',
+          orders: [],
+        });
+      }
+    }
+
+    return cells;
+  }, [calendarDate, calendarOrders]);
+
+  // Handle clicking calendar event or day
+  const handleCalendarEventClick = (dateStr: string, orders: RadiologyOrder[]) => {
+    if (!orders || orders.length === 0) return;
+
+    // Group orders by modality and exam room
+    const breakdown: Record<string, Record<string, number>> = {};
+    for (const ord of orders) {
+      const mod = ord.categoryDisplay || 'Other';
+      const room = ord.supportingInfo || 'Default Room';
+      if (!breakdown[mod]) {
+        breakdown[mod] = {};
+      }
+      breakdown[mod][room] = (breakdown[mod][room] || 0) + 1;
+    }
+
+    let html = `<div style="text-align: left; font-size: 0.92rem;">`;
+    for (const [mod, rooms] of Object.entries(breakdown)) {
+      html += `<div style="margin-bottom: 0.75rem;"><strong style="color: #009384;">${mod}</strong><ul style="margin: 0.25rem 0 0 1.25rem; padding: 0;">`;
+      for (const [room, count] of Object.entries(rooms)) {
+        html += `<li><strong>${room}:</strong> ${count} scheduled</li>`;
+      }
+      html += `</ul></div>`;
+    }
+    html += `</div>`;
+
+    Swal.fire({
+      title: `Scheduled Tests (${dateStr})`,
+      html,
+      icon: 'info',
+      confirmButtonColor: '#0f62fe',
+      confirmButtonText: 'Close',
+    });
+  };
+
+  const monthNames = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December',
+  ];
+
+  return (
+    <div className={styles.bodyWrapper}>
+      {/* Main Unified Card: Heading inside the form container as required */}
+      <div className={styles.card}>
+        <div className={styles.cardHeader}>
+          <h2 className={styles.formHeading}>
+            {t('radiologyTestSchedulingHeading', 'Radiology Test Scheduling')}
+          </h2>
+        </div>
+
+        {/* Institute and Search Filter Box */}
+        <div className={styles.filterBox}>
+          <div className={styles.row}>
+            <div className={`${styles.col4} ${styles.formGroup}`}>
+              <label className={styles.label}>
+                <span>{t('institute', 'Institute')}</span>
+              </label>
+              <select
+                className={styles.formControl}
+                value={selectedInstitute}
+                onChange={(e) => setSelectedInstitute(e.target.value)}
+              >
+                <option value="all">{t('allInstitutes', '-- All Institutes --')}</option>
+                {institutes.map((inst) => (
+                  <option key={inst.uuid} value={inst.uuid}>
+                    {inst.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div className={`${styles.col8} ${styles.formGroup}`}>
+              <label className={styles.label}>
+                <span>{t('searchPendingTests', 'Search Pending Tests')}</span>
+              </label>
+              <input
+                type="text"
+                className={styles.formControl}
+                placeholder={t('searchPlaceholder', 'Type PHN, Test Name, Section, or Location...')}
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Pending Tests Table */}
+        <div className={styles.sectionHeader}>
+          <span>{t('pendingSchedulingRequests', 'Pending Scheduling Requests')}</span>
+          <span className={`${styles.badge} ${styles.badgeType}`} style={{ marginLeft: 'auto' }}>
+            {filteredOrders.length} {t('requests', 'Requests')}
+          </span>
+        </div>
+
+        <div className={styles.tableContainer}>
+          {loadingOrders ? (
+            <div style={{ padding: '2rem' }}>
+              <Loading description="Loading pending tests..." withOverlay={false} small />
+            </div>
+          ) : filteredOrders.length === 0 ? (
+            <div className={styles.emptyState}>
+              {t('noPendingOrders', 'No pending radiology test scheduling requests found.')}
+            </div>
+          ) : (
+            <table className={styles.table}>
+              <thead>
+                <tr>
+                  <th>#</th>
+                  <th>{t('institute', 'Institute')}</th>
+                  <th>{t('section', 'Section')}</th>
+                  <th>{t('phn', 'PHN')}</th>
+                  <th>{t('admittedDate', 'Admitted Date')}</th>
+                  <th>{t('orderedBy', 'Ordered By')}</th>
+                  <th>{t('orderedDatetime', 'Ordered Datetime')}</th>
+                  <th>{t('testName', 'Test Name')}</th>
+                  <th>{t('region', 'Region')}</th>
+                  <th>{t('examRoom', 'Exam Room')}</th>
+                  <th>{t('comment', 'Comment')}</th>
+                  <th>{t('priority', 'Priority')}</th>
+                  <th>{t('consultant', 'Consultant')}</th>
+                  <th style={{ textAlign: 'center' }}>{t('action', 'Action')}</th>
+                </tr>
+              </thead>
+              <tbody>
+                {filteredOrders.map((dto, idx) => {
+                  const isUrgent = dto.radiology.priority === 'Urgent';
+                  const isSelected = selectedOrder?.radiology.id === dto.radiology.id;
+                  const rowClass = `${isUrgent ? styles.urgentRow : ''} ${
+                    isSelected ? styles.selectedRow : ''
+                  }`.trim();
+
+                  return (
+                    <tr key={`${dto.type}-${dto.radiology.id}`} className={rowClass}>
+                      <td>{idx + 1}</td>
+                      <td>{dto.locationName || dto.radiology.location}</td>
+                      <td>
+                        <span className={`${styles.badge} ${styles.badgeType}`}>
+                          {dto.type}
+                        </span>
+                      </td>
+                      <td>
+                        <strong>{dto.radiology.patientPhn}</strong>
+                      </td>
+                      <td>
+                        {dto.radiology.occurrenceDateTime
+                          ? dto.radiology.occurrenceDateTime.split(' ')[0]
+                          : '-'}
+                      </td>
+                      <td>{dto.orderedByName || dto.radiology.requesterReference || '-'}</td>
+                      <td>{dto.radiology.occurrenceDateTime || '-'}</td>
+                      <td>
+                        <strong>{dto.radiology.codeDisplay || '-'}</strong>
+                      </td>
+                      <td>{dto.radiology.bodySiteText || '-'}</td>
+                      <td>
+                        {dto.radiology.supportingInfo === '--Select--'
+                          ? '-'
+                          : dto.radiology.supportingInfo || '-'}
+                      </td>
+                      <td>{dto.radiology.note || '-'}</td>
+                      <td>
+                        <span
+                          className={`${styles.badge} ${
+                            isUrgent ? styles.badgeUrgent : styles.badgeRoutine
+                          }`}
+                        >
+                          {dto.radiology.priority || 'Routine'}
+                        </span>
+                      </td>
+                      <td>
+                        {dto.radiology.requesterDisplay === '--Select--'
+                          ? '-'
+                          : dto.radiology.requesterDisplay || '-'}
+                      </td>
+                      <td style={{ textAlign: 'center' }}>
+                        <button
+                          type="button"
+                          className={styles.btnSelect}
+                          onClick={() => handleSelectRow(dto)}
+                        >
+                          {isSelected ? t('selected', 'Selected') : t('select', 'Select')}
+                        </button>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          )}
+        </div>
+
+        {/* Details and Scheduling Form */}
+        {selectedOrder && (
+          <div className={styles.detailsPanel}>
+            <div className={styles.row}>
+              {/* Patient Demographics */}
+              <div className={`${styles.col6} ${styles.formGroup}`}>
+                <div className={styles.sectionHeader}>
+                  <span>{t('patientDemographics', 'Patient Demographics')}</span>
+                  {selectedOrder.radiology.patientPhn && (
+                    <span style={{ fontSize: '0.85rem', color: '#6c757d', marginLeft: 'auto' }}>
+                      PHN: ({selectedOrder.radiology.patientPhn})
+                    </span>
+                  )}
+                </div>
+
+                {loadingPatient ? (
+                  <Loading description="Loading patient demographics..." withOverlay={false} small />
+                ) : (
+                  <div className={styles.row}>
+                    <div className={styles.col8}>
+                      <div className={styles.infoField}>
+                        <span className={styles.infoLabel}>{t('fullName', 'Full Name')}:</span>
+                        <span className={styles.infoValue}>
+                          {patientDetails?.fullName || '-'}
+                        </span>
+                      </div>
+                      <div className={styles.infoField}>
+                        <span className={styles.infoLabel}>{t('gender', 'Gender')}:</span>
+                        <span className={styles.infoValue}>{patientDetails?.gender || '-'}</span>
+                      </div>
+                      <div className={styles.infoField}>
+                        <span className={styles.infoLabel}>{t('nicNo', 'NIC No')}:</span>
+                        <span className={styles.infoValue}>{patientDetails?.nicNo || '-'}</span>
+                      </div>
+                      <div className={styles.infoField}>
+                        <span className={styles.infoLabel}>{t('guardianInfo', 'Guardian Info')}:</span>
+                        <span className={styles.infoValue}>
+                          {patientDetails?.guardianInfo || '-'}
+                        </span>
+                      </div>
+                      <div className={styles.infoField}>
+                        <span className={styles.infoLabel}>{t('address', 'Address')}:</span>
+                        <span className={styles.infoValue}>{patientDetails?.address || '-'}</span>
+                      </div>
+                      <div className={styles.infoField}>
+                        <span className={styles.infoLabel}>{t('age', 'Age')}:</span>
+                        <span className={styles.infoValue}>
+                          Y: {patientDetails?.years || 0} | M: {patientDetails?.months || 0} | D:{' '}
+                          {patientDetails?.days || 0}
+                        </span>
+                      </div>
+                      <div className={styles.infoField}>
+                        <span className={styles.infoLabel}>{t('dob', 'Date Of Birth')}:</span>
+                        <span className={styles.infoValue}>
+                          {patientDetails?.dateOfBirth || '-'}
+                        </span>
+                      </div>
+                      <div className={styles.infoField}>
+                        <span className={styles.infoLabel}>{t('telephone', 'Telephone')}:</span>
+                        <span className={styles.infoValue}>
+                          {[patientDetails?.telephoneHome, patientDetails?.telephoneMobile]
+                            .filter(Boolean)
+                            .join(', ') || '-'}
+                        </span>
+                      </div>
+                    </div>
+
+                    <div className={`${styles.col4} ${styles.avatarContainer}`}>
+                      <img
+                        className={styles.avatarImg}
+                        src={patientDetails?.profileImage || DEFAULT_AVATAR}
+                        alt="Patient"
+                        onError={(e) => {
+                          (e.currentTarget as HTMLImageElement).src = DEFAULT_AVATAR;
+                        }}
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {/* Investigation Details */}
+              <div className={`${styles.col6} ${styles.formGroup}`}>
+                <div className={styles.sectionHeader}>
+                  <span>{t('investigationDetails', 'Investigation Details')}</span>
+                </div>
+
+                <div className={styles.infoField}>
+                  <span className={styles.infoLabel}>{t('testName', 'Test Name')}:</span>
+                  <span className={styles.infoValue}>
+                    {selectedOrder.radiology.codeDisplay || '-'}
+                  </span>
+                </div>
+                <div className={styles.infoField}>
+                  <span className={styles.infoLabel}>{t('region', 'Region')}:</span>
+                  <span className={styles.infoValue}>
+                    {selectedOrder.radiology.bodySiteText || '-'}
+                  </span>
+                </div>
+                <div className={styles.infoField}>
+                  <span className={styles.infoLabel}>{t('localization', 'Localization')}:</span>
+                  <span className={styles.infoValue}>
+                    {selectedOrder.radiology.specimen || '-'}
+                  </span>
+                </div>
+                <div className={styles.infoField}>
+                  <span className={styles.infoLabel}>{t('position', 'Position')}:</span>
+                  <span className={styles.infoValue}>
+                    {selectedOrder.radiology.bodySiteDisplay || '-'}
+                  </span>
+                </div>
+                <div className={styles.infoField}>
+                  <span className={styles.infoLabel}>{t('comment', 'Comment')}:</span>
+                  <span className={styles.infoValue}>{selectedOrder.radiology.note || '-'}</span>
+                </div>
+                <div className={styles.infoField}>
+                  <span className={styles.infoLabel}>{t('priority', 'Priority')}:</span>
+                  <span
+                    className={`${styles.badge} ${
+                      selectedOrder.radiology.priority === 'Urgent'
+                        ? styles.badgeUrgent
+                        : styles.badgeRoutine
+                    }`}
+                  >
+                    {selectedOrder.radiology.priority || 'Routine'}
+                  </span>
+                </div>
+                <div className={styles.infoField}>
+                  <span className={styles.infoLabel}>{t('consultant', 'Consultant')}:</span>
+                  <span className={styles.infoValue}>
+                    {selectedOrder.radiology.requesterDisplay === '--Select--'
+                      ? '-'
+                      : selectedOrder.radiology.requesterDisplay || '-'}
+                  </span>
+                </div>
+                <div className={styles.infoField}>
+                  <span className={styles.infoLabel}>{t('orderedDateTime', 'Ordered Date & Time')}:</span>
+                  <span className={styles.infoValue}>
+                    {selectedOrder.radiology.occurrenceDateTime || '-'}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            {/* Scheduling Form Inputs */}
+            <div className={styles.row} style={{ marginTop: '1.25rem' }}>
+              <div className={`${styles.col6} ${styles.formGroup}`}>
+                <label className={styles.label}>
+                  <span>{t('scheduledDateTime', 'Scheduled Date Time')} *</span>
+                </label>
+                <input
+                  type="datetime-local"
+                  className={styles.formControl}
+                  value={scheduledDateTime}
+                  onChange={(e) => setScheduledDateTime(e.target.value)}
+                  required
+                />
+              </div>
+
+              <div className={`${styles.col6} ${styles.formGroup}`}>
+                <label className={styles.label}>
+                  <span>{t('remarks', 'Remarks')}</span>
+                </label>
+                <textarea
+                  className={styles.formControl}
+                  rows={2}
+                  placeholder={t('enterRemarks', 'Add scheduling remarks or instructions...')}
+                  value={remarks}
+                  onChange={(e) => setRemarks(e.target.value)}
+                />
+              </div>
+            </div>
+
+            {/* Action Buttons: Save button is prominent blue as requested */}
+            <div className={styles.buttonGroup}>
+              <button
+                type="button"
+                className={styles.btnPrimary}
+                onClick={handleSave}
+                disabled={isSaving}
+              >
+                {isSaving ? t('saving', 'Saving...') : t('saveSchedule', 'Save Schedule')}
+              </button>
+              <button
+                type="button"
+                className={styles.btnCancel}
+                onClick={handleClear}
+                disabled={isSaving}
+              >
+                {t('cancel', 'Cancel')}
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Calendar Overview Section */}
+        <div style={{ marginTop: '2.5rem' }}>
+          <div className={styles.sectionHeader}>
+            <span>{t('scheduledCalendarOverview', 'Scheduled Calendar Overview')}</span>
+          </div>
+
+          <div className={styles.row} style={{ marginBottom: '1rem' }}>
+            <div className={`${styles.col4} ${styles.formGroup}`}>
+              <label className={styles.label}>
+                <span>{t('modality', 'Modality')}</span>
+              </label>
+              <select
+                className={styles.formControl}
+                value={selectedModality}
+                onChange={(e) => setSelectedModality(e.target.value)}
+              >
+                <option value="all">{t('allModalities', '-- All Modalities --')}</option>
+                <option value="Xray">Xray</option>
+                <option value="CT">CT</option>
+                <option value="MRI">MRI</option>
+              </select>
+            </div>
+
+            <div className={`${styles.col4} ${styles.formGroup}`}>
+              <label className={styles.label}>
+                <span>{t('examRoom', 'Exam Room')}</span>
+              </label>
+              <select
+                className={styles.formControl}
+                value={selectedExamRoom}
+                onChange={(e) => setSelectedExamRoom(e.target.value)}
+                disabled={selectedModality === 'all'}
+              >
+                <option value="all">{t('allExamRooms', '-- All Exam Rooms --')}</option>
+                {examRooms.map((room, i) => (
+                  <option key={`${room.name}-${i}`} value={room.name}>
+                    {room.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+
+          {/* Interactive Calendar Grid */}
+          <div className={styles.calendarWrapper}>
+            <div className={styles.calendarNav}>
+              <button
+                type="button"
+                className={styles.calendarNavBtn}
+                onClick={() =>
+                  setCalendarDate(
+                    new Date(calendarDate.getFullYear(), calendarDate.getMonth() - 1, 1),
+                  )
+                }
+              >
+                &larr; {t('previous', 'Previous')}
+              </button>
+              <span className={styles.calendarMonthTitle}>
+                {monthNames[calendarDate.getMonth()]} {calendarDate.getFullYear()}
+              </span>
+              <div style={{ display: 'flex', gap: '0.5rem' }}>
+                <button
+                  type="button"
+                  className={styles.calendarNavBtn}
+                  onClick={() => setCalendarDate(new Date())}
+                >
+                  {t('today', 'Today')}
+                </button>
+                <button
+                  type="button"
+                  className={styles.calendarNavBtn}
+                  onClick={() =>
+                    setCalendarDate(
+                      new Date(calendarDate.getFullYear(), calendarDate.getMonth() + 1, 1),
+                    )
+                  }
+                >
+                  {t('next', 'Next')} &rarr;
+                </button>
+              </div>
+            </div>
+
+            {loadingCalendar ? (
+              <div style={{ padding: '2rem' }}>
+                <Loading description="Loading calendar appointments..." withOverlay={false} small />
+              </div>
+            ) : (
+              <div className={styles.calendarGrid}>
+                {['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((d) => (
+                  <div key={d} className={styles.calendarDayHeader}>
+                    {d}
+                  </div>
+                ))}
+
+                {calendarDays.map((cell, idx) => {
+                  const cellClass = `${styles.calendarCell} ${
+                    !cell.isCurrentMonth ? styles.calendarCellInactive : ''
+                  }`.trim();
+
+                  // Group cell orders by category
+                  const categoryCounts: Record<string, number> = {};
+                  for (const ord of cell.orders) {
+                    const cat = ord.categoryDisplay || 'Other';
+                    categoryCounts[cat] = (categoryCounts[cat] || 0) + 1;
+                  }
+
+                  return (
+                    <div
+                      key={idx}
+                      className={cellClass}
+                      onClick={() =>
+                        cell.orders.length > 0 &&
+                        handleCalendarEventClick(cell.dateStr, cell.orders)
+                      }
+                      style={{ cursor: cell.orders.length > 0 ? 'pointer' : 'default' }}
+                    >
+                      <span
+                        className={`${styles.calendarDayNumber} ${
+                          cell.isToday ? styles.calendarDayToday : ''
+                        }`}
+                      >
+                        {cell.dayNum}
+                      </span>
+
+                      {Object.entries(categoryCounts).map(([cat, count]) => {
+                        let badgeCls = styles.badgeOther;
+                        if (cat === 'Xray') badgeCls = styles.badgeXray;
+                        else if (cat === 'CT') badgeCls = styles.badgeCT;
+                        else if (cat === 'MRI') badgeCls = styles.badgeMRI;
+
+                        return (
+                          <span
+                            key={cat}
+                            className={`${styles.calendarBadge} ${badgeCls}`}
+                            title={`${cat}: ${count} scheduled. Click to see details.`}
+                          >
+                            {cat}: {count}
+                          </span>
+                        );
+                      })}
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RadiologyTestScheduling;