SystemListing für Checkboxen im Card kommt von API GisSystemStatic

components/DataSheet.js

@@ -1,21 +1,26 @@
 import React, { useEffect, useState } from "react";
 import { useRecoilValue } from "recoil";
 import { gisStationsStaticDistrictState } from "../features/gisStationState";
-
+import { gisSystemStaticState } from "../features/gisSystemState";
 function DataSheet() {
   // useState für uniqueAreas und stationListing
   const [uniqueAreas, setUniqueAreas] = useState([]);
+  const [uniqueSystems, setUniqueSystems] = useState([]);
   const [stationListing, setStationListing] = useState([]);
+  const [systemListing, setSystemListing] = useState([]);
   const GisStationsStaticDistrict = useRecoilValue(
     gisStationsStaticDistrictState
   );
+  const GisSystemStatic = useRecoilValue(gisSystemStaticState);
 
   useEffect(() => {
     console.log(
       "GisStationsStaticDistrict in DataSheet:",
       GisStationsStaticDistrict
     );
+    console.log("GisSystemStatic in DataSheet:", GisSystemStatic);
 
+    // Filtern der eindeutigen Gebiete (Areas) und alphabetisches Sortieren
     const seenNames = new Set();
     const filteredAreas = GisStationsStaticDistrict.filter((item) => {
       const isUnique = !seenNames.has(item.Area_Name);
@@ -27,6 +32,17 @@ function DataSheet() {
 
     setUniqueAreas(filteredAreas);
 
+    const seenSystemNames = new Set();
+    const filteredSystems = GisSystemStatic.filter((item) => {
+      const isUnique = !seenSystemNames.has(item.Name);
+      if (isUnique) {
+        seenSystemNames.add(item.Name);
+      }
+      return isUnique;
+    });
+
+    setUniqueSystems(filteredSystems);
+
     // Erzeugen von stationListing aus uniqueAreas und alphabetisches Sortieren
     const newStationListing = filteredAreas
       .map((area, index) => ({
@@ -36,6 +52,14 @@ function DataSheet() {
       .sort((a, b) => a.name.localeCompare(b.name)); // Alphabetisches Sortieren der Namen
 
     setStationListing(newStationListing);
+
+    //----------
+    const newSystemListing = filteredSystems.map((area, index) => ({
+      id: index + 1, // Zuweisung einer eindeutigen ID
+      name: area.Name,
+    }));
+    setSystemListing(newSystemListing);
+    console.log("System Listing:", systemListing);
   }, [GisStationsStaticDistrict]);
 
   const [checkedStations, setCheckedStations] = useState({});
@@ -84,7 +108,7 @@ function DataSheet() {
         </div>
 
         {/* Liste der Stationen mit Checkboxen */}
-        {stationListing.map((station) => (
+        {systemListing.map((station) => (
           <div key={station.id} className="flex items-center">
             <input
               type="checkbox"