filteredAreas: Filtert Bereiche, die zu den erlaubten Systemen gehören. Das sorgt dafür, dass nur relevante Bereiche im Dropdown-Menü erscheinen.

components/DataSheet.js

@@ -15,17 +15,35 @@ function DataSheet() {
   const GisSystemStatic = useRecoilValue(gisSystemStaticState);
 
   useEffect(() => {
-    // Filter unique areas
+    // Identify allowed system IDs
+    const allowedSystems = new Set(
+      GisSystemStatic.filter((system) => system.Allow === 1).map(
+        (system) => system.IdSystem
+      )
+    );
+
+    // Filter unique areas that belong to allowed systems
     const seenNames = new Set();
     const filteredAreas = GisStationsStaticDistrict.filter((item) => {
-      const isUnique = !seenNames.has(item.Area_Name);
+      const isUnique =
+        !seenNames.has(item.Area_Name) && allowedSystems.has(item.System);
       if (isUnique) {
         seenNames.add(item.Area_Name);
+        console.log("Unique area:", item.Area_Name);
       }
       return isUnique;
     });
+    console.log("GisStationsStaticDistrict:", GisStationsStaticDistrict);
 
-    // Filter unique systems where Allow is 1
+    // Set the station listings
+    setStationListing(
+      filteredAreas.map((area, index) => ({
+        id: index + 1,
+        name: area.Area_Name,
+      }))
+    );
+
+    // Prepare system listings as before
     const seenSystemNames = new Set();
     const filteredSystems = GisSystemStatic.filter((item) => {
       const isUnique = !seenSystemNames.has(item.Name) && item.Allow === 1;
@@ -35,13 +53,6 @@ function DataSheet() {
       return isUnique;
     });
 
-    setStationListing(
-      filteredAreas.map((area, index) => ({
-        id: index + 1,
-        name: area.Area_Name,
-      }))
-    );
-
     setSystemListing(
       filteredSystems.map((system, index) => ({
         id: index + 1,