diff --git a/client/src/components/Patient/AppointmentDetails/prescription/Medications.jsx b/client/src/components/Patient/AppointmentDetails/prescription/Medications.jsx
index 6b405c1..44532a3 100644
--- a/client/src/components/Patient/AppointmentDetails/prescription/Medications.jsx
+++ b/client/src/components/Patient/AppointmentDetails/prescription/Medications.jsx
@@ -31,6 +31,18 @@ const Medications = ({ medications }) => {
{med.instructions || 'As directed'}
|
+
+ {med.quickmed === true && (
+
+ See in QuickMed
+
+ )}
+ |
))}
diff --git a/client/src/pages/doctor/AppointmentDetails.jsx b/client/src/pages/doctor/AppointmentDetails.jsx
index cdc0ea4..7420856 100644
--- a/client/src/pages/doctor/AppointmentDetails.jsx
+++ b/client/src/pages/doctor/AppointmentDetails.jsx
@@ -13,7 +13,7 @@ import {
VideoCameraIcon,
XMarkIcon,
} from '@heroicons/react/24/outline';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback, useRef } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import {
getAppointmentDetails,
@@ -25,11 +25,13 @@ import {
getAppointmentPrescription,
updatePrescription,
} from '../../service/prescriptionApiSevice';
+import { getMedicineSuggestions } from '../../service/medicineApiService';
const AppointmentDetails = () => {
const { appointmentId } = useParams();
const navigate = useNavigate();
-
+ const [medicineSuggestions, setMedicineSuggestions] = useState([]);
+ const [showSuggestions, setShowSuggestions] = useState(false);
const [appointment, setAppointment] = useState(null);
const [patientInfo, setPatientInfo] = useState(null);
const [prescription, setPrescription] = useState(null);
@@ -45,13 +47,43 @@ const AppointmentDetails = () => {
followUpDate: '',
});
const [savingPrescription, setSavingPrescription] = useState(false);
-
+ const useDebounce = (callback, delay) => {
+ const timeoutRef = useRef(null);
+
+ return useCallback(
+ (...args) => {
+ if (timeoutRef.current) {
+ clearTimeout(timeoutRef.current);
+ }
+ timeoutRef.current = setTimeout(() => callback(...args), delay);
+ },
+ [callback, delay]
+ );
+ };
useEffect(() => {
if (appointmentId) {
fetchAppointmentData();
}
}, [appointmentId]);
-
+ const fetchSuggestions = useDebounce(async (query) => {
+ if (query.length >= 2) {
+ try {
+ const suggestions = await getMedicineSuggestions(query);
+ setMedicineSuggestions(suggestions.suggestions);
+ setShowSuggestions(true);
+ } catch (err) {
+ console.error('Suggestion fetch failed', err);
+ }
+ } else {
+ setShowSuggestions(false);
+ setMedicineSuggestions([]);
+ }
+ }, 300);
+ // Update medicine name input onChange
+ const handleMedicineNameChange = (index, value) => {
+ updateMedication(index, 'name', value);
+ fetchSuggestions(value);
+ };
const fetchAppointmentData = async () => {
try {
setLoading(true);
@@ -639,10 +671,45 @@ const AppointmentDetails = () => {
type="text"
placeholder="Medicine name"
value={medication.name}
- onChange={(e) => updateMedication(index, 'name', e.target.value)}
+ onChange={(e) => handleMedicineNameChange(index, e.target.value)}
className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500"
- required
/>
+ {showSuggestions && medicineSuggestions.length > 0 && (
+
+ {medicineSuggestions.map((suggestion, sugIndex) => (
+
+ ))}
+
+ )}