refactoring

src/App.js

@@ -21,6 +21,7 @@ import DirtyNavigationDialog from './components/DirtyNavigationDialog';
 import ConfirmationDialog from './components/ConfirmationDialog';
 import StoreSyncOverlay from './components/StoreSyncOverlay';
 import RangePickerModal from './components/RangePickerModal';
+import StoreWatchPage from './components/StoreWatchPage';
 
 function App() {
   const [credentials, setCredentials] = useState({ email: '', password: '' });
@@ -695,6 +696,7 @@ function App() {
             <NavigationTabs isAdmin={session?.isAdmin} onProtectedNavigate={requestNavigation} />
             <Routes>
               <Route path="/" element={dashboardContent} />
+              <Route path="/store-watch" element={<StoreWatchPage authorizedFetch={authorizedFetch} />} />
               <Route path="/admin" element={adminPageContent} />
               <Route path="*" element={<Navigate to="/" replace />} />
             </Routes>

src/components/AdminSettingsPanel.js

@@ -118,6 +118,50 @@ const AdminSettingsPanel = ({
               </div>
             </div>
 
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Store-Watch Cron</label>
+                <input
+                  type="text"
+                  value={adminSettings.storeWatchCron || ''}
+                  onChange={(event) => onSettingChange('storeWatchCron', event.target.value)}
+                  className="border rounded p-2 w-full focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+                  placeholder="z. B. */30 * * * *"
+                />
+                <p className="text-xs text-gray-500 mt-1">
+                  Legt fest, wie häufig der Team-Status der überwachten Betriebe geprüft wird.
+                </p>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Store-Watch Startverzögerung (Sek.)</label>
+                <div className="grid grid-cols-2 gap-2">
+                  <input
+                    type="number"
+                    min="0"
+                    value={adminSettings.storeWatchInitialDelayMinSeconds}
+                    onChange={(event) =>
+                      onSettingChange('storeWatchInitialDelayMinSeconds', event.target.value, true)
+                    }
+                    className="border rounded p-2 w-full focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+                    placeholder="Min"
+                  />
+                  <input
+                    type="number"
+                    min="0"
+                    value={adminSettings.storeWatchInitialDelayMaxSeconds}
+                    onChange={(event) =>
+                      onSettingChange('storeWatchInitialDelayMaxSeconds', event.target.value, true)
+                    }
+                    className="border rounded p-2 w-full focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500"
+                    placeholder="Max"
+                  />
+                </div>
+                <p className="text-xs text-gray-500 mt-1">
+                  Wird genutzt, um die ersten Prüfungen leicht zu verteilen.
+                </p>
+              </div>
+            </div>
+
             <div className="mb-6">
               <div className="flex items-center justify-between mb-2">
                 <h2 className="text-lg font-semibold text-purple-900">Ignorierte Slots</h2>

src/components/NavigationTabs.js

@@ -4,23 +4,26 @@ const NavigationTabs = ({ isAdmin, onProtectedNavigate }) => {
   const location = useLocation();
   const navigate = useNavigate();
 
-  if (!isAdmin) {
-    return null;
-  }
-
   const tabs = [
     { to: '/', label: 'Konfiguration' },
-    { to: '/admin', label: 'Admin' }
+    { to: '/store-watch', label: 'Betriebs-Monitoring' }
   ];
+  if (isAdmin) {
+    tabs.push({ to: '/admin', label: 'Admin' });
+  }
 
   const handleClick = (event, to) => {
     event.preventDefault();
     if (to === location.pathname) {
       return;
     }
-    onProtectedNavigate(`zur Seite "${tabs.find((tab) => tab.to === to)?.label || ''}" zu wechseln`, () =>
-      navigate(to)
-    );
+    const label = tabs.find((tab) => tab.to === to)?.label || '';
+    const proceed = () => navigate(to);
+    if (onProtectedNavigate) {
+      onProtectedNavigate(`zur Seite "${label}" zu wechseln`, proceed);
+      return;
+    }
+    proceed();
   };
 
   return (

src/components/StoreWatchPage.js

@@ -0,0 +1,414 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+const StoreWatchPage = ({ authorizedFetch }) => {
+  const [regions, setRegions] = useState([]);
+  const [selectedRegionId, setSelectedRegionId] = useState('');
+  const [storesByRegion, setStoresByRegion] = useState({});
+  const [watchList, setWatchList] = useState([]);
+  const [regionLoading, setRegionLoading] = useState(false);
+  const [storesLoading, setStoresLoading] = useState(false);
+  const [subscriptionsLoading, setSubscriptionsLoading] = useState(false);
+  const [status, setStatus] = useState('');
+  const [error, setError] = useState('');
+  const [dirty, setDirty] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  const watchedIds = useMemo(
+    () => new Set(watchList.map((entry) => String(entry.storeId))),
+    [watchList]
+  );
+
+  const selectedRegion = useMemo(
+    () => regions.find((region) => String(region.id) === String(selectedRegionId)) || null,
+    [regions, selectedRegionId]
+  );
+
+  const currentStores = useMemo(() => {
+    const regionEntry = storesByRegion[String(selectedRegionId)];
+    if (!regionEntry || !Array.isArray(regionEntry.stores)) {
+      return [];
+    }
+    return regionEntry.stores;
+  }, [storesByRegion, selectedRegionId]);
+
+  const eligibleStores = useMemo(
+    () => currentStores.filter((store) => Number(store.cooperationStatus) === 5),
+    [currentStores]
+  );
+
+  const loadRegions = useCallback(async () => {
+    if (!authorizedFetch) {
+      return;
+    }
+    setRegionLoading(true);
+    setError('');
+    try {
+      const response = await authorizedFetch('/api/store-watch/regions');
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+      const data = await response.json();
+      const normalized = Array.isArray(data.regions) ? data.regions : [];
+      setRegions(normalized);
+      if (!selectedRegionId && normalized.length > 0) {
+        setSelectedRegionId(String(normalized[0].id));
+      }
+    } catch (err) {
+      setError(`Regionen konnten nicht geladen werden: ${err.message}`);
+    } finally {
+      setRegionLoading(false);
+    }
+  }, [authorizedFetch, selectedRegionId]);
+
+  const loadSubscriptions = useCallback(async () => {
+    if (!authorizedFetch) {
+      return;
+    }
+    setSubscriptionsLoading(true);
+    setError('');
+    try {
+      const response = await authorizedFetch('/api/store-watch/subscriptions');
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+      const data = await response.json();
+      const normalized = Array.isArray(data.stores) ? data.stores : [];
+      setWatchList(normalized);
+      setDirty(false);
+    } catch (err) {
+      setError(`Überwachte Betriebe konnten nicht geladen werden: ${err.message}`);
+    } finally {
+      setSubscriptionsLoading(false);
+    }
+  }, [authorizedFetch]);
+
+  const fetchStoresForRegion = useCallback(
+    async (regionId, { force } = {}) => {
+      if (!authorizedFetch || !regionId) {
+        return;
+      }
+      if (!force && storesByRegion[String(regionId)]) {
+        return;
+      }
+      setStoresLoading(true);
+      setError('');
+      try {
+        const endpoint = force
+          ? `/api/store-watch/regions/${regionId}/stores?force=1`
+          : `/api/store-watch/regions/${regionId}/stores`;
+        const response = await authorizedFetch(endpoint);
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`);
+        }
+        const data = await response.json();
+        setStoresByRegion((prev) => ({
+          ...prev,
+          [String(regionId)]: {
+            total: Number(data.total) || 0,
+            stores: Array.isArray(data.stores) ? data.stores : [],
+            fetchedAt: Date.now()
+          }
+        }));
+      } catch (err) {
+        setError(`Betriebe konnten nicht geladen werden: ${err.message}`);
+      } finally {
+        setStoresLoading(false);
+      }
+    },
+    [authorizedFetch, storesByRegion]
+  );
+
+  useEffect(() => {
+    loadRegions();
+    loadSubscriptions();
+  }, [loadRegions, loadSubscriptions]);
+
+  useEffect(() => {
+    if (selectedRegionId) {
+      fetchStoresForRegion(selectedRegionId);
+    }
+  }, [selectedRegionId, fetchStoresForRegion]);
+
+  const handleToggleStore = useCallback(
+    (store, checked) => {
+      setWatchList((prev) => {
+        const storeId = String(store.id || store.storeId);
+        const existing = prev.find((entry) => entry.storeId === storeId);
+        if (checked) {
+          if (existing) {
+            return prev;
+          }
+          setDirty(true);
+          const regionName =
+            store.region?.name || selectedRegion?.name || existing?.regionName || '';
+          return [
+            ...prev,
+            {
+              storeId,
+              storeName: store.name || store.storeName || `Store ${storeId}`,
+              regionId: String(store.region?.id || selectedRegionId || existing?.regionId || ''),
+              regionName,
+              lastTeamSearchStatus: existing?.lastTeamSearchStatus ?? null
+            }
+          ];
+        }
+        if (!existing) {
+          return prev;
+        }
+        setDirty(true);
+        return prev.filter((entry) => entry.storeId !== storeId);
+      });
+    },
+    [selectedRegion, selectedRegionId]
+  );
+
+  const handleRemoveWatch = useCallback((storeId) => {
+    setWatchList((prev) => {
+      const next = prev.filter((entry) => entry.storeId !== storeId);
+      if (next.length !== prev.length) {
+        setDirty(true);
+      }
+      return next;
+    });
+  }, []);
+
+  const handleSave = useCallback(async () => {
+    if (!authorizedFetch || saving || !dirty) {
+      return;
+    }
+    setSaving(true);
+    setStatus('');
+    setError('');
+    try {
+      const response = await authorizedFetch('/api/store-watch/subscriptions', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ stores: watchList })
+      });
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}`);
+      }
+      const data = await response.json();
+      setWatchList(Array.isArray(data.stores) ? data.stores : []);
+      setDirty(false);
+      setStatus('Überwachung gespeichert.');
+      setTimeout(() => setStatus(''), 4000);
+    } catch (err) {
+      setError(`Speichern fehlgeschlagen: ${err.message}`);
+    } finally {
+      setSaving(false);
+    }
+  }, [authorizedFetch, dirty, saving, watchList]);
+
+  const handleReset = useCallback(() => {
+    loadSubscriptions();
+  }, [loadSubscriptions]);
+
+  if (!authorizedFetch) {
+    return (
+      <div className="p-4 max-w-4xl mx-auto">
+        <p className="text-red-600">Keine Session aktiv.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-4 max-w-5xl mx-auto bg-white shadow rounded-lg mt-4">
+      <div className="flex flex-col gap-2 mb-4">
+        <h1 className="text-2xl font-bold text-blue-900">Betriebs-Monitoring</h1>
+        <p className="text-gray-600 text-sm">
+          Wähle Betriebe aus, die bei offenem Team-Status automatisch gemeldet werden sollen.
+        </p>
+      </div>
+
+      {(error || status) && (
+        <div className="mb-4 space-y-2">
+          {error && (
+            <div className="bg-red-100 border border-red-300 text-red-700 px-4 py-2 rounded">{error}</div>
+          )}
+          {status && (
+            <div className="bg-green-100 border border-green-300 text-green-700 px-4 py-2 rounded">
+              {status}
+            </div>
+          )}
+        </div>
+      )}
+
+      <div className="mb-6 border border-gray-200 rounded-lg p-4 bg-gray-50">
+        <div className="flex flex-col md:flex-row md:items-end gap-3">
+          <div className="flex-1">
+            <label className="block text-sm font-medium text-gray-700 mb-1" htmlFor="region-select">
+              Region
+            </label>
+            <select
+              id="region-select"
+              value={selectedRegionId}
+              onChange={(event) => setSelectedRegionId(event.target.value)}
+              className="border rounded-md p-2 w-full"
+              disabled={regionLoading}
+            >
+              <option value="">Region auswählen</option>
+              {regions.map((region) => (
+                <option key={region.id} value={region.id}>
+                  {region.name}
+                </option>
+              ))}
+            </select>
+          </div>
+          <div className="flex gap-2">
+            <button
+              type="button"
+              onClick={() => loadRegions()}
+              className="px-4 py-2 border rounded-md text-sm bg-white hover:bg-gray-100"
+              disabled={regionLoading}
+            >
+              Regionen neu laden
+            </button>
+            <button
+              type="button"
+              onClick={() => fetchStoresForRegion(selectedRegionId, { force: true })}
+              className="px-4 py-2 border rounded-md text-sm bg-white hover:bg-gray-100"
+              disabled={!selectedRegionId || storesLoading}
+            >
+              Betriebe aktualisieren
+            </button>
+          </div>
+        </div>
+        <p className="text-xs text-gray-500 mt-2">
+          Es werden nur Regionen angezeigt, in denen du Mitglied mit Klassifikation 1 bist.
+        </p>
+      </div>
+
+      <div className="mb-6">
+        <div className="flex items-center justify-between mb-2">
+          <h2 className="text-lg font-semibold text-gray-800">Betriebe in der Region</h2>
+          {storesByRegion[String(selectedRegionId)]?.fetchedAt && (
+            <span className="text-xs text-gray-500">
+              Aktualisiert:{' '}
+              {new Date(storesByRegion[String(selectedRegionId)].fetchedAt).toLocaleTimeString('de-DE')}
+            </span>
+          )}
+        </div>
+        {storesLoading && <p className="text-sm text-gray-600">Lade Betriebe...</p>}
+        {!storesLoading && (!selectedRegionId || eligibleStores.length === 0) && (
+          <p className="text-sm text-gray-500">
+            {selectedRegionId
+              ? 'Keine geeigneten Betriebe (Status "aktiv") in dieser Region.'
+              : 'Bitte zuerst eine Region auswählen.'}
+          </p>
+        )}
+        {!storesLoading && eligibleStores.length > 0 && (
+          <div className="overflow-x-auto border border-gray-200 rounded-lg">
+            <table className="min-w-full divide-y divide-gray-200 text-sm">
+              <thead className="bg-gray-100">
+                <tr>
+                  <th className="px-4 py-2 text-left">Betrieb</th>
+                  <th className="px-4 py-2 text-left">Ort</th>
+                  <th className="px-4 py-2 text-left">Kooperation</th>
+                  <th className="px-4 py-2 text-center">Überwachen</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-200">
+                {eligibleStores.map((store) => {
+                  const checked = watchedIds.has(String(store.id));
+                  return (
+                    <tr key={store.id} className="bg-white">
+                      <td className="px-4 py-2">
+                        <p className="font-medium text-gray-900">{store.name}</p>
+                        <p className="text-xs text-gray-500">#{store.id}</p>
+                      </td>
+                      <td className="px-4 py-2">
+                        <p className="text-gray-800 text-sm">{store.city || 'unbekannt'}</p>
+                        <p className="text-xs text-gray-500">{store.street || ''}</p>
+                      </td>
+                      <td className="px-4 py-2 text-sm text-gray-600">
+                        Seit {store.createdAt ? new Date(store.createdAt).toLocaleDateString('de-DE') : 'n/a'}
+                      </td>
+                      <td className="px-4 py-2 text-center">
+                        <input
+                          type="checkbox"
+                          className="h-5 w-5"
+                          checked={checked}
+                          onChange={(event) => handleToggleStore(store, event.target.checked)}
+                        />
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+
+      <div className="mb-6">
+        <div className="flex items-center justify-between mb-3">
+          <h2 className="text-lg font-semibold text-gray-800">
+            Überwachte Betriebe ({watchList.length})
+          </h2>
+          <div className="flex gap-2">
+            <button
+              type="button"
+              className="px-4 py-2 border rounded-md text-sm bg-white hover:bg-gray-100"
+              onClick={handleReset}
+              disabled={subscriptionsLoading}
+            >
+              Änderungen verwerfen
+            </button>
+            <button
+              type="button"
+              className="px-4 py-2 rounded-md text-sm text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-60"
+              onClick={handleSave}
+              disabled={!dirty || saving}
+            >
+              {saving ? 'Speichere...' : 'Speichern'}
+            </button>
+          </div>
+        </div>
+        {subscriptionsLoading && <p className="text-sm text-gray-600">Lade aktuelle Auswahl...</p>}
+        {!subscriptionsLoading && watchList.length === 0 && (
+          <p className="text-sm text-gray-500">Noch keine Betriebe ausgewählt.</p>
+        )}
+        {watchList.length > 0 && (
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            {watchList.map((entry) => (
+              <div key={entry.storeId} className="border border-gray-200 rounded-lg p-3 bg-gray-50">
+                <div className="flex justify-between items-start">
+                  <div>
+                    <p className="font-semibold text-gray-900">{entry.storeName}</p>
+                    <p className="text-xs text-gray-500">
+                      #{entry.storeId} — {entry.regionName || 'Region unbekannt'}
+                    </p>
+                  </div>
+                  <button
+                    type="button"
+                    className="text-xs text-red-600 hover:underline"
+                    onClick={() => handleRemoveWatch(entry.storeId)}
+                  >
+                    Entfernen
+                  </button>
+                </div>
+                <p className="text-xs text-gray-600 mt-2">
+                  Letzter Status:{' '}
+                  {entry.lastTeamSearchStatus === 1
+                    ? 'Suchend'
+                    : entry.lastTeamSearchStatus === 0
+                    ? 'Nicht suchend'
+                    : 'Unbekannt'}
+                </p>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {dirty && (
+        <p className="text-xs text-amber-600">
+          Es gibt ungespeicherte Änderungen. Bitte "Speichern" klicken.
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default StoreWatchPage;

src/utils/adminSettings.js

@@ -9,6 +9,9 @@ export const normalizeAdminSettings = (raw) => {
     initialDelayMinSeconds: raw.initialDelayMinSeconds ?? '',
     initialDelayMaxSeconds: raw.initialDelayMaxSeconds ?? '',
     storePickupCheckDelayMs: raw.storePickupCheckDelayMs ?? '',
+    storeWatchCron: raw.storeWatchCron || '',
+    storeWatchInitialDelayMinSeconds: raw.storeWatchInitialDelayMinSeconds ?? '',
+    storeWatchInitialDelayMaxSeconds: raw.storeWatchInitialDelayMaxSeconds ?? '',
     ignoredSlots: Array.isArray(raw.ignoredSlots)
       ? raw.ignoredSlots.map((slot) => ({
           storeId: slot?.storeId ? String(slot.storeId) : '',
@@ -50,6 +53,9 @@ export const serializeAdminSettings = (adminSettings) => {
     initialDelayMinSeconds: toNumberOrUndefined(adminSettings.initialDelayMinSeconds),
     initialDelayMaxSeconds: toNumberOrUndefined(adminSettings.initialDelayMaxSeconds),
     storePickupCheckDelayMs: toNumberOrUndefined(adminSettings.storePickupCheckDelayMs),
+    storeWatchCron: adminSettings.storeWatchCron,
+    storeWatchInitialDelayMinSeconds: toNumberOrUndefined(adminSettings.storeWatchInitialDelayMinSeconds),
+    storeWatchInitialDelayMaxSeconds: toNumberOrUndefined(adminSettings.storeWatchInitialDelayMaxSeconds),
     ignoredSlots: (adminSettings.ignoredSlots || []).map((slot) => ({
       storeId: slot.storeId || '',
       description: slot.description || ''