fixing dashboard

packages/admin/src/data/constant/app-constant.tsx

 // export const AUTH_TOKEN: string = "token";
 export const Default_Language: string = "app-language";
 export const ApiGatewayURL: string = `http://localhost:6644`;
-export const TrapURL: string = `http://localhost:6644/api/rethink/data`;
+export const TrapURL: string = `http://localhost:6644/api/rethink`;
 export const SettingURL: string = `http://localhost:6644/api/about`;
 export const AuthURL: string = "http://localhost:6644/auth/";
 export const UserURL: string = `http://localhost:6644/users/`;

packages/admin/src/features/dashboard/card-lineChart.tsx

-import React, { Component } from "react";
+import React, { Component, useEffect, useState } from "react";
 import Chart from "chart.js/auto";
-
+import { useCookies } from "react-cookie";
+import { getSeverityStatistics } from "../../services/traps-service";
 
 export default function CardLineChart() {
-  React.useEffect(() => {
-    var config = {
-      type: "line",
-      data: {
-        labels: [
-          "January",
-          "February",
-          "March",
-          "April",
-          "May",
-          "June",
-          "July",
-        ],
-        datasets: [
-          {
-            label: "WARNING",
-            backgroundColor: "#fadb14",
-            borderColor: "#fadb14",
-            data: [65, 78, 66, 44, 56, 67, 75],
-            fill: false,
-          },
-          {
-            label: "INFO",
-            backgroundColor: "#10B981",
-            borderColor: "#10B981",
-            data: [65, 78, 76, 34, 46, 67, 85],
-            fill: false,
-          },
-          {
-            label: "ERROR",
-            fill: false,
-            backgroundColor: "#EF4444",
-            borderColor: "#EF4444",
-            data: [40, 68, 86, 74, 56, 60, 87],
-          },
-        ],
-      },
-      options: {
-        maintainAspectRatio: false,
-        responsive: true,
-        title: {
-          display: false,
-          text: "Severity traps Charts",
-          fontColor: "white",
+  const [data, setData] = useState([]);
+  const [cookies] = useCookies([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await getSeverityStatistics(cookies["token"]);
+        console.log(response);
+        setData(response);
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+    };
+
+    fetchData();
+  }, []);
+  useEffect(() => {
+    const severityColors:any = {
+      WARNING: "#fadb14",
+      INFO: "#10B981",
+      ERROR: "#EF4444",
+    };
+    if (window.myLine) {
+      window.myLine.destroy();
+    }
+    // Check if data has been fetched and is not an empty object
+    if (Object.keys(data).length > 0) {
+      const labels = Object.keys(data).sort(); // Use the sorted timestamps as labels
+
+      const datasets = Object.keys(severityColors).map((severity) => ({
+        label: severity,
+        backgroundColor: severityColors[severity],
+        borderColor: severityColors[severity],
+        data: labels.map((timestamp) => data[timestamp][severity] || 0),
+        fill: false,
+      }));
+      var config = {
+        type: "line",
+        data: {
+          labels: labels.map((timestamp) =>
+            new Date(timestamp).toLocaleTimeString() 
+          ),
+          datasets: datasets,
         },
-        legend: {
-          labels: {
+        options: {
+          maintainAspectRatio: false,
+          responsive: true,
+          title: {
+            display: false,
+            text: "Severity traps Charts",
             fontColor: "white",
           },
-          align: "end",
-          position: "bottom",
-        },
-        tooltips: {
-          mode: "index",
-          intersect: false,
-        },
-        hover: {
-          mode: "nearest",
-          intersect: true,
-        },
-        scales: {
-          xAxes: [
-            {
-              ticks: {
-                fontColor: "rgba(255,255,255,.7)",
-              },
-              display: true,
-              scaleLabel: {
-                display: false,
-                labelString: "Month",
-                fontColor: "white",
-              },
-              gridLines: {
-                display: false,
-                borderDash: [2],
-                borderDashOffset: [2],
-                color: "rgba(33, 37, 41, 0.3)",
-                zeroLineColor: "rgba(0, 0, 0, 0)",
-                zeroLineBorderDash: [2],
-                zeroLineBorderDashOffset: [2],
-              },
+          legend: {
+            labels: {
+              fontColor: "white",
             },
-          ],
-          yAxes: [
-            {
-              ticks: {
-                fontColor: "rgba(255,255,255,.7)",
-              },
-              display: true,
-              scaleLabel: {
-                display: false,
-                labelString: "Value",
-                fontColor: "white",
+            align: "end",
+            position: "bottom",
+          },
+          tooltips: {
+            mode: "index",
+            intersect: false,
+          },
+          hover: {
+            mode: "nearest",
+            intersect: true,
+          },
+          scales: {
+            xAxes: [
+              {
+                ticks: {
+                  fontColor: "rgba(255,255,255,.7)",
+                },
+                display: true,
+                scaleLabel: {
+                  display: false,
+                  labelString: "Month",
+                  fontColor: "white",
+                },
+                gridLines: {
+                  display: false,
+                  borderDash: [2],
+                  borderDashOffset: [2],
+                  color: "rgba(33, 37, 41, 0.3)",
+                  zeroLineColor: "rgba(0, 0, 0, 0)",
+                  zeroLineBorderDash: [2],
+                  zeroLineBorderDashOffset: [2],
+                },
               },
-              gridLines: {
-                borderDash: [3],
-                borderDashOffset: [3],
-                drawBorder: false,
-                color: "rgba(255, 255, 255, 0.15)",
-                zeroLineColor: "rgba(33, 37, 41, 0)",
-                zeroLineBorderDash: [2],
-                zeroLineBorderDashOffset: [2],
+            ],
+            yAxes: [
+              {
+                ticks: {
+                  fontColor: "rgba(255,255,255,.7)",
+                },
+                display: true,
+                scaleLabel: {
+                  display: false,
+                  labelString: "Value",
+                  fontColor: "white",
+                },
+                gridLines: {
+                  borderDash: [3],
+                  borderDashOffset: [3],
+                  drawBorder: false,
+                  color: "rgba(255, 255, 255, 0.15)",
+                  zeroLineColor: "rgba(33, 37, 41, 0)",
+                  zeroLineBorderDash: [2],
+                  zeroLineBorderDashOffset: [2],
+                },
               },
-            },
-          ],
+            ],
+          },
         },
-      },
-    };
+      };
+    }
     var ctx = document.getElementById("line-chart").getContext("2d");
     window.myLine = new Chart(ctx, config);
-  }, []);
+  }, [data]);
   return (
     <>
       <div className="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded primary-blue-600">
@@ -123,12 +132,13 @@ export default function CardLineChart() {
               <h6 className="uppercase text-blueGray-100 mb-1 text-xs font-semibold">
                 Overview
               </h6>
-              <h2 className="text-white text-xl font-semibold">Severity traps Charts</h2>
+              <h2 className="text-white text-xl font-semibold">
+                Severity traps Charts
+              </h2>
             </div>
           </div>
         </div>
         <div className="p-4 flex-auto">
-          {/* Chart */}
           <div className="relative h-350-px">
             <canvas id="line-chart"></canvas>
           </div>
@@ -136,4 +146,4 @@ export default function CardLineChart() {
       </div>
     </>
   );
-}
+}
\ No newline at end of file

packages/admin/src/features/dashboard/card-users.tsx

-import React from "react";
+import React, {useState, useEffect} from "react";
 import FmsTable from "../../../../shared-library/src/tables/fms-table";
-// import { DataSource } from "../show-users/data-source";
 import useTranslation from "next-translate/useTranslation";
 import { TranslationFiles } from "@/src/data/core";
 import FmsButton from "../../../../shared-library/src/buttons/fms-button";
 import { useRouter } from "next/router";
-// components
-
+import { getAllUsers, deleteUser } from "@/src/services/user-service";
+import { useCookies } from "react-cookie";
 export default function CardUsers() {
   const Columns = [
-    { title: 'Name', dataIndex: 'name', key: 'name' },
-    { title: 'Age', dataIndex: 'age', key: 'age' },
+    { title: 'username', dataIndex: 'username', key: 'username' },
+    { title: 'role', dataIndex: 'role', key: 'role' },
   ];
   const { t } = useTranslation(TranslationFiles.COMMON);
   const router = useRouter();
+  const [data, setData] = useState([]);
+const [cookies] = useCookies([]);
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await getAllUsers(cookies["token"], cookies["role"]);
+        setData(response); 
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      }
+    };
+
+    fetchData();
+  }, []);
   return (
     <>
       <div className="relative flex flex-col min-w-0 break-words bg-white w-full mb-6 shadow-lg rounded">
-        {/* <div className="rounded-t mb-0 px-4 py-3 border-0"> */}
-          {/* <div className="flex flex-wrap items-center"> */}
-            {/* <div className="relative w-full px-4 max-w-full flex-grow flex-1">
-              <h3 className="font-semibold text-base text-blueGray-700">
-                Page visits
-              </h3>
-            </div> */}
-           
-          {/* </div> */}
-        {/* </div> */}
         <div className="block w-full overflow-x-auto">
            <div className=" w-full px-4 max-w-full flex-grow flex-1 text-right">
               <FmsButton
@@ -40,16 +43,15 @@ export default function CardUsers() {
                 {"See all".toUpperCase()}
               </FmsButton>
             </div>
-          {/* <FmsTable
+          <FmsTable
             title={"users"}
             columns={Columns}
-            data={DataSource}
+            data={data}
             pageSizeOptions={["3", "5", "7"]}
             defaultPageSize={3}
-            // t={t}
-            // setData={setData}
-            // setColumns={setColumns}
-          /> */}
+            className={"dash-table"}
+            scroll={{ x: false }}
+          />
         </div>
       </div>
     </>

packages/admin/src/features/show-users/index.tsx

@@ -18,7 +18,6 @@ const [modalProps, setModalProps] = useState({
 const [data, setData] = useState([]);
 const [selectedRowKeys, setSelectedRowKeys] = useState<string[]>([]);
 const [cookies] = useCookies([]);
-  // Fetch data when the component mounts using useEffect
   useEffect(() => {
     const fetchData = async () => {
       try {

packages/admin/src/services/traps-service.tsx

@@ -2,7 +2,7 @@ import axios from "axios";
 import {TrapURL} from "../data/constant/app-constant";
 export const fetchData = async (token:any) => {
   try {
-    const response = await axios.get(TrapURL,{
+    const response = await axios.get(TrapURL+"/data",{
       headers: {
         Authorization: `Bearer ${token}`,
       },
@@ -24,4 +24,17 @@ export const fetchData = async (token:any) => {
   } catch (error) {
     console.log(error);
   }
+};
+export const getSeverityStatistics = async (token:any) => {
+  try {
+    const response = await axios.get(TrapURL+ "/severity-statistics",{
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    // console.log("response: "+response);
+    return response.data;
+  } catch (error) {
+    console.log(error);
+  }
 };
\ No newline at end of file

packages/shared-library/globals.css

@@ -134,3 +134,6 @@
   line-height: 20px !important;
   color: var(--primary-gray-600) !important;
 }
+.dash-table{
+  width: fit-content;
+}
\ No newline at end of file

packages/shared-library/src/tables/fms-table.tsx

@@ -15,6 +15,8 @@ interface fmsTableProps {
   rowSelection:any;
   pageSizeOptions:Array<string>;
   defaultPageSize:any;
+  className?: string;
+  scroll?: any;
 }
 const FmsTable: FunctionComponent<fmsTableProps> = ({
   title,
@@ -26,8 +28,10 @@ const FmsTable: FunctionComponent<fmsTableProps> = ({
   rowSelection,
   pageSizeOptions,
   defaultPageSize,
+  className,
+  scroll
 }) => {
- 
+  const combinedClassName = `fms-table ${className || ""}`;
   return (
     <div data-testid="fms-table">
       <div className={classes.tableTitleContainer}>
@@ -46,7 +50,7 @@ const FmsTable: FunctionComponent<fmsTableProps> = ({
         dataSource={data}
         rowSelection = {rowSelection}
         bordered
-        scroll={{ x: 1000 }}
+        scroll={{ x: scroll }}
         pagination={{ position: ['bottomLeft'], 
         pageSizeOptions: pageSizeOptions,
         showSizeChanger: true, locale: { items_per_page: "" },