Add iot data and custom input card for floting cards

app/src/components/ui/componets/DisplayZone.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState, useCallback } from "react";
-import { Widget } from "../../../store/useWidgetStore";
+import { useWidgetStore, Widget } from "../../../store/useWidgetStore";
 import { MoveArrowLeft, MoveArrowRight } from "../../icons/SimulationIcons";
 import { InfoIcon } from "../../icons/ExportCommonIcons";
 import { useDroppedObjectsStore, useFloatingWidget } from "../../../store/useDroppedObjectsStore";
@@ -74,6 +74,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   const [showLeftArrow, setShowLeftArrow] = useState(false);
   const [showRightArrow, setShowRightArrow] = useState(false);
   const { floatingWidget, setFloatingWidget } = useFloatingWidget()
+  const{setSelectedChartId}=useWidgetStore()
 
   // Function to calculate overflow state
   const updateOverflowState = useCallback(() => {
@@ -152,9 +153,9 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   async function handleSelect2dZoneData(zoneId: string, zoneName: string) {
     try {
       if (selectedZone?.zoneId === zoneId) {
-
         return;
       }
+      setSelectedChartId(null)
       const email = localStorage.getItem("email") || "";
       const organization = email?.split("@")[1]?.split(".")[0];
       // Fetch data from backend