Some Cleaning

packages/admin/pages/user/dashboard/index.tsx

 import * as React from "react";
 import Head from "next/head";
 import UserLayout from "../../../src/components/user-layout";
-import  DashboardComponent from "@/src/features/dashboard";
+import  DashboardComponent from "@/src/features/dashboard/user-dashborad";
 import { Fragment } from "react";
 import useTranslation from "next-translate/useTranslation";
 import { TranslationFiles } from "@/src/data/core";

packages/admin/src/components/layout/components/header/index.tsx

@@ -44,7 +44,8 @@ export default function AppHeader({ toggleCollapse }: AppHeaderProps) {
   //   };
   // }, []);
   const openKibana = () => {
-    window.open("http://172.29.3.220:5601", "_blank");
+    window.open("http://172.29.3.220:5601/app/dashboards#/view/575a6de0-37b0-11ee-9da0-7bf1d89a35bd?_g=(filters:!(),refreshInterval:(pause:!t,value:60000),time:(from:'2019-01-01T17:42:05.000Z',to:'2019-09-27T22:47:04.000Z'))"
+    , "_blank");
   };
 
 
@@ -61,7 +62,9 @@ export default function AppHeader({ toggleCollapse }: AppHeaderProps) {
         <Col span={12}>
           <Row gutter={8} align={"middle"} justify={"end"}>
           <Col className={"app-notifications"}>
-          <a href="http://172.29.3.220:5601" target="_blank" onClick={openKibana}>
+          <a 
+          href="http://172.29.3.220:5601/app/dashboards#/view/575a6de0-37b0-11ee-9da0-7bf1d89a35bd?_g=(filters:!(),refreshInterval:(pause:!t,value:60000),time:(from:'2019-01-01T17:42:05.000Z',to:'2019-09-27T22:47:04.000Z'))"
+           target="_blank" onClick={openKibana}>
           <img src="/images/elasticsearch.svg" alt="Kibana" style={{ width: "40px", height: "30px" }} title="Archive"/>
               </a>
             </Col>

packages/admin/src/components/user-layout/components/header/index.tsx

@@ -42,7 +42,8 @@ export default function AppHeader() {
   //   };
   // }, []);
   const openKibana = () => {
-    window.open("http://172.29.3.220:5601", "_blank");
+    window.open("http://172.29.3.220:5601/app/dashboards#/view/575a6de0-37b0-11ee-9da0-7bf1d89a35bd?_g=(filters:!(),refreshInterval:(pause:!t,value:60000),time:(from:'2019-01-01T17:42:05.000Z',to:'2019-09-27T22:47:04.000Z'))",
+     "_blank");
   };
 
   return (
@@ -58,7 +59,9 @@ export default function AppHeader() {
         <Col span={12}>
           <Row gutter={8} align={"middle"} justify={"end"}>
           <Col className={"app-notifications"}>
-          <a href="http://172.29.3.220:5601" target="_blank" onClick={openKibana}>
+          <a 
+          href="http://172.29.3.220:5601/app/dashboards#/view/575a6de0-37b0-11ee-9da0-7bf1d89a35bd?_g=(filters:!(),refreshInterval:(pause:!t,value:60000),time:(from:'2019-01-01T17:42:05.000Z',to:'2019-09-27T22:47:04.000Z'))"
+           target="_blank" onClick={openKibana}>
           <img src="/images/elasticsearch.svg" alt="Kibana" style={{ width: "40px", height: "30px" }} title="Archive"/>
               </a>
             </Col>

packages/admin/src/components/user-layout/components/header/nav-bar/index.tsx

@@ -25,12 +25,12 @@ const NavBar = () => {
         <Menu.Item key="dashboard"  icon={<FundOutlined 
         style={{ fontSize: "20px", color: "#000" }}
         className={"ExclamationCircleOutlined "}/>}>
-          {t("dashborad")}
+          {t("dashboard")}
         </Menu.Item>
         <Menu.Item key="traps"  icon={<ExceptionOutlined 
         style={{ fontSize: "20px", color: "#000" }}
         className={"ExclamationCircleOutlined "}/>}>
-          {("trap-data")}
+          {t("traps")}
         </Menu.Item>
         <Menu.Item key="profile"  icon={<UserOutlined 
         style={{ fontSize: "20px", color: "#000" }}

packages/admin/src/components/user-layout/index.tsx

-import React, { ReactNode, useState } from "react";
+import React, { ReactNode, useEffect, useContext  } from "react";
 import { Layout } from "antd";
 import AppContentView from "./components/content-view";
 import AppHeader from "./components/header";
-
+import { useCookies } from "react-cookie";
+import DataContext from "../../context/trap-context";
+import { fetchData } from "../../services/traps-service";
+import { ApiGatewayURL } from "@/src/data/constant/app-constant";
 type AppLayoutProps = {
   children: ReactNode;
 };
 const UserLayout = ({ children }: AppLayoutProps) => {
+  const { data, setData } = useContext(DataContext);
+  const [cookies, setCookie, removeCookie] = useCookies([]);
+  useEffect(() => {
+    const handleBeforeUnload = () => {
+      removeCookie("fetch");
+    };
+
+    window.addEventListener("beforeunload", handleBeforeUnload);
+
+    if (!cookies["fetch"] ) {
+      const fetchData1 = async () => {
+        try {
+          const response = await fetchData(cookies["token"]);
+          setData(response);
+          setCookie("fetch", 1);
+        } catch (error) {
+          console.error("Error fetching data:", error);
+        }
+      };
+
+      fetchData1();
+    }
+
+    const authToken = `${cookies["token"]}`;
+    const source = new EventSource(
+      `${ApiGatewayURL}/api/notifications/sub?token=${authToken}`
+    );
+
+    source.addEventListener("open", () => {
+      console.log("SSE opened!");
+    });
+
+    source.addEventListener("message", (e) => {
+      const message = JSON.parse(e.data);
+      console.log(message);
+      if (message.new_val != null) {
+        const newData = message.new_val;
+        setData((prevData: any) => [...prevData, newData]);
+      } else {
+        setData((prevData: any) =>
+          prevData.filter((item: any) => item.id !== message.old_val.id)
+        );
+      }
+    });
+
+    source.addEventListener("error", (e) => {
+      console.error("Error: ", e);
+    });
+
+    return () => {
+      source.close();
+      window.removeEventListener("beforeunload", handleBeforeUnload); // Remove the event listener
+      console.log("SSE closed ");
+    };
+  }, []);
+
   return (
     <div className={"app-layout"}>
       <Layout className={"app-layout-mini-sidebar"}>

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

@@ -30,7 +30,7 @@ export default function CardBarChart({errorTrapCount, warnTrapCount, infoTrapCou
             borderColor: "#000f24",
             data: [errorTrapCount/trapCount, warnTrapCount/trapCount, infoTrapCount/trapCount],
             fill: false,
-            barThickness: 40,
+            barThickness: 50,
           }
         ],
       },

packages/admin/src/features/dashboard/user-dashborad.tsx

-import React from "react";
+import React, {useEffect, useState} from "react";
 import CardLineChart from "./card-lineChart";
 import CardBarChart from "./card-barChart";
 import useTranslation from "next-translate/useTranslation";
 import { TranslationFiles } from "@/src/data/core";
-import CardUsers from "./card-users";
-import CardStats from './card-stats'
-const DashboardComponent = () => {
+import { getAdminsCount, getUsersCount } from "@/src/services/user-service";
+import {getTrapsCount, getErrorTrapCount, getWarningTrapCount, getInfoTrapCount} from "@/src/services/traps-service";
+import { useCookies } from "react-cookie";
+const UserDashboardComponent = () => {
     const { t } = useTranslation(TranslationFiles.COMMON);
+    const [cookies] = useCookies([]);
+    const [trapCount, setTrapCount] = useState([]);
+    const [errorTrapCount, setErrorTrapCount] = useState([]);
+    const [warnTrapCount, setWarnTrapCount] = useState([]);
+    const [infoTrapCount, setInfoTrapCount] = useState([]);
+    useEffect(() => {
+      
+      async function fetchTrapsCount() {
+        try {
+          const response2 = await getTrapsCount(cookies["token"]);
+          setTrapCount(response2)
+        } catch (error) {
+          console.log("error:"+error);
+        }
+      }
+      async function fetchErrorTrapsCount() {
+        try {
+          const response2 = await getErrorTrapCount(cookies["token"]);
+          setErrorTrapCount(response2)
+        } catch (error) {
+          console.log("error:"+error);
+        }
+      }
+      async function fetchWarnignTrapsCount() {
+        try {
+          const response2 = await getWarningTrapCount(cookies["token"]);
+          setWarnTrapCount(response2)
+        } catch (error) {
+          console.log("error:"+error);
+        }
+      }
+      async function fetchInfoTrapsCount() {
+        try {
+          const response2 = await getInfoTrapCount(cookies["token"]);
+          setInfoTrapCount(response2)
+        } catch (error) {
+          console.log("error:"+error);
+        }
+      }
+
+      fetchTrapsCount();
+      fetchErrorTrapsCount();
+      fetchWarnignTrapsCount();
+      fetchInfoTrapsCount();
+    }, []);
     return (
       <>
       <div className="flex flex-wrap">
-              <div className="w-full lg:w-6/12 xl:w-3/12 px-4">
-                <CardStats
-                  statSubtitle="TRAFFIC"
-                  statTitle="350,897"
-                  statArrow="up"
-                  statPercent="3.48"
-                  statPercentColor="text-emerald-500"
-                  statDescripiron="Since last month"
-                  statIconName="far fa-chart-bar"
-                  statIconColor="bg-red-500"
-                />
-              </div>
-              <div className="w-full lg:w-6/12 xl:w-3/12 px-4">
-                <CardStats
-                  statSubtitle="USERS"
-                  statTitle="2,356"
-                  statArrow="down"
-                  statPercent="3.48"
-                  statPercentColor="text-red-500"
-                  statDescripiron="Since last month"
-                  statIconName="group"
-                  statIconColor="primary-blue-600"
-                />
-              </div>
            
-              <div className="w-full lg:w-6/12 xl:w-3/12 px-4">
-                <CardStats
-                  statSubtitle="ADMINS"
-                  statTitle="924"
-                  statArrow="down"
-                  statPercent="1.10"
-                  statPercentColor="text-orange-500"
-                  statDescripiron="Since last month"
-                  statIconName="admin"
-                  statIconColor="secondary-color-yellow"
-                />
-              </div>
-              <div className="w-full lg:w-6/12 xl:w-3/12 px-4">
-                <CardStats
-                  statSubtitle="PERFORMANCE"
-                  statTitle="49,65%"
-                  statArrow="up"
-                  statPercent="12"
-                  statPercentColor="text-emerald-500"
-                  statDescripiron="Since last month"
-                  statIconName="fas fa-percent"
-                  statIconColor="bg-lightBlue-500"
-                />
-              </div>
             </div>
       <div className="flex flex-wrap">
             <div className="w-full xl:w-8/12 mb-12 xl:mb-0 px-4 py-4">
               <CardLineChart />
             </div>
             <div className="w-full xl:w-4/12 px-4 py-4">
-              <CardBarChart />
-            </div>
-          </div>
-          <div className="flex flex-wrap mt-4">
-            <div className="w-full xl:w-8/12 mb-12 xl:mb-0 px-4">
-              <CardUsers />
+              <CardBarChart 
+              errorTrapCount = {errorTrapCount}
+              warnTrapCount = {warnTrapCount}
+              infoTrapCount = {infoTrapCount}
+              trapCount = {trapCount}
+              />
             </div>
-            <div className="w-full xl:w-4/12 px-4">
           </div>
+          <div className="flex flex-wrap mt-4 shadow-2xl">
+
+           
           </div>
         </>
         );
     };
-    export default DashboardComponent;
+    export default UserDashboardComponent;
 
 

packages/admin/src/utils/locales/ar/common.json

@@ -97,5 +97,6 @@
   "profile-page-setting":"ضبط صفحة الملف الشخصي",
   "about-page-setting":"ضبط صفحة About",
   "setting-about-page":"ضبط صفحة About",
-  "setting-profile-page":"ضبط صفحة الملف الشخصي"
+  "setting-profile-page":"ضبط صفحة الملف الشخصي",
+  "user":"مستخدم"
 }

packages/admin/src/utils/locales/en/common.json

@@ -97,5 +97,6 @@
   "profile-page-setting":"Profile page setting",
   "about-page-setting":"About page setting",
   "setting-about-page":"Setting about page",
-  "setting-profile-page":"Setting profile page"
+  "setting-profile-page":"Setting profile page",
+  "user":"User"
 }