fix

client/src/components/center-calendar/CenterCalendar.js

@@ -557,6 +557,36 @@ const EventsCalendar = () => {
 		}
 	}, [events, currentRangeStart, currentRangeEnd]);
 
+	// Fallback close handler: ensure ScheduleX modal can always be dismissed via X button.
+	useEffect(() => {
+		const onDocumentClickCapture = (event) => {
+			const target = event.target;
+			if (!(target instanceof HTMLElement)) return;
+			if (!target.closest('.sx__event-modal')) return;
+			const closeControl = target.closest('button,[role="button"]');
+			if (!closeControl) return;
+			const closeAriaLabel = `${closeControl.getAttribute('aria-label') || ''}`.toLowerCase();
+			const closeText = `${closeControl.textContent || ''}`.trim().toLowerCase();
+			const isCloseControl = closeAriaLabel.includes('close') || closeText === '\u00d7' || closeText === 'x' || closeText === '\u2715';
+			if (!isCloseControl) return;
+			event.preventDefault();
+			event.stopPropagation();
+			eventModalService?.close?.();
+			try {
+				calendar?.config?.plugins?.eventModal?.close();
+			} catch (_) {
+				// no-op fallback
+			}
+			setTimeout(() => {
+				document.querySelectorAll('.sx__event-modal').forEach(el => el.remove());
+			}, 0);
+		};
+		document.addEventListener('click', onDocumentClickCapture, true);
+		return () => {
+			document.removeEventListener('click', onDocumentClickCapture, true);
+		};
+	}, [calendar, eventModalService]);
+
 	// Sync list column height with calendar column height
 	useEffect(() => {
 		const updateListHeight = () => {
@@ -901,6 +931,8 @@ const EventsCalendar = () => {
 		setTargetedEventType(eventTypeMap[value]);
 		setCurrentTab(value);
 		currentTabRef.current = value;
+		// Always hide deleted events by default when switching tabs.
+		setShowDeletedItems(false);
 		setSelectedColorFilters([]);
 		// Dismiss any open calendar event tile popup via plugin API
 		try {

client/src/components/customers/UpdateCustomer.js

@@ -122,6 +122,10 @@ const UpdateCustomer = () => {
   const [pharmacy, setPharmacy] = useState('');
   const [pharmacyId, setPharmacyId] = useState('');
   const [providers, setProviders] = useState([]);
+  const pcpProviders = providers.filter((provider) => {
+    return `${provider?.specialty || ''}`.trim().toLowerCase() === 'family medicine (pcp)';
+  });
+
   const [pharmacies, setPharmacies] = useState([]);
   
   // General Conditions
@@ -1518,7 +1522,7 @@ const UpdateCustomer = () => {
                   <Select
                     value={primaryCarePhysician}
                     onChange={onPrimaryCarePhysicianChange}
-                    options={[{value: '', label: ''}, ...providers.map(provider => ({
+                    options={[{value: '', label: ''}, ...pcpProviders.map(provider => ({
                       value: provider?.id || '',
                       label: provider?.name || '',
                     }))]}

client/src/components/events/EventsCalendar.js

@@ -167,6 +167,8 @@ const EventsCalendar = () => {
 		EventsService.getTimeData().then(data => {
 			setTimeData(data.data);
 		});
+		// Hide deleted appointments by default on page load.
+		setSelectedColorFilters([]);
   }, []);
 
 	useEffect(() => {
@@ -239,6 +241,36 @@ const EventsCalendar = () => {
 		}
 	}, [events, currentRangeStart, currentRangeEnd]);
 
+	// Fallback close handler: ensure ScheduleX modal can always be dismissed via X button.
+	useEffect(() => {
+		const onDocumentClickCapture = (event) => {
+			const target = event.target;
+			if (!(target instanceof HTMLElement)) return;
+			if (!target.closest('.sx__event-modal')) return;
+			const closeControl = target.closest('button,[role="button"]');
+			if (!closeControl) return;
+			const closeAriaLabel = `${closeControl.getAttribute('aria-label') || ''}`.toLowerCase();
+			const closeText = `${closeControl.textContent || ''}`.trim().toLowerCase();
+			const isCloseControl = closeAriaLabel.includes('close') || closeText === '\u00d7' || closeText === 'x' || closeText === '\u2715';
+			if (!isCloseControl) return;
+			event.preventDefault();
+			event.stopPropagation();
+			eventModalService?.close?.();
+			try {
+				calendar?.config?.plugins?.eventModal?.close();
+			} catch (_) {
+				// no-op fallback
+			}
+			setTimeout(() => {
+				document.querySelectorAll('.sx__event-modal').forEach(el => el.remove());
+			}, 0);
+		};
+		document.addEventListener('click', onDocumentClickCapture, true);
+		return () => {
+			document.removeEventListener('click', onDocumentClickCapture, true);
+		};
+	}, [calendar, eventModalService]);
+
 	// Sync list column height with calendar column height
 	useEffect(() => {
 		const updateListHeight = () => {

client/src/components/events/EventsList.js

@@ -460,19 +460,13 @@ const EventsList = () => {
             events && events.filter(event => event.status === statusParam).map((medicalEvent, index) => <tr key={medicalEvent.id}>
               <td className="td-checkbox"><input type="checkbox" checked={selectedItems.includes(medicalEvent.id)} onClick={()=>toggleItem(medicalEvent?.id)}/></td>
               <td className="td-index">{index + 1}</td>
-              {columns.find(col => col.key === 'customer')?.show && <td>{`${medicalEvent?.customer || ''}${medicalEvent?.chinese_name ? ` (${medicalEvent.chinese_name})` : ''}`}</td>}
+              {columns.filter(col => col.show).map((column) => (
-              {columns.find(col => col.key === 'member_type')?.show && <td>{medicalEvent?.member_type}</td>}
+                <td key={column.key}>
-              {columns.find(col => col.key === 'translation')?.show && <td>{medicalEvent?.translation}</td>}
+                  {column.key === 'customer'
-              {columns.find(col => col.key === 'transMethod')?.show && <td>{medicalEvent?.transMethod}</td>}
+                    ? `${medicalEvent?.customer || ''}${medicalEvent?.chinese_name ? ` (${medicalEvent.chinese_name})` : ''}`
-              {columns.find(col => col.key === 'transportation')?.show && <td>{medicalEvent?.transportation}</td>}
+                    : (medicalEvent?.[column.key] || '')}
-              {columns.find(col => col.key === 'startTime')?.show && <td>{medicalEvent?.startTime}</td>}
+                </td>
-              {columns.find(col => col.key === 'eyes_on')?.show && <td>{medicalEvent?.eyes_on}</td>}
+              ))}
-              {columns.find(col => col.key === 'newPatient')?.show && <td>{medicalEvent?.newPatient}</td>}
-              {columns.find(col => col.key === 'fasting')?.show && <td>{medicalEvent?.fasting}</td>}
-              {columns.find(col => col.key === 'needId')?.show && <td>{medicalEvent?.needId}</td>}
-              {columns.find(col => col.key === 'doctor')?.show && <td>{medicalEvent?.doctor}</td>}
-              {columns.find(col => col.key === 'phone')?.show && <td>{medicalEvent?.phone}</td>}
-              {columns.find(col => col.key === 'address')?.show && <td>{medicalEvent?.address}</td>}
             </tr>)
           }
         </tbody>

client/src/components/events/UpdateEvent.js

@@ -1,18 +1,16 @@
 import React, {useState, useEffect} from "react";
 // import { useDispatch } from "react-redux";
-import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 // import { customerSlice } from "./../../store";
 import { AuthService, CustomerService, EventsService, ResourceService } from "../../services";
 import Select from 'react-select';
 import { Button, Modal } from "react-bootstrap";
 import DatePicker from "react-datepicker";
-import { Spinner, Breadcrumb, BreadcrumbItem, Tabs, Tab } from "react-bootstrap";
+import { Spinner, Breadcrumb, BreadcrumbItem } from "react-bootstrap";
 
 const UpdateEvent = () => {
   const navigate = useNavigate();
   const urlParams = useParams();
-  const [searchParams] = useSearchParams();
-  const [activeTab, setActiveTab] = useState(searchParams.get('tab') || 'eventInfo');
   const [currentEvent, setCurrentEvent] =  useState(undefined);
 	const [medicalResource, setMedicalResource] = useState(undefined);
   const [currentResource, setCurrentResource] = useState(undefined);
@@ -308,8 +306,8 @@ const UpdateEvent = () => {
 
       <div className="app-main-content-list-container form-page">
 				<div className="app-main-content-list-func-container">
-					<Tabs activeKey={activeTab} onSelect={(k) => setActiveTab(k)} id="event-tab">
+					<div id="event-tab">
-						{ !hideCreateFields && <Tab eventKey="eventClientInfo" title="Appointment Customer And Time Information">
+						{ !hideCreateFields && <div className="mb-4">
               <div className="multi-columns-container">
                 <div className="column-container">
                   <div className="column-card">
@@ -419,8 +417,8 @@ const UpdateEvent = () => {
                   </div>
                 </div>
               </div>
-            </Tab>}
+            </div>}
-            <Tab eventKey="eventInfo" title="Medical Appointment Information">
+            <div>
               <div className="multi-columns-container">
                 <div className="column-container">
                   <div className="column-card">
@@ -581,8 +579,8 @@ const UpdateEvent = () => {
                 </div>
                   
               </div>
-            </Tab>
+            </div>
-          </Tabs>
+          </div>
         </div>
       </div>
       <Modal show={showResourceModal} fullscreen={true} onHide={() => setShowResourceModal(false)}>