update all page to refresh immidiately without clicking sync button or refreshing the whole page

components/EefDashboardPage.tsx

@@ -166,24 +166,37 @@ const SupportingMetricChart: React.FC<{
 );
 
 const EefDashboardPage: React.FC<{ onSettings: () => void }> = ({ onSettings }) => {
-  const { selectedCycle, selectedKandang } = useFarm();
+  const { selectedCycle, selectedKandang, updateCycle } = useFarm();
   const [rows, setRows] = useState<KPI[]>([]);
   const [loading, setLoading] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [lastUpdated, setLastUpdated] = useState<Date | null>(null);
 
-  const loadData = useCallback(async () => {
-    if (!selectedCycle) return;
-    setError(null);
-    try {
-      const kpiRows = await api.kpis.list({ cycle_id: selectedCycle.id });
-      setRows(kpiRows);
-      setLastUpdated(new Date());
-    } catch (err) {
-      setError(errorMessage(err));
-    }
-  }, [selectedCycle]);
+  const loadData = useCallback(
+    async (isBackground = false) => {
+      if (!selectedCycle) return;
+      if (!isBackground) {
+        setError(null);
+      }
+      try {
+        const [kpiRows, freshCycle] = await Promise.all([
+          api.kpis.list({ cycle_id: selectedCycle.id }),
+          api.cycles?.retrieve?.(selectedCycle.id)?.catch(() => null) ?? Promise.resolve(null),
+        ]);
+        if (freshCycle) {
+          updateCycle(selectedCycle.id, freshCycle);
+        }
+        setRows(kpiRows);
+        setLastUpdated(new Date());
+      } catch (err) {
+        if (!isBackground) {
+          setError(errorMessage(err));
+        }
+      }
+    },
+    [selectedCycle?.id, updateCycle]
+  );
 
   useEffect(() => {
     if (!selectedCycle) {
@@ -191,24 +204,41 @@ const EefDashboardPage: React.FC<{ onSettings: () => void }> = ({ onSettings })
       setLastUpdated(null);
       return;
     }
-    let cancelled = false;
-    (async () => {
+    void (async () => {
       setLoading(true);
       try {
-        await loadData();
+        await loadData(false);
       } finally {
-        if (!cancelled) setLoading(false);
+        setLoading(false);
       }
     })();
-    return () => {
-      cancelled = true;
+
+    const interval = setInterval(() => {
+      if (document.visibilityState === 'visible') {
+        void loadData(true);
+      }
+    }, 60000);
+
+    const handleFocusOrVisibility = () => {
+      if (document.visibilityState === 'visible') {
+        void loadData(true);
+      }
     };
-  }, [selectedCycle, loadData]);
+
+    document.addEventListener('visibilitychange', handleFocusOrVisibility);
+    window.addEventListener('focus', handleFocusOrVisibility);
+
+    return () => {
+      clearInterval(interval);
+      document.removeEventListener('visibilitychange', handleFocusOrVisibility);
+      window.removeEventListener('focus', handleFocusOrVisibility);
+    };
+  }, [selectedCycle?.id, loadData]);
 
   const handleRefresh = async () => {
     setRefreshing(true);
     try {
-      await loadData();
+      await loadData(false);
     } finally {
       setRefreshing(false);
     }