language update

packages/admin/pages/_app.tsx

@@ -36,7 +36,7 @@ export default function App({ Component, pageProps }: AppProps) {
     removeCookie("role", { path: "/", sameSite: true });
     removeCookie("token", { path: "/", sameSite: true });
     removeCookie("username", { path: "/", sameSite: true });
-    removeCookie("fetch", { path: "/", sameSite: true });
+    removeCookie("fetch", { path: "/", sameSite: true },{ path: "/ar", sameSite: true });
     window.location.href = "/sign-in";
   };
 

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

@@ -6,6 +6,7 @@ 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;
 };
@@ -18,7 +19,7 @@ const AppLayout = ({ children }: AppLayoutProps) => {
   const [cookies, setCookie, removeCookie] = useCookies([]);
   useEffect(() => {
     const handleBeforeUnload = () => {
-      removeCookie("fetch", { path: "/", sameSite: true }); // Delete the 'fetch' cookie
+      removeCookie("fetch", { path: "/", sameSite: true });
     };
 
     window.addEventListener("beforeunload", handleBeforeUnload);
@@ -35,13 +36,11 @@ const AppLayout = ({ children }: AppLayoutProps) => {
       };
 
       fetchData1();
-      // console.log(data);
     }
-    // console.log(data);
 
-    const authToken = `Bearer ${cookies["token"]}`;
+    const authToken = `${cookies["token"]}`;
     const source = new EventSource(
-      `http://localhost:6647/api/notifications/sub?token=${authToken}`
+      `${ApiGatewayURL}/api/notifications/sub?token=${authToken}`
     );
 
     source.addEventListener("open", () => {
@@ -53,15 +52,11 @@ const AppLayout = ({ children }: AppLayoutProps) => {
       console.log(message);
       if (message.new_val != null) {
         const newData = message.new_val;
-        // setData1((prevData: any) => [...prevData, newData]);
         setData((prevData: any) => [...prevData, newData]);
       } else {
         setData((prevData: any) =>
           prevData.filter((item: any) => item.id !== message.old_val.id)
         );
-        // setData1((prevData: any) =>
-        //   prevData.filter((item: any) => item.id !== message.old_val.id)
-        // );
       }
     });
 

packages/admin/src/context/auth-context/index.tsx

@@ -21,7 +21,7 @@ const AuthContextProvider = (props: { children: React.ReactNode }) => {
     try {
       removeCookie("role", "", { path: "/", expires: new Date(0) });
       removeCookie("token", "", { path: "/", expires: new Date(0) });
-      removeCookie("fetch", "", { path: "/", expires: new Date(0) });
+      removeCookie("fetch", "", { path: "/", expires: new Date(0) }, { path: "/ar", expires: new Date(0) });
       removeCookie("username", "", { path: "/", expires: new Date(0) });
       // removeCookie("role","");
       // removeCookie("token","");

packages/admin/src/features/about/index.tsx

@@ -247,66 +247,8 @@ export default function AboutContent() {
               </div>
             </div>
             <div className="flex flex-wrap">
-              <div className="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
-                <div className="px-6">
-                  <img
-                    alt="..."
-                    src="/images/Reem.jpg"
-                    className="shadow-lg rounded-full mx-auto max-w-120-px"
-                  />
-                  <div className="pt-6 text-center">
-                    <h5 className="text-xl font-bold">REEM HASAN</h5>
-                    <p className="mt-1 text-sm text-blueGray-400 uppercase font-semibold">
-                      Web Developer
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div className="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
-                <div className="px-6">
-                  <img
-                    alt="..."
-                    src="/images/Ali.jpg"
-                    className="shadow-lg rounded-full mx-auto max-w-120-px"
-                  />
-                  <div className="pt-6 text-center">
-                    <h5 className="text-xl font-bold">ALI MOUHAMMAD</h5>
-                    <p className="mt-1 text-sm text-blueGray-400 uppercase font-semibold">
-                      Marketing Specialist
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div className="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
-                <div className="px-6">
-                  <img
-                    alt="..."
-                    src="/images/Bashar.jpg"
-                    className="shadow-lg rounded-full mx-auto max-w-120-px"
-                  />
-                  <div className="pt-6 text-center">
-                    <h5 className="text-xl font-bold">BASHAR HUSSAIN</h5>
-                    <p className="mt-1 text-sm text-blueGray-400 uppercase font-semibold">
-                      UI/UX Designer
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div className="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
-                <div className="px-6">
-                  <img
-                    alt="..."
-                    src="/images/Nour.jpg"
-                    className="shadow-lg rounded-full mx-auto max-w-120-px"
-                  />
-                  <div className="pt-6 text-center">
-                    <h5 className="text-xl font-bold">NOUR</h5>
-                    <p className="mt-1 text-sm text-blueGray-400 uppercase font-semibold">
-                      Founder and CEO
-                    </p>
-                  </div>
-                </div>
-              </div>
+             
+              
             </div>
           </div>
         </section>

packages/admin/src/features/add-user/add-user-data.tsx

-import { FormItemTypes } from "@/src/components/dynamic-form/dtos/form-item.dto.ts";
-export const formItems = (t: Function) => {
-  return [
-    {
-      span: 24,
-      cards: [
-        {
-          title: t("info"),
-          items: [
-            {
-              colSpan: 8,
-              label: t("fname"),
-              type: FormItemTypes.Text,
-              name: "fname",
-              createMode: true,
-              updateMode: true,
-            },
-            {
-              colSpan: 8,
-              label: t("lname"),
-              type: FormItemTypes.Text,
-              name: "lname",
-              createMode: true,
-              updateMode: true,
-            },
-            {
-              colSpan: 8,
-              label: t("username"),
-              type: FormItemTypes.Text,
-              name: "username",
-              createMode: true,
-              updateMode: true,
-            },
-            {
-              colSpan: 24,
-              label: t("email.label"),
-              type: FormItemTypes.Text,
-              name: "email",
-              createMode: true,
-              updateMode: true,
-            },
-            {
-              colSpan: 24,
-              label: t("password"),
-              type: FormItemTypes.Text,
-              name: "password",
-              createMode: true,
-              updateMode: true,
-            },
-            {
-              colSpan: 6,
-              label: t("gender-label"),
-              type: FormItemTypes.Select,
-              name: "gender",
-              createMode: true,
-              updateMode: true,
-              options: [
-                {
-                  label: t("male"),
-                  value: 0,
-                },
-                {
-                  label: t("female"),
-                  value: 1,
-                },
-              ],
-            },
-            {
-              colSpan: 6,
-              label: t("job-label"),
-              type: FormItemTypes.Select,
-              name: "role",
-              createMode: true,
-              updateMode: true,
-              options: [
-                {
-                  label: t("user"),
-                  value: 'user',
-                },
-                {
-                  label: t("admin"),
-                  value: 'admin',
-                },
-              ],
-            },
-            {
-              colSpan: 6,
-              label: t("joining-date-label"),
-              type: FormItemTypes.DatePicker,
-              name: "workingDate",
-              createMode: true,
-              updateMode: true,
-            },
-            {
-              colSpan: 6,
-              label: t("country-label"),
-              type: FormItemTypes.Select,
-              name: "country",
-              createMode: true,
-              updateMode: true,
-              options: [
-                {
-                  label: t("syria"),
-                  value: 0,
-                },
-                {
-                  label: t("others"),
-                  value: 1,
-                },
-              ],
-            },
-         
-          ],
-        },
-      ],
-    },
-  ];
-};

packages/admin/src/features/add-user/index.tsx

@@ -63,19 +63,19 @@ const SignUpForm = () => {
               <Row gutter={16}>
               <Col span={12}>
               <Form.Item
-                label={t("email.label")}
+                label={t("email")}
                 name="email"
                 rules={[
                   { required: true, message: "Please enter your email." },
                   { type: 'email', message: 'Please enter a valid email address.' },
                 ]}
               >
-                <Input placeholder={t("email.label")} />
+                <Input placeholder={t("email")} />
               </Form.Item>
               </Col>
               <Col span={12}>
               <Form.Item
-                label={t("username.label")}
+                label={t("username")}
                 name="username"
                 rules={[
                   { required: true, message: "Please enter your username." },
@@ -86,18 +86,18 @@ const SignUpForm = () => {
               </Col>
               </Row>
               <Form.Item
-                label={t("password")}
+                label={t("password.label")}
                 name="password"
                 rules={[
                   { required: true, message: "Please enter your password." },
                 ]}
               >
-                <Input.Password placeholder={t("password")} />
+                <Input.Password placeholder={t("password.label")} />
               </Form.Item>
               <Row gutter={16}>
               <Col span={12}>
               <Form.Item
-                label={t("gender-label")}
+                label={t("gender")}
                 name="gender"
                 rules={[
                   { required: true, message: "Please select your gender." },
@@ -111,13 +111,13 @@ const SignUpForm = () => {
               </Col>
               <Col span={12}>
               <Form.Item
-                label={t("role.label")}
+                label={t("role")}
                 name="role"
                 rules={[
                   { required: true, message: "Please select a role." },
                 ]}
               >
-                <Select placeholder={t("role.label")}>
+                <Select placeholder={t("role")}>
                   <Option value="user">{t("user")}</Option>
                   <Option value="admin">{t("admin")}</Option>
                 </Select>
@@ -127,26 +127,27 @@ const SignUpForm = () => {
               <Row gutter={16}>
               <Col span={12}>
               <Form.Item
-                label={t("workingDate.label")}
+                label={t("working-date")}
                 name="workingDate"
                 rules={[
                   { required: true, message: "Please select a working date." },
                 ]}
               >
-                <DatePicker placeholder={t("workingDate.label")} />
+                <DatePicker placeholder={t("working-date")} />
               </Form.Item>
               </Col>
               <Col span={12}>
               <Form.Item
-                label={t("country.label")}
+                label={t("country")}
                 name="country"
                 rules={[
                   { required: true, message: "Please select a country." },
                 ]}
               >
-                <Select placeholder={t("country.label")}>
-                  <Option value="syria">{t("syria")}</Option>
-                  <Option value="others">{t("others")}</Option>
+                <Select placeholder={t("country")}>
+                  <Option value="syria">{t("Syria")}</Option>
+                  <Option value="USA">{t("USA")}</Option>
+                  <Option value="Lebanon">{t("Lebanon")}</Option>
                 </Select>
               </Form.Item>
               </Col>

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

@@ -19,18 +19,18 @@ export default function CardBarChart({errorTrapCount, warnTrapCount, infoTrapCou
       type: "bar",
       data: {
         labels: [
-          "ERROR",
-          "WARNING",
-          "INFO"
+          t("error"),
+          t("warning"),
+          t("info")
         ],
         datasets: [
           {
-            label: `${new Date().getDay()}/${new Date().getMonth()}/${new Date().getFullYear()}`,
+            label: t(`error`),
             backgroundColor: ["#EF4444", "#fadb14", "#10B981"],
             borderColor: "#000f24",
             data: [errorTrapCount/trapCount, warnTrapCount/trapCount, infoTrapCount/trapCount],
             fill: false,
-            barThickness: 30,
+            barThickness: 40,
           }
         ],
       },
@@ -105,10 +105,10 @@ export default function CardBarChart({errorTrapCount, warnTrapCount, infoTrapCou
           <div className="flex flex-wrap items-center">
             <div className="relative w-full max-w-full flex-grow flex-1">
               <h6 className="uppercase text-blueGray-400 mb-1 text-xs font-semibold">
-                {t("Performance")}
+                {t("performance")}
               </h6>
               <h2 className="text-blueGray-700 text-xl font-semibold">
-              {t("Severity")}
+              {t("severity")}
               </h2>
             </div>
           </div>

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

@@ -2,8 +2,11 @@ import React, { Component, useEffect, useState } from "react";
 import Chart from "chart.js/auto";
 import { useCookies } from "react-cookie";
 import { getSeverityStatistics } from "../../services/traps-service";
-
+import useTranslation from "next-translate/useTranslation";
+import { TranslationFiles } from "@/src/data/core";
 export default function CardLineChart() {
+  const { t } = useTranslation(TranslationFiles.COMMON);
+
   const [data, setData] = useState([]);
   const [cookies] = useCookies([]);
 
@@ -34,7 +37,7 @@ export default function CardLineChart() {
       const labels = Object.keys(data).sort(); // Use the sorted timestamps as labels
 
       const datasets = Object.keys(severityColors).map((severity) => ({
-        label: severity,
+        label: t(severity.toLocaleLowerCase()),
         backgroundColor: severityColors[severity],
         borderColor: severityColors[severity],
         data: labels.map((timestamp) => data[timestamp][severity] || 0),
@@ -130,10 +133,10 @@ export default function CardLineChart() {
           <div className="flex flex-wrap items-center">
             <div className="relative w-full max-w-full flex-grow flex-1">
               <h6 className="uppercase text-blueGray-100 mb-1 text-xs font-semibold">
-                Overview
+                {t("overview")}
               </h6>
               <h2 className="text-white text-xl font-semibold">
-                Severity traps Charts
+                {t("severity")}
               </h2>
             </div>
           </div>

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

@@ -7,12 +7,12 @@ import { useRouter } from "next/router";
 import { getAllUsers, deleteUser } from "@/src/services/user-service";
 import { useCookies } from "react-cookie";
 export default function CardUsers() {
+  const { t } = useTranslation(TranslationFiles.COMMON);
   const Columns = [
-    { title: 'username', dataIndex: 'username', key: 'username' },
-    { title: 'role', dataIndex: 'role', key: 'role' },
-    { title: 'email', dataIndex: 'email', key: 'email' },
+    { title: t("username"), dataIndex: 'username', key: 'username' },
+    { title: t("role"), dataIndex: 'role', key: 'role' },
+    { title: t("email"), dataIndex: 'email', key: 'email' },
   ];
-  const { t } = useTranslation(TranslationFiles.COMMON);
   const router = useRouter();
   const [data, setData] = useState([]);
 const [cookies] = useCookies([]);
@@ -41,11 +41,11 @@ const [cookies] = useCookies([]);
                   router.push("/users");
                 }}
               >
-                {"See all".toUpperCase()}
+                {t("see-all").toUpperCase()}
               </FmsButton>
             </div>
           <FmsTable
-            title={"users"}
+            title={t("users")}
             columns={Columns}
             data={data}
             pageSizeOptions={["3", "5", "7"]}

packages/admin/src/features/dashboard/index.tsx

@@ -79,19 +79,19 @@ const DashboardComponent = () => {
       <div className="flex flex-wrap">
               <div className="w-full lg:w-6/12 xl:w-3/12 px-4">
                 <CardStats
-                  statSubtitle="Traps"
+                  statSubtitle={t("traps")}
                   statTitle={trapCount !== undefined ? trapCount : "..."}
                   statArrow="up"
                   statPercent={`${(errorTrapCount/(trapCount+errorTrapCount))}`}
                   statPercentColor="text-red-500"
-                  statDescripiron="error Traps"
+                  statDescripiron={t("error-traps")}
                   statIconName="traps"
                   statIconColor="bg-red-600"
                 />
               </div>
               <div className="w-full lg:w-6/12 xl:w-3/12 px-4">
                 <CardStats
-                  statSubtitle="USERS"
+                  statSubtitle={t("users")}
                   statTitle={userCount !== undefined ? userCount : "..."}
                   statArrow="down"
                   statPercent={`${(userCount/(userCount+adminCount))}`}
@@ -102,7 +102,7 @@ const DashboardComponent = () => {
                         : "text-red-500" // Set the color for percent <= 0.5
                       : "text-gray-500" // Default color if counts are not available
                   }
-                  statDescripiron="users in the system"
+                  statDescripiron={t("users-in-the-system")}
                   statIconName="group"
                   statIconColor="primary-blue-600"
                 />
@@ -110,7 +110,7 @@ const DashboardComponent = () => {
               
               <div className="w-full lg:w-6/12 xl:w-3/12 px-4">
                 <CardStats
-                  statSubtitle="ADMINS"
+                  statSubtitle={t("admins")}
                   statTitle={adminCount !== undefined ? adminCount : "..."}
                   statArrow="down"
                   statPercent={`${(adminCount/(userCount+adminCount))}`}
@@ -121,19 +121,19 @@ const DashboardComponent = () => {
                         : "text-red-500" // Set the color for percent <= 0.5
                       : "text-gray-500" // Default color if counts are not available
                   }
-                  statDescripiron="admins in the system"
+                  statDescripiron={t("admins-in-the-system")}
                   statIconName="admin"
                   statIconColor="secondary-color-yellow"
                 />
               </div>
               <div className="w-full lg:w-6/12 xl:w-3/12 px-4">
                 <CardStats
-                  statSubtitle="MODEL PERFORMANCE"
+                  statSubtitle={t("model-performance")}
                   statTitle="49,65%"
                   statArrow="up"
-                  statPercent="12"
+                  statPercent=""
                   statPercentColor="text-emerald-500"
-                  statDescripiron="Since last month"
+                  statDescripiron=""
                   statIconName="Model"
                   statIconColor="bg-lightBlue-500"
                 />

packages/admin/src/features/login/index.tsx

@@ -77,13 +77,13 @@ const Login = () => {
         <Row>
           <Col span={24}>
             <Form name="basic" layout="vertical" onFinish={onFinishSend}>
-              <Form.Item label={t("username.label")} className={styles.formInput}>
+              <Form.Item label={t("username")} className={styles.formInput}>
                 <Form.Item
                   name="username"
                   rules={[
                     {
                       required: true,
-                      message: t("email.required-message"),
+                      message: t("required-message"),
                     },
                     {
                       type:"string",
@@ -91,7 +91,7 @@ const Login = () => {
                   ]}
                 >
                   <Input
-                    placeholder={t("username.placeholder")}
+                    placeholder={t("placeholder")}
                     data-testid="email"
                   />
                 </Form.Item>
@@ -113,7 +113,7 @@ const Login = () => {
                 </Form.Item>
               </Form.Item>
               <div>
-                <Form.Item className={styles.rememberMe}>
+                {/* <Form.Item className={styles.rememberMe}>
                   <Form.Item name="remember" valuePropName="checked" noStyle>
                     <Checkbox>{t("remember-me")}</Checkbox>
                   </Form.Item>
@@ -121,7 +121,7 @@ const Login = () => {
                   <a className={styles.loginFormForgot} href="">
                     {t("forget-password")}
                   </a>
-                </Form.Item>
+                </Form.Item> */}
               </div>
               <Button
                 data-testid="submit-button"

packages/admin/src/features/ml-model/index.tsx

 import useTranslation from "next-translate/useTranslation";
 import { TranslationFiles } from "@/src/data/core";
 import { useRouter } from "next/router";
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import { useCookies } from "react-cookie";
 import { Upload, Button } from "antd";
 import { UploadOutlined } from "@ant-design/icons";
@@ -91,39 +91,19 @@ export default function MLContent() {
                 <div className="relative flex flex-col min-w-0 break-words bg-white w-full mb-8 shadow-lg rounded-lg">
                   <div className="px-4 py-5 flex-auto">
                     <p className="mt-2 mb-4 text-blueGray-500">
-                      {/* <label htmlFor="fileInput">
-                      <input
-                        id="fileInput"
-                        type="file"
-                        // accept=".csv"
-                        onChange={handleFileChange}
-                        style={{ display: "inline-block" }}
-                      />
-                      <button
-                        className="move active:bg-blueGray-600 uppercase text-white font-bold hover:shadow-md shadow text-xs px-4 py-2 rounded outline-none focus:outline-none sm:mr-2 mb-1 ease-linear transition-all duration-150"
-                        //   type="move"
-                        size="large"
-                        borderRadius="32"
-                        onClick={uploadFile}
-                      >
-                        {t("failures-feedback")}
-                      </button>
-                      </label> */}
                       <Upload
                         className="font-bold hover:shadow-md m-2 mt-3 shadow text-xs rounded outline-none focus:outline-none sm:mr-2 mb-1 ease-linear transition-all duration-150"
                         customRequest={() => {}}
                         beforeUpload={() => false}
                         showUploadList={false}
                         onChange={handleFileChange}
-                        // style={{ display: "block" }}
                       >
                         <Button icon={<UploadOutlined />}>
-                          {t("Select File")}
+                          {t("select-file")}
                         </Button>
                       </Upload>
                       <button
                         className="move active:bg-blueGray-600 uppercase text-white font-bold hover:shadow-md shadow text-xs px-4 py-2 rounded outline-none focus:outline-none sm:mr-2 mb-1 ease-linear transition-all duration-150"
-                        //   type="move"
                         size="large"
                         borderRadius="32"
                         onClick={uploadFile}
@@ -140,7 +120,6 @@ export default function MLContent() {
                     <p className="mt-2 mb-4 text-blueGray-500">
                       <button
                         className="traity active:bg-blueGray-600 uppercase font-bold hover:shadow-md shadow text-xs px-4 py-2 rounded outline-none focus:outline-none sm:mr-2 mb-1 ease-linear transition-all duration-150"
-                        //   type="move"
                         size="large"
                         borderRadius="32"
                         onClick={uploadFile}
@@ -158,7 +137,6 @@ export default function MLContent() {
                     <p className="mt-2 mb-4 text-blueGray-500">
                       <button
                         className="secondary active:bg-blueGray-600 uppercase font-bold hover:shadow-md shadow text-xs px-4 py-2 rounded outline-none focus:outline-none sm:mr-2 mb-1 ease-linear transition-all duration-150"
-                        //   type="move"
                         size="large"
                         borderRadius="32"
                         onClick={uploadFile}
@@ -176,7 +154,6 @@ export default function MLContent() {
                     <p className="mt-2 mb-4 text-blueGray-500">
                       <button
                         className="link active:bg-blueGray-600 uppercase font-bold hover:shadow-md shadow text-xs px-4 py-2 rounded outline-none focus:outline-none sm:mr-2 mb-1 ease-linear transition-all duration-150"
-                        //   type="move"
                         size="large"
                         borderRadius="32"
                         onClick={() => setModalProps({ isOpen: true})}
@@ -217,10 +194,6 @@ export default function MLContent() {
                       viewBox="0 0 583 95"
                       className="absolute left-0 w-full block h-95-px -top-94-px"
                     >
-                      {/* <polygon
-                        points="-30,95 583,95 583,65"
-                        className="text-blueGray-700 fill-current"
-                      ></polygon> */}
                     </svg>
                   </blockquote>
                 </div>

packages/admin/src/features/profile/index.tsx

@@ -114,7 +114,7 @@ const ProfileForm = () => {
                         {data.workingDate}
                         </span>
                         <span className="text-sm text-blueGray-400">
-                          {t("start-working-date")}
+                          {t("working-date")}
                         </span>
                       </div>
                     </div>

packages/admin/src/features/setting/index.tsx

@@ -22,7 +22,7 @@ const Setting = () => {
           router.push("/setup/setting-about-content");
         }}
       >
-        {t("About-page-setting").toUpperCase()}
+        {t("about-page-setting").toUpperCase()}
       </FmsButton>
       </Col>
       <Divider orientation="left">{t("setting-profile-page")}</Divider>

packages/admin/src/features/setting/setting-about-content.tsx

@@ -398,66 +398,7 @@ export default function SettingAboutContent() {
               </div>
             </div>
             <div className="flex flex-wrap">
-              <div className="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
-                <div className="px-6">
-                  <img
-                    alt="..."
-                    src="/images/Reem.jpg"
-                    className="shadow-lg rounded-full mx-auto max-w-120-px"
-                  />
-                  <div className="pt-6 text-center">
-                    <h5 className="text-xl font-bold">REEM HASAN</h5>
-                    <p className="mt-1 text-sm text-blueGray-400 uppercase font-semibold">
-                      Web Developer
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div className="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
-                <div className="px-6">
-                  <img
-                    alt="..."
-                    src="/images/Ali.jpg"
-                    className="shadow-lg rounded-full mx-auto max-w-120-px"
-                  />
-                  <div className="pt-6 text-center">
-                    <h5 className="text-xl font-bold">ALI MOUHAMMAD</h5>
-                    <p className="mt-1 text-sm text-blueGray-400 uppercase font-semibold">
-                      Marketing Specialist
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div className="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
-                <div className="px-6">
-                  <img
-                    alt="..."
-                    src="/images/Bashar.jpg"
-                    className="shadow-lg rounded-full mx-auto max-w-120-px"
-                  />
-                  <div className="pt-6 text-center">
-                    <h5 className="text-xl font-bold">BASHAR HUSSAIN</h5>
-                    <p className="mt-1 text-sm text-blueGray-400 uppercase font-semibold">
-                      UI/UX Designer
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div className="w-full md:w-6/12 lg:w-3/12 lg:mb-0 mb-12 px-4">
-                <div className="px-6">
-                  <img
-                    alt="..."
-                    src="/images/Nour.jpg"
-                    className="shadow-lg rounded-full mx-auto max-w-120-px"
-                  />
-                  <div className="pt-6 text-center">
-                    <h5 className="text-xl font-bold">NOUR</h5>
-                    <p className="mt-1 text-sm text-blueGray-400 uppercase font-semibold">
-                      Founder and CEO
-                    </p>
-                  </div>
-                </div>
-              </div>
+          
             </div>
           </div>
         </section>

packages/admin/src/features/show-traps/columns.tsx

 import {Col, DatePicker, Input, Row } from "antd";
 import FmsButton from "../../../../shared-library/src/buttons/fms-button";
+import useTranslation from "next-translate/useTranslation";
+import { TranslationFiles } from "@/src/data/core";
 
 export function getColumns(setModalProps:any) {
+  const { t } = useTranslation(TranslationFiles.COMMON);
+
   function changeTimestamp(timestamp:any){
     const date = new Date(timestamp);
     const hours = date.getHours().toString();
@@ -12,7 +16,7 @@ export function getColumns(setModalProps:any) {
   const { RangePicker } = DatePicker;
   return [
   {
-    title: "timestamp",
+    title: t("timestamp"),
     dataIndex: "timestamp",
     key: "timestamp",
     resizable: true, 
@@ -54,7 +58,7 @@ export function getColumns(setModalProps:any) {
     },
   },
   {
-    title: "agent-address",
+    title: t("agent-address"),
     dataIndex: "agentAddress",
     key: "agentAddress",
     resizable: true, 
@@ -87,7 +91,7 @@ export function getColumns(setModalProps:any) {
   },
 
   {
-    title: "severity",
+    title: t("severity"),
     dataIndex: "severity",
     key: "severity",
     resizable: true, 
@@ -120,7 +124,7 @@ export function getColumns(setModalProps:any) {
     onFilter: (value:any, record:any) => record.severity.toLowerCase().includes(value.toLowerCase()),
   },
   {
-    title: "specific-trap",
+    title: t("specific-trap"),
     dataIndex: "specificTrap",
     key: "specificTrap",
     resizable: true, 
@@ -152,7 +156,7 @@ export function getColumns(setModalProps:any) {
     onFilter: (value:any, record:any) => record.specificTrap.toLowerCase().includes(value.toLowerCase()),
   },
   {
-    title: "generic-trap",
+    title: t("generic-trap"),
     dataIndex: "genericTrap",
     key: "genericTrap",
     resizable: true, 
@@ -184,14 +188,14 @@ export function getColumns(setModalProps:any) {
     onFilter: (value:any, record:any) => record.genericTrap.toLowerCase().includes(value.toLowerCase()),
   },
   {
-    title: "Actions",
+    title: t("actions"),
     key: "actions",
     render: (text: any, record: any) => (
       <FmsButton
         type="primary"
         onClick={() => setModalProps({ isOpen: true, variableBinding: record.variableBindings })}
       >
-        Show Details
+        {t("show-details")}
       </FmsButton>
     ),
   },

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

 import {Col, DatePicker, Input, Row } from "antd";
 import FmsButton from "../../../../shared-library/src/buttons/fms-button";
+import useTranslation from "next-translate/useTranslation";
+import { TranslationFiles } from "@/src/data/core";
 export function getColumns(setModalProps:any) { 
+  const { t } = useTranslation(TranslationFiles.COMMON);
 
   const { RangePicker } = DatePicker;
   return [
   {
-    title: "first-name",
+    title: ("fname"),
     dataIndex: "fname",
     key: "fname",
     resizable: true, 
@@ -14,7 +17,7 @@ export function getColumns(setModalProps:any) {
     filterDropdown: ({ setSelectedKeys, selectedKeys, confirm  }:any) => (
       <div style={{ padding: 8 }}>
         <Input
-          placeholder="Search"
+          placeholder={t("search")}
           value={selectedKeys[0]}
           onChange={(e:any) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
           onPressEnter={confirm}
@@ -28,7 +31,7 @@ export function getColumns(setModalProps:any) {
           size="small"
           borderRadius={10}
         >
-          {"Search"}
+          {t("search")}
         </FmsButton>
         </Col>
         </Row>
@@ -37,7 +40,7 @@ export function getColumns(setModalProps:any) {
     onFilter: (value:any, record:any) => record.fname.toLowerCase().includes(value.toLowerCase()),
   },
   {
-    title: "last-name",
+    title: t("lname"),
     dataIndex: "lname",
     key: "lname",
     resizable: true, 
@@ -46,7 +49,7 @@ export function getColumns(setModalProps:any) {
     filterDropdown: ({ setSelectedKeys, selectedKeys, confirm  }:any) => (
       <div style={{ padding: 8 }}>
         <Input
-          placeholder="Search"
+          placeholder={t("search")}
           value={selectedKeys[0]}
           onChange={(e:any) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
           onPressEnter={confirm}
@@ -60,7 +63,7 @@ export function getColumns(setModalProps:any) {
           size="small"
           borderRadius={10}
         >
-          {"Search"}
+          {t("search")}
         </FmsButton>
         </Col>
         </Row>
@@ -69,7 +72,7 @@ export function getColumns(setModalProps:any) {
     onFilter: (value:any, record:any) => record.lname.toLowerCase().includes(value.toLowerCase()),
   },
   {
-    title: "username",
+    title: t("username"),
     dataIndex: "username",
     key: "username",
     resizable: true, 
@@ -78,7 +81,7 @@ export function getColumns(setModalProps:any) {
     filterDropdown: ({ setSelectedKeys, selectedKeys, confirm  }:any) => (
       <div style={{ padding: 8 }}>
         <Input
-          placeholder="Search"
+          placeholder={t("search")}
           value={selectedKeys[0]}
           onChange={(e:any) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
           onPressEnter={confirm}
@@ -92,7 +95,7 @@ export function getColumns(setModalProps:any) {
           size="small"
           borderRadius={10}
         >
-          {"Search"}
+          {t("search")}
         </FmsButton>
         </Col>
         </Row>
@@ -101,7 +104,7 @@ export function getColumns(setModalProps:any) {
     onFilter: (value:any, record:any) => record.username.toLowerCase().includes(value.toLowerCase()),
   },
   {
-    title: "email",
+    title: t("email"),
     dataIndex: "email",
     key: "email",
     resizable: true, 
@@ -110,7 +113,7 @@ export function getColumns(setModalProps:any) {
     filterDropdown: ({ setSelectedKeys, selectedKeys, confirm  }:any) => (
       <div style={{ padding: 8 }}>
         <Input
-          placeholder="Search"
+          placeholder={t("search")}
           value={selectedKeys[0]}
           onChange={(e:any) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
           onPressEnter={confirm}
@@ -124,7 +127,7 @@ export function getColumns(setModalProps:any) {
           size="small"
           borderRadius={10}
         >
-          {"Search"}
+          {t("search")}
         </FmsButton>
         </Col>
         </Row>
@@ -133,7 +136,7 @@ export function getColumns(setModalProps:any) {
     onFilter: (value:any, record:any) => record.email.toLowerCase().includes(value.toLowerCase()),
   },
   {
-    title: "gender",
+    title: t("gender"),
     dataIndex: "gender",
     key: "gender",
     resizable: true, 
@@ -142,7 +145,7 @@ export function getColumns(setModalProps:any) {
     filterDropdown: ({ setSelectedKeys, selectedKeys, confirm  }:any) => (
       <div style={{ padding: 8 }}>
         <Input
-          placeholder="Search"
+          placeholder={t("search")}
           value={selectedKeys[0]}
           onChange={(e:any) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
           onPressEnter={confirm}
@@ -156,7 +159,7 @@ export function getColumns(setModalProps:any) {
           size="small"
           borderRadius={10}
         >
-          {"Search"}
+          {t("search")}
         </FmsButton>
         </Col>
         </Row>
@@ -165,7 +168,7 @@ export function getColumns(setModalProps:any) {
     onFilter: (value:any, record:any) => record.gender.toLowerCase().includes(value.toLowerCase()),
   },
   {
-    title: "role",
+    title: t("role"),
     dataIndex: "role",
     key: "role",
     resizable: true, 
@@ -174,7 +177,7 @@ export function getColumns(setModalProps:any) {
     filterDropdown: ({ setSelectedKeys, selectedKeys, confirm  }:any) => (
       <div style={{ padding: 8 }}>
         <Input
-          placeholder="Search"
+          placeholder={t("search")}
           value={selectedKeys[0]}
           onChange={(e:any) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
           onPressEnter={confirm}
@@ -188,7 +191,7 @@ export function getColumns(setModalProps:any) {
           size="small"
           borderRadius={10}
         >
-          {"Search"}
+          {t("search")}
         </FmsButton>
         </Col>
         </Row>
@@ -197,7 +200,7 @@ export function getColumns(setModalProps:any) {
     onFilter: (value:any, record:any) => record.role.toLowerCase().includes(value.toLowerCase()),
   },
   {
-    title: "workingDate",
+    title: t("working-date"),
     dataIndex: "workingDate",
     key: "workingDate",
     sorter: (a: any, b: any) => a.workingDate.localeCompare(b.workingDate),
@@ -219,7 +222,7 @@ export function getColumns(setModalProps:any) {
               borderRadius={10}
               style={{ marginRight: 8 }}
             >
-              {"Search"}
+              {t("search")}
             </FmsButton>
           </Col>
         </Row>
@@ -235,7 +238,7 @@ export function getColumns(setModalProps:any) {
     },
   },
   {
-    title: "country",
+    title: t("country"),
     dataIndex: "country",
     key: "country",
     resizable: true, 
@@ -244,7 +247,7 @@ export function getColumns(setModalProps:any) {
     filterDropdown: ({ setSelectedKeys, selectedKeys, confirm  }:any) => (
       <div style={{ padding: 8 }}>
         <Input
-          placeholder="Search"
+          placeholder={t("search")}
           value={selectedKeys[0]}
           onChange={(e:any) => setSelectedKeys(e.target.value ? [e.target.value] : [])}
           onPressEnter={confirm}
@@ -258,7 +261,7 @@ export function getColumns(setModalProps:any) {
           size="small"
           borderRadius={10}
         >
-          {"Search"}
+          {t("search")}
         </FmsButton>
         </Col>
         </Row>
@@ -267,7 +270,7 @@ export function getColumns(setModalProps:any) {
     onFilter: (value:any, record:any) => record.country.toLowerCase().includes(value.toLowerCase()),
   },
   {
-    title: "Actions",
+    title: t("actions"),
     key: "actions",
     render: (text: any, record: any) => (
       <FmsButton
@@ -276,7 +279,7 @@ export function getColumns(setModalProps:any) {
         borderRadius={32}
         onClick={() => setModalProps({ isOpen: true, data: record })}
       >
-        {"edit"}
+        {t("edit")}
       </FmsButton>
     ),
   },

packages/admin/src/features/show-users/edit-user-popup.tsx

@@ -31,10 +31,9 @@ export default function EditUserPopup({ modalProps, setModalProps }: Props) {
     setModalProps(false, null);
   };
   useEffect(() => {
-    console.log(MainUtils.cloneObject( modalProps.data));
+    console.log(MainUtils.cloneObject(modalProps.data));
     setIsModalOpen(modalProps.isOpen);
     setUserData(modalProps.data);
-
   }, [modalProps]);
 
   const handleUpdate = async () => {
@@ -76,50 +75,35 @@ export default function EditUserPopup({ modalProps, setModalProps }: Props) {
                 }
               />
             </Form.Item>
-          <Form.Item label="username"
-           name="username"
-           >
+            <Form.Item label="username" name="username">
               <Input
                 onChange={(e) =>
                   setUserData({ ...userData, username: e.target.value })
                 }
               />
             </Form.Item>
-          <Form.Item label="email"
-           name="email"
-           rules={[
-             { type: 'email'  },
-           ]}
-           >
+            <Form.Item label="email" name="email" rules={[{ type: "email" }]}>
               <Input
-              
                 onChange={(e) =>
                   setUserData({ ...userData, email: e.target.value })
                 }
               />
             </Form.Item>
-          <Form.Item
-                label={t("password")}
-                name="password"
-              >
+            <Form.Item label={t("password")} name="password">
               <Input.Password
                 onChange={(e) =>
                   setUserData({ ...userData, password: e.target.value })
-              } />
+                }
+              />
             </Form.Item>
-              <Form.Item label={t("gender-label")} name="gender" >
-              <Select onChange={(e) =>
-                setUserData({ ...userData, gender: e })
-              }>
+            <Form.Item label={t("gender-label")} name="gender">
+              <Select onChange={(e) => setUserData({ ...userData, gender: e })}>
                 <Select.Option value="male">{t("male")}</Select.Option>
                 <Select.Option value="female">{t("female")}</Select.Option>
               </Select>
             </Form.Item>
             <Form.Item label={t("role.label")} name="role">
-              <Select 
-              onChange={(e) =>
-                setUserData({ ...userData, role: e })
-              }>
+              <Select onChange={(e) => setUserData({ ...userData, role: e })}>
                 <Select.Option value="user">{t("user")}</Select.Option>
                 <Select.Option value="admin">{t("admin")}</Select.Option>
               </Select>
@@ -127,12 +111,13 @@ export default function EditUserPopup({ modalProps, setModalProps }: Props) {
             {/* <Form.Item label={t("workingDate.label")} name="workingDate" >
               <DatePicker />
             </Form.Item> */}
-            <Form.Item label={t("country.label")} name="country" >
-              <Select onChange={(e) =>
-                setUserData({ ...userData, country: e })
-              }>
+            <Form.Item label={t("country.label")} name="country">
+              <Select
+                onChange={(e) => setUserData({ ...userData, country: e })}
+              >
                 <Select.Option value="syria">{t("syria")}</Select.Option>
-                <Select.Option value="others">{t("others")}</Select.Option>
+                <Select.Option value="USA">{t("USA")}</Select.Option>
+                <Select.Option value="Lebanon">{t("Lebanon")}</Select.Option>{" "}
               </Select>
             </Form.Item>
           </Form>

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

@@ -30,11 +30,9 @@
   "sign-in": "تسجيل الدخول",
   "welcome-back": "مرحبا بك مجددا",
   "welcome-back-enter-credentials": " مرحبا بك مجددا، من فضلك أدخل بيانات الاعتماد الخاصة بك. ",
-  "email": {
-    "label": "البريد الإلكتروني",
+  "email": "البريد الالكتروني",
   "required-message": "من فضلك أدخل بريدك الإلكتروني!",
-    "placeholder": "أدخل بريدك الإلكتروني"
-  },
+  "placeholder": "أدخل بريدك الإلكتروني",
   "password": {
     "label": "كلمة المرور",
     "required-message": "من فضلك أدخل كلمة المرور الخاصة بك!",
@@ -58,9 +56,46 @@
   "delete-return-column": "التعديل على الأعمدة",
   "order-by-column": "ترتيب حسب العمود",
   "select-columns-to-delete-or-return": "اختر عامود لحذفه وأزل الاختيار لإعادة العمود",
-  "search":"بحث",
-  "traps":"أحداث",
-  "traps-table":"جدول الأحداث",
-  "new-traps":"الأحداث الجديدة",
-  "edit-user":"تعديل المستخدم"
+  "search": "بحث",
+  "traps": "أحداث",
+  "traps-table": "جدول الأحداث",
+  "new-traps": "الأحداث الجديدة",
+  "edit-user": "تعديل المستخدم",
+  "about": "حول",
+  "ml-model": "نموذج تعلم الآلة ",
+  "severity": "مستوى الخطر",
+  "warning": "تحذير",
+  "error": "خطأ",
+  "performance": "أداء النظام",
+  "error-traps": "أحداث الخطأ",
+  "users-in-the-system": "مستخدم في النظام",
+  "admins-in-the-system": "مسؤول في النظام",
+  "admins": "المسؤولين",
+  "admin": "مسؤول",
+  "model-performance": "أداء نموذج تعلم الآلة",
+  "overview": "لمحة عامة",
+  "see-all": "رؤية الكل",
+  "username": "اسم المستخدم",
+  "role": "الدور",
+  "country":"البلد",
+  "gender":"الجنس",
+  "working-date": "تاريخ البدء بالعمل",
+  "edit":"تعديل",
+  "timestamp":"زمن الرسالة",
+  "agent-address":"عنوان الوكيل",
+  "specific-trap":"الحدث الخاص",
+  "generic-trap": "الحدث الأساسي",
+  "actions":"الإجراءات",
+  "action":"الإجراء",
+  "show-details":"المزيد من التفاصيل",
+  "delete-selected":"حذف المحدد",
+  "select-file":"اختر ملف",
+  "failures-feedback":"التغذية الراجعة",
+  "reset-knowledge-base":"إعادة تهيثة قاعدة المعلومات",
+  "train-model":"تدريب النموذج",
+  "calc-metrics":"حساب المعايير",
+  "profile-page-setting":"ضبط صفحة الملف الشخصي",
+  "about-page-setting":"ضبط صفحة About",
+  "setting-about-page":"Sضبط صفحة About",
+  "setting-profile-page":"ضبط صفحة الملف الشخصي"
 }

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

@@ -14,53 +14,88 @@
   "theory-lecture": "Theory lecture",
   "users": "Users",
   "not-found": "Not Found",
-  "rights-reserved":"FMS. All rights reserved.",
+  "rights-reserved": "FMS. All rights reserved.",
   "notifications": "Notifications",
   "see-more": "See more",
   "confirm-logout": "Are you sure you want to logout?",
   "logout": "Logout",
-  "error-404":"404 error",
-  "page-not-found":"Page not found",
-  "sorry-page-not-found":"Sorry, the page you are looking for Does not exist.",
+  "error-404": "404 error",
+  "page-not-found": "Page not found",
+  "sorry-page-not-found": "Sorry, the page you are looking for Does not exist.",
   "helpful-links": "Here are some helpful links",
   "go-back": "Go back",
-  "take-me-home":"Take me home",
-  "save":"Save",
-  "cancel":"Cancel",
+  "take-me-home": "Take me home",
+  "save": "Save",
+  "cancel": "Cancel",
   "sign-in": "Sign in",
   "welcome-back": "Welcome back",
-    "welcome-back-enter-credentials":"Welcome back! Please enter your credentials.",
-    "email":{
-        "label": "Email",
-        "required-message":"Please input your email address!",
-        "placeholder":"Enter your email"
-    },
-    "password":{
+  "welcome-back-enter-credentials": "Welcome back! Please enter your credentials.",
+  "email": "Email",
+  "required-message": "Please input your email address!",
+  "placeholder": "Enter your email",
+  "password": {
     "label": "Password",
-        "required-message":"Please input your Password!",
-        "placeholder":"Password"
+    "required-message": "Please input your Password!",
+    "placeholder": "Password"
   },
-    "remember-me":"Remember me",
-    "forget-password":"Forget password",
+  "remember-me": "Remember me",
+  "forget-password": "Forget password",
   "info": "Info",
-    "add-new-user":"Add New User",
-    "add-user":"Add User",
+  "add-new-user": "Add New User",
+  "add-user": "Add User",
   "gender-label": "Gender",
   "male": "Male",
-    "female":"Female",
-    "fname":"First Name",
-    "lname":"Last Name",
-    "job-label":"User Role",
-    "joining-date-label":"Start Working Date",
-    "profile":"Profile",
+  "female": "Female",
+  "fname": "First Name",
+  "lname": "Last Name",
+  "job-label": "User Role",
+  "joining-date-label": "Start Working Date",
+  "profile": "Profile",
   "my-profile": "My Profile",
-    "delete-row":"Delete Row",
+  "delete-row": "Delete Row",
   "delete-return-column": "Changes Columns",
-    "order-by-column":"Order By Column",
-    "select-columns-to-delete-or-return":"Check Column to delete or Uncheck to Return",
-    "search":"Search",
-    "traps":"Traps",
-    "traps-table":"Traps table",
-    "new-traps":"New Traps",
-    "edit-user":"Edit User"
+  "order-by-column": "Order By Column",
+  "select-columns-to-delete-or-return": "Check Column to delete or Uncheck to Return",
+  "search": "Search",
+  "traps": "Traps",
+  "traps-table": "Traps table",
+  "new-traps": "New Traps",
+  "edit-user": "Edit User",
+  "about": "About",
+  "ml-model": "ML Model",
+  "severity": "Severity",
+  "warning": "Warning",
+  "error": "Error",
+  "performance": "Performance",
+  "error-traps": "Error Traps",
+  "users-in-the-system": "Users in the System",
+  "admins-in-the-system": "Admins in the system",
+  "admins": "Admins",
+  "admin": "Admin",
+  "model-performance": "Model Performance",
+  "overview": "Overview",
+  "see-all": "See All",
+  "username": "Username",
+  "role": "Role", 
+  "country":"Country",
+  "gender":"Gender",
+  "working-date": "Start Working Date",
+  "edit":"Edit",
+  "timestamp":"Timestamp",
+  "agent-address":"Agent Address",
+  "specific-trap":"Specific Trap",
+  "generic-trap": "Generic Trap",
+  "actions":"Actions",
+  "action":"Action",
+  "show-details":"Show Details",
+  "delete-selected":"Delete Selected",
+  "select-file":"Select File",
+  "failures-feedback":"Failures FeedBack",
+  "reset-knowledge-base":"Reset Knowledge Base",
+  "train-model":"Train Model",
+  "calc-metrics":"Calc Metrics",
+  "profile-page-setting":"Profile page setting",
+  "about-page-setting":"About page setting",
+  "setting-about-page":"Setting about page",
+  "setting-profile-page":"Setting profile page"
 }