fixed issue GUI and Datacenter tab related

sge-frontend/src/views/DataSet/MainDataTables.js

@@ -3,7 +3,7 @@ import { MaterialReactTable } from "material-react-table";
 import { useDispatch, useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
 import { Card, CardHeader, CardTitle, Alert } from "reactstrap";
-import { getVMEmissionSummary } from "../../redux/actions/mainDataTables/index";
+import { getMainDataTablesWithPaginate } from "../../redux/actions/mainDataTables/index";
 import { editNumbers } from "../../components/edit-numbers";
 
 function MainDataTables() {
@@ -13,13 +13,18 @@ function MainDataTables() {
   const [error, setError] = useState(null);
 
   useEffect(() => {
-    try {
-      // Fetch VM emission data
-      dispatch(getVMEmissionSummary());
-    } catch (err) {
-      console.error('Error in MainDataTables:', err);
-      setError(err.message);
-    }
+    const fetchData = async () => {
+      try {
+        setLoading(true);
+        await dispatch(getMainDataTablesWithPaginate());
+      } catch (err) {
+        console.error('Error in MainDataTables:', err);
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchData();
   }, [dispatch]);
 
   // Debug log for store data
@@ -27,44 +32,46 @@ function MainDataTables() {
     console.log('Current store data:', mainDataTablesStore);
   }, [mainDataTablesStore]);
 
+  const [loading, setLoading] = useState(true);
+
   const columns = [
     {
-      header: "VM ID",
-      accessorKey: "vmId",
+      header: t("ID"),
+      accessorKey: "id",
       Cell: ({ cell }) => <span>{cell.getValue() || "-"}</span>,
     },
     {
-      header: "Data Center",
-      accessorKey: "dataCenter",
+      header: t("Year"),
+      accessorKey: "year",
       Cell: ({ cell }) => <span>{cell.getValue() || "-"}</span>,
     },
     {
-      header: "Project",
-      accessorKey: "project",
-      Cell: ({ cell }) => <span>{cell.getValue() || "-"}</span>,
+      header: t("Sector"),
+      accessorKey: "sector",
+      Cell: ({ cell, row }) => <span>{row.original?.sector?.tag || "-"}</span>,
     },
     {
-      header: "Physical Machine",
-      accessorKey: "physicalMachine",
-      Cell: ({ cell }) => <span>{cell.getValue() || "-"}</span>,
+      header: t("Sub Sector"),
+      accessorKey: "subSector",
+      Cell: ({ cell, row }) => <span>{row.original?.subSector?.tag || "-"}</span>,
     },
     {
-      header: "Virtual Machine",
-      accessorKey: "vmName",
-      Cell: ({ cell }) => <span>{cell.getValue() || "-"}</span>,
+      header: t("Activity Sub Unit"),
+      accessorKey: "activitySubUnit",
+      Cell: ({ cell, row }) => <span>{row.original?.activitySubUnit?.tag || "-"}</span>,
     },
     {
-      header: "VM Power (W)",
-      accessorKey: "vmPower",
-      Cell: ({ cell }) => <span>{editNumbers(cell.getValue()) || "-"}</span>,
+      header: t("Emission Source"),
+      accessorKey: "emissionSource",
+      Cell: ({ cell, row }) => <span>{row.original?.emissionSource?.tag || "-"}</span>,
     },
     {
-      header: "VM Status",
-      accessorKey: "vmStatus",
-      Cell: ({ cell }) => <span>{cell.getValue() || "-"}</span>,
+      header: t("Emission Scope"),
+      accessorKey: "emissionScope",
+      Cell: ({ cell, row }) => <span>{row.original?.emissionScope?.tag || "-"}</span>,
     },
     {
-      header: "Total Emissions",
+      header: t("Total Emission"),
       accessorKey: "totalEmission",
       Cell: ({ cell }) => <span>{editNumbers(cell.getValue()) || "-"}</span>,
     },
@@ -84,17 +91,18 @@ function MainDataTables() {
       Cell: ({ cell }) => <span>{editNumbers(cell.getValue()) || "-"}</span>,
     },
     {
-      header: "Created Date",
+      header: t("Created Date"),
       accessorKey: "createdDate",
       Cell: ({ cell }) => (
         <span>
           {cell.getValue() ? new Date(cell.getValue()).toLocaleString() : "-"}
         </span>
       ),
+      sortable: true,
     },
   ];
 
-  const tableData = mainDataTablesStore?.vmEmissionSummary || [];
+  const tableData = mainDataTablesStore?.mainDataTablesWithPaginate?.content || [];
   console.log('VM Emission data:', tableData);
 
   if (error) {
@@ -109,7 +117,7 @@ function MainDataTables() {
     <div style={{ marginTop: "2%" }}>
       <Card>
         <CardHeader className="border-bottom">
-          <CardTitle tag="h4">{t("Carbon Emission Data")}</CardTitle>
+          <CardTitle tag="h4">{t("Raw Data")}</CardTitle>
         </CardHeader>
         <MaterialReactTable
           columns={columns}
@@ -137,7 +145,9 @@ function MainDataTables() {
             density: 'compact'
           }}
           state={{
-            isLoading: !mainDataTablesStore?.vmEmissionSummary
+            isLoading: loading,
+            showProgressBars: true,
+            showSkeletons: true,
           }}
         />
       </Card>