first commit

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

@@ -0,0 +1,79 @@
+import React from "react";
+import {
+  CartIcon,
+  DocumentIcon,
+  GlobeIcon,
+  WalletIcon,
+} from "../../../../icons/3dChartIcons";
+import SimpleCard from "../../../../ui/realTimeVis/floating/SimpleCard";
+
+import WarehouseThroughput from "../../../../ui/realTimeVis/floating/WarehouseThroughput";
+import ProductivityDashboard from "../../../../ui/realTimeVis/floating/ProductivityDashboard";
+import FleetEfficiency from "../../../../ui/realTimeVis/floating/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.map((widget) => (
+        <div
+          key={widget.id}
+          className="floating"
+          draggable
+          onDragStart={(e) => handleDragStart(e, widget)}
+        >
+          {widget.name}
+        </div>
+      ))} */}
+      {/* Floating 1 */}
+      <SimpleCard
+        header={"Today’s Money"}
+        icon={WalletIcon}
+        value={"$53,000"}
+        per={"+55%"}
+      />
+      <SimpleCard
+        header={"Today’s Users"}
+        icon={GlobeIcon}
+        value={"1,200"}
+        per={"+30%"}
+      />
+      <SimpleCard
+        header={"New Clients"}
+        icon={DocumentIcon}
+        value={"250"}
+        per={"+12%"}
+      />
+      <SimpleCard
+        header={"Total Sales"}
+        icon={CartIcon}
+        value={"$150,000"}
+        per={"+20%"}
+      />{" "}
+      <WarehouseThroughput />
+      {/* <ProductivityDashboard /> */}
+      <FleetEfficiency />
+    </div>
+  );
+};
+
+export default WidgetsFloating;