From 4b421c3162e0510edecaddc734d19f70795d5104 Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Thu, 27 Mar 2025 17:24:36 +0530
Subject: [PATCH 1/6] before merge commit

---
 app/src/components/ui/componets/DisplayZone.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/src/components/ui/componets/DisplayZone.tsx b/app/src/components/ui/componets/DisplayZone.tsx
index 9f1028f..a0f6574 100644
--- a/app/src/components/ui/componets/DisplayZone.tsx
+++ b/app/src/components/ui/componets/DisplayZone.tsx
@@ -140,7 +140,12 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   };
 
   return (
-    <div className="zone-wrapper">
+    <div
+      ref={containerRef}
+      className={`zoon-wrapper ${
+        selectedZone?.activeSides?.includes("bottom") && "bottom"
+      }`}
+    >
       {/* Left Arrow */}
       {showLeftArrow && (
         <button className="arrow left-arrow" onClick={handleScrollLeft}>

From c968f7865b782536258504abb442e8d94d7f756f Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Fri, 28 Mar 2025 19:20:52 +0530
Subject: [PATCH 2/6] avatar started

---
 .../components/layout/sidebarRight/Header.tsx |  43 +++--
 .../components/ui/componets/DisplayZone.tsx   |   2 +-
 app/src/modules/collaboration/collabCams.tsx  | 155 ++++++++++++------
 .../modules/collaboration/collabUserIcon.tsx  |  66 +++-----
 .../modules/collaboration/users/Avatar.tsx    |  59 +++++++
 .../users/functions/getAvatarColor.ts         |  26 +++
 .../users/functions/getInitials.ts            |  10 ++
 app/src/styles/layout/popup.scss              |  26 +++
 app/src/styles/layout/sidebar.scss            |   7 +-
 app/src/types/users.d.ts                      |   7 +
 10 files changed, 292 insertions(+), 109 deletions(-)
 create mode 100644 app/src/modules/collaboration/users/Avatar.tsx
 create mode 100644 app/src/modules/collaboration/users/functions/getAvatarColor.ts
 create mode 100644 app/src/modules/collaboration/users/functions/getInitials.ts

diff --git a/app/src/components/layout/sidebarRight/Header.tsx b/app/src/components/layout/sidebarRight/Header.tsx
index b80fd53..9abf096 100644
--- a/app/src/components/layout/sidebarRight/Header.tsx
+++ b/app/src/components/layout/sidebarRight/Header.tsx
@@ -1,14 +1,18 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { AppDockIcon } from "../../icons/HeaderIcons";
-import orgImg from "../../../assets/orgTemp.png"
+import orgImg from "../../../assets/orgTemp.png";
+import { useActiveUsers } from "../../../store/store";
+import { getAvatarColor } from "../../../modules/collaboration/users/functions/getAvatarColor";
+import { ActiveUser } from "../../../types/users";
 
 const Header: React.FC = () => {
-  const guestUsers = [
-    { value: "Nazria", color: "#43C06D" },
-    { value: "Name1", color: "#0050EB" },
-    { value: "Abigail", color: "#FF6600" },
-    { value: "Jack", color: "#488EF6" },
-  ]; // Example guest users array
+  const { activeUsers } = useActiveUsers();
+  const userName = localStorage.getItem("userName") || "Anonymous";
+
+  const guestUsers: ActiveUser[] = activeUsers.filter(
+    (user: ActiveUser) => user.userName !== userName
+  );
+  console.log('guestUsers: ', guestUsers);
 
   return (
     <div className="header-container">
@@ -25,18 +29,23 @@ const Header: React.FC = () => {
             <div className="other-guest">+{guestUsers.length - 3}</div>
           )}
           {guestUsers.slice(0, 3).map((user, index) => (
-            <div
-              key={index}
-              className="user-profile"
-              style={{ background: user.color }}
-            >
-              {user.value[0]}
-            </div>
+            <>
+              <div
+                key={index}
+                className="user-profile"
+                style={{ background: getAvatarColor(index) }}
+              >
+                {user.userName[0]}
+              </div>
+            </>
           ))}
         </div>
         <div className="user-profile-container">
-          <div className="user-profile" style={{ background: "#48AC2A" }}>
-            V
+          <div
+            className="user-profile"
+            style={{ background: "var(--accent-color)" }}
+          >
+            {userName[0]}
           </div>
           <div className="user-organization">
             <img src={orgImg} alt="" />
diff --git a/app/src/components/ui/componets/DisplayZone.tsx b/app/src/components/ui/componets/DisplayZone.tsx
index 15e8bda..c93f275 100644
--- a/app/src/components/ui/componets/DisplayZone.tsx
+++ b/app/src/components/ui/componets/DisplayZone.tsx
@@ -144,7 +144,7 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   return (
     <div
       ref={containerRef}
-      className={`zoon-wrapper ${
+      className={`zone-wrapper ${
         selectedZone?.activeSides?.includes("bottom") && "bottom"
       }`}
     >
diff --git a/app/src/modules/collaboration/collabCams.tsx b/app/src/modules/collaboration/collabCams.tsx
index da20b34..16e0e29 100644
--- a/app/src/modules/collaboration/collabCams.tsx
+++ b/app/src/modules/collaboration/collabCams.tsx
@@ -1,112 +1,169 @@
-import * as THREE from 'three';
-import { useEffect, useRef, useState } from 'react';
-import { useFrame } from '@react-three/fiber';
-import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
-import camModel from '../../assets/gltf-glb/camera face 2.gltf';
-import getActiveUsersData from '../../services/factoryBuilder/collab/getActiveUsers';
-import { useActiveUsers, useSocketStore } from '../../store/store';
-import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
-import { useNavigate } from 'react-router-dom';
-import { Text, Html } from '@react-three/drei';
-import CollabUserIcon from './collabUserIcon';
-import image from '../../assets/image/userImage.png';
-
+import * as THREE from "three";
+import { useEffect, useRef, useState } from "react";
+import { useFrame } from "@react-three/fiber";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
+import camModel from "../../assets/gltf-glb/camera face 2.gltf";
+import getActiveUsersData from "../../services/factoryBuilder/collab/getActiveUsers";
+import { useActiveUsers, useSocketStore } from "../../store/store";
+import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader";
+import { useNavigate } from "react-router-dom";
+import { Html } from "@react-three/drei";
+import CollabUserIcon from "./collabUserIcon";
+import { getAvatarColor } from "./users/functions/getAvatarColor";
 
 const CamModelsGroup = () => {
   let navigate = useNavigate();
   const groupRef = useRef<THREE.Group>(null);
-  const email = localStorage.getItem('email');
+  const email = localStorage.getItem("email");
   const { activeUsers, setActiveUsers } = useActiveUsers();
   const { socket } = useSocketStore();
   const loader = new GLTFLoader();
   const dracoLoader = new DRACOLoader();
   const [cams, setCams] = useState<any[]>([]);
-  const [models, setModels] = useState<Record<string, { targetPosition: THREE.Vector3; targetRotation: THREE.Euler }>>({});
+  const [models, setModels] = useState<
+    Record<
+      string,
+      { targetPosition: THREE.Vector3; targetRotation: THREE.Euler }
+    >
+  >({});
 
-  dracoLoader.setDecoderPath('three/examples/jsm/libs/draco/gltf/');
+  dracoLoader.setDecoderPath("three/examples/jsm/libs/draco/gltf/");
   loader.setDRACOLoader(dracoLoader);
 
   useEffect(() => {
     if (!email) {
-      navigate('/');
+      navigate("/");
     }
     if (!socket) return;
-    const organization = email!.split('@')[1].split('.')[0];
+    const organization = email!.split("@")[1].split(".")[0];
 
-    socket.on('userConnectRespones', (data: any) => {
+    socket.on("userConnectRespones", (data: any) => {
       if (!groupRef.current) return;
-      if (data.data.userData.email === email) return
-      if (socket.id === data.socketId || organization !== data.organization) return;
+      if (data.data.userData.email === email) return;
+      if (socket.id === data.socketId || organization !== data.organization)
+        return;
 
-      const model = groupRef.current.getObjectByProperty('uuid', data.data.userData._id);
+      const model = groupRef.current.getObjectByProperty(
+        "uuid",
+        data.data.userData._id
+      );
       if (model) {
         groupRef.current.remove(model);
       }
       loader.load(camModel, (gltf) => {
         const newModel = gltf.scene.clone();
         newModel.uuid = data.data.userData._id;
-        newModel.position.set(data.data.position.x, data.data.position.y, data.data.position.z);
-        newModel.rotation.set(data.data.rotation.x, data.data.rotation.y, data.data.rotation.z);
+        newModel.position.set(
+          data.data.position.x,
+          data.data.position.y,
+          data.data.position.z
+        );
+        newModel.rotation.set(
+          data.data.rotation.x,
+          data.data.rotation.y,
+          data.data.rotation.z
+        );
         newModel.userData = data.data.userData;
         setCams((prev) => [...prev, newModel]);
         setActiveUsers([...activeUsers, data.data.userData]);
       });
     });
 
-    socket.on('userDisConnectRespones', (data: any) => {
+    socket.on("userDisConnectRespones", (data: any) => {
       if (!groupRef.current) return;
-      if (socket.id === data.socketId || organization !== data.organization) return;
+      if (socket.id === data.socketId || organization !== data.organization)
+        return;
 
-      setCams((prev) => prev.filter((cam) => cam.uuid !== data.data.userData._id));
-      setActiveUsers(activeUsers.filter((user: any) => user._id !== data.data.userData._id));
+      setCams((prev) =>
+        prev.filter((cam) => cam.uuid !== data.data.userData._id)
+      );
+      setActiveUsers(
+        activeUsers.filter((user: any) => user._id !== data.data.userData._id)
+      );
     });
 
-    socket.on('cameraUpdateResponse', (data: any) => {
-      if (!groupRef.current || socket.id === data.socketId || organization !== data.organization) return;
+    socket.on("cameraUpdateResponse", (data: any) => {
+      if (
+        !groupRef.current ||
+        socket.id === data.socketId ||
+        organization !== data.organization
+      )
+        return;
 
       setModels((prev) => ({
         ...prev,
         [data.data.userId]: {
-          targetPosition: new THREE.Vector3(data.data.position.x, data.data.position.y, data.data.position.z),
-          targetRotation: new THREE.Euler(data.data.rotation.x, data.data.rotation.y, data.data.rotation.z),
+          targetPosition: new THREE.Vector3(
+            data.data.position.x,
+            data.data.position.y,
+            data.data.position.z
+          ),
+          targetRotation: new THREE.Euler(
+            data.data.rotation.x,
+            data.data.rotation.y,
+            data.data.rotation.z
+          ),
         },
       }));
     });
 
     return () => {
-      socket.off('userConnectRespones');
-      socket.off('userDisConnectRespones');
-      socket.off('cameraUpdateResponse');
+      socket.off("userConnectRespones");
+      socket.off("userDisConnectRespones");
+      socket.off("cameraUpdateResponse");
     };
   }, [socket]);
 
   useFrame(() => {
     if (!groupRef.current) return;
     Object.keys(models).forEach((uuid) => {
-      const model = groupRef.current!.getObjectByProperty('uuid', uuid);
+      const model = groupRef.current!.getObjectByProperty("uuid", uuid);
       if (!model) return;
 
       const { targetPosition, targetRotation } = models[uuid];
       model.position.lerp(targetPosition, 0.1);
-      model.rotation.x = THREE.MathUtils.lerp(model.rotation.x, targetRotation.x, 0.1);
-      model.rotation.y = THREE.MathUtils.lerp(model.rotation.y, targetRotation.y, 0.1);
-      model.rotation.z = THREE.MathUtils.lerp(model.rotation.z, targetRotation.z, 0.1);
+      model.rotation.x = THREE.MathUtils.lerp(
+        model.rotation.x,
+        targetRotation.x,
+        0.1
+      );
+      model.rotation.y = THREE.MathUtils.lerp(
+        model.rotation.y,
+        targetRotation.y,
+        0.1
+      );
+      model.rotation.z = THREE.MathUtils.lerp(
+        model.rotation.z,
+        targetRotation.z,
+        0.1
+      );
     });
   });
 
   useEffect(() => {
     if (!groupRef.current) return;
-    const organization = email!.split('@')[1].split('.')[0];
+    const organization = email!.split("@")[1].split(".")[0];
     getActiveUsersData(organization).then((data) => {
-      const filteredData = data.cameraDatas.filter((camera: any) => camera.userData.email !== email);
+      const filteredData = data.cameraDatas.filter(
+        (camera: any) => camera.userData.email !== email
+      );
       if (filteredData.length > 0) {
         loader.load(camModel, (gltf) => {
           const newCams = filteredData.map((cam: any) => {
             const newModel = gltf.scene.clone();
             newModel.uuid = cam.userData._id;
-            newModel.position.set(cam.position.x, cam.position.y, cam.position.z);
-            newModel.rotation.set(cam.rotation.x, cam.rotation.y, cam.rotation.z);
+            newModel.position.set(
+              cam.position.x,
+              cam.position.y,
+              cam.position.z
+            );
+            newModel.rotation.set(
+              cam.rotation.x,
+              cam.rotation.y,
+              cam.rotation.z
+            );
             newModel.userData = cam.userData;
+            console.log('cam.userData: ', cam.userData);
             setActiveUsers([...activeUsers, cam.userData]);
             return newModel;
           });
@@ -119,7 +176,7 @@ const CamModelsGroup = () => {
   return (
     <group ref={groupRef} name="Cam-Model-Group">
       {cams.map((cam, index) => (
-        <primitive key={index} object={cam} >
+        <primitive key={index} object={cam}>
           <Html
             as="div"
             center
@@ -130,8 +187,14 @@ const CamModelsGroup = () => {
               textAlign: "center",
               fontFamily: "Arial, sans-serif",
             }}
-            position={[-0.015, 0, 0.7]}>
-            <CollabUserIcon color={"#ff0000"} userImage={image} userName={cam.userData.userName} />
+            position={[-0.015, 0, 0.7]}
+          >
+            <CollabUserIcon
+              userImage={""}
+              userName={cam.userData.userName}
+              index={index}
+              color={getAvatarColor(index)}
+            />
           </Html>
         </primitive>
       ))}
diff --git a/app/src/modules/collaboration/collabUserIcon.tsx b/app/src/modules/collaboration/collabUserIcon.tsx
index a6c22c0..acc3fa0 100644
--- a/app/src/modules/collaboration/collabUserIcon.tsx
+++ b/app/src/modules/collaboration/collabUserIcon.tsx
@@ -1,53 +1,33 @@
 import React from "react";
+import CustomAvatar from "./users/Avatar";
 
 interface CollabUserIconProps {
-    color: string;
-    userImage: string;
-    userName: string;
+  userName: string;
+  userImage?: string;
+  index?: number;
+  color: string;
 }
 
 const CollabUserIcon: React.FC<CollabUserIconProps> = ({
-    color,
-    userImage,
-    userName,
+  userImage,
+  userName,
+  index = 0,
+  color,
 }) => {
-    return (
-        <div
-            style={{
-                display: "flex",
-                justifyContent: "center",
-                alignItems: "center",
-                flexDirection: "column",
-                gap: "6px",
-                // transform:"translate(-20%, 0%)",
-            }}
-        >
-            <img
-                src={userImage}
-                alt={userName}
-                style={{
-                    width: "30px",
-                    height: "30px",
-                    outline: `2px solid ${color}`,
-                    borderRadius: "50%",
-                    objectFit: 'cover'
-                }}
-            />
-            <div
-                style={{
-                    display: 'flex',
-                    padding: "3px 5px",
-                    backgroundColor: color,
-                    borderRadius: "6px",
-                    color: "white",
-                    fontSize: "14px",
-                    fontWeight: 400
-                }}
-            >
-                {userName}
-            </div>
-        </div>
-    );
+  return (
+    <div className="collab-user-live-container">
+      <div className="user-image-container">
+        {userImage ? (
+          <img className="user-image" src={userImage} alt={userName} />
+        ) : (
+          <CustomAvatar name={userName} index={index} />
+        )}
+      </div>
+      <div className="user-name" style={{ backgroundColor: color }}>
+        {userName}
+      </div>
+    </div>
+  );
 };
 
 export default CollabUserIcon;
diff --git a/app/src/modules/collaboration/users/Avatar.tsx b/app/src/modules/collaboration/users/Avatar.tsx
new file mode 100644
index 0000000..93d45c3
--- /dev/null
+++ b/app/src/modules/collaboration/users/Avatar.tsx
@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from "react";
+import { getInitials } from "./functions/getInitials";
+import { getAvatarColor } from "./functions/getAvatarColor";
+
+interface AvatarProps {
+  name: string; // Name can be a full name or initials
+  size?: number;
+  index?: number;
+  textColor?: string;
+}
+
+const CustomAvatar: React.FC<AvatarProps> = ({
+  name,
+  size = 100,
+  index = 0,
+  textColor = "#ffffff",
+}) => {
+  const [imageSrc, setImageSrc] = useState<string | null>(null);
+
+  useEffect(() => {
+    const canvas = document.createElement("canvas"); // Create an offscreen canvas
+    canvas.width = size;
+    canvas.height = size;
+    const ctx = canvas.getContext("2d");
+    if (ctx) {
+      const initials = getInitials(name); // Convert name to initials if needed
+
+      // Draw background
+      ctx.fillStyle = getAvatarColor(index);
+      ctx.fillRect(0, 0, size, size);
+
+      // Draw initials
+      ctx.fillStyle = textColor;
+      ctx.font = `bold ${size / 2}px Arial`;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(initials, size / 2, size / 2);
+
+      // Generate image source
+      const dataURL = canvas.toDataURL("image/png");
+      setImageSrc(dataURL);
+    }
+  }, [name, size, textColor]);
+
+  if (!imageSrc) {
+    return null; // Return null while the image is being generated
+  }
+
+  return (
+    <img
+      className="user-image"
+      src={imageSrc}
+      alt="User Avatar"
+      style={{ width: "100%", height: "100%" }}
+    />
+  );
+};
+
+export default CustomAvatar;
diff --git a/app/src/modules/collaboration/users/functions/getAvatarColor.ts b/app/src/modules/collaboration/users/functions/getAvatarColor.ts
new file mode 100644
index 0000000..d3186d2
--- /dev/null
+++ b/app/src/modules/collaboration/users/functions/getAvatarColor.ts
@@ -0,0 +1,26 @@
+const avatarColors: string[] = [
+    "#FF5733", // Red Orange
+    "#48ac2a", // Leaf Green
+    "#0050eb", // Royal Blue
+    "#FF33A1", // Hot Pink
+    "#FF8C33", // Deep Orange
+    "#8C33FF", // Violet
+    "#FF3333", // Bright Red
+    "#43c06d", // Emerald Green
+    "#A133FF", // Amethyst Purple
+    "#C70039", // Crimson
+    "#900C3F", // Maroon
+    "#581845", // Plum
+    "#3498DB", // Sky Blue
+    "#2ECC71", // Green Mint
+    "#E74C3C", // Tomato Red
+    "#00adff", // Azure
+    "#DBAD05", // Amber Yellow
+    "#FF5733", // Red Orange
+    "#FF33A1", // Hot Pink
+    "#900C3F", // Maroon
+];
+
+export function getAvatarColor(index: number): string {
+    return avatarColors[index % avatarColors.length];
+}
diff --git a/app/src/modules/collaboration/users/functions/getInitials.ts b/app/src/modules/collaboration/users/functions/getInitials.ts
new file mode 100644
index 0000000..5ebaa19
--- /dev/null
+++ b/app/src/modules/collaboration/users/functions/getInitials.ts
@@ -0,0 +1,10 @@
+export const getInitials = (fullName: string): string => {
+    // Extract initials from the name
+    const words = fullName.split(" ");
+    const initials = words
+        .map((word) => word[0])
+        .slice(0, 2)
+        .join("")
+        .toUpperCase();
+    return initials;
+};
\ No newline at end of file
diff --git a/app/src/styles/layout/popup.scss b/app/src/styles/layout/popup.scss
index a086cf4..20ea3f2 100644
--- a/app/src/styles/layout/popup.scss
+++ b/app/src/styles/layout/popup.scss
@@ -110,3 +110,29 @@
     }
   }
 }
+
+.collab-user-live-container{
+  @include flex-center;
+  flex-direction: column;
+  gap: 6px;
+  .user-image-container{
+    height: 30px;
+    width: 30px;
+    border-radius: #{$border-radius-circle};
+    overflow: hidden;
+    .user-image{
+      height: 100%;
+      width: 100%;
+      object-fit: cover;
+      vertical-align: top;
+    }
+  }
+  .user-name{
+    padding: 4px 6px;
+    border-radius: #{$border-radius-small};
+    color: white;
+    font-size: var(--font-size-regulaar);
+    font-weight: var(--font-size-regulaar);
+    text-transform: capitalize;
+  }
+}
diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss
index d595b92..b248ad2 100644
--- a/app/src/styles/layout/sidebar.scss
+++ b/app/src/styles/layout/sidebar.scss
@@ -225,11 +225,13 @@
         border-radius: 50%;
         font-weight: var(--font-weight-bold);
         color: white;
+        text-transform: capitalize;
       }
 
       .guest-users-container {
         display: flex;
-
+        width: 100%;
+        justify-content: flex-end;
         .other-guest {
           @include flex-center;
           height: 26px;
@@ -249,7 +251,8 @@
         display: flex;
 
         .user-organization {
-          height: 100%;
+          height: 26px;
+          width: 52px;
           max-width: 52px;
           border-radius: 20px;
           overflow: hidden;
diff --git a/app/src/types/users.d.ts b/app/src/types/users.d.ts
index 9e8c35a..55d5361 100644
--- a/app/src/types/users.d.ts
+++ b/app/src/types/users.d.ts
@@ -8,4 +8,11 @@ export interface User {
 
 type AccessOption = {
     option: string;
+};
+
+export type ActiveUser = {
+  _id: string;
+  userName: string;
+  email: string;
+  activeStatus?: string; // Optional property
 };
\ No newline at end of file

From 261e673dacd52eecb8c8e38c2cfee40e50678d52 Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Fri, 28 Mar 2025 19:43:01 +0530
Subject: [PATCH 3/6] package fic

---
 app/package-lock.json                         | 19 -------------------
 .../sidebarLeft/visualization/Templates.tsx   |  1 -
 app/src/modules/market/FilterSearch.tsx       |  3 +--
 .../zoneData/getSelect2dZoneData.ts           |  1 -
 .../components/marketPlace/marketPlace.scss   | 15 ++++++++++-----
 5 files changed, 11 insertions(+), 28 deletions(-)

diff --git a/app/package-lock.json b/app/package-lock.json
index d3aa21e..f627d25 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -4133,25 +4133,6 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
-    "node_modules/@testing-library/dom": {
-      "version": "10.4.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
-      "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
-      "peer": true,
-      "dependencies": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/runtime": "^7.12.5",
-        "@types/aria-query": "^5.0.1",
-        "aria-query": "5.3.0",
-        "chalk": "^4.1.0",
-        "dom-accessibility-api": "^0.5.9",
-        "lz-string": "^1.5.0",
-        "pretty-format": "^27.0.2"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.17.0",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
diff --git a/app/src/components/layout/sidebarLeft/visualization/Templates.tsx b/app/src/components/layout/sidebarLeft/visualization/Templates.tsx
index 1f1e61c..ef710f7 100644
--- a/app/src/components/layout/sidebarLeft/visualization/Templates.tsx
+++ b/app/src/components/layout/sidebarLeft/visualization/Templates.tsx
@@ -5,7 +5,6 @@ const Templates = () => {
   const { templates, removeTemplate } = useTemplateStore();
   const { setSelectedZone } = useSelectedZoneStore();
 
-  console.log("templates: ", templates);
   const handleDeleteTemplate = (id: string) => {
     removeTemplate(id);
   };
diff --git a/app/src/modules/market/FilterSearch.tsx b/app/src/modules/market/FilterSearch.tsx
index 08103ba..84074b8 100644
--- a/app/src/modules/market/FilterSearch.tsx
+++ b/app/src/modules/market/FilterSearch.tsx
@@ -29,11 +29,10 @@ const FilterSearch: React.FC<ModelsProps> = ({
   filteredModels,
 }) => {
   const [activeOption, setActiveOption] = useState("Sort by"); // State for active option
-  console.log("filteredModels: ", filteredModels);
 
   const handleSelect = (option: string) => {
     setActiveOption(option);
-    console.log("option: ", option);
+
     // Alphabet ascending
     // Alphabet descending
     // All
diff --git a/app/src/services/realTimeVisulization/zoneData/getSelect2dZoneData.ts b/app/src/services/realTimeVisulization/zoneData/getSelect2dZoneData.ts
index 71d9c2f..26a88c5 100644
--- a/app/src/services/realTimeVisulization/zoneData/getSelect2dZoneData.ts
+++ b/app/src/services/realTimeVisulization/zoneData/getSelect2dZoneData.ts
@@ -1,5 +1,4 @@
 let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
-console.log("url_Backend_dwinzo: ", url_Backend_dwinzo);
 
 export const getSelect2dZoneData = async (
   ZoneId?: string,
diff --git a/app/src/styles/components/marketPlace/marketPlace.scss b/app/src/styles/components/marketPlace/marketPlace.scss
index 71f5897..620d934 100644
--- a/app/src/styles/components/marketPlace/marketPlace.scss
+++ b/app/src/styles/components/marketPlace/marketPlace.scss
@@ -47,10 +47,9 @@
         border-radius: $border-radius-large;
 
         .search-container {
-          border: none !important;
-          box-shadow: $box-shadow-medium;
           border-radius: $border-radius-large;
-
+          outline: 1px solid var(--border-color);
+          border: none;
           input {
             border: none !important;
             outline: none;
@@ -60,6 +59,12 @@
 
       .regularDropdown-container {
         max-width: 159px;
+        height: 100%;
+        border-radius: #{$border-radius-large};
+        border: 1px solid var(--border-color);
+        .dropdown-header {
+          align-items: center;
+        }
       }
 
       .button {
@@ -128,7 +133,7 @@
             justify-content: center;
             border-radius: #{$border-radius-medium};
             overflow: hidden;
-            img{
+            img {
               height: inherit;
               width: 100%;
               object-fit: cover;
@@ -143,7 +148,7 @@
               display: flex;
               flex-direction: column;
               gap: 3px;
-              .assets-name{
+              .assets-name {
                 text-transform: capitalize;
               }
 

From ba259babdc6185677076703c422d9ea0329da07d Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Sat, 29 Mar 2025 09:28:42 +0530
Subject: [PATCH 4/6] refactor: change uploadedOn type from string to number in
 asset components

---
 app/src/modules/market/AssetPreview.tsx   | 2 +-
 app/src/modules/market/Card.tsx           | 4 ++--
 app/src/modules/market/CardsContainer.tsx | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/src/modules/market/AssetPreview.tsx b/app/src/modules/market/AssetPreview.tsx
index 9a65990..864c5e5 100644
--- a/app/src/modules/market/AssetPreview.tsx
+++ b/app/src/modules/market/AssetPreview.tsx
@@ -9,7 +9,7 @@ import * as THREE from "three";
 // Define the shape of the selected card
 interface SelectedCard {
   assetName: string;
-  uploadedOn: string;
+  uploadedOn: number;
   price: number;
   rating: number;
   views: number;
diff --git a/app/src/modules/market/Card.tsx b/app/src/modules/market/Card.tsx
index e723f4f..4188447 100644
--- a/app/src/modules/market/Card.tsx
+++ b/app/src/modules/market/Card.tsx
@@ -12,14 +12,14 @@ import { getAssetDownload } from "../../services/marketplace/getAssetDownload";
 
 interface CardProps {
   assetName: string;
-  uploadedOn: string;
+  uploadedOn: number;
   price: number;
   rating: number;
   views: number;
   image: string;
   onSelectCard: (cardData: {
     assetName: string;
-    uploadedOn: string;
+    uploadedOn: number;
     price: number;
     rating: number;
     views: number;
diff --git a/app/src/modules/market/CardsContainer.tsx b/app/src/modules/market/CardsContainer.tsx
index 423fd16..50da667 100644
--- a/app/src/modules/market/CardsContainer.tsx
+++ b/app/src/modules/market/CardsContainer.tsx
@@ -23,7 +23,7 @@ interface ModelsProps {
 const CardsContainer: React.FC<ModelsProps> = ({ models }) => {
   const [selectedCard, setSelectedCard] = useState<{
     assetName: string;
-    uploadedOn: string;
+    uploadedOn: number;
     price: number;
     rating: number;
     views: number;
@@ -31,7 +31,7 @@ const CardsContainer: React.FC<ModelsProps> = ({ models }) => {
 
   const handleCardSelect = (cardData: {
     assetName: string;
-    uploadedOn: string;
+    uploadedOn: number;
     price: number;
     rating: number;
     views: number;
@@ -48,7 +48,7 @@ const CardsContainer: React.FC<ModelsProps> = ({ models }) => {
             <Card
               key={assetDetail._id}
               assetName={assetDetail?.filename}
-              uploadedOn={assetDetail.uploadDate.toString()}
+              uploadedOn={assetDetail.uploadDate}
               price={36500}
               rating={4.5}
               views={800}

From 725abcf0c68950a071c026f7eedaffd626523c4c Mon Sep 17 00:00:00 2001
From: Poovizhi99 <poovizhi@hexrfactory.com>
Date: Sat, 29 Mar 2025 14:29:32 +0530
Subject: [PATCH 5/6] added toggle functionality

---
 .../properties/GlobalProperties.tsx           | 137 +++++++++++++++++-
 1 file changed, 133 insertions(+), 4 deletions(-)

diff --git a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
index 672d847..633b144 100644
--- a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
@@ -3,8 +3,31 @@ import InputRange from "../../../ui/inputs/InputRange";
 import InputToggle from "../../../ui/inputs/InputToggle";
 import { AI_Icon } from "../../../icons/ExportCommonIcons";
 import LabeledButton from "../../../ui/inputs/LabledButton";
+import {
+  useAzimuth,
+  useElevation,
+  useRenderDistance,
+  useResetCamera,
+  useRoofVisibility,
+  useSelectedWallItem,
+  useShadows,
+  useSocketStore,
+  useToggleView,
+  useWallVisibility,
+} from "../../../../store/store";
+import { setEnvironment } from "../../../../services/factoryBuilder/environment/setEnvironment";
 
 const GlobalProperties: React.FC = () => {
+  const { toggleView, setToggleView } = useToggleView();
+  const { selectedWallItem, setSelectedWallItem } = useSelectedWallItem();
+  const { roofVisibility, setRoofVisibility } = useRoofVisibility();
+  const { wallVisibility, setWallVisibility } = useWallVisibility();
+  const { shadows, setShadows } = useShadows();
+  const { resetCamera, setResetCamera } = useResetCamera();
+  const { elevation, setElevation } = useElevation();
+  const { azimuth, setAzimuth } = useAzimuth();
+  const { renderDistance, setRenderDistance } = useRenderDistance();
+  const { socket } = useSocketStore();
   const [limitDistance, setLimitDistance] = useState(false);
   const [distance, setDistance] = useState<number>(5);
 
@@ -23,6 +46,93 @@ const GlobalProperties: React.FC = () => {
   function updateGridDistance(value: number) {
     setGridDistance(value);
   }
+  // Function to toggle roof visibility
+  const changeRoofVisibility = async () => {
+    const email = localStorage.getItem("email");
+    const organization = email!.split("@")[1].split(".")[0];
+
+    //using REST
+    const data = await setEnvironment(
+      organization,
+      localStorage.getItem("userId")!,
+      wallVisibility,
+      !roofVisibility,
+      shadows
+    );
+    // console.log('data: ', data);
+
+    //using Socket
+    // const visData = {
+    //   organization: organization,
+    //   userId: localStorage.getItem('userId')!,
+    //   wallVisibility: wallVisibility,
+    //   roofVisibility: !roofVisibility,
+    //   shadowVisibility: shadows,
+    //   socketId: socket.id
+    // };
+    // socket.emit('v1:Environment:set', visData)
+
+    setRoofVisibility(!roofVisibility); // Toggle roof visibility
+  };
+  // Function to toggle wall visibility
+  const changeWallVisibility = async () => {
+    const email = localStorage.getItem("email");
+    const organization = email!.split("@")[1].split(".")[0];
+    //using REST
+    const data = await setEnvironment(
+      organization,
+      localStorage.getItem("userId")!,
+      !wallVisibility,
+      roofVisibility,
+      shadows
+    );
+    // console.log('data: ', data);
+
+    //using Socket
+    // const visData = {
+    //   organization: organization,
+    //   userId: localStorage.getItem('userId')!,
+    //   wallVisibility: !wallVisibility,
+    //   roofVisibility: roofVisibility,
+    //   shadowVisibility: shadows,
+    //   socketId: socket.id
+    // };
+    // socket.emit('v1:Environment:set', visData)
+
+    setWallVisibility(!wallVisibility); // Toggle wall visibility
+  };
+
+  const shadowVisibility = async () => {
+    const email = localStorage.getItem("email");
+    const organization = email!.split("@")[1].split(".")[0];
+    //using REST
+    const data = await setEnvironment(
+      organization,
+      localStorage.getItem("userId")!,
+      wallVisibility,
+      roofVisibility,
+      !shadows
+    );
+    // console.log('data: ', data);
+
+    //using Socket
+    // const visData = {
+    //   organization: organization,
+    //   userId: localStorage.getItem('userId')!,
+    //   wallVisibility: wallVisibility,
+    //   roofVisibility: roofVisibility,
+    //   shadowVisibility: !shadows,
+    //   socketId: socket.id
+    // };
+    // socket.emit('v1:Environment:set', visData)
+
+    setShadows(!shadows);
+  };
+  const toggleResetCamera = () => {
+    if (!toggleView) {
+      setResetCamera(true); // Trigger reset camera action
+    }
+  };
 
   return (
     <div className="global-properties-container">
@@ -34,10 +144,29 @@ const GlobalProperties: React.FC = () => {
 
       <div className="split"></div>
 
-      <InputToggle inputKey="1" label="Roof Visibility" />
-      <InputToggle inputKey="2" label="Wall Visibility" />
-      <InputToggle inputKey="3" label="Shadows Visibility" />
-      <LabeledButton label="Reset Camera" onClick={() => {}} value="Reset"/>
+      <InputToggle
+        value={roofVisibility}
+        inputKey="1"
+        label="Roof Visibility"
+        onClick={changeRoofVisibility}
+      />
+      <InputToggle
+        value={wallVisibility}
+        inputKey="2"
+        label="Wall Visibility"
+        onClick={changeWallVisibility}
+      />
+      <InputToggle
+        value={shadows}
+        inputKey="3"
+        label="Shadows Visibility"
+        onClick={shadowVisibility}
+      />
+      <LabeledButton
+        label="Reset Camera"
+        onClick={toggleResetCamera}
+        value="Reset"
+      />
 
       <div className="split"></div>
 

From 9fb0b78e45a8ae34d7d1049ca50e2af5516c994c Mon Sep 17 00:00:00 2001
From: Poovizhi99 <poovizhi@hexrfactory.com>
Date: Sat, 29 Mar 2025 17:46:47 +0530
Subject: [PATCH 6/6] integrated asset properties in builder

---
 .../components/layout/sidebarRight/Header.tsx |  1 -
 .../layout/sidebarRight/SideBarRight.tsx      | 71 ++++++++++++-------
 .../customInput/PositionInputs.tsx            |  6 ++
 .../customInput/RotationInput.tsx             |  5 +-
 .../properties/AssetProperties.tsx            | 20 ++++--
 5 files changed, 71 insertions(+), 32 deletions(-)

diff --git a/app/src/components/layout/sidebarRight/Header.tsx b/app/src/components/layout/sidebarRight/Header.tsx
index 9abf096..b4983c6 100644
--- a/app/src/components/layout/sidebarRight/Header.tsx
+++ b/app/src/components/layout/sidebarRight/Header.tsx
@@ -12,7 +12,6 @@ const Header: React.FC = () => {
   const guestUsers: ActiveUser[] = activeUsers.filter(
     (user: ActiveUser) => user.userName !== userName
   );
-  console.log('guestUsers: ', guestUsers);
 
   return (
     <div className="header-container">
diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx
index f2f6695..4821772 100644
--- a/app/src/components/layout/sidebarRight/SideBarRight.tsx
+++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx
@@ -14,7 +14,10 @@ import ConveyorMechanics from "./mechanics/ConveyorMechanics";
 import Visualization from "./visualization/Visualization";
 import Analysis from "./analysis/Analysis";
 import Simulations from "./simulation/Simulations";
-import { useSelectedActionSphere } from "../../../store/store";
+import {
+  useSelectedActionSphere,
+  useselectedFloorItem,
+} from "../../../store/store";
 import GlobalProperties from "./properties/GlobalProperties";
 import AsstePropertiies from "./properties/AssetProperties";
 import ZoneProperties from "./properties/ZoneProperties";
@@ -25,6 +28,7 @@ const SideBarRight: React.FC = () => {
   const { toggleUI } = useToggleStore();
   const { selectedActionSphere } = useSelectedActionSphere();
   const { subModule, setSubModule } = useSubModuleStore();
+  const { selectedFloorItem } = useselectedFloorItem();
   // Reset activeList whenever activeModule changes
   useEffect(() => {
     if (activeModule !== "simulation") setSubModule("properties");
@@ -38,8 +42,9 @@ const SideBarRight: React.FC = () => {
         <div className="sidebar-actions-container">
           {/* {activeModule === "builder" && ( */}
           <div
-            className={`sidebar-action-list ${subModule === "properties" ? "active" : ""
-              }`}
+            className={`sidebar-action-list ${
+              subModule === "properties" ? "active" : ""
+            }`}
             onClick={() => setSubModule("properties")}
           >
             <PropertiesIcon isActive={subModule === "properties"} />
@@ -48,22 +53,25 @@ const SideBarRight: React.FC = () => {
           {activeModule === "simulation" && (
             <>
               <div
-                className={`sidebar-action-list ${subModule === "mechanics" ? "active" : ""
-                  }`}
+                className={`sidebar-action-list ${
+                  subModule === "mechanics" ? "active" : ""
+                }`}
                 onClick={() => setSubModule("mechanics")}
               >
                 <MechanicsIcon isActive={subModule === "mechanics"} />
               </div>
               <div
-                className={`sidebar-action-list ${subModule === "simulations" ? "active" : ""
-                  }`}
+                className={`sidebar-action-list ${
+                  subModule === "simulations" ? "active" : ""
+                }`}
                 onClick={() => setSubModule("simulations")}
               >
                 <SimulationIcon isActive={subModule === "simulations"} />
               </div>
               <div
-                className={`sidebar-action-list ${subModule === "analysis" ? "active" : ""
-                  }`}
+                className={`sidebar-action-list ${
+                  subModule === "analysis" ? "active" : ""
+                }`}
                 onClick={() => setSubModule("analysis")}
               >
                 <AnalysisIcon isActive={subModule === "analysis"} />
@@ -75,12 +83,21 @@ const SideBarRight: React.FC = () => {
       {/* process builder */}
       {toggleUI &&
         subModule === "properties" &&
-        activeModule !== "visualization" && (
+        activeModule !== "visualization" &&
+        !selectedFloorItem && (
           <div className="sidebar-right-container">
             <div className="sidebar-right-content-container">
               <GlobalProperties />
-              {/* <ZoneProperties /> */}
-              {/* <AsstePropertiies /> */}
+            </div>
+          </div>
+        )}
+      {toggleUI &&
+        subModule === "properties" &&
+        activeModule !== "visualization" &&
+        selectedFloorItem && (
+          <div className="sidebar-right-container">
+            <div className="sidebar-right-content-container">
+              <AsstePropertiies />
             </div>
           </div>
         )}
@@ -89,9 +106,7 @@ const SideBarRight: React.FC = () => {
         activeModule === "builder" && (
           <div className="sidebar-right-container">
             <div className="sidebar-right-content-container">
-              {/* <GlobalProperties /> */}
               <ZoneProperties />
-              {/* <AsstePropertiies /> */}
             </div>
           </div>
         )}
@@ -99,20 +114,24 @@ const SideBarRight: React.FC = () => {
 
       {toggleUI && activeModule === "simulation" && (
         <>
-          {subModule === "mechanics" && selectedActionSphere && selectedActionSphere.path.type === "Conveyor" && (
-            <div className="sidebar-right-container">
-              <div className="sidebar-right-content-container">
-                <ConveyorMechanics />
+          {subModule === "mechanics" &&
+            selectedActionSphere &&
+            selectedActionSphere.path.type === "Conveyor" && (
+              <div className="sidebar-right-container">
+                <div className="sidebar-right-content-container">
+                  <ConveyorMechanics />
+                </div>
               </div>
-            </div>
-          )}
-          {subModule === "mechanics" && selectedActionSphere && selectedActionSphere.path.type === "Vehicle" && (
-            <div className="sidebar-right-container">
-              <div className="sidebar-right-content-container">
-                <VehicleMechanics />
+            )}
+          {subModule === "mechanics" &&
+            selectedActionSphere &&
+            selectedActionSphere.path.type === "Vehicle" && (
+              <div className="sidebar-right-container">
+                <div className="sidebar-right-content-container">
+                  <VehicleMechanics />
+                </div>
               </div>
-            </div>
-          )}
+            )}
           {subModule === "mechanics" && !selectedActionSphere && (
             <div className="sidebar-right-container">
               <div className="sidebar-right-content-container">
diff --git a/app/src/components/layout/sidebarRight/customInput/PositionInputs.tsx b/app/src/components/layout/sidebarRight/customInput/PositionInputs.tsx
index b65d782..881e225 100644
--- a/app/src/components/layout/sidebarRight/customInput/PositionInputs.tsx
+++ b/app/src/components/layout/sidebarRight/customInput/PositionInputs.tsx
@@ -4,12 +4,16 @@ interface PositionInputProps {
   onChange: (value: string) => void; // Callback for value change
   placeholder?: string; // Optional placeholder
   type?: string; // Input type (e.g., text, number, email)
+  value1?: number;
+  value2?: number;
 }
 
 const PositionInput: React.FC<PositionInputProps> = ({
   onChange,
   placeholder = "Enter value", // Default placeholder
   type = "number", // Default type
+  value1 = "number",
+  value2 = "number",
 }) => {
   return (
     <div className="custom-input-container">
@@ -22,6 +26,7 @@ const PositionInput: React.FC<PositionInputProps> = ({
             type={type}
             onChange={(e) => onChange(e.target.value)}
             placeholder={placeholder}
+            value={value2}
           />
         </div>
         <div className="input-container">
@@ -31,6 +36,7 @@ const PositionInput: React.FC<PositionInputProps> = ({
             type={type}
             onChange={(e) => onChange(e.target.value)}
             placeholder={placeholder}
+            value={value1}
           />
         </div>
       </div>
diff --git a/app/src/components/layout/sidebarRight/customInput/RotationInput.tsx b/app/src/components/layout/sidebarRight/customInput/RotationInput.tsx
index 3ab01a4..962e967 100644
--- a/app/src/components/layout/sidebarRight/customInput/RotationInput.tsx
+++ b/app/src/components/layout/sidebarRight/customInput/RotationInput.tsx
@@ -4,17 +4,19 @@ interface RotationInputProps {
   onChange: (value: string) => void; // Callback for value change
   placeholder?: string; // Optional placeholder
   type?: string; // Input type (e.g., text, number, email)
+  value?: number;
 }
 
 const RotationInput: React.FC<RotationInputProps> = ({
   onChange,
   placeholder = "Enter value", // Default placeholder
   type = "number", // Default type
+  value = "number",
 }) => {
   return (
     <div className="custom-input-container">
       <div className="header">Rotation</div>
-      <div className="inputs-container"  style={{display: "block"}}>
+      <div className="inputs-container" style={{ display: "block" }}>
         <div className="input-container">
           <div className="custom-input-label">Rotate : </div>
           <input
@@ -22,6 +24,7 @@ const RotationInput: React.FC<RotationInputProps> = ({
             type={type}
             onChange={(e) => onChange(e.target.value)}
             placeholder={placeholder}
+            value={value}
           />
         </div>
       </div>
diff --git a/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx b/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx
index 8309024..c47fd81 100644
--- a/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/AssetProperties.tsx
@@ -1,9 +1,11 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import InputToggle from "../../../ui/inputs/InputToggle";
 import InputWithDropDown from "../../../ui/inputs/InputWithDropDown";
 import { RemoveIcon } from "../../../icons/ExportCommonIcons";
 import PositionInput from "../customInput/PositionInputs";
 import RotationInput from "../customInput/RotationInput";
+import { useselectedFloorItem } from "../../../../store/store";
+import * as THREE from "three";
 
 interface UserData {
   id: number; // Unique identifier for the user data
@@ -14,7 +16,13 @@ interface UserData {
 const AssetProperties: React.FC = () => {
   const [userData, setUserData] = useState<UserData[]>([]); // State to track user data
   const [nextId, setNextId] = useState(1); // Unique ID for new entries
+  const { selectedFloorItem } = useselectedFloorItem();
+  let xValue = selectedFloorItem.position.x;
+  let zValue = selectedFloorItem.position.z;
+  let rotationRad = selectedFloorItem.rotation.y;
+  let rotationDeg = THREE.MathUtils.radToDeg(rotationRad);
 
+  // useEffect(() => {}, [selectedFloorItem]);
   // Function to handle adding new user data
   const handleAddUserData = () => {
     const newUserData: UserData = {
@@ -45,12 +53,16 @@ const AssetProperties: React.FC = () => {
   return (
     <div className="asset-properties-container">
       {/* Name */}
-      <div className="header">Selected Object</div>
+      <div className="header">{selectedFloorItem.userData.name}</div>
 
       <div className="split"></div>
 
-      <PositionInput onChange={() => { }} />
-      <RotationInput onChange={() => { }} />
+      <PositionInput
+        onChange={() => {}}
+        value1={xValue.toFixed(5)}
+        value2={zValue.toFixed(5)}
+      />
+      <RotationInput onChange={() => {}} value={rotationDeg} />
 
       <div className="split"></div>