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

components/counting/DataManagementPage.tsx

@@ -48,7 +48,7 @@ function mortalityAccuracy(manual: number, iot: number): number {
 }
 
 const DataManagementPage: React.FC<{ onSettings: () => void }> = ({ onSettings }) => {
-  const { selectedCycle, selectedKandang, selectedSite } = useFarm();
+  const { selectedCycle, selectedKandang, selectedSite, updateCycle } = useFarm();
   const [kpis, setKpis] = useState<KPI[]>([]);
   const [countings, setCountings] = useState<ChickenCounting[]>([]);
   const [manualRows, setManualRows] = useState<ManualInput[]>([]);
@@ -61,24 +61,37 @@ const DataManagementPage: React.FC<{ onSettings: () => void }> = ({ onSettings }
 
   const isClosedCycle = !selectedCycle || resolveCycleStatus(selectedCycle) !== 'active';
 
-  const loadData = useCallback(async (cycleId: number) => {
-    setLoading(true);
-    setError(null);
-    try {
-      const [k, c, m] = await Promise.all([
-        api.kpis.list({ cycle_id: cycleId }),
-        api.countings.list({ cycle_id: cycleId }),
-        api.manualInputs.list({ cycle_id: cycleId }),
-      ]);
-      setKpis(k);
-      setCountings(c);
-      setManualRows(m);
-    } catch (err) {
-      setError(errorMessage(err));
-    } finally {
-      setLoading(false);
-    }
-  }, []);
+  const loadData = useCallback(
+    async (cycleId: number, isBackground = false) => {
+      if (!isBackground) {
+        setLoading(true);
+      }
+      setError(null);
+      try {
+        const [k, c, m, freshCycle] = await Promise.all([
+          api.kpis.list({ cycle_id: cycleId }),
+          api.countings.list({ cycle_id: cycleId }),
+          api.manualInputs.list({ cycle_id: cycleId }),
+          api.cycles?.retrieve?.(cycleId)?.catch(() => null) ?? Promise.resolve(null),
+        ]);
+        if (freshCycle) {
+          updateCycle(cycleId, freshCycle);
+        }
+        setKpis(k);
+        setCountings(c);
+        setManualRows(m);
+      } catch (err) {
+        if (!isBackground) {
+          setError(errorMessage(err));
+        }
+      } finally {
+        if (!isBackground) {
+          setLoading(false);
+        }
+      }
+    },
+    [updateCycle]
+  );
 
   useEffect(() => {
     if (!selectedCycle) {
@@ -87,8 +100,30 @@ const DataManagementPage: React.FC<{ onSettings: () => void }> = ({ onSettings }
       setManualRows([]);
       return;
     }
-    void loadData(selectedCycle.id);
-  }, [selectedCycle, loadData]);
+    const cycleId = selectedCycle.id;
+    void loadData(cycleId, false);
+
+    const interval = setInterval(() => {
+      if (document.visibilityState === 'visible') {
+        void loadData(cycleId, true);
+      }
+    }, 60000);
+
+    const handleFocusOrVisibility = () => {
+      if (document.visibilityState === 'visible') {
+        void loadData(cycleId, true);
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleFocusOrVisibility);
+    window.addEventListener('focus', handleFocusOrVisibility);
+
+    return () => {
+      clearInterval(interval);
+      document.removeEventListener('visibilitychange', handleFocusOrVisibility);
+      window.removeEventListener('focus', handleFocusOrVisibility);
+    };
+  }, [selectedCycle?.id, loadData]);
 
   const handleSync = useCallback(async () => {
     if (!selectedCycle) return;