added ui fro and iintegerated ui for decal modification

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

@@ -1,23 +1,29 @@
 import React from "react";
 
 interface RotationInputProps {
-  heading?: string; // Optional label for the input
-  label?: string; // Optional label for the input
-  onChange: (value: string) => void; // Callback for value change
-  placeholder?: string; // Optional placeholder
-  type?: string; // Input type (e.g., text, number, email)
+  heading?: string;
+  label?: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  type?: string;
   value?: number;
-  disabled?: boolean; // Disable the input if true
+  disabled?: boolean;
+  min?: number;
+  max?: number;
+  step?: number;
 }
 
 const RotationInput: React.FC<RotationInputProps> = ({
-  label = "Rotate :", // Default label
-  heading = "Rotation", // Default heading
+  label = "Rotate :",
+  heading = "Rotation",
   onChange,
-  placeholder = "Enter value", // Default placeholder
-  type = "number", // Default type
-  value = "number",
+  placeholder = "Enter value",
+  type = "number",
+  value,
   disabled = false,
+  min,
+  max,
+  step,
 }) => {
   return (
     <div className="custom-input-container">
@@ -32,6 +38,9 @@ const RotationInput: React.FC<RotationInputProps> = ({
             placeholder={placeholder}
             value={value}
             disabled={disabled}
+            min={min}
+            max={max}
+            step={step}
           />
         </div>
       </div>

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

@@ -1,42 +1,178 @@
+import { useParams } from "react-router-dom";
+import { useVersionContext } from "../../../../modules/builder/version/versionContext";
+import { useSceneContext } from "../../../../modules/scene/sceneContext";
+import { useBuilderStore } from "../../../../store/builder/useBuilderStore";
 import { LayeringBottomIcon, LayeringTopIcon } from "../../../icons/ExportCommonIcons";
+import { useSocketStore } from "../../../../store/builder/store";
 import InputRange from "../../../ui/inputs/InputRange";
 import RotationInput from "../customInput/RotationInput";
 
+import { getUserData } from "../../../../functions/getUserData";
+// import { upsertWallApi } from "../../../../services/factoryBuilder/wall/upsertWallApi";
+// import { upsertFloorApi } from "../../../../services/factoryBuilder/floor/upsertFloorApi";
+
 const SelectedDecalProperties = () => {
+    const { selectedDecal, setSelectedDecal } = useBuilderStore();
+    const { wallStore, floorStore } = useSceneContext();
+    const { updateDecal: updateDecalFromWall } = wallStore();
+    const { updateDecal: updateDecalFromFloor } = floorStore();
+    const { userId, organization } = getUserData();
+    const { selectedVersionStore } = useVersionContext();
+    const { selectedVersion } = selectedVersionStore();
+    const { projectId } = useParams();
+    const { socket } = useSocketStore();
+
+    const updateBackend = (updatedData: Wall | Floor) => {
+        if ('wallUuid' in updatedData) {
+            if (projectId && updatedData) {
+                // API
+
+                // upsertWallApi(projectId, selectedVersion?.versionId || '', updatedData);
+
+                // SOCKET 
+
+                const data = {
+                    wallData: updatedData,
+                    projectId: projectId,
+                    versionId: selectedVersion?.versionId || '',
+                    userId: userId,
+                    organization: organization
+                }
+
+                socket.emit('v1:model-Wall:add', data);
+            }
+        } else if ('floorUuid' in updatedData) {
+            if (projectId && updatedData) {
+                // API
+
+                // upsertFloorApi(projectId, selectedVersion?.versionId || '', updatedData);
+
+                // SOCKET
+
+                const data = {
+                    floorData: updatedData,
+                    projectId: projectId,
+                    versionId: selectedVersion?.versionId || '',
+                    userId: userId,
+                    organization: organization
+                }
+
+                socket.emit('v1:model-Floor:add', data);
+            }
+        }
+    }
+
+    const handleRotationChange = (value: number) => {
+        if (!selectedDecal) return;
+        const updatedDecal = { ...selectedDecal.decalData, decalRotation: value };
+        setSelectedDecal({ ...selectedDecal, decalData: updatedDecal });
+
+        if ('wallUuid' in selectedDecal.decalData.decalType) {
+            const updatedWall = updateDecalFromWall(updatedDecal.decalUuid, updatedDecal);
+            if (updatedWall) updateBackend(updatedWall);
+        } else if ('floorUuid' in selectedDecal.decalData.decalType) {
+            const updatedFloor = updateDecalFromFloor(updatedDecal.decalUuid, updatedDecal);
+            if (updatedFloor) updateBackend(updatedFloor);
+        }
+    }
+
+    const handleScaleChange = (value: number) => {
+        if (!selectedDecal) return;
+        const updatedDecal = { ...selectedDecal.decalData, decalScale: value };
+        setSelectedDecal({ ...selectedDecal, decalData: updatedDecal });
+
+        if ('wallUuid' in selectedDecal.decalData.decalType) {
+            const updatedWall = updateDecalFromWall(updatedDecal.decalUuid, updatedDecal);
+            if (updatedWall) updateBackend(updatedWall);
+        } else if ('floorUuid' in selectedDecal.decalData.decalType) {
+            const updatedFloor = updateDecalFromFloor(updatedDecal.decalUuid, updatedDecal);
+            if (updatedFloor) updateBackend(updatedFloor);
+        }
+    }
+
+    const handleOpacityChange = (value: number) => {
+        if (!selectedDecal) return;
+        const updatedDecal = { ...selectedDecal.decalData, decalOpacity: value };
+        setSelectedDecal({ ...selectedDecal, decalData: updatedDecal });
+
+        if ('wallUuid' in selectedDecal.decalData.decalType) {
+            const updatedWall = updateDecalFromWall(updatedDecal.decalUuid, updatedDecal);
+            if (updatedWall) updateBackend(updatedWall);
+        } else if ('floorUuid' in selectedDecal.decalData.decalType) {
+            const updatedFloor = updateDecalFromFloor(updatedDecal.decalUuid, updatedDecal);
+            if (updatedFloor) updateBackend(updatedFloor);
+        }
+    }
+
+    const handleLayerChange = (direction: "up" | "down") => {
+        if (!selectedDecal) return;
+
+        const position: [number, number, number] = [...(selectedDecal.decalData.decalPosition || [0, 0, 0]),];
+
+        if (direction === "up") {
+            position[2] = Math.abs(position[2]);
+        } else {
+            position[2] = -Math.abs(position[2]);
+        }
+
+        const updatedDecal: Decal = { ...selectedDecal.decalData, decalPosition: position, };
+
+        setSelectedDecal({ ...selectedDecal, decalData: updatedDecal });
+
+        if ("wallUuid" in selectedDecal.decalData.decalType) {
+            const updatedWall = updateDecalFromWall(updatedDecal.decalUuid, updatedDecal);
+            if (updatedWall) updateBackend(updatedWall);
+        } else if ("floorUuid" in selectedDecal.decalData.decalType) {
+            const updatedFloor = updateDecalFromFloor(updatedDecal.decalUuid, updatedDecal);
+            if (updatedFloor) updateBackend(updatedFloor);
+        }
+    };
+
+    if (!selectedDecal) return null;
+
     return (
         <div className="decal-transformation-container">
             <div className="header">Decal Properties</div>
             <section>
                 <RotationInput
-                    onChange={() => { }}
-                    value={10}
+                    onChange={(e) => { handleRotationChange(parseFloat(e)) }}
+                    value={selectedDecal.decalData.decalRotation || 0}
                 />
                 <RotationInput
+                    min={0.1}
+                    max={10}
+                    step={0.1}
                     heading="Scaling"
                     label="Scale :"
-                    onChange={() => { }}
-                    value={10}
+                    onChange={(e) => { handleScaleChange(parseFloat(e)) }}
+                    value={selectedDecal.decalData.decalScale || 1}
                 />
             </section>
 
             <section>
                 <InputRange
                     label="Opacity"
-                    value={1}
-                    min={0}
+                    value={selectedDecal.decalData.decalOpacity || 1}
+                    min={0.1}
                     step={0.1}
                     max={1}
-                    onChange={(value: number) => console.log(value)}
+                    onChange={(value: number) => handleOpacityChange(value)}
                 />
 
                 <div className="transformation-wrapper opacity">
                     <div className="transformation-header">Layering</div>
 
                     <div className="layers-list">
-                        <button className="layer-move-btn">
+                        <button
+                            className="layer-move-btn"
+                            onClick={() => handleLayerChange("down")}
+                        >
                             <LayeringBottomIcon />
                         </button>
-                        <button className="layer-move-btn">
+                        <button
+                            className="layer-move-btn"
+                            onClick={() => handleLayerChange("up")}
+                        >
                             <LayeringTopIcon />
                         </button>
                     </div>