real-time graph view

vitallink/frontend/dashboard/src/PatientDetailModal.jsx

@@ -10,12 +10,26 @@ const PatientDetailModal = ({ patient, onClose }) => {
   const [loading, setLoading] = useState(true);
   const [selectedMetric, setSelectedMetric] = useState('all');
 
-  useEffect(() => {
+useEffect(() => {
+    // 1. Fetch immediately on open
     fetchPatientHistory();
+
+    // 2. Set up polling interval (every 2 seconds)
+    const intervalId = setInterval(() => {
+      // We pass 'true' to indicate this is a background update 
+      // (so we don't show the loading spinner again)
+      fetchPatientHistory(true); 
+    }, 2000);
+
+    // 3. Cleanup on close
+    return () => clearInterval(intervalId);
   }, [patient.patient_id]);
 
-  const fetchPatientHistory = async () => {
+  const fetchPatientHistory = async (isBackgroundUpdate = false) => {
     try {
+      // Only show loading spinner on the FIRST load, not subsequent updates
+      if (!isBackgroundUpdate) setLoading(true);
+      
       const response = await fetch(`${API_BASE}/api/patients/${patient.patient_id}/vitals-history?limit=200`);
       const data = await response.json();