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) => ( + +
QuickMed ✓
+ + ))} +
+ )}