80 lines
2.1 KiB
TypeScript
80 lines
2.1 KiB
TypeScript
|
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;
|