city, graphics page, errors on graphics still

src/redux/actions/areas/index.js

@@ -242,6 +242,117 @@ export const getAreasWithCriteria = (organizationId) => {
   };
 };
 
+export const getAreasByDataCenter = (dataCenterId) => {
+  return async (dispatch) => {
+    // Don't make the request if dataCenterId is undefined, null, or empty
+    if (!dataCenterId || dataCenterId === "undefined") {
+      dispatch({
+        type: "GET_AREAS_WITH_CRITERIA",
+        payload: {
+          getAreasWithCriteria: [],
+        },
+      });
+      return;
+    }
+
+    ApplicationService.http()
+      .post(
+        "/graphql",
+        {
+          query: `
+          {
+              dataCenter(id: "${dataCenterId}") {
+                id
+                dataCenter
+                area {
+                  id
+                  tag
+                  countries {
+                    id
+                    countryCode
+                    name
+                  }
+                  cities {
+                    id
+                    name
+                    coordinates
+                    country{
+                      id
+                      name
+                    }
+                  }
+                  districts {
+                    id
+                    name
+                    coordinates
+                    city{
+                      id
+                      name
+                      country{
+                        id
+                        name
+                      }
+                    }
+                  }
+                  neighborhoods {
+                    id
+                    name
+                    minLong
+                    maxLong
+                    minLat
+                    maxLat
+                    district{
+                      id
+                      name
+                      city{
+                        id
+                        name
+                        country{
+                          id
+                          name
+                        }
+                      }
+                    }
+                  }
+                  isDeleted
+                }
+              }
+            }
+           `,
+        },
+        {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("accessToken"),
+          },
+        }
+      )
+      .then((response) => {
+        const dataCenter = response?.data?.data?.dataCenter;
+        let areas = [];
+        
+        if (dataCenter && dataCenter.area && !dataCenter.area.isDeleted) {
+          areas = [dataCenter.area];
+        }
+        
+        dispatch({
+          type: "GET_AREAS_WITH_CRITERIA",
+          payload: {
+            getAreasWithCriteria: areas,
+          },
+        });
+      })
+      .catch((error) => {
+        console.error("Error fetching areas by data center:", error);
+        dispatch({
+          type: "GET_AREAS_WITH_CRITERIA",
+          payload: {
+            getAreasWithCriteria: [],
+          },
+        });
+      });
+  };
+};
+
 export const addArea = (data) => {
   const dataToJSON = JSON.stringify(data);
   const deleteQuotesFromKey = dataToJSON.replace(/"([^(")"]+)":/g, "$1:");

src/redux/actions/dataCenter/index.js

@@ -170,7 +170,8 @@ export const createDataCenter = (dataCenterData) => {
               areaId: dataCenterData.areaId,
               address: dataCenterData.address || "",
               latitude: dataCenterData.latitude ? parseFloat(dataCenterData.latitude) : null,
-              longitude: dataCenterData.longitude ? parseFloat(dataCenterData.longitude) : null
+              longitude: dataCenterData.longitude ? parseFloat(dataCenterData.longitude) : null,
+              city: dataCenterData.city
             }
           }
         },
@@ -254,7 +255,8 @@ export const updateDataCenter = (id, dataCenterData) => {
               areaId: dataCenterData.areaId,
               address: dataCenterData.address || "",
               latitude: dataCenterData.latitude ? parseFloat(dataCenterData.latitude) : null,
-              longitude: dataCenterData.longitude ? parseFloat(dataCenterData.longitude) : null
+              longitude: dataCenterData.longitude ? parseFloat(dataCenterData.longitude) : null,
+              city: dataCenterData.city
             }
           }
         },
@@ -336,3 +338,87 @@ export const deleteDataCenter = (id) => {
     }
   };
 };
+
+export const getDataCenterVMs = (dataCenterId) => {
+  return new Promise(async (resolve, reject) => {
+    // Don't make the request if dataCenterId is undefined, null, or empty
+    if (!dataCenterId || dataCenterId === "undefined") {
+      console.log('getDataCenterVMs: No dataCenterId provided');
+      resolve([]);
+      return;
+    }
+
+    try {
+      console.log('getDataCenterVMs: Fetching VMs for data center:', dataCenterId);
+      const response = await ApplicationService.http()
+        .post(
+          "/graphql",
+          {
+            query: `
+            {
+                dataCenter(id: "${dataCenterId}") {
+                  id
+                  dataCenter
+                  projects {
+                    id
+                    name
+                    physicalMachines {
+                      id
+                      name
+                      vms {
+                        active {
+                          id
+                          name
+                          status
+                          power
+                        }
+                        inactive {
+                          id
+                          name
+                          status
+                          power
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+             `,
+          },
+          {
+            headers: {
+              Authorization: "Bearer " + localStorage.getItem("accessToken"),
+            },
+          }
+        );
+
+      const dataCenter = response?.data?.data?.dataCenter;
+      console.log('getDataCenterVMs: Data center response:', dataCenter);
+      
+      let allVMs = [];
+      
+      if (dataCenter && dataCenter.projects) {
+        dataCenter.projects.forEach(project => {
+          if (project.physicalMachines) {
+            project.physicalMachines.forEach(pm => {
+              if (pm.vms) {
+                if (pm.vms.active) {
+                  allVMs = allVMs.concat(pm.vms.active);
+                }
+                if (pm.vms.inactive) {
+                  allVMs = allVMs.concat(pm.vms.inactive);
+                }
+              }
+            });
+          }
+        });
+      }
+      
+      console.log('getDataCenterVMs: Found VMs:', allVMs);
+      resolve(allVMs);
+    } catch (error) {
+      console.error("Error fetching VMs by data center:", error);
+      resolve([]);
+    }
+  });
+};

src/redux/actions/datas/index.js

@@ -161,7 +161,7 @@ export const getSubSectorById = (id) => {
         dispatch({
           type: "GET_SUBSECTOR_BY_ID",
           payload: {
-            subSector,
+            subSector: subSector || {},
           },
         });
       });

src/redux/actions/mainDataTables/index.js

@@ -689,3 +689,119 @@ export const deleteDataInput = (dataId) => {
       });
   };
 };
+
+export const getMainDataTablesByVMs = (data) => {
+  return async (dispatch) => {
+    const { filterOptions } = data;
+    try {
+      const response = await ApplicationService.http()
+        .post(
+          "/graphql",
+          {
+            query: `
+              {
+                mainDataTables(
+                  criteria: {
+                    year: "${filterOptions?.year?.value}"
+                    deleted: false
+                  }
+                ) {
+                  year
+                  sector { id tag }
+                  subSector{ id tag }
+                  activitySubUnit{ id tag }
+                  totalEmission
+                  emissionScope{ tag }
+                  emissionSource{ id tag }
+                  vm { id name status power }
+                }
+              }
+            `,
+          },
+          {
+            headers: {
+              Authorization: "Bearer " + localStorage.getItem("accessToken"),
+            },
+          }
+        );
+      const allMainDataTables = response.data.data.mainDataTables || [];
+      dispatch({
+        type: "GET_MAIN_TABLES",
+        payload: {
+          mainDataTables: allMainDataTables,
+        },
+      });
+    } catch (error) {
+      console.error("Error fetching main data tables:", error);
+      dispatch({
+        type: "GET_MAIN_TABLES",
+        payload: {
+          mainDataTables: [],
+        },
+      });
+    }
+  };
+};
+
+export const testMainDataTables = () => {
+  return async (dispatch) => {
+    try {
+      console.log('testMainDataTables: Testing basic mainDataTables query');
+      
+      const response = await ApplicationService.http()
+        .post(
+          "/graphql",
+          {
+            query: `
+              {
+                mainDataTables(
+                  criteria: {
+                    deleted: false
+                  }
+                ) {
+                  id
+                  year
+                  totalEmission
+                  vm {
+                    id
+                    name
+                    status
+                    power
+                  }
+                }
+              }
+            `,
+          },
+          {
+            headers: {
+              Authorization: "Bearer " + localStorage.getItem("accessToken"),
+            },
+          }
+        );
+
+      console.log('testMainDataTables: Response:', response.data);
+      
+      if (response.data.errors) {
+        console.error('testMainDataTables: GraphQL Errors:', response.data.errors);
+      }
+      
+      const allData = response.data.data.mainDataTables || [];
+      console.log('testMainDataTables: All mainDataTables:', allData);
+      console.log('testMainDataTables: Count:', allData.length);
+      
+      // Check which records have VM data
+      const recordsWithVM = allData.filter(record => record.vm);
+      console.log('testMainDataTables: Records with VM:', recordsWithVM);
+      console.log('testMainDataTables: Records with VM count:', recordsWithVM.length);
+      
+      dispatch({
+        type: "GET_MAIN_TABLES",
+        payload: {
+          mainDataTables: allData,
+        },
+      });
+    } catch (error) {
+      console.error("testMainDataTables: Error:", error);
+    }
+  };
+};

src/redux/reducers/datas/index.js

@@ -30,7 +30,7 @@ const datasReducer = (state = initialState, action) => {
     case "GET_SUBSECTOR_BY_ID":
       return {
         ...state,
-        subSector: action.payload.subSector,
+        subSector: action.payload.subSector || {},
       };
     case "GET_ACTIVITY_SUBUNITS":
       return {

src/views/DataCenterManagement.js

@@ -31,6 +31,8 @@ import withReactContent from "sweetalert2-react-content";
 import { getDataCenters, createDataCenter, updateDataCenter, deleteDataCenter } from "../redux/actions/dataCenter";
 import { useTranslation } from "react-i18next";
 import { getAreas } from "../redux/actions/areas";
+import { getSectors, getSectorById, getSubSectorById, getConsuptionUnits } from "../redux/actions/datas";
+import { getAllEmissionSources } from "../redux/actions/emissionSources";
 import { permissionCheck } from "../components/permission-check";
 import { customFilterForSelect } from "../utility/Utils";
 import { MapContainer, TileLayer, Marker, useMapEvents } from 'react-leaflet';
@@ -107,14 +109,33 @@ const DataCenterManagement = () => {
     address: "",
     latitude: null,
     longitude: null,
-    ayposURL: ""
+    ayposURL: "",
+    city: "",
+    emissionScopeId: null,
+    sectorId: null,
+    subSectorId: null,
+    emissionSourceId: null,
+    consuptionUnitId: null,
+    activitySubUnitId: null
   });
 
   const [mapPosition, setMapPosition] = useState(null);
 
   const dataCenterStore = useSelector((state) => state.dataCenter);
   const areasStore = useSelector((state) => state.areas);
+  const datasStore = useSelector((state) => state.datas);
+  const emissionSourceStore = useSelector((state) => state.emissionSources);
   const [areasOptions, setAreasOptions] = useState([]);
+  const [sectorsOptions, setSectorsOptions] = useState([]);
+  const [subSectorsOptions, setSubSectorsOptions] = useState([]);
+  const [emissionSourcesOptions, setEmissionSourcesOptions] = useState([]);
+  const [consuptionUnitsOptions, setConsuptionUnitsOptions] = useState([]);
+  const [activitySubUnitsOptions, setActivitySubUnitsOptions] = useState([]);
+  const [emissionScopesOptions, setEmissionScopesOptions] = useState([]);
+  
+  // Add state for selected sector and sub sector like in data input
+  const [selectedSector, setSelectedSector] = useState(null);
+  const [selectedSubSector, setSelectedSubSector] = useState(null);
 
   const [editingDataCenter, setEditingDataCenter] = useState(null);
 
@@ -205,6 +226,7 @@ const DataCenterManagement = () => {
   useEffect(() => {
     dispatch(getDataCenters());
     dispatch(getAreas());
+    dispatch(getSectors());
   }, [dispatch]);
 
   useEffect(() => {
@@ -216,6 +238,96 @@ const DataCenterManagement = () => {
     );
   }, [areasStore]);
 
+  useEffect(() => {
+    setSectorsOptions(
+      datasStore?.sectors?.map((sector) => ({
+        value: sector?.id,
+        label: sector?.tag,
+      }))
+    );
+  }, [datasStore?.sectors]);
+
+  useEffect(() => {
+    setSubSectorsOptions([]);
+    setSubSectorsOptions(
+      datasStore?.sector?.subSectors?.map((subSector) => ({
+        value: subSector?.id,
+        label: subSector?.tag,
+      }))
+    );
+  }, [datasStore?.sector]);
+
+  useEffect(() => {
+    setActivitySubUnitsOptions(
+      datasStore?.subSector?.activitySubUnits?.map((activitySubUnit) => ({
+        value: activitySubUnit?.id,
+        label: activitySubUnit?.tag,
+      }))
+    );
+  }, [datasStore?.subSector]);
+
+  useEffect(() => {
+    setEmissionSourcesOptions(
+      emissionSourceStore?.emissionSources
+        ?.filter((source) => source.convertUnitCheck != false)
+        ?.map((source) => ({
+          value: source?.id,
+          label: source?.tag,
+        }))
+    );
+  }, [emissionSourceStore?.emissionSources]);
+
+  useEffect(() => {
+    if (selectedDataCenter?.emissionSourceId) {
+      dispatch(
+        getConsuptionUnits({
+          id: selectedDataCenter?.emissionSourceId,
+          sector: selectedDataCenter?.sectorId,
+        })
+      );
+    }
+  }, [selectedDataCenter?.emissionSourceId]);
+
+  useEffect(() => {
+    if (selectedSubSector != null) {
+      dispatch(getAllEmissionSources(selectedSubSector));
+    }
+  }, [selectedSubSector]);
+
+  useEffect(() => {
+    if (selectedSector != null) {
+      dispatch(getSectorById(selectedSector));
+    }
+  }, [selectedSector]);
+
+  useEffect(() => {
+    if (selectedSubSector != null) {
+      dispatch(getSubSectorById(selectedSubSector));
+    }
+  }, [selectedSubSector]);
+
+  useEffect(() => {
+    setConsuptionUnitsOptions(
+      datasStore?.consuptionUnits?.map((consuptionUnit) => ({
+        value: consuptionUnit?.unit?.id,
+        label: consuptionUnit?.unit?.description,
+      }))
+    );
+  }, [datasStore?.consuptionUnits]);
+
+  useEffect(() => {
+    setEmissionScopesOptions([
+      {
+        label: "Şehir İçi",
+        value: false,
+      },
+      {
+        label: "Şehir Dışı",
+        value: true,
+      },
+    ]);
+  }, []);
+
   const handleEditDataCenter = (row) => {
     setEditingDataCenter(row);
     setSelectedDataCenter({
@@ -226,8 +338,20 @@ const DataCenterManagement = () => {
       address: row.address,
       latitude: row.latitude,
       longitude: row.longitude,
-      ayposURL: row.ayposURL
+      ayposURL: row.ayposURL,
+      city: row.city,
+      emissionScopeId: row.emissionScope?.id,
+      sectorId: row.sector?.id,
+      subSectorId: row.subSector?.id,
+      emissionSourceId: row.emissionSource?.id,
+      consuptionUnitId: row.consuptionUnit?.id,
+      activitySubUnitId: row.activitySubUnit?.id
     });
+    
+    // Set the selected sector and sub sector for cascading dropdowns
+    setSelectedSector(row.sector?.id);
+    setSelectedSubSector(row.subSector?.id);
+    
     // Only set map position if we have both address and valid coordinates
     setMapPosition(row.address && row.latitude && row.longitude ? [row.latitude, row.longitude] : null);
     setShowAddModal(true);
@@ -272,7 +396,14 @@ const DataCenterManagement = () => {
       // Ensure number is set for new data centers
       const dataToSubmit = {
         ...selectedDataCenter,
-        number: selectedDataCenter.number || 1 // Default to 1 if not set
+        number: selectedDataCenter.number || 1, // Default to 1 if not set
+        city: selectedDataCenter.city, // Add city to the payload
+        emissionScopeId: selectedDataCenter.emissionScopeId,
+        sectorId: selectedDataCenter.sectorId,
+        subSectorId: selectedDataCenter.subSectorId,
+        emissionSourceId: selectedDataCenter.emissionSourceId,
+        consuptionUnitId: selectedDataCenter.consuptionUnitId,
+        activitySubUnitId: selectedDataCenter.activitySubUnitId
       };
 
       if (editingDataCenter) {
@@ -287,9 +418,9 @@ const DataCenterManagement = () => {
 
       handleCloseModal();
     } catch (error) {
-      console.error("Operation error:", error);
+      console.error("Submit error:", error);
       enqueueSnackbar(
-        error?.message || (editingDataCenter ? t("DataCenter.updateError") : t("DataCenter.createError")),
+        error?.message || t("DataCenter.submitError"),
         { variant: "error" }
       );
     }
@@ -305,7 +436,8 @@ const DataCenterManagement = () => {
       address: "",
       latitude: null,
       longitude: null,
-      ayposURL: ""
+      ayposURL: "",
+      city: ""
     });
     setMapPosition(null);
     setEditingDataCenter(null);
@@ -488,6 +620,24 @@ const DataCenterManagement = () => {
                   />
                 </FormGroup>
               </Col>
+              <Col sm="6">
+                <FormGroup>
+                  <Label for="city">{t("DataCenter.city")}</Label>
+                  <Input
+                    type="text"
+                    name="city"
+                    id="city"
+                    placeholder={t("DataCenter.city")}
+                    value={selectedDataCenter.city}
+                    onChange={(e) =>
+                      setSelectedDataCenter({
+                        ...selectedDataCenter,
+                        city: e.target.value,
+                      })
+                    }
+                  />
+                </FormGroup>
+              </Col>
               <Col sm="12">
                 <FormGroup>
                   <Label for="area">{t("DataCenter.area")}</Label>
@@ -536,6 +686,158 @@ const DataCenterManagement = () => {
                   </div>
                 </FormGroup>
               </Col>
+              
+              {/* Emission Scope Section */}
+              <Col sm="12">
+                <h5 className="mt-3 mb-2 text-primary">Emission Scope Configuration</h5>
+              </Col>
+              <Col sm="6">
+                <FormGroup>
+                  <Label for="emissionScope">Emission Scope</Label>
+                  <Select
+                    id="emissionScope"
+                    name="emissionScope"
+                    placeholder="Select emission scope"
+                    options={emissionScopesOptions}
+                    value={emissionScopesOptions?.find(
+                      (option) => option.value === selectedDataCenter.emissionScopeId
+                    )}
+                    onChange={(option) =>
+                      setSelectedDataCenter({
+                        ...selectedDataCenter,
+                        emissionScopeId: option?.value,
+                      })
+                    }
+                    isClearable
+                    filterOption={customFilterForSelect}
+                  />
+                </FormGroup>
+              </Col>
+              <Col sm="6">
+                <FormGroup>
+                  <Label for="sector">Sector</Label>
+                  <Select
+                    id="sector"
+                    name="sector"
+                    placeholder="Select sector"
+                    options={sectorsOptions}
+                    value={sectorsOptions?.find(
+                      (option) => option.value === selectedDataCenter.sectorId
+                    )}
+                    onChange={(option) => {
+                      setSelectedSector(option?.value);
+                      setSelectedDataCenter({
+                        ...selectedDataCenter,
+                        sectorId: option?.value,
+                        subSectorId: null,
+                        emissionSourceId: null,
+                        consuptionUnitId: null,
+                        activitySubUnitId: null,
+                      });
+                    }}
+                    isClearable
+                    filterOption={customFilterForSelect}
+                  />
+                </FormGroup>
+              </Col>
+              <Col sm="6">
+                <FormGroup>
+                  <Label for="subSector">Sub Sector</Label>
+                  <Select
+                    id="subSector"
+                    name="subSector"
+                    placeholder="Select sub sector"
+                    options={subSectorsOptions}
+                    value={subSectorsOptions?.find(
+                      (option) => option.value === selectedDataCenter.subSectorId
+                    )}
+                    onChange={(option) => {
+                      setSelectedSubSector(option?.value);
+                      setSelectedDataCenter({
+                        ...selectedDataCenter,
+                        subSectorId: option?.value,
+                        emissionSourceId: null,
+                        consuptionUnitId: null,
+                        activitySubUnitId: null,
+                      });
+                    }}
+                    isClearable
+                    filterOption={customFilterForSelect}
+                    isDisabled={!selectedDataCenter.sectorId}
+                  />
+                </FormGroup>
+              </Col>
+              <Col sm="6">
+                <FormGroup>
+                  <Label for="emissionSource">Emission Source</Label>
+                  <Select
+                    id="emissionSource"
+                    name="emissionSource"
+                    placeholder="Select emission source"
+                    options={emissionSourcesOptions}
+                    value={emissionSourcesOptions?.find(
+                      (option) => option.value === selectedDataCenter.emissionSourceId
+                    )}
+                    onChange={(option) => {
+                      setSelectedDataCenter({
+                        ...selectedDataCenter,
+                        emissionSourceId: option?.value,
+                        consuptionUnitId: null,
+                      });
+                    }}
+                    isClearable
+                    filterOption={customFilterForSelect}
+                    isDisabled={!selectedDataCenter.subSectorId}
+                  />
+                </FormGroup>
+              </Col>
+              <Col sm="6">
+                <FormGroup>
+                  <Label for="consuptionUnit">Consumption Unit</Label>
+                  <Select
+                    id="consuptionUnit"
+                    name="consuptionUnit"
+                    placeholder="Select consumption unit"
+                    options={consuptionUnitsOptions}
+                    value={consuptionUnitsOptions?.find(
+                      (option) => option.value === selectedDataCenter.consuptionUnitId
+                    )}
+                    onChange={(option) => {
+                      setSelectedDataCenter({
+                        ...selectedDataCenter,
+                        consuptionUnitId: option?.value,
+                      });
+                    }}
+                    isClearable
+                    filterOption={customFilterForSelect}
+                    isDisabled={!selectedDataCenter.emissionSourceId}
+                  />
+                </FormGroup>
+              </Col>
+              <Col sm="12">
+                <FormGroup>
+                  <Label for="activitySubUnit">Activity Sub Unit</Label>
+                  <Select
+                    id="activitySubUnit"
+                    name="activitySubUnit"
+                    placeholder="Select activity sub unit"
+                    options={activitySubUnitsOptions}
+                    value={activitySubUnitsOptions?.find(
+                      (option) => option.value === selectedDataCenter.activitySubUnitId
+                    )}
+                    onChange={(option) => {
+                      setSelectedDataCenter({
+                        ...selectedDataCenter,
+                        activitySubUnitId: option?.value,
+                      });
+                    }}
+                    isClearable
+                    filterOption={customFilterForSelect}
+                    isDisabled={!selectedDataCenter.subSectorId}
+                  />
+                </FormGroup>
+              </Col>
+              
               <Col sm="12">
                 <FormGroup>
                   <Label>{t("DataCenter.location")}</Label>

src/views/Graphics.js

@@ -18,11 +18,11 @@ import { useSelector, useDispatch } from "react-redux";
 import { useTranslation } from "react-i18next";
 import DataTable from "react-data-table-component";
 import {
-  getOrganisations,
+  getDataCenters,
-  getOrganisationById,
+  getDataCenterVMs,
-} from "../redux/actions/organisations";
+} from "../redux/actions/dataCenter";
-import { getAreasWithCriteria } from "../redux/actions/areas";
+import { getAreasByDataCenter } from "../redux/actions/areas";
-import { getMainDataTables } from "../redux/actions/mainDataTables";
+import { getMainDataTablesByVMs, testMainDataTables } from "../redux/actions/mainDataTables";
 import { editNumbers } from "../components/edit-numbers";
 import { PieChart } from "../components/graphics";
 import ConstantEnergyGraphics from "../components/subSector-graphics/ConstantEnergyGraphics";
@@ -126,7 +126,7 @@ const Graphics = () => {
   const { t } = useTranslation();
   const dispatch = useDispatch();
 
-  const OrganisationsStore = useSelector((state) => state.organizations);
+  const dataCenterStore = useSelector((state) => state.dataCenter);
   const areasStore = useSelector((state) => state.areas);
   const mainDataTablesStore = useSelector((state) => state.mainDataTables);
 
@@ -142,7 +142,7 @@ const Graphics = () => {
   const [transportSubSectorData, setTransportSubSectorData] = useState([]);
   const [wasteData, setWasteData] = useState([]);
 
-  const [organizationOptions, setOrganizationOptions] = useState([]);
+  const [dataCenterOptions, setDataCenterOptions] = useState([]);
   const [areasOptions, setAreasOptions] = useState([]);
   const [filter, setFilter] = useState(false);
   const [filterOptions, setFilterOptions] = useState({
@@ -154,8 +154,8 @@ const Graphics = () => {
     year: "",
   });
 
-  const [selectedOrganization, setSelectedOrganization] = useState("");
+  const [selectedDataCenter, setSelectedDataCenter] = useState("");
-  const organizationId = localStorage.getItem("organizationId");
+  const [dataCenterVMs, setDataCenterVMs] = useState([]);
   const roleTag = localStorage.getItem("roleTag");
 
   const currentYear = new Date().getFullYear();
@@ -241,68 +241,69 @@ const Graphics = () => {
   ];
 
   useEffect(() => {
-    if (roleTag != "SUPER_ADMIN") setSelectedOrganization(organizationId);
+    dispatch(getDataCenters());
-  }, []);
-
-  useEffect(() => {
-    if (roleTag === "SUPER_ADMIN") {
-      dispatch(getOrganisations());
-    } else {
-      dispatch(getOrganisationById(organizationId));
-    }
   }, []);
 
   useEffect(() => {
+    console.log('Data center selection changed:', selectedDataCenter);
+    if (selectedDataCenter?.value) {
+      console.log('Fetching data for data center:', selectedDataCenter.value);
+      // Get areas for the selected data center
       dispatch(
-      getAreasWithCriteria(
+        getAreasByDataCenter(selectedDataCenter.value)
-        selectedOrganization?.value
-          ? selectedOrganization.value
-          : organizationId
-      )
       );
-  }, [selectedOrganization]);
+      
+      // Get VMs for the selected data center
+      getDataCenterVMs(selectedDataCenter.value).then(vms => {
+        console.log('VMs received for data center:', vms);
+        setDataCenterVMs(vms);
+      });
+    } else {
+      console.log('No data center selected');
+      setDataCenterVMs([]);
+    }
+  }, [selectedDataCenter]);
 
   useEffect(() => {
-    if (filterOptions?.year && filterOptions?.area)
+    console.log('Debug useEffect:', {
+      filterOptionsYear: filterOptions?.year,
+      selectedDataCenter: selectedDataCenter,
+      dataCenterVMsLength: dataCenterVMs.length,
+      filter: filter
+    });
+    
+    if (filterOptions?.year && selectedDataCenter && dataCenterVMs.length > 0) {
+      const vmIds = dataCenterVMs.map(vm => vm.id);
+      console.log('Fetching main data tables with VM IDs:', vmIds);
+      console.log('Filter options:', filterOptions);
       dispatch(
-        getMainDataTables({
+        getMainDataTablesByVMs({
+          vmIds,
           filterOptions,
         })
       );
-  }, [filter]);
+    } else {
+      console.log('Conditions not met for fetching data:', {
+        hasYear: !!filterOptions?.year,
+        hasSelectedDataCenter: !!selectedDataCenter,
+        vmCount: dataCenterVMs.length
+      });
+    }
+  }, [filter, dataCenterVMs, dispatch, filterOptions, selectedDataCenter]);
 
   useEffect(() => {
-    let organizationOptions = [];
+    let dataCenterOptions = [];
 
-    if (
+    if (dataCenterStore?.dataCenters && dataCenterStore.dataCenters.length > 0) {
-      OrganisationsStore.organization &&
+      dataCenterOptions = dataCenterStore.dataCenters.map((dataCenter) => ({
-      OrganisationsStore.organization.length !== 0
+        value: dataCenter.id,
-    ) {
+        label: dataCenter.dataCenter,
-      organizationOptions.push({
+        externalId: dataCenter.externalId,
-        value: OrganisationsStore.organization.id,
+      }));
-        label: OrganisationsStore.organization.tag,
-      });
-
-      if (OrganisationsStore.organization.children) {
-        organizationOptions = [
-          ...organizationOptions,
-          ...OrganisationsStore.organization.children.map((organization) => ({
-            value: organization.child.id,
-            label: organization.child.tag,
-          })),
-        ];
-      }
-    } else {
-      organizationOptions = OrganisationsStore.dataOrganization.map(
-        (organization) => ({
-          value: organization.id,
-          label: organization.tag,
-        })
-      );
     }
 
-    setOrganizationOptions(organizationOptions);
+    setDataCenterOptions(dataCenterOptions);
-  }, [OrganisationsStore]);
+  }, [dataCenterStore]);
 
   useEffect(() => {
     setAreasOptions([]);
@@ -359,18 +360,28 @@ const Graphics = () => {
   }, [areasStore]);
 
   useEffect(() => {
+    console.log('mainDataTablesStore changed:', mainDataTablesStore?.mainDataTables);
+    console.log('mainDataTablesStore full state:', mainDataTablesStore);
     if (mainDataTablesStore?.mainDataTables) {
+      console.log('Setting mainDataTablesFilterByYear from store:', mainDataTablesStore.mainDataTables);
       setMainDataTablesFilterByYear(mainDataTablesStore?.mainDataTables);
+    } else {
+      console.log('No mainDataTables in store');
     }
   }, [mainDataTablesStore.mainDataTables]);
 
   useEffect(() => {
+    console.log('mainDataTablesFilterByYear changed:', mainDataTablesFilterByYear);
+    console.log('mainDataTablesFilterByYear length:', mainDataTablesFilterByYear?.length);
+    console.log('mainDataTablesFilterByYear data:', mainDataTablesFilterByYear);
+    
     if (mainDataTablesFilterByYear?.length > 0) {
       let totalConstantEnergy = 0;
       let totalTransport = 0;
       let totalWaste = 0;
 
       for (let i = 0; i < mainDataTablesFilterByYear?.length; i++) {
+        console.log('Processing record:', mainDataTablesFilterByYear[i]);
         if (mainDataTablesFilterByYear[i].sector?.tag === "Sabit Enerji") {
           totalConstantEnergy += mainDataTablesFilterByYear[i].totalEmission;
         }
@@ -382,9 +393,11 @@ const Graphics = () => {
         }
       }
 
+      console.log('Calculated totals:', { totalConstantEnergy, totalTransport, totalWaste });
+
       let total = totalConstantEnergy + totalTransport + totalWaste;
 
-      setMainDataTables([
+      const processedData = [
         {
           sector: { tag: "Sabit Enerji" },
           totalEmission: totalConstantEnergy,
@@ -405,14 +418,22 @@ const Graphics = () => {
           totalEmission: `${editNumbers(total)} tCO₂e`,
           percentage: "100,00%",
         },
-      ]);
+      ];
+
+      console.log('Setting mainDataTables:', processedData);
+      setMainDataTables(processedData);
+    } else {
+      console.log('No mainDataTablesFilterByYear data found. Length:', mainDataTablesFilterByYear?.length);
+      console.log('mainDataTablesStore state:', mainDataTablesStore);
     }
   }, [mainDataTablesFilterByYear]);
 
   useEffect(() => {
+    console.log('mainDataTables changed for pie chart:', mainDataTables);
     let newChartData = mainDataTables.filter(
       (data) => data.sector.tag != "Genel Toplam"
     );
+    console.log('Setting pieChartData:', newChartData);
     setPieChartData(newChartData);
   }, [mainDataTables]);
 
@@ -426,7 +447,7 @@ const Graphics = () => {
     );
 
     const summaryData = {
-      areaName: filterOptions.area.label,
+      areaName: selectedDataCenter?.label || "Seçili Veri Merkezi",
       totalEmission: filteredData.find(
         (data) => data.sector.tag === "Genel Toplam"
       )?.totalEmission,
@@ -443,7 +464,7 @@ const Graphics = () => {
     };
 
     setSummaryData(summaryData);
-  }, [mainDataTables, filterOptions.area.label]);
+  }, [mainDataTables, selectedDataCenter]);
 
   const calculateResult = (data, filterTag) => {
     const filteredData = data.filter((item) => item.sector?.tag === filterTag);
@@ -553,8 +574,15 @@ const Graphics = () => {
   };
 
   const handleBringButtonPressed = () => {
+    console.log('Getir button pressed');
+    console.log('Current state:', {
+      selectedDataCenter,
+      filterOptions,
+      dataCenterVMs,
+      filter
+    });
     setFilter(!filter);
-    //setBringGraphics(true);
+    setBringGraphics(true);
   };
 
   const handleSelect = () => {
@@ -688,27 +716,19 @@ const Graphics = () => {
         </CardHeader>
       </Card>
       <Row className="mx-0 mt-1 mb-50">
-        <Col sm="6" md="5">
+        <Col sm="6" md="6">
           <div className="d-flex align-items-center mb-1">
-            <Label className="mr-1 h5" for="organization-filter">
+            <Label className="mr-1 h5" for="datacenter-filter">
-              {t("DataInput.area")}
+              {t("DataCenter.title")}
             </Label>
             <Select
-              className="react-select w-100 mr-1"
+              className="react-select w-100"
-              id="organization-filter"
+              id="datacenter-filter"
               closeMenuOnSelect={true}
               menuPlacement="auto"
               placeholder=""
               filterOption={customFilterForSelect}
-              defaultValue={
+              options={dataCenterOptions}
-                selectedOrganization
-                  ? selectedOrganization
-                  : {
-                      label: localStorage.getItem("organizationName"),
-                      value: organizationId,
-                    }
-              }
-              options={organizationOptions}
               onChange={(value) => {
                 handleSelect();
                 setFilterOptions({
@@ -719,33 +739,12 @@ const Graphics = () => {
                   neighborhood: "",
                   year: filterOptions.year,
                 });
-                setSelectedOrganization(value);
+                setSelectedDataCenter(value);
-              }}
-            />
-            <Select
-              className="react-select w-100"
-              id="area-filter"
-              closeMenuOnSelect={true}
-              menuPlacement="auto"
-              placeholder=""
-              filterOption={customFilterForSelect}
-              value={filterOptions?.area}
-              options={areasOptions}
-              onChange={(value) => {
-                handleSelect();
-                setFilterOptions({
-                  ...filterOptions,
-                  city: "",
-                  district: "",
-                  neighborhood: "",
-                  area: value,
-                  [value.type]: value.value,
-                });
               }}
             />
           </div>
         </Col>
-        <Col sm="6" md="2">
+        <Col sm="6" md="3">
           <div className="d-flex align-items-center mb-1">
             <Label className="mr-1 h5" for="year-select">
               {t("DataInput.year")}
@@ -776,10 +775,17 @@ const Graphics = () => {
               <Button
                 color="primary"
                 onClick={handleBringButtonPressed}
-                disabled={!(filterOptions.area && filterOptions.year)}
+                disabled={!(selectedDataCenter && filterOptions.year)}
               >
                 <span className="align-middle ml-50">Getir</span>
               </Button>
+              <Button
+                color="secondary"
+                onClick={() => dispatch(testMainDataTables())}
+                className="ml-2"
+              >
+                <span className="align-middle ml-50">Test Data</span>
+              </Button>
             </div>
             {mainDataTables?.length > 1 && (
               <div className="ml-2">
@@ -862,7 +868,7 @@ const Graphics = () => {
                             fontSize: `${isPDFDownloading ? "30px" : ""}`,
                           }}
                         >
-                          {filterOptions.area.label} Sera Gazı Emisyon Dağılımı
+                          {selectedDataCenter?.label || "Seçili Veri Merkezi"} Sera Gazı Emisyon Dağılımı
                         </h5>
                       }
                       className="react-dataTable mt-1 border-black"