update sync data from site dashboard and testing closing cycles

components/IotPanelPage.tsx

@@ -59,9 +59,7 @@ const IotPanelPage: React.FC<{ onSettings: () => void }> = ({ onSettings }) => {
   const [dayRows, setDayRows] = useState<PanelIoT[]>([]);
   const [insights, setInsights] = useState<AIInsight[]>([]);
   const [loading, setLoading] = useState(false);
-  const [refreshing, setRefreshing] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [refreshToken, setRefreshToken] = useState(0);
   const [selectedChartKey, setSelectedChartKey] = useState<'humidity' | 'wind' | 'water' | null>(
     null
   );
@@ -102,7 +100,7 @@ const IotPanelPage: React.FC<{ onSettings: () => void }> = ({ onSettings }) => {
     return () => {
       cancelled = true;
     };
-  }, [selectedKandang, refreshToken]);
+  }, [selectedKandang]);
 
   useEffect(() => {
     if (!selectedCycle || selectedFlockId == null) {
@@ -139,7 +137,7 @@ const IotPanelPage: React.FC<{ onSettings: () => void }> = ({ onSettings }) => {
     return () => {
       cancelled = true;
     };
-  }, [selectedCycle, selectedFlockId, refreshToken]);
+  }, [selectedCycle, selectedFlockId]);
 
   useEffect(() => {
     if (!selectedCycle || selectedFlockId == null || !selectedDate) {
@@ -171,7 +169,7 @@ const IotPanelPage: React.FC<{ onSettings: () => void }> = ({ onSettings }) => {
     return () => {
       cancelled = true;
     };
-  }, [selectedCycle, selectedFlockId, selectedDate, refreshToken]);
+  }, [selectedCycle, selectedFlockId, selectedDate]);
 
   const summary = useMemo<DaySummary | null>(() => {
     if (dayRows.length === 0) return null;
@@ -240,12 +238,6 @@ const IotPanelPage: React.FC<{ onSettings: () => void }> = ({ onSettings }) => {
     return (matched.length > 0 ? matched : insights).slice(0, 4);
   }, [insights]);
 
-  const refresh = () => {
-    setRefreshing(true);
-    setRefreshToken((token) => token + 1);
-    window.setTimeout(() => setRefreshing(false), 500);
-  };
-
   if (!selectedCycle) return <EmptyFarm onSettings={onSettings} />;
 
   return (
@@ -255,32 +247,21 @@ const IotPanelPage: React.FC<{ onSettings: () => void }> = ({ onSettings }) => {
         subtitle={`${selectedSite?.site_name ?? ''} · ${selectedKandang?.kandang_name ?? ''} · Siklus ${formatDateRange(selectedCycle.start_date, selectedCycle.end_date)}`}
         icon={<i className="fa-solid fa-table-columns" />}
         actions={
-          <div className="flex items-center gap-2">
-            <select
-              value={selectedFlockId ?? ''}
-              onChange={(event) =>
-                setSelectedFlockId(event.target.value ? Number(event.target.value) : null)
-              }
-              className="rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-700"
-              aria-label="Pilih flock"
-            >
-              {flocks.length === 0 && <option value="">Tidak ada flock</option>}
-              {flocks.map((flock) => (
-                <option key={flock.id} value={flock.id}>
-                  {flock.flock_name}
-                </option>
-              ))}
-            </select>
-            <button
-              type="button"
-              onClick={refresh}
-              disabled={refreshing}
-              className="rounded-lg border border-slate-300 bg-slate-50 px-3 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-100 disabled:opacity-60"
-            >
-              <i className={`fa-solid fa-rotate-right mr-1 ${refreshing ? 'fa-spin' : ''}`} />
-              Refresh
-            </button>
-          </div>
+          <select
+            value={selectedFlockId ?? ''}
+            onChange={(event) =>
+              setSelectedFlockId(event.target.value ? Number(event.target.value) : null)
+            }
+            className="rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-700"
+            aria-label="Pilih flock"
+          >
+            {flocks.length === 0 && <option value="">Tidak ada flock</option>}
+            {flocks.map((flock) => (
+              <option key={flock.id} value={flock.id}>
+                {flock.flock_name}
+              </option>
+            ))}
+          </select>
         }
       />