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

components/FeedSackCountingPage.tsx

@@ -29,22 +29,35 @@ const FeedSackCountingPage: React.FC<{ onSettings: () => void }> = ({ onSettings
   const [notice, setNotice] = useState<string | null>(null);
   const [showCyclePicker, setShowCyclePicker] = useState(false);
 
-  const reload = useCallback(async (cycleId: number) => {
-    setLoading(true);
-    setError(null);
-    try {
-      const [karungRows, manualList] = await Promise.all([
-        api.karungs.list({ cycle_id: cycleId }),
-        api.manualInputs.list({ cycle_id: cycleId }),
-      ]);
-      setRows(karungRows);
-      setManualRows(manualList);
-    } catch (err) {
-      setError(errorMessage(err));
-    } finally {
-      setLoading(false);
-    }
-  }, []);
+  const reload = useCallback(
+    async (cycleId: number, isBackground = false) => {
+      if (!isBackground) {
+        setLoading(true);
+      }
+      setError(null);
+      try {
+        const [karungRows, manualList, freshCycle] = await Promise.all([
+          api.karungs.list({ cycle_id: cycleId }),
+          api.manualInputs.list({ cycle_id: cycleId }),
+          api.cycles?.retrieve?.(cycleId)?.catch(() => null) ?? Promise.resolve(null),
+        ]);
+        if (freshCycle) {
+          updateCycle(cycleId, freshCycle);
+        }
+        setRows(karungRows);
+        setManualRows(manualList);
+      } catch (err) {
+        if (!isBackground) {
+          setError(errorMessage(err));
+        }
+      } finally {
+        if (!isBackground) {
+          setLoading(false);
+        }
+      }
+    },
+    [updateCycle]
+  );
 
   useEffect(() => {
     if (!selectedCycle) {
@@ -52,8 +65,30 @@ const FeedSackCountingPage: React.FC<{ onSettings: () => void }> = ({ onSettings
       setManualRows([]);
       return;
     }
-    void reload(selectedCycle.id);
-  }, [selectedCycle, reload]);
+    const cycleId = selectedCycle.id;
+    void reload(cycleId, false);
+
+    const interval = setInterval(() => {
+      if (document.visibilityState === 'visible') {
+        void reload(cycleId, true);
+      }
+    }, 60000);
+
+    const handleFocusOrVisibility = () => {
+      if (document.visibilityState === 'visible') {
+        void reload(cycleId, true);
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleFocusOrVisibility);
+    window.addEventListener('focus', handleFocusOrVisibility);
+
+    return () => {
+      clearInterval(interval);
+      document.removeEventListener('visibilitychange', handleFocusOrVisibility);
+      window.removeEventListener('focus', handleFocusOrVisibility);
+    };
+  }, [selectedCycle?.id, reload]);
 
   const sortedRows = useMemo(() => [...rows].sort((a, b) => a.date.localeCompare(b.date)), [rows]);
   const latest = sortedRows[sortedRows.length - 1] ?? null;