city, graphics page, errors on graphics still

sge-backend/src/main/java/com/sgs/graphql/dataCenter/domain/DataCenter.java

@@ -33,6 +33,7 @@ public class DataCenter extends BaseDomain {
     private Double latitude;
     private Double longitude;
     private Area area;
+    private String city;
 
     private List<Project> projects = new ArrayList<>();
     private Sector sector;
@@ -201,4 +202,12 @@ public class DataCenter extends BaseDomain {
     public void setActivitySubUnit(ActivitySubUnit activitySubUnit) {
         this.activitySubUnit = activitySubUnit;
     }
+
+    @Column(name = "city")
+    public String getCity() {
+        return city;
+    }
+    public void setCity(String city) {
+        this.city = city;
+    }
 }

sge-backend/src/main/java/com/sgs/graphql/dataCenter/dto/DataCenterDto.java

@@ -16,6 +16,7 @@ public class DataCenterDto {
     private int id;
     private Integer externalId;
     private Integer number;
+    private String city;
     
     private AreaDto area;
     private List<ProjectDto> projects;
@@ -61,6 +62,13 @@ public class DataCenterDto {
         this.number = number;
     }
 
+    public String getCity() {
+        return city;
+    }
+    public void setCity(String city) {
+        this.city = city;
+    }
+
     public AreaDto getArea() { 
         return area; 
     }

sge-backend/src/main/java/com/sgs/graphql/dataCenter/mutation/DataCenterMutation.java

@@ -11,6 +11,18 @@ import com.sgs.graphql.userHistory.mutation.UserLogger;
 import com.sgs.graphql.userNotification.mutation.UserNotificationMutation;
 import com.sgs.graphql.area.domain.Area;
 import com.sgs.graphql.area.service.AreaService;
+import com.sgs.graphql.emissionScope.domain.EmissionScope;
+import com.sgs.graphql.emissionScope.service.EmissionScopeService;
+import com.sgs.graphql.sector.domain.Sector;
+import com.sgs.graphql.sector.service.SectorService;
+import com.sgs.graphql.subSector.domain.SubSector;
+import com.sgs.graphql.subSector.service.SubSectorService;
+import com.sgs.graphql.emissionSource.domain.EmissionSource;
+import com.sgs.graphql.emissionSource.service.EmissionSourceService;
+import com.sgs.graphql.consuptionUnit.domain.ConsuptionUnit;
+import com.sgs.graphql.consuptionUnit.service.ConsuptionUnitService;
+import com.sgs.graphql.activitySubUnit.domain.ActivitySubUnit;
+import com.sgs.graphql.activitySubUnit.service.ActivitySubUnitService;
 import graphql.kickstart.tools.GraphQLMutationResolver;
 import graphql.schema.DataFetchingEnvironment;
 import org.springframework.beans.factory.annotation.Autowired;
@@ -27,17 +39,32 @@ public class DataCenterMutation implements GraphQLMutationResolver {
     private final DataCenterService dataCenterService;
     private final DataCenterRepo dataCenterRepo;
     private final AreaService areaService;
+    private final EmissionScopeService emissionScopeService;
+    private final SectorService sectorService;
+    private final SubSectorService subSectorService;
+    private final EmissionSourceService emissionSourceService;
+    private final ConsuptionUnitService consuptionUnitService;
+    private final ActivitySubUnitService activitySubUnitService;
     private final SystemLogger systemLogger;
     private final UserLogger userLogger;
     private final UserNotificationMutation notificationMutation;
 
     @Autowired
     public DataCenterMutation(DataCenterService dataCenterService, DataCenterRepo dataCenterRepo, 
-                             AreaService areaService, SystemLogger systemLogger, 
+                             AreaService areaService, EmissionScopeService emissionScopeService,
+                             SectorService sectorService, SubSectorService subSectorService,
+                             EmissionSourceService emissionSourceService, ConsuptionUnitService consuptionUnitService,
+                             ActivitySubUnitService activitySubUnitService, SystemLogger systemLogger, 
                              UserLogger userLogger, UserNotificationMutation notificationMutation) {
         this.dataCenterService = dataCenterService;
         this.dataCenterRepo = dataCenterRepo;
         this.areaService = areaService;
+        this.emissionScopeService = emissionScopeService;
+        this.sectorService = sectorService;
+        this.subSectorService = subSectorService;
+        this.emissionSourceService = emissionSourceService;
+        this.consuptionUnitService = consuptionUnitService;
+        this.activitySubUnitService = activitySubUnitService;
         this.systemLogger = systemLogger;
         this.userLogger = userLogger;
         this.notificationMutation = notificationMutation;
@@ -57,6 +84,8 @@ public class DataCenterMutation implements GraphQLMutationResolver {
             dataCenter.setAddress(input.getAddress());
             dataCenter.setLatitude(input.getLatitude());
             dataCenter.setLongitude(input.getLongitude());
+            dataCenter.setCity(input.getCity());
+            dataCenter.setConsuptionAmount(input.getConsuptionAmount());
             
             // Set area if provided
             if (input.getAreaId() != null) {
@@ -65,6 +94,48 @@ public class DataCenterMutation implements GraphQLMutationResolver {
                 dataCenter.setArea(area);
             }
             
+            // Set emission scope if provided
+            if (input.getEmissionScopeId() != null) {
+                EmissionScope emissionScope = emissionScopeService.findById(input.getEmissionScopeId())
+                        .orElseThrow(() -> new NoSuchElementException("Emission scope not found with id: " + input.getEmissionScopeId()));
+                dataCenter.setEmissionScope(emissionScope);
+            }
+            
+            // Set sector if provided
+            if (input.getSectorId() != null) {
+                Sector sector = sectorService.findById(input.getSectorId())
+                        .orElseThrow(() -> new NoSuchElementException("Sector not found with id: " + input.getSectorId()));
+                dataCenter.setSector(sector);
+            }
+            
+            // Set sub sector if provided
+            if (input.getSubSectorId() != null) {
+                SubSector subSector = subSectorService.findById(input.getSubSectorId())
+                        .orElseThrow(() -> new NoSuchElementException("Sub sector not found with id: " + input.getSubSectorId()));
+                dataCenter.setSubSector(subSector);
+            }
+            
+            // Set emission source if provided
+            if (input.getEmissionSourceId() != null) {
+                EmissionSource emissionSource = emissionSourceService.findById(input.getEmissionSourceId())
+                        .orElseThrow(() -> new NoSuchElementException("Emission source not found with id: " + input.getEmissionSourceId()));
+                dataCenter.setEmissionSource(emissionSource);
+            }
+            
+            // Set consumption unit if provided
+            if (input.getConsuptionUnitId() != null) {
+                ConsuptionUnit consuptionUnit = consuptionUnitService.findById(input.getConsuptionUnitId())
+                        .orElseThrow(() -> new NoSuchElementException("Consumption unit not found with id: " + input.getConsuptionUnitId()));
+                dataCenter.setConsuptionUnit(consuptionUnit);
+            }
+            
+            // Set activity sub unit if provided
+            if (input.getActivitySubUnitId() != null) {
+                ActivitySubUnit activitySubUnit = activitySubUnitService.findById(input.getActivitySubUnitId())
+                        .orElseThrow(() -> new NoSuchElementException("Activity sub unit not found with id: " + input.getActivitySubUnitId()));
+                dataCenter.setActivitySubUnit(activitySubUnit);
+            }
+            
             // Set number if not provided
             if (dataCenter.getNumber() == null) {
                 Integer maxNumber = dataCenterRepo.findMaxNumber();
@@ -121,6 +192,12 @@ public class DataCenterMutation implements GraphQLMutationResolver {
             if (input.getLongitude() != null) {
                 dataCenter.setLongitude(input.getLongitude());
             }
+            if (input.getCity() != null) {
+                dataCenter.setCity(input.getCity());
+            }
+            if (input.getConsuptionAmount() != null) {
+                dataCenter.setConsuptionAmount(input.getConsuptionAmount());
+            }
             
             // Update area if provided
             if (input.getAreaId() != null) {
@@ -129,6 +206,48 @@ public class DataCenterMutation implements GraphQLMutationResolver {
                 dataCenter.setArea(area);
             }
             
+            // Update emission scope if provided
+            if (input.getEmissionScopeId() != null) {
+                EmissionScope emissionScope = emissionScopeService.findById(input.getEmissionScopeId())
+                        .orElseThrow(() -> new NoSuchElementException("Emission scope not found with id: " + input.getEmissionScopeId()));
+                dataCenter.setEmissionScope(emissionScope);
+            }
+            
+            // Update sector if provided
+            if (input.getSectorId() != null) {
+                Sector sector = sectorService.findById(input.getSectorId())
+                        .orElseThrow(() -> new NoSuchElementException("Sector not found with id: " + input.getSectorId()));
+                dataCenter.setSector(sector);
+            }
+            
+            // Update sub sector if provided
+            if (input.getSubSectorId() != null) {
+                SubSector subSector = subSectorService.findById(input.getSubSectorId())
+                        .orElseThrow(() -> new NoSuchElementException("Sub sector not found with id: " + input.getSubSectorId()));
+                dataCenter.setSubSector(subSector);
+            }
+            
+            // Update emission source if provided
+            if (input.getEmissionSourceId() != null) {
+                EmissionSource emissionSource = emissionSourceService.findById(input.getEmissionSourceId())
+                        .orElseThrow(() -> new NoSuchElementException("Emission source not found with id: " + input.getEmissionSourceId()));
+                dataCenter.setEmissionSource(emissionSource);
+            }
+            
+            // Update consumption unit if provided
+            if (input.getConsuptionUnitId() != null) {
+                ConsuptionUnit consuptionUnit = consuptionUnitService.findById(input.getConsuptionUnitId())
+                        .orElseThrow(() -> new NoSuchElementException("Consumption unit not found with id: " + input.getConsuptionUnitId()));
+                dataCenter.setConsuptionUnit(consuptionUnit);
+            }
+            
+            // Update activity sub unit if provided
+            if (input.getActivitySubUnitId() != null) {
+                ActivitySubUnit activitySubUnit = activitySubUnitService.findById(input.getActivitySubUnitId())
+                        .orElseThrow(() -> new NoSuchElementException("Activity sub unit not found with id: " + input.getActivitySubUnitId()));
+                dataCenter.setActivitySubUnit(activitySubUnit);
+            }
+            
             // Save the updated data center
             DataCenter updatedDataCenter = dataCenterService.save(dataCenter);
             

sge-backend/src/main/java/com/sgs/graphql/dataCenter/mutation/input/DataCenterInput.java

@@ -13,6 +13,14 @@ public class DataCenterInput extends BaseCreateInput {
     private Double latitude;
     private Double longitude;
     private UUID areaId;
+    private String city;
+    private UUID emissionScopeId;
+    private UUID sectorId;
+    private UUID subSectorId;
+    private UUID emissionSourceId;
+    private UUID consuptionUnitId;
+    private Double consuptionAmount;
+    private UUID activitySubUnitId;
 
     public String getDataCenter() {
         return dataCenter;
@@ -77,5 +85,69 @@ public class DataCenterInput extends BaseCreateInput {
     public void setAreaId(UUID areaId) {
         this.areaId = areaId;
     }
+
+    public String getCity() {
+        return city;
+    }
+
+    public void setCity(String city) {
+        this.city = city;
+    }
+
+    public UUID getEmissionScopeId() {
+        return emissionScopeId;
+    }
+
+    public void setEmissionScopeId(UUID emissionScopeId) {
+        this.emissionScopeId = emissionScopeId;
+    }
+
+    public UUID getSectorId() {
+        return sectorId;
+    }
+
+    public void setSectorId(UUID sectorId) {
+        this.sectorId = sectorId;
+    }
+
+    public UUID getSubSectorId() {
+        return subSectorId;
+    }
+
+    public void setSubSectorId(UUID subSectorId) {
+        this.subSectorId = subSectorId;
+    }
+
+    public UUID getEmissionSourceId() {
+        return emissionSourceId;
+    }
+
+    public void setEmissionSourceId(UUID emissionSourceId) {
+        this.emissionSourceId = emissionSourceId;
+    }
+
+    public UUID getConsuptionUnitId() {
+        return consuptionUnitId;
+    }
+
+    public void setConsuptionUnitId(UUID consuptionUnitId) {
+        this.consuptionUnitId = consuptionUnitId;
+    }
+
+    public Double getConsuptionAmount() {
+        return consuptionAmount;
+    }
+
+    public void setConsuptionAmount(Double consuptionAmount) {
+        this.consuptionAmount = consuptionAmount;
+    }
+
+    public UUID getActivitySubUnitId() {
+        return activitySubUnitId;
+    }
+
+    public void setActivitySubUnitId(UUID activitySubUnitId) {
+        this.activitySubUnitId = activitySubUnitId;
+    }
 }
 

sge-backend/src/main/java/com/sgs/graphql/mainDataTable/repo/criteria/MainDataTableCriteria.java

@@ -12,6 +12,7 @@ public class MainDataTableCriteria extends BaseCriteria {
     private UUID neighborhood;
     private UUID organization;
     private String year;
+    private UUID vm;
 
     public UUID getSector() {
         return sector;
@@ -68,4 +69,12 @@ public class MainDataTableCriteria extends BaseCriteria {
     public void setYear(String year) {
         this.year = year;
     }
+
+    public UUID getVm() {
+        return vm;
+    }
+
+    public void setVm(UUID vm) {
+        this.vm = vm;
+    }
 }

sge-backend/src/main/java/com/sgs/graphql/mainDataTable/repo/criteria/spec/MainDataTableCriteriaSpec.java

@@ -38,6 +38,10 @@ public class MainDataTableCriteriaSpec extends BaseCriteriaSpec<MainDataTable, M
         return (year == null) ? null : (Specification<MainDataTable>) (root, query, criteriaBuilder) -> criteriaBuilder.equal(root.get("year"), year);
     }
 
+    public static Specification<MainDataTable> vm(UUID vm) {
+        return (vm == null) ? null : (Specification<MainDataTable>) (root, query, criteriaBuilder) -> criteriaBuilder.equal(root.join("vm").get("id"), vm);
+    }
+
     @Override
     public Specification<MainDataTable> createForAll(MainDataTableCriteria criteria) {
         return Specification.where(sector(criteria.getSector()))
@@ -45,6 +49,7 @@ public class MainDataTableCriteriaSpec extends BaseCriteriaSpec<MainDataTable, M
                 .and(district(criteria.getDistrict()))
                 .and(neighborhood(criteria.getNeighborhood()))
                 .and(organization(criteria.getOrganization()))
-                .and(year(criteria.getYear()));
+                .and(year(criteria.getYear()))
+                .and(vm(criteria.getVm()));
     }
 }

sge-backend/src/main/resources/graphql/dataCenter/type.graphqls

@@ -102,4 +102,12 @@ input DataCenterInput {
     latitude: Float
     longitude: Float
     areaId: ID
+    city: String
+    emissionScopeId: ID
+    sectorId: ID
+    subSectorId: ID
+    emissionSourceId: ID
+    consuptionUnitId: ID
+    consuptionAmount: Float
+    activitySubUnitId: ID
 }

sge-backend/src/main/resources/graphql/mainDataTable/criteria.graphqls

@@ -6,4 +6,5 @@ input MainDataTableCriteria{
     neighborhood:ID
     organization:ID
     year:String
+    vm:ID
 }

sge-backend/src/main/resources/graphql/mainDataTable/type.graphqls

@@ -26,23 +26,7 @@ type MainDataTable {
     proteinAmount:Float
     burnOrOpenBurn:Boolean
     scopeCheck:Boolean
-
+    vm: VM
-}
-
-type Vm {
-    id: ID
-    status: String
-    name: String
-    power: Float
-    calcOn: Boolean
-    config: Config
-}
-
-type Config {
-    id: ID
-    cpu: Int
-    ram: Int
-    disk: Int
 }
 
 type VMEmissionSummary {

sge-frontend/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:");

sge-frontend/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([]);
+    }
+  });
+};

sge-frontend/src/redux/actions/datas/index.js

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

sge-frontend/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);
+    }
+  };
+};

sge-frontend/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 {

sge-frontend/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>

sge-frontend/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") {
+    console.log('Data center selection changed:', selectedDataCenter);
-      dispatch(getOrganisations());
+    if (selectedDataCenter?.value) {
-    } else {
+      console.log('Fetching data for data center:', selectedDataCenter.value);
-      dispatch(getOrganisationById(organizationId));
+      // Get areas for the selected data center
-    }
-  }, []);
-
-  useEffect(() => {
-    dispatch(
-      getAreasWithCriteria(
-        selectedOrganization?.value
-          ? selectedOrganization.value
-          : organizationId
-      )
-    );
-  }, [selectedOrganization]);
-
-  useEffect(() => {
-    if (filterOptions?.year && filterOptions?.area)
       dispatch(
-        getMainDataTables({
+        getAreasByDataCenter(selectedDataCenter.value)
+      );
+      
+      // 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(() => {
+    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(
+        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"