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,5 +1,5 @@
-import { create } from 'zustand';
+import { create } from "zustand";
-import { immer } from 'zustand/middleware/immer';
+import { immer } from "zustand/middleware/immer";
 
 interface AisleStore {
   aisles: Aisles;
@@ -8,7 +8,10 @@ interface AisleStore {
   updateAisle: (uuid: string, updated: Partial<Aisle>) => void;
   removeAisle: (uuid: string) => void;
   removePoint: (uuid: string) => Aisles;
-    setPosition: (pointUuid: string, position: [number, number, number]) => void;
+  setPosition: (
+    pointUuid: string,
+    position: [number, number, number]
+  ) => Aisle | undefined;
   setLayer: (pointUuid: string, layer: number) => void;
   setColor: (aisleUuid: string, color: AisleColors) => void;
 
@@ -27,11 +30,18 @@ interface AisleStore {
     aisleUuid: string,
     props: { aisleWidth?: number; aisleLength?: number; gapLength?: number }
   ) => void;
-    setArcAisleWidth: (aisleUuid: string, props: { aisleWidth?: number; isFlipped: boolean; }) => void;
+  setArcAisleWidth: (
+    aisleUuid: string,
+    props: { aisleWidth?: number; isFlipped: boolean }
+  ) => void;
   setCircleAisleWidth: (aisleUuid: string, width: number) => void;
-    setJunctionAisleProperties: (aisleUuid: string, props: { aisleWidth?: number; isFlipped: boolean; }) => void;
+  setJunctionAisleProperties: (
+    aisleUuid: string,
+    props: { aisleWidth?: number; isFlipped: boolean }
+  ) => 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;
@@ -41,22 +51,26 @@ export const useAisleStore = create<AisleStore>()(
   immer((set, get) => ({
     aisles: [],
 
-        setAisles: (aisles) => set((state) => {
+    setAisles: (aisles) =>
+      set((state) => {
         state.aisles = aisles;
       }),
 
-        addAisle: (aisle) => set((state) => {
+    addAisle: (aisle) =>
+      set((state) => {
         state.aisles.push(aisle);
       }),
 
-        updateAisle: (uuid, updated) => set((state) => {
+    updateAisle: (uuid, updated) =>
+      set((state) => {
         const aisle = state.aisles.find((a) => a.aisleUuid === uuid);
         if (aisle) {
           Object.assign(aisle, updated);
         }
       }),
 
-        removeAisle: (uuid) => set((state) => {
+    removeAisle: (uuid) =>
+      set((state) => {
         state.aisles = state.aisles.filter((a) => a.aisleUuid !== uuid);
       }),
 
@@ -64,7 +78,9 @@ export const useAisleStore = create<AisleStore>()(
       const removedAisles: Aisle[] = [];
       set((state) => {
         state.aisles = state.aisles.filter((aisle) => {
-                    const hasPoint = aisle.points.some((point) => point.pointUuid === uuid);
+          const hasPoint = aisle.points.some(
+            (point) => point.pointUuid === uuid
+          );
           if (hasPoint) {
             removedAisles.push(JSON.parse(JSON.stringify(aisle)));
             return false;
@@ -75,92 +91,119 @@ export const useAisleStore = create<AisleStore>()(
       return removedAisles;
     },
 
-        setPosition: (pointUuid, position) => set((state) => {
+    setPosition: (pointUuid, position) => {
+      let updatedAisle: Aisle | undefined;
+      set((state) => {
         for (const aisle of state.aisles) {
-                const point = aisle.points.find(p => p.pointUuid === pointUuid);
+          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) =>
+      set((state) => {
         for (const aisle of state.aisles) {
-                const point = aisle.points.find(p => p.pointUuid === pointUuid);
+          const point = aisle.points.find((p) => p.pointUuid === pointUuid);
           if (point) {
             point.layer = layer;
           }
         }
       }),
 
-        setColor: (aisleUuid, color) => set((state) => {
+    setColor: (aisleUuid, color) =>
-            const aisle = state.aisles.find(a => a.aisleUuid === aisleUuid);
+      set((state) => {
+        const aisle = state.aisles.find((a) => a.aisleUuid === aisleUuid);
         if (aisle) {
           aisle.type.aisleColor = color;
         }
       }),
 
     // 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);
+        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);
+        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);
+        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;
         }
       }),
 
@@ -168,9 +211,15 @@ 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);
+        const point = aisle.points.find((p) => p.pointUuid === uuid);
         if (point) {
           return point;
         }
@@ -183,7 +232,7 @@ export const useAisleStore = create<AisleStore>()(
       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));
+            connected.push(...aisle.points.filter((p) => p.pointUuid !== uuid));
           }
         }
       }
@@ -191,7 +240,7 @@ export const useAisleStore = create<AisleStore>()(
     },
 
     getAisleType: <T extends AisleType>(uuid: string) => {
-            const aisle = get().aisles.find(a => a.aisleUuid === uuid);
+      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 {