Merge remote-tracking branch 'origin/main-demo' into main-dev

app/src/components/Dashboard/SidePannel.tsx

@@ -14,7 +14,6 @@ import lightThemeImage from "../../assets/image/lightThemeProject.png";
 import { SettingsIcon, TrashIcon } from "../icons/ExportCommonIcons";
 import { getUserData } from "../../functions/getUserData";
 import { useLoadingProgress, useSocketStore } from "../../store/builder/store";
-import { createProject } from "../../services/dashboard/createProject";
 
 interface SidePannelProps {
   setActiveTab: React.Dispatch<React.SetStateAction<string>>;
@@ -38,11 +37,13 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
 
   const handleCreateNewProject = async () => {
     const token = localStorage.getItem("token");
-    const refreshToken = localStorage.getItem("refreshToken")
-    console.log('refreshToken: ', refreshToken);
+    const refreshToken = localStorage.getItem("refreshToken");
+    console.log("refreshToken: ", refreshToken);
     try {
       const projectId = generateProjectId();
-      useSocketStore.getState().initializeSocket(email, organization, token, refreshToken);
+      useSocketStore
+        .getState()
+        .initializeSocket(email, organization, token, refreshToken);
 
       //API for creating new Project
       // const project = await createProject(
@@ -59,7 +60,7 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
         projectUuid: projectId,
       };
 
-      console.log('projectSocket: ', projectSocket);
+      console.log("projectSocket: ", projectSocket);
       if (projectSocket) {
         const handleResponse = (data: any) => {
           if (data.message === "Project created successfully") {
@@ -88,7 +89,8 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
           </div>
           <div className="user-name">
             {userName
-              ? userName.charAt(0).toUpperCase() + userName.slice(1).toLowerCase()
+              ? userName.charAt(0).toUpperCase() +
+                userName.slice(1).toLowerCase()
               : "Anonymous"}
           </div>
         </div>
@@ -162,10 +164,14 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
             <SettingsIcon />
             Settings
           </div>
-          <div className="option-list" style={{ cursor: "pointer" }} onClick={() => {
-            localStorage.clear();
-            navigate("/");
-          }}>
+          <div
+            className="option-list"
+            style={{ cursor: "pointer" }}
+            onClick={() => {
+              localStorage.clear();
+              navigate("/");
+            }}
+          >
             <LogoutIcon />
             Log out
           </div>
@@ -179,4 +185,4 @@ const SidePannel: React.FC<SidePannelProps> = ({ setActiveTab, activeTab }) => {
   );
 };
 
-export default SidePannel;
+export default SidePannel;

app/src/components/forgotPassword/EmailInput.tsx

@@ -1,30 +1,39 @@
-import React from 'react';
+import React from "react";
 
 interface Props {
-    email: string;
-    setEmail: (value: string) => void;
-    onSubmit: () => void;
+  email: string;
+  setEmail: (value: string) => void;
+  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
 }
 
 const EmailInput: React.FC<Props> = ({ email, setEmail, onSubmit }) => {
-    return (
-        <div className='request-container'>
-            <h1 className='header'>Forgot password</h1>
-            <p className='sub-header'>
-                Enter your email for the verification process, we will send a 4-digit code to your email.
-            </p>
-            <form className='auth-form' onSubmit={(e) => { e.preventDefault(); onSubmit(); }}>
-                <input
-                    type='email'
-                    placeholder='Email'
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                    required
-                />
-                <button type='submit' className='continue-button'>Continue</button>
-            </form>
-        </div>
-    );
+  return (
+    <div className="request-container">
+      <h1 className="header">Forgot password</h1>
+      <p className="sub-header">
+        Enter your email for the verification process, we will send a 4-digit
+        code to your email.
+      </p>
+      <form
+        className="auth-form"
+        onSubmit={(e) => {
+          e.preventDefault();
+          onSubmit(e);
+        }}
+      >
+        <input
+          type="email"
+          placeholder="Email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          required
+        />
+        <button type="submit" className="continue-button">
+          Continue
+        </button>
+      </form>
+    </div>
+  );
 };
 
 export default EmailInput;

app/src/components/forgotPassword/OTPInput.tsx

@@ -1,10 +1,27 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from "react";
 
-const OTPInput: React.FC<{ length?: number; onComplete: (otp: string) => void }> = ({ length = 4, onComplete }) => {
-  const [otpValues, setOtpValues] = useState<string[]>(Array(length).fill(''));
+const OTPInput: React.FC<{
+  length?: number;
+  onComplete: (otp: string) => void;
+  code: string | number;
+}> = ({ length = 4, onComplete, code }) => {
+  const [otpValues, setOtpValues] = useState<string[]>(Array(length).fill(""));
   const inputsRef = useRef<(HTMLInputElement | null)[]>([]);
 
-  // Auto focus first input on mount
+  // ✅ Pre-fill inputs if code is passed
+  useEffect(() => {
+    if (code) {
+      const codeString = String(code);
+      const filled = codeString.split("").slice(0, length);
+      const padded = filled.concat(Array(length - filled.length).fill(""));
+      setOtpValues(padded);
+      if (filled.length === length) {
+        onComplete(filled.join(""));
+      }
+    }
+  }, [code, length, onComplete]);
+
+  // ✅ Focus first input on mount
   useEffect(() => {
     inputsRef.current[0]?.focus();
   }, []);
@@ -19,14 +36,18 @@ const OTPInput: React.FC<{ length?: number; onComplete: (otp: string) => void }>
         inputsRef.current[index + 1]?.focus();
       }
 
-      if (newOtp.every((digit) => digit !== '')) {
-        onComplete(newOtp.join(''));
+      // ✅ Only trigger onComplete when all digits are filled
+      if (newOtp.every((digit) => digit !== "")) {
+        onComplete(newOtp.join(""));
       }
     }
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>, index: number) => {
-    if (e.key === 'Backspace' && !otpValues[index] && index > 0) {
+  const handleKeyDown = (
+    e: React.KeyboardEvent<HTMLInputElement>,
+    index: number
+  ) => {
+    if (e.key === "Backspace" && !otpValues[index] && index > 0) {
       inputsRef.current[index - 1]?.focus();
     }
   };
@@ -39,7 +60,7 @@ const OTPInput: React.FC<{ length?: number; onComplete: (otp: string) => void }>
           type="text"
           className="otp-input"
           maxLength={1}
-          value={value}
+          value={value ?? ""}
           onChange={(e) => handleChange(e.target.value, index)}
           onKeyDown={(e) => handleKeyDown(e, index)}
           ref={(el) => (inputsRef.current[index] = el)}

app/src/components/forgotPassword/OTP_Verification.tsx

@@ -1,57 +1,77 @@
-import React, { useState } from 'react';
-import OTPInput from './OTPInput';
+import React, { FormEvent, useState } from "react";
+import OTPInput from "./OTPInput";
 
 interface Props {
-    email: string;
-    timer: number;
-    setCode: (value: string) => void;
-    onSubmit: () => void;
-    resendCode: () => void;
+  email: string;
+  code: string;
+  timer: number;
+  setCode: (value: string) => void;
+  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+  resendCode: () => void;
 }
 
-const OTPVerification: React.FC<Props> = ({ email, timer, setCode, onSubmit, resendCode }) => {
-    const [otp, setOtp] = useState('');
+const OTPVerification: React.FC<Props> = ({
+  email,
+  timer,
+  setCode,
+  onSubmit,
+  resendCode,
+  code,
+}) => {
+  const [otp, setOtp] = useState("");
 
-    const handleSubmit = (e: React.FormEvent) => {
-        e.preventDefault();
-        console.log('otp.length: ', otp.length);
-        if (otp.length === 4) {
-            onSubmit();
-        } else {
-            alert('Please enter the 4-digit code');
-        }
-    };
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
 
-    return (
-        <div className='request-container'>
-            <h1 className='header'>Verification</h1>
-            <p className='sub-header'>
-                Enter the 4-digit code sent to <strong>{email}</strong>.
-            </p>
-            <form className='auth-form' onSubmit={handleSubmit}>
-                <OTPInput length={4} onComplete={(code) => { setOtp(code); setCode(code); }} />
-                <div className="timing">
-                    {timer > 0
-                        ? `${String(Math.floor(timer / 60)).padStart(2, '0')}:${String(timer % 60).padStart(2, '0')}`
-                        : ''}
-                </div>
-                <button
-                    type='submit'
-                    className='continue-button'
-                    disabled={otp.length < 4} // prevent clicking if not complete
-                >
-                    Verify
-                </button>
-            </form>
-            <div
-                className={`resend ${timer > 0 ? 'disabled' : ''}`}
-                onClick={timer === 0 ? resendCode : undefined}
-                style={{ cursor: timer === 0 ? 'pointer' : 'not-allowed', opacity: timer === 0 ? 1 : 0.5 }}
-            >
-                If you didn’t receive a code, <span>Resend</span>
-            </div>
+    if (otp.length === 4) {
+      onSubmit(e);
+    } else {
+      alert("Please enter the 4-digit code");
+    }
+  };
+
+  return (
+    <div className="request-container">
+      <h1 className="header">Verification</h1>
+      <p className="sub-header">
+        Enter the 4-digit code sent to <strong>{email}</strong>.
+      </p>
+      <form className="auth-form" onSubmit={handleSubmit}>
+        <OTPInput
+          length={4}
+          onComplete={(codes) => {
+            setOtp(code);
+            setCode(codes);
+          }}
+          code={code}
+        />
+        <div className="timing">
+          {timer > 0
+            ? `${String(Math.floor(timer / 60)).padStart(2, "0")}:${String(
+                timer % 60
+              ).padStart(2, "0")}`
+            : ""}
         </div>
-    );
+        <button
+          type="submit"
+          className="continue-button"
+          //   disabled={otp.length < 4} // prevent clicking if not complete
+        >
+          Verify
+        </button>
+      </form>
+      <div
+        className={`resend ${timer > 0 ? "disabled" : ""}`}
+        onClick={timer === 0 ? resendCode : undefined}
+        style={{
+          cursor: timer === 0 ? "pointer" : "not-allowed",
+          opacity: timer === 0 ? 1 : 0.5,
+        }}
+      >
+        If you didn’t receive a code, <span>Resend</span>
+      </div>
+    </div>
+  );
 };
 
 export default OTPVerification;

app/src/components/forgotPassword/PasswordSetup.tsx

@@ -1,77 +1,82 @@
-import React, { useState } from 'react';
-import { EyeIcon } from '../icons/ExportCommonIcons';
+import React, { useState } from "react";
+import { EyeIcon } from "../icons/ExportCommonIcons";
 
 interface Props {
-    newPassword: string;
-    confirmPassword: string;
-    setNewPassword: (value: string) => void;
-    setConfirmPassword: (value: string) => void;
-    onSubmit: () => void;
+  newPassword: string;
+  confirmPassword: string;
+  setNewPassword: (value: string) => void;
+  setConfirmPassword: (value: string) => void;
+  onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
 }
 
 const PasswordSetup: React.FC<Props> = ({
-    newPassword,
-    confirmPassword,
-    setNewPassword,
-    setConfirmPassword,
-    onSubmit
+  newPassword,
+  confirmPassword,
+  setNewPassword,
+  setConfirmPassword,
+  onSubmit,
 }) => {
-    const [showNewPassword, setShowNewPassword] = useState(false);
-    const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [showNewPassword, setShowNewPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
 
-    return (
-        <div className='request-container'>
-            <h1 className='header'>New Password</h1>
-            <p className='sub-header'>Set the new password for your account so you can login and access all features.</p>
-            <form
-                className='auth-form'
-                onSubmit={(e) => {
-                    e.preventDefault();
-                    if (newPassword !== confirmPassword) {
-                        alert('Passwords do not match');
-                        return;
-                    }
-                    onSubmit();
-                }}
-            >
-                <div className="password-container">
-                    <input
-                        type={showNewPassword ? 'text' : 'password'}
-                        placeholder='Enter new password'
-                        value={newPassword}
-                        onChange={(e) => setNewPassword(e.target.value)}
-                        required
-                    />
-                    <button
-                        type="button"
-                        className="toggle-password"
-                        onClick={() => setShowNewPassword(prev => !prev)}
-                    >
-                        <EyeIcon isClosed={!showNewPassword} />
-                    </button>
-                </div>
-
-                <div className="password-container">
-                    <input
-                        type={showConfirmPassword ? 'text' : 'password'}
-                        placeholder='Confirm password'
-                        value={confirmPassword}
-                        onChange={(e) => setConfirmPassword(e.target.value)}
-                        required
-                    />
-                    <button
-                        type="button"
-                        className="toggle-password"
-                        onClick={() => setShowConfirmPassword(prev => !prev)}
-                    >
-                        <EyeIcon isClosed={!showConfirmPassword} />
-                    </button>
-                </div>
-
-                <button type='submit' className='continue-button'>Update password</button>
-            </form>
+  return (
+    <div className="request-container">
+      <h1 className="header">New Password</h1>
+      <p className="sub-header">
+        Set the new password for your account so you can login and access all
+        features.
+      </p>
+      <form
+        className="auth-form"
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (newPassword !== confirmPassword) {
+            alert("Passwords do not match");
+            return;
+          }
+          onSubmit(e);
+        }}
+      >
+        <div className="password-container">
+          <input
+            type={showNewPassword ? "text" : "password"}
+            placeholder="Enter new password"
+            value={newPassword}
+            onChange={(e) => setNewPassword(e.target.value)}
+            required
+          />
+          <button
+            type="button"
+            className="toggle-password"
+            onClick={() => setShowNewPassword((prev) => !prev)}
+          >
+            <EyeIcon isClosed={!showNewPassword} />
+          </button>
         </div>
-    );
+
+        <div className="password-container">
+          <input
+            type={showConfirmPassword ? "text" : "password"}
+            placeholder="Confirm password"
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            required
+          />
+          <button
+            type="button"
+            className="toggle-password"
+            onClick={() => setShowConfirmPassword((prev) => !prev)}
+          >
+            <EyeIcon isClosed={!showConfirmPassword} />
+          </button>
+        </div>
+
+        <button type="submit" className="continue-button">
+          Update password
+        </button>
+      </form>
+    </div>
+  );
 };
 
 export default PasswordSetup;

app/src/components/icons/ExportCommonIcons.tsx

@@ -1394,7 +1394,7 @@ export const AlertIcon = () => {
       <path
         d="M13.454 14.797H6.54597C6.1917 14.8122 5.83973 14.7329 5.5262 14.5673C5.21266 14.4017 4.94885 14.1556 4.76177 13.8544C4.5747 13.5531 4.47112 13.2075 4.46165 12.8531C4.45219 12.4986 4.53719 12.148 4.70792 11.8372L8.16189 5.83436C8.35337 5.51828 8.62315 5.25693 8.94513 5.07553C9.2671 4.89413 9.63038 4.79883 9.99993 4.79883C10.3695 4.79883 10.7328 4.89413 11.0548 5.07553C11.3768 5.25693 11.6466 5.51828 11.838 5.83436L15.292 11.8372C15.4627 12.148 15.5478 12.4986 15.5383 12.8531C15.5288 13.2075 15.4253 13.5531 15.2382 13.8544C15.0511 14.1556 14.7872 14.4017 14.4737 14.5673C14.1602 14.7329 13.8082 14.8122 13.454 14.797Z"
         stroke="var(--text-color)"
-        stroke-width="0.832956"
+        strokeWidth="0.832956"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
@@ -1402,7 +1402,7 @@ export const AlertIcon = () => {
         d="M10.0015 12.1777C10.0679 12.1791 10.1324 12.1997 10.187 12.2373C10.2417 12.275 10.2842 12.328 10.3091 12.3896C10.3339 12.4515 10.3402 12.5197 10.3267 12.585C10.3131 12.6501 10.2802 12.7099 10.2329 12.7568C10.1857 12.8035 10.1254 12.8357 10.0601 12.8486C9.99488 12.8615 9.92713 12.8544 9.86572 12.8291C9.83506 12.8165 9.80623 12.8 9.78076 12.7793L9.71436 12.7061L9.67139 12.6172C9.66175 12.5864 9.65628 12.5541 9.65576 12.5215C9.65579 12.4763 9.66481 12.4314 9.68213 12.3896C9.69961 12.3477 9.72603 12.3093 9.7583 12.2773C9.79045 12.2455 9.82857 12.2203 9.87061 12.2031C9.91219 12.1862 9.95664 12.1776 10.0015 12.1777ZM9.85596 10.998L9.77783 8.09961V8.08887L9.77686 8.07812V8.03125C9.77846 8.01596 9.78187 8.00098 9.78662 7.98633C9.7962 7.95676 9.81179 7.92933 9.83252 7.90625C9.84285 7.89476 9.85427 7.88407 9.8667 7.875L9.90674 7.85156C9.93523 7.83888 9.96642 7.83203 9.99756 7.83203C10.013 7.83203 10.0284 7.83375 10.0435 7.83691L10.0884 7.85156C10.1166 7.86421 10.1418 7.88315 10.1626 7.90625C10.1834 7.92943 10.199 7.95689 10.2085 7.98633C10.2181 8.01596 10.2215 8.04735 10.2183 8.07812L10.2173 8.08887V8.10059L10.145 10.999V11.0059C10.145 11.0441 10.1291 11.0804 10.1021 11.1074C10.0749 11.1345 10.0386 11.1504 10.0005 11.1504C9.96219 11.1504 9.92502 11.1345 9.89795 11.1074C9.87115 11.0804 9.85598 11.0439 9.85596 11.0059V10.998Z"
         fill="black"
         stroke="var(--text-color)"
-        stroke-width="0.555304"
+        strokeWidth="0.555304"
       />
     </svg>
   );
@@ -1419,17 +1419,17 @@ export const NavigationIcon = () => {
       <path
         d="M9.99988 4.58398C7.0132 4.58398 4.5835 7.01369 4.5835 10.0004C4.5835 12.9872 7.0132 15.4173 9.99988 15.4173C12.9867 15.4173 15.4168 12.9872 15.4168 10.0004C15.4168 7.01369 12.9867 4.58398 9.99988 4.58398ZM9.99988 14.7764C7.36664 14.7764 5.22402 12.634 5.22402 10.0004C5.22402 7.36713 7.3666 5.22451 9.99988 5.22451C12.6335 5.22451 14.7759 7.36709 14.7759 10.0004C14.7759 12.634 12.6335 14.7764 9.99988 14.7764Z"
         fill="var(--text-color)"
-        fill-opacity="0.85"
+        fillOpacity="0.85"
       />
       <path
         d="M9.92024 6.74255L8.37659 12.8023C8.36662 12.8418 8.38635 12.8823 8.42392 12.8985C8.46109 12.9147 8.50461 12.9018 8.52685 12.8671L10.0191 10.5407L11.4739 12.8667C11.4894 12.8915 11.5166 12.9055 11.544 12.9055C11.5548 12.9055 11.5655 12.9033 11.5764 12.8991C11.6142 12.8829 11.6341 12.8419 11.6244 12.8023L10.0807 6.74255C10.0619 6.66915 9.93845 6.66915 9.92024 6.74255ZM10.0899 10.3422C10.0747 10.3184 10.0487 10.3039 10.0203 10.3039H10.0201C9.99177 10.3039 9.96531 10.3178 9.95019 10.3416L8.66357 12.3474L10.0001 7.09867L11.3321 12.3286L10.0899 10.3422Z"
         fill="var(--text-color)"
-        fill-opacity="0.85"
+        fillOpacity="0.85"
       />
       <path
         d="M11.5438 12.9321C11.5066 12.9321 11.4708 12.9126 11.4514 12.8814L10.0187 10.59L8.54867 12.8817C8.52069 12.9257 8.46184 12.9438 8.41374 12.9235C8.3643 12.9019 8.33822 12.8484 8.35165 12.7966L9.89512 6.73667C9.90622 6.69241 9.94861 6.66211 10.0003 6.66211C10.0519 6.66211 10.0946 6.69199 10.1059 6.73667L11.649 12.7966C11.6624 12.8488 11.6362 12.9024 11.5865 12.9235C11.5723 12.9293 11.5584 12.9321 11.5438 12.9321ZM10.0189 10.4928L10.0411 10.5279L11.4957 12.8537C11.5097 12.8765 11.5396 12.8863 11.5664 12.8754C11.5917 12.8645 11.6057 12.8365 11.5988 12.8095L10.0553 6.7495C10.0486 6.72325 10.0216 6.71384 10.0002 6.71384C9.9787 6.71384 9.95185 6.72325 9.94515 6.7495L8.4019 12.8095C8.39461 12.8365 8.40842 12.8645 8.4339 12.8754C8.45842 12.8852 8.48985 12.8766 8.50444 12.8537L10.0189 10.4928ZM8.59871 12.4969L9.99995 6.99367L11.3991 12.4844L10.0678 10.3568C10.0465 10.3226 9.99244 10.3244 9.97215 10.3562L8.59871 12.4969Z"
         fill="var(--text-color)"
-        fill-opacity="0.85"
+        fillOpacity="0.85"
       />
     </svg>
   );
@@ -1447,8 +1447,8 @@ export const HangTagIcon = () => {
         <path
           d="M14.7002 5.2998V9.37598L9.5 14.5762L5.42383 10.5L10.624 5.2998H14.7002ZM12 7.2002C11.5581 7.2002 11.2002 7.55806 11.2002 8C11.2002 8.44194 11.5581 8.7998 12 8.7998C12.4419 8.7998 12.7998 8.44194 12.7998 8C12.7998 7.55806 12.4419 7.2002 12 7.2002Z"
           stroke="var(--text-color)"
-          stroke-opacity="0.85"
-          stroke-width="0.6"
+          strokeOpacity="0.85"
+          strokeWidth="0.6"
         />
       </g>
       <defs>
@@ -1471,20 +1471,20 @@ export const DecalInfoIcon = () => {
       <path
         d="M10.0002 15.4173C12.9917 15.4173 15.4168 12.9922 15.4168 10.0007C15.4168 7.00911 12.9917 4.58398 10.0002 4.58398C7.00862 4.58398 4.5835 7.00911 4.5835 10.0007C4.5835 12.9922 7.00862 15.4173 10.0002 15.4173Z"
         stroke="var(--text-color)"
-        stroke-opacity="0.85"
-        stroke-width="0.8125"
+        strokeOpacity="0.85"
+        strokeWidth="0.8125"
       />
       <path
         d="M10 12.709V9.45898"
         stroke="var(--text-color)"
-        stroke-opacity="0.85"
-        stroke-width="0.8125"
+        strokeOpacity="0.85"
+        strokeWidth="0.8125"
         strokeLinecap="round"
       />
       <path
         d="M10.0002 7.29167C10.2993 7.29167 10.5418 7.53418 10.5418 7.83333C10.5418 8.13249 10.2993 8.375 10.0002 8.375C9.70101 8.375 9.4585 8.13249 9.4585 7.83333C9.4585 7.53418 9.70101 7.29167 10.0002 7.29167Z"
         fill="var(--text-color)"
-        fill-opacity="0.85"
+        fillOpacity="0.85"
       />
     </svg>
   );
@@ -1505,13 +1505,13 @@ export const LayeringBottomIcon = () => {
         width="10.9233"
         height="9.75071"
         stroke="var(--text-color)"
-        stroke-width="0.714277"
+        strokeWidth="0.714277"
       />
       <path
         d="M5.49121 0.599609H14.3867C14.9559 0.599609 15.3994 1.01267 15.3994 1.5V9.5C15.3993 9.98728 14.9559 10.3994 14.3867 10.3994H5.49121C4.92207 10.3994 4.47858 9.98728 4.47852 9.5V1.5C4.47852 1.01268 4.92203 0.599609 5.49121 0.599609Z"
         fill="#6F42C1"
         stroke="white"
-        stroke-width="0.2"
+        strokeWidth="0.2"
       />
       <path
         d="M7.87686 6.85212L9.54491 8.3521C9.5966 8.39897 9.65809 8.43616 9.72585 8.46155C9.7936 8.48693 9.86628 8.5 9.93968 8.5C10.0131 8.5 10.0858 8.48693 10.1535 8.46155C10.2213 8.43616 10.2828 8.39897 10.3345 8.3521L12.0025 6.85212C12.1072 6.75797 12.166 6.63027 12.166 6.49713C12.166 6.36398 12.1072 6.23628 12.0025 6.14213C11.8978 6.04798 11.7558 5.99509 11.6077 5.99509C11.4597 5.99509 11.3177 6.04798 11.213 6.14213L10.4957 6.79212V2.99717C10.4957 2.86456 10.4371 2.73739 10.3328 2.64362C10.2286 2.54985 10.0871 2.49718 9.93968 2.49718C9.79222 2.49718 9.65079 2.54985 9.54652 2.64362C9.44224 2.73739 9.38366 2.86456 9.38366 2.99717V6.79212L8.6664 6.14213C8.61472 6.09527 8.55322 6.05807 8.48546 6.03269C8.41771 6.0073 8.34503 5.99423 8.27163 5.99423C8.19823 5.99423 8.12556 6.0073 8.0578 6.03269C7.99005 6.05807 7.92855 6.09527 7.87686 6.14213C7.82475 6.18861 7.78338 6.24391 7.75516 6.30484C7.72693 6.36577 7.71239 6.43112 7.71239 6.49713C7.71239 6.56313 7.72693 6.62848 7.75516 6.68941C7.78338 6.75034 7.82475 6.80564 7.87686 6.85212Z"
@@ -1536,13 +1536,13 @@ export const LayeringTopIcon = () => {
         width="10.9233"
         height="9.75071"
         stroke="var(--text-color)"
-        stroke-width="0.714277"
+        strokeWidth="0.714277"
       />
       <path
         d="M5.49121 0.599609H14.3867C14.9559 0.599609 15.3994 1.01267 15.3994 1.5V9.5C15.3993 9.98728 14.9559 10.3994 14.3867 10.3994H5.49121C4.92207 10.3994 4.47858 9.98728 4.47852 9.5V1.5C4.47852 1.01268 4.92203 0.599609 5.49121 0.599609Z"
         fill="#6F42C1"
         stroke="white"
-        stroke-width="0.2"
+        strokeWidth="0.2"
       />
       <path
         d="M12.002 4.14397L10.334 2.64399C10.2823 2.59713 10.2208 2.55993 10.1531 2.53455C10.0853 2.50916 10.0126 2.49609 9.93923 2.49609C9.86583 2.49609 9.79315 2.50916 9.7254 2.53455C9.65764 2.55993 9.59614 2.59713 9.54446 2.64399L7.87641 4.14397C7.77171 4.23812 7.71289 4.36582 7.71289 4.49897C7.71289 4.63212 7.77171 4.75981 7.87641 4.85396C7.98111 4.94811 8.12311 5.00101 8.27118 5.00101C8.41925 5.00101 8.56125 4.94811 8.66595 4.85396L9.38321 4.20397V7.99892C9.38321 8.13153 9.44179 8.25871 9.54606 8.35247C9.65034 8.44624 9.79176 8.49892 9.93923 8.49892C10.0867 8.49892 10.2281 8.44624 10.3324 8.35247C10.4367 8.25871 10.4952 8.13153 10.4952 7.99892V4.20397L11.2125 4.85396C11.2642 4.90083 11.3257 4.93802 11.3934 4.96341C11.4612 4.98879 11.5339 5.00186 11.6073 5.00186C11.6807 5.00186 11.7533 4.98879 11.8211 4.96341C11.8889 4.93802 11.9504 4.90083 12.002 4.85396C12.0542 4.80748 12.0955 4.75218 12.1238 4.69125C12.152 4.63033 12.1665 4.56497 12.1665 4.49897C12.1665 4.43296 12.152 4.36761 12.1238 4.30668C12.0955 4.24575 12.0542 4.19045 12.002 4.14397Z"
@@ -1629,7 +1629,7 @@ export const ClockThreeIcon = () => {
       <path
         d="M5.5 3.20833V5.5H6.875M9.625 5.5C9.625 7.77819 7.77819 9.625 5.5 9.625C3.22183 9.625 1.375 7.77819 1.375 5.5C1.375 3.22183 3.22183 1.375 5.5 1.375C7.77819 1.375 9.625 3.22183 9.625 5.5Z"
         stroke="#FCFDFD"
-        stroke-width="0.5"
+        strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
@@ -1689,7 +1689,7 @@ export const TargetIcon = () => {
       <path
         d="M9.625 5.5C9.625 7.77815 7.77815 9.625 5.5 9.625M9.625 5.5C9.625 3.22182 7.77815 1.375 5.5 1.375M9.625 5.5H7.975M5.5 9.625C3.22182 9.625 1.375 7.77815 1.375 5.5M5.5 9.625V7.975M5.5 1.375C3.22182 1.375 1.375 3.22182 1.375 5.5M5.5 1.375V3.025M1.375 5.5H3.025"
         stroke="#FCFDFD"
-        stroke-width="0.5"
+        strokeWidth="0.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />

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

@@ -15,270 +15,293 @@ import safety from "../../../assets/image/categories/safety.png";
 import feneration from "../../../assets/image/categories/feneration.png";
 import decal from "../../../assets/image/categories/decal.png";
 import SkeletonUI from "../../templates/SkeletonUI";
-import { AlertIcon, DecalInfoIcon, HangTagIcon, NavigationIcon } from "../../icons/ExportCommonIcons";
+import {
+  AlertIcon,
+  DecalInfoIcon,
+  HangTagIcon,
+  NavigationIcon,
+} from "../../icons/ExportCommonIcons";
 // -------------------------------------
 
 interface AssetProp {
-    filename: string;
-    thumbnail?: string;
-    category: string;
-    description?: string;
-    tags: string;
-    url?: string;
-    uploadDate?: number;
-    isArchieve?: boolean;
-    animated?: boolean;
-    price?: number;
-    CreatedBy?: string;
+  filename: string;
+  thumbnail?: string;
+  category: string;
+  description?: string;
+  tags: string;
+  url?: string;
+  uploadDate?: number;
+  isArchieve?: boolean;
+  animated?: boolean;
+  price?: number;
+  CreatedBy?: string;
 }
 interface CategoryListProp {
-    assetImage?: string;
-    assetName?: string;
-    categoryImage: string;
-    category: string;
+  assetImage?: string;
+  assetName?: string;
+  categoryImage: string;
+  category: string;
 }
 const Assets: React.FC = () => {
-    const { setSelectedItem } = useSelectedItem();
-    const [searchValue, setSearchValue] = useState<string>("");
-    const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
-    const [categoryAssets, setCategoryAssets] = useState<AssetProp[]>([]);
-    const [filtereredAssets, setFiltereredAssets] = useState<AssetProp[]>([]);
-    const [categoryList, setCategoryList] = useState<CategoryListProp[]>([]);
-    const [isLoading, setisLoading] = useState<boolean>(false); // Loading state for assets
+  const { setSelectedItem } = useSelectedItem();
+  const [searchValue, setSearchValue] = useState<string>("");
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+  const [categoryAssets, setCategoryAssets] = useState<AssetProp[]>([]);
+  const [filtereredAssets, setFiltereredAssets] = useState<AssetProp[]>([]);
+  const [categoryList, setCategoryList] = useState<CategoryListProp[]>([]);
+  const [isLoading, setisLoading] = useState<boolean>(false); // Loading state for assets
 
-    const handleSearchChange = (value: string) => {
-        const searchTerm = value.toLowerCase();
-        setSearchValue(value);
-        if (searchTerm.trim() === "" && !selectedCategory) {
-            setCategoryAssets([]);
-            return;
-        }
-        const filteredModels = filtereredAssets?.filter((model) => {
-            if (!model?.tags || !model?.filename || !model?.category) return false;
-            if (searchTerm.startsWith(":") && searchTerm.length > 1) {
-                const tagSearchTerm = searchTerm.slice(1);
-                return model.tags.toLowerCase().includes(tagSearchTerm);
-            } else if (selectedCategory) {
-                return (
-                    model.category
-                        .toLowerCase()
-                        .includes(selectedCategory.toLowerCase()) &&
-                    model.filename.toLowerCase().includes(searchTerm)
-                );
-            } else {
-                return model.filename.toLowerCase().includes(searchTerm);
-            }
-        });
+  const handleSearchChange = (value: string) => {
+    const searchTerm = value.toLowerCase();
+    setSearchValue(value);
+    if (searchTerm.trim() === "" && !selectedCategory) {
+      setCategoryAssets([]);
+      return;
+    }
+    const filteredModels = filtereredAssets?.filter((model) => {
+      if (!model?.tags || !model?.filename || !model?.category) return false;
+      if (searchTerm.startsWith(":") && searchTerm.length > 1) {
+        const tagSearchTerm = searchTerm.slice(1);
+        return model.tags.toLowerCase().includes(tagSearchTerm);
+      } else if (selectedCategory) {
+        return (
+          model.category
+            .toLowerCase()
+            .includes(selectedCategory.toLowerCase()) &&
+          model.filename.toLowerCase().includes(searchTerm)
+        );
+      } else {
+        return model.filename.toLowerCase().includes(searchTerm);
+      }
+    });
 
-        setCategoryAssets(filteredModels);
+    setCategoryAssets(filteredModels);
+  };
+
+  useEffect(() => {
+    const filteredAssets = async () => {
+      try {
+        const filt = await fetchAssets();
+        setFiltereredAssets(filt);
+      } catch {
+        echo.error("Filter asset not found");
+      }
     };
+    filteredAssets();
+  }, [categoryAssets]);
 
-    useEffect(() => {
-        const filteredAssets = async () => {
-            try {
-                const filt = await fetchAssets();
-                setFiltereredAssets(filt);
-            } catch {
-                echo.error("Filter asset not found");
+  useEffect(() => {
+    setCategoryList([
+      { category: "Fenestration", categoryImage: feneration },
+      { category: "Decals", categoryImage: decal },
+      { category: "Vehicles", categoryImage: vehicle },
+      { category: "Workstation", categoryImage: workStation },
+      { category: "Machines", categoryImage: machines },
+      { category: "Workers", categoryImage: worker },
+      { category: "Storage", categoryImage: storage },
+      { category: "Safety", categoryImage: safety },
+      { category: "Office", categoryImage: office },
+    ]);
+  }, []);
+
+  const fetchCategoryAssets = async (asset: any) => {
+    setisLoading(true);
+    setSelectedCategory(asset);
+    try {
+      const res = await getCategoryAsset(asset);
+      setCategoryAssets(res);
+      setFiltereredAssets(res);
+      setisLoading(false); // End loading
+      // eslint-disable-next-line
+    } catch (error) {
+      echo.error("failed to fetch assets");
+      setisLoading(false);
+    }
+  };
+
+  const activeSubcategories = [
+    { name: "Safety", icon: <AlertIcon /> },
+    { name: "Navigation", icon: <NavigationIcon /> },
+    { name: "Branding", icon: <HangTagIcon /> },
+    { name: "Informational", icon: <DecalInfoIcon /> },
+  ];
+
+  const { selectedSubCategory, setSelectedSubCategory } = useDecalStore();
+  return (
+    <div className="assets-container-main">
+      <Search onChange={handleSearchChange} />
+      <div className="assets-list-section">
+        <section>
+          {(() => {
+            if (isLoading) {
+              return <SkeletonUI type="asset" />; // Show skeleton when loading
             }
-        };
-        filteredAssets();
-    }, [categoryAssets]);
+            if (searchValue) {
+              return (
+                <div className="assets-result">
+                  <div className="assets-wrapper">
+                    <div className="searched-content">
+                      <p>Results for {searchValue}</p>
+                    </div>
+                    <div className="assets-container">
+                      {categoryAssets?.map((asset: any, index: number) => (
+                        <div
+                          key={`${index}-${asset.filename}`}
+                          className="assets"
+                          id={asset.filename}
+                          title={asset.filename}
+                        >
+                          <img
+                            src={asset?.thumbnail}
+                            alt={asset.filename}
+                            className="asset-image"
+                            onPointerDown={() => {
+                              setSelectedItem({
+                                name: asset.filename,
+                                id: asset.AssetID,
+                                type:
+                                  asset.type === "undefined"
+                                    ? undefined
+                                    : asset.type,
+                              });
+                            }}
+                          />
 
-    useEffect(() => {
-        setCategoryList([
-            { category: "Fenestration", categoryImage: feneration },
-            { category: "Decals", categoryImage: decal },
-            { category: "Vehicles", categoryImage: vehicle },
-            { category: "Workstation", categoryImage: workStation },
-            { category: "Machines", categoryImage: machines },
-            { category: "Workers", categoryImage: worker },
-            { category: "Storage", categoryImage: storage },
-            { category: "Safety", categoryImage: safety },
-            { category: "Office", categoryImage: office },
-        ]);
-    }, []);
+                          <div className="asset-name">
+                            {asset.filename
+                              .split("_")
+                              .map(
+                                (word: any) =>
+                                  word.charAt(0).toUpperCase() + word.slice(1)
+                              )
+                              .join(" ")}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              );
+            }
 
-    const fetchCategoryAssets = async (asset: any) => {
-        setisLoading(true);
-        setSelectedCategory(asset);
-        try {
-            const res = await getCategoryAsset(asset);
-            setCategoryAssets(res);
-            setFiltereredAssets(res);
-            setisLoading(false); // End loading
-            // eslint-disable-next-line
-        } catch (error) {
-            echo.error("failed to fetch assets");
-            setisLoading(false);
-        }
-    };
+            if (selectedCategory) {
+              return (
+                <div className="assets-wrapper">
+                  <h2>
+                    {selectedCategory}
+                    <button
+                      className="back-button"
+                      id="asset-backButtom"
+                      onClick={() => {
+                        setSelectedCategory(null);
+                        setSelectedSubCategory(null);
+                        setCategoryAssets([]);
+                      }}
+                    >
+                      ← Back
+                    </button>
+                  </h2>
 
+                  {selectedCategory === "Decals" && (
+                    <>
+                      <div className="catogory-asset-filter">
+                        {activeSubcategories.map((cat, index) => (
+                          <div
+                            key={index}
+                            className={`catogory-asset-filter-wrapper ${
+                              selectedSubCategory === cat.name ? "active" : ""
+                            }`}
+                            onClick={() => setSelectedSubCategory(cat.name)}
+                          >
+                            <div className="sub-catagory">{cat.icon}</div>
+                            <div className="sub-catagory">{cat.name}</div>
+                          </div>
+                        ))}
+                      </div>
+                    </>
+                  )}
+                  <div className="assets-container">
+                    {categoryAssets?.map((asset: any, index: number) => (
+                      <div
+                        key={`${index}-${asset}`}
+                        className="assets"
+                        id={asset.filename}
+                        title={asset.filename}
+                      >
+                        <img
+                          src={asset?.thumbnail}
+                          alt={asset.filename}
+                          className="asset-image"
+                          onPointerDown={() => {
+                            setSelectedItem({
+                              name: asset.filename,
+                              id: asset.AssetID,
+                              type:
+                                asset.type === "undefined"
+                                  ? undefined
+                                  : asset.type,
+                              category: asset.category,
+                              subType: asset.subType,
+                            });
+                          }}
+                        />
+                        <div className="asset-name">
+                          {asset.filename
+                            .split("_")
+                            .map(
+                              (word: any) =>
+                                word.charAt(0).toUpperCase() + word.slice(1)
+                            )
+                            .join(" ")}
+                        </div>
+                      </div>
+                    ))}
+                    {categoryAssets.length === 0 && (
+                      <div className="no-asset">
+                        🚧 The asset shelf is empty. We're working on filling it
+                        up!
+                      </div>
+                    )}
+                  </div>
+                </div>
+              );
+            }
 
-    const activeSubcategories = [
-        { name: "Safety", icon: <AlertIcon /> },
-        { name: "Navigation", icon: <NavigationIcon /> },
-        { name: "Branding", icon: <HangTagIcon /> },
-        { name: "Informational", icon: <DecalInfoIcon /> }
-    ]
-
-
-    const { selectedSubCategory, setSelectedSubCategory } = useDecalStore();
-    return (
-        <div className="assets-container-main">
-            <Search onChange={handleSearchChange} />
-            <div className="assets-list-section">
-                <section>
-                    {(() => {
-                        if (isLoading) {
-                            return <SkeletonUI type="asset" />; // Show skeleton when loading
-                        }
-                        if (searchValue) {
-                            return (
-                                <div className="assets-result">
-                                    <div className="assets-wrapper">
-                                        <div className="searched-content">
-                                            <p>Results for {searchValue}</p>
-                                        </div>
-                                        <div className="assets-container">
-                                            {categoryAssets?.map((asset: any, index: number) => (
-                                                <div
-                                                    key={`${index}-${asset.filename}`}
-                                                    className="assets"
-                                                    id={asset.filename}
-                                                    title={asset.filename}
-                                                >
-                                                    <img
-                                                        src={asset?.thumbnail}
-                                                        alt={asset.filename}
-                                                        className="asset-image"
-                                                        onPointerDown={() => {
-                                                            setSelectedItem({
-                                                                name: asset.filename,
-                                                                id: asset.AssetID,
-                                                                type: asset.type === "undefined" ? undefined : asset.type
-                                                            });
-                                                        }}
-                                                    />
-
-                                                    <div className="asset-name">
-                                                        {asset.filename
-                                                            .split("_")
-                                                            .map(
-                                                                (word: any) =>
-                                                                    word.charAt(0).toUpperCase() + word.slice(1)
-                                                            )
-                                                            .join(" ")}
-                                                    </div>
-                                                </div>
-                                            ))}
-                                        </div>
-                                    </div>
-                                </div>
-                            );
-                        }
-
-                        if (selectedCategory) {
-                            return (
-                                <div className="assets-wrapper">
-                                    <h2>
-                                        {selectedCategory}
-                                        <button
-                                            className="back-button"
-                                            id="asset-backButtom"
-                                            onClick={() => {
-                                                setSelectedCategory(null);
-                                                setCategoryAssets([]);
-                                            }}
-                                        >
-                                            ← Back
-                                        </button>
-                                    </h2>
-
-                                    {selectedCategory === "Decals" &&
-                                        <>
-                                            <div className="catogory-asset-filter">
-                                                {activeSubcategories.map((cat, index) => (
-                                                    <div className={`catogory-asset-filter-wrapper ${selectedSubCategory === cat.name ? "active" : ""}`} onClick={() => setSelectedSubCategory(cat.name)}>
-                                                        <div className="sub-catagory">{cat.icon}</div>
-                                                        <div className="sub-catagory">{cat.name}</div>
-                                                    </div>
-                                                ))}
-                                            </div>
-                                        </>
-                                    }
-                                    <div className="assets-container">
-                                        {categoryAssets?.map((asset: any, index: number) => (
-                                            <div
-                                                key={`${index}-${asset}`}
-                                                className="assets"
-                                                id={asset.filename}
-                                                title={asset.filename}
-                                            >
-                                                <img
-                                                    src={asset?.thumbnail}
-                                                    alt={asset.filename}
-                                                    className="asset-image"
-                                                    onPointerDown={() => {
-                                                        setSelectedItem({
-                                                            name: asset.filename,
-                                                            id: asset.AssetID,
-                                                            type: asset.type === "undefined" ? undefined : asset.type,
-                                                            category: asset.category,
-                                                            subType: asset.subType
-                                                        });
-                                                    }}
-                                                />
-                                                <div className="asset-name">
-                                                    {asset.filename.split("_").map((word: any) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ")}
-                                                </div>
-                                            </div>
-                                        ))}
-                                        {categoryAssets.length === 0 && (
-                                            <div className="no-asset">
-                                                🚧 The asset shelf is empty. We're working on filling it up!
-                                            </div>
-                                        )}
-                                    </div>
-                                </div>
-                            );
-                        }
-
-                        return (
-                            <div className="assets-wrapper">
-                                <h2>Categories</h2>
-                                <div className="categories-container">
-                                    {Array.from(
-                                        new Set(categoryList.map((asset) => asset.category))
-                                    ).map((category, index) => {
-                                        const categoryInfo = categoryList.find(
-                                            (asset) => asset.category === category
-                                        );
-                                        return (
-                                            <div
-                                                key={`${index}-${category}`}
-                                                className="category"
-                                                id={category}
-                                                onClick={() => fetchCategoryAssets(category)}
-                                            >
-                                                <img
-                                                    src={categoryInfo?.categoryImage ?? ""}
-                                                    alt={category}
-                                                    className="category-image"
-                                                    draggable={false}
-                                                />
-                                                <div className="category-name">{category}</div>
-                                            </div>
-                                        );
-                                    })}
-                                </div>
-                            </div>
-                        );
-                    })()}
-                </section>
-            </div>
-        </div>
-    );
+            return (
+              <div className="assets-wrapper">
+                <h2>Categories</h2>
+                <div className="categories-container">
+                  {Array.from(
+                    new Set(categoryList.map((asset) => asset.category))
+                  ).map((category, index) => {
+                    const categoryInfo = categoryList.find(
+                      (asset) => asset.category === category
+                    );
+                    return (
+                      <div
+                        key={`${index}-${category}`}
+                        className="category"
+                        id={category}
+                        onClick={() => fetchCategoryAssets(category)}
+                      >
+                        <img
+                          src={categoryInfo?.categoryImage ?? ""}
+                          alt={category}
+                          className="category-image"
+                          draggable={false}
+                        />
+                        <div className="category-name">{category}</div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          })()}
+        </section>
+      </div>
+    </div>
+  );
 };
 
 export default Assets;

app/src/components/layout/sidebarRight/SideBarRight.tsx

@@ -1,26 +1,28 @@
 import React, { useEffect, useState } from "react";
 import Header from "./Header";
-import useModuleStore, { useSubModuleStore } from "../../../store/useModuleStore";
+import useModuleStore, {
+  useSubModuleStore,
+} from "../../../store/useModuleStore";
 import {
-    AnalysisIcon,
-    FilePackageIcon,
-    MechanicsIcon,
-    PropertiesIcon,
-    SimulationIcon,
+  AnalysisIcon,
+  FilePackageIcon,
+  MechanicsIcon,
+  PropertiesIcon,
+  SimulationIcon,
 } from "../../icons/SimulationIcons";
 import { useToggleStore } from "../../../store/useUIToggleStore";
 import Visualization from "./visualization/Visualization";
 import Analysis from "./analysis/Analysis";
 import Simulations from "./simulation/Simulations";
 import useVersionHistoryVisibleStore, {
-    useDecalStore,
-    useSaveVersion,
-    useSelectedFloorItem,
-    useToolMode,
+  useDecalStore,
+  useSaveVersion,
+  useSelectedFloorItem,
+  useToolMode,
 } from "../../../store/builder/store";
 import {
-    useSelectedEventData,
-    useSelectedEventSphere,
+  useSelectedEventData,
+  useSelectedEventSphere,
 } from "../../../store/simulation/useSimulationStore";
 import { useBuilderStore } from "../../../store/builder/useBuilderStore";
 import GlobalProperties from "./properties/GlobalProperties";
@@ -33,277 +35,319 @@ import WallProperties from "./properties/WallProperties";
 import FloorProperties from "./properties/FloorProperties";
 import SelectedWallProperties from "./properties/SelectedWallProperties";
 import SelectedFloorProperties from "./properties/SelectedFloorProperties";
-import DecalTransformation from "./decals/DecalTransformation";
 import ResourceManagement from "./resourceManagement/ResourceManagement";
+import DecalProperties from "./properties/DecalProperties";
 
 type DisplayComponent =
-    | "versionHistory"
-    | "globalProperties"
-    | "aisleProperties"
-    | "wallProperties"
-    | "floorProperties"
-    | "assetProperties"
-    | "selectedWallProperties"
-    | "selectedFloorProperties"
-    | "zoneProperties"
-    | "simulations"
-    | "mechanics"
-    | "analysis"
-    | "visualization"
-    | "decals"
-    | "resourceManagement"
-    | "none";
+  | "versionHistory"
+  | "globalProperties"
+  | "aisleProperties"
+  | "wallProperties"
+  | "floorProperties"
+  | "assetProperties"
+  | "selectedWallProperties"
+  | "selectedFloorProperties"
+  | "zoneProperties"
+  | "simulations"
+  | "mechanics"
+  | "analysis"
+  | "visualization"
+  | "selectedDecalProperties"
+  | "resourceManagement"
+  | "none";
 
 const SideBarRight: React.FC = () => {
-    const { activeModule } = useModuleStore();
-    const { toggleUIRight } = useToggleStore();
-    const { toolMode } = useToolMode();
-    const { subModule, setSubModule } = useSubModuleStore();
-    const { selectedFloorItem } = useSelectedFloorItem();
-    const { selectedWall, selectedFloor, selectedAisle } = useBuilderStore();
-    const { selectedEventData } = useSelectedEventData();
-    const { selectedEventSphere } = useSelectedEventSphere();
-    const { viewVersionHistory, setVersionHistoryVisible } = useVersionHistoryVisibleStore();
-    const { isVersionSaved } = useSaveVersion();
-    const { selectedSubCategory } = useDecalStore();
+  const { activeModule } = useModuleStore();
+  const { toggleUIRight } = useToggleStore();
+  const { toolMode } = useToolMode();
+  const { subModule, setSubModule } = useSubModuleStore();
+  const { selectedFloorItem } = useSelectedFloorItem();
+  const { selectedWall, selectedFloor, selectedAisle } = useBuilderStore();
+  const { selectedEventData } = useSelectedEventData();
+  const { selectedEventSphere } = useSelectedEventSphere();
+  const { viewVersionHistory, setVersionHistoryVisible } =
+    useVersionHistoryVisibleStore();
+  const { isVersionSaved } = useSaveVersion();
+  const { selectedSubCategory } = useDecalStore();
 
-    const [displayComponent, setDisplayComponent] = useState<DisplayComponent>("none");
+  const [displayComponent, setDisplayComponent] =
+    useState<DisplayComponent>("none");
 
-    useEffect(() => {
-        if (activeModule !== "simulation") setSubModule("properties");
-        if (activeModule === "simulation") setSubModule("simulations");
-    }, [activeModule, setSubModule]);
+  useEffect(() => {
+    if (activeModule !== "simulation") setSubModule("properties");
+    if (activeModule === "simulation") setSubModule("simulations");
+  }, [activeModule, setSubModule]);
 
-    useEffect(() => {
-        if (activeModule !== "mechanics" && selectedEventData && selectedEventSphere) {
-            setSubModule("mechanics");
-        } else if (!selectedEventData && !selectedEventSphere) {
-            if (activeModule === "simulation") {
-                setSubModule("simulations");
-            }
+  useEffect(() => {
+    if (
+      activeModule !== "mechanics" &&
+      selectedEventData &&
+      selectedEventSphere
+    ) {
+      setSubModule("mechanics");
+    } else if (!selectedEventData && !selectedEventSphere) {
+      if (activeModule === "simulation") {
+        setSubModule("simulations");
+      }
+    }
+    if (activeModule !== "simulation") {
+      setSubModule("properties");
+    }
+  }, [activeModule, selectedEventData, selectedEventSphere, setSubModule]);
+
+  useEffect(() => {
+    if (activeModule === "visualization") {
+      setDisplayComponent("visualization");
+      return;
+    }
+
+    if (!isVersionSaved && activeModule === "simulation") {
+      if (subModule === "simulations") {
+        setDisplayComponent("simulations");
+        return;
+      }
+      if (subModule === "mechanics") {
+        setDisplayComponent("mechanics");
+        return;
+      }
+      if (subModule === "analysis") {
+        setDisplayComponent("analysis");
+        return;
+      }
+      if (subModule === "resourceManagement") {
+        setDisplayComponent("resourceManagement");
+        return;
+      }
+    }
+
+    if (activeModule === "simulation" || activeModule === "builder") {
+      if (subModule === "resourceManagement") {
+        setDisplayComponent("resourceManagement");
+        return;
+      }
+    }
+
+    if (subModule === "properties" && activeModule !== "visualization") {
+      if (selectedFloorItem) {
+        setDisplayComponent("assetProperties");
+        return;
+      }
+      if (
+        !selectedFloorItem &&
+        !selectedFloor &&
+        !selectedAisle &&
+        selectedWall
+      ) {
+        setDisplayComponent("selectedWallProperties");
+        return;
+      }
+      if (
+        !selectedFloorItem &&
+        !selectedWall &&
+        !selectedAisle &&
+        selectedFloor
+      ) {
+        setDisplayComponent("selectedFloorProperties");
+        return;
+      }
+      if (viewVersionHistory) {
+        setDisplayComponent("versionHistory");
+        return;
+      }
+      if (selectedSubCategory) {
+        setDisplayComponent("selectedDecalProperties");
+        return;
+      }
+      if (
+        !selectedFloorItem &&
+        !selectedFloor &&
+        !selectedWall &&
+        !selectedSubCategory
+      ) {
+        if (toolMode === "Aisle") {
+          setDisplayComponent("aisleProperties");
+          return;
         }
-        if (activeModule !== "simulation") {
-            setSubModule("properties");
+        if (toolMode === "Wall") {
+          setDisplayComponent("wallProperties");
+          return;
         }
-    }, [activeModule, selectedEventData, selectedEventSphere, setSubModule]);
-
-    useEffect(() => {
-
-        if (activeModule === "visualization") {
-            setDisplayComponent("visualization");
-            return;
+        if (toolMode === "Floor") {
+          setDisplayComponent("floorProperties");
+          return;
         }
+        setDisplayComponent("globalProperties");
+        return;
+      }
+    }
 
-        if (!isVersionSaved && activeModule === "simulation") {
-            if (subModule === "simulations") {
-                setDisplayComponent("simulations");
-                return;
-            }
-            if (subModule === "mechanics") {
-                setDisplayComponent("mechanics");
-                return;
-            }
-            if (subModule === "analysis") {
-                setDisplayComponent("analysis");
-                return;
-            }
-            if (subModule === "resourceManagement") {
-                setDisplayComponent("resourceManagement");
-                return;
-            }
-        }
+    if (
+      subModule === "zoneProperties" &&
+      (activeModule === "builder" || activeModule === "simulation")
+    ) {
+      setDisplayComponent("zoneProperties");
+      return;
+    }
 
+    setDisplayComponent("none");
+  }, [
+    viewVersionHistory,
+    activeModule,
+    subModule,
+    isVersionSaved,
+    selectedFloorItem,
+    selectedWall,
+    selectedFloor,
+    selectedAisle,
+    toolMode,
+    selectedSubCategory,
+  ]);
 
+  const renderComponent = () => {
+    switch (displayComponent) {
+      case "versionHistory":
+        return <VersionHistory />;
+      case "globalProperties":
+        return <GlobalProperties />;
+      case "aisleProperties":
+        return <AisleProperties />;
+      case "wallProperties":
+        return <WallProperties />;
+      case "floorProperties":
+        return <FloorProperties />;
+      case "assetProperties":
+        return <AssetProperties />;
+      case "selectedWallProperties":
+        return <SelectedWallProperties />;
+      case "selectedFloorProperties":
+        return <SelectedFloorProperties />;
+      case "zoneProperties":
+        return <ZoneProperties />;
+      case "simulations":
+        return <Simulations />;
+      case "mechanics":
+        return <EventProperties />;
+      case "analysis":
+        return <Analysis />;
+      case "visualization":
+        return <Visualization />;
+      case "selectedDecalProperties":
+        return <DecalProperties />;
+      case "resourceManagement":
+        return <ResourceManagement />;
+      default:
+        return null;
+    }
+  };
 
-        if (activeModule === "simulation" || activeModule === "builder") {
-            if (subModule === "resourceManagement") {
-                setDisplayComponent("resourceManagement");
-                return;
-            }
-        }
-
-        if (subModule === "properties" && activeModule !== "visualization") {
-            if (selectedFloorItem) {
-                setDisplayComponent("assetProperties");
-                return;
-            }
-            if (!selectedFloorItem && !selectedFloor && !selectedAisle && selectedWall) {
-                setDisplayComponent("selectedWallProperties");
-                return;
-            }
-            if (!selectedFloorItem && !selectedWall && !selectedAisle && selectedFloor) {
-                setDisplayComponent("selectedFloorProperties");
-                return;
-            }
-            if (viewVersionHistory) {
-                setDisplayComponent("versionHistory");
-                return;
-            }
-            if (selectedSubCategory) {
-                setDisplayComponent("decals");
-                return;
-            }
-            if (!selectedFloorItem && !selectedFloor && !selectedWall && !selectedSubCategory) {
-
-
-                if (toolMode === "Aisle") {
-                    setDisplayComponent("aisleProperties");
-                    return;
-                }
-                if (toolMode === "Wall") {
-                    setDisplayComponent("wallProperties");
-                    return;
-                }
-                if (toolMode === "Floor") {
-                    setDisplayComponent("floorProperties");
-                    return;
-                }
-                setDisplayComponent("globalProperties");
-                return;
-            }
-
-        }
-
-        if (subModule === "zoneProperties" && (activeModule === "builder" || activeModule === "simulation")) {
-            setDisplayComponent("zoneProperties");
-            return;
-        }
-
-        setDisplayComponent("none");
-    }, [viewVersionHistory, activeModule, subModule, isVersionSaved, selectedFloorItem, selectedWall, selectedFloor, selectedAisle, toolMode, selectedSubCategory]);
-
-    const renderComponent = () => {
-
-        switch (displayComponent) {
-            case "versionHistory":
-                return <VersionHistory />;
-            case "globalProperties":
-                return <GlobalProperties />;
-            case "aisleProperties":
-                return <AisleProperties />;
-            case "wallProperties":
-                return <WallProperties />;
-            case "floorProperties":
-                return <FloorProperties />;
-            case "assetProperties":
-                return <AssetProperties />;
-            case "selectedWallProperties":
-                return <SelectedWallProperties />;
-            case "selectedFloorProperties":
-                return <SelectedFloorProperties />;
-            case "zoneProperties":
-                return <ZoneProperties />;
-            case "simulations":
-                return <Simulations />;
-            case "mechanics":
-                return <EventProperties />;
-            case "analysis":
-                return <Analysis />;
-            case "visualization":
-                return <Visualization />;
-            case "decals":
-                return <DecalTransformation />;
-            case "resourceManagement":
-                return <ResourceManagement />;
-            default:
-                return null;
-        }
-    };
-
-    return (
-        <div
-            className={`sidebar-right-wrapper ${toggleUIRight && (!isVersionSaved || activeModule !== "simulation") ? "open" : "closed"
-                }`}
-        >
-            <Header />
-            {toggleUIRight && (
+  return (
+    <div
+      className={`sidebar-right-wrapper ${
+        toggleUIRight && (!isVersionSaved || activeModule !== "simulation")
+          ? "open"
+          : "closed"
+      }`}
+    >
+      <Header />
+      {toggleUIRight && (
+        <>
+          {(!isVersionSaved || activeModule !== "simulation") && (
+            <div className="sidebar-actions-container">
+              {activeModule !== "simulation" && (
                 <>
-                    {(!isVersionSaved || activeModule !== "simulation") && (
-                        <div className="sidebar-actions-container">
-
-                            {activeModule !== "simulation" && (
-                                <>
-                                    <button
-                                        id="sidebar-action-list-properties"
-                                        className={`sidebar-action-list ${subModule === "properties" ? "active" : ""}`}
-                                        onClick={() => {
-                                            setSubModule("properties");
-                                            setVersionHistoryVisible(false);
-                                        }}
-                                    >
-                                        <div className="tooltip">properties</div>
-                                        <PropertiesIcon isActive={subModule === "properties"} />
-                                    </button>
-                                </>
-                            )}
-
-                            {activeModule === "simulation" && (
-                                <>
-                                    <button
-                                        id="sidebar-action-list-simulation"
-                                        className={`sidebar-action-list ${subModule === "simulations" ? "active" : ""}`}
-                                        onClick={() => {
-                                            setSubModule("simulations");
-                                            setVersionHistoryVisible(false);
-                                        }}
-                                    >
-                                        <div className="tooltip">simulations</div>
-                                        <SimulationIcon isActive={subModule === "simulations"} />
-                                    </button>
-                                    <button
-                                        id="sidebar-action-list-mechanics"
-                                        className={`sidebar-action-list ${subModule === "mechanics" ? "active" : ""}`}
-                                        onClick={() => {
-                                            setSubModule("mechanics");
-                                            setVersionHistoryVisible(false);
-                                        }}
-                                    >
-                                        <div className="tooltip">mechanics</div>
-                                        <MechanicsIcon isActive={subModule === "mechanics"} />
-                                    </button>
-                                    <button
-                                        id="sidebar-action-list-analysis"
-                                        className={`sidebar-action-list ${subModule === "analysis" ? "active" : ""}`}
-                                        onClick={() => {
-                                            setSubModule("analysis");
-                                            setVersionHistoryVisible(false);
-                                        }}
-                                    >
-                                        <div className="tooltip">analysis</div>
-                                        <AnalysisIcon isActive={subModule === "analysis"} />
-                                    </button>
-                                </>
-                            )}
-
-                            {(activeModule === "builder" || activeModule === "simulation") && (
-                                <button
-                                    id="sidebar-action-list-properties"
-                                    className={`sidebar-action-list ${subModule === "resourceManagement" ? "active" : ""}`}
-                                    onClick={() => {
-                                        setSubModule("resourceManagement");
-                                        setVersionHistoryVisible(false);
-                                    }}
-                                >
-                                    <div className="tooltip">Resource Management</div>
-                                    <FilePackageIcon isActive={subModule === "resourceManagement"} />
-                                </button>
-                            )}
-
-                        </div>
-                    )}
-
-                    {displayComponent !== "none" && (
-                        <div className="sidebar-right-container">
-                            <div className="sidebar-right-content-container">
-                                {renderComponent()}
-                                {/* <ResourceManagement /> */}
-                            </div>
-                        </div>
-                    )}
+                  <button
+                    id="sidebar-action-list-properties"
+                    className={`sidebar-action-list ${
+                      subModule === "properties" ? "active" : ""
+                    }`}
+                    onClick={() => {
+                      setSubModule("properties");
+                      setVersionHistoryVisible(false);
+                    }}
+                  >
+                    <div className="tooltip">properties</div>
+                    <PropertiesIcon isActive={subModule === "properties"} />
+                  </button>
                 </>
-            )}
-        </div>
-    );
+              )}
+
+              {activeModule === "simulation" && (
+                <>
+                  <button
+                    id="sidebar-action-list-simulation"
+                    className={`sidebar-action-list ${
+                      subModule === "simulations" ? "active" : ""
+                    }`}
+                    onClick={() => {
+                      setSubModule("simulations");
+                      setVersionHistoryVisible(false);
+                    }}
+                  >
+                    <div className="tooltip">simulations</div>
+                    <SimulationIcon isActive={subModule === "simulations"} />
+                  </button>
+                  <button
+                    id="sidebar-action-list-mechanics"
+                    className={`sidebar-action-list ${
+                      subModule === "mechanics" ? "active" : ""
+                    }`}
+                    onClick={() => {
+                      setSubModule("mechanics");
+                      setVersionHistoryVisible(false);
+                    }}
+                  >
+                    <div className="tooltip">mechanics</div>
+                    <MechanicsIcon isActive={subModule === "mechanics"} />
+                  </button>
+                  <button
+                    id="sidebar-action-list-analysis"
+                    className={`sidebar-action-list ${
+                      subModule === "analysis" ? "active" : ""
+                    }`}
+                    onClick={() => {
+                      setSubModule("analysis");
+                      setVersionHistoryVisible(false);
+                    }}
+                  >
+                    <div className="tooltip">analysis</div>
+                    <AnalysisIcon isActive={subModule === "analysis"} />
+                  </button>
+                </>
+              )}
+
+              {(activeModule === "builder" ||
+                activeModule === "simulation") && (
+                <button
+                  id="sidebar-action-list-properties"
+                  className={`sidebar-action-list ${
+                    subModule === "resourceManagement" ? "active" : ""
+                  }`}
+                  onClick={() => {
+                    setSubModule("resourceManagement");
+                    setVersionHistoryVisible(false);
+                  }}
+                >
+                  <div className="tooltip">Resource Management</div>
+                  <FilePackageIcon
+                    isActive={subModule === "resourceManagement"}
+                  />
+                </button>
+              )}
+            </div>
+          )}
+
+          {displayComponent !== "none" && (
+            <div className="sidebar-right-container">
+              <div className="sidebar-right-content-container">
+                {renderComponent()}
+                {/* <ResourceManagement /> */}
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
 };
 
-export default SideBarRight;
+export default SideBarRight;

app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx

@@ -1,6 +1,4 @@
 import React from "react";
-import { EyeDroperIcon } from "../../../icons/ExportCommonIcons";
-// import { useThree } from "@react-three/fiber";
 
 interface PositionInputProps {
   onChange: (value: [number, number, number]) => void; // Callback for value change
@@ -24,7 +22,7 @@ const Vector3Input: React.FC<PositionInputProps> = ({
     if (!value) return;
     const updatedValue = [...value] as [number, number, number];
     updatedValue[index] = parseFloat(newValue) || 0;
-    // console.log('updatedValue: ', updatedValue);
+    console.log('updatedValue: ', updatedValue);
     onChange(updatedValue);
   };
 
@@ -42,8 +40,8 @@ const Vector3Input: React.FC<PositionInputProps> = ({
             <input
               className="custom-input-field"
               type={type}
-              value={value?.[i] !== undefined ? value[i].toFixed(2) : ""}
-              // onChange={(e) => handleChange(i, e.target.value)}
+              value={value?.[i] !== undefined ? value[i].toFixed(1) : ""}
+              onChange={(e) => handleChange(i, e.target.value)}
               placeholder={placeholder}
               disabled={disabled}
             />

app/src/components/layout/sidebarRight/decals/DecalTransformation.tsx

@@ -1,59 +0,0 @@
-import React, { useState } from 'react';
-import RotationInput from '../customInput/RotationInput';
-import PositionInput from '../customInput/PositionInputs';
-import { LockIcon } from '../../../icons/RealTimeVisulationIcons';
-import { LayeringBottomIcon, LayeringTopIcon, ValueUpdateIcon } from '../../../icons/ExportCommonIcons';
-import decalImage from "../../../../assets/image/sampleDecal.png"
-const DecalTransformation = () => {
-
-
-
-    return (
-        <div className='decal-transformation-container'>
-            {["position", "rotation", "scale"].map((transformation) => (
-                <div className="transformation-wrapper">
-                    <div className="header">{transformation}</div>
-                    <div className="input-wrapppers">
-                        <input type="number" name="" id="" />
-                        <div className="icon"><ValueUpdateIcon /></div>
-                        <input type="number" name="" id="" />
-                        <div className="icon"><ValueUpdateIcon /></div>
-                        <input type="number" name="" id="" />
-                        <div className="icon"><ValueUpdateIcon /></div>
-                        <div className="icon"><LockIcon /></div>
-                    </div>
-                </div>
-            ))}
-
-            <div className="transformation-wrapper opacity">
-                <div className="header">opacity</div>
-                <div className="input-wrapppers">
-                    <input type="number" name="" id="" />
-                    <div className="icon"><ValueUpdateIcon /></div>
-
-                </div>
-            </div>
-
-            <div className="transformation-wrapper opacity">
-                <div className="header">Layering</div>
-
-                <div className="layers">
-                    <div className="icon">
-                        <LayeringBottomIcon />
-                    </div>
-                    <div className="icon">
-                        <LayeringTopIcon />
-                    </div>
-                </div>
-            </div>
-
-            <div className="preview">
-                <img src={decalImage} alt="" />
-                <div className="replace-btn">replace</div>
-            </div>
-        </div>
-    );
-};
-
-export default DecalTransformation;
-

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

@@ -103,32 +103,32 @@ const AssetProperties: React.FC = () => {
       </section>
       <div className="header">Animations</div>
       <section className="animations-lists">
-        {assets.map((asset) => (
-          <>
-            {asset.modelUuid === selectedFloorItem.uuid &&
-              asset.animations &&
-              asset.animations.length > 0 &&
-              asset.animations.map((animation, index) => (
-                <div key={index} className="animations-list-wrapper">
-                  <div
-                    onClick={() => handleAnimationClick(animation)}
-                    onMouseEnter={() => setHoveredIndex(index)}
-                    onMouseLeave={() => setHoveredIndex(null)}
-                    className="animations-list"
-                    style={{
-                      background:
-                        hoveredIndex === index
-                          ? "#7b4cd3"
-                          : "var(--background-color)",
-                    }}
-                  >
-                    {animation.charAt(0).toUpperCase() +
-                      animation.slice(1).toLowerCase()}
-                  </div>
-                </div>
-              ))}
-          </>
-        ))}
+        {assets.map((asset) => {
+          if (asset.modelUuid !== selectedFloorItem.uuid || !asset.animations)
+            return null;
+
+          return asset.animations.map((animation, index) => (
+            <div key={index} className="animations-list-wrapper">
+              <div
+                onClick={() => handleAnimationClick(animation)}
+                onMouseEnter={() => setHoveredIndex(index)}
+                onMouseLeave={() => setHoveredIndex(null)}
+                className="animations-list"
+                style={{
+                  background:
+                    hoveredIndex === index
+                      ? "var(--background-color-button)"
+                      : "var(--background-color)",
+                  color:
+                    hoveredIndex === index ? "var(--text-button-color)" : "",
+                }}
+              >
+                {animation.charAt(0).toUpperCase() +
+                  animation.slice(1).toLowerCase()}
+              </div>
+            </div>
+          ));
+        })}
       </section>
     </div>
   );

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

@@ -0,0 +1,53 @@
+import {
+  LayeringBottomIcon,
+  LayeringTopIcon,
+} from "../../../icons/ExportCommonIcons";
+import InputRange from "../../../ui/inputs/InputRange";
+import RotationInput from "../customInput/RotationInput";
+import Vector3Input from "../customInput/Vector3Input";
+
+const DecalProperties = () => {
+  return (
+    <div className="decal-transformation-container">
+      <div className="header">Decal Propertis</div>
+      <section>
+        <RotationInput
+          onChange={() => {}}
+          value={10}
+        />
+        <Vector3Input
+          onChange={(value) => console.log(value)}
+          header="Scale"
+          value={[0, 0, 0] as [number, number, number]}
+        />
+      </section>
+
+      <section>
+        <InputRange
+          label="Opacity"
+          value={1}
+          min={0}
+          step={0.1}
+          max={1}
+          onChange={(value: number) => console.log(value)}
+          key={"6"}
+        />
+
+        <div className="transformation-wrapper opacity">
+          <div className="transformation-header">Layering</div>
+
+          <div className="layers-list">
+            <button className="layer-move-btn">
+              <LayeringBottomIcon />
+            </button>
+            <button className="layer-move-btn">
+              <LayeringTopIcon />
+            </button>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+};
+
+export default DecalProperties;

app/src/components/ui/inputs/InputRange.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from "react";
-import * as CONSTANTS from "../../../types/world/worldConstants";
+
 interface InputToggleProps {
-  label: string; // Represents the toggle state (on/off)
+  label: string; 
   min?: number;
   max?: number;
-  onClick?: () => void; // Function to handle toggle clicks
-  onChange?: (value: number) => void; // Function to handle toggle clicks
+  step?: number; // Added step prop
+  onClick?: () => void; 
+  onChange?: (value: number) => void; 
   disabled?: boolean;
   value?: number;
   onPointerUp?: (value: number) => void;
@@ -17,54 +18,46 @@ const InputRange: React.FC<InputToggleProps> = ({
   onChange,
   min,
   max,
+  step = 1, // default step
   disabled,
   value,
   onPointerUp,
 }) => {
-  const [rangeValue, setRangeValue] = useState<number>(value ? value : 5);
+  const [rangeValue, setRangeValue] = useState<number>(value ?? 5);
 
   function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
-    const newValue = parseInt(e.target.value); // Parse the value to an integer
+    const newValue = parseFloat(e.target.value); 
+    setRangeValue(newValue);
 
-    setRangeValue(newValue); // Update the local state
-
-    if (onChange) {
-      onChange(newValue); // Call the onChange function if it exists
-    }
+    if (onChange) onChange(newValue);
   }
+
   useEffect(() => {
-    value && setRangeValue(value);
+    if (value !== undefined) setRangeValue(value);
   }, [value]);
+
   function handlePointerUp(e: React.PointerEvent<HTMLInputElement>) {
-    const newValue = parseInt(e.currentTarget.value, 10); // Parse value correctly
-
-    if (onPointerUp) {
-      onPointerUp(newValue); // Call the callback function if it exists
-    }
+    const newValue = parseFloat(e.currentTarget.value);
+    if (onPointerUp) onPointerUp(newValue);
   }
-  function handlekey(e: React.KeyboardEvent<HTMLInputElement>) {
-    const newValue = parseInt(e.currentTarget.value, 10); // Parse value correctly
 
-    if (onPointerUp) {
-      onPointerUp(newValue); // Call the callback function if it exists
-    }
+  function handleKey(e: React.KeyboardEvent<HTMLInputElement>) {
+    const newValue = parseFloat(e.currentTarget.value);
+    if (onPointerUp) onPointerUp(newValue);
   }
 
   return (
     <div className="input-range-container">
-      <label
-        htmlFor={`range-input ${value}`}
-        className="label"
-        onClick={onClick}
-      >
+      <label htmlFor={`range-input-${value}`} className="label" onClick={onClick}>
         {label}
       </label>
       <div className="input-container">
         <input
-          id={`range-input ${value}`}
+          id={`range-input-${value}`}
           type="range"
           min={min}
           max={max}
+          step={step} // added here
           onChange={handleChange}
           disabled={disabled}
           value={rangeValue}
@@ -73,15 +66,14 @@ const InputRange: React.FC<InputToggleProps> = ({
         <input
           type="number"
           min={min}
-          className="input-value"
           max={max}
+          step={step} // added here
           value={rangeValue}
           onChange={handleChange}
           disabled={disabled}
+          className="input-value"
           onKeyUp={(e) => {
-            if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-              handlekey(e);
-            }
+            if (e.key === "ArrowUp" || e.key === "ArrowDown") handleKey(e);
           }}
         />
       </div>

app/src/components/ui/inputs/RegularDropDown.tsx

@@ -21,7 +21,11 @@ const RegularDropDown: React.FC<DropdownProps> = ({
   const [searchTerm, setSearchTerm] = useState("");
   const [filteredOptions, setFilteredOptions] = useState<string[]>(options);
   const dropdownRef = useRef<HTMLDivElement>(null);
-  const [position, setPosition] = useState<{ top: number; left: number; width: number }>({
+  const [position, setPosition] = useState<{
+    top: number;
+    left: number;
+    width: number;
+  }>({
     top: 0,
     left: 0,
     width: 0,
@@ -88,7 +92,13 @@ const RegularDropDown: React.FC<DropdownProps> = ({
   };
 
   return (
-    <div className="regularDropdown-container" ref={dropdownRef}>
+    <div
+      className="regularDropdown-container"
+      ref={dropdownRef}
+      onPointerLeave={() => {
+        setIsOpen(false);
+      }}
+    >
       {/* Header */}
       <div className="dropdown-header flex-sb" onClick={toggleDropdown}>
         <div className="key">{selectedOption || header}</div>

app/src/components/ui/log/LogList.tsx

@@ -163,7 +163,10 @@ const LogList: React.FC = () => {
         <RenderInNewWindow
           title="Log list"
           theme={localStorage.getItem("theme")}
-          onClose={() => setOpen(false)}
+          onClose={() => {
+            setOpen(false);
+            setIsLogListVisible(false);
+          }}
         >
           <div className="log-list-new-window-wrapper">
             <Logs

app/src/pages/ForgotPassword.tsx

@@ -1,92 +1,134 @@
-import React, { useState, useEffect } from 'react';
-import { LogoIconLarge } from '../components/icons/Logo';
-import EmailInput from '../components/forgotPassword/EmailInput';
-import OTPVerification from '../components/forgotPassword/OTP_Verification';
-import PasswordSetup from '../components/forgotPassword/PasswordSetup';
-import ConfirmationMessage from '../components/forgotPassword/ConfirmationMessgae';
+import React, { useState, useEffect, FormEvent } from "react";
+import { LogoIconLarge } from "../components/icons/Logo";
+import EmailInput from "../components/forgotPassword/EmailInput";
+import OTPVerification from "../components/forgotPassword/OTP_Verification";
+import PasswordSetup from "../components/forgotPassword/PasswordSetup";
+import ConfirmationMessage from "../components/forgotPassword/ConfirmationMessgae";
+import { changePasswordApi } from "../services/factoryBuilder/signInSignUp/changePasswordApi";
+import { checkEmailApi } from "../services/factoryBuilder/signInSignUp/checkEmailApi";
+import { verifyOtpApi } from "../services/factoryBuilder/signInSignUp/verifyOtpApi";
 
 const ForgotPassword: React.FC = () => {
-    const [step, setStep] = useState(1);
-    const [email, setEmail] = useState('');
-    const [code, setCode] = useState('');
-    const [newPassword, setNewPassword] = useState('');
-    const [confirmPassword, setConfirmPassword] = useState('');
-    const [timer, setTimer] = useState(30);
+  const [step, setStep] = useState(1);
+  const [email, setEmail] = useState("");
+  const [code, setCode] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [timer, setTimer] = useState(30);
+  const [resetToken, setResetToken] = useState("");
 
-    useEffect(() => {
-        let countdown: NodeJS.Timeout;
-        if (step === 2 && timer > 0) {
-            countdown = setTimeout(() => setTimer(prev => prev - 1), 1000);
-        }
-        return () => clearTimeout(countdown);
-    }, [step, timer]);
-
-    const handleSubmitEmail = () => {
-        setStep(2);
-        setTimer(30);
+  useEffect(() => {
+    let countdown: NodeJS.Timeout;
+    if (step === 2 && timer > 0) {
+      countdown = setTimeout(() => setTimer((prev) => prev - 1), 1000);
     }
-    const resendCode = () => {
-        // TODO: call API to resend code
-        setTimer(30);
-    };
+    return () => clearTimeout(countdown);
+  }, [step, timer]);
 
-    return (
-        <div className='forgot-password-page auth-container'>
-            <div className='forgot-password-wrapper'>
-                <div className='logo-icon'>
-                    <LogoIconLarge />
-                </div>
+  const resendCode = async () => {
+    // TODO: call API to resend code
+    setTimer(30);
+    try {
+      const emailResponse = await checkEmailApi(email);
 
+      if (emailResponse.message == "OTP sent Successfully") {
+        setCode(emailResponse.OTP);
+      }
+    } catch {}
+  };
+  const handleEmailSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    setTimer(30);
+    try {
+      const emailResponse = await checkEmailApi(email);
 
-                {step === 1 && (
-                    <>
-                        <EmailInput
-                            email={email}
-                            setEmail={setEmail}
-                            onSubmit={handleSubmitEmail}
-                        />
-                        <a href='/' className='login continue-button'>Login</a>
-                    </>
+      if (emailResponse.message == "OTP sent Successfully") {
+        setStep(2);
+        setCode(emailResponse.OTP);
+      }
+    } catch {}
+  };
 
-                )}
+  const handleOTPSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    try {
+      const otpResponse = await verifyOtpApi(email, Number(code));
 
+      if (otpResponse.message == "OTP verified successfully") {
+        setResetToken(otpResponse.resetToken);
+        setStep(3);
+      } else {
+        alert(otpResponse.message);
+      }
+    } catch {}
+  };
 
-                {step === 2 && (
-                    <>
-                        <OTPVerification
-                            email={email}
-                            timer={timer}
-                            setCode={setCode}
-                            onSubmit={() => setStep(3)}
-                            resendCode={resendCode}
-                        />
-                        <a href='/' className='login'>Login</a>
-                    </>
+  const handlePasswordSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    try {
+      const passwordResponse = await changePasswordApi(
+        resetToken,
+        newPassword,
+        confirmPassword
+      );
+      if (passwordResponse.message === "Password reset successfull!!") {
+        setStep(4);
+      }
+    } catch {}
+  };
 
-                )}
-
-
-                {step === 3 && (
-                    <>
-                        <PasswordSetup
-                            newPassword={newPassword}
-                            confirmPassword={confirmPassword}
-                            setNewPassword={setNewPassword}
-                            setConfirmPassword={setConfirmPassword}
-                            onSubmit={() => setStep(4)}
-                        />
-                        <a href='/' className='login'>Login</a>
-                    </>
-
-                )}
-
-
-                {step === 4 && <ConfirmationMessage />}
-
-
-            </div>
+  return (
+    <div className="forgot-password-page auth-container">
+      <div className="forgot-password-wrapper">
+        <div className="logo-icon">
+          <LogoIconLarge />
         </div>
-    );
+
+        {step === 1 && (
+          <>
+            <EmailInput
+              email={email}
+              setEmail={setEmail}
+              onSubmit={handleEmailSubmit}
+            />
+            <a href="/" className="login continue-button">
+              Login
+            </a>
+          </>
+        )}
+
+        {step === 2 && (
+          <>
+            <OTPVerification
+              code={code}
+              email={email}
+              timer={timer}
+              setCode={setCode}
+              onSubmit={handleOTPSubmit}
+              resendCode={resendCode}
+            />
+            <a href="/" className="login">
+              Login
+            </a>
+          </>
+        )}
+
+        {step === 3 && (
+          <>
+            <PasswordSetup
+              newPassword={newPassword}
+              confirmPassword={confirmPassword}
+              setNewPassword={setNewPassword}
+              setConfirmPassword={setConfirmPassword}
+              onSubmit={handlePasswordSubmit}
+            />
+            <a href="/" className="login">
+              Login
+            </a>
+          </>
+        )}
+
+        {step === 4 && <ConfirmationMessage />}
+      </div>
+    </div>
+  );
 };
 
 export default ForgotPassword;

app/src/pages/UserAuth.tsx

@@ -34,7 +34,7 @@ const UserAuth: React.FC = () => {
 
   useEffect(() => {
     initializeFingerprint();
-  }, [])
+  }, []);
 
   const { userId, organization } = getUserData();
 
@@ -47,7 +47,6 @@ const UserAuth: React.FC = () => {
         setError("");
         setOrganization(organization);
         setUserName(res.message.name);
-        // console.log(' res.userId: ', res.message.userId);
         localStorage.setItem("userId", res.message.userId);
         localStorage.setItem("email", res.message.email);
         localStorage.setItem("userName", res.message.name);
@@ -55,33 +54,46 @@ const UserAuth: React.FC = () => {
         localStorage.setItem("refreshToken", res.message.refreshToken);
 
         try {
-          const projects = await recentlyViewed(organization, res.message.userId);
+          const projects = await recentlyViewed(
+            organization,
+            res.message.userId
+          );
           if (res.message.isShare) {
             if (Object.values(projects.RecentlyViewed).length > 0) {
-              const recent_opend_projectID = (Object.values(projects?.RecentlyViewed || {})[0] as any)?._id;
-              if (Object.values(projects?.RecentlyViewed).filter((val: any) => val._id == recent_opend_projectID)) {
-                setLoadingProgress(1)
-                navigate(`/projects/${recent_opend_projectID}`)
+              const recent_opend_projectID = (
+                Object.values(projects?.RecentlyViewed || {})[0] as any
+              )?._id;
+              if (
+                Object.values(projects?.RecentlyViewed).filter(
+                  (val: any) => val._id == recent_opend_projectID
+                )
+              ) {
+                setLoadingProgress(1);
+                navigate(`/projects/${recent_opend_projectID}`);
               } else {
-                navigate("/Dashboard")
+                navigate("/Dashboard");
               }
             } else {
               setLoadingProgress(1);
               navigate("/Dashboard");
             }
           }
-
         } catch (error) {
           console.error("Error fetching recent projects:", error);
         }
       } else if (res.message === "User Not Found!!! Kindly signup...") {
         setError("Account not found");
-      } else if (res.message === "Email & Password is invalid...Check the credentials") {
-        setError(res.message)
-      } else if (res.message === "Already LoggedIn on another browser....Please logout!!!") {
+      } else if (
+        res.message === "Email & Password is invalid...Check the credentials"
+      ) {
+        setError(res.message);
+      } else if (
+        res.message ===
+        "Already LoggedIn on another browser....Please logout!!!"
+      ) {
         setError("Already logged in on another browser. Please logout first.");
         navigate("/");
-        setError("")
+        setError("");
         // setError("");
         // setOrganization(organization);
         // setUserName(res.ForceLogoutData.userName);
@@ -179,6 +191,7 @@ const UserAuth: React.FC = () => {
           name="email"
           value={email}
           placeholder="Email"
+          autoComplete="email"
           onChange={(e) => setEmail(e.target.value)}
           required
         />
@@ -188,6 +201,7 @@ const UserAuth: React.FC = () => {
             type={showPassword ? "text" : "password"}
             value={password}
             placeholder="Password"
+            autoComplete="current-password"
             onChange={(e) => setPassword(e.target.value)}
             required
           />
@@ -201,7 +215,11 @@ const UserAuth: React.FC = () => {
           </button>
         </div>
 
-        {isSignIn && <a href="forgot" className="forgot-password">Forgot password ?</a>}
+        {isSignIn && (
+          <a href="forgot" className="forgot-password">
+            Forgot password ?
+          </a>
+        )}
 
         {!isSignIn && (
           <div className="policy-checkbox">

app/src/services/factoryBuilder/signInSignUp/changePasswordApi.ts

@@ -0,0 +1,29 @@
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
+
+export const changePasswordApi = async (
+  resetToken: string,
+  newPassword: string,
+  confirmPassword: string
+) => {
+  try {
+    const response = await fetch(
+      `${url_Backend_dwinzo}/api/V1/Auth/reset-password/${resetToken}`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ newPassword, confirmPassword }),
+      }
+    );
+
+    const result = await response.json();
+
+    return result;
+  } catch (error) {
+    echo.error("Failed to create password");
+    if (error instanceof Error) {
+      return { error: error.message };
+    } else {
+      return { error: "An unknown error occurred" };
+    }
+  }
+};

app/src/services/factoryBuilder/signInSignUp/checkEmailApi.ts

@@ -0,0 +1,25 @@
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
+
+export const checkEmailApi = async (Email: string) => {
+  try {
+    const response = await fetch(
+      `${url_Backend_dwinzo}/api/V1/Auth/forgetPassword`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ Email }),
+      }
+    );
+
+    const result = await response.json();
+
+    return result;
+  } catch (error) {
+    echo.error("Failed to create password");
+    if (error instanceof Error) {
+      return { error: error.message };
+    } else {
+      return { error: "An unknown error occurred" };
+    }
+  }
+};

app/src/services/factoryBuilder/signInSignUp/verifyOtpApi.ts

@@ -0,0 +1,28 @@
+let url_Backend_dwinzo = `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}`;
+
+export const verifyOtpApi = async (Email: string, Otp: number) => {
+  try {
+    const response = await fetch(
+      `${url_Backend_dwinzo}/api/V1/Auth/validate-otp`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          Email,
+          otp: Number(Otp),
+        }),
+      }
+    );
+
+    const result = await response.json();
+
+    return result;
+  } catch (error) {
+    echo.error("Failed to create password");
+    if (error instanceof Error) {
+      return { error: error.message };
+    } else {
+      return { error: "An unknown error occurred" };
+    }
+  }
+};

app/src/store/builder/store.ts

@@ -647,12 +647,12 @@ export const useContextActionStore = create<any>((set: any) => ({
 
 // Define the store's state and actions type
 interface DecalStore {
-  selectedSubCategory: string;
-  setSelectedSubCategory: (subCategory: string) => void;
+    selectedSubCategory: string | null;
+    setSelectedSubCategory: (subCategory: string | null) => void;
 }
 
 // Create the Zustand store with types
 export const useDecalStore = create<DecalStore>((set) => ({
-  selectedSubCategory: '',
-  setSelectedSubCategory: (subCategory: string) => set({ selectedSubCategory: subCategory }),
+    selectedSubCategory: null,
+    setSelectedSubCategory: (subCategory: string | null) => set({ selectedSubCategory: subCategory }),
 }));

app/src/styles/components/simulation/simulation.scss

@@ -7,7 +7,8 @@
   left: 50%;
   z-index: 2;
   transform: translate(-50%, 0);
-  width: 70vw;
+  max-width: calc(100vw - (2 * 328px));
+  width: 100%;
   transition: all 0.3s;
 
   &.hide {

app/src/styles/layout/sidebar.scss

@@ -469,10 +469,6 @@
       width: 304px;
 
       .decal-transformation-container {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
-
         .transformation-wrapper {
           display: flex;
           align-items: center;
@@ -501,16 +497,17 @@
             }
 
             input {
-              min-width: 43px;
+              min-width: 58px;
+              text-align: center;
             }
           }
 
-          .layers {
+          .layers-list {
             display: flex;
             gap: 6px;
             align-items: center;
 
-            .icon {
+            .layer-move-btn {
               display: flex;
               justify-content: center;
               align-items: center;
@@ -518,6 +515,10 @@
               padding: 4px 16px;
               width: 50px;
               border-radius: 100px;
+              cursor: pointer;
+              &:hover {
+                outline: 1px solid var(--accent-color);
+              }
             }
           }
         }
@@ -1581,6 +1582,7 @@
   .analysis-main-container,
   .asset-properties-container,
   .zone-properties-container,
+  .decal-transformation-container,
   .aisle-properties-container {
     .header {
       @include flex-space-between;
@@ -1787,6 +1789,10 @@
       padding: 14px;
       padding-bottom: 0;
       margin-bottom: 8px;
+      .input-toggle-container{
+        padding: 4px 0;
+        margin-bottom: 8px;
+      }
     }
 
     .header {