floating widgets data added

app/src/components/ui/realTimeVis/floating/FleetEfficiency.tsx

@@ -4,8 +4,24 @@ const FleetEfficiency = () => {
   // Calculate the rotation angle for the progress bar
   const rotationAngle = -90 + progress * 3.6; // Progress starts from the left (-90°)
 
+  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
+    const rect = event.currentTarget.getBoundingClientRect(); // Get position
+
+    const cardData = JSON.stringify({
+      className: event.currentTarget.className,
+      position: [rect.top, rect.left], // Store position
+      value: rotationAngle, // Example value (you can change if dynamic)
+      per: progress,
+
+    });
+
+    console.log("Dragged Data:", cardData);
+    event.dataTransfer.setData("text/plain", cardData);
+  };
+
+
   return (
-    <div className="fleetEfficiency floating">
+    <div className="fleetEfficiency floating" draggable onDragStart={handleDragStart}>
       <h2 className="header">Fleet Efficiency</h2>
 
       <div className="progressContainer">

app/src/components/ui/realTimeVis/floating/SimpleCard.tsx

@@ -5,6 +5,7 @@ interface SimpleCardProps {
   icon: React.ComponentType<React.SVGProps<SVGSVGElement>>; // React component for SVG icon
   value: string;
   per: string; // Percentage change
+  position?: [number, number]
 }
 
 const SimpleCard: React.FC<SimpleCardProps> = ({
@@ -12,23 +13,30 @@ const SimpleCard: React.FC<SimpleCardProps> = ({
   icon: Icon,
   value,
   per,
+  position = [0, 0],
 }) => {
 
   const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
+    const rect = event.currentTarget.getBoundingClientRect(); // Get position
     const cardData = JSON.stringify({
       header,
       value,
       per,
-      className: event.currentTarget.className, 
+      icon: Icon,
+      className: event.currentTarget.className,
+      position: [rect.top, rect.left], // ✅ Store position
     });
-  
-    console.log("Dragging Data:", cardData); // ✅ Debugging log
-  
+
     event.dataTransfer.setData("text/plain", cardData);
   };
 
   return (
-    <div className="floating total-card" draggable onDragStart={handleDragStart}>
+    <div
+      className="floating total-card"
+      draggable
+      onDragStart={handleDragStart}
+      style={{ top: position[0], left: position[1] }} // No need for ?? 0 if position is guaranteed
+    >
       <div className="header-wrapper">
         <div className="header">{header}</div>
         <div className="data-values">

app/src/components/ui/realTimeVis/floating/WarehouseThroughput.tsx

@@ -111,8 +111,27 @@ const WarehouseThroughput = () => {
     },
   };
 
+  const handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
+    const rect = event.currentTarget.getBoundingClientRect(); // Get element position
+
+    const cardData = JSON.stringify({
+      header: "Warehouse Throughput", // Static header
+      value: "+5", // Example value (you can change if dynamic)
+      per: "2025", // Example percentage or date
+      icon: "📊", // Placeholder for an icon (if needed)
+      className: event.currentTarget.className,
+      position: [rect.top, rect.left], // ✅ Store initial position
+      lineGraphData, // ✅ Include chart data
+      lineGraphOptions, // ✅ Include chart options
+    });
+
+    
+    event.dataTransfer.setData("text/plain", cardData);
+    // event.dataTransfer.effectAllowed = "move"; // Improve drag effect
+  };
+
   return (
-    <div className="warehouseThroughput floating" draggable>
+    <div className="warehouseThroughput floating" draggable onDragStart={handleDragStart}>
       <div className="header">
         <h2>Warehouse Throughput</h2>
         <p>