feat: Enhance vehicle simulation with draggable path points and interactive controls

app/src/components/Dashboard/SidePannel.tsx

@@ -38,9 +38,11 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
 
   const handleCreateNewProject = async () => {
     const token = localStorage.getItem("token");
+    const refreshToken = localStorage.getItem("refreshToken")
+    console.log('refreshToken: ', refreshToken);
     try {
       const projectId = generateProjectId();
-      useSocketStore.getState().initializeSocket(email, organization, token);
+      useSocketStore.getState().initializeSocket(email, organization, token, refreshToken);
 
       //API for creating new Project
       // const project = await createProject(
@@ -56,7 +58,8 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
         organization: organization,
         projectUuid: projectId,
       };
-      
+
+      console.log('projectSocket: ', projectSocket);
       if (projectSocket) {
         const handleResponse = (data: any) => {
           if (data.message === "Project created successfully") {

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

@@ -27,7 +27,6 @@ const EventProperties: React.FC = () => {
   const { selectedVersionStore } = useVersionContext();
   const { selectedVersion } = selectedVersionStore();
   const { projectId } = useParams();
-
   useEffect(() => {
     const event = getCurrentEventData();
     setCurrentEventData(event);

app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx

@@ -14,6 +14,7 @@ import { useProductContext } from "../../../../../../modules/simulation/products
 import { useParams } from "react-router-dom";
 import { useVersionContext } from "../../../../../../modules/builder/version/versionContext";
 import { useSceneContext } from "../../../../../../modules/scene/sceneContext";
+import { useSelectedPath } from "../../../../../../store/builder/store";
 
 function VehicleMechanics() {
     const [activeOption, setActiveOption] = useState<"default" | "travel">("default");
@@ -27,6 +28,7 @@ function VehicleMechanics() {
     const { selectedVersionStore } = useVersionContext();
     const { selectedVersion } = selectedVersionStore();
     const { projectId } = useParams();
+    const { selectedPath, setSelectedPath } = useSelectedPath();
 
     useEffect(() => {
         if (selectedEventData && selectedEventData.data.type === "vehicle") {
@@ -290,9 +292,34 @@ function VehicleMechanics() {
                                 type={"Vehicle"}
                             />
                         </div>
+                        <div style={{ display: "flex", gap: "10px", flexDirection: "column", alignItems: "center" }}>
+                            <button style={{
+                                backgroundColor: "#6f42c1",
+                                color: "#f3f3fd",
+                                borderRadius: "15px",
+                                height: "30px",
+                                width: "150px",
+                                border: "none",
+                                cursor: "pointer",
+                                padding: "0 5px",
+
+                            }} onClick={() => setSelectedPath("auto")}>Auto Generate Path</button>
+                            <button style={{
+                                backgroundColor: "#6f42c1",
+                                color: "#f3f3fd",
+                                borderRadius: "15px",
+                                height: "30px",
+                                width: "150px",
+                                border: "none",
+                                cursor: "pointer",
+                                padding: "0 5px",
+
+                            }} onClick={() => setSelectedPath("manual")}>Create Path</button>
+                        </div>
                     </section>
                 </>
-            )}
+            )
+            }
         </>
     );
 }