Merge pull request #216 from IndustryFusion/feature/task076-03-fronte…

…nd_code_cleanup

Feature/task076 03 frontend code cleanup

frontend/src/auth/auth-service.ts

@@ -45,7 +45,6 @@ const login = async (username: string, password: string): Promise<LoginResponse>
     const loginUrl = API_URL + '/auth/login';
     try {
         const response: AxiosResponse<LoginResponse> = await axios.post(loginUrl as string, data, { headers });
-        console.log('response ',response.data);
         if (response.data.success) 
         {
             // Set LogIn to true

frontend/src/components/alert/alert-details.tsx

@@ -21,12 +21,13 @@ import "../../app/globals.css"
 import "../../styles/asset-list.css"
 import { Button } from "primereact/button";
 import { useTranslation } from "next-i18next";
+import { Asset } from "@/types/asset-types";
 interface AlertDetailsProps {
   alerts: Alerts[];
   count: number;
   visible: boolean;
   setVisible: React.Dispatch<React.SetStateAction<boolean>>;
-  assetData: any;
+  assetData: Asset;
 }
 
 interface Alerts {
@@ -54,19 +55,6 @@ const AlertDetails: React.FC<AlertDetailsProps> = ({ alerts, count, visible, set
     fontSize: '0.2rem',
   };
 
-  // Get the alert color based on severity
-  const getAlertColor = (severity: string) => {
-    switch (severity) {
-      case 'warning':
-        return 'orange';
-      case 'danger':
-        return 'red';
-      case 'normal':
-        return 'green';
-      default:
-        return 'black';
-    }
-  };
 
   // Get the icon and color based on severity
   const getIcon = (severity: string) => {
@@ -96,21 +84,6 @@ const AlertDetails: React.FC<AlertDetailsProps> = ({ alerts, count, visible, set
     }
   };
 
-  // Get the text color based on severity
-  const getTextColor = (severity: string) => {
-    switch (severity) {
-      default:
-      case 'ok':
-        return '#00ff00';
-      case 'warning':
-        return '#ffcc00';
-      case 'machine-warning':
-        return '#ffcc00';
-      case 'machine-error':
-        return '#ff0000';
-    }
-  };
-
   // Get the text color for status
   const getStatusTextColor = (status: string) => {
     switch (status) {
@@ -133,19 +106,6 @@ const AlertDetails: React.FC<AlertDetailsProps> = ({ alerts, count, visible, set
     }
   }
 
-  const getBackgroundColor = (severity: string) => {
-    switch (severity) {
-      default:
-      case 'ok':
-        return '#f0f0f0';
-      case 'warning':
-        return '#ffeecc';
-      case 'machine-warning':
-        return '#ffeecc';
-      case 'machine-error':
-        return '#ffcccc';
-    }
-  };
 
   return (
     <>

frontend/src/components/alert/alerts.tsx

@@ -20,7 +20,7 @@ import axios from "axios";
 import { Badge } from "primereact/badge";
 import { Button } from "primereact/button";
 import AlertDetails from "./alert-details";
-
+import { Asset } from "@/types/asset-types";
 interface Alerts {
   text: string;
   resource: string;
@@ -37,8 +37,8 @@ const Alerts = () => {
   const [assetData, setAssetData] = useState<any>([])
 
   // Function to map backend data to asset state
-  const mapBackendDataToAssetState = (backendData: any) => {
-    const modifiedObject: any = {};
+  const mapBackendDataToAssetState = (backendData: Asset) => {
+    const modifiedObject:any = {};
     // Iterate over the properties of the object
     Object.keys(backendData).forEach((key) => {
       if (key.includes("http://www.industry-fusion.org/schema#")) {
@@ -61,7 +61,6 @@ const Alerts = () => {
         },
         withCredentials: true,
       })
-
       return mapBackendDataToAssetState(response.data);
     } catch (error) {
       console.error("Error fetching asset data", error)

frontend/src/components/assetManagement/allocated-asset.tsx

@@ -24,7 +24,7 @@ import { InputText } from "primereact/inputtext";
 import { Row } from "primereact/row";
 import { useEffect, useState } from "react";
 import { useTranslation } from "next-i18next";
-import { AllocatedAssetData } from "@/interfaces/allocated-asset-data";
+import { AllocatedAssetData } from "../../types/allocated-asset-data";
 
 const AllocatedAsset = () => {
   const [filters, setFilters] = useState<{

frontend/src/components/assetManagement/asset-management.tsx

@@ -22,7 +22,7 @@ import { Dispatch, SetStateAction, useEffect, useRef, useState } from "react";
 import Cookies from "js-cookie";
 import { useRouter } from "next/router";
 import { fetchAsset } from "@/utility/asset-utility";
-import { Asset } from "@/interfaces/asset-types";
+import { Asset } from "@/types/asset-types";
 import { fetchAllAllocatedAssets } from "@/utility/factory-site-utility";
 import { InputText } from "primereact/inputtext";
 import { FilterMatchMode } from "primereact/api";

frontend/src/components/dashboard/dashboard-assets.tsx

@@ -15,7 +15,7 @@
 // 
 
 import React, { Dispatch, SetStateAction, useEffect, useState, ReactNode, useRef } from "react";
-import { Asset } from "@/interfaces/asset-types";
+import { Asset } from "@/types/asset-types";
 import { fetchAsset } from "@/utility/asset-utility";
 import { DataTable } from "primereact/datatable";
 import { Column } from "primereact/column";
@@ -29,13 +29,17 @@ import { Toast, ToastMessage } from "primereact/toast";
 import { InputText } from "primereact/inputtext";
 import "../../styles/dashboard.css";
 import { useDispatch } from "react-redux";
-import { create, update} from '@/state/entityId/entityIdSlice';
+import { update} from '@/state/entityId/entityIdSlice';
 import { useTranslation } from "next-i18next";
-const API_URL = process.env.NEXT_PUBLIC_BACKEND_API_URL;
+
+interface PrefixedAssetProperty {
+  key: string;
+  value: string; 
+}
 
 interface DashboardAssetsProps {
   setBlockerProp: Dispatch<SetStateAction<boolean>>
-  setPrefixedAssetPropertyProp: any
+ setPrefixedAssetPropertyProp: Dispatch<SetStateAction<PrefixedAssetProperty[]>>;
 }
 
 const DashboardAssets: React.FC<DashboardAssetsProps> = ({ setBlockerProp, setPrefixedAssetPropertyProp }) => {
@@ -53,7 +57,7 @@ const DashboardAssets: React.FC<DashboardAssetsProps> = ({ setBlockerProp, setPr
   const dataTableRef = useRef(null);
   const router = useRouter();
   const {setMachineStateValue, setSelectedAssetData,setAssetCount } = useDashboard();
-  const toast = useRef<any>(null);
+  const toast = useRef<Toast>(null);
   const dispatch = useDispatch();
   const { t } = useTranslation(['placeholder','dashboard']);
 
@@ -123,7 +127,9 @@ const DashboardAssets: React.FC<DashboardAssetsProps> = ({ setBlockerProp, setPr
     const allKeys = Object.keys(selectedAsset);
     const prefixedKeys = allKeys.filter(key => key.startsWith(prefix));
 
-    setPrefixedAssetPropertyProp(prefixedKeys);
+      prefixedKeys.forEach(key => {
+      setPrefixedAssetPropertyProp(prev => [...prev, { key, value: selectedAsset[key] }]);
+    });
     dispatch(update(selectedAsset?.id));
     setSelectedAssetData(selectedAsset);
 
@@ -143,7 +149,7 @@ const DashboardAssets: React.FC<DashboardAssetsProps> = ({ setBlockerProp, setPr
     toast.current?.show({ severity: severity, summary: summary, detail: message, life: 5000 });
   };
 
-  const searchAsset = (e: any) => {
+  const searchAsset = (e: React.ChangeEvent<HTMLInputElement>) => {
     const searchedText = e.target.value;
     setSearchedAsset(e.target.value);
 

frontend/src/components/dashboard/dashboard-cards.tsx

@@ -24,7 +24,8 @@ import axios from "axios";
 import { useSelector } from "react-redux";
 import { RootState } from "@/state/store";
 import { useTranslation } from "next-i18next";
-
+import { AlertsResponse } from "@/types/alert-response";
+import { AssetData } from "@/types/dashboard-cards";
 const DashboardCards: React.FC = () => {
 
     const { machineStateValue,
@@ -42,10 +43,10 @@ const DashboardCards: React.FC = () => {
     const [relations, setRelations] = useState(false);
     const [difference, setDifference] = useState(localStorage.getItem("runningTime") || "00:00:00");
     const [onlineAverage, setOnlineAverage] = useState(0);
-    const [hasRelations, setHasRelations] = useState<any>([]);
+    const [hasRelations, setHasRelations] = useState<Record<string, {}>[]>([]);
     const [childCount, setChildCount] = useState(0);
     const [prevTimer, setPrevTimer] = useState('00:00:00');
-    let intervalId: any;
+    let intervalId: ReturnType<typeof setInterval>;
     const { t } = useTranslation('dashboard');
     const API_URL = process.env.NEXT_PUBLIC_BACKEND_API_URL;
 
@@ -54,7 +55,7 @@ const DashboardCards: React.FC = () => {
 
     const fetchAllAlerts = async () => {
         try {
-            const response = await getAlerts();
+            const response:AlertsResponse = await getAlerts();
             const filteredNotifications = response.alerts.filter(({ resource }) => resource === entityIdValue);
             setNotificationData(filteredNotifications)
         } catch (error) {
@@ -132,14 +133,14 @@ const DashboardCards: React.FC = () => {
             const key = Object.keys(property)[0];
             const value = property[key];
             if (value.object !== "json-ld-1.1") {
-                setRelationsCount((prev: any) => prev + 1);
-                setChildCount((prev: any) => prev + 1);
+                setRelationsCount((prev) => prev + 1);
+                setChildCount((prev) => prev + 1);
             }
             if (value.length > 0) {
-                value.forEach(item => {
+                value.forEach((item:AssetData) => {
                     if (item.object !== "json-ld-1.1") {
-                        setChildCount((prev: any) => prev + 1);
-                        setRelationsCount((prev: any) => prev + 1);
+                        setChildCount((prev) => prev + 1);
+                        setRelationsCount((prev) => prev + 1);
                     }
                 })
             }
@@ -160,10 +161,9 @@ const DashboardCards: React.FC = () => {
                     },
                     withCredentials: true,
                 });
-
-                response?.data.forEach(item => {
+                response?.data.forEach((item:AssetData) => {
                     if (item.id !== "json-ld-1.1") {
-                        setRelationsCount((prev: any) => prev + 1);
+                        setRelationsCount((prev) => prev + 1);
                     }
                 })
             }