@sasindi/radiologytestscheduling 0.0.0-stage → 1.0.2

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

@@ -0,0 +1,711 @@
+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,
+  fetchPatientBasicInfo,
+  fetchLocationDisplay,
+  fetchUserDisplay,
+  fetchExamRooms,
+  saveScheduling,
+  SessionInfo,
+} from './radiology-test-scheduling.resource';
+import {
+  SchedulingOrderDTO,
+  PatientDemographics,
+  InstituteOption,
+  ExamRoom,
+} 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 Form inputs: Scheduled Date Time, Remarks, Modality, Exam Room
+  const [scheduledDateTime, setScheduledDateTime] = useState<string>('');
+  const [remarks, setRemarks] = useState<string>('');
+  const [selectedModality, setSelectedModality] = useState<string>('all');
+  const [examRooms, setExamRooms] = useState<ExamRoom[]>([]);
+  const [selectedExamRoom, setSelectedExamRoom] = useState<string>('all');
+  const [isSaving, setIsSaving] = 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 location, clinician, and patient basic demographics
+      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)
+            : '';
+          const patientInfo = dto.radiology.patientPhn
+            ? await fetchPatientBasicInfo(dto.radiology.patientPhn)
+            : { name: '', gender: '', age: '' };
+
+          return {
+            ...dto,
+            locationName: loc,
+            orderedByName: ordBy,
+            patientName: patientInfo.name,
+            patientGender: patientInfo.gender,
+            patientAge: patientInfo.age,
+          };
+        }),
+      );
+      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.',
+        confirmButtonColor: '#da1e28',
+      });
+    } finally {
+      setLoadingOrders(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadPendingOrders(selectedInstitute);
+  }, [selectedInstitute, loadPendingOrders]);
+
+  // Load Exam Rooms when modality changes
+  useEffect(() => {
+    if (selectedModality === 'all' || !selectedModality) {
+      setExamRooms([]);
+      setSelectedExamRoom('all');
+    } else {
+      (async () => {
+        const rooms = await fetchExamRooms(selectedModality);
+        setExamRooms(rooms);
+      })();
+    }
+  }, [selectedModality]);
+
+  // Handle row selection
+  const handleSelectRow = async (dto: SchedulingOrderDTO) => {
+    setSelectedOrder(dto);
+    setScheduledDateTime('');
+    setRemarks('');
+    setLoadingPatient(true);
+
+    // Auto-populate Modality and Exam Room from selected test order if available
+    const modality = dto.radiology.categoryDisplay || 'all';
+    setSelectedModality(modality);
+
+    if (modality && modality !== 'all') {
+      try {
+        const rooms = await fetchExamRooms(modality);
+        setExamRooms(rooms);
+        const roomName = dto.radiology.supportingInfo;
+        if (roomName && roomName !== '--Select--') {
+          setSelectedExamRoom(roomName);
+        } else {
+          setSelectedExamRoom('all');
+        }
+      } catch (e) {
+        console.warn('Failed to load exam rooms on select', e);
+      }
+    } else {
+      setSelectedExamRoom('all');
+      setExamRooms([]);
+    }
+
+    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('');
+    setSelectedModality('all');
+    setSelectedExamRoom('all');
+    setExamRooms([]);
+  };
+
+  // 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', ' ') + (scheduledDateTime.length === 16 ? ':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);
+    } 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 name = dto.patientName?.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) ||
+        name.includes(term) ||
+        test.includes(term) ||
+        section.includes(term) ||
+        priority.includes(term) ||
+        location.includes(term)
+      );
+    });
+  }, [pendingOrders, searchTerm]);
+
+  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>
+
+        <div className={styles.serviceBox}>
+          {/* Top Filter Row: Institute Dropdown & Search Bar */}
+          <div className={styles.filterRow}>
+            <div className={styles.instituteSelectGroup}>
+              <h4 className={styles.instituteLabel}>{t('institute', 'Institute')}</h4>
+              <select
+                id="drpInstitute"
+                className={styles.formControl}
+                style={{ width: '260px' }}
+                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.searchGroup}>
+              <input
+                type="text"
+                className={styles.formControl}
+                placeholder={t('searchPlaceholder', 'Search by PHN, Patient Name, Test Name, Section, or Location...')}
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+            </div>
+          </div>
+
+          {/* Table Container: Exact 17 columns as in team's module */}
+          <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 id="tblRadiologyTestScheduling" className={styles.table}>
+                <thead>
+                  <tr>
+                    <th>#</th>
+                    <th>{t('institute', 'Institute')}</th>
+                    <th>{t('section', 'Section')}</th>
+                    <th>{t('phn', 'PHN')}</th>
+                    <th>{t('name', 'Name')}</th>
+                    <th>{t('gender', 'Gender')}</th>
+                    <th>{t('age', 'Age')}</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 id="tbodyRadTestsScheduling">
+                  {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.patientName || '-'}</td>
+                        <td>{dto.patientGender || '-'}</td>
+                        <td>{dto.patientAge !== undefined && dto.patientAge !== '' ? dto.patientAge : '-'}</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} ${isSelected ? styles.btnSelected : ''}`}
+                            onClick={() => handleSelectRow(dto)}
+                          >
+                            {isSelected ? t('selected', 'Selected') : t('select', 'Select')}
+                          </button>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            )}
+          </div>
+
+          {/* Demographics, Investigation Details & Scheduling Form Section */}
+          <div className={styles.demographicsSection}>
+            <div className={styles.row}>
+              {/* Patient Info (col10) */}
+              <div className={`${styles.col10} ${styles.formGroup}`}>
+                {loadingPatient ? (
+                  <div style={{ padding: '1rem' }}>
+                    <Loading description="Loading patient details..." withOverlay={false} small />
+                  </div>
+                ) : (
+                  <div className={styles.row}>
+                    {/* Left Column */}
+                    <div className={styles.col6}>
+                      <div className={styles.fieldItem}>
+                        <span className={styles.fieldIcon}>👉</span>
+                        <span className={styles.fieldTitle}>{t('fullName', 'Full Name')}:</span>
+                        <span id="txtFullName" className={styles.fieldVal}>
+                          {patientDetails?.fullName || (selectedOrder?.patientName || '-')}
+                        </span>
+                      </div>
+                      <div className={styles.fieldItem}>
+                        <span className={styles.fieldIcon}>👉</span>
+                        <span className={styles.fieldTitle}>{t('gender', 'Gender')}:</span>
+                        <span id="txtGender" className={styles.fieldVal}>
+                          {patientDetails?.gender || (selectedOrder?.patientGender || '-')}
+                        </span>
+                      </div>
+                      <div className={styles.fieldItem}>
+                        <span className={styles.fieldIcon}>👉</span>
+                        <span className={styles.fieldTitle}>{t('nicNo', 'NIC No')}:</span>
+                        <span id="txtNICNo" className={styles.fieldVal}>{patientDetails?.nicNo || '-'}</span>
+                      </div>
+                      <div className={styles.fieldItem}>
+                        <span className={styles.fieldIcon}>👉</span>
+                        <span className={styles.fieldTitle}>{t('guardianInfo', 'Guardian Info')}:</span>
+                        <span id="txtGurdianInfo" className={styles.fieldVal}>{patientDetails?.guardianInfo || '-'}</span>
+                      </div>
+                    </div>
+
+                    {/* Right Column */}
+                    <div className={styles.col6}>
+                      <div className={styles.fieldItem}>
+                        <span className={styles.fieldIcon}>👉</span>
+                        <span className={styles.fieldTitle}>{t('address', 'Address')}:</span>
+                        <span id="txtAddress" className={styles.fieldVal}>{patientDetails?.address || '-'}</span>
+                      </div>
+                      <div className={styles.fieldItem}>
+                        <span className={styles.fieldIcon}>👉</span>
+                        <span className={styles.fieldTitle}>{t('age', 'Age')}:</span>
+                        <span className={styles.fieldVal}>
+                          Y: <span id="txtYears">{patientDetails?.years !== undefined && patientDetails?.years !== '' ? patientDetails.years : '-'}</span> |{' '}
+                          M: <span id="txtMonths">{patientDetails?.months !== undefined && patientDetails?.months !== '' ? patientDetails.months : '-'}</span> |{' '}
+                          D: <span id="txtDays">{patientDetails?.days !== undefined && patientDetails?.days !== '' ? patientDetails.days : '-'}</span>
+                        </span>
+                      </div>
+                      <div className={styles.fieldItem}>
+                        <span className={styles.fieldIcon}>👉</span>
+                        <span className={styles.fieldTitle}>{t('dob', 'Date Of Birth')}:</span>
+                        <span id="txtDateOfBirth" className={styles.fieldVal}>{patientDetails?.dateOfBirth || '-'}</span>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {/* Patient Image (col2) */}
+              <div className={`${styles.col2} ${styles.uploadImgWrapper}`}>
+                <img
+                  id="file_upload"
+                  className={styles.uploadImg}
+                  src={patientDetails?.profileImage || DEFAULT_AVATAR}
+                  alt="Patient"
+                  onError={(e) => {
+                    (e.currentTarget as HTMLImageElement).src = DEFAULT_AVATAR;
+                  }}
+                />
+              </div>
+
+              {/* Investigation Details Row (col12 with border-bottom) */}
+              <div className={`${styles.col12} ${styles.investigationRow}`}>
+                <div className={styles.row}>
+                  <div className={styles.col3}>
+                    <div className={styles.fieldItem}>
+                      <span className={styles.fieldIcon}>👉</span>
+                      <span className={styles.fieldTitle}>{t('testName', 'Test Name')}:</span>
+                      <span id="lblTestName" className={styles.fieldVal}>
+                        {selectedOrder?.radiology.codeDisplay || '-'}
+                      </span>
+                    </div>
+                  </div>
+                  <div className={styles.col3}>
+                    <div className={styles.fieldItem}>
+                      <span className={styles.fieldIcon}>👉</span>
+                      <span className={styles.fieldTitle}>{t('region', 'Region')}:</span>
+                      <span id="lblRegion" className={styles.fieldVal}>
+                        {selectedOrder?.radiology.bodySiteText || '-'}
+                      </span>
+                    </div>
+                  </div>
+                  <div className={styles.col3}>
+                    <div className={styles.fieldItem}>
+                      <span className={styles.fieldIcon}>👉</span>
+                      <span className={styles.fieldTitle}>{t('localization', 'Localization')}:</span>
+                      <span id="lblLocalization" className={styles.fieldVal}>
+                        {selectedOrder?.radiology.specimen || '-'}
+                      </span>
+                    </div>
+                  </div>
+                  <div className={styles.col3}>
+                    <div className={styles.fieldItem}>
+                      <span className={styles.fieldIcon}>👉</span>
+                      <span className={styles.fieldTitle}>{t('position', 'Position')}:</span>
+                      <span id="lblPosition" className={styles.fieldVal}>
+                        {selectedOrder?.radiology.bodySiteDisplay || '-'}
+                      </span>
+                    </div>
+                  </div>
+
+                  <div className={styles.col3}>
+                    <div className={styles.fieldItem}>
+                      <span className={styles.fieldIcon}>👉</span>
+                      <span className={styles.fieldTitle}>{t('comment', 'Comment')}:</span>
+                      <span id="lblComment" className={styles.fieldVal}>
+                        {selectedOrder?.radiology.note || '-'}
+                      </span>
+                    </div>
+                  </div>
+                  <div className={styles.col3}>
+                    <div className={styles.fieldItem}>
+                      <span className={styles.fieldIcon}>👉</span>
+                      <span className={styles.fieldTitle}>{t('priority', 'Priority')}:</span>
+                      <span id="lblPriority" className={styles.fieldVal}>
+                        {selectedOrder?.radiology.priority || '-'}
+                      </span>
+                    </div>
+                  </div>
+                  <div className={styles.col3}>
+                    <div className={styles.fieldItem}>
+                      <span className={styles.fieldIcon}>👉</span>
+                      <span className={styles.fieldTitle}>{t('consultant', 'Consultant')}:</span>
+                      <span id="lblConsultant" className={styles.fieldVal}>
+                        {selectedOrder?.radiology.requesterDisplay === '--Select--'
+                          ? '-'
+                          : selectedOrder?.radiology.requesterDisplay || '-'}
+                      </span>
+                    </div>
+                  </div>
+                  <div className={styles.col3}>
+                    <div className={styles.fieldItem}>
+                      <span className={styles.fieldIcon}>👉</span>
+                      <span className={styles.fieldTitle}>{t('orderedDateTime', 'Ordered Date & Time')}:</span>
+                      <span id="lblOdrDateTime" className={styles.fieldVal}>
+                        {selectedOrder?.radiology.occurrenceDateTime || '-'}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Scheduling Form Section: Scheduled Date Time, Remarks, Modality, Exam Room */}
+              <div className={`${styles.col12} ${styles.schedulingFormArea}`}>
+                <div className={styles.row}>
+                  {/* Left Column: Scheduled Date Time & Remarks */}
+                  <div className={styles.col6}>
+                    <div className={`${styles.row} ${styles.formGroup}`}>
+                      <div className={styles.col4}>
+                        <label className={styles.label}>
+                          {t('scheduledDateTime', 'Scheduled Date Time')}
+                        </label>
+                      </div>
+                      <div className={styles.col8}>
+                        <input
+                          id="txtScheduledDateTime"
+                          type="datetime-local"
+                          className={styles.formControl}
+                          value={scheduledDateTime}
+                          onChange={(e) => setScheduledDateTime(e.target.value)}
+                        />
+                      </div>
+                    </div>
+
+                    <div className={`${styles.row} ${styles.formGroup}`}>
+                      <div className={styles.col4}>
+                        <label className={styles.label}>
+                          {t('remarks', 'Remarks')}
+                        </label>
+                      </div>
+                      <div className={styles.col8}>
+                        <textarea
+                          id="txtRemarks"
+                          className={styles.formControl}
+                          rows={2}
+                          placeholder={t('enterRemarks', 'Remarks...')}
+                          value={remarks}
+                          onChange={(e) => setRemarks(e.target.value)}
+                        />
+                      </div>
+                    </div>
+
+                    {/* Action Buttons: Big blue Save button + Cancel */}
+                    <div className={styles.buttonGroup}>
+                      <button
+                        id="btnSave"
+                        type="button"
+                        className={styles.btnPrimary}
+                        onClick={handleSave}
+                        disabled={isSaving}
+                      >
+                        {isSaving ? t('saving', 'Saving...') : t('save', 'Save')}
+                      </button>
+                      <button
+                        id="btnClear"
+                        type="button"
+                        className={styles.btnCancel}
+                        onClick={handleClear}
+                        disabled={isSaving}
+                      >
+                        {t('cancel', 'Cancel')}
+                      </button>
+                    </div>
+                  </div>
+
+                  {/* Right Column: Modality & Exam Room */}
+                  <div className={styles.col6}>
+                    <div className={`${styles.row} ${styles.formGroup}`}>
+                      <div className={styles.col4}>
+                        <label className={styles.label}>
+                          {t('modality', 'Modality')}
+                        </label>
+                      </div>
+                      <div className={styles.col8}>
+                        <select
+                          id="drpSelectModality"
+                          className={styles.formControl}
+                          value={selectedModality}
+                          onChange={(e) => setSelectedModality(e.target.value)}
+                        >
+                          <option value="all">--Select--</option>
+                          <option value="Xray">Xray</option>
+                          <option value="CT">CT</option>
+                          <option value="MRI">MRI</option>
+                        </select>
+                      </div>
+                    </div>
+
+                    <div className={`${styles.row} ${styles.formGroup}`}>
+                      <div className={styles.col4}>
+                        <label className={styles.label}>
+                          {t('examRoom', 'Exam Room')}
+                        </label>
+                      </div>
+                      <div className={styles.col8}>
+                        <select
+                          id="drpSelectExamRoom"
+                          className={styles.formControl}
+                          value={selectedExamRoom}
+                          onChange={(e) => setSelectedExamRoom(e.target.value)}
+                          disabled={selectedModality === 'all'}
+                        >
+                          <option value="all">--Select--</option>
+                          {examRooms.map((room, i) => (
+                            <option key={`${room.name}-${i}`} value={room.name}>
+                              {room.name}
+                            </option>
+                          ))}
+                        </select>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default RadiologyTestScheduling;