feat: Refactor icon components and update button elements for improved accessibility and consistency

app/src/components/icons/ContextMenuIcons.tsx

@@ -42,6 +42,7 @@ export function FlipXAxisIcon() {
 }
 
 export function FlipYAxisIcon() {
+  return (
     <svg
       width="12"
       height="12"
@@ -79,7 +80,8 @@ export function FlipYAxisIcon() {
         strokeWidth="0.75"
         strokeLinecap="round"
       />
-  </svg>;
+    </svg>
+  );
 }
 export function FlipZAxisIcon() {
   return (

app/src/components/icons/ExportCommonIcons.tsx

@@ -168,20 +168,6 @@ export function AddIcon() {
   );
 }
 
-export function RmoveIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M3 6.5H9" stroke="var(--text-color)" strokeLinecap="round" />
-    </svg>
-  );
-}
-
 export function CloseIcon() {
   return (
     <svg

app/src/components/layout/Dashboard/MarketPlaceBanner.tsx

@@ -23,16 +23,16 @@ const MarketPlaceBanner = () => {
           <path
             d="M167.189 2C154.638 36.335 104.466 106.204 4.18872 111"
             stroke="white"
-            stroke-width="3"
+            strokeWidth="3"
-            stroke-linecap="round"
+            strokeLinecap="round"
-            stroke-linejoin="round"
+            strokeLinejoin="round"
           />
           <path
             d="M10.662 118.326L1.59439 111.524L9.47334 103.374"
             stroke="white"
-            stroke-width="3"
+            strokeWidth="3"
-            stroke-linecap="round"
+            strokeLinecap="round"
-            stroke-linejoin="round"
+            strokeLinejoin="round"
           />
         </svg>
       </div>

app/src/components/layout/Dashboard/SidePannel.tsx

@@ -11,7 +11,7 @@ import {
 import { SettingsIcon, TrashIcon } from "../../icons/ExportCommonIcons";
 
 const SidePannel: React.FC = () => {
-  const userName = localStorage.getItem("userName") || "Anonymous";
+  const userName = localStorage.getItem("userName") ?? "Anonymous";
   return (
     <div className="side-pannel-container">
       <div className="side-pannel-header">

app/src/components/layout/confirmationPopup/ConfirmationPopup.tsx

@@ -17,12 +17,12 @@ const ConfirmationPopup: React.FC<ConfirmationPopupProps> = ({
       <div className="confirmation-modal">
         <p className="message">{message}</p>
         <div className="buttton-wrapper">
-          <div className="confirmation-button" onClick={onConfirm}>
+          <button className="confirmation-button" onClick={onConfirm}>
             OK
-          </div>
+          </button>
-          <div className="confirmation-button" onClick={onCancel}>
+          <button className="confirmation-button" onClick={onCancel}>
             Cancel
-          </div>
+          </button>
         </div>
       </div>
     </div>

app/src/components/layout/sidebarLeft/visualization/widgets/ChartComponent.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useMemo } from "react";
 import { Chart } from "chart.js/auto";
-// import { useThemeStore } from "../../../../../store/useThemeStore";
 
 // Define Props Interface
 interface ChartComponentProps {
@@ -29,7 +28,6 @@ const ChartComponent = ({
   data: propsData,
 }: ChartComponentProps) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
-  // const { themeColor } = useThemeStore();
 
   // Memoize Theme Colors to Prevent Unnecessary Recalculations
   // const buttonActionColor = useMemo(
@@ -66,7 +64,7 @@ const ChartComponent = ({
   // Memoize Chart Font Style
   const chartFontStyle = useMemo(
     () => ({
-      family: fontFamily || "Arial",
+      family: fontFamily ?? "Arial",
       size: fontSizeValue,
       weight: fontWeightValue,
       color: "#2B3344",

app/src/components/layout/sidebarLeft/visualization/widgets/Widgets.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import ToggleHeader from "../../../../ui/inputs/ToggleHeader";
 import Widgets2D from "./Widgets2D";
 import Widgets3D from "./Widgets3D";
@@ -6,7 +5,6 @@ import WidgetsFloating from "./WidgetsFloating";
 import { useWidgetSubOption } from "../../../../../store/store";
 
 const Widgets = () => {
-  const [activeOption, setActiveOption] = useState("2D");
   const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
 
   const handleToggleClick = (option: string) => {

app/src/components/layout/sidebarLeft/visualization/widgets/WidgetsFloating.tsx

@@ -8,42 +8,11 @@ import {
 import SimpleCard from "../../../../../modules//visualization/widgets/floating/cards/SimpleCard";
 
 import WarehouseThroughput from "../../../../../modules//visualization/widgets/floating/cards/WarehouseThroughput";
-import ProductivityDashboard from "../../../../../modules//visualization/widgets/floating/cards/ProductivityDashboard";
 import FleetEfficiency from "../../../../../modules//visualization/widgets/floating/cards/FleetEfficiency";
 
-interface Widget {
-  id: string;
-  name: string;
-}
-
 const WidgetsFloating = () => {
-  // const [widgets, setWidgets] = useState<Widget[]>([
-  //   { id: "1", name: "Working State Widget" },
-  //   { id: "2", name: "Floating Widget 2" },
-  //   { id: "3", name: "Floating Widget 3" },
-  //   { id: "4", name: "Floating Widget 4" },
-  // ]);
-
-  // Function to handle drag start
-  const handleDragStart = (
-    e: React.DragEvent<HTMLDivElement>,
-    widget: Widget
-  ) => {
-    e.dataTransfer.setData("application/json", JSON.stringify(widget));
-  };
-
   return (
     <div className="floatingWidgets-wrapper widgets-wrapper">
-      {/* {widgets.map((widget) => (
-        <div
-          key={widget.id}
-          className="floating"
-          draggable
-          onDragStart={(e) => handleDragStart(e, widget)}
-        >
-          {widget.name}
-        </div>
-      ))} */}
       {/* Floating 1 */}
       <SimpleCard
         header={"Today’s Earnings"}

app/src/components/layout/sidebarRight/properties/eventProperties/EventProperties.tsx

@@ -50,7 +50,6 @@ const EventProperties: React.FC<EventPropertiesProps> = ({
   const actionsContainerRef = useRef<HTMLDivElement>(null);
 
   const [activeOption, setActiveOption] = useState("default");
-  const [dummyactiveOption, setTypeOption] = useState("default");
 
   const getAvailableActions = () => {
     if (assetType === "conveyor") {
@@ -136,9 +135,9 @@ const EventProperties: React.FC<EventPropertiesProps> = ({
         <div className="actions">
           <div className="header">
             <div className="header-value">Actions</div>
-            <div className="add-button" onClick={() => {}}>
+            <button className="add-button" onClick={() => {}}>
               <AddIcon /> Add
-            </div>
+            </button>
           </div>
           <div
             className="lists-main-container"
@@ -195,7 +194,8 @@ const EventProperties: React.FC<EventPropertiesProps> = ({
           {activeOption === "swap" && <SwapAction />} {/* done */}
           {activeOption === "despawn" && <DespawnAction />} {/* done */}
           {activeOption === "travel" && <TravelAction />} {/* done */}
-          {activeOption === "pickAndPlace" && <PickAndPlaceAction />} {/* done */}
+          {activeOption === "pickAndPlace" && <PickAndPlaceAction />}{" "}
+          {/* done */}
           {activeOption === "process" && <ProcessAction />} {/* done */}
           {activeOption === "store" && <StorageAction />} {/* done */}
         </div>

app/src/components/layout/sidebarRight/properties/eventProperties/actions/DespawnAction.tsx

@@ -3,7 +3,6 @@ import InputWithDropDown from "../../../../../ui/inputs/InputWithDropDown";
 
 const DespawnAction: React.FC = () => {
   return (
-    <>
     <InputWithDropDown
       label="Delay"
       value=""
@@ -15,7 +14,6 @@ const DespawnAction: React.FC = () => {
       onClick={() => {}}
       onChange={(value) => console.log(value)}
     />
-    </>
   );
 };
 

app/src/components/layout/sidebarRight/properties/eventProperties/actions/SwapAction.tsx

@@ -2,11 +2,7 @@ import React from "react";
 import PreviewSelectionWithUpload from "../../../../../ui/inputs/PreviewSelectionWithUpload";
 
 const SwapAction: React.FC = () => {
-  return (
+  return <PreviewSelectionWithUpload />;
-    <>
-      <PreviewSelectionWithUpload />
-    </>
-  );
 };
 
 export default SwapAction;

app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx

@@ -35,27 +35,27 @@ const Trigger: React.FC = () => {
     <div className="trigger-wrapper">
       <div className="header">
         <div className="title">Trigger</div>
-        <div
+        <button
           className="add-button"
           onClick={addTrigger}
           style={{ cursor: "pointer" }}
         >
           <AddIcon /> Add
-        </div>
+        </button>
       </div>
       <div className="trigger-list">
         {/* Map over triggers and render them */}
         {triggers.map((trigger, index) => (
-          <div key={index} className="trigger-item">
+          <div key={index.toFixed()} className="trigger-item">
             <div className="trigger-name">
               {trigger}
-              <div
+              <button
                 className="remove-button"
                 onClick={() => removeTrigger(index)}
                 style={{ cursor: "pointer" }}
               >
                 <RemoveIcon />
-              </div>
+              </button>
             </div>
             <LabledDropdown
               defaultOption={activeOption}

app/src/components/ui/list/List.tsx

@@ -10,7 +10,7 @@ import {
   ArrowIcon,
   EyeIcon,
   LockIcon,
-  RmoveIcon,
+  RemoveIcon,
 } from "../../icons/ExportCommonIcons";
 import { useThree } from "@react-three/fiber";
 import { useFloorItems, useZoneAssetId, useZones } from "../../../store/store";
@@ -184,7 +184,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                     </div>
                     {remove && (
                       <div className="remove option">
-                        <RmoveIcon />
+                        <RemoveIcon />
                       </div>
                     )}
                     {item.assets && item.assets.length > 0 && (
@@ -221,7 +221,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                             </div>
                             {remove && (
                               <div className="remove option">
-                                <RmoveIcon />
+                                <RemoveIcon />
                               </div>
                             )}
                           </div>

app/src/modules/scene/scene.tsx

@@ -9,17 +9,25 @@ import Simulation from "../simulation/simulation";
 import Collaboration from "../collaboration/collaboration";
 
 export default function Scene() {
-    const map = useMemo(() => [
+  const map = useMemo(
+    () => [
       { name: "forward", keys: ["ArrowUp", "w", "W"] },
       { name: "backward", keys: ["ArrowDown", "s", "S"] },
       { name: "left", keys: ["ArrowLeft", "a", "A"] },
-        { name: "right", keys: ["ArrowRight", "d", "D"] },],
+      { name: "right", keys: ["ArrowRight", "d", "D"] },
-        []);
+    ],
+    []
+  );
 
   return (
       <KeyboardControls map={map}>
-            <Canvas eventPrefix="client" gl={{ powerPreference: "high-performance", antialias: true }} onContextMenu={(e) => { e.preventDefault(); }}>
+        <Canvas
-
+          eventPrefix="client"
+          gl={{ powerPreference: "high-performance", antialias: true }}
+          onContextMenu={(e) => {
+            e.preventDefault();
+          }}
+        >
           <Setup />
 
           <Collaboration />
@@ -29,7 +37,6 @@ export default function Scene() {
           <Simulation />
 
           <Visualization />
-
         </Canvas>
       </KeyboardControls>
   );

app/src/modules/visualization/RealTimeVisulization.tsx

@@ -12,15 +12,12 @@ import {
   useFloatingWidget,
 } from "../../store/visualization/useDroppedObjectsStore";
 import {
-  useAsset3dWidget,
   useSocketStore,
   useWidgetSubOption,
-  useZones,
 } from "../../store/store";
 import { getZone2dData } from "../../services/visulization/zone/getZoneData";
 import { generateUniqueId } from "../../functions/generateUniqueId";
 import { determinePosition } from "./functions/determinePosition";
-import { addingFloatingWidgets } from "../../services/visulization/zone/addFloatingWidgets";
 import SocketRealTimeViz from "./socket/realTimeVizSocket.dev";
 import RenderOverlay from "../../components/templates/Overlay";
 import ConfirmationPopup from "../../components/layout/confirmationPopup/ConfirmationPopup";
@@ -68,20 +65,15 @@ const RealTimeVisulization: React.FC = () => {
   const containerRef = useRef<HTMLDivElement>(null);
   const { isPlaying } = usePlayButtonStore();
   const { activeModule } = useModuleStore();
-  const [droppedObjects, setDroppedObjects] = useState<any[]>([]);
   const [zonesData, setZonesData] = useState<FormattedZoneData>({});
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
 
-  const { rightSelect, setRightSelect } = useRightSelected();
+  const { setRightSelect } = useRightSelected();
-  const { editWidgetOptions, setEditWidgetOptions } =
+  const { editWidgetOptions } = useEditWidgetOptionsStore();
-    useEditWidgetOptionsStore();
   const { rightClickSelected, setRightClickSelected } = useRightClickSelected();
   const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false);
-
+  const { setFloatingWidget } = useFloatingWidget();
-  // const [floatingWidgets, setFloatingWidgets] = useState<Record<string, { zoneName: string; zoneId: string; objects: any[] }>>({});
+  const { widgetSubOption } = useWidgetSubOption();
-  const { floatingWidget, setFloatingWidget } = useFloatingWidget();
-  const { widgetSelect, setWidgetSelect } = useAsset3dWidget();
-  const { widgetSubOption, setWidgetSubOption } = useWidgetSubOption();
   const { visualizationSocket } = useSocketStore();
   const { setSelectedChartId } = useWidgetStore();
 
@@ -99,11 +91,10 @@ const RealTimeVisulization: React.FC = () => {
 
   useEffect(() => {
     async function GetZoneData() {
-      const email = localStorage.getItem("email") || "";
+      const email = localStorage.getItem("email") ?? "";
       const organization = email?.split("@")[1]?.split(".")[0];
       try {
         const response = await getZone2dData(organization);
-        // console.log('response: ', response);
 
         if (!Array.isArray(response)) {
           return;
@@ -125,7 +116,9 @@ const RealTimeVisulization: React.FC = () => {
           {}
         );
         setZonesData(formattedData);
-      } catch (error) {}
+      } catch (error) {
+        console.log(error);
+      }
     }
 
     GetZoneData();
@@ -151,12 +144,10 @@ const RealTimeVisulization: React.FC = () => {
     });
   }, [selectedZone]);
 
-  // useEffect(() => {}, [floatingWidgets]);
-
   const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault();
     try {
-      const email = localStorage.getItem("email") || "";
+      const email = localStorage.getItem("email") ?? "";
       const organization = email?.split("@")[1]?.split(".")[0];
 
       const data = event.dataTransfer.getData("text/plain");
@@ -172,8 +163,8 @@ const RealTimeVisulization: React.FC = () => {
       const relativeY = event.clientY - rect.top;
 
       // Widget dimensions
-      const widgetWidth = droppedData.width || 125;
+      const widgetWidth = droppedData.width ?? 125;
-      const widgetHeight = droppedData.height || 100;
+      const widgetHeight = droppedData.height ?? 100;
 
       // Center the widget at cursor
       const centerOffsetX = widgetWidth / 2;
@@ -275,7 +266,7 @@ const RealTimeVisulization: React.FC = () => {
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
-  }, [setRightClickSelected]);
+  }, [setRightClickSelected, setRightSelect]);
 
   const [canvasDimensions, setCanvasDimensions] = useState({
     width: 0,
@@ -340,6 +331,7 @@ const RealTimeVisulization: React.FC = () => {
               borderRadius:
                 isPlaying || activeModule !== "visualization" ? "" : "6px",
             }}
+            role="application"
             onDrop={(event) => handleDrop(event)}
             onDragOver={(event) => event.preventDefault()}
           >

app/src/modules/visualization/visualization.tsx

@@ -3,9 +3,8 @@ import Dropped3dWidgets from './widgets/3d/Dropped3dWidget'
 import ZoneCentreTarget from './zone/zoneCameraTarget'
 import ZoneAssets from './zone/zoneAssets'
 import MqttEvents from '../../services/factoryBuilder/mqtt/mqttEvents'
-import DrieHtmlTemp from './mqttTemp/drieHtmlTemp'
 
-const Visualization = () => {
+const Visualization:React.FC = () => {
     return (
         <>
 

app/src/styles/base/reset.scss

@@ -12,3 +12,10 @@ input[type="password"]::-webkit-clear-button, /* For Chrome/Safari clear button
 input[type="password"]::-webkit-inner-spin-button {  /* Just in case */
   display: none;
 }
+
+button{
+  border: none;
+  outline: none;
+  background: none;
+  cursor: pointer;
+}

app/src/styles/layout/sidebar.scss

@@ -675,7 +675,8 @@
         color: var(--primary-color);
         border-radius: #{$border-radius-small};
         cursor: pointer;
-
+        outline: none;
+        border: none;
         path {
           stroke: var(--primary-color);
         }