app/src/components/Dashboard/DashboardCard.tsx

@@ -226,7 +226,6 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
                             className="kebab-wrapper"
                             onClick={(e) => {
                                 e.stopPropagation();
-                                console.log("Kebab menu clicked");
                                 setIsKebabOpen((prev) => !prev);
                             }}
                         >
@@ -245,7 +244,6 @@ const DashboardCard: React.FC<DashBoardCardProps> = ({
                                 className="option"
                                 title={""}
                                 onClick={(e) => {
-                                    console.log(option);
                                     e.stopPropagation();
                                     handleOptionClick(option);
                                 }}

app/src/modules/builder/aisle/aisleCreator/aisleCreator.tsx

@@ -6,6 +6,8 @@ import { useAisleStore } from '../../../../store/builder/useAisleStore';
 import ReferenceAisle from './referenceAisle';
 import { useBuilderStore } from '../../../../store/builder/useBuilderStore';
 import ReferencePoint from '../../point/reference/referencePoint';
+import { createAisleApi } from '../../../../services/factoryBuilder/aisle/createAisleApi';
+import { useParams } from 'react-router-dom';
 
 function AisleCreator() {
     const { scene, camera, raycaster, gl, pointer } = useThree();
@@ -17,6 +19,7 @@ function AisleCreator() {
     const { addAisle, getAislePointById } = useAisleStore();
     const drag = useRef(false);
     const isLeftMouseDown = useRef(false);
+    const { projectId } = useParams();
 
     const [tempPoints, setTempPoints] = useState<Point[]>([]);
     const [isCreating, setIsCreating] = useState(false);
@@ -97,6 +100,9 @@ function AisleCreator() {
                     };
                     console.log('aisle: ', aisle);
                     addAisle(aisle);
+                    if (projectId) {
+                        createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
+                    }
                     setTempPoints([newPoint]);
                 }
             } else if (aisleType === 'dashed-aisle') {
@@ -117,6 +123,9 @@ function AisleCreator() {
                         }
                     };
                     addAisle(aisle);
+                    if (projectId) {
+                        createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
+                    }
                     setTempPoints([newPoint]);
                 }
             } else if (aisleType === 'dotted-aisle') {
@@ -136,6 +145,9 @@ function AisleCreator() {
                         }
                     };
                     addAisle(aisle);
+                    if (projectId) {
+                        createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
+                    }
                     setTempPoints([newPoint]);
                 }
             } else if (aisleType === 'arrow-aisle') {
@@ -154,6 +166,9 @@ function AisleCreator() {
                         }
                     };
                     addAisle(aisle);
+                    if (projectId) {
+                        createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
+                    }
                     setTempPoints([newPoint]);
                 }
             } else if (aisleType === 'arrows-aisle') {
@@ -174,6 +189,9 @@ function AisleCreator() {
                         }
                     };
                     addAisle(aisle);
+                    if (projectId) {
+                        createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
+                    }
                     setTempPoints([newPoint]);
                 }
             } else if (aisleType === 'arc-aisle') {
@@ -193,6 +211,9 @@ function AisleCreator() {
                         }
                     };
                     addAisle(aisle);
+                    if (projectId) {
+                        createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
+                    }
                     setTempPoints([newPoint]);
                 }
             } else if (aisleType === 'circle-aisle') {
@@ -211,6 +232,9 @@ function AisleCreator() {
                         }
                     };
                     addAisle(aisle);
+                    if (projectId) {
+                        createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
+                    }
                     setTempPoints([newPoint]);
                 }
             } else if (aisleType === 'junction-aisle') {
@@ -230,6 +254,9 @@ function AisleCreator() {
                         }
                     };
                     addAisle(aisle);
+                    if (projectId) {
+                        createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
+                    }
                     setTempPoints([newPoint]);
                 }
             }

app/src/modules/builder/aisle/aislesGroup.tsx

@@ -1,7 +1,23 @@
+import { useEffect } from 'react'
 import AisleCreator from './aisleCreator/aisleCreator'
 import AisleInstances from './Instances/aisleInstances'
+import { useParams } from 'react-router-dom';
+import { getAisleApi } from '../../../services/factoryBuilder/aisle/getAisleApi';
+import { useAisleStore } from '../../../store/builder/useAisleStore';
 
 function AislesGroup() {
+    const { projectId } = useParams();
+    const { setAisles } = useAisleStore();
+    useEffect(() => {
+        const fetchAisle = async () => {
+            if (projectId) {
+                const aisles = await getAisleApi(projectId);
+                setAisles(aisles);
+                // console.log('aisles: ', aisles);
+            }
+        }
+        fetchAisle()
+    }, [])
 
     return (
 
@@ -9,7 +25,7 @@ function AislesGroup() {
 
             <AisleCreator />
 
-            
+
             <AisleInstances />
 
         </>

app/src/modules/builder/point/point.tsx

@@ -9,6 +9,9 @@ import { useBuilderStore } from '../../../store/builder/useBuilderStore';
 import { usePointSnapping } from './helpers/usePointSnapping';
 import { useAislePointSnapping } from './helpers/useAisleDragSnap';
 import { useWallStore } from '../../../store/builder/useWallStore';
+import { deleteAisleApi } from '../../../services/factoryBuilder/aisle/deleteAisleApi';
+import { useParams } from 'react-router-dom';
+import { createAisleApi } from '../../../services/factoryBuilder/aisle/createAisleApi';
 
 function Point({ point }: { readonly point: Point }) {
     const materialRef = useRef<THREE.ShaderMaterial>(null);
@@ -16,13 +19,13 @@ function Point({ point }: { readonly point: Point }) {
     const plane = useMemo(() => new THREE.Plane(new THREE.Vector3(0, 1, 0), 0), []);
     const [isHovered, setIsHovered] = useState(false);
     const { toolMode } = useToolMode();
-    const { setPosition: setAislePosition, removePoint: removeAislePoint } = useAisleStore();
+    const { setPosition: setAislePosition, removePoint: removeAislePoint, getAisleByPointId } = useAisleStore();
     const { setPosition: setWallPosition, removePoint: removeWallPoint } = useWallStore();
     const { snapPosition } = useAislePointSnapping(point);
     const { checkSnapForAisle } = usePointSnapping({ uuid: point.pointUuid, pointType: point.pointType, position: point.position });
     const { hoveredPoint, setHoveredPoint } = useBuilderStore();
     const { deletePointOrLine } = useDeletePointOrLine();
-
+    const { projectId } = useParams();
     const boxScale: [number, number, number] = Constants.pointConfig.boxScale;
     const colors = getColor(point);
 
@@ -98,7 +101,7 @@ function Point({ point }: { readonly point: Point }) {
                     const finalSnappedPosition = checkSnapForAisle(aisleSnappedPosition.position);
 
                     const aislePoints = setAislePosition(point.pointUuid, finalSnappedPosition.position);
-                    // console.log('aislePoints: ', aislePoints);for backend
+
                 }
             } else if (point.pointType === 'Wall') {
                 if (position) {
@@ -112,7 +115,16 @@ function Point({ point }: { readonly point: Point }) {
 
     const handleDragEnd = (point: Point) => {
         if (deletePointOrLine) return;
-        console.log('point: ', point);
+        if (point.pointType === 'Aisle') {
+            const aisle = getAisleByPointId(point.pointUuid);
+            if (aisle && projectId) {
+                // console.log('Aisle after drag: ', aisle);
+                createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
+
+            }
+        } else if (point.pointType === 'Wall') {
+            // console.log('Wall after drag: ', point);
+        }
     }
 
     const handlePointClick = (point: Point) => {
@@ -121,7 +133,9 @@ function Point({ point }: { readonly point: Point }) {
                 const removedAisles = removeAislePoint(point.pointUuid);
                 if (removedAisles.length > 0) {
                     removedAisles.forEach(aisle => {
-                        // console.log('Removed Aisle: ', aisle);
+                        console.log('Removed Aisle: ', aisle);
+                        if (projectId)
+                            deleteAisleApi(aisle.aisleUuid, projectId)
                     });
                     setHoveredPoint(null);
                 }

app/src/services/factoryBuilder/aisle/createAisleApi.ts

@@ -0,0 +1,35 @@
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
+
+export const createAisleApi = async (
+  aisleUuid: string,
+  points: any,
+  type: Object,
+  projectId: string
+) => {
+  try {
+    const response = await fetch(`${url_Backend_dwinzo}/api/V1/UpsertAisle`, {
+      method: "POST",
+      headers: {
+        Authorization: "Bearer <access_token>", // Replace with actual token
+        "Content-Type": "application/json",
+        token: localStorage.getItem("token") || "", // Coerce null to empty string
+        refresh_token: localStorage.getItem("refreshToken") || "",
+      },
+      body: JSON.stringify({ aisleUuid, points, type, projectId }),
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to add project");
+    }
+
+    const result = await response.json();
+    // console.log("result: ", result);
+    return result;
+  } catch (error) {
+    if (error instanceof Error) {
+      throw new Error(error.message);
+    } else {
+      throw new Error("An unknown error occurred");
+    }
+  }
+};

app/src/services/factoryBuilder/aisle/deleteAisleApi.ts

@@ -0,0 +1,29 @@
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
+
+export const deleteAisleApi = async (aisleUuid: string, projectId: string) => {
+  try {
+    const response = await fetch(`${url_Backend_dwinzo}/api/V1/DeleteAisle`, {
+      method: "PATCH",
+      headers: {
+        Authorization: "Bearer <access_token>", // Replace with actual token
+        "Content-Type": "application/json",
+        token: localStorage.getItem("token") || "", // Coerce null to empty string
+        refresh_token: localStorage.getItem("refreshToken") || "",
+      },
+      body: JSON.stringify({ aisleUuid, projectId }),
+    });
+    if (!response.ok) {
+      throw new Error("Failed to clearPanel in the zone");
+    }
+
+    const result = await response.json();
+    // console.log('result: ', result);
+    return result;
+  } catch (error) {
+    if (error instanceof Error) {
+      throw new Error(error.message);
+    } else {
+      throw new Error("An unknown error occurred");
+    }
+  }
+};

app/src/services/factoryBuilder/aisle/getAisleApi.ts

@@ -0,0 +1,28 @@
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
+
+export const getAisleApi = async (projectId: string) => {
+  try {
+    const response = await fetch(
+      `${url_Backend_dwinzo}/api/V1/Aisles/${projectId}`,
+      {
+        method: "GET",
+        headers: {
+          Authorization: "Bearer <access_token>", // Replace with actual token
+          "Content-Type": "application/json",
+          token: localStorage.getItem("token") || "", // Coerce null to empty string
+          refresh_token: localStorage.getItem("refreshToken") || "",
+        },
+      }
+    );
+
+    // console.log("response: ", response);
+    if (!response.ok) {
+      throw new Error("Failed to fetch");
+    }
+
+    return await response.json();
+  } catch (error: any) {
+    console.error("Failed to get asset image:", error);
+    throw new Error(error.message);
+  }
+};

app/src/store/builder/useAisleStore.ts

@@ -41,6 +41,7 @@ interface AisleStore {
   ) => void;
 
   getAisleById: (uuid: string) => Aisle | undefined;
+  getAisleByPointId: (uuid: string) => Aisle | undefined;
   getAislePointById: (uuid: string) => Point | undefined;
   getConnectedPoints: (uuid: string) => Point[] | [];
   getAisleType: <T extends AisleType>(uuid: string) => T | undefined;
@@ -210,6 +211,12 @@ export const useAisleStore = create<AisleStore>()(
       return get().aisles.find((a) => a.aisleUuid === uuid);
     },
 
+    getAisleByPointId: (uuid) => {
+      return get().aisles.find((a) => {
+        return a.points.some((p) => p.pointUuid === uuid);
+      });
+    },
+
     getAislePointById: (uuid) => {
       for (const aisle of get().aisles) {
         const point = aisle.points.find((p) => p.pointUuid === uuid);

app/src/styles/pages/dashboard.scss

@@ -88,7 +88,6 @@
           &:hover {
             background: var(--background-color-button);
           }
-
         }
       }
     }
@@ -130,7 +129,6 @@
       width: 100%;
       height: calc(100% - 357px);
 
-
       .header-wrapper {
         font-size: var(--font-size-large);
 
@@ -140,7 +138,6 @@
           border-radius: #{$border-radius-extra-large};
 
           &.active {
-
             background: var(--background-color-button);
             color: var(--text-color);
           }
@@ -159,8 +156,6 @@
       }
     }
   }
-
-
 }
 
 .dashboard-card-container {
@@ -207,7 +202,7 @@
     // backdrop-filter: blur(18px);
 
     border-radius: #{$border-radius-xlarge};
-    // transform: translateY(100%);
+    // transform: translateY(100%);///////hovered
     transition: transform 0.25s linear;
 
     .project-details {
@@ -241,10 +236,8 @@
         transform: rotate(90deg);
       }
     }
-
   }
 
-
   .kebab-options-wrapper {
     position: absolute;
     bottom: 40px;
@@ -277,22 +270,15 @@
     }
   }
 
-
   &:hover {
-
-
     overflow: visible;
-
     .kebab-options-wrapper {
       display: flex;
     }
-
     .project-details-container {
       transform: translateY(0);
     }
   }
-
-
 }
 
 .market-place-banner-container {
@@ -348,4 +334,4 @@
     font-family: #{$font-roboto};
     cursor: pointer;
   }
-}
+}