Merge branch 'main' into realTimeVisulization

2025-03-26 12:32:04 +05:30 · 2025-03-26 12:32:04 +05:30 · 5cc3b83e43
parent 7883ed2936 5628628de5
commit 5cc3b83e43
17 changed files with 1025 additions and 20881 deletions
--- a/app/package-lock.json
+++ b/app/package-lock.json
--- a/app/src/components/icons/RealTimeVisulationIcons.tsx
+++ b/app/src/components/icons/RealTimeVisulationIcons.tsx
@ -107,7 +107,7 @@ export function StockIncreseIcon() {
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
-      <g clip-path="url(#clip0_3050_69519)">
+      <g clipPath="url(#clip0_3050_69519)">
        <path
          d="M7.80766 6.99219H1.17811C0.752382 6.99219 0.407227 7.33734 0.407227 7.76307C0.407227 8.18879 0.752382 8.53395 1.17811 8.53395H7.80766C8.23339 8.53395 8.57854 8.18879 8.57854 7.76307C8.57854 7.33733 8.23339 6.99219 7.80766 6.99219Z"
          fill="white"
@ -142,8 +142,8 @@ export function StockIncreseIcon() {
          y2="8.53122"
          gradientUnits="userSpaceOnUse"
        >
-          <stop stop-color="#31B2B9" />
-          <stop offset="1" stop-color="#FBD8B8" />
+          <stop stopColor="#31B2B9" />
+          <stop offset="1" stopColor="#FBD8B8" />
        </linearGradient>
        <clipPath id="clip0_3050_69519">
          <rect
--- a/app/src/components/layout/sidebarLeft/Header.tsx
+++ b/app/src/components/layout/sidebarLeft/Header.tsx
@ -3,9 +3,12 @@ import { ToggleSidebarIcon } from "../../icons/HeaderIcons";
 import { LogoIcon } from "../../icons/Logo";
 import FileMenu from "../../ui/FileMenu";
 import useToggleStore from "../../../store/useUIToggleStore";
+import useModuleStore from "../../../store/useModuleStore";

 const Header: React.FC = () => {
  const { toggleUI, setToggleUI } = useToggleStore();
+  const { activeModule } = useModuleStore();
+
  return (
    <div className="header-container">
      <div className="header-content">
@ -19,7 +22,7 @@ const Header: React.FC = () => {
      <div
        className={`toggle-sidebar-ui-button ${!toggleUI ? "active" : ""}`}
        onClick={() => {
-          setToggleUI(!toggleUI);
+          if (activeModule !== "market") setToggleUI(!toggleUI);
        }}
      >
        <ToggleSidebarIcon />
--- a/app/src/components/layout/sidebarRight/SideBarRight.tsx
+++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx
@ -1,6 +1,8 @@
 import React, { useEffect, useState } from "react";
 import Header from "./Header";
-import useModuleStore, { useSubModuleStore } from "../../../store/useModuleStore";
+import useModuleStore, {
+  useSubModuleStore,
+} from "../../../store/useModuleStore";
 import {
  AnalysisIcon,
  MechanicsIcon,
@ -15,6 +17,7 @@ import AsstePropertiies from "./properties/AssetProperties";
 import Analysis from "./analysis/Analysis";
 import Simulations from "./simulation/Simulations";
 import { useSelectedActionSphere } from "../../../store/store";
+import ZoneProperties from "./properties/ZoneProperties";

 const SideBarRight: React.FC = () => {
  const { activeModule } = useModuleStore();
@ -24,7 +27,8 @@ const SideBarRight: React.FC = () => {

  // Reset subModule whenever activeModule changes
  useEffect(() => {
-    setSubModule("properties");
+    if (activeModule !== "simulation") setSubModule("properties");
+    if (activeModule === "simulation") setSubModule("mechanics");
  }, [activeModule]);

  return (
@ -32,32 +36,38 @@ const SideBarRight: React.FC = () => {
      <Header />
      {toggleUI && (
        <div className="sidebar-actions-container">
-          <div
-            className={`sidebar-action-list ${subModule === "properties" ? "active" : ""
+          {/* {activeModule === "builder" && ( */}
+            <div
+              className={`sidebar-action-list ${
+                subModule === "properties" ? "active" : ""
              }`}
-            onClick={() => setSubModule("properties")}
-          >
-            <PropertiesIcon isActive={subModule === "properties"} />
-          </div>
+              onClick={() => setSubModule("properties")}
+            >
+              <PropertiesIcon isActive={subModule === "properties"} />
+            </div>
+          {/* )} */}
          {activeModule === "simulation" && (
            <>
              <div
-                className={`sidebar-action-list ${subModule === "mechanics" ? "active" : ""
-                  }`}
+                className={`sidebar-action-list ${
+                  subModule === "mechanics" ? "active" : ""
+                }`}
                onClick={() => setSubModule("mechanics")}
              >
                <MechanicsIcon isActive={subModule === "mechanics"} />
              </div>
              <div
-                className={`sidebar-action-list ${subModule === "simulations" ? "active" : ""
-                  }`}
+                className={`sidebar-action-list ${
+                  subModule === "simulations" ? "active" : ""
+                }`}
                onClick={() => setSubModule("simulations")}
              >
                <SimulationIcon isActive={subModule === "simulations"} />
              </div>
              <div
-                className={`sidebar-action-list ${subModule === "analysis" ? "active" : ""
-                  }`}
+                className={`sidebar-action-list ${
+                  subModule === "analysis" ? "active" : ""
+                }`}
                onClick={() => setSubModule("analysis")}
              >
                <AnalysisIcon isActive={subModule === "analysis"} />
@ -73,6 +83,7 @@ const SideBarRight: React.FC = () => {
          <div className="sidebar-right-container">
            <div className="sidebar-right-content-container">
              <GlobalProperties />
+              {/* <ZoneProperties /> */}
              {/* <AsstePropertiies /> */}
            </div>
          </div>
@ -82,17 +93,17 @@ const SideBarRight: React.FC = () => {

      {toggleUI && activeModule === "simulation" && (
        <>
-          {(subModule === "mechanics" && selectedActionSphere) && (
+          {subModule === "mechanics" && selectedActionSphere && (
            <div className="sidebar-right-container">
              <div className="sidebar-right-content-container">
                <MachineMechanics />
              </div>
            </div>
          )}
-          {(subModule === "mechanics" && !selectedActionSphere) && (
+          {subModule === "mechanics" && !selectedActionSphere && (
            <div className="sidebar-right-container">
              <div className="sidebar-right-content-container">
-                {/* <MachineMechanics /> */}
+                <MachineMechanics />
              </div>
            </div>
          )}
--- a/app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx
+++ b/app/src/components/layout/sidebarRight/customInput/Vector3Input.tsx
@ -0,0 +1,62 @@
+import React from "react";
+import { EyeDroperIcon } from "../../../icons/ExportCommonIcons";
+
+interface PositionInputProps {
+  onChange: (value: string) => void; // Callback for value change
+  header: string;
+  placeholder?: string; // Optional placeholder
+  type?: string; // Input type (e.g., text, number, email)
+}
+
+const Vector3Input: React.FC<PositionInputProps> = ({
+  onChange,
+  header,
+  placeholder = "Enter value", // Default placeholder
+  type = "number", // Default type
+}) => {
+  return (
+    <div className="custom-input-container">
+      <div className="header">
+        {header}{" "}
+        <div className="eyedrop-button">
+          <EyeDroperIcon isActive={false} />
+        </div>
+      </div>
+      <div className="inputs-container">
+        <div className="input-container">
+          <div className="custom-input-label">X : </div>
+          <input
+            className="custom-input-field"
+            type={type}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={placeholder}
+            disabled
+          />
+        </div>
+        <div className="input-container">
+          <div className="custom-input-label">Y : </div>
+          <input
+            className="custom-input-field"
+            type={type}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={placeholder}
+            disabled
+            min={0}
+          />
+        </div>
+        <div className="input-container">
+          <div className="custom-input-label">Z : </div>
+          <input
+            className="custom-input-field"
+            type={type}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder={placeholder}
+            disabled
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Vector3Input;
--- a/app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx
@ -14,8 +14,8 @@ import EyeDropInput from "../../../ui/inputs/EyeDropInput";
 import { useSelectedActionSphere } from "../../../../store/store";

 const MachineMechanics: React.FC = () => {
-  const { selectedActionSphere, setSelectedActionSphere } = useSelectedActionSphere();
-  console.log('selectedActionSphere: ', selectedActionSphere);
+  const { selectedActionSphere } = useSelectedActionSphere();
+  console.log("selectedActionSphere: ", selectedActionSphere);
  const [actionList, setActionList] = useState<string[]>([]);
  const [triggerList, setTriggerList] = useState<string[]>([]);
  const [selectedItem, setSelectedItem] = useState<{
@ -71,7 +71,9 @@ const MachineMechanics: React.FC = () => {

  return (
    <div className="machine-mechanics-container">
-      <div className="machine-mechanics-header">{selectedActionSphere.path.modelName}</div>
+      <div className="machine-mechanics-header">
+        {selectedActionSphere?.path?.modelName || "path name not found"}
+      </div>
      {/* <div className="process-list-container">
        <div className="label">Process:</div>
        <RegularDropDown
@ -100,11 +102,12 @@ const MachineMechanics: React.FC = () => {
              {actionList.map((action, index) => (
                <div
                  key={index}
-                  className={`list-item ${selectedItem?.type === "action" &&
+                  className={`list-item ${
+                    selectedItem?.type === "action" &&
                    selectedItem.name === action
-                    ? "active"
-                    : ""
-                    }`}
+                      ? "active"
+                      : ""
+                  }`}
                >
                  <div
                    className="value"
@ -146,11 +149,12 @@ const MachineMechanics: React.FC = () => {
              {triggerList.map((trigger, index) => (
                <div
                  key={index}
-                  className={`list-item ${selectedItem?.type === "trigger" &&
+                  className={`list-item ${
+                    selectedItem?.type === "trigger" &&
                    selectedItem.name === trigger
-                    ? "active"
-                    : ""
-                    }`}
+                      ? "active"
+                      : ""
+                  }`}
                >
                  <div
                    className="value"
@ -188,7 +192,7 @@ const MachineMechanics: React.FC = () => {
                label="Speed"
                value=""
                activeOption=".mm"
-                onChange={() => { }}
+                onChange={() => {}}
              />
              <EyeDropInput />
            </>
--- a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
@ -0,0 +1,39 @@
+import React, { useState } from "react";
+import RenameInput from "../../../ui/inputs/RenameInput";
+import Vector3Input from "../customInput/Vector3Input";
+
+const ZoneProperties: React.FC = () => {
+  const [Edit, setEdit] = useState(false);
+
+  function handleSetView() {
+    setEdit(false);
+  }
+
+  function handleEditView() {
+    if (Edit) {
+      setEdit(false);
+    } else {
+      setEdit(true);
+    }
+  }
+
+  return (
+    <div className="zone-properties-container">
+      <div className="header">
+        <RenameInput value="Selected Zone Name" />
+        <div className="button" onClick={handleEditView}>
+          {Edit ? "Cancel" : "Edit"}
+        </div>
+      </div>
+      <Vector3Input onChange={() => {}} header="Viewport Target" />
+      <Vector3Input onChange={() => {}} header="Viewport Position" />
+      {Edit && (
+        <div className="button-save" onClick={handleSetView}>
+          Set View
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ZoneProperties;
--- a/app/src/components/layout/sidebarRight/simulation/Simulations.tsx
+++ b/app/src/components/layout/sidebarRight/simulation/Simulations.tsx
@ -28,7 +28,7 @@ const DropList: React.FC<DropListProps> = ({ val }) => {
        }}
      >
        {val.pathName}
-        <div className="arrow-container">
+        <div className={`arrow-container${openDrop ? " active" : ""}`}>
          <ArrowIcon />
        </div>
      </div>
@ -87,8 +87,9 @@ const Simulations: React.FC = () => {
              {productsList.map((action, index) => (
                <div
                  key={index}
-                  className={`list-item ${selectedItem === action ? "active" : ""
-                    }`}
+                  className={`list-item ${
+                    selectedItem === action ? "active" : ""
+                  }`}
                >
                  <div
                    className="value"
--- a/app/src/components/ui/ModuleToggle.tsx
+++ b/app/src/components/ui/ModuleToggle.tsx
@ -6,15 +6,20 @@ import {
  SimulationIcon,
  VisualizationIcon,
 } from "../icons/ExportModuleIcons";
+import useToggleStore from "../../store/useUIToggleStore";

 const ModuleToggle: React.FC = () => {
  const { activeModule, setActiveModule } = useModuleStore();
+  const { setToggleUI } = useToggleStore();

  return (
    <div className="module-toggle-container">
      <div
        className={`module-list ${activeModule === "builder" && "active"}`}
-        onClick={() => setActiveModule("builder")}
+        onClick={() => {
+          setActiveModule("builder");
+          setToggleUI(true);
+        }}
      >
        <div className="icon">
          <BuilderIcon isActive={activeModule === "builder"} />
@ -23,7 +28,10 @@ const ModuleToggle: React.FC = () => {
      </div>
      <div
        className={`module-list ${activeModule === "simulation" && "active"}`}
-        onClick={() => setActiveModule("simulation")}
+        onClick={() => {
+          setActiveModule("simulation");
+          setToggleUI(true);
+        }}
      >
        <div className="icon">
          <SimulationIcon isActive={activeModule === "simulation"} />
@ -34,7 +42,10 @@ const ModuleToggle: React.FC = () => {
        className={`module-list ${
          activeModule === "visualization" && "active"
        }`}
-        onClick={() => setActiveModule("visualization")}
+        onClick={() => {
+          setActiveModule("visualization");
+          setToggleUI(true);
+        }}
      >
        <div className="icon">
          <VisualizationIcon isActive={activeModule === "visualization"} />
@ -42,10 +53,11 @@ const ModuleToggle: React.FC = () => {
        <div className="module">Visualization</div>
      </div>
      <div
-        className={`module-list ${
-          activeModule === "market" && "active"
-        }`}
-        onClick={() => setActiveModule("market")}
+        className={`module-list ${activeModule === "market" && "active"}`}
+        onClick={() => {
+          setActiveModule("market");
+          setToggleUI(false);
+        }}
      >
        <div className="icon">
          <CartIcon isActive={activeModule === "market"} />
--- a/app/src/components/ui/componets/RealTimeVisulization.tsx
+++ b/app/src/components/ui/componets/RealTimeVisulization.tsx
@ -5,6 +5,7 @@ import AddButtons from "./AddButtons";
 import { useSelectedZoneStore } from "../../../store/useZoneStore";
 import DisplayZone from "./DisplayZone";
 import Scene from "../../../modules/scene/scene";
+import useModuleStore from "../../../store/useModuleStore";
 import { getZonesApi } from "../../../services/realTimeVisulization/zoneData/getZones";


@ -38,6 +39,8 @@ const RealTimeVisulization: React.FC = () => {
  const [hiddenPanels, setHiddenPanels] = React.useState<Side[]>([]);
  const containerRef = useRef<HTMLDivElement>(null);
  const { isPlaying } = usePlayButtonStore();
+  const { activeModule } = useModuleStore();
+
  const [zonesData, setZonesData] = useState<FormattedZoneData>({});
  const { selectedZone, setSelectedZone } = useSelectedZoneStore();

@ -98,34 +101,44 @@ const RealTimeVisulization: React.FC = () => {
      id="real-time-vis-canvas"
      className={`realTime-viz canvas ${!isPlaying ? "playActiveFalse" : ""}`}
      style={{
-        height: isPlaying ? "100vh" : "",
-        left: isPlaying ? "0%" : "",
+        height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
+        width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
+        left: isPlaying || activeModule !== "visualization" ? "0%" : "",
      }}
    >
      <div
        className="scene-container"
-        style={{ height: "100%", width: "100%" }}
+        style={{
+          height: "100%",
+          width: "100%",
+          borderRadius: isPlaying || activeModule !== "visualization" ? "" : "6px",
+        }}
      >
        <Scene />
      </div>
-      {!isPlaying && (
-        <AddButtons
-          hiddenPanels={hiddenPanels}
-          setHiddenPanels={setHiddenPanels}
-          selectedZone={selectedZone}
-          setSelectedZone={setSelectedZone}
-        />
+      {activeModule === "visualization" && (
+        <>
+          <DisplayZone
+            zonesData={zonesData}
+            selectedZone={selectedZone}
+            setSelectedZone={setSelectedZone}
+          />
+
+          {!isPlaying && (
+            <AddButtons
+              hiddenPanels={hiddenPanels}
+              setHiddenPanels={setHiddenPanels}
+              selectedZone={selectedZone}
+              setSelectedZone={setSelectedZone}
+            />
+          )}
+
+          <Panel
+            selectedZone={selectedZone}
+            setSelectedZone={setSelectedZone}
+          />
+        </>
      )}
-      <DisplayZone
-        zonesData={zonesData}
-        selectedZone={selectedZone}
-        setSelectedZone={setSelectedZone}
-      />
-      <Panel
-        selectedZone={selectedZone}
-        hiddenPanels={hiddenPanels}
-        setSelectedZone={setSelectedZone}
-      />{" "}
    </div>
  );
 };
--- a/app/src/modules/builder/groups/zoneGroup.tsx
+++ b/app/src/modules/builder/groups/zoneGroup.tsx
@ -128,6 +128,25 @@ const ZoneGroup: React.FC = () => {
        const userId = localStorage.getItem('userId');
        const organization = (email!.split("@")[1]).split(".")[0];

+        const calculateCenter = (points: number[][]) => {
+            if (!points || points.length === 0) return null;
+
+            let sumX = 0, sumY = 0, sumZ = 0;
+            const numPoints = points.length;
+
+            points.forEach(([x, y, z]) => {
+                sumX += x;
+                sumY += y;
+                sumZ += z;
+            });
+
+            return [sumX / numPoints, sumY / numPoints, sumZ / numPoints] as [number, number, number];
+        };
+
+        const target: [number, number, number] | null = calculateCenter(zone.points);
+        if (!target) return;
+        const position = [target[0], 75, target[2]];
+
        const input = {
            userId: userId,
            organization: organization,
@ -135,6 +154,8 @@ const ZoneGroup: React.FC = () => {
                zoneName: zone.zoneName,
                zoneId: zone.zoneId,
                points: zone.points,
+                viewPortCenter: target,
+                viewPortposition: position,
                layer: zone.layer
            }
        }
@ -148,6 +169,25 @@ const ZoneGroup: React.FC = () => {
        const userId = localStorage.getItem('userId');
        const organization = (email!.split("@")[1]).split(".")[0];

+        const calculateCenter = (points: number[][]) => {
+            if (!points || points.length === 0) return null;
+
+            let sumX = 0, sumY = 0, sumZ = 0;
+            const numPoints = points.length;
+
+            points.forEach(([x, y, z]) => {
+                sumX += x;
+                sumY += y;
+                sumZ += z;
+            });
+
+            return [sumX / numPoints, sumY / numPoints, sumZ / numPoints] as [number, number, number];
+        };
+
+        const target: [number, number, number] | null = calculateCenter(zone.points);
+        if (!target) return;
+        const position = [target[0], 75, target[2]];
+
        const input = {
            userId: userId,
            organization: organization,
@ -155,6 +195,8 @@ const ZoneGroup: React.FC = () => {
                zoneName: zone.zoneName,
                zoneId: zone.zoneId,
                points: zone.points,
+                viewPortCenter: target,
+                viewPortposition: position,
                layer: zone.layer
            }
        }
@ -162,6 +204,7 @@ const ZoneGroup: React.FC = () => {
        socket.emit('v2:zone:set', input);
    };

+
    const deleteZoneFromBackend = async (zoneId: string) => {

        const email = localStorage.getItem('email');
--- a/app/src/pages/Project.tsx
+++ b/app/src/pages/Project.tsx
@ -22,8 +22,8 @@ const Project: React.FC = () => {
  let navigate = useNavigate();
  const { activeModule } = useModuleStore();

-  const { userName, setUserName } = useUserName();
-  const { organization, setOrganization } = useOrganization();
+  const { setUserName } = useUserName();
+  const { setOrganization } = useOrganization();
  const { setFloorItems } = useFloorItems();
  const { setWallItems } = useWallItems();
  const { setZones } = useZones();
@ -50,21 +50,15 @@ const Project: React.FC = () => {
  return (
    <div className="project-main">
      <ModuleToggle />
-
-      {!isPlaying && <SideBarLeft />}
-      {!isPlaying && <SideBarRight />}
-      {activeModule === "visualization" && <RealTimeVisulization />}
-      {/* {activeModule !== "visualization" && <Scene />} */}
-      <Tools />
-
-      {/* <Scene /> */}
+      <SideBarLeft />
+      <SideBarRight />
+      <RealTimeVisulization />
+      {activeModule !== "market" && <Tools />}
      {/* <SimulationUI /> */}
      <div
        className="canvas-container"
        style={{ height: "100vh", width: "100vw" }}
-      >
-        {activeModule !== "visualization" && <Scene />}
-      </div>
+      ></div>
    </div>
  );
 };
--- a/app/src/pages/UserAuth.tsx
+++ b/app/src/pages/UserAuth.tsx
@ -141,7 +141,7 @@ const UserAuth: React.FC = () => {
          </div>
          {!isSignIn && (
            <div className="policy-checkbox">
-              <input type="checkbox" name="" id="" />
+              <input type="checkbox" name="" id="" required/>
              <div className="label">
                I have read and agree to the terms of service
              </div>
--- a/app/src/styles/components/tools.scss
+++ b/app/src/styles/components/tools.scss
@ -14,7 +14,7 @@
  width: fit-content;
  transition: width 0.2s;
  background-color: var(--background-color);
-  z-index: #{$z-index-tools};
+  z-index: #{$z-index-default};
  .split {
    height: 20px;
    width: 2px;
--- a/app/src/styles/layout/sidebar.scss
+++ b/app/src/styles/layout/sidebar.scss
@ -662,16 +662,30 @@
      .collapse-header-container {
        @include flex-space-between;
        padding-right: 12px;
+        margin-top: 8px;
+        border-top: 1px solid var(--border-color);
+        border-bottom: 1px solid var(--border-color);
+        .header {
+          color: var(--accent-color);
+        }
      }
      .process-container {
+        padding: 0 12px;
+        margin: 6px 0;
        .value {
+          @include flex-space-between;
          .arrow-container {
+            height: 16px;
+            width: 16px;
          }
          .active {
+            rotate: 90deg;
          }
        }
        .children-drop {
          .value {
+            padding: 6px;
+            border-left: 1px solid var(--border-color);
          }
        }
      }
@ -716,12 +730,17 @@
  }
  .global-properties-container,
  .analysis-main-container,
-  .asset-properties-container {
+  .asset-properties-container,
+  .zone-properties-container {
    .header {
+      @include flex-space-between;
      padding: 8px 12px;
      border-top: 1px solid var(--highlight-accent-color);
      border-bottom: 1px solid var(--highlight-accent-color);
      color: var(--accent-color);
+      .input-value {
+        color: inherit;
+      }
    }
    .input-container {
      @include flex-center;
@ -740,7 +759,8 @@
      }
    }
    .optimize-button,
-    .generate-report-button {
+    .generate-report-button,
+    .button-save {
      @include flex-center;
      background-color: var(--accent-color);
      color: var(--primary-color);
@ -759,7 +779,11 @@
    }
    .custom-input-container {
      .header {
+        @include flex-space-between;
        border: none;
+        .eyedrop-button {
+          @include flex-center;
+        }
      }
      .inputs-container {
        @include flex-space-between;
--- a/app/src/styles/pages/realTimeViz.scss
+++ b/app/src/styles/pages/realTimeViz.scss
@ -1,35 +1,155 @@
@use "../abstracts/variables.scss" as *;
-@use "../abstracts/mixins.scss" as *;

 // Main Container
 .realTime-viz {
  background-color: var(--background-color);
  border-radius: 20px;
  box-shadow: $box-shadow-medium;
-  width: 100%;
-  height: 100%;
+  width: calc(100% - (320px + 270px + 90px));
+  height: calc(100% - (200px + 80px));
  position: absolute;
-  top: 0;
-  left: 0;
-  transform: scale(1);
+  top: 50%;
+  left: calc(270px + 45px);
+  transform: translate(0, -50%);
+  border-radius: #{$border-radius-medium};
+  transition: all 0.2s;
+  z-index: #{$z-index-default};
+
  .scene-container {
-    width: 100%;
-    height: 100%;
+    overflow: hidden;
+  }

-    canvas {
-      width: 100vw !important;
-      height: 100% !important;
+  .icon {
+    display: flex;
+    align-items: center;
+    position: relative;
+  }

+  .icons-container {
+    .icon {
+      &:first-child {
+        &::after {
+          display: none;
+        }
+      }
    }
  }
-  // Panels
+
+  .zoon-wrapper {
+    display: flex;
+    background-color: var(--background-color);
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translate(-50%, 0);
+    gap: 6px;
+    padding: 4px;
+    border-radius: 8px;
+    max-width: 80%;
+    overflow: auto;
+    max-width: calc(100% - 450px);
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .zone {
+      width: auto;
+      background-color: var(--background-color);
+      border-radius: 6px;
+      padding: 4px 8px;
+      white-space: nowrap;
+      font-size: $small;
+    }
+
+    .active {
+      background-color: var(--accent-color);
+      color: var(--background-color);
+      // color: #FCFDFD !important;
+    }
+  }
+
+  .zoon-wrapper.bottom {
+    bottom: 210px;
+  }
+
+  @media (max-width: 1024px) {
+    width: 80%; // Increase width to take more space on smaller screens
+    height: 500px; // Reduce height to fit smaller screens
+    left: 50%; // Center horizontally
+
+    .main-container {
+      margin: 0 15px; // Reduce margin for better spacing
+    }
+
+    .zoon-wrapper {
+      bottom: 5px; // Adjust position for smaller screens
+
+      &.bottom {
+        bottom: 150px; // Adjust for bottom placement
+      }
+    }
+  }
+
+  .content-container {
+    display: flex;
+    height: 100vh;
+    transition: all 0.3s ease;
+  }
+
+  .main-container {
+    position: relative;
+    flex: 1;
+    height: 600px;
+    background-color: rgb(235, 235, 235);
+    margin: 0 30px;
+    transition: height 0.3s ease, margin 0.3s ease;
+
+    .zoon-wrapper {
+      display: flex;
+      background-color: rgba(224, 223, 255, 0.5);
+      position: absolute;
+      bottom: 10px;
+      left: 50%;
+      transform: translate(-50%, 0);
+      gap: 6px;
+      padding: 4px;
+      border-radius: 8px;
+      max-width: 80%;
+      overflow: auto;
+      transition: transform 0.3s ease;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      .zone {
+        width: auto;
+        background-color: $background-color;
+        border-radius: 6px;
+        padding: 4px 8px;
+        white-space: nowrap;
+        cursor: pointer;
+        transition: background-color 0.3s ease;
+
+        &.active {
+          background-color: var(--primary-color);
+          color: var(--accent-color);
+        }
+      }
+
+      &.bottom {
+        bottom: 210px;
+      }
+    }
+  }
+
  .panel {
    position: absolute;
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border-radius: 6px;
-    overflow: hidden;
+    overflow: visible !important;

    .panel-content {
      position: relative;
@ -46,7 +166,7 @@
      }

      .chart-container {
-        width: 229px;
+        width: 100%;
        height: 200px;
        max-height: 100%;
        border: 1px dotted #a9a9a9;
@ -66,125 +186,54 @@
        color: var(--primary-color);
      }
    }
-  }

-  // Panels for each side
-  .left-panel,
-  .right-panel {
-    .chart-container {
-      padding: 10px;
-      width: 100% !important;
-      height: 250px !important;
+    &.top-panel,
+    &.bottom-panel {
+      left: 0;
+      right: 0;

-    }
-  }
+      .fullScreen {
+        background-color: red;
+      }

-  .top-panel,
-  .bottom-panel {
-    .chart-container {
-      padding: 10px;
-      width: 300px !important;
-      height: 100% !important;
-    }
-  }
+      .panel-content {
+        display: flex;
+        flex-direction: row;

-  // Zone Wrapper
-  .zoon-wrapper {
-    display: flex;
-    background-color: var(--background-color);
-    position: absolute;
-    bottom: 10px;
-    left: 50%;
-    transform: translate(-50%, 0);
-    gap: 6px;
-    padding: 4px;
-    border-radius: 8px;
-    max-width: 80%;
-    overflow: auto;
-    max-width: calc(100% - 450px);
-    z-index: 11000000000;
-
-    &::-webkit-scrollbar {
-      display: none;
+        .chart-container {
+          height: 100%;
+          width: 200px;
+        }
+      }
    }

-    .zone {
-      width: auto;
-      background-color: var(--background-color);
-      border-radius: 6px;
-      padding: 4px 8px;
-      white-space: nowrap;
-      font-size: $small;
+    &.top-panel {
+      top: 0;
    }

-    .active {
-      background-color: var(--accent-color);
-      color: var(--background-color);
+    &.bottom-panel {
+      bottom: 0;
    }
-  }

-  .zoon-wrapper.bottom {
-    bottom: 250px;
-  }
+    &.left-panel {
+      left: 0;
+      top: 0;
+      bottom: 0;

-  .content-container {
-    display: flex;
-    height: 100vh;
-    transition: all 0.3s ease;
-  }
+      .chart-container {
+        width: 100%;
+        height: 180px;
+      }
+    }

-  .main-container {
-    position: relative;
-    flex: 1;
-    height: 600px;
-    background-color: rgb(235, 235, 235);
-    margin: 0 30px;
-    transition: height 0.3s ease, margin 0.3s ease;
+    &.right-panel {
+      right: 0;
+      top: 0;
+      bottom: 0;
+    }
  }
 }

-.playActiveFalse {
-  position: absolute;
-  top: 50%;
-  left: calc(270px + 45px);
-  transform-origin: left;
-  transform: translate(0, -50%) scaleX(0.6) scaleY(0.65);
-  width: calc((100vw * 1.65) - (320px + 270px + 70px) / 0.6);
-  z-index: 100;
-
-  .scene-container {
-    width: 100%;
-    height: 100%;
-
-    canvas {
-      width: calc((100vw * 1.65) - (320px + 270px + 70px) / 0.6) !important;
-      height: 100% !important;
-
-    }
-  }
-
-  &.top {
-    transform: scale(1.5);
-  }
-
-  &.right {
-    transform: scale(1.5);
-  }
-
-  &.bottom {
-    transform: scale(1.5);
-  }
-
-  &.left {
-    transform: scale(1.5);
-  }
-
-  .zoon-wrapper {
-    transform: translate(-50%, 0) scale(1.5);
-  }
-}
-
-
 // Side Buttons
 .side-button-container {
  position: absolute;
@ -224,6 +273,7 @@
    height: 18px;
    display: flex;
    justify-content: center;
+    // align-items: center;
    background-color: var(--accent-color);
    border: none;
    color: var(--background-color);
@ -231,54 +281,116 @@
  }

  &.top {
-    top: -35px;
+    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 6px;
-    transform: scale(1.5);
  }

  &.right {
-    right: -35px;
+    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    gap: 6px;
-    transform: scale(1.5);
  }

  &.bottom {
-    bottom: -35px;
+    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    flex-direction: row;
    gap: 6px;
-    transform: scale(1.5);
  }

  &.left {
-    left: -35px;
+    left: -30px;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    gap: 6px;
-    transform: scale(1.5);
  }
 }

-.right.side-button-container,
+.right.side-button-container {
+  .extra-Bs {
+    flex-direction: column;
+  }
+}
+
 .left.side-button-container {
  .extra-Bs {
    flex-direction: column;
  }
 }

-.top-panel,
-.bottom-panel {
-  .panel-content {
+// Theme Container
+.theme-container {
+  width: 250px;
+  padding: 12px;
+  box-shadow: 1px -3px 4px 0px rgba(0, 0, 0, 0.11);
+  border-radius: 8px;
+  background-color: white;
+  position: absolute;
+  top: 20px;
+  right: -100%;
+  transform: translate(-0%, 0);

+  h2 {
+    font-size: 12px;
+    margin-bottom: 8px;
+    color: #2b3344;
+  }
+
+  .theme-preset-wrapper {
    display: flex;
-    flex-direction: row !important;
+    gap: 5px;
+    flex-wrap: wrap;
+
+    .theme-preset {
+      display: flex;
+      gap: 2px;
+      margin-bottom: 10px;
+      border: 1px solid $border-color;
+      padding: 5px 10px;
+      border-radius: 4px;
+      transition: border 0.3s ease;
+
+      &.active {
+        border: 1px solid var(--primary-color);
+
+        &::after {
+          content: "";
+          position: absolute;
+          top: 1px;
+          left: 1px;
+          width: 10px;
+          height: 10px;
+          background-color: var(--primary-color);
+          border-radius: 50%;
+        }
+      }
+    }
+  }
+
+  .custom-color {
+    display: flex;
+    justify-content: space-between;
+
+    .color-displayer {
+      display: flex;
+      gap: 5px;
+      align-items: center;
+      border: 1px solid var(--accent-color);
+      border-radius: 4px;
+      padding: 0 5px;
+
+      input {
+        border: none;
+        outline: none;
+        border-radius: 50%;
+      }
+    }
  }
 }