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);
@@ -95,7 +98,11 @@ function AisleCreator() {
                             aisleWidth: aisleWidth
                         }
                     };
+                    console.log('aisle: ', aisle);
                     addAisle(aisle);
+                    if (projectId) {
+                        createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
+                    }
                     setTempPoints([newPoint]);
                 }
             } else if (aisleType === 'dashed-aisle') {
@@ -116,6 +123,9 @@ function AisleCreator() {
                         }
                     };
                     addAisle(aisle);
+                    if (projectId) {
+                        createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
+                    }
                     setTempPoints([newPoint]);
                 }
             } else if (aisleType === 'dotted-aisle') {
@@ -135,6 +145,9 @@ function AisleCreator() {
                         }
                     };
                     addAisle(aisle);
+                    if (projectId) {
+                        createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
+                    }
                     setTempPoints([newPoint]);
                 }
             } else if (aisleType === 'arrow-aisle') {
@@ -153,6 +166,9 @@ function AisleCreator() {
                         }
                     };
                     addAisle(aisle);
+                    if (projectId) {
+                        createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
+                    }
                     setTempPoints([newPoint]);
                 }
             } else if (aisleType === 'arrows-aisle') {
@@ -173,6 +189,9 @@ function AisleCreator() {
                         }
                     };
                     addAisle(aisle);
+                    if (projectId) {
+                        createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
+                    }
                     setTempPoints([newPoint]);
                 }
             } else if (aisleType === 'arc-aisle') {
@@ -192,6 +211,9 @@ function AisleCreator() {
                         }
                     };
                     addAisle(aisle);
+                    if (projectId) {
+                        createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
+                    }
                     setTempPoints([newPoint]);
                 }
             } else if (aisleType === 'circle-aisle') {
@@ -210,6 +232,9 @@ function AisleCreator() {
                         }
                     };
                     addAisle(aisle);
+                    if (projectId) {
+                        createAisleApi(aisle.aisleUuid, aisle.points, aisle.type, projectId)
+                    }
                     setTempPoints([newPoint]);
                 }
             } else if (aisleType === 'junction-aisle') {
@@ -229,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 (
 

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);
 
@@ -97,7 +100,8 @@ function Point({ point }: { readonly point: Point }) {
                     const aisleSnappedPosition = snapPosition(newPosition);
                     const finalSnappedPosition = checkSnapForAisle(aisleSnappedPosition.position);
 
-                    setAislePosition(point.pointUuid, finalSnappedPosition.position);
+                    const aislePoints = setAislePosition(point.pointUuid, finalSnappedPosition.position);
+
                 }
             } else if (point.pointType === 'Wall') {
                 if (position) {
@@ -111,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) => {
@@ -119,6 +132,11 @@ function Point({ point }: { readonly point: Point }) {
             if (point.pointType === 'Aisle') {
                 const removedAisles = removeAislePoint(point.pointUuid);
                 if (removedAisles.length > 0) {
+                    removedAisles.forEach(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

@@ -1,198 +1,247 @@
-import { create } from 'zustand';
+import { create } from "zustand";
-import { immer } from 'zustand/middleware/immer';
+import { immer } from "zustand/middleware/immer";
 
 interface AisleStore {
-    aisles: Aisles;
+  aisles: Aisles;
-    setAisles: (aisles: Aisles) => void;
+  setAisles: (aisles: Aisles) => void;
-    addAisle: (aisle: Aisle) => void;
+  addAisle: (aisle: Aisle) => void;
-    updateAisle: (uuid: string, updated: Partial<Aisle>) => void;
+  updateAisle: (uuid: string, updated: Partial<Aisle>) => void;
-    removeAisle: (uuid: string) => void;
+  removeAisle: (uuid: string) => void;
-    removePoint: (uuid: string) => Aisles;
+  removePoint: (uuid: string) => Aisles;
-    setPosition: (pointUuid: string, position: [number, number, number]) => void;
+  setPosition: (
-    setLayer: (pointUuid: string, layer: number) => void;
+    pointUuid: string,
-    setColor: (aisleUuid: string, color: AisleColors) => void;
+    position: [number, number, number]
+  ) => Aisle | undefined;
+  setLayer: (pointUuid: string, layer: number) => void;
+  setColor: (aisleUuid: string, color: AisleColors) => void;
 
-    // Type-specific setters
+  // Type-specific setters
-    setSolidAisleWidth: (aisleUuid: string, width: number) => void;
+  setSolidAisleWidth: (aisleUuid: string, width: number) => void;
-    setDashedAisleProperties: (
+  setDashedAisleProperties: (
-        aisleUuid: string,
+    aisleUuid: string,
-        props: { aisleWidth?: number; dashLength?: number; gapLength?: number }
+    props: { aisleWidth?: number; dashLength?: number; gapLength?: number }
-    ) => void;
+  ) => void;
-    setDottedAisleProperties: (
+  setDottedAisleProperties: (
-        aisleUuid: string,
+    aisleUuid: string,
-        props: { dotRadius?: number; gapLength?: number }
+    props: { dotRadius?: number; gapLength?: number }
-    ) => void;
+  ) => void;
-    setArrowAisleWidth: (aisleUuid: string, width: number) => void;
+  setArrowAisleWidth: (aisleUuid: string, width: number) => void;
-    setArrowsAisleProperties: (
+  setArrowsAisleProperties: (
-        aisleUuid: string,
+    aisleUuid: string,
-        props: { aisleWidth?: number; aisleLength?: number; gapLength?: number }
+    props: { aisleWidth?: number; aisleLength?: number; gapLength?: number }
-    ) => void;
+  ) => void;
-    setArcAisleWidth: (aisleUuid: string, props: { aisleWidth?: number; isFlipped: boolean; }) => void;
+  setArcAisleWidth: (
-    setCircleAisleWidth: (aisleUuid: string, width: number) => void;
+    aisleUuid: string,
-    setJunctionAisleProperties: (aisleUuid: string, props: { aisleWidth?: number; isFlipped: boolean; }) => void;
+    props: { aisleWidth?: number; isFlipped: boolean }
+  ) => void;
+  setCircleAisleWidth: (aisleUuid: string, width: number) => void;
+  setJunctionAisleProperties: (
+    aisleUuid: string,
+    props: { aisleWidth?: number; isFlipped: boolean }
+  ) => void;
 
-    getAisleById: (uuid: string) => Aisle | undefined;
+  getAisleById: (uuid: string) => Aisle | undefined;
-    getAislePointById: (uuid: string) => Point | undefined;
+  getAisleByPointId: (uuid: string) => Aisle | undefined;
-    getConnectedPoints: (uuid: string) => Point[] | [];
+  getAislePointById: (uuid: string) => Point | undefined;
-    getAisleType: <T extends AisleType>(uuid: string) => T | undefined;
+  getConnectedPoints: (uuid: string) => Point[] | [];
+  getAisleType: <T extends AisleType>(uuid: string) => T | undefined;
 }
 
 export const useAisleStore = create<AisleStore>()(
-    immer((set, get) => ({
+  immer((set, get) => ({
-        aisles: [],
+    aisles: [],
 
-        setAisles: (aisles) => set((state) => {
+    setAisles: (aisles) =>
-            state.aisles = aisles;
+      set((state) => {
-        }),
+        state.aisles = aisles;
+      }),
 
-        addAisle: (aisle) => set((state) => {
+    addAisle: (aisle) =>
-            state.aisles.push(aisle);
+      set((state) => {
-        }),
+        state.aisles.push(aisle);
+      }),
 
-        updateAisle: (uuid, updated) => set((state) => {
+    updateAisle: (uuid, updated) =>
-            const aisle = state.aisles.find((a) => a.aisleUuid === uuid);
+      set((state) => {
-            if (aisle) {
+        const aisle = state.aisles.find((a) => a.aisleUuid === uuid);
-                Object.assign(aisle, updated);
+        if (aisle) {
-            }
+          Object.assign(aisle, updated);
-        }),
+        }
+      }),
 
-        removeAisle: (uuid) => set((state) => {
+    removeAisle: (uuid) =>
-            state.aisles = state.aisles.filter((a) => a.aisleUuid !== uuid);
+      set((state) => {
-        }),
+        state.aisles = state.aisles.filter((a) => a.aisleUuid !== uuid);
+      }),
 
-        removePoint: (uuid) => {
+    removePoint: (uuid) => {
-            const removedAisles: Aisle[] = [];
+      const removedAisles: Aisle[] = [];
-            set((state) => {
+      set((state) => {
-                state.aisles = state.aisles.filter((aisle) => {
+        state.aisles = state.aisles.filter((aisle) => {
-                    const hasPoint = aisle.points.some((point) => point.pointUuid === uuid);
+          const hasPoint = aisle.points.some(
-                    if (hasPoint) {
+            (point) => point.pointUuid === uuid
-                        removedAisles.push(JSON.parse(JSON.stringify(aisle)));
+          );
-                        return false;
+          if (hasPoint) {
-                    }
+            removedAisles.push(JSON.parse(JSON.stringify(aisle)));
-                    return true;
+            return false;
-                });
+          }
-            });
+          return true;
-            return removedAisles;
+        });
-        },
+      });
+      return removedAisles;
+    },
 
-        setPosition: (pointUuid, position) => set((state) => {
+    setPosition: (pointUuid, position) => {
-            for (const aisle of state.aisles) {
+      let updatedAisle: Aisle | undefined;
-                const point = aisle.points.find(p => p.pointUuid === pointUuid);
+      set((state) => {
-                if (point) {
+        for (const aisle of state.aisles) {
-                    point.position = position;
+          const point = aisle.points.find((p) => p.pointUuid === pointUuid);
-                }
+          if (point) {
-            }
+            point.position = position;
-        }),
+            updatedAisle = JSON.parse(JSON.stringify(aisle));
+          }
+        }
+      });
+      return updatedAisle;
+    },
 
-        setLayer: (pointUuid, layer) => set((state) => {
+    setLayer: (pointUuid, layer) =>
-            for (const aisle of state.aisles) {
+      set((state) => {
-                const point = aisle.points.find(p => p.pointUuid === pointUuid);
+        for (const aisle of state.aisles) {
-                if (point) {
+          const point = aisle.points.find((p) => p.pointUuid === pointUuid);
-                    point.layer = layer;
+          if (point) {
-                }
+            point.layer = layer;
-            }
+          }
-        }),
+        }
+      }),
 
-        setColor: (aisleUuid, color) => set((state) => {
+    setColor: (aisleUuid, color) =>
-            const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
+      set((state) => {
-            if (aisle) {
+        const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
-                aisle.type.aisleColor = color;
+        if (aisle) {
-            }
+          aisle.type.aisleColor = color;
-        }),
+        }
+      }),
 
-        // Type-specific property setters
+    // Type-specific property setters
-        setSolidAisleWidth: (aisleUuid, width) => set((state) => {
+    setSolidAisleWidth: (aisleUuid, width) =>
-            const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
+      set((state) => {
-            if (aisle && aisle.type.aisleType === 'solid-aisle') {
+        const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
-                aisle.type.aisleWidth = width;
+        if (aisle && aisle.type.aisleType === "solid-aisle") {
-            }
+          aisle.type.aisleWidth = width;
-        }),
+        }
+      }),
 
-        setDashedAisleProperties: (aisleUuid, props) => set((state) => {
+    setDashedAisleProperties: (aisleUuid, props) =>
-            const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
+      set((state) => {
-            if (aisle && aisle.type.aisleType === 'dashed-aisle') {
+        const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
-                if (props.aisleWidth !== undefined) aisle.type.aisleWidth = props.aisleWidth;
+        if (aisle && aisle.type.aisleType === "dashed-aisle") {
-                if (props.dashLength !== undefined) aisle.type.dashLength = props.dashLength;
+          if (props.aisleWidth !== undefined)
-                if (props.gapLength !== undefined) aisle.type.gapLength = props.gapLength;
+            aisle.type.aisleWidth = props.aisleWidth;
-            }
+          if (props.dashLength !== undefined)
-        }),
+            aisle.type.dashLength = props.dashLength;
+          if (props.gapLength !== undefined)
+            aisle.type.gapLength = props.gapLength;
+        }
+      }),
 
-        setDottedAisleProperties: (aisleUuid, props) => set((state) => {
+    setDottedAisleProperties: (aisleUuid, props) =>
-            const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
+      set((state) => {
-            if (aisle && aisle.type.aisleType === 'dotted-aisle') {
+        const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
-                if (props.dotRadius !== undefined) aisle.type.dotRadius = props.dotRadius;
+        if (aisle && aisle.type.aisleType === "dotted-aisle") {
-                if (props.gapLength !== undefined) aisle.type.gapLength = props.gapLength;
+          if (props.dotRadius !== undefined)
-            }
+            aisle.type.dotRadius = props.dotRadius;
-        }),
+          if (props.gapLength !== undefined)
+            aisle.type.gapLength = props.gapLength;
+        }
+      }),
 
-        setArrowAisleWidth: (aisleUuid, width) => set((state) => {
+    setArrowAisleWidth: (aisleUuid, width) =>
-            const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
+      set((state) => {
-            if (aisle && aisle.type.aisleType === 'arrow-aisle') {
+        const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
-                aisle.type.aisleWidth = width;
+        if (aisle && aisle.type.aisleType === "arrow-aisle") {
-            }
+          aisle.type.aisleWidth = width;
-        }),
+        }
+      }),
 
-        setArrowsAisleProperties: (aisleUuid, props) => set((state) => {
+    setArrowsAisleProperties: (aisleUuid, props) =>
-            const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
+      set((state) => {
-            if (aisle && aisle.type.aisleType === 'arrows-aisle') {
+        const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
-                if (props.aisleWidth !== undefined) aisle.type.aisleWidth = props.aisleWidth;
+        if (aisle && aisle.type.aisleType === "arrows-aisle") {
-                if (props.aisleLength !== undefined) aisle.type.aisleLength = props.aisleLength;
+          if (props.aisleWidth !== undefined)
-                if (props.gapLength !== undefined) aisle.type.gapLength = props.gapLength;
+            aisle.type.aisleWidth = props.aisleWidth;
-            }
+          if (props.aisleLength !== undefined)
-        }),
+            aisle.type.aisleLength = props.aisleLength;
+          if (props.gapLength !== undefined)
+            aisle.type.gapLength = props.gapLength;
+        }
+      }),
 
-        setArcAisleWidth: (aisleUuid, props) => set((state) => {
+    setArcAisleWidth: (aisleUuid, props) =>
-            const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
+      set((state) => {
-            if (aisle && aisle.type.aisleType === 'arc-aisle') {
+        const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
-                if (props.aisleWidth !== undefined) aisle.type.aisleWidth = props.aisleWidth;
+        if (aisle && aisle.type.aisleType === "arc-aisle") {
-                if (props.isFlipped !== undefined) aisle.type.isFlipped = props.isFlipped;
+          if (props.aisleWidth !== undefined)
-            }
+            aisle.type.aisleWidth = props.aisleWidth;
-        }),
+          if (props.isFlipped !== undefined)
+            aisle.type.isFlipped = props.isFlipped;
+        }
+      }),
 
-        setCircleAisleWidth: (aisleUuid, width) => set((state) => {
+    setCircleAisleWidth: (aisleUuid, width) =>
-            const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
+      set((state) => {
-            if (aisle && aisle.type.aisleType === 'circle-aisle') {
+        const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
-                aisle.type.aisleWidth = width;
+        if (aisle && aisle.type.aisleType === "circle-aisle") {
-            }
+          aisle.type.aisleWidth = width;
-        }),
+        }
+      }),
 
-        setJunctionAisleProperties: (aisleUuid, props) => set((state) => {
+    setJunctionAisleProperties: (aisleUuid, props) =>
-            const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
+      set((state) => {
-            if (aisle && aisle.type.aisleType === 'junction-aisle') {
+        const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
-                if (props.aisleWidth !== undefined) aisle.type.aisleWidth = props.aisleWidth;
+        if (aisle && aisle.type.aisleType === "junction-aisle") {
-                if (props.isFlipped !== undefined) aisle.type.isFlipped = props.isFlipped;
+          if (props.aisleWidth !== undefined)
-            }
+            aisle.type.aisleWidth = props.aisleWidth;
-        }),
+          if (props.isFlipped !== undefined)
+            aisle.type.isFlipped = props.isFlipped;
+        }
+      }),
 
-        getAisleById: (uuid) => {
+    getAisleById: (uuid) => {
-            return get().aisles.find((a) => a.aisleUuid === uuid);
+      return get().aisles.find((a) => a.aisleUuid === uuid);
-        },
+    },
 
-        getAislePointById: (uuid) => {
+    getAisleByPointId: (uuid) => {
-            for (const aisle of get().aisles) {
+      return get().aisles.find((a) => {
-                const point = aisle.points.find(p => p.pointUuid === uuid);
+        return a.points.some((p) => p.pointUuid === uuid);
-                if (point) {
+      });
-                    return point;
+    },
-                }
-            }
-            return undefined;
-        },
 
-        getConnectedPoints: (uuid) => {
+    getAislePointById: (uuid) => {
-            const connected: Point[] = [];
+      for (const aisle of get().aisles) {
-            for (const aisle of get().aisles) {
+        const point = aisle.points.find((p) => p.pointUuid === uuid);
-                for (const point of aisle.points) {
+        if (point) {
-                    if (point.pointUuid === uuid) {
+          return point;
-                        connected.push(...aisle.points.filter(p => p.pointUuid !== uuid));
+        }
-                    }
+      }
-                }
+      return undefined;
-            }
+    },
-            return connected;
-        },
 
-        getAisleType: <T extends AisleType>(uuid: string) => {
+    getConnectedPoints: (uuid) => {
-            const aisle = get().aisles.find(a => a.aisleUuid === uuid);
+      const connected: Point[] = [];
-            return aisle?.type as T | undefined;
+      for (const aisle of get().aisles) {
-        },
+        for (const point of aisle.points) {
-    }))
+          if (point.pointUuid === uuid) {
+            connected.push(...aisle.points.filter((p) => p.pointUuid !== uuid));
+          }
+        }
+      }
+      return connected;
+    },
+
+    getAisleType: <T extends AisleType>(uuid: string) => {
+      const aisle = get().aisles.find((a) => a.aisleUuid === uuid);
+      return aisle?.type as T | undefined;
+    },
+  }))
 );

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 {