Merge branch 'main-dev' into dev-api-socket-coordination

app/src/components/layout/sidebarLeft/assetList/Assets.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useMemo, useCallback } from "react";
-import { useDecalStore } from "../../../../store/builder/store";
 import { getFilteredAssets } from "./assetsHelpers/filteredAssetsHelper";
 import { fetchCategoryDecals } from "./assetsHelpers/fetchDecalsHelper";
+import { useBuilderStore } from "../../../../store/builder/useBuilderStore";
 import {
   fetchAllAssets,
   fetchCategoryAssets,
@@ -16,7 +16,7 @@ import {
 import { ArrowIcon } from "../../../icons/ExportCommonIcons";
 
 const Assets: React.FC = () => {
-  const { selectedSubCategory, setSelectedSubCategory } = useDecalStore();
+  const { selectedDecalCategory, setSelectedDecalCategory } = useBuilderStore();
   const [searchValue, setSearchValue] = useState<string | null>(null);
   const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
   const [assets, setAssets] = useState<AssetProp[] | DecalProp[]>([]);
@@ -31,9 +31,9 @@ const Assets: React.FC = () => {
         assets,
         searchValue,
         selectedCategory,
-        selectedSubCategory,
+        selectedDecalCategory,
       }),
-    [assets, searchValue, selectedCategory, selectedSubCategory]
+    [assets, searchValue, selectedCategory, selectedDecalCategory]
   );
 
   const handleFetchCategory = useCallback(
@@ -43,14 +43,14 @@ const Assets: React.FC = () => {
       if (category === "Decals") {
         const res = await fetchCategoryDecals("Safety");
         setAssets(res);
-        setSelectedSubCategory("Safety");
+        setSelectedDecalCategory("Safety");
       } else {
         const res = await fetchCategoryAssets(category);
         setAssets(res);
       }
       setIsLoading(false);
     },
-    [setSelectedSubCategory]
+    [setSelectedDecalCategory]
   );
 
   const fetchGlobalSearch = useCallback(async (term: string) => {
@@ -90,7 +90,7 @@ const Assets: React.FC = () => {
                       className="back-button"
                       onClick={() => {
                         setSelectedCategory(null);
-                        setSelectedSubCategory(null);
+                        setSelectedDecalCategory(null);
                         setAssets([]);
                         setSearchValue(null);
                       }}
@@ -106,14 +106,13 @@ const Assets: React.FC = () => {
                       {ACTIVE_DECAL_SUBCATEGORIES.map((cat) => (
                         <div
                           key={cat.name}
-                          className={`catogory-asset-filter-wrapper ${
-                            selectedSubCategory === cat.name ? "active" : ""
+                          className={`catogory-asset-filter-wrapper ${selectedDecalCategory === cat.name ? "active" : ""
                             }`}
                           onClick={async () => {
                             setIsLoading(true);
                             const res = await fetchCategoryDecals(cat.name);
                             setAssets(res);
-                            setSelectedSubCategory(cat.name);
+                            setSelectedDecalCategory(cat.name);
                             setIsLoading(false);
                           }}
                         >

app/src/components/layout/sidebarLeft/assetList/assetsHelpers/filteredAssetsHelper.ts

@@ -2,19 +2,19 @@ interface FilterProps {
   assets: AssetProp[] | DecalProp[];
   searchValue: string | null;
   selectedCategory: string | null;
-  selectedSubCategory: string | null;
+  selectedDecalCategory: string | null;
 }
 
 export const getFilteredAssets = ({
   assets,
   searchValue,
   selectedCategory,
-  selectedSubCategory,
+  selectedDecalCategory,
 }: FilterProps) => {
   const term = searchValue?.trim().toLowerCase();
   if (!term) return assets;
 
-  if (selectedCategory === "Decals" || selectedSubCategory) {
+  if (selectedCategory === "Decals" || selectedDecalCategory) {
     return (assets as DecalProp[]).filter((a) =>
       a.decalName?.toLowerCase().includes(term)
     );

app/src/components/layout/sidebarLeft/assetList/assetsHelpers/renderAssetHelper.tsx

@@ -1,9 +1,10 @@
 import React from "react";
-import { useDroppedDecal, useSelectedItem } from "../../../../../store/builder/store";
+import { useSelectedItem } from "../../../../../store/builder/store";
+import { useBuilderStore } from "../../../../../store/builder/useBuilderStore";
 
 export const RenderAsset: React.FC<{ asset: AssetProp | DecalProp; index: number }> = ({ asset, index }) => {
   const { setSelectedItem } = useSelectedItem();
-  const { setDroppedDecal } = useDroppedDecal();
+  const { setDroppedDecal } = useBuilderStore();
 
   if ("decalName" in asset) {
     return (

app/src/components/layout/sidebarRight/properties/AisleProperties.tsx

@@ -98,27 +98,27 @@ const AisleProperties: React.FC = () => {
 
   const dashLengthValue = useMemo(() => {
     return dashLength.toString();
-  }, [aisleType, dashLength]);
+  }, [dashLength]);
 
   const dotRadiusValue = useMemo(() => {
     return dotRadius.toString();
-  }, [aisleType, dotRadius]);
+  }, [dotRadius]);
 
   const gapLengthValue = useMemo(() => {
     return gapLength.toString();
-  }, [aisleType, gapLength]);
+  }, [gapLength]);
 
   const aisleWidthValue = useMemo(() => {
     return aisleWidth.toString();
-  }, [aisleType, aisleWidth]);
+  }, [aisleWidth]);
 
   const aisleLengthValue = useMemo(() => {
     return aisleLength.toString();
-  }, [aisleType, aisleLength]);
+  }, [aisleLength]);
 
   const aisleIsFlipped = useMemo(() => {
     return isFlipped;
-  }, [aisleType, isFlipped]);
+  }, [isFlipped]);
 
   const renderAdvancedProperties = () => {
     switch (aisleType) {

app/src/components/ui/FileMenu.tsx

@@ -3,7 +3,7 @@ import RenameInput from "./inputs/RenameInput";
 import { ArrowIcon } from "../icons/ExportCommonIcons";
 import MenuBar from "./menu/menu";
 import { ProjectIcon } from "../icons/HeaderIcons";
-import { useProjectName, useSocketStore } from "../../store/builder/store";
+import { useProjectName } from "../../store/builder/store";
 import { useParams } from "react-router-dom";
 import { getAllProjects } from "../../services/dashboard/getAllProjects";
 import { updateProject } from "../../services/dashboard/updateProject";
@@ -14,7 +14,7 @@ const FileMenu: React.FC = () => {
   const containerRef = useRef<HTMLButtonElement>(null);
   let clickTimeout: NodeJS.Timeout | null = null;
   const { projectName, setProjectName } = useProjectName();
-  const { dashBoardSocket } = useSocketStore();
+  // const { dashBoardSocket } = useSocketStore();
   const { projectId } = useParams();
   const { userId, organization, email } = getUserData();
 

app/src/components/ui/menu/menu.tsx

@@ -5,7 +5,9 @@ import { toggleTheme } from "../../../utils/theme";
 import useVersionHistoryVisibleStore, {
   useShortcutStore,
 } from "../../../store/builder/store";
-import useModuleStore, { useSubModuleStore } from "../../../store/useModuleStore";
+import useModuleStore, {
+  useSubModuleStore,
+} from "../../../store/useModuleStore";
 import { useVersionHistoryStore } from "../../../store/builder/useVersionHistoryStore";
 
 interface MenuBarProps {
@@ -21,11 +23,12 @@ interface MenuItem {
 }
 
 const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
-
   const navigate = useNavigate();
   const [activeMenu, setActiveMenu] = useState<string | null>(null);
   const [activeSubMenu, setActiveSubMenu] = useState<string | null>(null);
-  const [selectedItems, setSelectedItems] = useState<Record<string, boolean>>({});
+  const [selectedItems, setSelectedItems] = useState<Record<string, boolean>>(
+    {}
+  );
 
   const { setCreateNewVersion } = useVersionHistoryStore();
   const { setVersionHistoryVisible } = useVersionHistoryVisibleStore();
@@ -49,7 +52,9 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
   };
 
   const handleLogout = () => {
+    const theme = localStorage.getItem("theme") ?? "light";
     localStorage.clear();
+    localStorage.setItem("theme", theme);
     navigate("/");
   };
 
@@ -61,7 +66,7 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
     setCreateNewVersion(true);
     setVersionHistoryVisible(true);
     setSubModule("properties");
-    setActiveModule('builder');
+    setActiveModule("builder");
   }
 
   const menus: Record<string, MenuItem[]> = {
@@ -222,7 +227,7 @@ const MenuBar: React.FC<MenuBarProps> = ({ setOpenMenu }) => {
           onClick={() => {
             setVersionHistoryVisible(true);
             setSubModule("properties");
-            setActiveModule('builder');
+            setActiveModule("builder");
           }}
         >
           <div className="menu-button">

app/src/modules/builder/Decal/decalCreator/decalCreator.tsx

@@ -2,7 +2,8 @@ import { MathUtils } from 'three';
 import { useEffect } from 'react';
 import { useThree } from '@react-three/fiber';
 import { useParams } from 'react-router-dom';
-import { useDroppedDecal, useSocketStore } from '../../../../store/builder/store';
+import { useSocketStore } from '../../../../store/builder/store';
+import { useBuilderStore } from '../../../../store/builder/useBuilderStore';
 import useModuleStore from '../../../../store/useModuleStore';
 import { useSceneContext } from '../../../scene/sceneContext';
 import { useVersionContext } from '../../version/versionContext';
@@ -16,7 +17,7 @@ function DecalCreator() {
     const { wallStore, floorStore } = useSceneContext();
     const { addDecal: addDecalOnWall, getWallById } = wallStore();
     const { addDecal: addDecalOnFloor, getFloorById } = floorStore();
-    const { droppedDecal, setDroppedDecal } = useDroppedDecal();
+    const { droppedDecal, setDroppedDecal } = useBuilderStore();
     const { activeModule } = useModuleStore();
     const { userId, organization } = getUserData();
     const { selectedVersionStore } = useVersionContext();

app/src/modules/builder/Decal/decalInstance/decalInstance.tsx

@@ -10,9 +10,6 @@ import { useEffect, useRef, useState } from 'react';
 
 import { useDecalEventHandlers } from '../eventHandler/useDecalEventHandlers';
 
-// import { upsertWallApi } from '../../../../services/factoryBuilder/wall/upsertWallApi';
-// import { upsertFloorApi } from '../../../../services/factoryBuilder/floor/upsertFloorApi';
-
 function DecalInstance({ parent, visible = true, decal, zPosition = decal.decalPosition[2] }: { parent: Wall | Floor; visible?: boolean, decal: Decal, zPosition?: number }) {
     const url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_MARKETPLACE_URL}`;
     const { selectedDecal, deletableDecal, setSelectedDecal, setDeletableDecal } = useBuilderStore();
@@ -25,9 +22,10 @@ function DecalInstance({ parent, visible = true, decal, zPosition = decal.decalP
         if (selectedDecal?.decalData.decalUuid === decal.decalUuid && !selectedDecal.decalMesh) {
             setSelectedDecal({ decalData: selectedDecal.decalData, decalMesh: decalRef.current });
         }
+        // eslint-disable-next-line
     }, [selectedDecal])
 
-    const { handlePointerMissed, handlePointerLeave, handleClick, handlePointerDown, handlePointerEnter, handleDecalUp } = useDecalEventHandlers({ parent, decal, visible });
+    const { handlePointerMissed, handlePointerLeave, handleClick, handlePointerDown, handlePointerEnter } = useDecalEventHandlers({ parent, decal, visible });
 
     const [texture, setTexture] = useState<THREE.Texture | null>(null);
 
@@ -126,6 +124,7 @@ function DecalInstance({ parent, visible = true, decal, zPosition = decal.decalP
         } else {
             loadDefaultTexture();
         }
+        // eslint-disable-next-line
     }, [decal.decalId]);
 
     useEffect(() => {
@@ -140,6 +139,7 @@ function DecalInstance({ parent, visible = true, decal, zPosition = decal.decalP
             if (selectedDecal) setSelectedDecal(null);
             if (deletableDecal) setDeletableDecal(null);
         }
+        // eslint-disable-next-line
     }, [toggleView, toolMode, activeModule, selectedDecal, deletableDecal]);
 
     return (
@@ -152,7 +152,6 @@ function DecalInstance({ parent, visible = true, decal, zPosition = decal.decalP
             scale={[(decal.decalType.type === 'Floor' || zPosition < 0) ? -decal.decalScale : decal.decalScale, decal.decalScale, 0.01]}
             userData={decal}
             onPointerDown={(e) => { if (e.button === 0) handlePointerDown(e) }}
-            onPointerUp={(e) => { if (e.button === 0) handleDecalUp(e) }}
             onClick={(e) => { handleClick(e) }}
             onPointerEnter={(e) => { handlePointerEnter(e) }}
             onPointerLeave={(e) => { handlePointerLeave(e) }}

app/src/modules/builder/Decal/eventHandler/useDecalEventHandlers.ts

@@ -266,15 +266,6 @@ export function useDecalEventHandlers({
         }
     };
 
-    const handleDecalUp = (e: ThreeEvent<MouseEvent>) => {
-        e.stopPropagation();
-        if (visible && !toggleView && activeModule === 'builder') {
-            if (!decalDragState.isDragging && !selectedDecal && e.object.userData.decalUuid && toolMode === 'cursor') {
-                setSelectedDecal({ decalMesh: e.object, decalData: decal });
-            }
-        }
-    }
-
     const handleClick = (e: ThreeEvent<MouseEvent>) => {
         if (visible && !toggleView && activeModule === 'builder') {
             if (e.object.userData.decalUuid) {
@@ -354,11 +345,11 @@ export function useDecalEventHandlers({
             canvasElement?.removeEventListener("keyup", onKeyUp);
             canvasElement.removeEventListener("keydown", onKeyDown);
         };
+        // eslint-disable-next-line
     }, [gl, activeModule, toggleView, selectedDecal, camera, controls, visible, parent, decal, decalDragState]);
 
     return {
         handlePointerDown,
-        handleDecalUp,
         handleClick,
         handlePointerEnter,
         handlePointerLeave,

app/src/modules/builder/asset/models/model/eventHandlers/useEventHandlers.ts

@@ -3,9 +3,8 @@ import { CameraControls } from '@react-three/drei';
 import { ThreeEvent, useThree } from '@react-three/fiber';
 import { useCallback, useEffect, useRef } from 'react';
 
-import { useActiveTool, useResourceManagementId, useToggleView, useZoneAssetId } from '../../../../../../store/builder/store';
+import { useActiveTool, useResourceManagementId, useToggleView, useZoneAssetId, useSocketStore } from '../../../../../../store/builder/store';
 import useModuleStore, { useSubModuleStore } from '../../../../../../store/useModuleStore';
-import { useSocketStore } from '../../../../../../store/builder/store';
 import { useSceneContext } from '../../../../../scene/sceneContext';
 import { useProductContext } from '../../../../../simulation/products/productContext';
 import { useVersionContext } from '../../../../version/versionContext';

app/src/modules/scene/controls/transformControls/transformControls.tsx

@@ -201,7 +201,7 @@ export default function TransformControl() {
         return () => {
             window.removeEventListener("keydown", handleKeyDown);
         };
-    }, [selectedFloorAsset]);
+    }, [selectedFloorAsset, setObjectPosition, setObjectRotation]);
 
     useEffect(() => {
         if (activeTool === "delete") {
@@ -213,7 +213,7 @@ export default function TransformControl() {
             setObjectPosition({ x: undefined, y: undefined, z: undefined });
             setObjectRotation({ x: undefined, y: undefined, z: undefined });
         }
-    }, [activeTool]);
+    }, [activeTool, setObjectPosition, setObjectRotation, setSelectedFloorAsset, state.controls]);
 
     return (
         <>

app/src/modules/scene/postProcessing/postProcessing.tsx

@@ -1,10 +1,15 @@
-import { DepthOfField, Bloom, EffectComposer, N8AO } from "@react-three/postprocessing";
+import { EffectComposer, N8AO } from "@react-three/postprocessing";
 import OutlineInstances from "./outlineInstances/outlineInstances";
 import { useDeletableEventSphere, useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
+import { useEffect } from "react";
 
 export default function PostProcessing() {
-    const { } = useSelectedEventSphere();
-    const { } = useDeletableEventSphere();
+    const { selectedEventSphere } = useSelectedEventSphere();
+    const { deletableEventSphere } = useDeletableEventSphere();
+
+    useEffect(() => {
+
+    }, [selectedEventSphere, deletableEventSphere])
 
     return (
         <EffectComposer autoClear={false}>
@@ -19,4 +24,4 @@ export default function PostProcessing() {
 
         </EffectComposer>
     );
-}
+};

app/src/pages/Dashboard.tsx

@@ -1,7 +1,5 @@
 import React, { useEffect, useState } from "react";
-import {
-  useSocketStore
-} from "../store/builder/store";
+import { useSocketStore } from "../store/builder/store";
 import DashboardHome from "../components/Dashboard/DashboardHome";
 import DashboardProjects from "../components/Dashboard/DashboardProjects";
 import DashboardTrash from "../components/Dashboard/DashboardTrash";
@@ -19,18 +17,16 @@ const Dashboard: React.FC = () => {
         const refreshToken = localStorage.getItem("refreshToken")
         if (token && refreshToken) {
             useSocketStore.getState().initializeSocket(email, organization, token, refreshToken);
-    } else {
-
         }
-  }, [socket]);
+    }, [socket, email, organization]);
 
     return (
         <div className="dashboard-main">
             <SidePannel setActiveTab={setActiveTab} activeTab={activeTab} />
-      {activeTab == "Home" && <DashboardHome />}
-      {activeTab == "Projects" && <DashboardProjects />}
-      {activeTab == "Trash" && <DashboardTrash />}
-      {activeTab == "Tutorials" && <DashboardTutorial />}
+            {activeTab === "Home" && <DashboardHome />}
+            {activeTab === "Projects" && <DashboardProjects />}
+            {activeTab === "Trash" && <DashboardTrash />}
+            {activeTab === "Tutorials" && <DashboardTutorial />}
         </div>
     );
 };

app/src/pages/Project.tsx

@@ -2,8 +2,6 @@ import React, { useEffect } from "react";
 import useModuleStore from "../store/useModuleStore";
 import {
   useSocketStore,
-  useOrganization,
-  useUserName,
   useProjectName,
   useActiveTool,
 } from "../store/builder/store";
@@ -29,8 +27,6 @@ const Project: React.FC = () => {
   let navigate = useNavigate();
   const echo = useLogger();
   const { setActiveModule } = useModuleStore();
-  const { setUserName } = useUserName();
-  const { setOrganization } = useOrganization();
   const { projectId } = useParams();
   const { setProjectName } = useProjectName();
   const { userId, email, organization, userName } = getUserData();
@@ -107,10 +103,6 @@ const Project: React.FC = () => {
           .getState()
           .initializeSocket(email, organization, token, refreshToken);
       }
-      if (organization && userName) {
-        setOrganization(organization);
-        setUserName(userName);
-      }
       echo.success("Project initialized and loaded successfully");
     } else {
       navigate("/");

app/src/pages/UserAuth.tsx

@@ -4,8 +4,6 @@ import { LogoIconLarge } from "../components/icons/Logo";
 import { EyeIcon } from "../components/icons/ExportCommonIcons";
 import {
   useLoadingProgress,
-  useOrganization,
-  useUserName,
 } from "../store/builder/store";
 import { signInApi } from "../services/factoryBuilder/signInSignUp/signInApi";
 import { signUpApi } from "../services/factoryBuilder/signInSignUp/signUpApi";
@@ -19,8 +17,8 @@ const UserAuth: React.FC = () => {
   const [showPassword, setShowPassword] = useState(false);
   const [error, setError] = useState("");
   const [isSignIn, setIsSignIn] = useState(true);
-  const { userName, setUserName } = useUserName();
-  const { setOrganization } = useOrganization();
+  const { userName } = getUserData();
+  const [name, setName] = useState<string>(userName || '');
   const { setLoadingProgress } = useLoadingProgress();
   const [fingerprint, setFingerprint] = useState("");
 
@@ -43,8 +41,6 @@ const UserAuth: React.FC = () => {
       const res = await signInApi(email, password, organization, fingerprint);
       if (res.message.message === "login successfull") {
         setError("");
-        setOrganization(organization);
-        setUserName(res.message.name);
         localStorage.setItem("userId", res.message.userId);
         localStorage.setItem("email", res.message.email);
         localStorage.setItem("userName", res.message.name);
@@ -113,11 +109,11 @@ const UserAuth: React.FC = () => {
 
   const handleRegister = async (e: FormEvent) => {
     e.preventDefault();
-    if (email && password && userName) {
+    if (email && password && name) {
       setError("");
       try {
         const organization = email.split("@")[1].split(".")[0];
-        const res = await signUpApi(userName, email, password, organization);
+        const res = await signUpApi(name, email, password, organization);
 
         if (res.message === "New User created") {
           setIsSignIn(true);
@@ -178,9 +174,9 @@ const UserAuth: React.FC = () => {
         {!isSignIn && (
           <input
             type="text"
-            value={userName}
+            value={name}
             placeholder="Username"
-            onChange={(e) => setUserName(e.target.value)}
+            onChange={(e) => setName(e.target.value)}
             required
           />
         )}

app/src/store/builder/store.ts

@@ -106,11 +106,6 @@ export const useLoadingProgress = create<{
     setLoadingProgress: (x: number) => set({ loadingProgress: x }),
 }));
 
-export const useOrganization = create<any>((set: any) => ({
-    organization: "",
-    setOrganization: (x: any) => set(() => ({ organization: x })),
-}));
-
 export const useToggleView = create<any>((set: any) => ({
     toggleView: false,
     setToggleView: (x: any) => set(() => ({ toggleView: x })),
@@ -132,51 +127,16 @@ export const useSelectedItem = create<any>((set: any) => ({
     setSelectedItem: (x: any) => set(() => ({ selectedItem: x })),
 }));
 
-type DroppedDecalType = {
-    category: string;
-    decalName: string;
-    decalImage: string;
-    decalId: string;
-};
-
-export const useDroppedDecal = create<{
-    droppedDecal: DroppedDecalType | null;
-    setDroppedDecal: (x: DroppedDecalType | null) => void;
-}>((set) => ({
-    droppedDecal: null,
-    setDroppedDecal: (x) => set({ droppedDecal: x }),
-}));
-
 export const useNavMesh = create<any>((set: any) => ({
     navMesh: null,
     setNavMesh: (x: any) => set({ navMesh: x }),
 }));
 
-export const useLayers = create<any>((set: any) => ({
-    Layers: 1,
-    setLayers: (x: any) => set(() => ({ Layers: x })),
-}));
-
-export const useCamPosition = create<any>((set: any) => ({
-    camPosition: { x: undefined, y: undefined, z: undefined },
-    setCamPosition: (newCamPosition: any) => set({ camPosition: newCamPosition }),
-}));
-
-export const useMenuVisible = create<any>((set: any) => ({
-    menuVisible: false,
-    setMenuVisible: (x: any) => set(() => ({ menuVisible: x })),
-}));
-
 export const useToolMode = create<any>((set: any) => ({
     toolMode: null,
     setToolMode: (x: any) => set(() => ({ toolMode: x })),
 }));
 
-export const useSetScale = create<any>((set: any) => ({
-    scale: null,
-    setScale: (x: any) => set(() => ({ scale: x })),
-}));
-
 export const useRoofVisibility = create<any>((set: any) => ({
     roofVisibility: false,
     setRoofVisibility: (x: any) => set(() => ({ roofVisibility: x })),
@@ -198,16 +158,6 @@ export const useSunPosition = create<any>((set: any) => ({
         set({ sunPosition: newSuntPosition }),
 }));
 
-export const useRemoveLayer = create<any>((set: any) => ({
-    removeLayer: false,
-    setRemoveLayer: (x: any) => set(() => ({ removeLayer: x })),
-}));
-
-export const useRemovedLayer = create<any>((set: any) => ({
-    removedLayer: null,
-    setRemovedLayer: (x: any) => set(() => ({ removedLayer: x })),
-}));
-
 export const useProjectName = create<any>((set: any) => ({
     projectName: "Creating Your Project",
     setProjectName: (x: any) => set({ projectName: x }),
@@ -258,11 +208,6 @@ export const useCamMode = create<any>((set: any) => ({
     setCamMode: (x: any) => set({ camMode: x }),
 }));
 
-export const useUserName = create<any>((set: any) => ({
-    userName: "",
-    setUserName: (x: any) => set({ userName: x }),
-}));
-
 export const useRenameModeStore = create<any>((set: any) => ({
     isRenameMode: false,
     setIsRenameMode: (state: boolean) => set({ isRenameMode: state }),
@@ -370,12 +315,6 @@ export const useTileDistance = create<any>((set: any) => ({
         })),
 }));
 
-export const usePlayAgv = create<any>((set, get) => ({
-    PlayAgv: [],
-    setPlayAgv: (updateFn: (prev: any[]) => any[]) =>
-        set({ PlayAgv: updateFn(get().PlayAgv) }),
-}));
-
 // Define the Asset type
 type Asset = {
     id: string;
@@ -436,14 +375,17 @@ export const useMachineCount = create<any>((set: any) => ({
     machineCount: 0,
     setMachineCount: (x: any) => set({ machineCount: x }),
 }));
+
 export const useMachineUptime = create<any>((set: any) => ({
     machineActiveTime: 0,
     setMachineActiveTime: (x: any) => set({ machineActiveTime: x }),
 }));
+
 export const useMachineDowntime = create<any>((set: any) => ({
     machineIdleTime: 0,
     setMachineIdleTime: (x: any) => set({ machineIdleTime: x }),
 }));
+
 export const useMaterialCycle = create<any>((set: any) => ({
     materialCycleTime: 0,
     setMaterialCycleTime: (x: any) => set({ materialCycleTime: x }),
@@ -453,6 +395,7 @@ export const useThroughPutData = create<any>((set: any) => ({
     throughputData: 0,
     setThroughputData: (x: any) => set({ throughputData: x }),
 }));
+
 export const useProductionCapacityData = create<any>((set: any) => ({
     productionCapacityData: 0,
     setProductionCapacityData: (x: any) => set({ productionCapacityData: x }),
@@ -462,6 +405,7 @@ export const useProcessBar = create<any>((set: any) => ({
     processBar: [],
     setProcessBar: (x: any) => set({ processBar: x }),
 }));
+
 export const useDfxUpload = create<any>((set: any) => ({
     dfxuploaded: [],
     dfxWallGenerate: [],
@@ -566,6 +510,7 @@ function getInitialViewSceneLabels(): boolean {
     const saved = localStorage.getItem("viewSceneLabels");
     return saved ? JSON.parse(saved) : false;
 }
+
 export interface CompareProduct {
     productUuid: string;
     productName: string;
@@ -604,6 +549,7 @@ export const useSelectedComment = create<any>((set: any) => ({
     commentPositionState: null,
     setCommentPositionState: (x: any) => set({ commentPositionState: x }),
 }));
+
 export const useSelectedPath = create<any>((set: any) => ({
     selectedPath: "auto",
     setSelectedPath: (x: any) => set({ selectedPath: x }),
@@ -613,16 +559,3 @@ export const useContextActionStore = create<any>((set: any) => ({
     contextAction: null,
     setContextAction: (x: any) => set({ contextAction: x }),
 }));
-
-
-// Define the store's state and actions type
-interface DecalStore {
-    selectedSubCategory: string | null;
-    setSelectedSubCategory: (subCategory: string | null) => void;
-}
-
-// Create the Zustand store with types
-export const useDecalStore = create<DecalStore>((set) => ({
-    selectedSubCategory: 'Safety',
-    setSelectedSubCategory: (subCategory: string | null) => set({ selectedSubCategory: subCategory }),
-}));

app/src/store/builder/useBuilderStore.ts

@@ -46,6 +46,13 @@ interface BuilderState {
         draggingDecalUuid: string | null,
         dragOffset: Vector3 | null,
     },
+    selectedDecalCategory: string | null,
+    droppedDecal: {
+        category: string;
+        decalName: string;
+        decalImage: string;
+        decalId: string;
+    } | null,
 
     // Aisle General
     selectedAisle: { aisleMesh: Object3D | null, aisleData: Aisle } | null;
@@ -97,6 +104,8 @@ interface BuilderState {
     setSelectedDecal: (decal: { decalMesh: Object3D | null, decalData: Decal } | null) => void;
     setDeletableDecal: (decal: Object3D | null) => void;
     setDecalDragState: (isDragging: boolean, draggingDecalUuid: string | null, dragOffset: Vector3 | null) => void;
+    setSelectedDecalCategory: (subCategory: string | null) => void,
+    setDroppedDecal: (droppedDecal: { category: string, decalName: string, decalImage: string, decalId: string } | null) => void,
 
     // Setters - Aisle General
     setSelectedAisle: (aisle: { aisleMesh: Object3D | null, aisleData: Aisle } | null) => void;
@@ -157,6 +166,8 @@ export const useBuilderStore = create<BuilderState>()(
             draggingDecalUuid: null,
             dragOffset: null,
         },
+        selectedDecalCategory: 'Safety',
+        droppedDecal: null,
 
         selectedAisle: null,
         aisleType: 'solid-aisle',
@@ -332,6 +343,18 @@ export const useBuilderStore = create<BuilderState>()(
             })
         },
 
+        setSelectedDecalCategory: (subCategory: string | null) => {
+            set((state) => {
+                state.selectedDecalCategory = subCategory;
+            })
+        },
+
+        setDroppedDecal: (droppedDecal: { category: string, decalName: string, decalImage: string, decalId: string } | null) => {
+            set((state) => {
+                state.droppedDecal = droppedDecal;
+            })
+        },
+
         // === Setters: Aisle General ===
 
         setSelectedAisle: (aisle: { aisleMesh: Object3D | null, aisleData: Aisle } | null) => {